/* =========================================================================
LE HUB DES PAGES MARQUE — feuille commune
=========================================================================
Extrait le 16/09/2026 de la page HP, qui portait tout en ligne dans son
propre champ. Une marque de plus ne coute plus une copie de ce fichier :
elle ecrit seulement son contenu.
La page HP garde sa copie en ligne et n'est pas touchee. Sa copie etant
dans le corps de page, c'est elle qui garde la main pour HP.
Servi uniquement sur les pages marque, par manufacturer.tpl.
========================================================================= */
/* ===== le bandeau defilant : structure, navigation, texte, boutons, reactivite ===== */
/* =========================================================
CORE SLIDER
========================================================= */
.hero-slider {
position: relative;
overflow: hidden;
height: clamp(440px, 70vh, 580px);
min-height: clamp(440px, 70vh, 580px);
background: #1D2835;
z-index: 1;
}
.hero-track {
position: relative;
width: 100%;
height: 100%;
}
/* Slide 1 visible immédiatement avant JS */
.hero-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
overflow: hidden;
opacity: 0;
transform: scale(1.04);
will-change: transform, opacity;
}
.hero-slide:first-child {
opacity: 1;
transform: scale(1);
z-index: 2;
}
.hero-slider.js-ready .hero-slide:first-child {
opacity: 1;
transform: scale(1);
z-index: 2;
}
.hero-image img {
transition: transform 0.6s ease;
}
/* =========================================================
NAVIGATION
========================================================= */
.hero-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 20;
}
.hero-nav button {
pointer-events: all;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #fcc902;
color: #1D2835;
font-size: 19px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s, background 0.3s, color 0.3s;
z-index: 20;
}
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-slider:hover .hero-nav button,
.hero-nav button:focus-visible {
opacity: 1;
}
/* Couleur de base du cercle = couleur de fond de la slide active */
.hero-slider[data-active="2"] .hero-nav button {
background: #dbe9f5;
color: #1D2835;
}
.hero-slider[data-active="3"] .hero-nav button {
background: #f3e6d3;
color: #1D2835;
}
.hero-slider[data-active="4"] .hero-nav button {
background: #fcc902;
color: #1D2835;
}
.hero-slider[data-active="5"] .hero-nav button {
background: #bbcdc1;
color: #1D2835;
}
/* Survol du bouton lui-même : toujours la même couleur, quelle que soit la slide */
.hero-nav button:hover {
background: #1D2835 !important;
color: #fff !important;
}
/* =========================================================
CONTAINER
========================================================= */
.hero-container {
width: 100%;
max-width: 1500px;
margin: 0 auto;
padding: 40px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* =========================================================
TEXT
========================================================= */
.hero-content {
flex: 1;
max-width: 520px;
z-index: 2;
}
.hero-tagline {
font-size: 14px;
margin-bottom: 12px;
color: #1D2835;
}
.hero-title {
font-size: clamp(28px, 3vw, 46px);
font-weight: 800;
line-height: 1.2;
margin-bottom: 16px;
color: #1D2835;
white-space: nowrap;
}
.hero-title span {
display: block;
margin-top: 6px;
font-size: 20px;
font-weight: 400;
opacity: 0.85;
}
.hero-sub {
font-weight: 700;
margin-bottom: 24px;
color: #1D2835;
}
/* =========================================================
FEATURES
========================================================= */
.hero-features {
margin-bottom: 20px;
padding: 0;
list-style: none;
}
.hero-features li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
margin-bottom: 6px;
color: #1D2835;
}
.hero-features .dot {
width: 6px;
height: 6px;
background: #1D2835;
border-radius: 50%;
flex-shrink: 0;
}
/* =========================================================
BUTTONS
========================================================= */
.hero-buttons {
display: flex;
flex-direction: row;
gap: 12px;
flex-wrap: wrap;
}
.hero-buttons a {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
min-width: 160px;
padding: 0 20px;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s ease;
}
/* PRIMARY — défaut slides 2 & 4 */
.btn-primary {
background: #fcc902;
color: #1D2835;
border: 2px solid #fcc902;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.btn-primary:hover {
background: #fff;
color: #1D2835;
border-color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* SECONDARY — défaut */
.btn-secondary {
background: #1D2835;
color: #fff;
border: 2px solid #1D2835;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.btn-secondary:hover {
background: #fff;
color: #1D2835;
border-color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* OVERRIDES SLIDES 1 & 3 — fond jaune */
.slide-1 .btn-primary,
.slide-3 .btn-primary {
background: #1D2835 !important;
color: #fff !important;
border-color: #1D2835 !important;
}
.slide-1 .btn-primary:hover,
.slide-3 .btn-primary:hover:hover {
background: #fff !important;
color: #1D2835 !important;
border-color: #fff !important;
}
.slide-1 .btn-secondary,
.slide-3 .btn-secondary {
background: transparent !important;
color: #1D2835 !important;
border-color: #1D2835 !important;
}
.slide-1 .btn-secondary:hover,
.slide-3 .btn-secondary:hover {
background: #fff !important;
color: #1D2835 !important;
border-color: #fff !important;
}
/* =========================================================
IMAGE
========================================================= */
.hero-image {
flex: 1;
max-width: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image img {
width: 100%;
height: auto;
display: block;
}
/* =========================================================
BACKGROUNDS
========================================================= */
.slide-1 { background: linear-gradient(135deg, #fcc902, #f5c400); }
.slide-2 { background: #f1f4f9; }
.slide-3 { background: linear-gradient(135deg, #fcc902, #f5c400); }
.slide-4 { background: #bbcdc1; }
.slide-5 { background: #dbe9f5; }
.slide-6 { background: #f3e6d3; }
/* =========================================================
HALO EFFECT
========================================================= */
.slide-1::after,
.slide-2::after,
.slide-3::after,
.slide-4::after {
content: "";
position: absolute;
right: 10%;
top: 20%;
width: 320px;
height: 320px;
background: rgba(255,255,255,0.25);
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
/* =========================================================
PROGRESS BAR
========================================================= */
.hero-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(255,255,255,0.25);
z-index: 10;
}
.hero-progress-fill {
display: block;
height: 100%;
width: 0%;
background: #fcc902;
}
/* =========================================================
DOTS
========================================================= */
.hero-dots {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.hero-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.4);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.hero-dot.active {
background: #fcc902;
transform: scale(1.3);
}
.hero-slider {
z-index: 1 !important;
position: relative !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
/* Desktop base */
.hero-slider {
height: clamp(440px, 70vh, 580px);
min-height: clamp(440px, 70vh, 580px);
}
@media (max-width: 1200px) {
.hero-slider {
height: 540px;
min-height: 540px;
}
}
@media (max-width: 992px) {
.hero-slider {
height: 600px;
min-height: 600px;
}
.hero-title {
white-space: normal;
}
.hero-container {
flex-direction: column-reverse;
text-align: center;
padding: 20px 15px;
gap: 20px;
}
.hero-image {
max-width: 300px;
margin: 0 auto;
}
.hero-content {
max-width: 100%;
margin: 0 auto;
}
.hero-buttons {
justify-content: center;
}
.hero-features {
display: inline-block;
text-align: left;
}
}
@media (max-width: 768px) {
.hero-slider {
height: 700px;
min-height: 700px;
}
.hero-image {
max-width: 300px;
}
.hero-title {
font-size: 22px;
white-space: normal;
}
.hero-title span {
font-size: 15px;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-buttons a {
width: auto;
}
}
@media (max-width: 480px) {
.hero-slider {
height: 640px;
min-height: 640px;
}
}
/* =========================================================
PRODUIT ROW (slides promo avec 4 articles)
========================================================= */
.hero-slide.has-row {
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.has-row .hero-container {
padding: 16px 50px 8px;
flex-shrink: 0;
}
.has-row .hero-title {
font-size: clamp(20px, 2.2vw, 28px);
}
.has-row .hero-image {
max-width: 260px;
flex: 1;
}
.has-row .hero-image img {
max-height: 160px;
width: auto;
margin: 0 auto;
display: block;
}
.hero-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: rgba(255,255,255,0.5);
border-top: 1px solid rgba(29,40,53,0.12);
position: relative;
z-index: 2;
}
.hero-pcard {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: inherit;
background: transparent;
border: none;
border-right: 1px solid rgba(29,40,53,0.12);
border-radius: 0;
padding: 8px 10px 10px;
position: relative;
transition: background 0.2s;
}
.hero-pcard:last-child {
border-right: none;
}
.hero-pcard:hover {
background: rgba(255,255,255,0.55);
}
.hero-pcard img {
width: 100%;
height: 52px;
object-fit: contain;
margin-bottom: 5px;
}
.hero-pcard .pname {
font-size: 11px;
color: #5c6874;
line-height: 1.25;
margin: 0 0 3px;
min-height: 26px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero-pcard .pprice {
font-size: 13px;
font-weight: 700;
color: #1D2835;
}
.hero-pcard .pprice s {
font-size: 10px;
font-weight: 400;
color: #8a94a0;
margin-right: 4px;
}
.hero-pcard .ppct {
position: absolute;
top: 6px;
right: 6px;
background: #B8451F;
color: #fff;
font-size: 9px;
font-weight: 700;
padding: 2px 5px;
border-radius: 5px;
}
@media (max-width: 768px) {
.hero-row {
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.hero-pcard img {
height: 46px;
}
.hero-pcard {
padding: 10px 6px 12px;
}
.has-row .hero-container {
padding: 16px 15px 8px;
}
.has-row .hero-image {
max-width: 220px;
}
.has-row .hero-image img {
max-height: 150px;
}
.has-row .hero-title {
font-size: 22px;
}
}
/* =========================================================
RUBAN "SPÉCIAL RENTRÉE" (remplace hero-tagline sur les promos)
========================================================= */
.ribbon {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
font-size: 12px;
padding: 6px 12px 6px 10px;
border-radius: 999px;
margin-bottom: 14px;
color: #fff;
background: #1D2835;
}
.ribbon .days {
background: rgba(255,255,255,0.28);
padding: 1px 7px;
border-radius: 999px;
margin-left: 2px;
font-weight: 700;
}
.has-row .hero-title {
font-size: 22px;
}
.has-row .hero-title span {
font-size: 13.5px;
}
/* =========================================================
SLIDE 3 — photo pleine largeur (PC portable à petit prix)
========================================================= */
.slide-3-photo {
position: absolute;
inset: 0;
}
.slide-3-photo .hero-bg-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.slide-3-photo .hero-container {
position: relative;
z-index: 1;
justify-content: flex-start;
}
.slide-3-photo .hero-content {
background: rgba(255,255,255,0.0);
}
@media (max-width: 992px) {
.slide-3-photo .hero-bg-photo {
object-position: 75% center;
}
.slide-3-photo .hero-content {
background: rgba(255, 201, 2, 0.85);
border-radius: 16px;
padding: 20px;
}
}
/* =========================================================
SLIDE 7 — annonce rentrée, photo pleine largeur, texte à gauche
========================================================= */
.slide-7-photo {
position: absolute;
inset: 0;
}
.slide-7-photo .hero-bg-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.slide-7-photo .hero-container {
position: relative;
z-index: 1;
justify-content: flex-start;
}
.slide-7-photo .hero-content {
max-width: 480px;
}
.slide-7-photo .hero-title {
color: #fff;
white-space: normal;
font-size: clamp(24px, 2.6vw, 34px);
max-width: 420px;
}
.slide-7-photo .hero-title span {
color: rgba(255,255,255,0.85);
white-space: normal;
font-size: 17px;
margin-top: 26px;
}
.slide-7-photo .hero-sub {
color: rgba(255,255,255,0.85);
font-weight: 600;
font-size: 14px;
}
.hero-slider[data-active="1"] .hero-nav button {
background: #1D2835;
color: #fff;
}
@media (max-width: 992px) {
.slide-7-photo .hero-bg-photo {
object-position: 70% center;
}
.slide-7-photo .hero-content {
max-width: 100%;
margin-left: 0;
}
}
/* ============ SLIDES SUR FOND PHOTO — 14/09 ============
Les quatre fonds laissent la zone de gauche libre : le texte s y pose en
marine, sans voile ni cartouche. Aucune promotion n est active au catalogue,
donc aucun prix barre ni pastille de remise. */
.hero-slide.hero-photo { position: absolute; inset: 0; }
.hero-photo .hero-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-photo .hero-container { position: relative; z-index: 1; justify-content: flex-start; }
.hero-photo .hero-content { max-width: 520px; }
.hero-photo .hero-kicker { display: inline-block; font-size: 13px; font-weight: 600; color: #5c6874; margin-bottom: 10px; }
.hero-photo .hero-title { color: #1D2835; white-space: normal; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.12; }
.hero-photo .hero-title span { display: block; color: #45525f; font-weight: 500; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.45; margin-top: 14px; }
.hero-photo .hero-sub { color: #5c6874; font-weight: 500; font-size: 14px; }
.slide-10 .hero-bg-photo { object-position: 72% center; }
.slide-11 .hero-bg-photo { object-position: 68% center; }
.slide-12 .hero-bg-photo { object-position: 62% center; }
.slide-13 .hero-bg-photo { object-position: 66% center; }
/* Fond jaune : bouton marine, pour ne pas repondre au fond. */
.slide-10 .btn-primary { background: #1D2835 !important; color: #fff !important; border-color: #1D2835 !important; }
.slide-10 .btn-primary:hover { background: #fff !important; color: #1D2835 !important; border-color: #fff !important; }
/* La pastille de remise etait en #B8451F, terracotta hors charte. */
.hero-pcard .ppct { background: #1D2835; }
@media (max-width: 991.98px) {
.hero-photo .hero-content { max-width: 100%; }
.hero-photo .hero-title { font-size: clamp(22px, 5vw, 30px); }
.slide-10 .hero-bg-photo, .slide-11 .hero-bg-photo,
.slide-12 .hero-bg-photo, .slide-13 .hero-bg-photo { object-position: 70% center; }
}
@media (max-width: 767.98px) {
/* Sur telephone le sujet de la photo remonte sous le texte : sans voile le
contraste ne tient pas. */
.hero-photo .hero-content { background: rgba(255,255,255,.88); border-radius: 14px; padding: 16px 16px 18px; }
.hero-row { grid-template-columns: repeat(2, 1fr); }
}
/* La rangee etait en blanc a 50 % : posee sur la photo, les noms de produits
devenaient illisibles. */
.hero-photo .hero-row { background: rgba(255, 255, 255, .94); }
.hero-photo .hero-pcard .pname { color: #45525f; }
/* ============ DISPOSITION DE LA RANGEE — 14/09 ============
Bande blanche sous la photo et cartes horizontales, comme la maquette.
Le balisage d une carte est `![]()
` : trois
enfants a plat. Une grille place la vignette en colonne 1 sur deux lignes,
le nom et le prix en colonne 2 — sans toucher au HTML. */
.hero-photo .hero-row {
background: #fff;
border-top: 1px solid rgba(29, 40, 53, .10);
}
.hero-photo .hero-pcard {
display: grid;
grid-template-columns: 66px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 13px;
row-gap: 2px;
align-items: center;
align-content: center;
text-align: left;
padding: 14px 16px;
border-right: 1px solid rgba(29, 40, 53, .08);
position: relative;
}
.hero-photo .hero-pcard:last-child { border-right: 0; }
.hero-photo .hero-pcard img {
grid-column: 1;
grid-row: 1 / span 2;
width: 66px;
height: 54px;
object-fit: contain;
margin: 0;
}
.hero-photo .hero-pcard .pname {
grid-column: 2;
grid-row: 1;
font-size: 12.5px;
line-height: 1.3;
color: #1D2835;
font-weight: 500;
margin: 0;
min-height: 0;
}
.hero-photo .hero-pcard .pprice {
grid-column: 2;
grid-row: 2;
font-size: 14.5px;
font-weight: 700;
color: #1D2835;
}
.hero-photo .hero-pcard .pprice s {
font-size: 11px;
color: #8a94a0;
margin-right: 5px;
}
.hero-photo .hero-pcard .ppct {
position: absolute;
top: 8px;
right: 10px;
background: #1D2835;
}
/* Cadrage : `center` respecte la maquette ; le 72 % poussait le sujet hors champ. */
.slide-10 .hero-bg-photo,
.slide-11 .hero-bg-photo,
.slide-12 .hero-bg-photo,
.slide-13 .hero-bg-photo { object-position: center; }
@media (max-width: 767.98px) {
.hero-photo .hero-pcard { grid-template-columns: 48px minmax(0, 1fr); column-gap: 9px; padding: 10px 12px; }
.hero-photo .hero-pcard img { width: 48px; height: 40px; }
.hero-photo .hero-pcard .pname { font-size: 11.5px; }
.hero-photo .hero-pcard .pprice { font-size: 13px; }
}
/* ============ DISPOSITION DE LA RANGEE v2 — 14/09 ============
Bande blanche sous la photo et cartes horizontales, comme la maquette.
Le balisage d une carte est `![]()
` : trois
enfants a plat. Une grille place la vignette en colonne 1 sur deux lignes,
le nom et le prix en colonne 2 — sans toucher au HTML. */
.hero-photo .hero-row {
background: #fff;
border-top: 1px solid rgba(29, 40, 53, .10);
}
.hero-photo .hero-pcard {
display: grid;
grid-template-columns: 66px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 13px;
row-gap: 2px;
align-items: center;
align-content: center;
text-align: left;
padding: 14px 16px;
border-right: 1px solid rgba(29, 40, 53, .08);
position: relative;
}
.hero-photo .hero-pcard:last-child { border-right: 0; }
.hero-photo .hero-pcard img {
grid-column: 1;
grid-row: 1 / span 2;
width: 66px;
height: 54px;
object-fit: contain;
margin: 0;
}
.hero-photo .hero-pcard .pname {
grid-column: 2;
grid-row: 1;
font-size: 12.5px;
line-height: 1.3;
color: #1D2835;
font-weight: 500;
margin: 0;
min-height: 0;
}
.hero-photo .hero-pcard .pprice {
grid-column: 2;
grid-row: 2;
font-size: 14.5px;
font-weight: 700;
color: #1D2835;
}
.hero-photo .hero-pcard .pprice s {
font-size: 11px;
color: #8a94a0;
margin-right: 5px;
}
.hero-photo .hero-pcard .ppct {
position: absolute;
top: 8px;
right: 10px;
background: #1D2835;
}
/* La rangee ferme le hero. `.has-row` centre son contenu verticalement, le
bloc flottait donc au milieu et laissait voir la photo en dessous. */
.hero-photo.has-row { justify-content: space-between; }
.hero-photo.has-row .hero-container { flex: 1 1 auto; display: flex; align-items: center; }
/* Cadrage : `center` respecte la maquette ; le 72 % poussait le sujet hors champ. */
.slide-10 .hero-bg-photo,
.slide-11 .hero-bg-photo,
.slide-12 .hero-bg-photo,
.slide-13 .hero-bg-photo { object-position: center; }
@media (max-width: 767.98px) {
.hero-photo .hero-pcard { grid-template-columns: 48px minmax(0, 1fr); column-gap: 9px; padding: 10px 12px; }
.hero-photo .hero-pcard img { width: 48px; height: 40px; }
.hero-photo .hero-pcard .pname { font-size: 11.5px; }
.hero-photo .hero-pcard .pprice { font-size: 13px; }
}
/* ============ DISPOSITION DE LA RANGEE v3 — 14/09 ============
Bande blanche sous la photo et cartes horizontales, comme la maquette.
Le balisage d une carte est `![]()
` : trois
enfants a plat. Une grille place la vignette en colonne 1 sur deux lignes,
le nom et le prix en colonne 2 — sans toucher au HTML. */
.hero-photo .hero-row {
background: #fff;
border-top: 1px solid rgba(29, 40, 53, .10);
}
.hero-photo .hero-pcard {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 5px;
align-items: center;
align-content: center;
text-align: left;
padding: 22px 18px;
border-right: 1px solid rgba(29, 40, 53, .08);
position: relative;
}
.hero-photo .hero-pcard:last-child { border-right: 0; }
.hero-photo .hero-pcard img {
grid-column: 1;
grid-row: 1 / span 2;
width: 88px;
height: 70px;
object-fit: contain;
margin: 0;
}
.hero-photo .hero-pcard .pname {
grid-column: 2;
grid-row: 1;
font-size: 13.5px;
line-height: 1.35;
color: #1D2835;
font-weight: 500;
margin: 0;
min-height: 0;
}
.hero-photo .hero-pcard .pprice {
grid-column: 2;
grid-row: 2;
font-size: 16.5px;
font-weight: 700;
color: #1D2835;
}
.hero-photo .hero-pcard .pprice s {
font-size: 11px;
color: #8a94a0;
margin-right: 5px;
}
.hero-photo .hero-pcard .ppct {
position: absolute;
top: 8px;
right: 10px;
background: #1D2835;
}
/* La rangee ferme le hero. `.has-row` centre son contenu verticalement, le
bloc flottait donc au milieu et laissait voir la photo en dessous. */
.hero-photo.has-row { justify-content: space-between; }
.hero-photo.has-row .hero-container { flex: 1 1 auto; display: flex; align-items: center; }
/* Cadrage : `center` respecte la maquette ; le 72 % poussait le sujet hors champ. */
.slide-10 .hero-bg-photo,
.slide-11 .hero-bg-photo,
.slide-12 .hero-bg-photo,
.slide-13 .hero-bg-photo { object-position: center; }
@media (max-width: 767.98px) {
.hero-photo .hero-pcard { grid-template-columns: 58px minmax(0, 1fr); column-gap: 11px; padding: 14px 12px; }
.hero-photo .hero-pcard img { width: 58px; height: 48px; }
.hero-photo .hero-pcard .pname { font-size: 11.5px; }
.hero-photo .hero-pcard .pprice { font-size: 13px; }
}
/* ============ HAUTEUR ET CADRAGE — 14/09 ============
Mesure a 1280x623 : en-tete 171 + slider 440 = 611, alors que la fenetre
utile d Aziz fait ~583 px. La rangee depassait.
`clamp(400px, 62vh, 520px)` : a 583 px de fenetre, 62vh vaut 361, donc le
plancher de 400 s applique — 171 + 400 = 571, il reste 12 px.
Les fonds sont desormais recadres a 1838x438 (rapport 4,2), soit celui de la
zone reellement affichee : le navigateur n a plus a zoomer dedans. */
.hero-slider {
height: clamp(400px, 62vh, 520px) !important;
min-height: clamp(400px, 62vh, 520px) !important;
}
/* Rangee legerement resserree pour rendre de la hauteur a la photo. */
.hero-photo .hero-pcard { padding: 16px 16px; }
.hero-photo .hero-pcard img { width: 78px; height: 62px; }
.hero-photo .hero-pcard .pname { font-size: 13px; }
.hero-photo .hero-pcard .pprice { font-size: 15.5px; }
/* ============ SLIDE GAMING ET PRIX — 14/09 ============
La slide gaming a une moitie gauche bleu nuit : le navy du theme y est
illisible. Texte clair, kicker jaune. Le voile part de la gauche pour
asseoir le texte sans masquer le casque, qui est a droite. */
.hero-slide.hero-sombre::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10, 14, 22, .72) 0%, rgba(10, 14, 22, .45) 42%, rgba(10, 14, 22, 0) 68%);
z-index: 1;
pointer-events: none;
}
.hero-slide.hero-sombre .hero-container { position: relative; z-index: 2; }
.hero-slide.hero-sombre .hero-title { color: #fff; }
.hero-slide.hero-sombre .hero-title span { color: rgba(255, 255, 255, .88); }
.hero-slide.hero-sombre .hero-sub { color: rgba(255, 255, 255, .80); }
.hero-slide.hero-sombre .hero-kicker { color: #FCC902; }
/* Le prix n avait aucun style : 14px gris. C est l argument de la slide. */
.hero-prix {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 18px;
font-size: 27px;
font-weight: 800;
line-height: 1.1;
color: #FCC902;
}
.hero-prix s {
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, .55);
}
@media (max-width: 767.98px) {
.hero-prix { font-size: 22px; margin-bottom: 14px; }
.hero-prix s { font-size: 13px; }
.hero-slide.hero-sombre::before {
background: linear-gradient(90deg, rgba(10, 14, 22, .80) 0%, rgba(10, 14, 22, .62) 60%, rgba(10, 14, 22, .35) 100%);
}
}
/* ============ CONTRASTE DES SOUS-TITRES — 14/09 ============
Fond mesure derriere le texte, contraste avec le gris du theme #5C6874 :
imprimantes 4,84 et refresh 5,10 (conformes), back to school 4,00 (limite),
Kaspersky 2,33 (insuffisant — seuil AA : 4,5).
Sur ces deux fonds, le navy monte a 10,54 et 6,12. */
.slide-10 .hero-kicker,
.slide-10 .hero-sub,
.slide-15 .hero-kicker,
.slide-15 .hero-sub {
color: #1D2835;
}
/* ============ SLIDE GAMING SUR TELEPHONE — 14/09 ============
Sous 768 px le theme pose `rgba(255,255,255,.88)` sur `.hero-content` :
une carte blanche. Le texte clair du desktop y devenait invisible. */
@media (max-width: 767.98px) {
.hero-slide.hero-sombre::before { display: none; }
.hero-slide.hero-sombre .hero-title { color: #1D2835; }
.hero-slide.hero-sombre .hero-title span { color: #1D2835; }
.hero-slide.hero-sombre .hero-sub { color: #1D2835; }
.hero-slide.hero-sombre .hero-kicker { color: #1D2835; }
.hero-prix { color: #1D2835; justify-content: center; }
.hero-prix s { color: #5C6874; }
}
/* ============ RANGEES A NOMBRE VARIABLE — 14/09 ============
La grille etait figee en `repeat(4, 1fr)` : la cinquieme carte PC serait
passee a la ligne et aurait mange la moitie de la photo. */
.hero-photo .hero-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: none;
}
/* La carte mise en avant : un liseré jaune et un fond creme, sans changer sa
taille — la rangee doit rester une ligne reguliere. */
.hero-photo .hero-pcard.est-vedette { background: #FFFBEC; }
.hero-photo .hero-pcard.est-vedette::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: #FCC902;
}
.hero-photo .hero-pcard.est-vedette .ppct {
background: #FCC902;
color: #1D2835;
font-size: 9.5px;
letter-spacing: .02em;
}
/* A cinq cartes, on resserre un peu pour garder les noms sur deux lignes. */
.hero-photo .hero-pcard { padding: 14px 13px; column-gap: 13px; }
.hero-photo .hero-pcard img { width: 70px; height: 56px; }
.hero-photo .hero-pcard .pname { font-size: 12.5px; }
.hero-photo .hero-pcard .pprice { font-size: 15px; }
.hero-photo .hero-pcard .pprice s { font-size: 10.5px; }
/* ============ PLACE DU BADGE VEDETTE — 14/09 ============
MESURE : en haut a droite, le badge chevauchait le nom du produit — sur une
carte de cinq colonnes le nom remonte jusque sous lui. Il descend le long du
liseré, ou rien ne le gene. */
.hero-photo .hero-pcard.est-vedette .ppct {
top: auto;
bottom: 6px;
right: 8px;
padding: 2px 6px;
border-radius: 3px;
}
/* ============ BADGE VEDETTE SUR LA VIGNETTE — 14/09 ============
MESURE : en haut a droite le badge chevauchait le nom, en bas a droite le
prix. Sur cinq colonnes, la colonne de texte prend toute la largeur restante
sur ses deux lignes : aucun coin n est libre de ce cote. Il passe donc sur la
vignette, seul espace reellement disponible. */
.hero-photo .hero-pcard.est-vedette .ppct {
top: 6px;
left: 6px;
right: auto;
bottom: auto;
padding: 2px 5px;
border-radius: 3px;
font-size: 9px;
line-height: 1.3;
z-index: 2;
}
/* ============ RANGEE SUR TELEPHONE — 14/09 ============
MESURE a 390 px : quatre colonnes de 91 px, noms de produits disparus, prix
brises sur trois lignes. La faute a ma regle `grid-auto-flow: column` posee
sans media query pour la 5e carte PC : elle ecrasait la mise en page mobile.
Sous 768 px, deux colonnes — environ 190 px par carte. */
@media (max-width: 767.98px) {
.hero-photo .hero-row {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-columns: auto;
}
.hero-photo .hero-pcard:nth-child(2n) { border-right: 0; }
.hero-photo .hero-pcard:nth-child(-n+2) { border-bottom: 1px solid rgba(29, 40, 53, .08); }
.hero-photo .hero-pcard .pname {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero-photo .hero-pcard .pprice { white-space: nowrap; }
}
/* ============ PRIX BARRE SUR TELEPHONE — 14/09 ============
MESURE : prix tronque sur 7 cartes sur 8. Mon `white-space: nowrap` evitait
la brisure en trois lignes, mais « 7 370 6 970 Dh » ne tient pas dans une
colonne de 95 px : le texte etait coupe. Le barre passe en bloc au-dessus. */
@media (max-width: 767.98px) {
.hero-photo .hero-pcard { padding: 10px 12px; }
.hero-photo .hero-pcard .pprice { white-space: nowrap; line-height: 1.25; }
.hero-photo .hero-pcard .pprice s {
display: block;
margin: 0 0 1px;
font-size: 10px;
}
}
/* ============ SLIDE CLIQUABLE EN ENTIER — 14/09 ============
Le lien couvre la slide entiere, mais SOUS le contenu et la rangee, qui
gardent leurs propres liens. Le contenu laisse passer les clics
(`pointer-events: none`) pour que le titre et le sous-titre mènent au
produit ; ses boutons les reprennent.
On cible les trois slides par leur classe plutot que par `:has()` : le
selecteur est plus ancien, donc sur, y compris sur les vieux Android.
Aucune media query — la regle vaut au bureau comme sur telephone. */
.hero-lien-tout {
position: absolute;
inset: 0;
z-index: 1;
display: block;
text-indent: -9999px;
overflow: hidden;
}
.slide-10 .hero-container, .slide-11 .hero-container, .slide-14 .hero-container,
.slide-10 .hero-row, .slide-11 .hero-row {
position: relative;
z-index: 2;
}
.slide-10 .hero-container,
.slide-11 .hero-container,
.slide-14 .hero-container { pointer-events: none; }
.slide-10 .hero-content a, .slide-11 .hero-content a, .slide-14 .hero-content a,
.slide-10 .hero-row a, .slide-11 .hero-row a { pointer-events: auto; }
/* End custom CSS */
/* ===== les cartes « univers » ===== */
.rt-hp-u{--j:#FCC902;--n:#1D2835;background:#fff;padding:44px 0 48px;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.rt-hp-u__in{max-width:1430px;margin:0 auto;padding:0 15px}
.rt-hp-u__e{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a94a0;margin-bottom:7px}
.rt-hp-u__h{margin:0 0 26px;font-size:26px;line-height:1.25;font-weight:700;color:var(--n)}
.rt-hp-u__g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rt-hp-u__c{position:relative;display:block;background:#fff;border:1px solid #e8ecf0;border-radius:12px;padding:14px 18px 18px;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.rt-hp-u__c:hover{border-color:var(--j);box-shadow:0 12px 26px -14px rgba(19,28,38,.28);transform:translateY(-2px)}
.rt-hp-u__ph{display:flex;align-items:center;justify-content:center;height:132px;margin-bottom:12px}
.rt-hp-u__ph img{max-width:100%;max-height:132px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s}
.rt-hp-u__c:hover .rt-hp-u__ph img{transform:scale(1.05)}
.rt-hp-u__t{display:block;font-size:15px;font-weight:600;color:var(--n);line-height:1.3}
.rt-hp-u__s{display:block;font-size:12.5px;color:#6f7b88;line-height:1.4;margin-top:4px;min-height:35px;padding-right:22px}
.rt-hp-u__a{position:absolute;right:16px;bottom:16px;font-size:17px;color:#c3cbd4;transition:color .18s,transform .18s}
.rt-hp-u__c:hover .rt-hp-u__a{color:var(--n);transform:translateX(3px)}
@media(max-width:1024px){.rt-hp-u__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.rt-hp-u{padding:32px 0 34px}.rt-hp-u__h{font-size:21px}.rt-hp-u__g{gap:10px}.rt-hp-u__s{min-height:0}.rt-hp-u__ph{height:104px}.rt-hp-u__ph img{max-height:104px}}
/* ===== le rail de produits ===== */
.hpu-rails{background:#fff;padding:46px 0 40px}
.hpu-rails .rt-rail__hd{max-width:1430px;margin:0 auto 22px;padding:0 15px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.hpu-rails .rt-rail__e{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a94a0;margin-bottom:7px}
.hpu-rails .rt-rail__h{margin:0;font-size:26px;line-height:1.25;font-weight:700;color:#1D2835}
.hpu-rails .rt-rail__all{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#1D2835;text-decoration:none;border-bottom:2px solid #FCC902;padding-bottom:3px;transition:gap .18s}
.hpu-rails .rt-rail__all:hover{gap:11px;color:#1D2835}
/* Le theme sort la pastille de remise en rouge vif ; la charte Rightech ne connait
que le jaune. Sa regle est `.product-flags li.product-flag.discount` : il faut donc
reprendre la meme forme, sinon le `li` lui donne un cran de specificite de plus et
la notre perd, comme au premier essai. */
.hpu-rails .product-flags li.product-flag.discount,
.hpu-rails .product-flags li.product-flag.discount-amount,
.hpu-rails .product-flags li.product-flag.discount-percentage{background-color:#FCC902;color:#1D2835;font-weight:700}
.hpu-rails .product-flags li.product-flag.on-sale{background-color:#1D2835;color:#fff}
@media(max-width:576px){.hpu-rails{padding:32px 0 28px}.hpu-rails .rt-rail__hd{flex-direction:column;align-items:flex-start;gap:10px}.hpu-rails .rt-rail__h{font-size:21px}}
/* ===== le hub : bandeau, sections, onglets, pastilles, tableau, services ===== */
/* ── Intégration dans le gabarit de la page marque ────────────────────────────
Le thème place la partie haute dans .rt-brand-info-col, à côté du logo. Ce bloc
rend la pleine largeur à notre contenu, masque le logo en double (le nôtre est
dans le bandeau) et le fil d'Ariane du thème (le nôtre est dans le slider).
Tout est limité à la page marque HP par .manufacturer-hp. */
.manufacturer-hp #hero_section,
.manufacturer-lenovo #hero_section,
.manufacturer-samsung #hero_section,
.manufacturer-canon #hero_section,
.manufacturer-epson #hero_section,
.manufacturer-kaspersky #hero_section,
.manufacturer-wacom #hero_section,
.manufacturer-asus #hero_section,
.manufacturer-dell #hero_section,
.manufacturer-apple #hero_section,
.manufacturer-lexmark #hero_section,
.manufacturer-eaton #hero_section,
.manufacturer-logitech #hero_section,
.manufacturer-msi #hero_section,
.manufacturer-dahua #hero_section,
.manufacturer-apc #hero_section,
.manufacturer-brother #hero_section,
.manufacturer-hpe #hero_section,
.manufacturer-hikvision #hero_section,
.manufacturer-tp-link #hero_section,
.manufacturer-microsoft #hero_section,
.manufacturer-rivacase #hero_section,
.manufacturer-accent #hero_section,
.manufacturer-jbl #hero_section,
.manufacturer-ugreen #hero_section,
.manufacturer-lexar #hero_section,
.manufacturer-razer #hero_section,
.manufacturer-ruijie #hero_section,
.manufacturer-synology #hero_section{display:none}
.manufacturer-hp .rt-brand-header,
.manufacturer-lenovo .rt-brand-header,
.manufacturer-samsung .rt-brand-header,
.manufacturer-canon .rt-brand-header,
.manufacturer-epson .rt-brand-header,
.manufacturer-kaspersky .rt-brand-header,
.manufacturer-wacom .rt-brand-header,
.manufacturer-asus .rt-brand-header,
.manufacturer-dell .rt-brand-header,
.manufacturer-apple .rt-brand-header,
.manufacturer-lexmark .rt-brand-header,
.manufacturer-eaton .rt-brand-header,
.manufacturer-logitech .rt-brand-header,
.manufacturer-msi .rt-brand-header,
.manufacturer-dahua .rt-brand-header,
.manufacturer-apc .rt-brand-header,
.manufacturer-brother .rt-brand-header,
.manufacturer-hpe .rt-brand-header,
.manufacturer-hikvision .rt-brand-header,
.manufacturer-tp-link .rt-brand-header,
.manufacturer-microsoft .rt-brand-header,
.manufacturer-rivacase .rt-brand-header,
.manufacturer-accent .rt-brand-header,
.manufacturer-jbl .rt-brand-header,
.manufacturer-ugreen .rt-brand-header,
.manufacturer-lexar .rt-brand-header,
.manufacturer-razer .rt-brand-header,
.manufacturer-ruijie .rt-brand-header,
.manufacturer-synology .rt-brand-header{background:none;border:0;padding:0;margin:0;max-width:none}
.manufacturer-hp .rt-brand-layout,
.manufacturer-lenovo .rt-brand-layout,
.manufacturer-samsung .rt-brand-layout,
.manufacturer-canon .rt-brand-layout,
.manufacturer-epson .rt-brand-layout,
.manufacturer-kaspersky .rt-brand-layout,
.manufacturer-wacom .rt-brand-layout,
.manufacturer-asus .rt-brand-layout,
.manufacturer-dell .rt-brand-layout,
.manufacturer-apple .rt-brand-layout,
.manufacturer-lexmark .rt-brand-layout,
.manufacturer-eaton .rt-brand-layout,
.manufacturer-logitech .rt-brand-layout,
.manufacturer-msi .rt-brand-layout,
.manufacturer-dahua .rt-brand-layout,
.manufacturer-apc .rt-brand-layout,
.manufacturer-brother .rt-brand-layout,
.manufacturer-hpe .rt-brand-layout,
.manufacturer-hikvision .rt-brand-layout,
.manufacturer-tp-link .rt-brand-layout,
.manufacturer-microsoft .rt-brand-layout,
.manufacturer-rivacase .rt-brand-layout,
.manufacturer-accent .rt-brand-layout,
.manufacturer-jbl .rt-brand-layout,
.manufacturer-ugreen .rt-brand-layout,
.manufacturer-lexar .rt-brand-layout,
.manufacturer-razer .rt-brand-layout,
.manufacturer-ruijie .rt-brand-layout,
.manufacturer-synology .rt-brand-layout{display:block;max-width:none;padding:0;margin:0;gap:0}
.manufacturer-hp .rt-brand-logo-col,
.manufacturer-lenovo .rt-brand-logo-col,
.manufacturer-samsung .rt-brand-logo-col,
.manufacturer-canon .rt-brand-logo-col,
.manufacturer-epson .rt-brand-logo-col,
.manufacturer-kaspersky .rt-brand-logo-col,
.manufacturer-wacom .rt-brand-logo-col,
.manufacturer-asus .rt-brand-logo-col,
.manufacturer-dell .rt-brand-logo-col,
.manufacturer-apple .rt-brand-logo-col,
.manufacturer-lexmark .rt-brand-logo-col,
.manufacturer-eaton .rt-brand-logo-col,
.manufacturer-logitech .rt-brand-logo-col,
.manufacturer-msi .rt-brand-logo-col,
.manufacturer-dahua .rt-brand-logo-col,
.manufacturer-apc .rt-brand-logo-col,
.manufacturer-brother .rt-brand-logo-col,
.manufacturer-hpe .rt-brand-logo-col,
.manufacturer-hikvision .rt-brand-logo-col,
.manufacturer-tp-link .rt-brand-logo-col,
.manufacturer-microsoft .rt-brand-logo-col,
.manufacturer-rivacase .rt-brand-logo-col,
.manufacturer-accent .rt-brand-logo-col,
.manufacturer-jbl .rt-brand-logo-col,
.manufacturer-ugreen .rt-brand-logo-col,
.manufacturer-lexar .rt-brand-logo-col,
.manufacturer-razer .rt-brand-logo-col,
.manufacturer-ruijie .rt-brand-logo-col,
.manufacturer-synology .rt-brand-logo-col{display:none}
.manufacturer-hp .rt-brand-info-col,
.manufacturer-lenovo .rt-brand-info-col,
.manufacturer-samsung .rt-brand-info-col,
.manufacturer-canon .rt-brand-info-col,
.manufacturer-epson .rt-brand-info-col,
.manufacturer-kaspersky .rt-brand-info-col,
.manufacturer-wacom .rt-brand-info-col,
.manufacturer-asus .rt-brand-info-col,
.manufacturer-dell .rt-brand-info-col,
.manufacturer-apple .rt-brand-info-col,
.manufacturer-lexmark .rt-brand-info-col,
.manufacturer-eaton .rt-brand-info-col,
.manufacturer-logitech .rt-brand-info-col,
.manufacturer-msi .rt-brand-info-col,
.manufacturer-dahua .rt-brand-info-col,
.manufacturer-apc .rt-brand-info-col,
.manufacturer-brother .rt-brand-info-col,
.manufacturer-hpe .rt-brand-info-col,
.manufacturer-hikvision .rt-brand-info-col,
.manufacturer-tp-link .rt-brand-info-col,
.manufacturer-microsoft .rt-brand-info-col,
.manufacturer-rivacase .rt-brand-info-col,
.manufacturer-accent .rt-brand-info-col,
.manufacturer-jbl .rt-brand-info-col,
.manufacturer-ugreen .rt-brand-info-col,
.manufacturer-lexar .rt-brand-info-col,
.manufacturer-razer .rt-brand-info-col,
.manufacturer-ruijie .rt-brand-info-col,
.manufacturer-synology .rt-brand-info-col{width:100%;max-width:none;padding:0;margin:0;flex:none}
.manufacturer-hp .rt-brand-description,
.manufacturer-lenovo .rt-brand-description,
.manufacturer-samsung .rt-brand-description,
.manufacturer-canon .rt-brand-description,
.manufacturer-epson .rt-brand-description,
.manufacturer-kaspersky .rt-brand-description,
.manufacturer-wacom .rt-brand-description,
.manufacturer-asus .rt-brand-description,
.manufacturer-dell .rt-brand-description,
.manufacturer-apple .rt-brand-description,
.manufacturer-lexmark .rt-brand-description,
.manufacturer-eaton .rt-brand-description,
.manufacturer-logitech .rt-brand-description,
.manufacturer-msi .rt-brand-description,
.manufacturer-dahua .rt-brand-description,
.manufacturer-apc .rt-brand-description,
.manufacturer-brother .rt-brand-description,
.manufacturer-hpe .rt-brand-description,
.manufacturer-hikvision .rt-brand-description,
.manufacturer-tp-link .rt-brand-description,
.manufacturer-microsoft .rt-brand-description,
.manufacturer-rivacase .rt-brand-description,
.manufacturer-accent .rt-brand-description,
.manufacturer-jbl .rt-brand-description,
.manufacturer-ugreen .rt-brand-description,
.manufacturer-lexar .rt-brand-description,
.manufacturer-razer .rt-brand-description,
.manufacturer-ruijie .rt-brand-description,
.manufacturer-synology .rt-brand-description{max-width:none;padding:0;margin:0}
.manufacturer-hp .btn-more-custom,
.manufacturer-lenovo .btn-more-custom,
.manufacturer-samsung .btn-more-custom,
.manufacturer-canon .btn-more-custom,
.manufacturer-epson .btn-more-custom,
.manufacturer-kaspersky .btn-more-custom,
.manufacturer-wacom .btn-more-custom,
.manufacturer-asus .btn-more-custom,
.manufacturer-dell .btn-more-custom,
.manufacturer-apple .btn-more-custom,
.manufacturer-lexmark .btn-more-custom,
.manufacturer-eaton .btn-more-custom,
.manufacturer-logitech .btn-more-custom,
.manufacturer-msi .btn-more-custom,
.manufacturer-dahua .btn-more-custom,
.manufacturer-apc .btn-more-custom,
.manufacturer-brother .btn-more-custom,
.manufacturer-hpe .btn-more-custom,
.manufacturer-hikvision .btn-more-custom,
.manufacturer-tp-link .btn-more-custom,
.manufacturer-microsoft .btn-more-custom,
.manufacturer-rivacase .btn-more-custom,
.manufacturer-accent .btn-more-custom,
.manufacturer-jbl .btn-more-custom,
.manufacturer-ugreen .btn-more-custom,
.manufacturer-lexar .btn-more-custom,
.manufacturer-razer .btn-more-custom,
.manufacturer-ruijie .btn-more-custom,
.manufacturer-synology .btn-more-custom{display:none}
/* Aucun vide entre le menu et le slider : le thème pose `#wrapper{padding-top:30px}`,
que la page d'accueil n'a pas — son slider démarre au pixel près sous l'en-tête.
Le thème le pose en !important : il faut donc le lui reprendre de la même façon. */
.manufacturer-hp #wrapper,
.manufacturer-lenovo #wrapper,
.manufacturer-samsung #wrapper,
.manufacturer-canon #wrapper,
.manufacturer-epson #wrapper,
.manufacturer-kaspersky #wrapper,
.manufacturer-wacom #wrapper,
.manufacturer-asus #wrapper,
.manufacturer-dell #wrapper,
.manufacturer-apple #wrapper,
.manufacturer-lexmark #wrapper,
.manufacturer-eaton #wrapper,
.manufacturer-logitech #wrapper,
.manufacturer-msi #wrapper,
.manufacturer-dahua #wrapper,
.manufacturer-apc #wrapper,
.manufacturer-brother #wrapper,
.manufacturer-hpe #wrapper,
.manufacturer-hikvision #wrapper,
.manufacturer-tp-link #wrapper,
.manufacturer-microsoft #wrapper,
.manufacturer-rivacase #wrapper,
.manufacturer-accent #wrapper,
.manufacturer-jbl #wrapper,
.manufacturer-ugreen #wrapper,
.manufacturer-lexar #wrapper,
.manufacturer-razer #wrapper,
.manufacturer-ruijie #wrapper,
.manufacturer-synology #wrapper{padding-top:0!important}
.manufacturer-hp #wrapper > .container,
.manufacturer-lenovo #wrapper > .container,
.manufacturer-samsung #wrapper > .container,
.manufacturer-canon #wrapper > .container,
.manufacturer-epson #wrapper > .container,
.manufacturer-kaspersky #wrapper > .container,
.manufacturer-wacom #wrapper > .container,
.manufacturer-asus #wrapper > .container,
.manufacturer-dell #wrapper > .container,
.manufacturer-apple #wrapper > .container,
.manufacturer-lexmark #wrapper > .container,
.manufacturer-eaton #wrapper > .container,
.manufacturer-logitech #wrapper > .container,
.manufacturer-msi #wrapper > .container,
.manufacturer-dahua #wrapper > .container,
.manufacturer-apc #wrapper > .container,
.manufacturer-brother #wrapper > .container,
.manufacturer-hpe #wrapper > .container,
.manufacturer-hikvision #wrapper > .container,
.manufacturer-tp-link #wrapper > .container,
.manufacturer-microsoft #wrapper > .container,
.manufacturer-rivacase #wrapper > .container,
.manufacturer-accent #wrapper > .container,
.manufacturer-jbl #wrapper > .container,
.manufacturer-ugreen #wrapper > .container,
.manufacturer-lexar #wrapper > .container,
.manufacturer-razer #wrapper > .container,
.manufacturer-ruijie #wrapper > .container,
.manufacturer-synology #wrapper > .container{max-width:none;padding:0}
/* Une seule colonne. Le gabarit sert la page marque dans la colonne droite (col-lg-9)
d'une mise en page à deux colonnes : le contenu démarrait à 290 px, ce qui faussait
le calcul du pleine largeur (153 px de débordement horizontal) et laissait la colonne
des facettes à moitié recouverte par le bandeau. La page marque HP est une page
d'accueil de marque : elle occupe toute la largeur, la navigation se fait par les
cartes univers, les gammes et les profils. */
.manufacturer-hp #wrapper > .container > .row,
.manufacturer-lenovo #wrapper > .container > .row,
.manufacturer-samsung #wrapper > .container > .row,
.manufacturer-canon #wrapper > .container > .row,
.manufacturer-epson #wrapper > .container > .row,
.manufacturer-kaspersky #wrapper > .container > .row,
.manufacturer-wacom #wrapper > .container > .row,
.manufacturer-asus #wrapper > .container > .row,
.manufacturer-dell #wrapper > .container > .row,
.manufacturer-apple #wrapper > .container > .row,
.manufacturer-lexmark #wrapper > .container > .row,
.manufacturer-eaton #wrapper > .container > .row,
.manufacturer-logitech #wrapper > .container > .row,
.manufacturer-msi #wrapper > .container > .row,
.manufacturer-dahua #wrapper > .container > .row,
.manufacturer-apc #wrapper > .container > .row,
.manufacturer-brother #wrapper > .container > .row,
.manufacturer-hpe #wrapper > .container > .row,
.manufacturer-hikvision #wrapper > .container > .row,
.manufacturer-tp-link #wrapper > .container > .row,
.manufacturer-microsoft #wrapper > .container > .row,
.manufacturer-rivacase #wrapper > .container > .row,
.manufacturer-accent #wrapper > .container > .row,
.manufacturer-jbl #wrapper > .container > .row,
.manufacturer-ugreen #wrapper > .container > .row,
.manufacturer-lexar #wrapper > .container > .row,
.manufacturer-razer #wrapper > .container > .row,
.manufacturer-ruijie #wrapper > .container > .row,
.manufacturer-synology #wrapper > .container > .row{margin-left:0;margin-right:0}
/* Les facettes reviennent a gauche de la LISTE des produits HP, dans la meme page.
Le gabarit les sert tout en haut, a ~3 500 px de la liste qu'elles filtrent et sous le
bandeau pleine largeur : elles y etaient inutilisables. Un court script les redescend a
cote de la liste (voir le script en fin de contenu). Elles restent masquees tant que le
script n'a pas fait son travail, pour eviter de les voir passer en haut de page. */
.manufacturer-hp #left-column,
.manufacturer-lenovo #left-column,
.manufacturer-samsung #left-column,
.manufacturer-canon #left-column,
.manufacturer-epson #left-column,
.manufacturer-kaspersky #left-column,
.manufacturer-wacom #left-column,
.manufacturer-asus #left-column,
.manufacturer-dell #left-column,
.manufacturer-apple #left-column,
.manufacturer-lexmark #left-column,
.manufacturer-eaton #left-column,
.manufacturer-logitech #left-column,
.manufacturer-msi #left-column,
.manufacturer-dahua #left-column,
.manufacturer-apc #left-column,
.manufacturer-brother #left-column,
.manufacturer-hpe #left-column,
.manufacturer-hikvision #left-column,
.manufacturer-tp-link #left-column,
.manufacturer-microsoft #left-column,
.manufacturer-rivacase #left-column,
.manufacturer-accent #left-column,
.manufacturer-jbl #left-column,
.manufacturer-ugreen #left-column,
.manufacturer-lexar #left-column,
.manufacturer-razer #left-column,
.manufacturer-ruijie #left-column,
.manufacturer-synology #left-column{display:none}
/* align-items:stretch et non flex-start : sans etirement, la colonne des facettes
fait la hauteur de son contenu et le collant n'a aucune course pour jouer. */
.manufacturer-hp .hpu-liste,
.manufacturer-lenovo .hpu-liste,
.manufacturer-samsung .hpu-liste,
.manufacturer-canon .hpu-liste,
.manufacturer-epson .hpu-liste,
.manufacturer-kaspersky .hpu-liste,
.manufacturer-wacom .hpu-liste,
.manufacturer-asus .hpu-liste,
.manufacturer-dell .hpu-liste,
.manufacturer-apple .hpu-liste,
.manufacturer-lexmark .hpu-liste,
.manufacturer-eaton .hpu-liste,
.manufacturer-logitech .hpu-liste,
.manufacturer-msi .hpu-liste,
.manufacturer-dahua .hpu-liste,
.manufacturer-apc .hpu-liste,
.manufacturer-brother .hpu-liste,
.manufacturer-hpe .hpu-liste,
.manufacturer-hikvision .hpu-liste,
.manufacturer-tp-link .hpu-liste,
.manufacturer-microsoft .hpu-liste,
.manufacturer-rivacase .hpu-liste,
.manufacturer-accent .hpu-liste,
.manufacturer-jbl .hpu-liste,
.manufacturer-ugreen .hpu-liste,
.manufacturer-lexar .hpu-liste,
.manufacturer-razer .hpu-liste,
.manufacturer-ruijie .hpu-liste,
.manufacturer-synology .hpu-liste{display:flex;flex-wrap:wrap;gap:26px;align-items:stretch;max-width:1430px;margin:0 auto;padding:0 15px}
/* le rappel des filtres actifs du theme est frere de la liste : dans la rangee il formait
une troisieme colonne. Il passe en pleine largeur au-dessus des deux. */
.manufacturer-hp .hpu-liste > .selectedFilters,
.manufacturer-lenovo .hpu-liste > .selectedFilters,
.manufacturer-samsung .hpu-liste > .selectedFilters,
.manufacturer-canon .hpu-liste > .selectedFilters,
.manufacturer-epson .hpu-liste > .selectedFilters,
.manufacturer-kaspersky .hpu-liste > .selectedFilters,
.manufacturer-wacom .hpu-liste > .selectedFilters,
.manufacturer-asus .hpu-liste > .selectedFilters,
.manufacturer-dell .hpu-liste > .selectedFilters,
.manufacturer-apple .hpu-liste > .selectedFilters,
.manufacturer-lexmark .hpu-liste > .selectedFilters,
.manufacturer-eaton .hpu-liste > .selectedFilters,
.manufacturer-logitech .hpu-liste > .selectedFilters,
.manufacturer-msi .hpu-liste > .selectedFilters,
.manufacturer-dahua .hpu-liste > .selectedFilters,
.manufacturer-apc .hpu-liste > .selectedFilters,
.manufacturer-brother .hpu-liste > .selectedFilters,
.manufacturer-hpe .hpu-liste > .selectedFilters,
.manufacturer-hikvision .hpu-liste > .selectedFilters,
.manufacturer-tp-link .hpu-liste > .selectedFilters,
.manufacturer-microsoft .hpu-liste > .selectedFilters,
.manufacturer-rivacase .hpu-liste > .selectedFilters,
.manufacturer-accent .hpu-liste > .selectedFilters,
.manufacturer-jbl .hpu-liste > .selectedFilters,
.manufacturer-ugreen .hpu-liste > .selectedFilters,
.manufacturer-lexar .hpu-liste > .selectedFilters,
.manufacturer-razer .hpu-liste > .selectedFilters,
.manufacturer-ruijie .hpu-liste > .selectedFilters,
.manufacturer-synology .hpu-liste > .selectedFilters{order:-1;flex:0 0 100%;width:100%;margin:0}
.manufacturer-hp .hpu-liste > #left-column,
.manufacturer-lenovo .hpu-liste > #left-column,
.manufacturer-samsung .hpu-liste > #left-column,
.manufacturer-canon .hpu-liste > #left-column,
.manufacturer-epson .hpu-liste > #left-column,
.manufacturer-kaspersky .hpu-liste > #left-column,
.manufacturer-wacom .hpu-liste > #left-column,
.manufacturer-asus .hpu-liste > #left-column,
.manufacturer-dell .hpu-liste > #left-column,
.manufacturer-apple .hpu-liste > #left-column,
.manufacturer-lexmark .hpu-liste > #left-column,
.manufacturer-eaton .hpu-liste > #left-column,
.manufacturer-logitech .hpu-liste > #left-column,
.manufacturer-msi .hpu-liste > #left-column,
.manufacturer-dahua .hpu-liste > #left-column,
.manufacturer-apc .hpu-liste > #left-column,
.manufacturer-brother .hpu-liste > #left-column,
.manufacturer-hpe .hpu-liste > #left-column,
.manufacturer-hikvision .hpu-liste > #left-column,
.manufacturer-tp-link .hpu-liste > #left-column,
.manufacturer-microsoft .hpu-liste > #left-column,
.manufacturer-rivacase .hpu-liste > #left-column,
.manufacturer-accent .hpu-liste > #left-column,
.manufacturer-jbl .hpu-liste > #left-column,
.manufacturer-ugreen .hpu-liste > #left-column,
.manufacturer-lexar .hpu-liste > #left-column,
.manufacturer-razer .hpu-liste > #left-column,
.manufacturer-ruijie .hpu-liste > #left-column,
.manufacturer-synology .hpu-liste > #left-column{display:block!important;flex:0 0 275px;max-width:275px;width:275px;padding:0;margin:0;align-self:stretch}
/* meme confort que sur les pages categorie : le bloc de facettes suit le defilement.
96 px = sous l'en-tete collant, qui se retracte a 73 px de haut. */
/* le collant porte sur le groupe .rt-colg (filtre + encart d'aide), pose par
layout-both-columns.tpl le 15/09 ; la page HP etant en une seule colonne, le collant
du theme ne s'y applique pas et doit etre repose ici sur la colonne deplacee. */
.manufacturer-hp .hpu-liste > #left-column > .rt-colg,
.manufacturer-lenovo .hpu-liste > #left-column > .rt-colg,
.manufacturer-samsung .hpu-liste > #left-column > .rt-colg,
.manufacturer-canon .hpu-liste > #left-column > .rt-colg,
.manufacturer-epson .hpu-liste > #left-column > .rt-colg,
.manufacturer-kaspersky .hpu-liste > #left-column > .rt-colg,
.manufacturer-wacom .hpu-liste > #left-column > .rt-colg,
.manufacturer-asus .hpu-liste > #left-column > .rt-colg,
.manufacturer-dell .hpu-liste > #left-column > .rt-colg,
.manufacturer-apple .hpu-liste > #left-column > .rt-colg,
.manufacturer-lexmark .hpu-liste > #left-column > .rt-colg,
.manufacturer-eaton .hpu-liste > #left-column > .rt-colg,
.manufacturer-logitech .hpu-liste > #left-column > .rt-colg,
.manufacturer-msi .hpu-liste > #left-column > .rt-colg,
.manufacturer-dahua .hpu-liste > #left-column > .rt-colg,
.manufacturer-apc .hpu-liste > #left-column > .rt-colg,
.manufacturer-brother .hpu-liste > #left-column > .rt-colg,
.manufacturer-hpe .hpu-liste > #left-column > .rt-colg,
.manufacturer-hikvision .hpu-liste > #left-column > .rt-colg,
.manufacturer-tp-link .hpu-liste > #left-column > .rt-colg,
.manufacturer-microsoft .hpu-liste > #left-column > .rt-colg,
.manufacturer-rivacase .hpu-liste > #left-column > .rt-colg,
.manufacturer-accent .hpu-liste > #left-column > .rt-colg,
.manufacturer-jbl .hpu-liste > #left-column > .rt-colg,
.manufacturer-ugreen .hpu-liste > #left-column > .rt-colg,
.manufacturer-lexar .hpu-liste > #left-column > .rt-colg,
.manufacturer-razer .hpu-liste > #left-column > .rt-colg,
.manufacturer-ruijie .hpu-liste > #left-column > .rt-colg,
.manufacturer-synology .hpu-liste > #left-column > .rt-colg{position:sticky;top:96px;max-height:calc(100vh - 200px);display:flex;flex-direction:column}
.manufacturer-hp .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-lenovo .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-samsung .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-canon .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-epson .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-kaspersky .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-wacom .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-asus .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-dell .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-apple .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-lexmark .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-eaton .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-logitech .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-msi .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-dahua .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-apc .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-brother .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-hpe .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-hikvision .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-tp-link .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-microsoft .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-rivacase .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-accent .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-jbl .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-ugreen .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-lexar .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-razer .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-ruijie .hpu-liste > #left-column > .rt-colg > #amazzing_filter,
.manufacturer-synology .hpu-liste > #left-column > .rt-colg > #amazzing_filter{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.manufacturer-hp .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-lenovo .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-samsung .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-canon .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-epson .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-kaspersky .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-wacom .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-asus .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-dell .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-apple .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-lexmark .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-eaton .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-logitech .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-msi .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-dahua .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-apc .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-brother .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-hpe .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-hikvision .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-tp-link .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-microsoft .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-rivacase .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-accent .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-jbl .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-ugreen .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-lexar .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-razer .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-ruijie .hpu-liste > #left-column > .rt-colg > .rt-aide,
.manufacturer-synology .hpu-liste > #left-column > .rt-colg > .rt-aide{flex:0 0 auto}
/* base 0 et non auto : avec flex-wrap, une base « auto » calculee sur le contenu large
faisait passer la liste a la ligne sous les facettes. */
.manufacturer-hp .hpu-liste > #products,
.manufacturer-lenovo .hpu-liste > #products,
.manufacturer-samsung .hpu-liste > #products,
.manufacturer-canon .hpu-liste > #products,
.manufacturer-epson .hpu-liste > #products,
.manufacturer-kaspersky .hpu-liste > #products,
.manufacturer-wacom .hpu-liste > #products,
.manufacturer-asus .hpu-liste > #products,
.manufacturer-dell .hpu-liste > #products,
.manufacturer-apple .hpu-liste > #products,
.manufacturer-lexmark .hpu-liste > #products,
.manufacturer-eaton .hpu-liste > #products,
.manufacturer-logitech .hpu-liste > #products,
.manufacturer-msi .hpu-liste > #products,
.manufacturer-dahua .hpu-liste > #products,
.manufacturer-apc .hpu-liste > #products,
.manufacturer-brother .hpu-liste > #products,
.manufacturer-hpe .hpu-liste > #products,
.manufacturer-hikvision .hpu-liste > #products,
.manufacturer-tp-link .hpu-liste > #products,
.manufacturer-microsoft .hpu-liste > #products,
.manufacturer-rivacase .hpu-liste > #products,
.manufacturer-accent .hpu-liste > #products,
.manufacturer-jbl .hpu-liste > #products,
.manufacturer-ugreen .hpu-liste > #products,
.manufacturer-lexar .hpu-liste > #products,
.manufacturer-razer .hpu-liste > #products,
.manufacturer-ruijie .hpu-liste > #products,
.manufacturer-synology .hpu-liste > #products{flex:1 1 0;min-width:0;max-width:none;margin:0;padding:0}
.manufacturer-hp #content-wrapper,
.manufacturer-lenovo #content-wrapper,
.manufacturer-samsung #content-wrapper,
.manufacturer-canon #content-wrapper,
.manufacturer-epson #content-wrapper,
.manufacturer-kaspersky #content-wrapper,
.manufacturer-wacom #content-wrapper,
.manufacturer-asus #content-wrapper,
.manufacturer-dell #content-wrapper,
.manufacturer-apple #content-wrapper,
.manufacturer-lexmark #content-wrapper,
.manufacturer-eaton #content-wrapper,
.manufacturer-logitech #content-wrapper,
.manufacturer-msi #content-wrapper,
.manufacturer-dahua #content-wrapper,
.manufacturer-apc #content-wrapper,
.manufacturer-brother #content-wrapper,
.manufacturer-hpe #content-wrapper,
.manufacturer-hikvision #content-wrapper,
.manufacturer-tp-link #content-wrapper,
.manufacturer-microsoft #content-wrapper,
.manufacturer-rivacase #content-wrapper,
.manufacturer-accent #content-wrapper,
.manufacturer-jbl #content-wrapper,
.manufacturer-ugreen #content-wrapper,
.manufacturer-lexar #content-wrapper,
.manufacturer-razer #content-wrapper,
.manufacturer-ruijie #content-wrapper,
.manufacturer-synology #content-wrapper{flex:0 0 100%;max-width:none;width:100%;padding:0}
.manufacturer-hp #products,
.manufacturer-lenovo #products,
.manufacturer-samsung #products,
.manufacturer-canon #products,
.manufacturer-epson #products,
.manufacturer-kaspersky #products,
.manufacturer-wacom #products,
.manufacturer-asus #products,
.manufacturer-dell #products,
.manufacturer-apple #products,
.manufacturer-lexmark #products,
.manufacturer-eaton #products,
.manufacturer-logitech #products,
.manufacturer-msi #products,
.manufacturer-dahua #products,
.manufacturer-apc #products,
.manufacturer-brother #products,
.manufacturer-hpe #products,
.manufacturer-hikvision #products,
.manufacturer-tp-link #products,
.manufacturer-microsoft #products,
.manufacturer-rivacase #products,
.manufacturer-accent #products,
.manufacturer-jbl #products,
.manufacturer-ugreen #products,
.manufacturer-lexar #products,
.manufacturer-razer #products,
.manufacturer-ruijie #products,
.manufacturer-synology #products{max-width:1430px;margin-left:auto;margin-right:auto;padding:0 15px}
.manufacturer-hp .hpu-hub,
.manufacturer-lenovo .hpu-hub,
.manufacturer-samsung .hpu-hub,
.manufacturer-canon .hpu-hub,
.manufacturer-epson .hpu-hub,
.manufacturer-kaspersky .hpu-hub,
.manufacturer-wacom .hpu-hub,
.manufacturer-asus .hpu-hub,
.manufacturer-dell .hpu-hub,
.manufacturer-apple .hpu-hub,
.manufacturer-ugreen .hpu-hub,
.manufacturer-lexar .hpu-hub,
.manufacturer-razer .hpu-hub,
.manufacturer-ruijie .hpu-hub,
.manufacturer-synology .hpu-hub,
.manufacturer-jbl .hpu-hub,
.manufacturer-accent .hpu-hub,
.manufacturer-rivacase .hpu-hub,
.manufacturer-microsoft .hpu-hub,
.manufacturer-tp-link .hpu-hub,
.manufacturer-hikvision .hpu-hub,
.manufacturer-hpe .hpu-hub,
.manufacturer-brother .hpu-hub,
.manufacturer-apc .hpu-hub,
.manufacturer-dahua .hpu-hub,
.manufacturer-msi .hpu-hub,
.manufacturer-logitech .hpu-hub,
.manufacturer-eaton .hpu-hub,
.manufacturer-lexmark .hpu-hub,
.manufacturer-hp .brand-footer-seo__inner,
.manufacturer-lenovo .brand-footer-seo__inner,
.manufacturer-samsung .brand-footer-seo__inner,
.manufacturer-canon .brand-footer-seo__inner,
.manufacturer-epson .brand-footer-seo__inner,
.manufacturer-kaspersky .brand-footer-seo__inner,
.manufacturer-wacom .brand-footer-seo__inner,
.manufacturer-asus .brand-footer-seo__inner,
.manufacturer-dell .brand-footer-seo__inner,
.manufacturer-apple .brand-footer-seo__inner,
.manufacturer-lexmark .brand-footer-seo__inner,
.manufacturer-eaton .brand-footer-seo__inner,
.manufacturer-logitech .brand-footer-seo__inner,
.manufacturer-msi .brand-footer-seo__inner,
.manufacturer-dahua .brand-footer-seo__inner,
.manufacturer-apc .brand-footer-seo__inner,
.manufacturer-brother .brand-footer-seo__inner,
.manufacturer-hpe .brand-footer-seo__inner,
.manufacturer-hikvision .brand-footer-seo__inner,
.manufacturer-tp-link .brand-footer-seo__inner,
.manufacturer-microsoft .brand-footer-seo__inner,
.manufacturer-rivacase .brand-footer-seo__inner,
.manufacturer-accent .brand-footer-seo__inner,
.manufacturer-jbl .brand-footer-seo__inner,
.manufacturer-ugreen .brand-footer-seo__inner,
.manufacturer-lexar .brand-footer-seo__inner,
.manufacturer-razer .brand-footer-seo__inner,
.manufacturer-ruijie .brand-footer-seo__inner,
.manufacturer-synology .brand-footer-seo__inner{max-width:1430px;margin:0 auto;padding:0 15px}
/* Pleine largeur sans 100vw : le conteneur fait toute la largeur utile, donc width:100%
suffit — 100vw compterait la barre de défilement et rajouterait sa largeur en débordement.
AUCUN plafond : la page d'accueil laisse `max-width:none` sur son bandeau et sa réassurance,
qui occupent donc toute la fenêtre (1 905 px mesurés sur un écran 1 920). Un plafond à
1 440 px les aurait centrés en boîte au-delà de cette largeur, ce que la home ne fait pas.
Le contenu intérieur reste cadré par les règles de la home elles-mêmes : .hero-container
à 1 500 px et .rt-hp-trust__in à 1 430 px, centrés. */
.manufacturer-hp .hpu-hero-slider,
.manufacturer-lenovo .hpu-hero-slider,
.manufacturer-samsung .hpu-hero-slider,
.manufacturer-canon .hpu-hero-slider,
.manufacturer-epson .hpu-hero-slider,
.manufacturer-kaspersky .hpu-hero-slider,
.manufacturer-wacom .hpu-hero-slider,
.manufacturer-asus .hpu-hero-slider,
.manufacturer-dell .hpu-hero-slider,
.manufacturer-apple .hpu-hero-slider,
.manufacturer-ugreen .hpu-hero-slider,
.manufacturer-lexar .hpu-hero-slider,
.manufacturer-razer .hpu-hero-slider,
.manufacturer-ruijie .hpu-hero-slider,
.manufacturer-synology .hpu-hero-slider,
.manufacturer-jbl .hpu-hero-slider,
.manufacturer-accent .hpu-hero-slider,
.manufacturer-rivacase .hpu-hero-slider,
.manufacturer-microsoft .hpu-hero-slider,
.manufacturer-tp-link .hpu-hero-slider,
.manufacturer-hikvision .hpu-hero-slider,
.manufacturer-hpe .hpu-hero-slider,
.manufacturer-brother .hpu-hero-slider,
.manufacturer-apc .hpu-hero-slider,
.manufacturer-dahua .hpu-hero-slider,
.manufacturer-msi .hpu-hero-slider,
.manufacturer-logitech .hpu-hero-slider,
.manufacturer-eaton .hpu-hero-slider,
.manufacturer-lexmark .hpu-hero-slider,
.manufacturer-hp .hpu-trust,
.manufacturer-lenovo .hpu-trust,
.manufacturer-samsung .hpu-trust,
.manufacturer-canon .hpu-trust,
.manufacturer-epson .hpu-trust,
.manufacturer-kaspersky .hpu-trust,
.manufacturer-wacom .hpu-trust,
.manufacturer-asus .hpu-trust,
.manufacturer-dell .hpu-trust,
.manufacturer-apple .hpu-trust,
.manufacturer-lexmark .hpu-trust,
.manufacturer-eaton .hpu-trust,
.manufacturer-logitech .hpu-trust,
.manufacturer-msi .hpu-trust,
.manufacturer-dahua .hpu-trust,
.manufacturer-apc .hpu-trust,
.manufacturer-brother .hpu-trust,
.manufacturer-hpe .hpu-trust,
.manufacturer-hikvision .hpu-trust,
.manufacturer-tp-link .hpu-trust,
.manufacturer-microsoft .hpu-trust,
.manufacturer-rivacase .hpu-trust,
.manufacturer-accent .hpu-trust,
.manufacturer-jbl .hpu-trust,
.manufacturer-ugreen .hpu-trust,
.manufacturer-lexar .hpu-trust,
.manufacturer-razer .hpu-trust,
.manufacturer-ruijie .hpu-trust,
.manufacturer-synology .hpu-trust{width:100%;max-width:none;margin-left:0;margin-right:0}
/* même règle que la page d'accueil : le panneau panier du thème est garé hors écran à
droite et déborde ; l'accueil le contient par overflow-x:clip sur la racine. clip et non
hidden : hidden ferait de l'élément un conteneur de défilement et casserait l'en-tête collant. */
/* ===== TEXTE DU BANDEAU SUR TELEPHONE — 16/09 =====
Sous 768 px, la page d accueil pose une carte blanche derriere le texte du bandeau
(`.hero-photo .hero-content{background:rgba(255,255,255,.88)}`). Les slides 1 (Bons plans) et
4 (Gaming) gardaient le texte blanc du bureau : blanc sur blanc, illisible — c est ce qu Aziz a
vu sur son telephone. Les slides 2, 3 et 5 ecrivaient deja en fonce et passaient bien : on
aligne les deux autres dessus, plutot que de defaire la carte blanche, qui vient de l accueil. */
@media (max-width:767.98px){
.manufacturer-hp .hpu-s1::before,
.manufacturer-hp .hpu-s4::before{display:none}
.manufacturer-hp .hpu-s1 .hero-title,.manufacturer-hp .hpu-s1 .hero-title span,
.manufacturer-hp .hpu-s4 .hero-title,.manufacturer-hp .hpu-s4 .hero-title span{color:#1D2835}
.manufacturer-hp .hpu-s1 .hero-sub,
.manufacturer-hp .hpu-s4 .hero-sub{color:#3E4A57}
.manufacturer-hp .hpu-s1 .hero-kicker,
.manufacturer-hp .hpu-s4 .hero-kicker{color:#1D2835}
.manufacturer-hp .hpu-s1 .hero-bc,.manufacturer-hp .hpu-s1 .hero-bc a,.manufacturer-hp .hpu-s1 .hero-bc span,
.manufacturer-hp .hpu-s4 .hero-bc,.manufacturer-hp .hpu-s4 .hero-bc a,.manufacturer-hp .hpu-s4 .hero-bc span{color:#5C6874}
}
html{overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}}
:root{--hpu-nuit:#1d2835;--hpu-jaune:#FCC902;--hpu-creme:#FFFBEC;--hpu-trait:#e8ecf0;--hpu-gris:#6f7b88;--hpu-fond:#f6f8fa}
.hpu-arrow{font-style:normal;font-weight:700}
/* fil d'Ariane intégré au slider — même traitement que les pages du Mag */
.rt-hero-cms__breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rt-hero-cms__breadcrumb a,.rt-hero-cms__breadcrumb .sep,.rt-hero-cms__breadcrumb .current{font-size:12px;font-weight:500;text-decoration:none}
.hpu-bc{margin-bottom:18px}
/* voile de lisibilité : le texte reste lisible quel que soit le visuel */
.hpu-slide .hero-container{position:relative;z-index:2}
.hpu-slide::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.hpu-s1::before,.hpu-s4::before{background:linear-gradient(90deg,rgba(10,15,21,.88) 0%,rgba(10,15,21,.66) 34%,rgba(10,15,21,0) 62%)}
.hpu-s2::before,.hpu-s3::before{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 34%,rgba(255,255,255,0) 62%)}
.hpu-s5::before{background:linear-gradient(90deg,rgba(252,201,2,.94) 0%,rgba(252,201,2,.7) 34%,rgba(252,201,2,0) 60%)}
.hpu-slide .hero-content{max-width:600px}
/* chaque slide prend la couleur de texte que son visuel impose */
.hpu-s1 .hero-title,.hpu-s4 .hero-title{color:#fff}
.hpu-s1 .hero-title span,.hpu-s4 .hero-title span{color:#cfd7e0}
.hpu-s1 .hero-kicker,.hpu-s4 .hero-kicker{color:var(--hpu-jaune)}
.hpu-s1 .hpu-bc a,.hpu-s1 .hpu-bc .sep,.hpu-s1 .hpu-bc .current,
.hpu-s4 .hpu-bc a,.hpu-s4 .hpu-bc .sep,.hpu-s4 .hpu-bc .current{color:rgba(255,255,255,.62)}
.hpu-s1 .hpu-bc .sep,.hpu-s4 .hpu-bc .sep{color:rgba(255,255,255,.3)}
.hpu-s1 .hpu-bc a:hover,.hpu-s4 .hpu-bc a:hover{color:var(--hpu-jaune)}
/* #8a6d00 etait un dore terne, hors charte. Sur fond clair le jaune #FCC902 ne
passe pas (contraste ~1,9:1, illisible) : le nuit de la charte est la seule
couleur a la fois lisible et dans la palette. Le jaune reste porte par les boutons. */
.hpu-s5 .hero-kicker{color:var(--hpu-nuit)}
/* sur le visuel jaune, le bouton principal passe en marine (règle de la home) */
.hpu-s5 .btn-primary{background:var(--hpu-nuit)!important;color:#fff!important;border-color:var(--hpu-nuit)!important}
.hpu-s5 .btn-primary:hover{background:#fff!important;color:var(--hpu-nuit)!important;border-color:#fff!important}
.hpu-slide .hero-bg-photo{object-position:82% center}
@media (max-width:991px){.hpu-slide .hero-bg-photo{object-position:88% center}}
/* rangée de produits : lisible sur tous les visuels */
/* on ne redefinit PAS grid-template-columns : la page d'accueil le fait deja (4 colonnes,
2 sous 767.98px) et notre regle, plus specifique, bloquait la bascule telephone —
les vignettes restaient a 4 colonnes de 93 px avec des noms sur quatre lignes. */
.hpu-slide .hero-row{gap:0;background:#fff!important}
/* photo a gauche, nom et prix empiles a droite. En flex, les trois enfants
(img, .pname, .pprice) se rangeaient cote a cote : le nom et le prix
defilaient en cascade a droite de la photo. Une grille de deux colonnes sur
deux rangees, la photo occupant les deux rangees, remet chaque chose a sa place. */
.hpu-slide .hero-pcard{background:#fff!important;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;row-gap:1px;align-items:center;align-content:center;min-height:80px;padding:12px 14px;border-right:1px solid var(--hpu-trait);text-decoration:none}
.hpu-slide .hero-pcard img{grid-column:1;grid-row:1 / span 2;width:58px;height:58px}
.hpu-slide .hero-pcard .pname{grid-column:2;grid-row:1}
.hpu-slide .hero-pcard .pprice{grid-column:2;grid-row:2}
.hpu-slide .hero-pcard:last-child{border-right:0}
.hpu-slide .hero-pcard img{width:52px;height:52px;object-fit:contain;flex:none}
.hpu-slide .hero-pcard .pname{display:block;font-size:12px;line-height:1.3;color:var(--hpu-nuit)!important;font-weight:600}
.hpu-slide .hero-pcard .pprice{display:block;font-size:13.5px;font-weight:800;color:var(--hpu-nuit)!important;margin-top:2px}
.hpu-slide .hero-pcard .pprice s{font-weight:500;color:#9aa5b1;margin-right:6px;font-size:11.5px}
/* slider : 1,5× la hauteur de l'accueil (440/580 → 660/870) */
/* hauteur : aucune surcharge — le slider suit la règle de la page d'accueil
(`clamp(440px,70vh,580px)`, ramenée à `clamp(400px,62vh,520px)` sous 1600 px),
demande d'Aziz « même chose que home ». Seule la marge basse est remise à zéro,
la réassurance devant toucher le bandeau comme sur l'accueil. */
.hpu-hero-slider{margin-bottom:0}
.hpu-hero-slider .hero-title{font-size:clamp(30px,3.4vw,50px)}
.hpu-hero-slider .hero-title span{font-size:clamp(15px,1.3vw,19px);font-weight:500;display:block;margin-top:10px}
.hpu-hero-slider .hero-buttons{margin-top:6px}
.hero-nav button{font-size:26px!important;line-height:1}
/* réassurance (composant de l'accueil) */
/* réassurance : ×1,3 la hauteur de l'accueil (64 → 84 px) */
.hpu-trust{border-top:1px solid var(--hpu-trait)}
.hpu-trust .rt-hp-trust__i{min-height:93px;padding:19px 22px;gap:14px}
.hpu-trust .rt-hp-trust__ic{width:53px;height:53px}
.hpu-trust .rt-hp-trust__ic svg{width:26px;height:26px;color:var(--hpu-nuit)}
.hpu-trust .rt-hp-trust__t{font-size:15px}
.hpu-trust .rt-hp-trust__s{font-size:12.5px}
/* bandeau marque */
.hpu-strip{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--hpu-trait);border-radius:14px;padding:16px 22px;margin:26px 0 4px}
.hpu-strip-logo{width:62px;height:62px;object-fit:contain;flex:none}
.hpu-strip-txt{flex:1;min-width:0}
.hpu-strip h1{font:700 21px/1.25 Poppins,sans-serif;color:var(--hpu-nuit);margin:0 0 6px}
.hpu-strip-sub{margin:0;font-size:13.5px;color:var(--hpu-gris);line-height:1.5}
.hpu-strip-all{flex:none;font-weight:600;color:var(--hpu-nuit);border-bottom:2px solid var(--hpu-jaune);white-space:nowrap}
/* sections */
.hpu-sec{margin:38px 0}
.hpu-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:18px}
.hpu-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a94a0;margin-bottom:7px}
.hpu-h2{font:700 26px/1.25 Poppins,system-ui,sans-serif;color:var(--hpu-nuit);margin:0}
.hpu-h2 span{color:var(--hpu-gris);font-weight:500;font-size:16px}
.hpu-more{font-weight:600;color:var(--hpu-nuit);border-bottom:2px solid var(--hpu-jaune);max-width:100%}
.hpu-link-explore{font-weight:700;color:var(--hpu-nuit);border-bottom:2px solid var(--hpu-jaune);font-size:13.5px}
.hpu-btn-outline{display:inline-block;border:1.5px solid var(--hpu-nuit);color:var(--hpu-nuit);font-weight:600;padding:9px 16px;border-radius:8px;font-size:13.5px;line-height:1}
.hpu-btn-outline:hover{background:var(--hpu-nuit);color:#fff}
.hpu-univers{padding:30px 0 6px!important}
.hpu-univers .rt-hp-u__in{padding:0}
/* profils : idée Lenovo « Achats personnalisés » */
.hpu-profils-g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hpu-profil{background:#fff;border:1px solid var(--hpu-trait);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.hpu-profil:hover{box-shadow:0 14px 34px rgba(29,40,53,.13);transform:translateY(-2px)}
.hpu-profil-ph{display:block;aspect-ratio:16/10;overflow:hidden}
.hpu-profil-ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.hpu-profil:hover .hpu-profil-ph img{transform:scale(1.05)}
.hpu-profil-b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.hpu-profil-b h3{font:700 17px/1.3 Poppins,sans-serif;margin:0;color:var(--hpu-nuit)}
.hpu-profil-b p{margin:0;font-size:13.5px;line-height:1.55;color:#4b5563;flex:1}
.hpu-profil-b .hpu-btn-outline{align-self:flex-start;margin-top:4px}
/* onglets produits : idée HP Store */
.hpu-tabs-sec{padding:30px 0 10px!important}
.hpu-rails .rt-rail__hd{padding:0;max-width:none;margin-bottom:14px}
/* Barre d'onglets : 8 onglets font 1 070 px, elle defile donc sous 1 200 px. La barre de
defilement est masquee — il faut autre chose pour dire qu'il y a une suite, sinon six
onglets sur huit sont invisibles et sans indice sur telephone (mesure a 390 px).
Ombres de defilement, sans JavaScript : les deux degrades « local » suivent le contenu et
couvrent l'ombre du bord ou l'on est arrive ; les deux ombres « scroll » restent collees au
cadre. Resultat : l'ombre n'apparait que du cote ou il reste quelque chose a voir. */
.hpu-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--hpu-trait);margin-bottom:18px;scrollbar-width:none;scroll-snap-type:x proximity;
background:linear-gradient(to right,#fff 60%,rgba(255,255,255,0)) left center/34px 100% no-repeat local,
linear-gradient(to left,#fff 60%,rgba(255,255,255,0)) right center/34px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,rgba(29,40,53,.16),rgba(29,40,53,0)) left center/12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,rgba(29,40,53,.16),rgba(29,40,53,0)) right center/12px 100% no-repeat scroll}
.hpu-tabs::-webkit-scrollbar{display:none}
.hpu-tab{flex:none;background:none;border:0;border-bottom:3px solid transparent;padding:11px 16px;font:600 14px/1 Poppins,sans-serif;color:var(--hpu-gris);cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;scroll-snap-align:start}
/* Sous 1 200 px on resserre : la somme passe de 1 070 a ~950 px, les 8 onglets rentrent
jusqu'a 992 px sans rien cacher. En dessous, le defilement prend le relais. */
@media (max-width:1199.98px){
.hpu-tabs{gap:4px}
.hpu-tab{padding:11px 10px;font-size:13.5px}
}
.hpu-tab:hover{color:var(--hpu-nuit)}
.hpu-tab.is-active{color:var(--hpu-nuit);border-bottom-color:var(--hpu-jaune)}
.hpu-panel{display:none}
.hpu-panel.is-active{display:block}
.hpu-panel-all{text-align:right;margin-top:4px}
/* flèches de l'en-tête, comme le rail « Parcourez nos rayons » de l'accueil */
.hpu-nav{display:flex;gap:8px;flex:none}
.hpu-nav-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--hpu-trait);background:#fff;color:var(--hpu-nuit);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,opacity .18s}
.hpu-nav-btn:hover{background:var(--hpu-jaune);border-color:var(--hpu-jaune)}
.hpu-nav-btn[disabled]{opacity:.35;cursor:default;background:#fff;border-color:var(--hpu-trait)}
/* ascenseur horizontal masqué : on navigue aux flèches ou au doigt */
.hpu-rail-attente{margin:0;padding:26px 2px;font:600 13px/1.4 Poppins,sans-serif;color:var(--hpu-gris)}
.hpu-rail{display:flex!important;flex-wrap:nowrap!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.hpu-rail::-webkit-scrollbar{display:none;width:0;height:0}
/* Jamais de carte coupee : la largeur d'une carte se deduit du conteneur pour qu'un
nombre ENTIER de cartes tienne exactement, a chaque palier. Une largeur fixe de
250 px laissait forcement un reste, donc un produit tronque a droite. */
.hpu-rail{--hpu-n:5}
.hpu-rail .hpu-card{flex:0 0 calc((100% - (var(--hpu-n) - 1) * 14px) / var(--hpu-n))!important;width:auto!important;max-width:none!important;scroll-snap-align:start;padding:0;box-sizing:border-box}
@media (max-width:1399px){.hpu-rail{--hpu-n:4}}
@media (max-width:1099px){.hpu-rail{--hpu-n:3}}
@media (max-width:819px){.hpu-rail{--hpu-n:2}}
.hpu-rail .product-miniature{margin:0}
/* gammes : bande de pastilles façon HP Store */
.hpu-pastilles{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.hpu-pastille{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;color:var(--hpu-nuit);padding:6px 2px}
.hpu-pastille-ph{width:100%;aspect-ratio:1;border-radius:50%;background:var(--hpu-fond);display:flex;align-items:center;justify-content:center;padding:12px;transition:background .2s,transform .2s}
.hpu-pastille:hover .hpu-pastille-ph{background:var(--hpu-creme);transform:translateY(-3px)}
.hpu-pastille-ph img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.hpu-pastille-n{font-weight:700;font-size:13px;margin-top:6px;border-bottom:2px solid transparent}
.hpu-pastille:hover .hpu-pastille-n{border-bottom-color:var(--hpu-jaune)}
.hpu-pastille-s{font-size:11px;color:var(--hpu-gris);line-height:1.3;min-height:28px}
/* pourquoi, tableau, services */
.hpu-pourquoi{margin:36px 0 10px}
.hpu-intro p{font-size:14.5px;line-height:1.65;color:#374151;max-width:1100px}
.hpu-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hpu-trait);border-radius:12px;overflow:hidden;font-size:14px}
.hpu-table th{background:var(--hpu-nuit);color:#fff;text-align:left;padding:12px 16px;font-weight:600}
.hpu-table td{padding:12px 16px;border-top:1px solid var(--hpu-trait);vertical-align:middle}
.hpu-table tr:nth-child(even) td{background:var(--hpu-fond)}
.hpu-table td:first-child{font-weight:600;color:var(--hpu-nuit)}
.hpu-services{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hpu-svc{display:flex;gap:14px;background:var(--hpu-creme);border:1px solid #f1e5b8;border-radius:12px;padding:16px}
.hpu-svc svg{flex:0 0 32px;width:32px;height:32px;color:var(--hpu-nuit)}
.hpu-svc h3{font:700 14.5px/1.3 Poppins,sans-serif;margin:0 0 4px;color:var(--hpu-nuit)}
.hpu-svc p{margin:0;font-size:12.5px;line-height:1.5;color:#4b5563}
.hpu-grid-head{margin:10px 0 6px}
.hpu-editorial{margin-top:32px}
@media (max-width:1199px){.hpu-pastilles{grid-template-columns:repeat(6,1fr)}}
/* L'habillage du filtre Amazzing est passe dans le theme (child-custom.css, 15/09) :
il vaut desormais sur toutes les pages ou le module apparait. Rien ici.
En revanche le REPLACEMENT de la colonne reste propre a cette page : le theme rend
la colonne collante dans une mise en page a deux colonnes, or cette page est en une
seule colonne pleine largeur (choix valide). Le script ci-dessous reste donc utile. */
@media (max-width:991.98px){.manufacturer-hp .hpu-liste{display:block;padding:0}.manufacturer-hp .hpu-liste > #left-column{display:none!important}.manufacturer-hp .hpu-liste > #products{padding:0 15px}}
@media (max-width:991px){.hpu-profils-g{grid-template-columns:repeat(2,1fr)}.hpu-services{grid-template-columns:repeat(2,1fr)}.hpu-strip{flex-wrap:wrap}.hpu-univers .rt-hp-u__g{grid-template-columns:repeat(2,1fr)}.hpu-strip{flex-direction:column;align-items:flex-start}.hpu-strip-txt{width:100%;flex:none}}
@media (max-width:575px){.hpu-profils-g{grid-template-columns:1fr}.hpu-services{grid-template-columns:1fr}.hpu-pastilles{grid-template-columns:repeat(3,1fr)}.hpu-table{display:block}.hpu-table thead{display:none}.hpu-table tbody,.hpu-table tr,.hpu-table td{display:block;width:auto}.hpu-table tr{padding:14px 16px;border-top:1px solid var(--hpu-trait)}.hpu-table tr:first-child{border-top:0}.hpu-table td{border:0;padding:0}.hpu-table tr:nth-child(even){background:var(--hpu-fond)}.hpu-table tr:nth-child(even) td{background:transparent}.hpu-table td:first-child{font-size:15px;line-height:1.35}.hpu-table td:nth-child(2){color:var(--hpu-gris);margin:3px 0 9px;line-height:1.45}.hpu-table td:nth-child(3){display:block}.hpu-table td:nth-child(3) .hpu-link-explore{display:inline-block}.hpu-strip h1{font-size:17px}.hpu-univers .rt-hp-u__g{grid-template-columns:1fr 1fr;gap:10px}.hpu-hero-slider .hero-title{font-size:24px}.hpu-hero-slider .hero-title span{font-size:13.5px;margin-top:6px}.hpu-strip{flex-direction:column;align-items:flex-start;gap:12px}.hpu-strip-txt{width:100%;flex:none}.hpu-strip-logo{width:52px;height:52px}}
/* =========================================================================
CORRECTIF DU 16/09/2026 — LE RAIL RESTAIT INVISIBLE, SUR HP COMME SUR LENOVO
=========================================================================
La regle en cause, dans la feuille du theme :
.products.product-loop:not(.swiper-wrapper){opacity:0;visibility:hidden}
Le theme masque toute liste de produits et ne la revele qu'en lui ajoutant la classe
`visible`, depuis son propre script, au chargement de la page. Le rail du hub, lui, est
construit APRES coup par une requete : quand il arrive, le script du theme est deja passe,
la classe n'arrive jamais, et le bloc affichait **550 px de blanc**.
Constate sur /brand/hp en production, pas seulement sur Lenovo : le bloc « Les produits HP
les plus demandes » ne montrait rien depuis sa mise en ligne. Les cartes etaient bien la,
avec leur photo chargee et leur prix — simplement invisibles.
Les DEUX proprietes sont a rendre : la visibilite seule ne suffit pas, l'opacite reste a 0.
On ne les rend qu'au rail du hub. Quatre classes : la regle du theme en compte trois,
celle-ci passe donc devant sans `!important`.
========================================================================= */
.hpu-rails .hpu-rail.products.product-loop,
.hpu-rails .hpu-rail.products.product-loop .product,
.hpu-rails .hpu-rail.products.product-loop .product-miniature{visibility:visible;opacity:1}
/* =========================================================================
AJUSTEMENT DU 16/09/2026 — L'INTRODUCTION SE CALAIT SUR LE BORD DE L'ECRAN
=========================================================================
Sur HP l'introduction est prise dans le bandeau defilant, donc le probleme ne se voit pas.
Sur une page sans bandeau — Lenovo, Samsung — elle suit directement la carte du bandeau
marque, qui a 22 px de marge interieure. Le paragraphe, lui, partait du bord : deux
alignements differents a quelques pixels d'ecart, ce qui se voit au premier coup d'oeil.
On lui donne la meme marge. HP porte sa propre regle `.hpu-intro` en ligne et garde la main :
sa page ne bouge pas.
========================================================================= */
.hpu-intro{padding:14px 22px 2px}
/* =========================================================================
FONDS DE CHARTE POUR LE BANDEAU — 17/09/2026, en attendant les visuels
=========================================================================
Les cinq fonds de HP portent tous un logo HP ou OMEN bien visible : sur le portable, sur
l'ecran, sur les imprimantes, sur la souris. Les poser derriere le bandeau de Lenovo ou de
Samsung afficherait donc du materiel HP sur la page d'une autre marque.
En attendant les fonds propres a chaque marque, la diapositive porte un **degrade de la
charte** : marine #1D2835, creme #FFFBEC, jaune #FCC902. Aucune image, donc aucun octet a
telecharger et aucun logo qui ne soit pas le bon.
Le jour ou un fond existe, il suffit de reposer un `![]()
` dans la
diapositive : ces regles passent dessous sans qu'on ait rien a retirer.
========================================================================= */
.hpu-slide--charte{background:#1d2835}
.hpu-slide--charte .hero-container{min-height:340px;display:flex;align-items:center}
.hpu-slide--charte.hpu-s1{background:linear-gradient(115deg,#141d27 0%,#1d2835 46%,#27374a 100%)}
.hpu-slide--charte.hpu-s4{background:linear-gradient(115deg,#0f161e 0%,#1d2835 52%,#2b3d52 100%)}
.hpu-slide--charte.hpu-s2,
.hpu-slide--charte.hpu-s3{background:linear-gradient(115deg,#fffbec 0%,#f6f8fa 54%,#e8ecf0 100%)}
.hpu-slide--charte.hpu-s5{background:linear-gradient(115deg,#fffbec 0%,#ffeead 58%,#FCC902 100%)}
/* le fond de charte est desormais une vraie image : on garde le voile de lisibilite, mais
allege, parce que l'image est deja calme a gauche. */
.hpu-slide--charte.hpu-s2::before,
.hpu-slide--charte.hpu-s3::before,
.hpu-slide--charte.hpu-s5::before{background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.35) 38%,rgba(255,255,255,0) 64%)}
/* une trame discrete, pour que le fond ne soit pas un aplat mort */
.hpu-slide--charte::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(1200px 380px at 86% 50%,rgba(252,201,2,.16),transparent 70%)}
.hpu-slide--charte.hpu-s2::after,
.hpu-slide--charte.hpu-s3::after{background:radial-gradient(1100px 360px at 86% 50%,rgba(29,40,53,.10),transparent 70%)}
.hpu-slide--charte.hpu-s5::after{background:radial-gradient(1100px 360px at 86% 50%,rgba(29,40,53,.14),transparent 70%)}
@media (max-width:767.98px){.hpu-slide--charte .hero-container{min-height:260px}}
/* LE TEXTE DOIT SUIVRE LE FOND, SINON IL DISPARAIT.
Le titre du bandeau est blanc par defaut : il a ete dessine pour se poser sur une photo
sombre. Sur les fonds clairs de la charte — creme et jaune — blanc sur creme ne se voit pas.
Constate le 17/09 : le DOM annoncait « visible, opacite 1 », et l'ecran ne montrait rien.
On donne donc au texte la couleur que son fond impose, diapositive par diapositive. */
.hpu-slide--charte.hpu-s2 .hero-title,.hpu-slide--charte.hpu-s2 .hero-title span,
.hpu-slide--charte.hpu-s3 .hero-title,.hpu-slide--charte.hpu-s3 .hero-title span,
.hpu-slide--charte.hpu-s5 .hero-title,.hpu-slide--charte.hpu-s5 .hero-title span{color:#1D2835}
.hpu-slide--charte.hpu-s2 .hero-kicker,
.hpu-slide--charte.hpu-s3 .hero-kicker,
.hpu-slide--charte.hpu-s5 .hero-kicker{color:#1D2835}
.hpu-slide--charte.hpu-s2 .hpu-bc,.hpu-slide--charte.hpu-s2 .hpu-bc a,.hpu-slide--charte.hpu-s2 .hpu-bc span,
.hpu-slide--charte.hpu-s3 .hpu-bc,.hpu-slide--charte.hpu-s3 .hpu-bc a,.hpu-slide--charte.hpu-s3 .hpu-bc span,
.hpu-slide--charte.hpu-s5 .hpu-bc,.hpu-slide--charte.hpu-s5 .hpu-bc a,.hpu-slide--charte.hpu-s5 .hpu-bc span{color:#5C6874}
/* sur les fonds sombres, on garde le blanc et on eclaire le sous-titre */
.hpu-slide--charte.hpu-s1 .hero-title,.hpu-slide--charte.hpu-s1 .hero-title span,
.hpu-slide--charte.hpu-s4 .hero-title,.hpu-slide--charte.hpu-s4 .hero-title span{color:#fff}
.hpu-slide--charte.hpu-s1 .hero-kicker,
.hpu-slide--charte.hpu-s4 .hero-kicker{color:#FCC902}
.hpu-slide--charte.hpu-s1 .hpu-bc,.hpu-slide--charte.hpu-s1 .hpu-bc a,.hpu-slide--charte.hpu-s1 .hpu-bc span,
.hpu-slide--charte.hpu-s4 .hpu-bc,.hpu-slide--charte.hpu-s4 .hpu-bc a,.hpu-slide--charte.hpu-s4 .hpu-bc span{color:#cfd7e0}
/* sur le fond jaune, le bouton principal passe en marine — regle de la page d'accueil */
.hpu-slide--charte.hpu-s5 .btn-primary{background:#1D2835;color:#fff;border-color:#1D2835}
@media (max-width:575px){.hpu-intro{padding:12px 16px 2px}}
/* =========================================================================
17/09/2026 — LA BARRE DE REASSURANCE : SES REGLES DE BASE MANQUAIENT
=========================================================================
Aziz : « le bloc juste apres le hero n'est pas boxed, dans HP boxed ».
Deux conteneurs manquaient a toutes les pages sauf HP : la barre de reassurance
`.rt-hp-trust` et le conteneur `.hpu-hub`. Le second etait deja dans cette feuille
(extrait de hp_style_4) ; le premier, non — ses regles de base vivent dans
hp_style_1.css, qui n'est pas repris ici. Seules les RETOUCHES `.hpu-trust ...`
l'etaient, et une retouche sans sa regle de base ne dessine rien.
Mesure a 929 px de fenetre, avant correction :
HP .hpu-strip 884 px, gauche 15 (dans .hpu-hub)
Lenovo .hpu-strip 914 px, gauche 0 (pas de conteneur)
Trente pixels d'ecart sur chaque bloc, et pas de barre de reassurance du tout.
Les regles ci-dessous sont celles de la page d'accueil, copiees sans modification.
HP garde sa copie en ligne, qui passe apres : sa page ne bouge pas d'un pixel.
========================================================================= */
.rt-hp-trust{--j:#FCC902;--n:#1D2835;background:#fff;border-bottom:1px solid #e8ecf0;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.rt-hp-trust__in{max-width:1430px;margin:0 auto;padding:0 15px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.rt-hp-trust__i{display:flex;align-items:center;gap:11px;padding:13px 18px;position:relative;min-height:64px}
.rt-hp-trust__i+.rt-hp-trust__i::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:1px;background:#e8ecf0}
.rt-hp-trust__ic{flex:none;width:38px;height:38px;border-radius:50%;background:#FFFBEC;display:flex;align-items:center;justify-content:center}
.rt-hp-trust__ic i{font-size:20px;color:var(--n)}
.rt-hp-trust__t{display:block;font-size:13px;font-weight:600;color:var(--n);line-height:1.25}
.rt-hp-trust__s{display:block;font-size:11.5px;color:#6f7b88;line-height:1.3;margin-top:1px}
@media(max-width:1024px){.rt-hp-trust__in{grid-template-columns:repeat(2,1fr)}.rt-hp-trust__i:nth-child(3)::before{display:none}}
@media(max-width:576px){.rt-hp-trust__in{grid-template-columns:1fr}.rt-hp-trust__i::before{display:none!important}.rt-hp-trust__i{min-height:0;padding:10px 4px;border-bottom:1px solid #f2f5f8}}
/* =========================================================================
18/09/2026 — LE TITRE DU BANDEAU COUPAIT AU MAUVAIS ENDROIT
=========================================================================
« PIXMA G3410 a 1 590 » sur la premiere ligne, « Dhs » tout seul sur la seconde : le
navigateur casse ou il peut, et il coupait entre le nombre et sa monnaie. Le generateur
place desormais la coupure lui-meme, et la deuxieme ligne prend cette classe.
Elle appartient au TITRE, pas au sous-titre : elle reste grasse, simplement un cran plus
petite que la premiere ligne, comme Aziz le demande — « haut plus grand que le bas ».
Sans cette regle elle heriterait du style du sous-titre, en 15 px et en demi-gras.
========================================================================= */
.hpu-hero-slider .hero-title span.hpu-t2{
display:block;
font-size:clamp(24px,2.6vw,38px);
font-weight:800;
line-height:1.05;
margin-top:2px;
color:inherit;
}
/* =========================================================================
18/09/2026 — LE VOILE DU BANDEAU SUIT L'IMAGE, PLUS SA POSITION
=========================================================================
Les voiles de HP etaient accroches au rang : sombre en 1 et 4, blanc en 2 et 3, JAUNE en 5.
Justes pour ses cinq photos, faux partout ailleurs — la diapositive Odyssey de Samsung,
noire et violette, se retrouvait sous un jaune opaque a 94 %.
Desormais : voile sombre par defaut, parce que le titre du bandeau est blanc ; voile clair
sur les diapositives qui declarent un fond clair. Aucune mention d'un numero.
========================================================================= */
.hpu-slide::before{background:linear-gradient(90deg,rgba(10,15,21,.88) 0%,rgba(10,15,21,.66) 34%,rgba(10,15,21,0) 62%)}
.hpu-slide .hero-title{color:#fff}
.hpu-slide .hero-title span{color:#cfd7e0}
.hpu-slide .hero-kicker{color:var(--hpu-jaune)}
.hpu-slide .hpu-bc a,.hpu-slide .hpu-bc .sep,.hpu-slide .hpu-bc .current{color:rgba(255,255,255,.62)}
.hpu-slide .hpu-bc .sep{color:rgba(255,255,255,.3)}
.hpu-slide .hpu-bc a:hover{color:var(--hpu-jaune)}
/* =========================================================================
18/09/2026 — LE TEXTE DU BANDEAU SUR UN FOND CLAIR
=========================================================================
Le titre du bandeau est blanc : il a ete dessine pour des photos sombres. Les couvertures
de la serie Samsung sont volontairement solaires — jaune, turquoise, plein soleil — et le
tiers gauche y monte a 202 sur 255. Du blanc dessus ne se lit pas.
Deux sorties possibles : assombrir le fond, ou basculer le texte. Aziz a choisi la seconde,
et c'est la bonne : la page d'accueil fait deja exactement cela sur son visuel jaune, et
assombrir reviendrait a eteindre la couleur qu'on est alle chercher.
La diapositive porte alors `hpu-slide--clair` et tout son texte passe en marine.
========================================================================= */
.hpu-slide--clair .hero-title,
.hpu-slide--clair .hero-title span,
.hpu-slide--clair .hero-kicker{color:#1D2835}
.hpu-slide--clair .hpu-bc,
.hpu-slide--clair .hpu-bc a,
.hpu-slide--clair .hpu-bc span{color:#5C6874}
.hpu-slide--clair .btn-primary{background:#1D2835;color:#fff;border-color:#1D2835}
.hpu-slide--clair .btn-secondary{background:rgba(255,255,255,.86);color:#1D2835;border-color:#1D2835}
/* le voile sombre pose sur la photo doit s'effacer, sinon il grise le fond clair */
.hpu-slide--clair::before{background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 42%,rgba(255,255,255,0) 66%)}
/* Marque sans fichier de logo : le nom prend la place de l image. */
.hpu-strip-logo--texte{width:auto;min-width:62px;height:62px;padding:0 14px;display:flex;align-items:center;justify-content:center;background:var(--hpu-fond,#f5f6f8);border-radius:10px;font-weight:800;font-size:17px;letter-spacing:.2px;color:var(--hpu-marine,#16243c);white-space:nowrap}
@media (max-width:575px){.hpu-strip-logo--texte{height:52px;font-size:15px;padding:0 11px}}
/* =============================================================================
LES MARQUES SANS PAGE REDIGEE — 19/09/2026
-----------------------------------------------------------------------------
CE QU'ON VOYAIT. Sur /brand/lg, et sur les 253 marques qui n'ont pas encore de
hub, la colonne des filtres se rangeait AU-DESSUS de la liste des produits au
lieu d'etre a cote, et laissait un grand vide a sa droite. La cause est simple :
`.hpu-liste` contient bien deux colonnes Bootstrap (`col-lg-3` et la liste),
mais n'est pas une `.row` — sans rangee, les colonnes s'empilent. S'y ajoutait
`#content-wrapper` en `col-lg-9`, soit 315 px reserves a une colonne de droite
qui n'existe pas sur ces pages.
POURQUOI CA NE SE VOYAIT PAS SUR LES 25 HUBS. Ils ont deja ces reglages, plus
haut dans ce fichier, mais ecrits marque par marque : `.manufacturer-hp`,
`.manufacturer-canon`... Une marque absente de la liste n'y avait pas droit.
POURQUOI CE BLOC NE LES DERANGE PAS. Il est volontairement MOINS specifique :
`.hpu-liste` (une classe) contre `.manufacturer-hp .hpu-liste` (deux classes).
Sur un hub, les regles ci-dessus l'emportent donc toujours, avec leur colonne
collante et leur `align-items:stretch`. Seul `#content-wrapper` est a
specificite egale, et il porte exactement les memes valeurs : rien ne bouge.
============================================================================= */
.page-manufacturer #content-wrapper{flex:0 0 100%;max-width:none;width:100%;padding:0}
.hpu-liste{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;max-width:1430px;margin:0 auto;padding:0 15px}
/* le rappel des filtres actifs est frere des deux colonnes : sans cela il en formait une troisieme */
.hpu-liste > .selectedFilters{order:-1;flex:0 0 100%;width:100%;margin:0}
.hpu-liste > #left-column{flex:0 0 275px;max-width:275px;width:275px;padding:0;margin:0}
.hpu-liste > #products{flex:1 1 0;min-width:0;max-width:none;margin:0;padding:0}
/* En dessous de 992 px, on revient a l'empilement : la colonne de 275 px ne tient plus
a cote d'une grille de produits, et les filtres restent accessibles au-dessus. */
@media (max-width:991.98px){
.hpu-liste{display:block;padding:0}
.hpu-liste > #left-column{width:auto;max-width:none;margin-bottom:18px}
.hpu-liste > #products{padding:0 15px}
}
/* -----------------------------------------------------------------------------
L'EN-TETE DES MARQUES SANS PRESENTATION — 19/09/2026
-----------------------------------------------------------------------------
Le gabarit posait deja `--nu` quand une marque n'a pas de texte, et le style
repliait la colonne de droite. Restait la colonne du logo, etiree sur toute la
largeur et haute de 126 px : une bande de 172 px qui ne montrait qu'un nom
centre, deja lu dans le fil d'Ariane juste au-dessus (vu sur /brand/samson).
Elle devient une bande sobre, alignee a gauche, a la hauteur du logo. Et quand
la marque n'a NI texte NI logo, la carte n'a plus rien a montrer : le gabarit
ajoute `--vide` et elle disparait. Les 25 hubs ne sont pas concernes — ils ont
tous une presentation, donc jamais ces classes.
----------------------------------------------------------------------------- */
.rt-brand-header--nu{padding:14px 18px}
.rt-brand-header--nu .rt-brand-layout{align-items:center;gap:14px;min-height:0}
.rt-brand-header--nu .rt-brand-logo-col{flex:0 0 auto;width:auto;max-width:300px;height:auto;min-height:0;justify-content:flex-start;padding:0}
.rt-brand-header--nu .rt-brand-logo-col img{max-height:54px;width:auto;object-fit:contain}
.rt-brand-header--nu .rt-brand-logo-texte{font-size:20px;font-weight:800;letter-spacing:.2px}
/* ni texte ni logo : la carte ne porterait qu'une repetition du fil d'Ariane */
.rt-brand-header--vide{display:none}