/* ═══════════════════════════════════════════════════════════════════
   PROTOTYPE FICHE PRODUIT — CORRECTIF DESIGN 6 — LOT B1 (FINITIONS HAUT,
   2026-09-12, DÉPLOYÉ v1+v2+v3 ; 2026-09-13 : v4 « RÉSERVES B1 »).
   id_product 6048 UNIQUEMENT : feuille chargée dans la même branche 6048
   du template product_styles/product_page_style.tpl, APRÈS correctif3+4+5.
   Le témoin 6081 ne charge pas cette feuille : aucun effet hors 6048.

   PÉRIMÈTRE B1 (mission 2026-09-12) :
     B1-1. Grande image : sans bordure, ciblée sur le VRAI conteneur
           (.product-cover-container / .product-cover.swiper_large_preview)
           ET sur <picture> (outline 1px var(--color-border) du thème
           avana — cause réelle de la fine bordure grise, RÉSERVE R5).
           Pas de règle globale #content supplémentaire.
     B1-2. H1 : graisse 700, 28-32 px desktop / 21-24 px mobile,
           line-height ≈ 1.2, max 2 lignes, #212A36, aucune majuscule,
           logo fabricant déjà au-dessus (correctif4/5 inchangé).
     B1-3. CTA « Commandez » (libellé posé dans le template 6048) :
           fond #FCC902, texte #212A36, 700, transition 150-200 ms,
           hover/focus fond #212A36 + texte blanc, aucun hover bloqué
           tactile (règles hover dans @media (hover:hover)).
B1-4. WhatsApp secondaire consultatif « Conseil WhatsApp » (markup dans
              le partial 6048) : desktop Commandez/WhatsApp MÊMES LARGEURS (flex: 1 1 0,
              espace restant partagé à égalité après la quantité et le gap),
              même hauteur 48 px, espacement horizontal
              RÉGULIER 12 px entre
              quantité / Commandez / WhatsApp (RECTIFICATION B1 — anciennement
              R1 10 px), quantité 70-76 px, contenus centrés, mobile
              quantité sur sa ligne puis CTA pleine largeur puis WhatsApp
              pleine largeur, espacement vertical 10 px, hauteur tactile
              >= 44 px. aria-label complet « Besoin d'aide avant votre
              achat ? Contactez-nous sur WhatsApp ». Note « Réponse rapide
              pendant nos horaires » SUR UNE LIGNE SOUS les deux CTA
              (pas dans le bouton), alignée au début de la zone, marge
              supérieure 8-10 px.
     B1-5. Bulle flottante .cbh-phone (module orderonwhatsapp, fixed) :
           masquée quand la zone d'achat est visible, visible sinon —
           pilotée par body.rt-wa-bubble-show (JS IntersectionObserver).
           Bouton de commande du module (.whatsapp-order-button) masqué
           sur 6048 uniquement (le secondaire conseil le remplace).
B1-6. Favoris : SOULIGNEMENT UNIQUEMENT SUR LE TEXTE (span interne,
             jamais sur l'icône cœur), espace icône-texte 7-9 px, cœur
             26 px #293544, sans fond/bordure/apparence bouton, AUCUN
             fond ni animation au hover (RÉSERVE R3).
      B1-7. Fil d'Ariane FINAL (décision 2026-09-12, RÉSERVE R6) : posé à
            plat sur le fond blanc, aligné au même départ horizontal que
            le conteneur des pages /c/ du Mag — AUCUN bandeau gris/bleu
            (#hero_section neutralisé), aucune barre dédiée 40-48 px,
            aucune bordure ni ombre, 12-13 px, liens gris discret, page
            actuelle #293544 graisse 600, ~18-22 px au-dessus/au-dessous,
            1 ligne, ellipse mobile, liens + BreadcrumbList intacts
            (template breadcrumb NON modifié). Le contenu de la fiche
            remonte immédiatement après lui.
      B1-8. Avis : emplacement masqué par défaut (aucun avis réel,
            productcomments inactif) — rien à styler ici ; une maquette
            locale « APERÇU — DONNÉES FICTIVES » est fournie séparément
            (jamais servie sur le site).
   RÉSERVE R2 (Libellé « Livraison / Partout au Maroc ») : corrigée dans le
   PARTIAL TPL v4 (design6/product-add-to-cart.d6.tpl) — aucun CSS ici.
   Toutes les règles sont préfixées .rt-product-page / body.product-id-6048.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── B1-1. GRANDE IMAGE — vraie cible : le conteneur de la grande image,
        pas #content global (le correctif5 a déjà nettoyé #content ; on
        verrouille le conteneur réel sans rien invalider). RÉSERVE R5 :
        le thème avana pose `outline: 1px solid var(--color-border)` sur
        `.images-container .product-cover picture` — c'est la fine bordure
        grise. On la supprime <picture> compris, 6048 uniquement. ─── */
.rt-product-page .rt-product-gallery-column .product-cover-container,
.rt-product-page .rt-product-gallery-column .product-cover.swiper_large_preview,
.rt-product-page .rt-product-gallery-column .product-cover .swiper-slide picture {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Miniature sélectionnée : consommée telle quelle (correctif3 : 2 px
   var(--rt-accent) = #FCC902). Aucune règle ajoutée ici pour ne rien
   recasser. */

/* ─── B1-2. H1 — graisse 700, 28-32 px desktop / 21-24 px mobile,
        line-height ≈ 1.2, max 2 lignes, aucune majuscule.
        Spécificité renforcée (ID #product + 3 classes) pour battre la
        règle thème `#product .product-container .product-title`
        (font-weight: var(--font-medium) = 500) — constat CDP 2026-09-12. ─── */
#product .product-container .rt-product-info-column h1.product-title {
  font-weight: 700;
  line-height: 1.2;
  color: #212A36;
  text-transform: none;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 28px;
}
@media (min-width: 992px) {
  #product .product-container .rt-product-info-column h1.product-title {
    font-size: clamp(28px, 2vw, 32px);
  }
}
@media (max-width: 767.98px) {
  #product .product-container .rt-product-info-column h1.product-title {
    font-size: clamp(21px, 4vw, 24px);
  }
}

/* ─── B1-3. CTA « Commandez » (le libellé « Commandez » est posé dans le
        partial 6048 ; action/stock/déclinaisons/JS/protections intacts).
        RECTIFICATION FINALE CTA : texte ~17-18 px, graisse 700, jamais de
        coupure de libellé (white-space: nowrap) — le bouton partage la
        place restante à 50/50 avec Conseil WhatsApp, contenu centré. ─── */
.rt-product-page .product-quantity .add .btn.btn-primary.add-to-cart {
  background: #FCC902 !important;
  border-color: #FCC902 !important;
  color: #212A36 !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 6px;
  height: 48px;
  min-height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease;
}
/* La largeur mesurée COMMANDEZ == WHATSAPP est portée par `flex: 1 1 0`
   sur les deux membres (partage strict et égal de l'espace restant APRÈS
   la quantité et les gaps — jamais 50 % de la largeur totale du parent).
   L'icône panier du thème est masquée par le partial (aucun texte caché),
   le contenu est centré visuellement. */
@media (hover: hover) {
  .rt-product-page .product-quantity .add .btn.btn-primary.add-to-cart:hover {
    background: #212A36 !important;
    border-color: #212A36 !important;
    color: #FFFFFF !important;
  }
}
.rt-product-page .product-quantity .add .btn.btn-primary.add-to-cart:focus-visible,
.rt-product-page .product-quantity .add .btn.btn-primary.add-to-cart:focus {
  outline: 2px solid #FCC902;
  outline-offset: 2px;
  box-shadow: none;
}

/* ─── B1-4. WHATSAPP SECONDARE « Conseil WhatsApp » (v4 RÉSERVE R4).
        Desktop Commandez/WhatsApp RÉPARTITION 50/50 stricte via le membre
        `flex: 1 1 0` (jamais 54 % sur WhatsApp — action secondaire) ;
        espace quantité → Commandez : 10 px ; Commandez → WhatsApp : 8 px
        (RECTIFICATION FINALE CTA) ; alignement vertical centré, aucun
        positionnement absolu. Champs et boutons même hauteur 48 px.
        Test : Commandez ~17-18 px/700, WhatsApp 15 px/600, icône 22 px,
        gap icône–texte 7 px, padding horizontal 14 px, contenus centrés,
        AUCUNE troncature ni ellipse. Si la largeur intermédiaire ne suffit
        plus, Conseil WhatsApp passe SOUS Commandez AVANT toute coupure
        (media intermédiaire 768–1199 px ci-dessous ; mobile < 768 px les
        deux pleine largeur empilés). Libellé accessible complet porté par
        l'aria-label (partial v4). Note « Réponse rapide pendant nos
        horaires » SOUS les deux CTA, alignée au début de la zone, marge
        supérieure 8-10 px (structure = partial 6048). ─── */
.rt-product-page .product-quantity {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 8px;
  width: 100%;
}
/* RECTIFICATION FINALE CTA — l'asymétrie voulue (10 px quantité→Commandez,
   8 px Commandez→WhatsApp) est obtenue SANS marge négative : column-gap
   8 px du parent + margin-right 2 px sur `.qty` uniquement (2+8 = 10 px). */
.rt-product-page .product-quantity > .qty,
.rt-product-page .product-quantity > .add,
.rt-product-page .product-quantity > .rt-wa-help {
  padding: 0;
  margin: 0;
}
/* RECTIFICATION B1 (2026-09-13) — valeur du membre `.qty` : le thème force
   l'input à 3rem (48 px) ; le sélecteur complet (input 48 + touches 23)
   doit mesurer 70-76 px de large et 48 px de haut (mêmes que les CTA).
   Le membre vaut exactement son contenu : `flex: 0 0 auto` (aucune
   compression, aucune largeur fixe inefficace), aucune marge négative ni
   positionnement absolu. */
.rt-product-page .product-quantity > .qty { flex: 0 0 auto; min-width: 0; height: 48px; margin-right: 2px; }
.rt-product-page .product-quantity > .qty .input-group { height: 48px; }
/* RECTIFICATION FINALE CTA — 50/50 strict, même hauteur. */
.rt-product-page .product-quantity .add,
.rt-product-page .product-quantity .rt-wa-help {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
}
.rt-product-page .rt-wa-help {
  display: flex;
  align-items: center;
  min-width: 0;
}
.rt-product-page .rt-wa-help-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 auto;
  width: 100%;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  background: #25D366;
  border-radius: 6px;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease;
}
.rt-product-page .rt-wa-help-link i {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  color: #FFFFFF;
}
.rt-product-page .rt-wa-help-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  min-width: 0;
}
.rt-product-page .rt-wa-help-title {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.rt-product-page .rt-wa-help-note {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #5b6673;
  margin-top: 8px;
}
/* RECTIFICATION FINALE CTA — LARGEUR INTERMÉDIAIRE (768–1199 px) :
   garantie « jamais de troncature ni ellipse ». Sur cette plage la colonne
   information peut être étroite (col-lg-6 dès 992 px) ; dès qu'il faut
   préserver les libellés, Conseil WhatsApp passe SOUS Commandez (pleine
   largeur, hauteur 48 px conservée) — Commandez reste à côté de la
   quantité. AUCUN libellé coupé, aucun chevauchement. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .rt-product-page .product-quantity {
    flex-wrap: wrap;
  }
  .rt-product-page .product-quantity .rt-wa-help { flex: 1 1 100%; }
}

/* ─── B1-7. RÉASSURANCE 1 — ÉTAT RÉEL DU PRODUIT (RECTIFICATION FINALE B1)
        État dynamique via $product.condition (native PrestaShop) rendu par le
        partial 6048. Surcharge des couleurs du correctif5 pour l'icône et la
        valeur selon l'état ; les autres items (Garantie/Livraison/Paiement)
        restent inchangés. Aucune colonne vide : si l'état est absent/inconnu
        l'item n'est pas rendu (3 items restants, même rangée). ─── */
.rt-product-page .rt-reassurances .rt-rea-item.rt-rea-cond-new i,
.rt-product-page .rt-reassurances .rt-rea-item.rt-rea-cond-refurbished i {
  color: #16a34a;
}
.rt-product-page .rt-reassurances .rt-rea-item.rt-rea-cond-new .rt-rea-l2,
.rt-product-page .rt-reassurances .rt-rea-item.rt-rea-cond-refurbished .rt-rea-l2 {
  color: #15803d;
}
.rt-product-page .rt-reassurances .rt-rea-item.rt-rea-cond-used i {
  color: #4b5563;
}
.rt-product-page .rt-reassurances .rt-rea-item.rt-rea-cond-used .rt-rea-l2 {
  color: #4b5563;
}
@media (hover: hover) {
  .rt-product-page .rt-wa-help-link:hover {
    background: #212A36 !important;
    border-color: #212A36 !important;
    color: #FFFFFF !important;
  }
}
.rt-product-page .rt-wa-help-link:focus-visible {
  outline: 2px solid #FCC902;
  outline-offset: 2px;
}
/* Mobile (RECTIFICATION B1) : quantité sur sa propre ligne, Commandez
   pleine largeur puis Conseil WhatsApp pleine largeur, espace vertical
   10 px, boutons de même hauteur (48 px) — aucune superposition. */
@media (max-width: 767.98px) {
  .rt-product-page .product-quantity {
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }
  .rt-product-page .product-quantity .qty { flex: 1 1 100%; margin-right: 0; }
  .rt-product-page .product-quantity .qty input {
    width: 70px;
    height: 48px;
    box-sizing: border-box;
  }
  .rt-product-page .product-quantity .add { flex: 1 1 100%; }
  .rt-product-page .product-quantity .rt-wa-help { flex: 1 1 100%; }
}

/* ─── B1-5. BULLE FLOTTANTE (.cbh-phone, module orderonwhatsapp).
        Masquée tant que la zone d'achat est visible ; visible quand elle
        sort de l'écran (JS : body.rt-wa-bubble-show). ─── */
body.product-id-6048 .cbh-phone {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease;
}
body.product-id-6048.rt-wa-bubble-show .cbh-phone {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* Bouton de commande du module masqué sur 6048 UNIQUEMENT : le secondaire
   conseil du B1 le remplace dans la zone d'achat. 6081 et les autres
   produits continuent de la rendre (CSS chargé 6048 seul). */
.rt-product-page .action-button .btn.btn-primary.whatsapp-order-button {
  display: none !important;
}

/* ─── B1-6. FAVORIS — RÉSERVE R3 (v4) : soulignement UNIQUEMENT sur le
        <span> textuel interne (.wishlist-text), jamais sur le lien entier ni
        l'icône cœur. Icône cœur séparée du texte par un espace 7-9 px.
        Cœur 26 px, cœur/texte #293544, aucun fond/bordure/apparence bouton,
        AUCUN fond ni animation ni déplacement au hover, focus clavier visible
        sur tout le lien (soulignement permanent = décision 2026-09-12). ─── */
.rt-product-page .rt-favoris-line a.btn-wishlist.rt-favoris-link {
  text-decoration: none;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: none;
  gap: 8px;
}
.rt-product-page .rt-favoris-line a.btn-wishlist.rt-favoris-link:hover {
  text-decoration: none;
  background: transparent;
  transform: none;
}
.rt-product-page .rt-favoris-line a.btn-wishlist.rt-favoris-link .btn-text.wishlist-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(41, 53, 68, 0.35);
}
.rt-product-page .rt-favoris-line a.btn-wishlist.rt-favoris-link .icon-ava,
.rt-product-page .rt-favoris-line a.btn-wishlist.rt-favoris-link .icon-wishlist-outline-2 {
  font-size: 26px;
  color: #293544 !important;
  text-decoration: none;
}

/* ─── B1-7. FIL D'ARIANE FINAL (décision 2026-09-12, v4 RÉSERVE R6 :
        posé à plat sur le fond blanc, aligné au départ gauche du même
        conteneur que les pages du Mag /c/, aucune bande dédiée, aucun fond
        gris/bleu, aucune bordure ni ombre, très discret. Le contenu remonte
        immédiatement (aucune grande zone vide). Le nav (rendu par le thème
        dans #hero_section > .container > .page-title-wrapper) garde les
        liens + BreadcrumbList STRICTEMENT INTACTS — un seul habillage CSS,
        template breadcrumb NON modifié. body.product-id-6048 uniquement. ─── */
body.product-id-6048 #hero_section,
body.product-id-6048 #hero_section .page-title-wrapper {
  background: #ffffff !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
body.product-id-6048 .breadcrumb-rightech {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 20px 0 20px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  text-align: left;
}
body.product-id-6048 .breadcrumb-rightech ol {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
body.product-id-6048 .breadcrumb-rightech li {
  display: inline;
  font-size: 13px;
  color: #9AA3AD;
  line-height: 20px;
}
body.product-id-6048 .breadcrumb-rightech li:not(:last-child)::after {
  content: "›";
  display: inline;
  margin: 0 6px;
  color: #C4C9CF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
body.product-id-6048 .breadcrumb-rightech li a {
  color: #6B7280;
  text-decoration: none;
  white-space: nowrap;
}
body.product-id-6048 .breadcrumb-rightech li a:hover {
  color: #293544;
  text-decoration: underline;
}
body.product-id-6048 .breadcrumb-rightech li .current {
  color: #293544;
  font-weight: 600;
  white-space: nowrap;
}
/* Mobile : marges légèrement resserrées (toujours à plat sur le fond
   blanc), troncature par ellipse portée par <ol> ci-dessus, hauteur du
   bandeau neutralisée elle aussi. */
@media (max-width: 767.98px) {
  body.product-id-6048 #hero_section,
  body.product-id-6048 #hero_section .page-title-wrapper {
    min-height: 0 !important;
  }
  body.product-id-6048 .breadcrumb-rightech {
    margin: 18px 0 18px;
  }
}

/* ─── B1-8. AVIS : emplacement masqué par défaut (pas d'avis réel,
        productcomments inactif). MAQUETTE LOCALE « APERÇU — DONNÉES
        FICTIVES » fournie séparément, JAMAIS servie sur le site. Rien
        à styler ici. ─── */

/* ─── ACCESSIBILITÉ : prefers-reduced-motion — neutralise les transitions/
        animations de la feuille (décision 2026-09-12). ─── */
@media (prefers-reduced-motion: reduce) {
  .rt-product-page .product-quantity .add .btn.btn-primary.add-to-cart,
  .rt-product-page .rt-wa-help-link,
  body.product-id-6048 .cbh-phone {
    transition: none !important;
  }
}