.
Design propre a Safe-Use (rien d'emprunte). Palette navy/cyan.
========================================================= */
.su-hub { max-width: 1180px; }
/* --- Bandeau hero PLEINE LARGEUR (full-bleed, 100% sans image) ---
Sort de .container via les marges negatives (left 50% + -50vw) pour
occuper toute la largeur de l'ecran, bord a bord. Decor 100% CSS :
degrade navy profond + halo cyan flottant + trame de points estompee. */
.su-hub-hero {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
margin-bottom: 46px;
padding: 80px 0 84px;
overflow: hidden;
isolation: isolate;
text-align: center;
background:
radial-gradient(115% 130% at 82% -10%, rgba(12, 187, 231, .40) 0%, rgba(12, 187, 231, 0) 46%),
radial-gradient(95% 120% at 4% 112%, rgba(12, 187, 231, .20) 0%, rgba(23, 50, 122, 0) 50%),
linear-gradient(125deg, #0e2151 0%, #17327a 48%, #1f4396 100%);
}
/* trame de points subtile, estompee vers les bords */
.su-hub-hero::before {
content: "";
position: absolute; inset: 0; z-index: 0;
background-image: radial-gradient(rgba(255, 255, 255, .07) 1.1px, transparent 1.1px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 38%, transparent 80%);
mask-image: radial-gradient(125% 100% at 50% 0%, #000 38%, transparent 80%);
}
/* halo cyan lumineux qui flotte doucement */
.su-hub-hero::after {
content: "";
position: absolute; z-index: 0;
width: 520px; height: 520px;
top: -190px; right: -110px;
border-radius: 50%;
background: radial-gradient(circle, rgba(12, 187, 231, .55) 0%, rgba(12, 187, 231, 0) 68%);
filter: blur(10px);
animation: suHubFloat 9s ease-in-out infinite;
}
@keyframes suHubFloat {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-26px, 26px); }
}
/* contenu centre, cale sur la largeur des cartes */
.su-hub-hero-inner {
position: relative; z-index: 2;
max-width: 1180px;
margin: 0 auto;
padding: 0 30px;
}
/* pastille "eyebrow" en glass */
.su-hub-eyebrow {
display: inline-flex; align-items: center; gap: 9px;
margin-bottom: 22px;
padding: 8px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .20);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #cdeffb; font-size: 12px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
}
.su-hub-eyebrow::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: #0cbbe7; box-shadow: 0 0 10px 2px rgba(12, 187, 231, .8);
}
.su-hub-hero h1 {
margin: 0 !important;
color: #fff !important;
font-size: 42px !important;
font-weight: 800 !important;
line-height: 1.08 !important;
letter-spacing: -.015em;
text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}
/* filet cyan neon centre sous le titre */
.su-hub-hero h1::after {
content: ""; display: block;
width: 72px; height: 4px; margin: 18px auto 0;
border-radius: 4px;
background: linear-gradient(90deg, rgba(12, 187, 231, 0), #0cbbe7, rgba(12, 187, 231, 0));
box-shadow: 0 0 14px rgba(12, 187, 231, .7);
}
.su-hub-hero p {
max-width: 640px; margin: 20px auto 0;
color: #d6e2fb; font-size: 17px; line-height: 1.6;
}
/* =========================================================
PAGE HUB (CMS id 10) — hero colle au menu + VRAI fil d'Ariane sur le bandeau
---------------------------------------------------------
SCOPE TOTAL a .cms-id-10 : ces regles ne s'appliquent QU'A cette page.
Les autres pages CMS (mentions, CGV, RdR...) gardent titre + fil d'Ariane.
On NE recree PAS le fil d'Ariane : on garde la balise schema.org du theme
(.breadcrumb-wrapper) et on la fait flotter SUR le bandeau (texte clair),
le hero remontant derriere elle.
-> si la page est recreee avec un autre id, adapter "10" ci-dessous.
========================================================= */
/* titre de page duplique masque (le hero porte deja le titre) */
.cms-id-10 .page-header,
.cms-id-10 h1.page-heading,
.cms-id-10 #content-wrapper > h1 { display: none !important; }
/* supprime l'espace au-dessus -> tout remonte vers le menu */
.cms-id-10 #wrapper,
.cms-id-10 #content-wrapper,
.cms-id-10 #main { padding-top: 0 !important; }
.cms-id-10 .su-hub { margin-top: 0 !important; }
/* le vrai fil d'Ariane passe AU-DESSUS du bandeau */
.cms-id-10 .breadcrumb-wrapper { position: relative; z-index: 3; }
/* le hero remonte derriere le fil d'Ariane (ajuster -58px si decalage) */
.cms-id-10 .su-hub-hero { margin-top: -58px; }
/* maillons lisibles sur le fond sombre du bandeau */
.cms-id-10 .breadcrumb li a {
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .35) !important;
color: #eaf1ff !important;
}
.cms-id-10 .breadcrumb li a span { color: #eaf1ff !important; }
.cms-id-10 .breadcrumb li a:hover {
background: rgba(255, 255, 255, .16) !important;
border-color: rgba(255, 255, 255, .55) !important;
}
.cms-id-10 .breadcrumb li a:hover span { color: #fff !important; }
/* --- Grille de cartes ---
!important sur display/grid : le theme applique des regles sur
".page-content a" (specificite > .su-hub-card) qui ecrasaient le layout. */
.su-hub-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px;
}
@media (max-width: 991px) { .su-hub-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 575px) { .su-hub-grid { grid-template-columns: 1fr !important; } }
/* Carte = lien plein (toute la carte cliquable).
Markup mini (h3 + p uniquement) : l'icone et la fleche sont 100% CSS
(pseudo-elements) -> TinyMCE ne peut rien casser ni supprimer. */
.su-hub-card {
position: relative;
display: flex !important;
flex-direction: column !important;
overflow: hidden;
padding: 28px 24px;
background: #fff;
border: 1px solid #eef1f7;
border-radius: 16px;
text-decoration: none !important;
box-shadow: 0 6px 20px rgba(23, 50, 122, .07);
transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.su-hub-card:hover {
transform: translateY(-8px);
border-color: #0cbbe7;
/* ombre + filet cyan en haut (inset) au survol */
box-shadow: 0 20px 40px rgba(23, 50, 122, .16), inset 0 4px 0 0 #0cbbe7;
}
/* Icone = ::before (boite gradient navy->cyan + glyphe SVG blanc en background).
Le dessin de l'icone vient de --su-ico, defini par la classe de chaque carte. */
.su-hub-card::before {
content: "";
width: 58px; height: 58px; margin-bottom: 18px;
border-radius: 14px;
background-image: var(--su-ico), linear-gradient(135deg, #17327a, #0cbbe7);
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: 30px 30px, cover;
box-shadow: 0 8px 18px rgba(12, 187, 231, .28);
transition: transform .3s ease;
}
.su-hub-card:hover::before { transform: translateY(-2px) scale(1.05); }
.su-hub-card h3 { margin: 0 0 8px; color: #17327a; font-size: 18px; font-weight: 700; }
.su-hub-card p { margin: 0; flex: 1 1 auto; color: #5a6b8c; font-size: 14px; line-height: 1.5; }
/* Lien "Découvrir" : texte visible en bas + zone cliquable etendue a TOUTE
la carte via ::after (stretched-link). La carte est un (TinyMCE le
garde), seul ce
porte le href -> structure indestructible. */
.su-hub-card-link {
align-self: flex-start;
margin-top: 18px;
color: #0cbbe7 !important; font-weight: 700; font-size: 14px;
text-decoration: none !important;
transition: padding-left .22s ease;
}
.su-hub-card-link::after {
content: ""; position: absolute; inset: 0; z-index: 1; /* couvre la carte (parent position:relative) */
}
.su-hub-card:hover .su-hub-card-link { padding-left: 5px; }
/* Glyphes des icones (SVG blanc en data-URI) */
.su-hub-card--drogues { --su-ico: url("data:image/svg+xml,"); }
.su-hub-card--festif { --su-ico: url("data:image/svg+xml,"); }
.su-hub-card--sexe { --su-ico: url("data:image/svg+xml,"); }
.su-hub-card--hygiene { --su-ico: url("data:image/svg+xml,"); }
.su-hub-card--infirmerie { --su-ico: url("data:image/svg+xml,"); }
.su-hub-card--all { --su-ico: url("data:image/svg+xml,"); }
/* Carte "Voir tout" : fond navy plein, accent inverse */
.su-hub-card--all { background: linear-gradient(135deg, #17327a, #203472); border-color: transparent; }
.su-hub-card--all h3 { color: #fff; }
.su-hub-card--all p { color: #c8d4f0; }
.su-hub-card--all::before {
background-image: var(--su-ico);
background-color: rgba(255, 255, 255, .14);
background-size: 30px 30px;
box-shadow: none;
}
.su-hub-card--all .su-hub-card-link { color: #7fe3ff !important; }
.su-hub-card--all:hover { border-color: #0cbbe7; }
.su-hub-card--all:hover::before { background-color: rgba(255, 255, 255, .22); }
/* Mobile : hero plus compact */
@media (max-width: 767px) {
.su-hub-hero { padding: 52px 0 56px; margin-bottom: 32px; }
.su-hub-hero h1 { font-size: 30px !important; }
.su-hub-hero p { font-size: 15px; }
.su-hub-eyebrow { margin-bottom: 16px; }
}
/* ============================================================
MENU CATEGORIES — SIDEBAR PREMIUM "Accent lateral neon"
------------------------------------------------------------
Style haut de gamme, applique PARTOUT ou la sidebar categories
s'affiche (#left-column .block-categories) -> une seule source
de verite. Le LAYOUT (largeur 290px, flex, conteneur 1420) reste
gere plus bas (section "MENU CATEGORIES LATERAL ... 1. Bloc centre").
Signature : barre cyan "neon" qui grandit + glisse au survol,
fond degrade lateral qui se devoile, guide vertical de niveau,
micro-animations propres (easing doux). Premium, pas charge.
Bootstrap collapse : ouvert = .collapse.show (.in en repli BS3),
animation en cours = .collapsing. PAS de font-weight a l'ouverture
(le gras provoque un reflow / micro-decalage en fin d'animation).
Toggles : .navbar-toggler.collapse-icons (+/-) et .arrows (chevrons),
icones = Material Icons (police du theme). Palette navy/cyan.
============================================================ */
/* Variables locales : retoucher la palette / l'easing en un endroit */
#left-column .block-categories {
--su-navy: #17327a;
--su-cyan: #0cbbe7;
--su-cyan-soft: rgba(12, 187, 231, .12);
--su-ease: cubic-bezier(.4, 0, .2, 1);
position: relative;
background: #fff;
border: 1px solid #eef1f7;
border-radius: 16px;
padding: 0 0 12px;
box-shadow: 0 10px 30px rgba(23, 50, 122, .10);
overflow: hidden;
}
/* Bandeau d'accent en haut de la carte (signature navy -> cyan) */
#left-column .block-categories::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--su-navy), var(--su-cyan));
}
/* --- Titre racine "PREVENTION" + soulignement degrade lumineux --- */
#left-column .block-categories .category-top-menu > li > a.h6,
#left-column .block-categories .category-top-menu > li > a.text-uppercase {
display: block;
position: relative;
margin: 0 0 6px;
padding: 18px 20px 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--su-navy);
}
#left-column .block-categories .category-top-menu > li > a.h6::after,
#left-column .block-categories .category-top-menu > li > a.text-uppercase::after {
content: "";
position: absolute; left: 20px; bottom: 9px;
width: 42px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, var(--su-cyan), rgba(12, 187, 231, .15));
box-shadow: 0 0 8px rgba(12, 187, 231, .55);
}
/* --- Reset listes --- */
#left-column .block-categories ul { list-style: none !important; margin: 0; padding-left: 0; }
#left-column .block-categories li::before,
#left-column .block-categories li::marker { content: none !important; }
/* --- Ligne = lien (+ toggle) ; sous-menu en dessous --- */
#left-column .category-sub-menu li {
display: flex; flex-wrap: wrap; align-items: center;
position: relative; border: 0; margin: 0;
}
/* le lien s'etire (base 0) mais ne rejette jamais le toggle a la ligne */
#left-column .category-sub-menu li > a {
flex: 1 1 0; min-width: 0;
position: relative; z-index: 0;
display: block;
margin: 1px 8px;
padding: 10px 12px 10px 18px;
font-size: 13.5px; font-weight: 500;
color: #3a4467; text-decoration: none;
border-radius: 10px;
overflow: hidden; /* clippe le wipe de fond aux coins arrondis */
transition: color .22s var(--su-ease), padding-left .22s var(--su-ease);
}
/* Barre "neon" laterale : cachee (height 0), grandit au survol / actif */
#left-column .category-sub-menu li > a::before {
content: "";
position: absolute; left: 6px; top: 50%;
width: 3px; height: 0;
transform: translateY(-50%);
border-radius: 3px;
background: var(--su-cyan);
box-shadow: 0 0 8px rgba(12, 187, 231, .7);
transition: height .26s var(--su-ease);
}
/* Fond degrade qui se devoile depuis la gauche (sous le texte) */
#left-column .category-sub-menu li > a::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(90deg, var(--su-cyan-soft), rgba(12, 187, 231, 0));
opacity: 0;
transition: opacity .22s var(--su-ease);
}
/* Toggle (+/- ou chevron) : reste inline, jamais rejete sous le lien */
#left-column .category-sub-menu li > :not(a):not(ul):not(.collapse):not(.collapsing) {
flex: 0 0 auto; align-self: center;
}
#left-column .category-sub-menu li > .collapse,
#left-column .category-sub-menu li > .collapsing,
#left-column .category-sub-menu li > ul { flex: 0 0 100%; width: 100%; }
/* Niveau 0 = categories principales : plus marquees */
#left-column .category-sub-menu li[data-depth="0"] > a {
font-weight: 600; font-size: 14px; color: var(--su-navy);
}
/* HOVER : la barre grandit, le fond se devoile, le lien glisse, texte cyan */
#left-column .category-sub-menu li > a:hover { color: var(--su-cyan); padding-left: 24px; }
#left-column .category-sub-menu li > a:hover::before { height: 60%; }
#left-column .category-sub-menu li > a:hover::after { opacity: 1; }
/* BRANCHE OUVERTE (page courante) : barre pleine + halo + fond marque.
Pas de font-weight (reflow). Cible .show (BS4/5), .in (BS3), .collapsing. */
#left-column .category-sub-menu li:has(> .collapse.show) > a,
#left-column .category-sub-menu li:has(> .collapse.in) > a,
#left-column .category-sub-menu li:has(> .collapsing) > a { color: var(--su-navy); }
#left-column .category-sub-menu li:has(> .collapse.show) > a::before,
#left-column .category-sub-menu li:has(> .collapse.in) > a::before,
#left-column .category-sub-menu li:has(> .collapsing) > a::before { height: 72%; }
#left-column .category-sub-menu li:has(> .collapse.show) > a::after,
#left-column .category-sub-menu li:has(> .collapse.in) > a::after,
#left-column .category-sub-menu li:has(> .collapsing) > a::after {
opacity: 1;
background: linear-gradient(90deg, rgba(12, 187, 231, .18), rgba(12, 187, 231, 0));
}
/* --- Indentation + guide vertical de niveau (degrade cyan qui s'estompe) --- */
#left-column .collapse > ul.category-sub-menu,
#left-column .collapsing > ul.category-sub-menu {
position: relative;
margin-left: 20px;
padding-left: 6px;
border-left: 2px solid rgba(12, 187, 231, .25); /* fallback si border-image KO */
border-image: linear-gradient(180deg, rgba(12, 187, 231, .55), rgba(12, 187, 231, 0)) 1;
}
/* Sous-items compacts (depth 1,2,3) : taille + couleur degressives */
#left-column .category-sub-menu li[data-depth="1"] > a { font-size: 13.5px; font-weight: 600; color: #2c3e66; }
#left-column .category-sub-menu li[data-depth="2"] > a { font-size: 13px; color: #5a6b8c; }
#left-column .category-sub-menu li[data-depth="3"] > a { font-size: 12.5px; color: #7a88a3; }
/* --- Bouton +/- de l'accordeon (rond, remplissage cyan au survol) --- */
#left-column .navbar-toggler.collapse-icons {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; margin: 0 8px 0 2px; padding: 0;
border-radius: 50%;
background: var(--su-cyan-soft);
cursor: pointer;
transition: background .2s var(--su-ease), transform .2s var(--su-ease),
box-shadow .2s var(--su-ease);
}
#left-column .navbar-toggler.collapse-icons:hover {
background: var(--su-cyan);
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(12, 187, 231, .45);
}
#left-column .navbar-toggler.collapse-icons .material-icons {
font-size: 18px; color: var(--su-navy);
transition: color .2s var(--su-ease);
}
#left-column .navbar-toggler.collapse-icons:hover .material-icons { color: #fff; }
/* --- Chevrons (niveaux profonds) --- */
#left-column .arrows {
display: flex; align-items: center;
margin: 0 10px 0 2px; cursor: pointer;
}
#left-column .arrows .material-icons {
font-size: 18px; color: #9aa6bf;
transition: color .2s var(--su-ease), transform .25s var(--su-ease);
}
#left-column .arrows:hover .material-icons { color: var(--su-cyan); }
/* =========================================================
Fil d'Ariane (breadcrumb) — style Safe-Use
Palette : navy #17327a, cyan #0cbbe7, fond clair #f5f7fa, police Hind
Structure : .breadcrumb-wrapper > .container > nav.breadcrumb > ol > li > a > span
Maillons en "pilules", chevron cyan, hover degrade, page active mise en avant.
========================================================= */
/* Barre : transparente pour se fondre dans le header blanc, padding genereux */
.breadcrumb-wrapper {
background: transparent !important;
padding: 0;
border-bottom: none;
}
/* Padding uniquement quand le breadcrumb a du contenu */
.breadcrumb-wrapper .breadcrumb {
padding: 14px 0;
}
/* Liste flex alignee */
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb li {
display: inline-flex;
align-items: center;
margin: 0;
}
/* Maillons cliquables : contour navy discret, fond vide */
.breadcrumb li a {
display: inline-flex;
align-items: center;
padding: 5px 15px;
border-radius: 999px;
border: 1.5px solid rgba(23, 50, 122, 0.35);
background: transparent;
color: #17327a !important;
font-weight: 600;
font-size: 13px;
text-decoration: none !important;
line-height: 1.3;
transition: background .2s ease, color .2s ease, border-color .2s ease,
transform .2s ease, box-shadow .2s ease;
}
.breadcrumb li a span { color: inherit !important; }
/* Hover : fond navy plein, texte blanc */
.breadcrumb li a:hover {
background: #17327a;
border-color: #17327a;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(23, 50, 122, .2);
}
.breadcrumb li a:hover span { color: #ffffff !important; }
/* Separateur : simple chevron › cyan entre chaque maillon */
.breadcrumb ol li::after { content: "" !important; }
.breadcrumb ol li:not(:last-child)::after {
content: "\203A" !important;
color: #0cbbe7;
font-size: 20px;
font-weight: 400;
margin: 0 3px;
line-height: 1;
}
/* Page actuelle : pilule degrade navy->cyan, texte blanc, ombre cyan */
.breadcrumb ol li:last-child a,
.breadcrumb ol li:last-child > span {
background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
border: none !important;
color: #ffffff !important;
border-radius: 999px;
padding: 5px 15px;
font-weight: 700;
font-size: 13px;
display: inline-flex;
align-items: center;
line-height: 1.3;
box-shadow: 0 3px 10px rgba(12, 187, 231, .35);
}
.breadcrumb ol li:last-child a:hover {
opacity: .9;
transform: translateY(-1px);
}
/* =========================================================
Header : barre pleine largeur pour coller logo + "Appelez-nous"
a gauche et liberer de l'espace pour le menu.
Cause : .container du header = width 1140px centre (margin 378px auto),
ce qui poussait tout le contenu a 378px du bord. On passe en full-width.
Scope desktop (>=992px) pour ne pas perturber le menu mobile.
========================================================= */
@media (min-width: 992px) {
/* Containers du header en pleine largeur, petit retrait des bords */
.header-nav.tablet-h .container,
.header-top.tablet-h .container {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
/* Logo : largeur auto (image seule), calle a gauche */
#_desktop_logo {
flex: 0 0 auto !important;
width: auto !important;
padding-right: 25px;
}
#_desktop_logo a {
display: flex !important;
align-items: center;
justify-content: flex-start;
}
#_desktop_logo img {
display: block;
margin: 0 !important;
}
/* Menu : prend tout l'espace restant libere par le logo,
avec un ecart a gauche pour ne pas coller au logo */
.header-top-wrapper .position-static {
flex: 1 1 0 !important;
width: auto !important;
padding-left: 60px;
}
}
/* =========================================================
Mega-menu RDR DROGUES : recadre le panneau sous son label.
Probleme : le theme positionnait le dropdown (888px, 4 colonnes)
a gauche=156px alors que le logo finit a 245px -> il passait sous
le logo. On ancre le panneau sous son propre trigger (left:0 relatif
a la ), pour qu'il demarre apres le logo a toutes les tailles.
Cible uniquement RDR DROGUES (mm-4 / adropdown-4), les autres sont OK.
========================================================= */
@media (min-width: 1200px) {
#header .amenu-item.mm-4 {
position: relative !important;
}
#header .adropdown-4 {
left: -200px !important;
right: auto !important;
transform: none !important;
}
}
/* =========================================================
MENU CATEGORIES LATERAL (pages categorie) — style Safe-Use
---------------------------------------------------------
Objectif : sidebar callee tout a gauche sous le logo, prenant
l'espace vide ; style "accent lateral" (barre cyan + glissement
au survol) ; accordeon Bootstrap deja en place (boutons +/-).
Structure : #left-column .block-categories > ul.category-top-menu
> li > a.text-uppercase.h6 (titre racine "PREVENTION")
> li > ul.category-sub-menu
> li[data-depth] > a + .navbar-toggler(+/-) + .collapse > ul...
Palette : navy #17327a, cyan #0cbbe7.
========================================================= */
/* --- 1. Bloc centre : sidebar + produits dans un conteneur large centre.
Au lieu de coller a gauche (vide qui grandit a droite au dezoom), tout
le bloc est centre avec une largeur max -> vide equilibre des deux cotes
et STABLE a tous les niveaux de zoom.
NB : le CONTENU 1420 reste scope .page-category (les pages CMS/compte
gardent leur mise en page native). Le FIL D'ARIANE, lui, prend la meme
largeur 1420 sur TOUTES les pages -> sa position est identique partout
(comme sur les categories). Ca ne touche que la barre, pas le contenu. */
@media (min-width: 992px) {
.page-category #wrapper .container,
body:not(.page-index) .breadcrumb-wrapper .container {
width: 100% !important;
max-width: 1420px !important; /* <- largeur du bloc : + grand = produits + larges */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
/* Row en flex : sidebar fixe + produits qui remplissent le reste, avec
un ecart entre les deux. On cible UNIQUEMENT la row du layout (enfant
direct du container de #wrapper), surtout PAS toutes les .row -> la
grille produits est aussi une ".products row" et un flex large lui
cassait l'egalite de hauteur des cartes. */
.page-category #wrapper > .container > .row {
display: flex;
align-items: flex-start;
gap: 40px; /* <- ecart entre la sidebar et les produits */
}
.page-category #left-column.col-lg-3 {
flex: 0 0 290px; /* <- largeur de la sidebar */
width: 290px !important;
}
.page-category #left-column ~ .col-lg-9,
.page-category #content-wrapper.col-lg-9 {
flex: 1 1 auto; /* les produits remplissent l'espace restant */
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
}
/* =========================================================
Pages compte / CMS / marques... : TITRE de page centre pour un rendu
coherent (le theme en centrait certains et pas d'autres).
Le fil d'Ariane, lui, reste a gauche a la meme position que sur les
categories (gere dans la section 1). Le corps de texte reste a gauche.
On exclut les pages a mise en page specifique : accueil, categorie,
fiche produit, panier, commande/checkout.
========================================================= */
@media (min-width: 992px) {
body:not(.page-index):not(.page-category):not(.page-product):not(.page-cart):not(.page-checkout) #content-wrapper h1,
body:not(.page-index):not(.page-category):not(.page-product):not(.page-cart):not(.page-checkout) .page-header h1,
body:not(.page-index):not(.page-category):not(.page-product):not(.page-cart):not(.page-checkout) h1.page-heading {
text-align: center;
}
}
/* =========================================================
Page "produit non disponible" / 404 produit : champ de recherche lisible.
Le thème applique du texte blanc sur l'input (hérité du header) ce qui
le rend invisible sur le fond blanc de la page. La body a la classe
search_not_found -> on force une couleur sombre + fond blanc sur l'input.
========================================================= */
.search_not_found .search-widget form input[type="text"],
.h_not_found .search-widget form input[type="text"] {
color: #17327a !important;
background: #fff !important;
caret-color: #17327a !important;
}
.search_not_found .search-widget form input[type="text"]::placeholder,
.h_not_found .search-widget form input[type="text"]::placeholder {
color: #9aa6bf !important;
opacity: 1 !important;
}
/* =========================================================
EN-TETE CATEGORIE — editorial "split fondu" (reconstruit en JS)
---------------------------------------------------------
Probleme du theme : la structure HTML change selon la description.
- SANS description : h1 + div.category-cover > img
- AVEC description : h1 + div#category-description > (img + p)
-> impossible a styliser proprement en CSS seul.
Solution : le JS (safeUseBuildCategoryHero) lit titre + description +
image + nb produits, et reconstruit une structure STABLE :
.block-category
> .su-cat-hero (.su-has-image | .su-no-image)
> .su-cat-hero-media > img (image de fond, fondue)
> .su-cat-hero-body
> .su-cat-hero-title (h1)
> .su-cat-hero-count
> .su-cat-hero-desc
Design : leger, fond clair (pas de bloc bleu plein). Le texte est a
gauche sur blanc (lisible), l'image se fond a droite via un masque
degrade blanc. Filet cyan neon sous le titre (coherent sidebar).
Marche dans les 4 cas : avec/sans image x avec/sans description.
========================================================= */
/* Reset du bloc theme : on enleve la carte native, le hero gere tout */
.page-category .block-category {
position: relative;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 22px !important;
min-height: 0 !important;
overflow: visible !important;
}
/* --- ANTI-FLASH (FOUC) au chargement ---
Le hero de categorie est reconstruit par le JS (safeUseBuildCategoryHero),
qui pose data-su-hero sur .block-category une fois fini. AVANT que le JS ne
tourne, le theme affiche l'image de couverture BRUTE en pleine largeur ->
un gros flash d'image geante pendant une fraction de seconde (devenu tres
visible depuis qu'on a agrandi category_default a 1200x600).
FIX : on masque l'image native TANT QUE le hero custom n'est pas construit.
Des que le JS a pose data-su-hero, ce selecteur ne matche plus -> image du
hero affichee normalement. On reserve aussi la hauteur du hero (min-height)
pour eviter que la page ne "saute" quand le JS remplace le contenu.
FALLBACK sans JS : seule l'image de banniere est masquee ; titre, description
et produits restent affiches normalement. */
.page-category .block-category:not([data-su-hero]) {
min-height: 180px !important;
overflow: hidden !important;
}
.page-category .block-category:not([data-su-hero]) img {
display: none !important;
}
/* --- Carte hero : texte en flux (dicte la hauteur) + image ABSOLUE a droite ---
POINT CLE : l'image est position:absolute pour qu'elle NE DICTE PAS la
hauteur du bloc. Sinon une image portrait (141x180) etiree sur une colonne
large rendait le hero enorme (~500px) et poussait les produits hors ecran.
Ici la hauteur du hero = hauteur du TEXTE (court) -> compact. L'image remplit
la colonne droite a cette hauteur (object-fit: cover). Le texte (z-index 2,
max-width) reste a gauche, jamais sous l'image. */
.page-category .su-cat-hero {
position: relative;
display: flex;
align-items: center; /* centre le texte verticalement dans la hauteur dispo */
overflow: hidden;
border-radius: 16px;
border: 1px solid #eef1f7;
border-bottom: 3px solid #0cbbe7;
box-shadow: 0 10px 28px rgba(23, 50, 122, .09);
background: #fff;
}
/* Avec image : hauteur mini pour que l'image respire, meme sans description.
(Sans image ET sans description -> pas de min-height -> reste compact.) */
.page-category .su-cat-hero.su-has-image {
min-height: 180px;
}
/* Corps texte — gauche, flex-item (donne sa hauteur au hero, centre vertical) */
.page-category .su-cat-hero-body {
position: relative;
z-index: 2;
flex: 1 1 auto;
max-width: 60%;
padding: 18px 30px;
}
/* Titre */
.page-category .su-cat-hero-title {
margin: 0 !important;
padding: 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: #17327a !important;
letter-spacing: .01em;
}
/* filet cyan neon sous le titre */
.page-category .su-cat-hero-title::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: 8px;
border-radius: 3px;
background: linear-gradient(90deg, #0cbbe7, rgba(12, 187, 231, .15));
box-shadow: 0 0 8px rgba(12, 187, 231, .5);
}
/* Compteur produits */
.page-category .su-cat-hero-count {
display: inline-block;
margin-top: 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #0cbbe7;
}
/* Description */
.page-category .su-cat-hero-desc {
margin-top: 8px;
color: #4a5a7e;
font-size: 13.5px;
line-height: 1.55;
}
.page-category .su-cat-hero-desc p { margin: 0 0 4px; }
.page-category .su-cat-hero-desc p:last-child { margin-bottom: 0; }
/* Image — colonne droite ABSOLUE (ne dicte pas la hauteur du hero) */
.page-category .su-cat-hero-media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 42%;
z-index: 1;
overflow: hidden;
}
.page-category .su-cat-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(1.1) brightness(.97);
}
/* Fondu blanc sur le bord gauche de l'image (transition douce avec le texte) */
.page-category .su-cat-hero-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 46%);
}
/* Sans image : fond leger + accent lateral, texte pleine largeur */
.page-category .su-cat-hero.su-no-image {
background: linear-gradient(118deg, #f4f8fd 0%, #ffffff 70%);
border-left: 4px solid #0cbbe7;
}
.page-category .su-cat-hero.su-no-image .su-cat-hero-body {
max-width: 100%;
padding-right: 40px;
}
/* =========================================================
Image produit (pages categorie) : remplit toute la largeur de la carte.
Le theme fixe l'image a sa taille generee (ex: width:398px), donc des que
la carte est plus large (suite a notre mise en page elargie) l'image laisse
du vide autour. On force width:100% pour qu'elle suive la carte.
========================================================= */
.page-category #js-product-list .product-miniature .thumbnail-container img,
.page-category #js-product-list .product-miniature .thumbnail img {
width: 100% !important;
height: auto !important;
}
/* ============================================================
Zones D'AMELIORATIONS VISUELLES
Palette : navy #17327a / #203472, cyan #0cbbe7.
============================================================ */
/* --- ZONE 12 : defilement fluide --- */
html { scroll-behavior: smooth; }
/* --- ZONE 2 : bouton "retour en haut" aux couleurs Safe-Use --- */
#scrolltopbtn {
background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
border-color: transparent !important;
box-shadow: 0 6px 18px rgba(12, 187, 231, .45) !important;
transition: transform .2s ease, box-shadow .2s ease !important;
}
#scrolltopbtn:hover {
opacity: 1 !important;
transform: translateY(-3px) scale(1.05) !important;
box-shadow: 0 10px 26px rgba(12, 187, 231, .55) !important;
}
/* --- ZONE 1 : cartes produit, elevation au survol (catalogue) --- */
.page-category .product-miniature {
border-radius: 14px;
transition: transform .28s cubic-bezier(.4,0,.2,1),
box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.page-category .product-miniature:hover {
transform: translateY(-6px);
box-shadow: 0 16px 34px rgba(23, 50, 122, .14);
}
/* --- ZONE 4 : pagination en pastilles (markup reel : ul.page-list > li > a) --- */
.page-category .pagination .page-list li a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px; padding: 0 12px; margin: 0 2px;
border: 1px solid #e7ebf3; border-radius: 10px;
color: #17327a; font-weight: 600; text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.page-category .pagination .page-list li a:hover {
background: rgba(12, 187, 231, .10); border-color: #0cbbe7; color: #17327a; transform: translateY(-1px);
}
.page-category .pagination .page-list li.current a,
.page-category .pagination .page-list li.current span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px; padding: 0 12px; margin: 0 2px; border-radius: 10px;
background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%);
border-color: transparent; color: #fff; font-weight: 700;
box-shadow: 0 4px 12px rgba(12, 187, 231, .35);
}
/* --- ZONE 5a : bloc reassurance en cartes (version douce, fond teinte) --- */
.anthemeblocks-reassurance-item {
background: #f4f8fd !important;
border: 1px solid #e6ecf6 !important;
border-radius: 14px !important;
box-shadow: 0 6px 20px rgba(23, 50, 122, .06) !important;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
padding-top: 28px !important; /* +12px de hauteur (haut/bas) -> cartes plus aerees */
padding-bottom: 28px !important;
}
.anthemeblocks-reassurance-item:hover {
background: #fff !important;
transform: translateY(-4px) !important;
box-shadow: 0 14px 32px rgba(23, 50, 122, .13) !important;
}
.anthemeblocks-reassurance-item h6 { color: #17327a !important; }
/* --- Animation d'apparition en cascade au scroll (7 juillet) ---
PROGRESSIVE ENHANCEMENT : la classe .su-anim-ready n'est ajoutee QUE par le
JS (safeuse-custom-prestashop.js). Sans JS, cette regle ne s'applique
jamais -> les cartes restent visibles normalement, jamais invisibles pour
de bon. Le delai de cascade (transition-delay) est pose carte par carte
par le JS lui-meme, pas ici en nth-child, pour ne pas dependre de la
structure DOM exacte generee par le theme. */
.anthemeblocks-reassurance.su-anim-ready .anthemeblocks-reassurance-item {
opacity: 0;
transform: translateY(18px);
transition: opacity .55s ease, transform .55s ease;
}
.anthemeblocks-reassurance.su-anim-ready .anthemeblocks-reassurance-item.su-inview {
opacity: 1;
transform: translateY(0);
}
/* Accessibilite : utilisateurs qui demandent moins d'animations -> apparition instantanee */
@media (prefers-reduced-motion: reduce) {
.anthemeblocks-reassurance.su-anim-ready .anthemeblocks-reassurance-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* --- Bande Reassurance alignee sur la carte "Nos marques" --- */
.anthemeblocks-reassurance .container {
position: relative;
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 160px);
max-width: 1440px;
margin-left: 0 !important; /* annule le margin:auto bootstrap -> evite le double-decalage avec left:50% */
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.anthemeblocks-reassurance .canthemeblocks-reassurance-abs {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Mobile / tablette : on annule la sortie de conteneur */
@media (max-width: 991px) {
.anthemeblocks-reassurance .container {
position: static;
left: auto;
transform: none;
width: auto;
max-width: none;
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* --- ZONE 6 : onglet actif de la fiche produit, filet cyan --- */
.tabs .nav-tabs .nav-link.active,
.anthemeblocks-producttabs .nav-tabs .nav-link.active {
color: #0cbbe7 !important; border-bottom: 3px solid #0cbbe7 !important;
}
.tabs .nav-tabs .nav-link:hover,
.anthemeblocks-producttabs .nav-tabs .nav-link:hover {
color: #17327a !important; border-bottom: 2px solid #17327a !important;
}
/* --- ZONE 10 : focus cyan sur les champs de formulaire --- */
.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus {
outline: none !important; border-color: #0cbbe7 !important;
box-shadow: 0 0 0 3px rgba(12, 187, 231, .18) !important;
}
/* HEADER — MEGA-MENU ameliorer */
/* --- 1. Entrees de menu : soulignement cyan anime au survol ---
Le trait est porte par le BACKGROUND du lien (et NON par ::after) : ca
libere ::after pour que le losange droit du theme (⬥) reapparaisse.
Il est cale a 24px a gauche (sous la 1re lettre) et rentre a 30px a droite
pour finir pile a la derniere lettre (la chasse des majuscules laisse un
petit blanc a droite -> 30px > 24px corrige le depassement constate).
Valeurs empiriques, ajustables comme le -30px du dropdown compte. */
#amegamenu .anav-top > .amenu-item > .amenu-link {
transition: color .22s ease, background-size .26s cubic-bezier(.4, 0, .2, 1);
background-image: linear-gradient(90deg, #17327a, #0cbbe7);
background-repeat: no-repeat;
background-position: left 24px bottom 14px; /* depart sous la 1re lettre */
background-size: 0 2px; /* invisible au repos */
}
#amegamenu .anav-top > .amenu-item:hover > .amenu-link,
#amegamenu .anav-top > .amenu-item.plex:hover > .amenu-link {
color: #17327a;
background-size: calc(100% - 48px) 2px; /* 24px gauche + 24px droite */
}
/* --- 2. Panneau deroulant : carte premium (radius + ombre + filet cyan) ---
PAS de transform sur .adropdown (casserait le positionnement). On arrondit
le bas, on affine l'ombre, et on ajoute un filet cyan en haut via le
.dropdown-bgimage (deja present, z-index:-1) -> aucun nouvel element. */
#header .amenu-item .adropdown {
border-radius: 0 0 14px 14px !important;
box-shadow: 0 18px 40px rgba(23, 50, 122, .16) !important;
border-top: 3px solid #0cbbe7;
padding: 6px 6px 10px !important;
}
/* Animation d'apparition : le CONTENU glisse vers le bas (pas le conteneur).
Cible les colonnes directes -> evite le double-decalage du panneau
"S'informer" qui imbrique un .dropdown-content dans .html-item.typo. */
#header .amenu-item .adropdown > .dropdown-content {
transform: translateY(-8px);
opacity: 0;
transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
#header .amenu-item.plex:hover .adropdown > .dropdown-content {
transform: translateY(0);
opacity: 1;
}
/* --- 3. Titre de rubrique (level-1) : navy gras + accent cyan --- */
#header .adropdown .category-item.level-1 > .category-title {
margin: 2px 0 4px !important;
padding: 0 14px 6px !important;
position: relative;
}
#header .adropdown .category-item.level-1 > .category-title a,
#header .adropdown .category-item.level-1 > .category-title span {
color: #17327a !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: .01em;
}
#header .adropdown .category-item.level-1 > .category-title::after {
content: "";
position: absolute; left: 14px; bottom: 0;
width: 28px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, #0cbbe7, rgba(12, 187, 231, .2));
}
/* --- 4. Sous-liens (level-2) : pilule qui s'eclaire + glisse au survol --- */
#header .adropdown .category-item.level-2 > .category-title {
margin: 0 !important;
}
#header .adropdown .category-item.level-2 > .category-title a {
display: block;
padding: 4px 12px !important;
margin: 1px 6px;
border-radius: 7px;
color: #4a5a7e !important;
font-size: 13.5px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
#header .adropdown .category-item.level-2 > .category-title a:hover {
background: rgba(12, 187, 231, .10);
color: #17327a !important;
padding-left: 20px !important;
}
/* --- 5. Champ de recherche header : moderne, focus cyan --- */
#header #search_widget form {
position: relative;
}
#header #search_widget input[type="text"] {
border: 1.5px solid #e3e8f1 !important;
border-radius: 999px !important;
background: #fff !important;
color: #1a2238 !important; /* texte sombre : sinon blanc herite de la barre navy -> invisible */
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#header #search_widget input[type="text"]::placeholder {
color: #8a94a6 !important;
opacity: 1;
}
#header #search_widget input[type="text"]:focus {
outline: none !important;
border-color: #0cbbe7 !important;
box-shadow: 0 0 0 3px rgba(12, 187, 231, .15) !important;
background: #fff !important;
color: #1a2238 !important;
}
/* Suggestions autocomplete (ui-autocomplete) : texte sombre lisible */
#header #search_widget .ui-autocomplete a,
#header #search_widget .ui-autocomplete li {
color: #1a2238 !important;
}
/* HEADER — BARRE DU HAUT NAVY : harmonisation icones */
/* Ecarts reguliers + separateurs verticaux */
#header .header-nav .right-nav > .an_wishlist-nav-link,
#header .header-nav .right-nav > #_desktop_user_info,
#header .header-nav .right-nav > #_desktop_cart {
position: relative; margin-left: 18px !important; padding-left: 18px;
}
#header .header-nav .right-nav > .an_wishlist-nav-link::before,
#header .header-nav .right-nav > #_desktop_user_info::before,
#header .header-nav .right-nav > #_desktop_cart::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 22px; background: rgba(255,255,255,.22);
}
/* Survol cyan uniforme */
#header .header-nav .right-nav .an_wishlist-nav-link a,
#header .header-nav .right-nav .user-info .account,
#header .header-nav .right-nav .signin .expand-more,
#header .header-nav .right-nav #_desktop_cart .blockcart-link { transition: color .2s ease; }
#header .header-nav .right-nav .an_wishlist-nav-link a:hover,
#header .header-nav .right-nav .user-info .account:hover,
#header .header-nav .right-nav .signin .btn-unstyle:hover .expand-more,
#header .header-nav .right-nav #_desktop_cart .blockcart-link:hover .cart-products-text { color: #0cbbe7 !important; }
#header .header-nav .right-nav #_desktop_cart .blockcart-link:hover svg { fill: #0cbbe7 !important; }
/* Icone recherche : zoom + cyan au survol */
#header .header-nav .right-nav .search-icon.open-icon { cursor: pointer; transition: transform .2s ease; }
#header .header-nav .right-nav .search-icon.open-icon:hover { transform: scale(1.12); }
#header .header-nav .right-nav .search-icon.open-icon:hover .open-icon-path { fill: #0cbbe7; }
/* Compteurs (wishlist + panier) en accent cyan */
#header .header-nav .right-nav .wishlist-nav-count { color: #0cbbe7 !important; font-weight: 700; }
#header .header-nav .right-nav #_desktop_user_info + #_desktop_cart .cart-products-count { color: #0cbbe7 !important; font-weight: 700; }
/* --- Menu deroulant du compte (Mon profil / Deconnexion) : amelioration --- */
#header .header-nav .signin .dropdown-menu {
border: none !important;
border-radius: 12px !important;
box-shadow: 0 14px 34px rgba(23, 50, 122, .18) !important;
padding: 8px !important;
margin-top: 10px !important;
min-width: 180px;
/* aligne le menu sur le bord DROIT du bouton */
left: auto !important;
right: -30px !important;
}
/* Menu deroulant du compte : carte premium */
#header .header-nav .signin .dropdown-menu {
border: none !important; border-radius: 12px !important;
box-shadow: 0 14px 34px rgba(23,50,122,.18) !important;
padding: 8px !important; margin-top: 10px !important; min-width: 180px;
}
#header .header-nav .signin .dropdown-menu li a {
border-radius: 8px; padding: 9px 14px !important; color: #3a4467 !important;
font-size: 13.5px; transition: background .18s ease, color .18s ease;
}
#header .header-nav .signin .dropdown-menu li a:hover {
background: rgba(12,187,231,.10); color: #17327a !important;
}
/* PAGE CATEGORIE — BARRE D'OUTILS + MINIATURES ameliorer */
/* 1. Bouton de tri "Pertinence" : pilule navy, cyan au survol/ouvert */
.products-sort-order .select-title {
border: 1.5px solid #e3e8f1 !important; border-radius: 999px !important;
padding: .4rem 1rem !important; color: #17327a !important; font-weight: 600 !important;
transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.products-sort-order.dropdown:hover .select-title,
.products-sort-order .select-title:hover,
.products-sort-order.show .select-title {
border-color: #0cbbe7 !important; color: #0cbbe7 !important;
box-shadow: 0 2px 10px rgba(12,187,231,.18) !important;
}
/* Menu deroulant du tri : carte premium */
.products-sort-order .dropdown-menu {
background: #fff !important; border: none !important; border-radius: 12px !important;
box-shadow: 0 14px 34px rgba(23,50,122,.16) !important; padding: 8px !important; margin-top: 8px !important;
}
.products-sort-order .dropdown-menu .select-list {
border-radius: 8px; padding: 8px 14px !important; color: #3a4467 !important; font-size: 13.5px;
transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.products-sort-order .dropdown-menu .select-list:hover {
background: rgba(12,187,231,.10) !important; color: #17327a !important; padding-left: 18px !important;
}
.products-sort-order .dropdown-menu .select-list.current {
background: linear-gradient(135deg, #17327a, #0cbbe7) !important; color: #fff !important; font-weight: 600;
}
/* 2. Boutons de vue (grille/liste) : pastille cyan sur l'actif */
.collection-view-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; margin-right: 6px !important; border-radius: 9px;
transition: background .2s ease, opacity .2s ease;
}
.collection-view-btn.active { background: rgba(12,187,231,.14); opacity: 1; }
.collection-view-btn:hover { background: rgba(12,187,231,.08); }
/* Masque la vue numero 4 ( inutile , trop grand) */
.collection-view-btn[data-xl="12"] { display: none !important; }
/* 3. Textes de la barre : navy doux */
.products-selection .total-products p,
.showing .showing-text { color: #5a6b8c !important; font-weight: 500; }
.products-selection .sort-by { color: #5a6b8c !important; font-weight: 600; }
/* 4. Coeur wishlist : navy au repos, cyan en actif (au lieu du vert) */
.product-miniature .an_wishlist-icon path { fill: #17327a; }
.product-miniature .an_wishlist-icon-active path { fill: #0cbbe7 !important; }
/* 5. Quick-view (loupe) : cyan + zoom */
.product-miniature .quick-view { color: #17327a; transition: color .2s ease, transform .2s ease; }
.product-miniature .quick-view:hover { color: #0cbbe7; transform: scale(1.12); }
/* 6. Ajout panier sur la miniature : gradient premium + qty affinee */
.product-miniature .an_productattributes-qty-add .btn-primary {
background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
border: none !important; border-radius: 10px !important;
transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
.product-miniature .an_productattributes-qty-add .btn-primary:hover {
background: linear-gradient(135deg, #0f2260 0%, #0aabe0 100%) !important;
box-shadow: 0 6px 16px rgba(12,187,231,.35) !important; transform: translateY(-1px);
}
.product-miniature .an_productattributes-qty {
border: 1.5px solid #e3e8f1 !important; border-radius: 8px !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
.product-miniature .an_productattributes-qty:focus {
border-color: #0cbbe7 !important; box-shadow: 0 0 0 3px rgba(12,187,231,.15) !important; outline: none !important;
}
/* =========================================================
FICHE PRODUIT — amelioration
========================================================= */
/* --- 1. Image principale : cadre doux + ombre + zoom au survol --- */
#main .product-cover {
border: 1px solid #eef1f7;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(23, 50, 122, .08);
background: #fff;
}
#main .product-cover img.js-qv-product-cover {
border-radius: 16px;
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
#main .product-cover:hover img.js-qv-product-cover {
transform: scale(1.04);
}
/* Pastille loupe (zoom-in) en cyan */
#main .product-cover #zoom-in-slider .zoom-in {
color: #17327a;
transition: color .2s ease;
}
#main .product-cover:hover #zoom-in-slider .zoom-in {
color: #0cbbe7;
}
/* --- 2. Miniatures : bordure cyan sur la vignette active + survol --- */
#main .js-qv-mask .thumb-container .thumb {
border: 2px solid #eef1f7 !important;
border-radius: 10px;
transition: border-color .2s ease, transform .2s ease;
}
#main .js-qv-mask .thumb-container .thumb:hover {
border-color: rgba(12, 187, 231, .5) !important;
transform: translateY(-2px);
}
#main .js-qv-mask .thumb-container .thumb.selected {
border-color: #0cbbe7 !important;
}
/* --- 3. Coeur wishlist fiche produit : navy/cyan (au lieu du vert) --- */
#main .an_wishlist-mini .an_wishlist-icon path { fill: #17327a; }
#main .an_wishlist-mini .an_wishlist-icon-active path { fill: #0cbbe7 !important; }
#main .an_wishlist-mini-count {
background: #17327a !important;
color: #fff !important;
}
/* --- 4. Titre H1 : espacement + filet cyan dessous --- */
#main .col-md-7 > h1.h1[itemprop="name"] {
position: relative;
padding-bottom: 14px;
margin-bottom: 16px;
}
#main .col-md-7 > h1.h1[itemprop="name"]::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 54px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, #17327a, #0cbbe7);
}
/* --- 5. Prix : plus grand, navy, dominant + label TTC en pastille --- */
#main .product-prices .current-price span[itemprop="price"] {
font-size: 21px !important;
font-weight: 800 !important;
color: #17327a !important;
line-height: 1.1;
}
#main .tax-shipping-delivery-label {
display: inline-block;
margin-top: 6px;
padding: 2px 10px;
border-radius: 999px;
background: rgba(12, 187, 231, .10);
color: #2c7d99 !important;
font-size: 11px !important;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
/* --- 6. Selecteur de variante (Conditionnement) : pilule premium --- */
#main .product-variants .form-control-select {
border: 1.5px solid #e3e8f1 !important;
border-radius: 12px !important;
padding: .55rem 2.2rem .55rem 1rem !important;
height: auto !important;
color: #17327a !important;
font-weight: 600 !important;
background-position: right 1rem center;
transition: border-color .2s ease, box-shadow .2s ease;
}
#main .product-variants .form-control-select:focus {
border-color: #0cbbe7 !important;
box-shadow: 0 0 0 3px rgba(12, 187, 231, .15) !important;
outline: none !important;
}
/* --- 7. Quantite (touchspin) : champ arrondi + boutons +/- cyan --- */
/* Le conteneur passe en flex pour que l'input et la colonne de boutons
aient EXACTEMENT la meme hauteur (sinon espace vide sous l'input). */
#main .product-quantity .bootstrap-touchspin {
display: inline-flex !important;
align-items: stretch !important;
}
#main .product-quantity #quantity_wanted {
border: 1.5px solid #e3e8f1 !important;
border-radius: 10px 0 0 10px !important;
color: #17327a !important;
font-weight: 600;
height: auto !important;
align-self: stretch !important;
}
#main .product-quantity .input-group-btn-vertical {
display: flex !important;
flex-direction: column !important;
}
#main .product-quantity .input-group-btn-vertical .btn {
flex: 1 1 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#main .product-quantity .bootstrap-touchspin-up,
#main .product-quantity .bootstrap-touchspin-down {
border: 1.5px solid #e3e8f1 !important;
background: #f7f9fc !important;
color: #17327a !important;
transition: background .18s ease, color .18s ease;
}
#main .product-quantity .bootstrap-touchspin-up:hover,
#main .product-quantity .bootstrap-touchspin-down:hover {
background: rgba(12, 187, 231, .12) !important;
color: #0cbbe7 !important;
}
/* --- 8. Bouton "Ajouter au panier" : gradient premium, grand, anime --- */
#main .product-add-to-cart .add-to-cart.btn-primary {
background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
border: none !important;
border-radius: 12px !important;
padding: .85rem 1.6rem !important;
font-weight: 700 !important;
letter-spacing: .02em;
box-shadow: 0 8px 20px rgba(12, 187, 231, .25) !important;
transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
#main .product-add-to-cart .add-to-cart.btn-primary:hover {
background: linear-gradient(135deg, #0f2260 0%, #0aabe0 100%) !important;
box-shadow: 0 12px 28px rgba(12, 187, 231, .38) !important;
transform: translateY(-2px);
}
#main .product-add-to-cart .add-to-cart.btn-primary:active {
transform: translateY(0);
}
/* --- 9. Disponibilite "En Stock" : pastille verte avec point --- */
#main #product-availability {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: #2e7d32 !important;
}
#main #product-availability .product-available {
color: #2e7d32 !important;
}
/* --- 10. Onglets (Description / Details) : soulignement cyan actif --- */
#main .tabs .nav-tabs {
border-bottom: 2px solid #eef1f7 !important;
gap: 4px;
}
#main .tabs .nav-tabs .nav-link {
border: none !important;
color: #5a6b8c !important;
font-weight: 600;
padding: 12px 18px !important;
position: relative;
background: transparent !important;
transition: color .2s ease;
}
#main .tabs .nav-tabs .nav-link::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: -2px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, #17327a, #0cbbe7);
transform: scaleX(0);
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
#main .tabs .nav-tabs .nav-link:hover {
color: #17327a !important;
}
#main .tabs .nav-tabs .nav-link.active {
color: #17327a !important;
}
#main .tabs .nav-tabs .nav-link.active::after {
transform: scaleX(1);
}
/* --- 11. Fiche technique : 2 cellules pleines, pas de contour vide --- */
/* Pas de bordure exterieure (elle laissait un liseré blanc autour du
fond gris). Les 2 cellules sont remplies a fond, marges a zero. */
#main .product-features .data-sheet {
border-radius: 10px;
overflow: hidden;
border: none !important;
}
#main .product-features .data-sheet dt.name,
#main .product-features .data-sheet dd.value {
margin: 0 !important;
padding: 13px 16px !important;
border: none !important;
}
#main .product-features .data-sheet dt.name {
background: #eef3fb !important;
color: #17327a !important;
font-weight: 700;
}
#main .product-features .data-sheet dd.value {
background: #f7f9fc !important;
color: #3a4467 !important;
}
#main .product-features h3.h6 {
color: #17327a !important;
font-weight: 700;
}
/* --- 12. Reference produit : carte avec accent cyan a gauche --- */
#main .product-reference {
display: inline-flex;
align-items: baseline;
gap: 10px;
border-left: 3px solid #0cbbe7;
background: #f6f9fd;
border-radius: 0 8px 8px 0;
padding: 10px 18px;
margin-bottom: 16px;
}
#main .product-reference .label {
color: #8a96ad !important;
font-weight: 600;
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0 !important;
padding: 0 !important;
}
#main .product-reference span[itemprop="sku"] {
color: #17327a !important;
font-weight: 700;
font-size: 15px !important;
letter-spacing: .03em;
}
/* --- 13. Logo marque (fabricant) : cadre doux centre --- */
#main .product-manufacturer .manufacturer-logo {
border: 1px solid #eef1f7 !important;
border-radius: 10px;
padding: 6px;
background: #fff;
transition: box-shadow .2s ease, transform .2s ease;
}
#main .product-manufacturer .manufacturer-logo:hover {
box-shadow: 0 6px 16px rgba(23, 50, 122, .12);
transform: translateY(-2px);
}
/* --- 14. "Produits associes" : titre avec filet cyan --- */
#main .product-accessories > h3.h5 {
position: relative;
padding-bottom: 12px;
margin-bottom: 22px;
color: #17327a !important;
}
#main .product-accessories > h3.h5::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, #17327a, #0cbbe7);
}
/* --- 15. Produits associes : hauteur egale + bas des cartes aligne --- */
.product-accessories .products.owl-carousel .owl-stage {
display: flex !important;
align-items: stretch !important;
}
.product-accessories .products:not(.owl-carousel) {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
.product-accessories .owl-item {
display: flex !important;
height: auto !important;
}
.product-accessories .owl-item > article.product-miniature,
.product-accessories .products:not(.owl-carousel) article.product-miniature {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
}
/* Neutralise le margin-bottom inline (espace fantome sous l'image, devenu
inutile puisque la description repasse en flux normal juste en dessous). */
.product-accessories .thumbnail-container {
margin-bottom: 0 !important;
}
/* Description en flux normal + colonne flex qui absorbe l'espace disponible */
.product-accessories .product-description {
position: static !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
.product-accessories .product-title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 36px !important;
max-height: 36px !important;
}
/* CLE DE L'ALIGNEMENT (confirme par mesures console) : images + liens image
+ titres sont DEJA alignes (meme position Y sur toutes les cartes). Le SEUL
element variable est le TEXTE de description (2 a 4 lignes selon le produit)
qui pousse le prix + bouton plus ou moins bas. On lui reserve une hauteur
UNIFORME (min-height) et on plafonne a 4 lignes -> toutes les descriptions
occupent exactement la meme place -> prix ET boutons alignes partout.
80px ~= 4 lignes ; ajuster si la police change. */
.product-accessories .an_short_description {
display: -webkit-box !important;
-webkit-line-clamp: 5 !important;
line-clamp: 5 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
/* min-height = les descriptions COURTES s'agrandissent (alignement) ;
max-height IDENTIQUE = les LONGUES sont coupees net (pas de ligne
qui deborde). Les 2 a la meme valeur -> toutes exactement 92px (5 lignes).
Si une description est ENCORE coupee -> monter clamp a 6 + les 2 hauteurs
a ~110px ; si trop de blanc sous les courtes -> baisser clamp a 4 + 72px. */
min-height: 92px !important;
max-height: 92px !important;
margin-bottom: 12px !important;
}
/* Bloc prix + variante + bouton pousse tout en bas -> boutons alignes */
.product-accessories .product-price-and-shipping {
margin-top: auto !important;
}
/* =========================================================
FOOTER DESKTOP — amelioration ( filet cyan , liens des listes et bloc nous contacter )
========================================================= */
@media (min-width: 768px) {
/* --- Titres de colonnes : filet cyan dessous (comme .su-title) --- */
#footer .footer-container h3.h3.hidden-sm-down,
#footer .footer-container h3.myaccount-title,
#footer .footer-container .block-contact-title {
position: relative !important;
padding-bottom: 12px !important;
margin-bottom: 18px !important;
color: #ffffff !important;
}
#footer .footer-container h3.myaccount-title a {
color: #ffffff !important;
}
#footer .footer-container h3.h3.hidden-sm-down::after,
#footer .footer-container h3.myaccount-title::after,
#footer .footer-container .block-contact-title::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 42px; height: 3px;
border-radius: 2px;
background: #0cbbe7;
}
/* --- Liens des listes : tiret cyan + glissement (option B) --- */
#footer .footer-container #footer_sub_menu_8086 li a,
#footer .footer-container .account-list li a {
position: relative;
display: inline-block;
color: #ffffff !important;
text-decoration: none !important;
padding-left: 0;
transition: color .22s ease, padding-left .22s ease;
}
#footer .footer-container #footer_sub_menu_8086 li a::before,
#footer .footer-container .account-list li a::before {
content: "";
position: absolute;
left: 0; top: .65em;
width: 0; height: 2px;
border-radius: 2px;
background: #0cbbe7;
transition: width .22s ease;
}
#footer .footer-container #footer_sub_menu_8086 li a:hover,
#footer .footer-container .account-list li a:hover {
color: #ffffff !important;
padding-left: 18px;
}
#footer .footer-container #footer_sub_menu_8086 li a:hover::before,
#footer .footer-container .account-list li a:hover::before {
width: 12px;
}
/* --- Bloc "Nous contacter" : lien telephone en cyan au survol --- */
#footer .footer-container .block-contact .contact-item a {
color: #ffffff !important;
text-decoration: none !important;
transition: color .22s ease;
}
#footer .footer-container .block-contact .contact-item a:hover {
color: #0cbbe7 !important;
}
}
/* =========================================================
PAGE D'ACCUEIL — Home slider (carrousel principal)
---------------------------------------------------------
Le theme dessine les dots en noir (rond plein actif).
On les passe en blanc translucide + pilule CYAN allongee
pour l'actif (visible sur les photos, identite navy/cyan).
Bonus : fleches prev/next en cyan au survol.
========================================================= */
#anthemeblocks-homeslider_1 .owl-dots .owl-dot span,
.anthemeblocks-homeslider .owl-dots .owl-dot span {
width: 11px !important;
height: 11px !important;
margin: 5px 7px !important;
background: rgba(255, 255, 255, .55) !important;
border: none !important;
border-radius: 50% !important;
transform: scale(1) !important;
transition: width .3s ease, background .3s ease, border-radius .3s ease !important;
}
#anthemeblocks-homeslider_1 .owl-dots .owl-dot:hover span,
.anthemeblocks-homeslider .owl-dots .owl-dot:hover span {
background: #ffffff !important;
border: none !important;
transform: scale(1) !important;
}
#anthemeblocks-homeslider_1 .owl-dots .owl-dot.active span,
.anthemeblocks-homeslider .owl-dots .owl-dot.active span {
width: 30px !important; /* pilule allongee */
background: #0cbbe7 !important; /* cyan */
border: none !important;
border-radius: 6px !important;
transform: scale(1) !important;
}
/* Fleches hero : rond blanc + icone navy (visibles sur toutes les slides,
meme la slide claire ou l'icone gris du theme disparaissait). */
.anthemeblocks-homeslider .owl-prev,
.anthemeblocks-homeslider .owl-next {
width: 46px !important; height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, .9) !important;
border-radius: 50% !important;
box-shadow: 0 4px 14px rgba(23, 50, 122, .2) !important;
}
.anthemeblocks-homeslider .owl-prev i,
.anthemeblocks-homeslider .owl-next i {
color: #17327a !important;
}
.anthemeblocks-homeslider .owl-prev:hover,
.anthemeblocks-homeslider .owl-next:hover {
background: #ffffff !important;
}
.anthemeblocks-homeslider .owl-prev:hover i,
.anthemeblocks-homeslider .owl-next:hover i {
color: #0cbbe7 !important;
}
/* Bouton "En savoir plus" du slider : meme gradient navy->cyan que le
bouton "Ajouter au panier" (l'ancien cyan clair disparaissait sur la
slide au fond clair). */
.anthemeblocks-homeslider .btn-box .btn,
.anthemeblocks-homeslider .btn-box .btn-primary {
background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
border: none !important;
color: #ffffff !important;
transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
.anthemeblocks-homeslider .btn-box .btn:hover,
.anthemeblocks-homeslider .btn-box .btn-primary:hover {
background: linear-gradient(135deg, #0f2260 0%, #0aabe0 100%) !important;
box-shadow: 0 8px 20px rgba(12, 187, 231, .35) !important;
transform: translateY(-2px);
}
/* =========================================================
PAGE D'ACCUEIL — Carrousel "Produits phares" (Product Blocks Slider)
---------------------------------------------------------
Le theme place les fleches en haut (top: -90px, a cote du titre).
On les remet sur les COTES, centrees au niveau de l'image produit
(top: 130px ~= moitie de l'image de 253px). Ronds blancs, icone
navy -> cyan au survol. Sur mobile on les masque (swipe tactile).
Dots repris en cyan, coherents avec le slider hero.
========================================================= */
.js-anthemeblocks-product-block-slider {
position: relative; /* ancre les fleches absolues */
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next {
position: absolute !important;
top: 130px !important; /* ~ centre de l'image produit (tunable) */
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 46px; height: 46px;
display: flex !important;
align-items: center;
justify-content: center;
background: #ffffff !important;
border: 1px solid rgba(23, 50, 122, .15) !important;
border-radius: 50% !important;
box-shadow: 0 4px 14px rgba(23, 50, 122, .12) !important;
z-index: 5;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev {
left: -55px !important; right: auto !important; /* hors des cartes, dans la marge */
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-next {
right: -55px !important; left: auto !important;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev:hover,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next:hover {
border-color: #0cbbe7 !important;
box-shadow: 0 6px 18px rgba(12, 187, 231, .28) !important;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev i,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next i {
color: #17327a !important;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev:hover i,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next:hover i {
color: #0cbbe7 !important;
}
/* Dots : pilule cyan pour l'actif (fond clair -> base navy translucide) */
.js-anthemeblocks-product-block-slider .owl-dot {
background: transparent !important;
border: none !important;
transform: none !important;
width: auto !important; height: auto !important;
margin: 0 6px !important;
}
.js-anthemeblocks-product-block-slider .owl-dot span {
display: block;
width: 11px !important; height: 11px !important;
background: rgba(23, 50, 122, .28) !important;
border: none !important;
border-radius: 50% !important;
transition: width .3s ease, background .3s ease, border-radius .3s ease !important;
}
.js-anthemeblocks-product-block-slider .owl-dot:hover span {
background: #17327a !important;
}
.js-anthemeblocks-product-block-slider .owl-dot.active span {
width: 28px !important;
border-radius: 6px !important;
background: #0cbbe7 !important;
}
/* Tablette + mobile : fleches masquees (pas de marge laterale pour les
placer hors des cartes) -> le glissement tactile prend le relais. */
@media (max-width: 991px) {
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next {
display: none !important;
}
}
/* =========================================================
PAGE D'ACCUEIL — Bande "Vous ne trouvez pas votre produit ameliorer"
========================================================= */
.su-band {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 40px 0;
background: #e8eef7; /* gris-bleu un peu plus present -> contraste avec le fond quasi-blanc */
}
.su-band-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
gap: 48px;
flex-wrap: wrap; /* passe en 1 colonne sur mobile */
}
.su-band-left { flex: 1 1 340px; }
.su-band-right { flex: 1 1 460px; }
.su-band-title {
color: #17327a;
font-weight: 700;
font-size: 25px;
line-height: 1.25;
margin: 0 0 14px;
padding-bottom: 12px;
position: relative;
}
.su-band-title::after { /* trait cyan ancre a gauche */
content: "";
position: absolute;
left: 0; bottom: 0;
width: 54px; height: 3px;
background: #0cbbe7;
border-radius: 2px;
}
.su-band-tag {
display: inline-block;
text-transform: uppercase;
letter-spacing: 1.2px;
font-size: 12px;
font-weight: 700;
color: #0cbbe7;
margin-bottom: 6px;
}
.su-band-left p {
margin: 0;
color: #4a5568;
line-height: 1.65;
font-size: 14.5px;
}
.su-band-right p {
margin: 0 0 12px;
color: #444;
line-height: 1.7;
font-size: 15px;
}
.su-band-right p:last-child { margin-bottom: 0; }
.su-band-btn {
display: inline-block;
margin-top: 18px;
padding: 10px 26px;
background: #17327a;
color: #fff !important;
border-radius: 6px;
font-weight: 600;
font-size: .95rem;
text-decoration: none !important;
transition: background .2s;
}
.su-band-btn:hover {
background: #0cbbe7;
color: #fff !important;
}
@media (max-width: 767px) {
.su-band { padding: 28px 0; }
.su-band-inner { gap: 22px; }
.su-band-title { font-size: 21px; }
}
/* ============================================================
HOMEPAGE — Carrousel "Nos marques" (module ybc-mnf-block)
Normalise la hauteur des logos pour eviter les espaces
irreguliers dus aux tailles d'images variees.
============================================================ */
#ybc-mnf-block {
/* La carte est dans un conteneur contraint (~1140px). Pour l'elargir
au-dela, on la SORT du conteneur et on la centre sur l'ECRAN (vw) :
left:50% (centre du parent = centre ecran) + translateX(-50%).
Largeur = viewport - 160px (80px de marge mini chaque cote pour les
fleches), plafonnee a 1440px. -> pas de scroll horizontal. */
position: relative;
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 160px);
max-width: 1440px;
margin: 40px 0 50px;
background: #fff;
border: 1px solid #eef1f6;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(23, 50, 122, .08);
padding: 36px 30px 40px; /* hauteur revenue comme avant */
}
/* Titre centre + trait cyan dessous */
#ybc-mnf-block .ybc-mnf-block-title {
text-align: center;
color: #17327a;
font-weight: 700;
position: relative;
padding-bottom: 14px;
margin-bottom: 28px;
}
#ybc-mnf-block .ybc-mnf-block-title::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: 54px; height: 3px;
background: #0cbbe7;
border-radius: 2px;
}
/* --- Logos : hauteur uniforme, couleur conservee --- */
#ybc-mnf-block-ul .owl-item {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#ybc-mnf-block-ul .owl-item li {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100px;
padding: 12px 20px;
}
#ybc-mnf-block-ul .owl-item li a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100%;
width: 100%;
}
#ybc-mnf-block-ul .owl-item li img {
max-height: 82px;
width: auto !important;
max-width: 100%;
object-fit: contain;
display: block;
}
/* --- Fleches sur les COTES (sorties du coin haut-droit) ---
Position absolue dans le carrousel (#ybc-mnf-block-ul = owl-carousel),
centrees verticalement sur la rangee de logos. On reserve une
gouttiere laterale (padding) pour qu'elles ne chevauchent pas les logos.
Ronds blancs, icone navy -> cyan au survol (comme le carrousel produits). */
#ybc-mnf-block-ul {
position: relative; /* ancre les fleches absolues */
}
/* IMPORTANT : le module positionne .owl-nav en absolu (haut-droit).
On le remet en statique -> les fleches se calent alors par rapport
a #ybc-mnf-block-ul (positionne) et non par rapport a .owl-nav. */
#ybc-mnf-block-ul .owl-nav {
position: static !important;
margin: 0 !important;
top: auto !important;
right: auto !important;
}
#ybc-mnf-block-ul .owl-nav .owl-prev,
#ybc-mnf-block-ul .owl-nav .owl-next {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 46px; height: 46px;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff !important;
border: 1px solid rgba(23, 50, 122, .15) !important;
border-radius: 50% !important;
box-shadow: 0 4px 14px rgba(23, 50, 122, .12) !important;
color: #17327a !important;
font-size: 0 !important; /* tue le glyphe texte natif du module */
z-index: 5;
}
/* BIEN HORS de la carte (comme produits phares).
-72px = padding carte (30) + 42px qui depassent du bord. */
#ybc-mnf-block-ul .owl-nav .owl-prev { left: -100px !important; right: auto !important; }
#ybc-mnf-block-ul .owl-nav .owl-next { right: -100px !important; left: auto !important; }
#ybc-mnf-block-ul .owl-nav .owl-prev:hover,
#ybc-mnf-block-ul .owl-nav .owl-next:hover {
border-color: #0cbbe7 !important;
box-shadow: 0 6px 18px rgba(12, 187, 231, .28) !important;
color: #0cbbe7 !important;
}
/* Chevron dessine en CSS (bordures) -> parfaitement centre dans le rond,
sans dependance a la police d'icones du module. On neutralise le
glyphe d'origine (eventuel ::after) et on dessine sur ::before. */
#ybc-mnf-block-ul .owl-nav .owl-prev::after,
#ybc-mnf-block-ul .owl-nav .owl-next::after { content: none !important; }
#ybc-mnf-block-ul .owl-nav .owl-prev::before,
#ybc-mnf-block-ul .owl-nav .owl-next::before {
content: "" !important;
position: static !important;
display: block;
width: 9px; height: 9px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-top: 0; border-right: 0;
}
#ybc-mnf-block-ul .owl-nav .owl-prev::before { transform: rotate(45deg); margin-left: 4px; }
#ybc-mnf-block-ul .owl-nav .owl-next::before { transform: rotate(-135deg); margin-right: 4px; }
/* Mobile / tablette : on annule la sortie de conteneur + on masque les
fleches (pas de place hors carte) -> swipe tactile. */
@media (max-width: 991px) {
#ybc-mnf-block {
position: static;
left: auto;
transform: none;
width: auto;
max-width: none;
margin: 30px 15px 36px;
}
#ybc-mnf-block-ul .owl-nav .owl-prev,
#ybc-mnf-block-ul .owl-nav .owl-next { display: none !important; }
}
/* Catalogue : aligne le prix au meme niveau sur toutes les cartes produit. */
.product-miniature:not(:has(.product-variants-item)) .an_pa_product-variants {
min-height: 48px;
}
/* Reassurance : visible uniquement sur la homepage (page-index).
displayHomeAfter dans AN Theme s'affiche sur toutes les pages — on masque
le bloc sur toutes les pages non-accueil via la classe body. */
body:not(.page-index) .anthemeblocks-reassurance {
display: none !important;
}