/* =============================================================================
   DreamStation - CSS des fiches produit - dsperso.css

   FR : Feuille servie par le module (Reglages > Source du CSS = "Fichier +
        champ"). Elle remplace le contenu qui vivait dans le champ
        "CSS personnalise", devenu trop long pour lui : la colonne
        ps_configuration.value est un TEXT MySQL, plafonne a 65 535 octets,
        et le module coupait au-dela sans rien dire.

        Le champ reste actif et il est injecte APRES ce fichier : tout ce que
        vous y ecrivez passe devant. Pour modifier une regle d'ici, recopiez
        son selecteur dans le champ et changez ce que vous voulez, sans
        toucher au module. Quand la retouche est validee, elle est versee ici
        a la version suivante.

        Pour revenir en arriere : Source du CSS = "Champ seul", puis recoller
        ce fichier dans le champ. Rien n'est verrouille.

   EN : Stylesheet served by the module. The back-office field is still active
        and injected AFTER this file, so anything written there wins. To
        change a rule from here, copy its selector into the field.
   ============================================================================= */

/* =========================================================
   DREAMSTATION — CSS perso dsfiches — v3 (11/08/2026)
   Corrections v3.1 : #wrapper sur la regle qui masque le prix
   barre en double, retour a Poppins (police de materiel.net),
   miniature de galerie selectionnee en bleu au lieu d'orange.
   Correction v3.3 (21/08/2026) : section 20 reecrite. Colonnes
   flottantes remises en flex, `overflow` de <main> neutralise
   (c'est lui qui bloquait la photo collante), colonne de gauche
   elargie a 50 %. Quatre valeurs ajustables signalees REGLAGE.
   Correction v3.5 : photo collante RETIREE (elle recouvrait le
   bloc conseil), et reglage au pixel du bloc conseil par `top`,
   qui fonctionne quoi qu'il arrive.
   Ajout v3.6 : section 21, onglets arrondis. Cinq styles, un
   seul actif a la fois, les quatre autres en commentaire.
   v3.7 : style 05 (bandeau bleu teinte) active a la place du 01.
   v3.8 : correctif des fleches de galerie (section 22).
   v3.9 : section 23 reecrite. Les groupes sont deja produits cote
   serveur par sldfeaturesbygroup : c'est .groupfeature-title qu'il
   faut habiller, pas les lignes .dsi-groupe de dsfiches.
   v4.0 : section 23 refondue — etiquette grise en casse normale,
   valeur foncee alignee a droite, filets a la place des fonds
   alternes, chevron du repli mobile.
   v4.1 : teinte des bandeaux passee en opaque (#f0f2ff). En
   semi-transparent, elle laissait passer le fond des lignes et
   certains bandeaux sortaient en bleu soutenu.
   v4.2 : repartition sur deux colonnes en ordinateur (equilibrage
   automatique par le navigateur).
   v4.3 : le bloc sort de sa demi-colonne .block-fiche et prend
   toute la largeur ; table-layout:fixe pour empecher les colonnes
   de se chevaucher.
   v4.4 : la colonne est DEPLACEE dans le panneau d'onglet par le
   module, en emportant sa classe .col-md-6 — c'est elle qui la
   maintenait a 50 %. Les deux emplacements sont vises.
   ========================================================= */


/* =========================================================
   1. FOND DE FICHE
   ========================================================= */
#product .product-container{
  background:#fff!important;
  border:1px solid #ececf2!important;
  border-radius:14px!important;
}


/* =========================================================
   2. ZONE PRIX
   Ancien prix + pastille remise sur UNE ligne, prix dessous.
   #wrapper est obligatoire : le theme cible en 3 ID.
   ========================================================= */

/* Le module injecte un 2e bloc remise AVANT le prix : on le masque.
   #wrapper obligatoire, sinon la regle display:flex ci-dessous (3 ID)
   l'emporte et le doublon reapparait. */
#product #wrapper #priceContent .product-prices-inner > .product-discount:first-child{
  display:none!important;
}

#product #wrapper #priceContent .product-prices-inner{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
}
#product #wrapper #priceContent .product-discount{
  order:-1!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:10px!important;
  background:none!important;
  margin:0!important;
  width:auto!important;
}
#product #wrapper #priceContent .product-discount .regular-price{
  order:-1!important;
  flex:0 0 auto!important;
  display:inline-block!important;
  width:auto!important;
  color:#1b1b2b!important;
  font-size:17px!important;
  font-weight:400!important;
  text-decoration:line-through!important;
  margin:0!important;
}
/* Le theme dessine une fausse barre diagonale bleue : on la supprime */
#product #wrapper #priceContent .product-discount .regular-price:after{
  display:none!important;
}
#product #wrapper #priceContent .product-discount .discount{
  flex:0 0 auto!important;
  display:inline-block!important;
  background:#fdecee!important;
  color:#E11B24!important;
  border-radius:6px!important;
  padding:2px 8px!important;
  margin:0!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
#product #wrapper #priceContent .current-price span{
  color:#E11B24!important;
  font-size:34px!important;
  font-weight:500!important;
  line-height:1.1!important;
}

/* Poppins : police du theme ET de materiel.net.
   Ce qui fait leur look, c'est la graisse et le resserrement. */
#product #wrapper #priceContent .current-price span{
  font-family:Poppins,Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:-.5px!important;
}
#product #wrapper #priceContent .product-discount .regular-price,
#product #wrapper #priceContent .product-discount .discount{
  font-family:Poppins,Arial,sans-serif!important;
  font-variant-numeric:tabular-nums!important;
}


/* =========================================================
   3. GALERIE — miniature selectionnee
   Le theme la cerne en orange #ffa031 (3 ID) : on passe au bleu.
   ========================================================= */
#product #wrapper #content .product-images > li.thumb-container > .thumb.selected,
#product #wrapper #content .product-images > li.thumb-container > .thumb:hover{
  border-color:#2F5EF7!important;
  border-width:2px!important;
  border-radius:8px!important;
}


/* =========================================================
   4. BOUTON PANIER
   ========================================================= */
#product .add-to-cart{
  background:#2F5EF7!important;
  border:none!important;
}
#product .add-to-cart:hover{
  background:#2449c9!important;
}


/* =========================================================
   5. DISPO MAGASINS + ALMA
   ========================================================= */
/* Alma et dispo magasins partagent une ligne en demi-colonnes,
   d'ou les pastilles Alma qui passent a la ligne.
   On cible UNIQUEMENT les colonnes de la ligne #alma-dispo :
   surtout pas :has(), qui matcherait aussi les colonnes parentes.
   flex-wrap:wrap est indispensable, sinon la 2e colonne a 100%
   deborde a droite au lieu de passer dessous. */
#product #alma-dispo{
  display:flex!important;
  flex-wrap:wrap!important;
}
#product #alma-dispo > .col-md-6{
  flex:0 0 100%!important;
  max-width:100%!important;
  width:100%!important;
  float:none!important;
}
#product #dispomagasin{
  background:#f7f7fb!important;
  border:1px solid #ececf2!important;
  border-radius:12px!important;
  padding:12px 14px!important;
}
#product #dispomagasin .elem-product-thumbnail{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:5px 0!important;
}
#product #dispomagasin p{
  font-size:13px!important;   /* le theme force 10px */
  margin:0!important;
  line-height:1.3!important;
}
#product #dispomagasin p.in-stock{
  color:#1a9c5b!important;
  font-weight:700!important;
}
#product #dispomagasin img{
  width:16px!important;
  height:16px!important;
}

/* Livraison : carte SEPAREE, posee sous la rangee Alma/dispo.
   Depannage CSS — le vrai emplacement est le module blockreassurance. */
#product #alma-dispo:after{
  content:"Livraison à domicile ou en relais"!important;
  flex:0 0 calc(100% - 30px)!important;
  width:calc(100% - 30px)!important;
  box-sizing:border-box!important;
  margin:14px 15px 0!important;
  padding:16px 16px 16px 52px!important;
  background:#f7f7fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1b2b'%3E%3Cpath d='M20 8h-3V4H3a2 2 0 0 0-2 2v11h2a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2v-5l-3-4zM6 18.5A1.5 1.5 0 1 1 7.5 17 1.5 1.5 0 0 1 6 18.5zM17 9.5h2.5l1.96 2.5H17V9.5zm1 9a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5z'/%3E%3C/svg%3E") no-repeat left 18px center/24px 24px!important;
  border:1px solid #ececf2!important;
  border-radius:12px!important;
  font-size:15px!important;
  font-weight:700!important;
  color:#1b1b2b!important;
}
/* Le widget est enveloppe dans .alma-pp-container : sans ca, la carte
   Alma est plus etroite que la carte dispo juste en dessous. */
#product .alma-pp-container{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}

/* Alma : meme largeur que le bloc dispo, pour l'harmonie */
#product [id^="alma-installments"]{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  background:#f7f7fb!important;
  border:1px solid #ececf2!important;
  border-radius:12px!important;
  padding:14px 16px!important;
}

/* --- Interieur du widget Alma ---
   On ne cible QUE les classes semantiques alma-payment-plans-* :
   les autres (_2Kqjn, _3dG_J...) sont generees et changent a chaque
   mise a jour d'Alma. */

/* Le widget dessine SA propre boite blanche a l'interieur : on
   l'efface pour ne garder que la carte grise ci-dessus. */
#product .alma-payment-plans-container{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
}

/* Pastilles a gauche, logo Alma a droite */
#product .alma-payment-plans-eligibility-line{
  display:flex!important;
  flex-direction:row-reverse!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
}
#product .alma-payment-plans-eligibility-line > svg{
  width:52px!important;
  height:auto!important;
  flex:0 0 auto!important;
}

/* Les pastilles : TOUJOURS sur une seule ligne */
#product .alma-payment-plans-eligibility-options{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
#product .alma-payment-plans-eligibility-options > div{
  flex:0 0 auto!important;
  min-width:0!important;
  padding:8px 11px!important;
  background:#fff!important;
  border:1px solid #d9d9e3!important;
  border-radius:8px!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1!important;
  color:#1b1b2b!important;
  text-align:center!important;
  opacity:1!important;
  white-space:nowrap!important;
}
/* Selecteurs volontairement plus specifiques que la regle ci-dessus :
   sinon "> div" l'emporte et l'echeance active reste blanche. */
#product .alma-payment-plans-eligibility-options > div.alma-payment-plans-active-option{
  background:#1b1b2b!important;
  border-color:#1b1b2b!important;
  color:#ffffff!important;
}
#product .alma-payment-plans-eligibility-options > div.alma-payment-plans-not-eligible-option{
  opacity:1!important;
}

/* Ligne "Payez en ..." / lien conditions */
#product .alma-payment-plans-payment-info{
  margin-top:10px!important;
  font-size:13px!important;
  line-height:1.4!important;
}


/* =========================================================
   6. RECAPITULATIF
   ========================================================= */
#product .accessories_table_price{
  background:#f7f7fb!important;
  border:1px solid #ececf2!important;
  border-radius:14px!important;
  padding:12px 16px!important;
}
#product .accessories_table_price_content{
  width:100%!important;
  margin:0!important;
  border-collapse:collapse!important;
}
#product .accessories_table_price_content td{
  border:none!important;
  padding:7px 0!important;
  font-size:13px!important;
  vertical-align:baseline!important;
}
#product .accessories_table_price_content td.left-column{
  text-align:left!important;
  color:#4a4a5a!important;
  text-decoration:none!important;   /* le module souligne en style inline */
}
/* La ligne machine porte un style inline : on la distingue par le gras */
#product .accessories_table_price_content td.left-column[style]{
  font-weight:600!important;
  color:#1b1b2b!important;
}
#product .accessories_table_price_content td.right-column{
  text-align:right!important;
  white-space:nowrap!important;      /* evite le "EUR" tout seul a la ligne */
  width:1%!important;
  color:#1b1b2b!important;
  font-variant-numeric:tabular-nums!important;
}
#product .accessories_table_price_content a,
#product .accessories_table_price_content .ma_accessory_name{
  text-decoration:none!important;
  color:inherit!important;
  font-weight:400!important;
}
#product .accessories_table_price_content tr:last-child td{
  border-top:1px solid #e2e2ec!important;
  padding-top:11px!important;
  font-weight:700!important;
  font-size:15px!important;
}


/* =========================================================
   7. TITRES DES GROUPES DE CARACTERISTIQUES
   (module sldfeaturesbygroup, laisse sans couleur)
   ========================================================= */
#product .groupfeature-title{
  color:#2F5EF7!important;
  font-size:18px!important;
  text-transform:uppercase!important;
  padding:0!important;
  margin:30px 0 12px!important;
}


/* =========================================================
   8. BLOC "OPTIONS DISPONIBLES"
   ========================================================= */

/* --- Conteneur --- */
#product #group_accessories{
  background:#fff!important;
  border:1px solid #ececf2!important;
  border-radius:14px!important;
  padding:22px!important;
  color:#1b1b2b!important;
}
#product #group_accessories h3{
  font-size:20px!important;
  letter-spacing:.3px!important;
  margin:0 0 18px!important;
  color:#1b1b2b!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
/* Picto reglages. SVG encode en %3C : jamais de chevron litteral,
   le module le filtrerait a l'enregistrement. */
#product #group_accessories h3:before{
  content:""!important;
  display:inline-block!important;
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5EF7' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='8' x2='21' y2='8'/%3E%3Cline x1='3' y1='16' x2='21' y2='16'/%3E%3Ccircle cx='9' cy='8' r='2.6' fill='%23ffffff'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/contain!important;
}
#product #group_accessories h4{
  font-size:15px!important;
  color:#2F5EF7!important;
  margin:0 0 14px!important;
}
#product #group_accessories .hsma_customize,
#product #group_accessories .hsma_package,
#layer_accessory_customization .hsma_pack_card a{
  color:#2F5EF7!important;
}

/* --- Le tableau devient une pile de cartes --- */
#product #group_accessories .accessorygroup,
#product #group_accessories .accessorygroup tbody{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
#product #group_accessories .accessorygroup tr.clearfix{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:12px 14px!important;
  margin-bottom:10px!important;
  background:#fff!important;
  border:1px solid #ececf2!important;
  border-radius:12px!important;
  transition:border-color .2s,box-shadow .2s!important;
}
#product #group_accessories .accessorygroup tr.clearfix:hover{
  border-color:#2F5EF7!important;
  box-shadow:0 4px 14px rgba(47,94,247,.10)!important;
}
#product #group_accessories .accessorygroup td{
  display:block!important;
  width:auto!important;
  padding:0!important;
  border:none!important;
}
#product #group_accessories .accessorygroup tr.clearfix > td:last-child{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  row-gap:8px!important;
}

/* --- Case a cocher --- */
#product #group_accessories input[type=checkbox],
#product #group_accessories input[type=radio]{
  accent-color:#2F5EF7!important;
  width:18px!important;
  height:18px!important;
}

/* --- Vignette --- */
#product #group_accessories .hsma_images-container{
  flex:0 0 64px!important;
  width:64px!important;
}
#product #group_accessories .accessory_image{
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
  padding:4px!important;
  background:#fff!important;
  border:1px solid #f0f0f5!important;
  border-radius:10px!important;
}
#product #group_accessories .product-cover .layer{
  display:none!important;
}

/* --- Nom --- */
#product #group_accessories .block_accessory_name{
  margin:0!important;
  flex:1 1 160px!important;
  min-width:160px!important;
  overflow-wrap:anywhere!important;
}
#product #group_accessories .ma_accessory_name{
  font-size:14px!important;
  font-weight:700!important;
  color:#1b1b2b!important;
  text-decoration:none!important;
}

/* --- Prix a droite --- */
#product #group_accessories .accessory_price{
  flex:0 0 auto!important;
  margin-left:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
}
#product #group_accessories .accessory_price > span:first-child{
  font-size:16px!important;
  font-weight:800!important;
  color:#1b1b2b!important;
  white-space:nowrap!important;
}

/* --- Bouton "Ajouter" de ligne : supprime (doublon de la case) --- */
#product #group_accessories .hs_multi_accessories_add_to_cart{
  display:none!important;
}

/* --- Petits ecrans --- */
@media (max-width:575px){
  #product #group_accessories .accessorygroup tr.clearfix{
    flex-wrap:wrap!important;
  }
}


/* =========================================================
   9. ESPACEMENTS
   Un seul ecart pour toute la colonne. On utilise "gap" sur
   le conteneur flex plutot que des marges bloc par bloc :
   tous les intervalles sont alors egaux par construction et
   il n'y a qu'une valeur a changer.
   ========================================================= */
#product #wrapper .product-infos{
  gap:14px!important;
}
#product #wrapper #alma-dispo{
  gap:14px!important;
  margin:0!important;
}
#product #wrapper #multiAccessoriesTab{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}

/* Toutes les marges individuelles sont remises a zero :
   c'est le gap qui fait les ecarts, et lui seul. */
#product #wrapper #headInfos,
#product #wrapper .product-infos h1.h1,
#product #wrapper .product-container h1,
#product #wrapper #priceContent,
#product #wrapper #addcart-garant,
#product #wrapper #alma-dispo > .col-md-6,
#product #wrapper #alma-dispo:after,
#product #wrapper .alma-pp-container,
#product #wrapper #dispomagasin,
#product #wrapper [id^="alma-installments"],
#product #wrapper .accessories_table_price,
#product #wrapper #group_accessories,
#product #wrapper .product-actions .dsf-ra{
  margin:0!important;
}
#product #wrapper #multiAccessoriesTab,
#product #wrapper #fmmPreOrder,
#product #wrapper #afterProductAvailabilityHook{
  margin:0!important;
  padding:0!important;
}
#product #wrapper .product-actions .dsf-ra{
  padding-top:14px!important;
}

/* =========================================================
   10. BOUTON "RETOUR EN HAUT"
   Le theme pose un lien de classe back-to-top en bas a droite, au
   meme endroit que le bouton de la barre d'achat. On le
   remonte au-dessus de la barre plutot que de le supprimer :
   sur une fiche aussi longue, il est utile.
   Pour le supprimer purement et simplement sur les fiches,
   remplacer tout le bloc par :
   body#product .back-to-top{display:none!important;}
   ========================================================= */
body#product .back-to-top{
  bottom:96px!important;
  bottom:calc(88px + env(safe-area-inset-bottom))!important;
  z-index:9989!important;
}
@media (max-width:575px){
  body#product .back-to-top{
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }
}


/* =========================================================
   11. CADRE NOIR AU CLIC (logo, liens, boutons)
   Le theme applique une bordure de focus a TOUT clic :
     a:focus{outline:5px auto -webkit-focus-ring-color}
   C'est ce cadre noir qui entoure le logo quand on clique.
   On le retire pour la SOURIS et on le garde pour le
   CLAVIER : les personnes qui naviguent en tabulation ont
   besoin de voir ou elles se trouvent. Ne jamais mettre un
   simple outline:none partout, ce serait rendre le site
   inutilisable au clavier.
   ========================================================= */
a:focus:not(:focus-visible),
a:focus:not(:focus-visible) img,
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.logo:focus,
img.logo:focus{
  outline:none!important;
  outline-offset:0!important;
  box-shadow:none!important;
  border-color:transparent!important;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:2px solid #2F5EF7!important;
  outline-offset:2px!important;
}


/* =========================================================
   12. DRAPEAU PROMO SUR LA FICHE PRODUIT
   Le drapeau existe bien dans le HTML (PROMOS -250,00 EUR),
   il a meme ete style par le theme... puis masque :
     #headInfos .product-flags li.product-flag.discount{
       background-color:#e4001f;border-radius:10px 0 30px 0;
       display:none}
   On le rallume. Trois ID pour passer devant.
   ========================================================= */
#product #wrapper #headInfos .product-flags li.product-flag.discount{
  display:inline-block!important;
}
#product #wrapper #headInfos .product-flags{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  margin-bottom:10px!important;
}
/* Les deux drapeaux se lisent comme un seul bandeau :
   angles arrondis a l'exterieur du groupe seulement. */
#product #wrapper #headInfos .product-flags li.product-flag{
  border-radius:0!important;
  margin:0!important;
}
#product #wrapper #headInfos .product-flags li.product-flag:first-child{
  border-top-left-radius:10px!important;
}
#product #wrapper #headInfos .product-flags li.product-flag:last-child{
  border-bottom-right-radius:30px!important;
}

/* --- Harmonisation des trois pastilles du haut de fiche ---
   Le theme impose au bloc "Date de sortie" une largeur fixe
   (max-width:200px;flex:200px) et un padding vertical propre,
   ce qui le rend plus haut et plus large que les drapeaux.
   On aligne les trois sur la meme taille de texte et la meme
   hauteur, et on laisse la date se dimensionner sur son texte. */
#product #wrapper #headInfos{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:10px!important;
}
#product #wrapper #headInfos .product-flags,
#product #wrapper #headInfos .product-reference{
  margin:0!important;
  width:auto!important;
}
#product #wrapper #headInfos .product-flags li.product-flag,
#product #wrapper #headInfos .product-reference{
  font-size:11px!important;
  line-height:1.5!important;
  padding:4px 13px!important;
  height:auto!important;
  min-height:0!important;
}
#product #wrapper #headInfos .product-reference{
  max-width:none!important;
  flex:0 0 auto!important;
  border-width:1px!important;
  margin-bottom:0!important;
}
#product #wrapper #headInfos .product-reference label{
  font-size:11px!important;
  line-height:1.5!important;
}


/* =========================================================
   13. TITRE PRODUIT — SUPPRESSION DU DEGRADE
   Le theme peint le titre avec un degrade rouge vers bleu
   decoupe sur les lettres :
     #product .product-container h1{
       background:linear-gradient(90deg,#E11B24,#2F5EF7);
       -webkit-background-clip:text;
       -webkit-text-fill-color:transparent}
   Il faut annuler les TROIS proprietes : enlever le degrade
   ne suffit pas, le texte resterait transparent.
   Couleur retenue : #373737, choisie par DreamStation. Le prix
   reste le seul element rouge de la fiche, il ressort donc mieux.
   Variante rouge : remplacer #373737 par #E11B24.
   ========================================================= */
#product #wrapper .product-container h1,
#product #wrapper .product-infos h1.h1{
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#373737!important;
  color:#373737!important;
  /* Taille et graisse : le theme monte a 900, ce qui epaissit
     beaucoup les capitales. 20px / 800 se rapproche de la
     maquette. Ajuster ces deux valeurs a l'oeil. */
  font-size:20px!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:0!important;
}
@media (max-width:575px){
  #product #wrapper .product-container h1,
  #product #wrapper .product-infos h1.h1{
    font-size:18px!important;
  }
}


/* =========================================================
   14. AGENCEMENT DE LA COLONNE PRODUIT
   Ordre voulu : drapeaux, titre, prix, stock, livraison,
   Alma, options, recapitulatif, bouton d'achat, reassurance.
   Difficulte : ces blocs sont a TROIS niveaux differents —
   certains dans le formulaire, d'autres a cote. Un simple
   order ne peut pas les melanger.
   Solution : on rend transparents en mise en page les deux
   conteneurs intermediaires (.product-actions et le
   formulaire) avec display:contents. Tous les blocs
   deviennent alors freres dans une seule grille flex, celle
   de .product-infos, et un ordre unique suffit.
   Le formulaire garde son comportement : display:contents ne
   retire que sa boite visuelle.
   NE JAMAIS sortir le bouton du formulaire (PrestaShop
   remonte au formulaire depuis le bouton pour ajouter au
   panier) ni faire entrer le bloc options dedans (ses cases
   partiraient avec la commande).
   ========================================================= */
#product #wrapper .product-infos{
  display:flex!important;
  flex-direction:column!important;
}
#product #wrapper .product-actions,
#product #wrapper form#add-to-cart-or-refresh{
  display:contents!important;
}

/* FILET DE SECURITE : tout enfant direct de la colonne qui
   n'aurait pas d'ordre explicite se retrouverait EN PREMIER
   (l'ordre par defaut vaut 0). On les envoie donc a la fin
   par defaut, et on remonte ensuite ceux qu'on connait.
   C'est ce qui manquait quand la description courte a saute
   tout en haut de la fiche. */
#product #wrapper .product-infos > *{ order:30!important; }

#product #wrapper #headInfos{ order:1!important; }
#product #wrapper .product-infos h1.h1{ order:2!important; }
#product #wrapper .product-infos .product-description[id^="product-description-short"]{ order:3!important; }
#product #wrapper .product-infos .product-variants{ order:4!important; }
#product #wrapper #priceContent{ order:5!important; }
#product #wrapper #afterProductAvailabilityHook{ order:6!important; }
#product #wrapper #alma-dispo{ order:7!important; }
#product #wrapper .product-infos section.product-discounts{ order:8!important; }
#product #wrapper #fmmPreOrder{ order:9!important; }
#product #wrapper #multiAccessoriesTab{ order:10!important; }
#product #wrapper #addcart-garant{ order:11!important; }
#product #wrapper .product-actions .dsf-ra{ order:12!important; }
#product #wrapper .product-additional-info{ order:13!important; }

/* Description courte : elle resume la machine, elle doit
   rester discrete sous le titre. */
#product #wrapper .product-infos .product-description[id^="product-description-short"]{
  font-size:13px!important;
  line-height:1.5!important;
  color:#4a4a5a!important;
  max-height:none!important;
  overflow:visible!important;
}
#product #wrapper .product-infos .product-description[id^="product-description-short"] p{
  margin:0!important;
}
#product #wrapper #readesc{
  display:inline-block!important;
  margin-top:6px!important;
  font-size:12px!important;
  font-weight:700!important;
  color:#2F5EF7!important;
  cursor:pointer!important;
}

/* Dans la rangee : le stock, puis la livraison (notre
   ::after), puis Alma. On vise par position plutot que par
   :has() — voir la lecon de la section 10. */
#product #wrapper #alma-dispo > .col-md-6:nth-child(1){ order:1!important; } /* Alma */
#product #wrapper #alma-dispo > .col-md-6:nth-child(2){ order:2!important; } /* stock */
#product #wrapper #alma-dispo:after{ order:3!important; }                    /* livraison */

/* Dans le bloc options : les options d'abord, le
   recapitulatif ensuite — cocher une option change le total,
   le lire avant de choisir n'aurait pas de sens. */
#product #wrapper #multiAccessoriesTab #group_accessories{ order:1!important; }
#product #wrapper #multiAccessoriesTab .accessories_table_price{ order:2!important; }

/* Le bouton « CLIQUEZ ICI » est supprime : il ne faisait rien
   (aucun script n'y etait attache) et le bloc options arrive
   juste au-dessus. Le bouton d'achat prend toute la largeur. */
#product #wrapper #addcart-garant .desireLink{
  display:none!important;
}
#product #wrapper #addcart-garant > .col-md-6{
  flex:0 0 100%!important;
  max-width:100%!important;
  width:100%!important;
}
#product #wrapper #addcart-garant .add-to-cart{
  width:100%!important;
}

/* =========================================================
   15. BANDE DE REASSURANCE SUR MOBILE
   Elle doit rester sur UNE SEULE LIGNE sous le bouton, quelle
   que soit la largeur. On ne l'empile donc pas : on reduit le
   picto et le texte, et on laisse les titres passer sur deux
   lignes dans leur colonne. Sous 400 px, le sous-titre est
   masque : c'est lui qui fait deborder, pas le titre.
   Les tailles du picto sont posees en style en ligne par le
   script, d'ou les !important ici.
   ========================================================= */
@media (max-width:575px){
  #product #wrapper .product-infos .dsf-ra{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:0!important;
  }
  #product #wrapper .product-infos .dsf-ra-item{
    flex:1 1 33.333%!important;
    min-width:0!important;
    gap:6px!important;
    padding:0 7px!important;
    border-bottom:0!important;
    border-right:1px solid #ececf2!important;
  }
  #product #wrapper .product-infos .dsf-ra-item:first-child{
    padding-left:0!important;
  }
  #product #wrapper .product-infos .dsf-ra-item:last-child{
    border-right:0!important;
    padding-right:0!important;
  }
  #product #wrapper .product-infos .dsf-ra-ic{
    flex:0 0 18px!important;
    width:18px!important;
    height:18px!important;
  }
  #product #wrapper .product-infos .dsf-ra-t{
    font-size:10px!important;
    line-height:1.2!important;
  }
  #product #wrapper .product-infos .dsf-ra-s{
    font-size:9px!important;
    line-height:1.2!important;
  }
}

/* Tres petits ecrans : on garde la ligne, on sacrifie le
   sous-titre plutot que la lisibilite du titre. */
@media (max-width:400px){
  #product #wrapper .product-infos .dsf-ra-s{
    display:none!important;
  }
  #product #wrapper .product-infos .dsf-ra-item{
    padding:0 5px!important;
    gap:5px!important;
  }
}


/* =========================================================
   16. BANDE DE REASSURANCE : CARTE ET ALIGNEMENT
   Elle devient une carte comme les autres blocs : meme
   bordure, meme arrondi, meme largeur. Le contenu est centre
   dans chacune des trois colonnes.
   Le filet du haut est retire : la carte se suffit.
   ========================================================= */
#product #wrapper .product-infos .dsf-ra{
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #ececf2!important;
  border-top:1px solid #ececf2!important;
  border-radius:14px!important;
  background:#fff!important;
  padding:14px 10px!important;
  margin:0!important;
  justify-content:center!important;
  align-items:stretch!important;
}
#product #wrapper .product-infos .dsf-ra-item{
  justify-content:center!important;
  text-align:left!important;
}

/* =========================================================
   17. ECART AVANT LA FICHE TECHNIQUE
   Le theme laisse 4rem (64 px) au-dessus du bloc
   d'informations : c'est beaucoup, surtout sur mobile.
   ========================================================= */
#product #wrapper .product-information{
  margin-top:24px!important;
}
@media (max-width:575px){
  #product #wrapper .product-information{
    margin-top:18px!important;
  }
}


/* =========================================================
   18. TOUS LES BLOCS A LA MEME LARGEUR
   Les cartes stock, Alma et le bouton sont dans des
   .col-md-6 de Bootstrap, qui portent 15 px de gouttiere de
   chaque cote. Le bloc options et le recapitulatif, eux, ne
   sont pas dans une colonne : ils vont donc bord a bord.
   D'ou des blocs plus etroits que d'autres.
   On supprime la gouttiere sur ces colonnes : tout part du
   meme bord gauche et finit au meme bord droit.
   ========================================================= */
#product #wrapper #alma-dispo > .col-md-6,
#product #wrapper #addcart-garant > .col-md-6{
  padding-left:0!important;
  padding-right:0!important;
}
#product #wrapper #alma-dispo,
#product #wrapper #addcart-garant{
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
}
#product #wrapper #alma-dispo:after{
  /* La section 5 lui donnait flex:0 0 calc(100% - 30px) pour
     compenser les gouttieres. Celles-ci ayant disparu, cette
     base le laissait 30 px plus etroit que les autres cartes. */
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Le bouton occupe toute la largeur de sa colonne. */
#product #wrapper #addcart-garant .add-to-cart{
  width:100%!important;
  margin:0!important;
}

/* Le bouton : on neutralise aussi les conteneurs qui
   l'entourent, sinon leur padding le retrecit encore. */
#product #wrapper #addcart-garant .product-add-to-cart,
#product #wrapper #addcart-garant .product-quantity,
#product #wrapper #addcart-garant .add{
  padding-left:0!important;
  padding-right:0!important;
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
  max-width:100%!important;
}
#product #wrapper #addcart-garant .add-to-cart{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}


/* =========================================================
   19. DATE DE SORTIE MASQUEE
   Elle vieillit alors que le catalogue est mis a jour en
   continu. Elle apparait a trois endroits sur la fiche.
   ATTENTION : .product-reference sert a DEUX choses, la date
   ET la vraie reference produit. Seul le bloc reference
   contient [itemprop="sku"], d'ou le :not(:has(...)).
   ========================================================= */
#product #wrapper #headInfos .product-reference,
#product #wrapper .lishdes.date-de-sortie{
  display:none!important;
}
/* Dans la fiche technique, le meme balisage sert a la date ET
   a la vraie reference produit. Seul le bloc reference contient
   [itemprop="sku"] : on masque donc uniquement les autres. */
#product #wrapper .fiche-technique .product-reference:not(:has([itemprop="sku"])){
  display:none!important;
}


/* =========================================================
   20. COLONNE DE GAUCHE : LARGEUR, PHOTO COLLANTE,
       CONSEIL EN BAS  —  ORDINATEUR UNIQUEMENT

   TROIS OBSTACLES DU THEME, TROIS CORRECTIFS :

   a) `.row{display:block!important}` + `.col-lg-5{float:left}`
      Les colonnes FLOTTENT : une colonne flottante ne fait que
      la hauteur de son contenu, elle ne descend jamais jusqu'au
      bas de la ligne. `margin-top:auto` n'avait donc aucun
      espace a repousser. On repasse la ligne en flex.

   b) `body main{overflow:hidden}` et `#product #page-top
      {overflow-x:hidden}`
      C'est la vraie raison pour laquelle la photo ne suivait pas
      le defilement. Un ancetre en `overflow` autre que `visible`
      devient une zone de defilement a lui seul : l'element
      collant se colle a CETTE zone, qui ne bouge pas — il a donc
      l'air fige. On passe en `overflow-x:clip`, qui coupe le
      debordement horizontal SANS creer de zone de defilement.

   c) `.col-lg-6.offset-lg-1{margin-left:8.33333%}`
      Ce decalage de 8,33 % laissait une bande vide de ~85 px a
      droite de la photo. On le supprime et la colonne de gauche
      passe de 41,67 % a 50 %.

   >>> LES QUATRE VALEURS A AJUSTER SONT SIGNALEES PAR « REGLAGE »
   ========================================================= */
@media (min-width:992px){

  /* (b) — la photo collante peut enfin fonctionner */
  #product #page-top{
    overflow:visible!important;
    overflow-x:clip!important;
    overflow-y:visible!important;
  }

  /* (a) — la ligne produit devient une vraie ligne flex :
     les deux colonnes font desormais la meme hauteur */
  #product #wrapper .product-container{
    display:flex!important;
    align-items:stretch!important;
    overflow:visible!important;
  }
  #product #wrapper .product-container > .col-lg-5,
  #product #wrapper .product-container > .col-lg-6{
    float:none!important;
    flex:0 0 auto!important;
  }

  /* (c) — colonne de gauche elargie, colonne d'achat recollee */
  #product #wrapper .product-container > .col-lg-5{
    width:50%!important;           /* REGLAGE 1 — largeur de la colonne
                                      de gauche. 41.66667% = valeur
                                      d'origine du theme. */
    padding-right:30px!important;  /* REGLAGE 2 — ecart entre la photo
                                      et la colonne d'achat. Baisse a
                                      15px pour coller davantage. */
    display:flex!important;
    flex-direction:column!important;
  }
  #product #wrapper .product-container > .col-lg-6.offset-lg-1{
    width:50%!important;
    margin-left:0!important;
  }

  /* LA GALERIE NE BOUGE PLUS
     La position collante est retiree : dans une colonne unique,
     une photo collante finit forcement par glisser PAR-DESSUS le
     bloc conseil, puisque les deux partagent le meme parent. Les
     deux demandes sont incompatibles telles quelles. Voir la note
     en fin de section si tu veux la photo collante malgre tout. */
  #product #wrapper .product-container > .col-lg-5 > section.page-content,
  #product #wrapper .product-container > .col-lg-5 > #content{
    flex:0 0 auto!important;
  }

  /* LE BLOC CONSEIL — REGLAGE AU PIXEL
     `margin-top:auto` le pose en bas de colonne. `top` le remonte
     ensuite d'autant de pixels que tu veux, sans rien deplacer
     d'autre sur la page. */
  #product #wrapper .product-container > .col-lg-5 > .dsf-cons{
    margin-top:auto!important;
    position:relative!important;
    top:-25px!important;           /* REGLAGE 3 — LE PIXEL PRES.
                                      -20px remonte la carte de 20 px.
                                      -50px, -120px... a l'oeil.
                                      Valeur NEGATIVE pour monter. */
  }
}

/* NOTE — si tu veux quand meme la photo collante :
   ajoute `position:sticky;top:20px` a la section page-content de la
   section 22 ci-dessous, a la place de `position:relative`. La photo suivra le defilement,
   mais elle recouvrira le bloc conseil en fin de course. Il n'y a
   pas de moyen en CSS seul de l'arreter avant : un element collant
   se deplace dans tout son parent, et le bloc conseil est dans ce
   meme parent. Pour eviter le recouvrement il faudrait un
   conteneur intermediaire, donc une modification du module. */


/* =========================================================
   21. ONGLETS ARRONDIS (DESCRIPTION / FICHE TECHNIQUE)

   Les onglets sont poses par le module dsfiches :
     <div class="dsf-nav">
       <button aria-selected="true">Description</button>
       <button>Fiche technique</button>
     </div>
   Ce ne sont donc pas des liens `a.active` comme dans le
   fichier d'exemples, mais des `button[aria-selected]`.
   Le CSS du module est charge APRES celui-ci : d'ou les
   `!important` et le prefixe #product, indispensables pour
   passer devant.

   >>> COMMENT CHANGER DE STYLE
   Un seul bloc doit etre actif a la fois. Le style 01 est
   actif ci-dessous. Pour en essayer un autre : commente le
   bloc 01 (entoure-le de barre-etoile / etoile-barre) et
   decommente celui que tu veux.

   Les cinq styles restent visibles plus bas, en commentaire.
   ========================================================= */

/* --- Reglages communs aux cinq styles --- */
#product .dsf-onglets .dsf-nav button{
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  color:#8a93a5!important;
  transition:background .18s,color .18s,box-shadow .18s,border-color .18s!important;
}
#product .dsf-onglets .dsf-nav button:hover{
  color:#1f2532!important;
}


/* ---------------------------------------------------------
   01 — Bandeau gris, onglet actif en pastille blanche
   ---------------------------------------------------------
@media (min-width:992px){
  #product .dsf-onglets .dsf-nav{
    display:inline-flex!important;
    gap:4px!important;
    background:#eef1f7!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:999px!important;
    padding:5px!important;
  }
  #product .dsf-onglets .dsf-nav button{
    padding:10px 22px!important;
    margin-bottom:0!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:999px!important;
    background:none!important;
  }
  #product .dsf-onglets .dsf-nav button[aria-selected="true"]{
    background:#fff!important;
    color:#465cff!important;
    box-shadow:0 1px 3px rgba(20,30,60,.14)!important;
  }
}
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   02 — Bandeau pleine largeur, onglet actif bleu plein
   ---------------------------------------------------------
@media (min-width:992px){
  #product .dsf-onglets .dsf-nav{
    display:flex!important;
    background:#eef1f7!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:999px!important;
    padding:5px!important;
  }
  #product .dsf-onglets .dsf-nav button{
    flex:1!important;
    text-align:center!important;
    padding:12px 18px!important;
    margin-bottom:0!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:999px!important;
    background:none!important;
  }
  #product .dsf-onglets .dsf-nav button[aria-selected="true"]{
    background:#465cff!important;
    color:#fff!important;
    box-shadow:0 2px 8px rgba(70,92,255,.32)!important;
  }
  #product .dsf-onglets .dsf-nav button[aria-selected="true"]:hover{
    color:#fff!important;
  }
}
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   03 — Onglets « dossier » arrondis en haut
        (le plus proche de l'existant)
   ---------------------------------------------------------
@media (min-width:992px){
  #product .dsf-onglets .dsf-nav{
    display:flex!important;
    gap:6px!important;
    background:none!important;
    border-bottom:1px solid #e6e9f0!important;
    border-radius:0!important;
    padding:0!important;
  }
  #product .dsf-onglets .dsf-nav button{
    padding:13px 24px!important;
    margin-bottom:-1px!important;
    border:1px solid transparent!important;
    border-radius:12px 12px 0 0!important;
    background:none!important;
  }
  #product .dsf-onglets .dsf-nav button:hover{
    background:#f7f9fc!important;
  }
  #product .dsf-onglets .dsf-nav button[aria-selected="true"]{
    color:#465cff!important;
    background:#fff!important;
    border-color:#e6e9f0!important;
    border-bottom-color:#fff!important;
  }
}
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   04 — Pastilles separees, contour leger
   ---------------------------------------------------------
@media (min-width:992px){
  #product .dsf-onglets .dsf-nav{
    display:flex!important;
    gap:10px!important;
    background:none!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:0!important;
    padding:0!important;
  }
  #product .dsf-onglets .dsf-nav button{
    padding:11px 24px!important;
    margin-bottom:0!important;
    border:1px solid #e6e9f0!important;
    border-radius:999px!important;
    background:#fff!important;
  }
  #product .dsf-onglets .dsf-nav button:hover{
    border-color:#c9d2e6!important;
  }
  #product .dsf-onglets .dsf-nav button[aria-selected="true"]{
    background:#465cff!important;
    border-color:#465cff!important;
    color:#fff!important;
    box-shadow:0 2px 8px rgba(70,92,255,.28)!important;
  }
  #product .dsf-onglets .dsf-nav button[aria-selected="true"]:hover{
    color:#fff!important;
  }
}
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   05 — Bandeau bleu teinte, coins doux
        ACTIF
   --------------------------------------------------------- */
@media (min-width:992px){
  #product .dsf-onglets .dsf-nav{
    display:inline-flex!important;
    gap:4px!important;
    background:rgba(70,92,255,.08)!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:12px!important;
    padding:5px!important;
  }
  #product .dsf-onglets .dsf-nav button{
    padding:10px 22px!important;
    margin-bottom:0!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:9px!important;
    background:none!important;
    color:#6b78a8!important;
  }
  #product .dsf-onglets .dsf-nav button:hover{
    color:#465cff!important;
  }
  #product .dsf-onglets .dsf-nav button[aria-selected="true"]{
    background:#fff!important;
    color:#465cff!important;
    box-shadow:0 1px 4px rgba(70,92,255,.22)!important;
  }
}


/* =========================================================
   22. FLECHES DE LA GALERIE — CORRECTIF

   Le theme pose les fleches en position absolue :

     .scroll-box-arrows i{position:absolute;bottom:1.625rem}
     .scroll-box-arrows .left{left:0}
     .scroll-box-arrows .right{right:0}

   Un element en position absolue se cale sur son plus proche
   ancetre POSITIONNE. Or ni .page-content ni .col-lg-5 n'ont de
   position dans le theme : les fleches remontaient donc chercher
   un ancetre bien plus haut, et se calaient sur le bas de la
   colonne entiere. Tant que la colonne s'arretait aux miniatures,
   ca tombait juste par accident. Depuis que le bloc conseil vit
   dans cette colonne, le bas de la colonne est 400 px plus bas —
   et les fleches sont parties avec.

   On donne donc un contexte de positionnement a la section qui
   contient la galerie ET les fleches. `position:relative` sans
   decalage ne deplace rien : elle sert uniquement de repere.

   Hors media query : le bug existe aussi sur mobile.
   ========================================================= */
#product #wrapper .product-container .col-lg-5 > section.page-content,
#product #wrapper .product-container .col-lg-5 > #content{
  position:relative!important;
}

/* Les fleches passent au-dessus de la photo et du bloc conseil,
   jamais dessous. */
#product #wrapper .scroll-box-arrows i{
  z-index:3!important;
}


/* =========================================================
   23. TABLEAU DES CARACTERISTIQUES

   Principe : l'etiquette s'efface, la valeur ressort.

   Aujourd'hui le libelle et la valeur ont le meme poids — meme
   casse, meme couleur, meme graisse — et l'oeil n'a aucun point
   d'ancrage. On passe le libelle en gris et en casse normale
   (c'est un repere, pas une information) et la valeur en fonce,
   demi-gras, alignee a droite. On descend alors la colonne des
   valeurs sans relire les libelles.

   Le bandeau bleu devient le SEUL element colore du bloc, donc
   le seul repere de structure. C'est ce qui rend l'ensemble
   lisible : une couleur qui sert partout ne signale plus rien.

   ATTENTION : deux systemes de groupes coexistent sur ce site.
   a) sldfeaturesbygroup, cote serveur, titres .groupfeature-title
   b) dsfiches, cote navigateur, lignes tr.dsi-groupe
   Les deux sont habilles ici a l'identique, mais ils ne doivent
   jamais tourner ensemble.
   ========================================================= */

/* --- Le tableau lui-meme --- */
#product #sld-characteristics .table-data-sheet{
  width:100%!important;
  border-collapse:collapse!important;
  font-size:13.5px!important;
}

/* Les fonds alternes cedent la place a un filet clair. Sur des
   groupes de quatre a dix lignes, les bandes n'aident plus a
   suivre la ligne : elles ajoutent du bruit.

   On vise TOUTES les lignes, pas seulement .even et .odd : c'est
   ce qui donnait deux bleus differents pour les bandeaux. La
   teinte etait semi-transparente, donc elle laissait passer ce
   qu'il y avait dessous ; une ligne restee coloree la faisait
   virer au bleu soutenu. */
#product #sld-characteristics .table-data-sheet tr{
  background:transparent!important;
  background-image:none!important;
}
#product #sld-characteristics .table-data-sheet th,
#product #sld-characteristics .table-data-sheet td{
  padding:9px 13px!important;
  border:0!important;
  border-bottom:1px solid #e6e8ec!important;
  vertical-align:baseline!important;
  line-height:1.45!important;
}

/* L'etiquette : grise, casse normale, poids leger. */
#product #sld-characteristics .table-data-sheet th{
  width:48%!important;
  font-weight:400!important;
  font-size:13.5px!important;
  text-transform:none!important;
  color:#6b7280!important;
  text-align:left!important;
}

/* La valeur : foncee, demi-grasse, alignee a droite. */
#product #sld-characteristics .table-data-sheet td{
  text-transform:none!important;
  color:#1f2430!important;
  font-weight:600!important;
  text-align:right!important;
}

/* La derniere ligne d'un groupe n'a pas besoin de filet : le
   bandeau suivant fait deja la separation. */
#product #sld-characteristics .table-data-sheet tr:last-child th,
#product #sld-characteristics .table-data-sheet tr:last-child td{
  border-bottom:0!important;
}


/* --- Les bandeaux de groupe ---
   Memes reglages pour les deux systemes. Majuscules retenues :
   sur un defilement rapide, elles distinguent nettement le
   bandeau des lignes qu'il coiffe. */
#product #sld-characteristics .dsi-groupe td,
#product #sld-characteristics .groupfeature-title{
  /* Teinte OPAQUE, et non rgba(70,92,255,.08). C'est exactement
     la meme couleur sur fond blanc — mais une couleur opaque ne
     depend plus de ce qu'il y a derriere. Deux bandeaux ne
     peuvent plus sortir dans deux bleus differents, quelle que
     soit la cause. */
  background:#f0f2ff!important;
  background-image:none!important;
  color:#465cff!important;
  font-weight:700!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
  text-align:left!important;
  padding:10px 13px!important;
  border:0!important;
  border-radius:9px!important;
}
#product #sld-characteristics .dsi-groupe td{
  border-radius:9px!important;
}
#product #sld-characteristics .groupfeature-title{
  display:block!important;
  margin:18px 0 2px!important;
}
#product #sld-characteristics .groupfeature-title + .table-data-sheet{
  margin-top:0!important;
}

/* Un peu d'air au-dessus de chaque bandeau, sauf le premier :
   c'est cet ecart qui donne l'impression de blocs distincts
   sans avoir a dessiner de cadre. */
#product #sld-characteristics .dsi-groupe td{
  box-shadow:0 -10px 0 0 #fff!important;
}
#product #sld-characteristics .dsi-groupe:first-child td{
  box-shadow:none!important;
}

/* Les caracteristiques qu'aucun groupe ne reclame : plus
   discret, c'est une reserve et non une rubrique. */
#product #sld-characteristics .dsi-groupe-autres td{
  background:#f3f4f6!important;
  color:#6b7280!important;
}


/* --- Le bloc prend toute la largeur ---
   La fiche technique est rangee dans une demi-colonne :

     <div class="row block-fiche">
       <div class="col-md-6"> ... Fiche technique ... </div>
       <div class="col-md-6"> ... Votre livraison ... </div>
     </div>

   D'ou un tableau confine a 50 % de la page, avec du vide a droite.

   PIEGE : quand les accordeons sont actifs, dsfiches DEPLACE cette
   premiere colonne dans le panneau « Fiche technique ». Elle n'est
   alors plus dans .block-fiche du tout — mais elle emporte avec
   elle sa classe .col-md-6, et Bootstrap la maintient a 50 %
   n'importe ou dans la page. Viser .block-fiche > .col-md-6 ne
   servait donc a rien : l'element avait demenage.

   On traite les deux cas : la colonne restee en place, et la
   colonne deplacee dans un panneau. */
#product #wrapper .product-information .block-fiche{
  display:block!important;
}
#product #wrapper .product-information .block-fiche > .col-md-6,
#product #wrapper .dsf-pan-corps > .col-md-6,
#product #wrapper .dsf-pan-corps .block-fiche > .col-md-6{
  float:none!important;
  width:100%!important;
  max-width:100%!important;
  flex:0 0 100%!important;
  padding-left:0!important;
  padding-right:0!important;
}
#product #wrapper .product-information .block-fiche > .col-md-6 + .col-md-6{
  margin-top:26px!important;
}

/* Les conteneurs intermediaires ne doivent pas retrecir non plus. */
#product #wrapper .dsf-pan-corps,
#product #wrapper .dsf-pan-corps .fiche-technique,
#product #wrapper .dsf-pan-corps .product-features,
#product #wrapper .dsf-pan-corps #sld-characteristics{
  width:100%!important;
  max-width:100%!important;
}


/* --- Deux colonnes sur ordinateur ---
   Le module produit un tableau par groupe (Comportements > Deux
   colonnes sur ordinateur). Ici, la repartition.

   `column-count` demande au navigateur d'equilibrer les hauteurs
   lui-meme : c'est ce qui evite les trous, la ou une grille
   figee mettrait Design (2 lignes) en face d'Ecran (14 lignes).
   `break-inside:avoid` interdit de couper un groupe en deux. */
@media (min-width:992px){
  #product #sld-characteristics .dsi-colonnes{
    column-count:2!important;
    column-gap:28px!important;
  }
  /* `table-layout:fixed` est indispensable : sans lui, la largeur
     d'un tableau est calculee sur son contenu le plus long et
     peut depasser la colonne — les deux colonnes se chevauchent
     alors, ce qui rend le tableau illisible. Fixe, la largeur est
     imposee et les libelles trop longs passent a la ligne. */
  #product #sld-characteristics .dsi-colonnes > table{
    display:table!important;
    table-layout:fixed!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 18px!important;
    break-inside:avoid!important;
    -webkit-column-break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  /* Le theme fige la colonne des libelles a 40 % ou 12rem, ce qui
     ne tient plus dans une demi-largeur. */
  #product #sld-characteristics .dsi-colonnes > table th{
    width:58%!important;
  }
  #product #sld-characteristics .dsi-colonnes > table td{
    width:42%!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
}

/* Sur mobile, une seule colonne : les blocs s'empilent. */
@media (max-width:991px){
  #product #sld-characteristics .dsi-colonnes > table{
    width:100%!important;
    margin:0 0 14px!important;
  }
}


/* --- Repli sur mobile ---
   Le comportement vient du module (Comportements > Replier les
   groupes sur mobile). Ici, seulement de quoi le rendre lisible :
   un chevron qui tourne, et un bandeau qui se donne l'air
   cliquable. */
@media (max-width:991px){
  #product #sld-characteristics .dsi-groupe.dsi-ouvert td,
  #product #sld-characteristics .dsi-groupe.dsi-ferme td{
    cursor:pointer!important;
    padding-right:34px!important;
    position:relative!important;
  }
  #product #sld-characteristics .dsi-groupe.dsi-ouvert td:after,
  #product #sld-characteristics .dsi-groupe.dsi-ferme td:after{
    content:""!important;
    position:absolute!important;
    right:14px!important;
    top:50%!important;
    width:7px!important;
    height:7px!important;
    margin-top:-5px!important;
    border-right:2px solid #465cff!important;
    border-bottom:2px solid #465cff!important;
    transform:rotate(45deg)!important;
    transition:transform .18s ease!important;
  }
  #product #sld-characteristics .dsi-groupe.dsi-ouvert td:after{
    transform:rotate(-135deg)!important;
    margin-top:-2px!important;
  }
  #product #sld-characteristics .dsi-groupe td:focus-visible{
    outline:2px solid #465cff!important;
    outline-offset:-2px!important;
  }

  /* Sur telephone, la valeur ne doit pas ecraser le libelle. */
  #product #sld-characteristics .table-data-sheet th{
    width:auto!important;
    font-size:13px!important;
  }
  #product #sld-characteristics .table-data-sheet td{
    font-size:13px!important;
    white-space:nowrap!important;
  }
}