/* ═══════════════════════════════════════════════════════════════════
   PROTOTYPE FICHE PRODUIT — DÉPLOIEMENT B (LOT B2, 2026-09-13, ATELIER).
   id_product 6048 UNIQUEMENT : feuille chargée dans la même branche 6048
   du template product_styles/product_page_style.tpl, APRÈS correctif6.
   Le témoin 6081 ne charge pas cette feuille : aucun effet hors 6048.

   PÉRIMÈTRE B2 (mission « lire la fiche par scroll », architecture
   `work/proto6048/design4/ARCHI_DEPLOIEMENT_B_2026-09-12.md`) :
     B2-1. SECTIONS VERTICALES : la zone onglets Bootstrap (partial
           custom/product-tabs.tpl, branche 6048) est remplacée par des
           sections pleine largeur ancrables :
             #rt-section-specifications (Fiche technique),
             #rt-section-description    (Description — masquée si vide),
             #rt-section-livraison      (Livraison et garantie).
           Chaque section porte un <h2> de niveau 2 (hiérarchie H1 → H2),
           scroll-margin-top pour compenser la barre sticky.
     B2-2. BARRE STICKY `.rt-sticky-dock` (2 lignes) injectée dans la
           branche 6048, HORS du formulaire, UNIQUEMENT sur 6048 :
             ligne 1 : menu ancres (Fiche technique · Livraison et
                       garantie) — scroll fluide vers les sections ;
             ligne 2 : prix (mêmes valeurs que le haut de fiche, aucune
                       logique dupliquée) + bouton « Commandez ».
           Apparaît quand la zone d'achat (#rt-buy-observe) SORT du
           viewport (state via body.rt-dock-show, JS IntersectionObserver),
           reste fixée en haut, réversible.
     B2-3. MASQUAGE DU HEADER GLOBAL : au scroll vers le bas
           (body.rt-header-hide) le header (.rtm-header) se replie en haut
           ; au scroll vers le haut il revient. JAMAIS retiré du DOM :
           seul un état de classe est togglé (SEO/hiérarchie intacts).
   Toutes les règles sont préfixées .rt-product-page / body.page-product.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── B2-1. SECTIONS VERTICALES (remplacent les onglets sur 6048).
        Chaque section est pleine largeur, fond blanc, espacée, avec un
        <h2> net (20-22 px / 700) et un contenu lisible. L'ancrage doit
        rester lisible sous la barre sticky : scroll-margin-top mesure la
        hauteur du dock (mesurée au runtime + marge) — voir JS. ─── */
body.page-product .rt-section {
  scroll-margin-top: 96px;
  padding: 28px 0;
  border-top: 1px solid #E5E9EF;
}
body.page-product .rt-section:first-of-type {
  margin-top: 8px;
}
body.page-product .rt-section h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #212A36;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #FCC902;
  display: inline-block;
}
body.page-product .rt-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #293544;
  margin: 18px 0 8px;
}
body.page-product .rt-section p,
body.page-product .rt-section li {
  font-size: 15px;
  line-height: 1.6;
  color: #3B4550;
}
body.page-product .rt-section ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
body.page-product .rt-section dl.data-sheet {
  display: grid;
  grid-template-columns: 220px 1fr;
  margin: 0;
}
body.page-product .rt-section section.product-features > p.h6 {
  display: none;
}
body.page-product .rt-section dl.data-sheet dt.name {
  font-weight: 600;
  color: #293544;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid #EFF2F6;
}
body.page-product .rt-section dl.data-sheet dd.value {
  color: #3B4550;
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid #EFF2F6;
  margin: 0;
}
@media (max-width: 767.98px) {
  body.page-product .rt-section {
    scroll-margin-top: 84px;
    padding: 22px 0;
  }
  body.page-product .rt-section h2 {
    font-size: 20px;
  }
  body.page-product .rt-section dl.data-sheet {
    grid-template-columns: 1fr;
  }
  body.page-product .rt-section dl.data-sheet dt.name {
    padding: 10px 0 2px;
    border-bottom: none;
  }
  body.page-product .rt-section dl.data-sheet dd.value {
    padding: 2px 0 10px;
  }
}

/* ─── B2-2. BARRE STICKY `.rt-sticky-dock` (2 lignes, 6048 UNIQUEMENT).
        Positionnée fixed en haut ; cachée par défaut (translateY(-100%)) ;
        visible quand body.rt-dock-show (JS IntersectionObserver sur
        #rt-buy-observe). Ligne 1 = ancres, ligne 2 = prix + « Commandez ».
        Le bouton est un VRAI submit du formulaire natif de la fiche
        (pas de lien factice) : le dock est déposé à l'intérieur du même
        flux de page, le JS clique le bouton natif #add-to-cart-or-refresh. ─── */
body.page-product .rt-sticky-dock {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(33, 42, 54, 0.12);
  border-bottom: 1px solid #E5E9EF;
  transform: translateY(-102%);
  transition: transform 200ms ease-out;
  will-change: transform;
}
body.page-product.rt-dock-show .rt-sticky-dock {
  transform: translateY(0);
}
.rt-sticky-dock .rt-dock-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 20px;
}
/* Ligne 1 — ancres */
.rt-sticky-dock .rt-dock-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 2px 0 8px;
  border-bottom: 1px solid #EFF2F6;
  font-size: 13px;
}
.rt-sticky-dock .rt-dock-nav a {
  color: #6B7280;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.rt-sticky-dock .rt-dock-nav a:hover {
  color: #293544;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rt-sticky-dock .rt-dock-nav .rt-dock-nav-sep {
  color: #C4C9CF;
}
/* Ligne 2 — prix + Commandez */
.rt-sticky-dock .rt-dock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
}
.rt-sticky-dock .rt-dock-price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.rt-sticky-dock .rt-dock-price .dp-regular {
  font-size: 13px;
  color: #9AA3AD;
  text-decoration: line-through;
}
.rt-sticky-dock .rt-dock-price .dp-current {
  font-size: 20px;
  font-weight: 700;
  color: #212A36;
  white-space: nowrap;
}
.rt-sticky-dock .rt-dock-buy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rt-sticky-dock .rt-dock-buy .rt-dock-qty {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.rt-sticky-dock .rt-dock-buy .rt-dock-qty input {
  width: 64px;
  height: 40px;
  border: 1px solid #D5DAE2;
  border-right: none;
  border-radius: 6px 0 0 6px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #212A36;
}
.rt-sticky-dock .rt-dock-buy button.rt-dock-cmd {
  height: 40px;
  min-height: 40px;
  padding: 0 22px;
  background: #FCC902;
  border: 1px solid #FCC902;
  border-radius: 6px;
  color: #212A36;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease;
}
@media (hover: hover) {
  .rt-sticky-dock .rt-dock-buy button.rt-dock-cmd:hover {
    background: #212A36;
    border-color: #212A36;
    color: #FFFFFF;
  }
}
.rt-sticky-dock .rt-dock-buy button.rt-dock-cmd:focus-visible {
  outline: 2px solid #FCC902;
  outline-offset: 2px;
}
@media (max-width: 767.98px) {
  body.page-product .rt-sticky-dock {
    z-index: 1060;
  }
  .rt-sticky-dock .rt-dock-inner {
    padding: 6px 14px;
  }
  .rt-sticky-dock .rt-dock-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px 14px;
    padding-bottom: 6px;
  }
  .rt-sticky-dock .rt-dock-nav::-webkit-scrollbar {
    display: none;
  }
  .rt-sticky-dock .rt-dock-row {
    padding-top: 6px;
  }
  .rt-sticky-dock .rt-dock-price .dp-current {
    font-size: 18px;
  }
  .rt-sticky-dock .rt-dock-buy .rt-dock-qty input {
    width: 56px;
    height: 38px;
  }
  .rt-sticky-dock .rt-dock-buy button.rt-dock-cmd {
    height: 38px;
    min-height: 38px;
    padding: 0 16px;
    font-size: 15px;
  }
}

/* ─── B2-3. MASQUAGE DU HEADER GLOBAL (body.rt-header-hide, JS).
        Le header (.rtm-header) se replie au scroll bas, revient au scroll
        haut. JAMAIS supprimé du DOM : state de classe sur <body> seule ;
        transition 200 ms ; restauration garantie. hors-match (header
        caché) le dock sticky reste le seul élément fixe haut. ─── */
body.page-product .rtm-header {
  transition: transform 200ms ease-out;
  will-change: transform;
}
body.page-product.rt-header-hide .rtm-header {
  transform: translateY(-100%);
}

/* ─── ACCESSIBILITÉ : prefers-reduced-motion — neutralise les
        transitions du dock/header. ─── */
@media (prefers-reduced-motion: reduce) {
  body.page-product .rt-sticky-dock,
  body.page-product .rtm-header {
    transition: none !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   GÉNÉRALISATION 2026-09-14 — correctifs révélés par la sortie du pilote.
   Ces deux défauts n'étaient pas visibles sur 6048 (description vide).
   Portée : uniquement les sections verticales de la fiche produit.
   ════════════════════════════════════════════════════════════════════════ */

/* G1 — FICHE TECHNIQUE VIDE sur tout produit AYANT une description.
   Cause : product-details.tpl (thème parent) pose `class="tab-pane fade"`
   et n'ajoute `in active` QUE si la description est vide. Hérité du système
   d'onglets Bootstrap, ce couple vaut display:none + opacity:0. Dans les
   sections verticales il n'y a plus d'onglet pour activer ce panneau :
   le contenu existe dans le HTML mais reste invisible.
   Correctif : dans le conteneur de sections uniquement, un panneau est
   toujours affiché. Aucun impact hors .rt-sections-wrap. */
.rt-sections-wrap .tab-pane {
  display: block !important;
  opacity: 1 !important;
}

/* G2 — TITRES DES DESCRIPTIONS CONSTRUCTEUR.
   611 fiches contiennent des <h2> et 22 des <h1> dans la description.
   Sortis de l'onglet, ils héritaient des tailles de titre du thème et
   écrasaient la hiérarchie de la page (deux H1 à l'écran).
   Correctif : hiérarchie visuelle normalisée DANS la description seule.
   Le HTML n'est pas modifié : le nettoyage des balises reste un lot de
   données (voir AUDIT_CURRENT_PAGE.md, défaut D17). */
.rt-section .product-description h1,
.rt-section .product-description h2 {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: #293544;
  margin: 22px 0 8px;
}
.rt-section .product-description h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 600;
  color: #293544;
  margin: 18px 0 6px;
}
.rt-section .product-description h4,
.rt-section .product-description h5,
.rt-section .product-description h6 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  color: #293544;
  margin: 14px 0 6px;
}
.rt-section .product-description p,
.rt-section .product-description li {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* G3 — CONTENUS LARGES DES DESCRIPTIONS (617 fiches contiennent une table,
   367 une image) : jamais de débordement horizontal de la page. */
.rt-section .product-description img {
  max-width: 100%;
  height: auto;
}
.rt-section .product-description table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* G4 — LOGO FABRICANT dans la fiche technique : le plafond existant est
   scopé .rt-tabs-proto ; on le redonne au conteneur de sections pour les
   fiches où le wrapper diffère. Aucune autre propriété touchée. */
.rt-sections-wrap .product-manufacturer img.manufacturer-logo {
  max-width: 180px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .rt-sections-wrap .product-manufacturer img.manufacturer-logo {
    max-width: 130px;
    max-height: 55px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ICÔNES SÉMANTIQUES DES PUCES — 2026-09-14
   Annule le schéma positionnel de child-custom-correctif3.css (puce 1 = CPU,
   2 = RAM, 3 = stockage, 4 = écran, 5 = carte graphique), faux sur 71,5 % des
   17 168 puces mesurées sur les 5 572 fiches actives.
   Cette feuille se charge APRÈS correctif3, à spécificité égale : elle gagne.
   Codepoints RemixIcon 3.5.0 relevés dans la police auto-hébergée du thème.
   ══════════════════════════════════════════════════════════════════════════ */

/* Défaut : puce neutre. C'est aussi le rendu sans JavaScript.
   Même spécificité que les règles nth-child de correctif3, mais plus tardive. */
.rt-product-page .rt-product-highlights li:nth-child(-n+5)::before,
.rt-product-page .rt-product-highlights li.rt-hl::before {
  content: "\eb7d" !important;       /* ri-checkbox-blank-circle-line */
  font-family: 'remixicon' !important;
  font-style: normal;
  font-size: 9px !important;
  line-height: 1.9 !important;
  color: #9aa3ad !important;
  position: absolute;
  left: 3px;
  top: 3px;
}

/* Icônes par sens. Une règle par famille de caractéristique. */
.rt-product-page .rt-product-highlights li.rt-hl-processeur::before   { content: "\ebf0" !important; } /* cpu */
.rt-product-page .rt-product-highlights li.rt-hl-memoire::before      { content: "\ec16" !important; } /* database-2 */
.rt-product-page .rt-product-highlights li.rt-hl-stockage::before     { content: "\edf9" !important; } /* hard-drive-2 */
.rt-product-page .rt-product-highlights li.rt-hl-ecran::before        { content: "\f235" !important; } /* tv-2 */
.rt-product-page .rt-product-highlights li.rt-hl-graphique::before    { content: "\edab" !important; } /* gamepad */
.rt-product-page .rt-product-highlights li.rt-hl-impression::before   { content: "\f029" !important; } /* printer */
.rt-product-page .rt-product-highlights li.rt-hl-encre::before        { content: "\ee5d" !important; } /* ink-bottle */
.rt-product-page .rt-product-highlights li.rt-hl-scan::before         { content: "\f0bd" !important; } /* scan */
.rt-product-page .rt-product-highlights li.rt-hl-connectique::before  { content: "\f252" !important; } /* usb */
.rt-product-page .rt-product-highlights li.rt-hl-reseau::before       { content: "\f2c0" !important; } /* wifi */
.rt-product-page .rt-product-highlights li.rt-hl-alimentation::before { content: "\f019" !important; } /* plug */
.rt-product-page .rt-product-highlights li.rt-hl-batterie::before     { content: "\eaaa" !important; } /* battery-2-charge */
.rt-product-page .rt-product-highlights li.rt-hl-camera::before       { content: "\eb30" !important; } /* camera-lens */
.rt-product-page .rt-product-highlights li.rt-hl-systeme::before      { content: "\f0e6" !important; } /* settings-3 */
.rt-product-page .rt-product-highlights li.rt-hl-dimensions::before   { content: "\f2f5" !important; } /* box-3 */
.rt-product-page .rt-product-highlights li.rt-hl-garantie::before     { content: "\f100" !important; } /* shield-check */
.rt-product-page .rt-product-highlights li.rt-hl-couleur::before      { content: "\efc5" !important; } /* palette */
.rt-product-page .rt-product-highlights li.rt-hl-vitesse::before      { content: "\f215" !important; } /* timer */
.rt-product-page .rt-product-highlights li.rt-hl-luminosite::before   { content: "\f1bf" !important; } /* sun */
.rt-product-page .rt-product-highlights li.rt-hl-contraste::before    { content: "\ebda" !important; } /* contrast */
.rt-product-page .rt-product-highlights li.rt-hl-compatibilite::before{ content: "\eeb8" !important; } /* links */
.rt-product-page .rt-product-highlights li.rt-hl-documents::before    { content: "\ecf1" !important; } /* file-list */
.rt-product-page .rt-product-highlights li.rt-hl-projection::before   { content: "\f031" !important; } /* projector */
.rt-product-page .rt-product-highlights li.rt-hl-audio::before        { content: "\f2a2" !important; } /* volume-up */

/* Toutes les icônes reconnues partagent la même présentation que l'origine. */
.rt-product-page .rt-product-highlights li.rt-hl-processeur::before,
.rt-product-page .rt-product-highlights li.rt-hl-memoire::before,
.rt-product-page .rt-product-highlights li.rt-hl-stockage::before,
.rt-product-page .rt-product-highlights li.rt-hl-ecran::before,
.rt-product-page .rt-product-highlights li.rt-hl-graphique::before,
.rt-product-page .rt-product-highlights li.rt-hl-impression::before,
.rt-product-page .rt-product-highlights li.rt-hl-encre::before,
.rt-product-page .rt-product-highlights li.rt-hl-scan::before,
.rt-product-page .rt-product-highlights li.rt-hl-connectique::before,
.rt-product-page .rt-product-highlights li.rt-hl-reseau::before,
.rt-product-page .rt-product-highlights li.rt-hl-alimentation::before,
.rt-product-page .rt-product-highlights li.rt-hl-batterie::before,
.rt-product-page .rt-product-highlights li.rt-hl-camera::before,
.rt-product-page .rt-product-highlights li.rt-hl-systeme::before,
.rt-product-page .rt-product-highlights li.rt-hl-dimensions::before,
.rt-product-page .rt-product-highlights li.rt-hl-garantie::before,
.rt-product-page .rt-product-highlights li.rt-hl-couleur::before,
.rt-product-page .rt-product-highlights li.rt-hl-vitesse::before,
.rt-product-page .rt-product-highlights li.rt-hl-luminosite::before,
.rt-product-page .rt-product-highlights li.rt-hl-contraste::before,
.rt-product-page .rt-product-highlights li.rt-hl-compatibilite::before,
.rt-product-page .rt-product-highlights li.rt-hl-documents::before,
.rt-product-page .rt-product-highlights li.rt-hl-projection::before,
.rt-product-page .rt-product-highlights li.rt-hl-audio::before {
  font-family: 'remixicon' !important;
  font-style: normal;
  font-size: 17px !important;
  line-height: 1.2 !important;
  color: #293544 !important;
  position: absolute;
  left: 0;
  top: 3px;
}

/* Au-delà de la 5e puce, l'affichage reste celui du correctif 2 (puces masquées) :
   aucune règle ajoutée ici pour ne pas changer ce comportement validé. */


/* ════════════════════════════════════════════════════════════════════════
   BARRE STICKY — STRUCTURE EN 2 LIGNES (14/09/2026, demande du décideur,
   modèle des fiches HP et Lenovo) :
     ligne 1 — nom du produit à gauche, prix puis « Commandez » à droite ;
     ligne 2 — menu des sections de la fiche.
   Auparavant les deux lignes étaient inversées (menu au-dessus, prix en
   dessous) et le nom du produit n'apparaissait pas. Le champ quantité a
   été retiré de la barre : la quantité reste celle du bloc d'achat.
   Ces règles arrivent après celles du lot B2 et les remplacent.
   ════════════════════════════════════════════════════════════════════════ */

/* Ligne 1 */
.rt-sticky-dock .rt-dock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0 8px;
  border-bottom: 1px solid #EFF2F6;
}
.rt-sticky-dock .rt-dock-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #212A36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-sticky-dock .rt-dock-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.rt-sticky-dock .rt-dock-price {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  gap: 8px;
  line-height: 1.2;
  min-width: 0;
}
.rt-sticky-dock .rt-dock-price .dp-regular {
  font-size: 13px;
  color: #9AA3AD;
  text-decoration: line-through;
  white-space: nowrap;
}
.rt-sticky-dock .rt-dock-price .dp-current {
  font-size: 20px;
  font-weight: 700;
  color: #212A36;
  white-space: nowrap;
}

/* Le bouton n'est plus enfermé dans .rt-dock-buy : même présentation. */
.rt-sticky-dock button.rt-dock-cmd {
  height: 40px;
  min-height: 40px;
  padding: 0 22px;
  background: #FCC902;
  border: 1px solid #FCC902;
  border-radius: 6px;
  color: #212A36;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
@media (hover: hover) {
  .rt-sticky-dock button.rt-dock-cmd:hover {
    background: #212A36;
    border-color: #212A36;
    color: #FFFFFF;
  }
}
.rt-sticky-dock button.rt-dock-cmd:focus-visible {
  outline: 2px solid #FCC902;
  outline-offset: 2px;
}
.rt-sticky-dock button.rt-dock-cmd[disabled] {
  background: #E5E9EF;
  border-color: #E5E9EF;
  color: #9AA3AD;
  cursor: not-allowed;
}

/* Ligne 2 — menu des sections, sans trait sous lui (il est au-dessus). */
.rt-sticky-dock .rt-dock-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 8px 0 2px;
  border-bottom: none;
  font-size: 13px;
}

/* Mobile : le nom cède la place au prix et au bouton ; le menu défile. */
@media (max-width: 767.98px) {
  .rt-sticky-dock .rt-dock-title {
    display: none;
  }
  .rt-sticky-dock .rt-dock-row {
    justify-content: flex-end;
    padding: 2px 0 6px;
  }
  .rt-sticky-dock .rt-dock-actions {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  .rt-sticky-dock .rt-dock-price .dp-current {
    font-size: 18px;
  }
  .rt-sticky-dock button.rt-dock-cmd {
    height: 38px;
    min-height: 38px;
    padding: 0 16px;
    font-size: 15px;
  }
  .rt-sticky-dock .rt-dock-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px 14px;
    padding: 6px 0 2px;
  }
  .rt-sticky-dock .rt-dock-nav::-webkit-scrollbar {
    display: none;
  }
}

/* Correctif mobile de la barre : le bouton ne doit jamais être rogné.
   Le prix peut se réduire, le bouton garde sa largeur. Le prix barré cède
   la place sous 480 px, le prix courant reste toujours visible. */
@media (max-width: 767.98px) {
  .rt-sticky-dock .rt-dock-actions {
    min-width: 0;
    flex-wrap: nowrap;
  }
  .rt-sticky-dock .rt-dock-price {
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
  }
  .rt-sticky-dock .rt-dock-price .dp-current {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rt-sticky-dock button.rt-dock-cmd {
    flex: 0 0 auto;
  }
}
@media (max-width: 480px) {
  .rt-sticky-dock .rt-dock-price .dp-regular {
    display: none;
  }
  .rt-sticky-dock button.rt-dock-cmd {
    padding: 0 14px;
  }
}

/* Garde-fou de largeur : la barre ne dépasse jamais l'écran, quel que soit
   le contenu (nom long, prix barré, libellés du menu). */
.rt-sticky-dock .rt-dock-inner {
  box-sizing: border-box;
  max-width: min(1320px, 100%);
}
.rt-sticky-dock .rt-dock-row,
.rt-sticky-dock .rt-dock-actions,
.rt-sticky-dock .rt-dock-price {
  min-width: 0;
}
.rt-sticky-dock .rt-dock-row {
  flex-wrap: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   CORRECTIF DE SUPERPOSITION (14/09/2026) — mesuré au protocole DevTools.
   L'en-tête du site (`header#header`, `position: sticky`) porte un
   z-index de 9000, la barre n'avait que 1050 : la PREMIÈRE LIGNE de la
   barre (nom, prix, bouton) passait DERRIÈRE l'en-tête et restait
   invisible ; seule la ligne du menu dépassait. Le repli du lot B2 ne
   déplace que la barre de menu `.rtm-header` (−60 px), pas tout l'en-tête,
   qui continue donc de recouvrir la zone.
   Preuve avant correctif : elementFromPoint au centre de la ligne 1
   renvoyait `DIV.rgt-nav`, jamais la ligne elle-même.
   La barre passe au-dessus de l'en-tête, comme sur les fiches HP et Lenovo.
   ════════════════════════════════════════════════════════════════════════ */
body.page-product .rt-sticky-dock {
  z-index: 9500;
}
@media (max-width: 767.98px) {
  body.page-product .rt-sticky-dock {
    z-index: 9500;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ TACTILE (14/09/2026) — mesure protocole DevTools sur mobile.
   Le bouton de la barre tombait à 38 px de haut, sous le minimum de 44 px
   fixé par la matrice de tests du chantier (QA_CHECKLIST, test A3).
   Il repasse à 44 px sur mobile ; le reste de la barre est inchangé.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .rt-sticky-dock button.rt-dock-cmd {
    height: 44px;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRE STICKY — LIGNE 2 SUR FOND SOMBRE + SECTION ATTEINTE SOULIGNÉE
   14/09/2026, demande du décideur, modèle de la fiche HP.
     · la deuxième ligne (menu des sections) passe sur `#1D2835`, couleur
       déjà présente dans la charte du thème enfant (palette10) ;
     · le fond sombre occupe toute la largeur, le menu reste aligné sur le
       conteneur, comme la première ligne ;
     · au survol ET quand le défilement atteint la section, l'entrée est
       soulignée en jaune `#FCC902` — même rendu dans les deux cas.
   ══════════════════════════════════════════════════════════════════════════ */

/* Bandeau pleine largeur de la ligne 2 */
.rt-sticky-dock .rt-dock-navwrap {
  background: #1D2835;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav {
  box-sizing: border-box;
  max-width: min(1320px, 100%);
  margin: 0 auto;
  padding: 0 20px;
  border-bottom: none;
  gap: 0 26px;
  font-size: 13.5px;
}

/* Entrées : claires sur le fond sombre, soulignement réservé à l'état actif */
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a {
  display: inline-block;
  padding: 11px 0 9px;
  color: #D7DCE3;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

/* Survol ET section atteinte : même rendu, soulignement jaune */
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a:hover,
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a:focus-visible,
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a.is-active {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom-color: #FCC902;
}
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a.is-active {
  font-weight: 600;
}
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a:focus-visible {
  outline: 2px solid #FCC902;
  outline-offset: 2px;
}

/* Les séparateurs « · » n'ont plus lieu d'être sur le bandeau sombre */
.rt-sticky-dock .rt-dock-navwrap .rt-dock-nav .rt-dock-nav-sep {
  display: none;
}

/* La première ligne reste blanche ; on retire le filet devenu inutile */
.rt-sticky-dock .rt-dock-row {
  border-bottom: none;
  padding: 8px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  .rt-sticky-dock .rt-dock-navwrap .rt-dock-nav {
    padding: 0 14px;
    gap: 0 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rt-sticky-dock .rt-dock-navwrap .rt-dock-nav::-webkit-scrollbar {
    display: none;
  }
  .rt-sticky-dock .rt-dock-navwrap .rt-dock-nav a {
    padding: 10px 0 8px;
    font-size: 13px;
  }
  .rt-sticky-dock .rt-dock-row {
    padding: 6px 0 6px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BULLE WHATSAPP SUR LES FICHES PRODUIT (14/09/2026)
   La feuille correctif5 réduit et déplace le cercle DANS la boîte du module
   (règle écrite pour le produit pilote, devenue générale le 14/09). Le cercle
   se retrouvait donc décalé par rapport aux autres pages, et coupé à gauche.
   On le ramène au même emplacement que partout ailleurs, en conservant la
   taille réduite voulue. Mesuré, pas déduit.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body.page-product .cbh-phone .cbh-ph-circle {
    top: 77px !important;
    left: 58px !important;
  }
  body.page-product .cbh-phone .cbh-ph-circle-fill {
    top: 83px !important;
    left: 64px !important;
  }
  body.page-product .cbh-phone .cbh-ph-img-circle1,
  body.page-product .cbh-phone .cbh-ph-img-circle {
    top: 89px !important;
    left: 70px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FICHE TECHNIQUE — 2026-09-18, version retenue
   Remplace les deux jets precedents ; l'historique est dans les .bak du jour.

   MODELE : la fiche Cdiscount que m'a envoyee Aziz. Ce qui y fonctionne et
   qu'on reprend :
     - le libelle sur une TRAME GRISE, la valeur a cote sur un fond plus
       clair. C'est la trame qui guide l'oeil, pas un filet ;
     - un titre de groupe sobre, sans soulignement, avec de l'air au-dessus ;
     - des valeurs multi-lignes qui respirent, jamais tronquees.

   CE QU'ON FAIT DIFFEREMMENT, et pourquoi : Cdiscount empile une seule
   colonne. Notre zone de contenu fait pres de 1 100 px ; a une colonne, la
   fiche du L3250 ferait soixante lignes et trois ecrans de haut. Deux paires
   par ligne au-dela de 992 px, comme Aziz l'a demande.

   RAPPEL DE METHODE : ces feuilles sont servies avec max-age=3600 et sans
   version. Toute modification ici exige de bouger le ?v= dans
   product_page_style.tpl, sinon le navigateur garde l'ancienne une heure —
   c'est ce qui a fait croire que la mise en forme ne marchait pas.
   ══════════════════════════════════════════════════════════════════════ */

.rt-fiche {
  margin: 0;
  display: block;
  overflow-x: visible;
}

.rt-fiche__groupe {
  margin: 0 0 28px;
}

.rt-fiche__groupe-titre {
  margin: 0 0 10px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #1d2835;
  text-transform: none;
  border: 0;
}

.rt-fiche__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 26px;
  margin: 0;
  padding: 0;
}

.rt-fiche__ligne {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  align-items: stretch;
}

.rt-fiche__ligne > dt {
  margin: 0;
  padding: 11px 14px;
  /* LE LIBELLE, TRAME LA PLUS SOUTENUE. Aziz a demande #f6f8fd — la
     --palette8 du theme — puis a refuse la valeur en blanc : « 6500 pages
     bg blanc j'aime pas ». Il faut donc DEUX trames et aucune cellule
     blanche. Le libelle prend un cran de plus que la palette, la valeur
     prend la palette : les deux restent dans la meme famille bleue, le
     damier se lit, et rien ne tranche en blanc. */
  background: #e7edf9;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #3c4858;
  overflow-wrap: anywhere;      /* « Prise en charge du systeme d'exploitation serveur » */
}

.rt-fiche__ligne > dd {
  margin: 0;
  padding: 11px 14px;
  /* LA VALEUR PREND LA PALETTE8 EXACTE, celle qu'Aziz voulait voir. */
  background: #f6f8fd;
  font-size: 13px;
  line-height: 1.45;
  color: #4a5b6b;
  overflow-wrap: anywhere;      /* la liste des Windows pris en charge fait 200 signes */
}

/* Bureau : deux paires cote a cote. La fiche du L3250 passe de soixante
   lignes a trente. */
@media (min-width: 992px) {
  .rt-fiche__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Telephone : le libelle au-dessus de sa valeur, pleine largeur. A cette
   largeur, deux colonnes redonneraient le debordement qu'on vient de
   supprimer. */
@media (max-width: 575.98px) {
  .rt-fiche__ligne {
    grid-template-columns: minmax(0, 1fr);
  }
  .rt-fiche__ligne > dt {
    font-weight: 600;
    padding-bottom: 6px;
  }
  .rt-fiche__ligne > dd {
    padding-top: 6px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   DESCRIPTION — le texte redactionnel du constructeur

   Epson livre sa presentation dans des TABLEAUX de mise en page a deux
   cellules : le texte a gauche, une photo de 518 px a droite. Le garde-fou
   d'origine leur donnait display:block + overflow-x:auto ; chaque paragraphe
   se retrouvait dans un cadre avec sa propre barre de defilement, et la
   photo sortait de sa cellule pour se poser par-dessus le texte.

   On rend au tableau son comportement de tableau, on borne la photo a sa
   cellule, et sous 768 px les deux cellules s'empilent.
   ══════════════════════════════════════════════════════════════════════ */

.rt-section .product-description table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  overflow-x: visible;
  border-collapse: collapse;
  border: 0;
  background: transparent;
  margin: 0 0 18px;
}

.rt-section .product-description table td,
.rt-section .product-description table th {
  border: 0;
  background: transparent;
  vertical-align: top;
  padding: 10px 14px;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* LA PHOTO QUI DEBORDAIT. width="518" dans le HTML d'Epson, sans
   contrainte : elle sortait de sa cellule. On la borne, on lui rend ses
   proportions, et on la centre. */
.rt-section .product-description table img,
.rt-section .product-description img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.rt-section .product-description h2 {
  font-size: 19px;
  margin: 0 0 10px;
}

@media (max-width: 767.98px) {
  .rt-section .product-description table,
  .rt-section .product-description table tbody,
  .rt-section .product-description table tr,
  .rt-section .product-description table td,
  .rt-section .product-description table th {
    display: block;
    width: 100% !important;
  }
  .rt-section .product-description table td {
    padding: 8px 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LA PHOTO QUI SE POSAIT SUR LE TEXTE — 2026-09-18, deuxieme passe

   Aziz : « le probleme de la photo dans la description du produit est
   toujours la ». Mesure faite a 1 265 px, la largeur de son ecran : la
   photo Epson s'affichait a 1 042 px dans une cellule de 1 070, par-dessus
   le texte de la cellule voisine large de 150 px.

   DEUX CAUSES, dont une de moi.

   1. LE THEME. theme.css impose, hors de toute media query :
          .product-description table td:first-child { width: 150px }
          .product-description table td:last-child  { width: 100%  }
      C'est juste pour un tableau libelle/valeur — 150 px de libelle, le
      reste pour la valeur. Mais Epson livre sa presentation dans un tableau
      de MISE EN PAGE a deux cellules egales, texte a gauche, photo a droite.
      La regle du theme ecrase le width="50%" du HTML et donne 150 / 1 070.

   2. MOI. J'avais ecrit « width: auto » sur ces images en croyant bien
      faire. Un attribut width="518" dans le HTML vaut une declaration CSS
      de plus faible priorite : mon « auto » l'annulait, l'image reprenait
      sa taille naturelle — 3 994 px — et n'etait plus bornee que par
      max-width, donc par la cellule. En retirant « auto », le 518 voulu
      par Epson s'applique de nouveau.

   La regle ci-dessous ne vise que les rangees a EXACTEMENT deux cellules,
   dans la description seule. Depuis que la fiche technique a sa propre
   section, la description ne contient plus que ces tableaux de mise en
   page : le partage en deux moities y est toujours le bon.
   ══════════════════════════════════════════════════════════════════════ */

.rt-section .product-description table td:first-child:nth-last-child(2),
.rt-section .product-description table td:first-child:nth-last-child(2) ~ td {
  width: 50%;
}

.rt-section .product-description table img,
.rt-section .product-description img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .rt-section .product-description table td:first-child:nth-last-child(2),
  .rt-section .product-description table td:first-child:nth-last-child(2) ~ td {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LE TEXTE QUI NE SE REPLIAIT PAS — 2026-09-18, troisieme cause

   Symptome : le paragraphe d'Epson tenait sur UNE SEULE LIGNE de 3 808 px
   dans une cellule de 582, passait sous la photo et faisait defiler toute
   la page (scrollWidth 3 837 pour une fenetre de 1 250).

   Cause : rx-tableaux.js classe les tableaux par nombre de colonnes et pose
   la classe rt-tbl-duo sur ceux a deux colonnes. Cette classe porte
   white-space: nowrap — ce qui se defend pour un tableau libelle/valeur,
   ou l'on ne veut pas couper « 5760 x 1440 DPI ». Mais depuis que la fiche
   technique a sa propre section, les seuls tableaux a deux colonnes qui
   restent dans la description sont les MISES EN PAGE du constructeur :
   du texte courant, qui doit se replier.

   On ne touche pas au script ni a la classe : on rend simplement le
   retour a la ligne aux tableaux de la description.
   ══════════════════════════════════════════════════════════════════════ */

.rt-section .product-description table,
.rt-section .product-description table tbody,
.rt-section .product-description table tr,
.rt-section .product-description table td,
.rt-section .product-description table th,
.rt-section .product-description table p,
.rt-section .product-description table li,
.rt-section .product-description table h2,
.rt-section .product-description table h3 {
  white-space: normal;
}


/* ══════════════════════════════════════════════════════════════════════
   LA DESCRIPTION SUR FOND BLANC
   Le fond de la page produit est --palette8, soit #f6f8fd. Les images des
   descriptions constructeur sont des JPEG, donc opaques : leur carre blanc
   se detache du fond bleute, et on voit un rectangle autour de chaque
   photo. 181 fiches sont dans ce cas sur les 338 qui portent une image.
   Detourer 181 images n'a pas de sens ; poser la description sur blanc
   regle le probleme d'un trait, et le blanc va aussi bien aux 45 PNG
   transparents qu'aux JPEG.
   ══════════════════════════════════════════════════════════════════════ */

body.page-product #rt-section-description {
  background: #ffffff;
  border-radius: 10px;
  padding-left: 22px;
  padding-right: 22px;
}

@media (max-width: 767.98px) {
  body.page-product #rt-section-description {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 8px;
  }
}


/* La fiche technique repose desormais sur un panneau blanc, comme la
   description : sans lui, la valeur a #f6f8fd se confondrait avec le fond
   de page, qui est cette meme couleur. Le panneau fait ressortir les deux
   trames sans qu'aucune cellule soit blanche. */
body.page-product #rt-section-specifications {
  background: #ffffff;
  border-radius: 10px;
  padding-left: 22px;
  padding-right: 22px;
}

@media (max-width: 767.98px) {
  body.page-product #rt-section-specifications {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 8px;
  }
}