/* =========================================================
novoid.css - Consolidated custom styles
Generated from 24 inline <style> blocks
========================================================= */
:root {
--nf-bg: var(--nv-fond);
--nf-bg-dark: #111;
--nf-text: #333;
--nf-text-light: var(--nv-texte-2);
--nf-text-muted: var(--nv-muted);
--nf-border: var(--nv-bordure);
--nf-white: var(--nv-blanc);
--nf-black: var(--nv-noir);
--nf-transition: 0.25s ease;
--nf-max-width: 1400px;
--nf-spacing-xs: 8px;
--nf-spacing-sm: 16px;
--nf-spacing-md: 24px;
--nf-spacing-lg: 48px;
--nf-spacing-xl: 80px;
}
.nf-container {
max-width: var(--nf-max-width);
margin: 0 auto;
padding: 0 var(--nf-spacing-md);
}
@media (min-width: 768px) {
.nf-container {
padding: 0 var(--nf-spacing-lg);
}
}
.nf-marquee {
background: #000;
color: #fff;
overflow: hidden;
padding: 12px 0;
border-bottom: 1px solid #e0e0e0;
}
.nf-marquee__track {
display: flex;
align-items: center;
white-space: nowrap;
will-change: transform;
backface-visibility: hidden;
}
.nf-marquee__text {
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding-right: 80px;
flex-shrink: 0;
}
.nf-footer {
background: var(--nf-bg);
color: var(--nf-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
margin-top: var(--nf-spacing-xl);
width: 100%;
}
.nf-footer__main {
padding: var(--nf-spacing-xl) 0 var(--nf-spacing-lg);
}
.nf-footer__grid {
display: grid;
gap: var(--nf-spacing-lg);
}
@media (min-width: 768px) {
.nf-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.nf-footer__grid {
grid-template-columns: 1fr 1fr 1fr 1.5fr;
}
}
.nf-footer__desc {
font-size: 13px;
color: var(--nf-text-light);
margin: 0 0 var(--nf-spacing-sm) 0;
}
.nf-newsletter__form {
width: 100%;
}
.nf-input-group {
display: flex;
gap: var(--nf-spacing-xs);
border-bottom: 1px solid var(--nf-border);
padding-bottom: var(--nf-spacing-xs);
}
.nf-input {
flex: 1;
background: transparent;
border: none;
color: var(--nf-text);
font-size: 14px;
padding: var(--nf-spacing-xs) 0;
outline: none;
}
.nf-input::placeholder {
color: var(--nf-text-muted);
}
.nf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: var(--nf-transition);
background: transparent;
color: var(--nf-text);
}
.nf-btn--primary {
border: 1px solid var(--nf-black);
}
.nf-btn--primary:hover {
background: var(--nf-black);
color: var(--nf-white);
}
.nf-footer__title {
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 var(--nf-spacing-md) 0;
color: var(--nf-black);
position: relative;
padding-bottom: 12px;
}
.nf-footer__title::after {
display: none;
}
.nf-footer__links {
list-style: none;
margin: 0;
padding: 0;
}
.nf-footer__links li {
margin-bottom: var(--nf-spacing-sm);
}
.nf-footer__links a {
color: var(--nf-text-light);
text-decoration: none;
font-size: 14px;
transition: color var(--nf-transition);
display: inline-block;
position: relative;
}
.nf-footer__links a:hover {
color: var(--nf-black);
}
.nf-footer__bottom {
background: var(--nf-bg-dark);
color: var(--nf-white);
padding: var(--nf-spacing-md) 0;
}
.nf-footer__bottom-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--nf-spacing-sm);
text-align: center;
}
@media (min-width: 768px) {
.nf-footer__bottom-content {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.nf-footer__copyright {
font-size: 12px;
color: var(--nf-text-muted);
margin: 0;
}
.nf-footer__payments {
display: flex;
gap: var(--nf-spacing-sm);
}
.nf-payment-icon {
font-size: 11px;
color: var(--nf-text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
footer .footer,
footer .footer-extra,
footer .margetext,
footer .circleBase,
footer hr,
footer iframe[src*="mailjet"] {
display: none !important;
}
/* ============================================
STORES SECTION - 15 LAYOUTS
Change $store_layout = 1-15 above
============================================ */
.nf-store-card__info {
display: flex;
flex-direction: column;
gap: 4px;
}
.nf-store-card__name {
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
margin: 0 0 4px 0;
color: var(--nf-black);
}
.nf-store-card__address {
font-size: 13px;
line-height: 1.5;
color: var(--nf-text-light);
font-style: normal;
}
.nf-store-card__hours {
font-size: 12px;
color: var(--nf-text-muted);
font-style: italic;
}
.nf-store-card__phone {
font-size: 13px;
color: var(--nf-text-light);
text-decoration: none;
transition: color var(--nf-transition);
}
.nf-store-card__phone:hover {
color: var(--nf-black);
}
.nf-store-badge {
position: absolute;
top: -8px;
right: -8px;
background: #e63946;
color: #fff;
font-size: 9px;
font-weight: 700;
padding: 4px 8px;
letter-spacing: 1px;
z-index: 10;
}
/* ============================================
LAYOUT 1: Grid 4 colonnes (Original)
============================================ */
.store-layout-1 .nf-stores-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--nf-spacing-md);
}
.store-layout-1 .nf-store-card {
border-left: 2px solid var(--nf-border);
padding: 0 var(--nf-spacing-md);
position: relative;
}
.store-layout-1 .nf-store-card:first-child {
border-left: none;
}
.store-layout-1 .nf-store-card__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.store-layout-1 .nf-store-card__logo {
display: block;
max-width: 140px;
height: 120px;
margin-bottom: var(--nf-spacing-sm);
/* SVG olive #737A45 neutralise en anthracite ~#333 (meme fonction que le survol
   -> le fondu peut interpoler ; grayscale ne s'interpolait pas avec invert). */
filter: brightness(0) invert(0.2);
transition: filter 0.4s ease;
}
.store-layout-1 .nf-store-card:hover .nf-store-card__logo {
filter: brightness(0) invert(0.45);
}
.store-layout-1 .nf-footer__title--stores {
margin: 0 auto var(--nf-spacing-md);
text-align: center;
display: inline-block;
background: var(--nf-black);
color: var(--nf-white);
padding: 10px 30px;
font-size: 11px;
letter-spacing: 3px;
}
.store-layout-1 .nf-footer__title--stores::after { display: none; }
.store-layout-1 .nf-footer__stores-row::before {
content: '';
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 2px;
background: var(--nf-black);
}
.store-layout-1 .nf-footer__title--stores {
position: relative;
display: block;
margin: 0 auto 30px;
text-align: center;
background: var(--nf-black);
color: var(--nf-white);
padding: 12px 40px;
font-size: 11px;
letter-spacing: 3px;
width: fit-content;
}
.store-layout-1 .nf-footer__stores-row {
position: relative;
padding-top: 40px;
margin-top: var(--nf-spacing-lg);
}
/* ============================================
LAYOUT 2: Liste verticale minimaliste
============================================ */
display: flex;
flex-direction: column;
gap: 0;
max-width: 600px;
margin: 0 auto;
}
display: flex;
align-items: center;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid var(--nf-border);
}
width: 100px;
flex-shrink: 0;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
}
/* ============================================
LAYOUT 3: Cards avec fond gris sutil
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
background: #f8f8f8;
padding: 25px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
background: #fff;
border-color: var(--nf-border);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
max-width: 120px;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-border);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 4: Horizontal scroll (carousel)
============================================ */
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 20px;
padding: 10px 0 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
flex: 0 0 280px;
scroll-snap-align: start;
background: #fff;
border: 1px solid var(--nf-border);
padding: 25px;
transition: all 0.3s ease;
}
border-color: var(--nf-black);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
max-width: 100px;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 20px;
display: block;
}
/* ============================================
LAYOUT 5: Accordéon dépliable
============================================ */
display: flex;
flex-direction: column;
gap: 10px;
max-width: 800px;
margin: 0 auto;
}
border: 1px solid var(--nf-border);
overflow: hidden;
}
display: flex;
align-items: center;
padding: 20px;
cursor: pointer;
transition: background 0.3s ease;
}
width: 80px;
margin-right: 20px;
filter: grayscale(100%);
transition: all 0.3s ease;
}
display: inline-block;
margin-right: 15px;
}
display: inline;
}
width: 30px;
height: 30px;
border: 1px solid var(--nf-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: transform 0.3s ease;
}
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
background: #fafafa;
}
max-height: 200px;
padding: 20px;
border-top: 1px solid var(--nf-border);
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 6: Hover zoom sur logo
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
padding: 30px;
border: 1px solid var(--nf-border);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--nf-black);
transform: scaleX(0);
transition: transform 0.4s ease;
}
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
max-width: 130px;
margin-bottom: 20px;
transform: scale(1);
transition: transform 0.4s ease;
filter: grayscale(100%);
}
transform: scale(1.15);
filter: grayscale(0%);
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 7: Cadre décoratif élégante
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
position: relative;
padding: 30px 25px;
border: 1px solid var(--nf-border);
margin: -1px 0 0 -1px;
}
content: '';
position: absolute;
bottom: 15px;
right: 15px;
width: 30px;
height: 30px;
border-right: 1px solid var(--nf-black);
border-bottom: 1px solid var(--nf-black);
opacity: 0;
transition: opacity 0.3s ease;
}
max-width: 120px;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border: 2px solid var(--nf-black);
padding: 40px;
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 8: Avec horaires d'ouverture
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
background: #fff;
border: 1px solid var(--nf-border);
padding: 25px;
position: relative;
}
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--nf-black), #666);
}
max-width: 110px;
margin-bottom: 12px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--nf-border);
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 9: Badge "NOUVEAU" sur certaines
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
position: relative;
background: #fff;
border: 1px solid var(--nf-border);
padding: 25px;
transition: all 0.3s ease;
}
border-color: var(--nf-black);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
max-width: 120px;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 10: Fond zoom subtil
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
position: relative;
overflow: hidden;
background: #f5f5f5;
padding: 30px;
transition: all 0.5s ease;
}
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%23ddd"/></svg>');
background-size: 20px 20px;
opacity: 0.5;
transform: scale(1);
transition: transform 5s linear infinite;
}
transform: scale(1.5);
}
max-width: 120px;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
position: relative;
z-index: 1;
}
filter: grayscale(0%);
transform: scale(1.05);
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 11: Grid asymétrique (2+2)
============================================ */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
grid-column: span 1;
}
background: #fff;
border: 1px solid var(--nf-border);
padding: 30px;
display: flex;
align-items: flex-start;
gap: 20px;
}
max-width: 100px;
flex-shrink: 0;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 12: Icône + texte (phone, map)
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
border-left: 3px solid var(--nf-black);
padding: 20px 20px 20px 25px;
background: #fafafa;
transition: all 0.3s ease;
}
background: #fff;
border-left-color: #666;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
max-width: 100px;
margin-bottom: 12px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
content: '📞';
font-size: 10px;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 13: Titre aligné à gauche
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
border-top: 2px solid var(--nf-black);
padding-top: 20px;
}
max-width: 120px;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: left;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
padding-left: 0;
}
/* ============================================
LAYOUT 14: Cards 3D avec ombre portée
============================================ */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
background: #fff;
border: none;
padding: 30px;
box-shadow:
0 1px 1px rgba(0,0,0,0.05),
0 2px 2px rgba(0,0,0,0.05),
0 4px 4px rgba(0,0,0,0.05),
0 8px 8px rgba(0,0,0,0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
}
transform: translateY(-10px) rotateX(5deg);
box-shadow:
0 20px 40px rgba(0,0,0,0.2),
0 15px 25px rgba(0,0,0,0.15);
}
max-width: 130px;
margin-bottom: 20px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
LAYOUT 15: Séparateurs lignes verticales
============================================ */
display: flex;
justify-content: space-between;
align-items: stretch;
}
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px;
position: relative;
}
content: '';
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--nf-border), transparent);
}
max-width: 120px;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
text-align: center;
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
}
/* ============================================
Stores Section - Layout Final
============================================ */
.nf-footer__stores-row {
margin-top: var(--nf-spacing-lg);
padding-top: var(--nf-spacing-lg);
border-top: 1px solid var(--nf-black);
}
.nf-footer__stores-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
color: #000;
background: #fff;
padding: 10px 0;
margin-bottom: 30px;
}
.nf-stores-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.nf-store-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
border-left: 2px solid #f0f0f0;
}
.nf-store-card:first-child {
border-left: none;
}
.nf-store-card__inner {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-start;
}
.nf-store-card__logo {
max-width: 240px;
height: 120px;
object-fit: contain;
margin-bottom: 15px;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.nf-store-card:hover .nf-store-card__logo {
filter: grayscale(0%);
}
.nf-store-card__name {
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #000;
margin: 0 0 12px 0;
min-height: 20px;
display: flex;
align-items: center;
}
.nf-store-card__address {
font-size: 14px;
line-height: 1.6;
color: var(--nf-text-light);
font-style: normal;
margin-top: auto;
}
.nf-store-card__address a {
color: var(--nf-text-light);
text-decoration: none;
transition: color 0.3s ease;
font-size: 14px;
}
.nf-store-card__address a:hover {
color: #000;
}
@media (max-width: 767px) {
.nf-stores-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.nf-store-card {
border-left: none;
border-top: 2px solid var(--nf-border);
padding-top: 15px;
}
.nf-store-card:first-child {
border-top: none;
}
}
/* ============================================
RESPONSIVE pour tous les layouts
============================================ */
@media (max-width: 1023px) {
.store-layout-1 .nf-stores-grid,
}
@media (max-width: 767px) {
.store-layout-1 .nf-stores-grid,
.store-layout-1 .nf-store-card,
}
@media (max-width: 767px) {
:root {
--nf-spacing-xl: 48px;
}
.nf-input-group {
flex-direction: column;
border-bottom: none;
gap: var(--nf-spacing-sm);
}
.nf-input {
border-bottom: 1px solid var(--nf-border);
padding: var(--nf-spacing-xs) 0;
}
.nf-btn--primary {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.nf-btn,
.nf-footer__links a {
transition: none !important;
}
.nf-footer__links a::after {
transition: none !important;
}
}
:root {
--nc-primary: var(--nv-noir);
--nc-secondary: var(--nv-texte-2);
--nc-muted: var(--nv-muted);
--nc-bg: var(--nv-fond);
--nc-bg-alt: var(--nv-fond-2);
--nc-border: var(--nv-bordure);
--nc-success: var(--nv-succes);
--nc-warning: #f59e0b;
--nc-radius: var(--nv-radius);
--nc-transition: 0.2s ease;
--nc-max-width: 1200px;
--nc-spacing-xs: 8px;
--nc-spacing-sm: 16px;
--nc-spacing-md: 24px;
--nc-spacing-lg: 40px;
}
.nc-cart {
max-width: var(--nc-max-width);
margin: 0 auto;
padding: var(--nc-spacing-md);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.nc-cart__header {
margin-bottom: var(--nc-spacing-lg);
text-align: center;
}
.nc-cart__header-row {
display: flex;
justify-content: center;
align-items: baseline;
gap: var(--nc-spacing-sm);
}
.nc-cart__title {
font-size: 28px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
margin: 0;
}
.nc-cart__count {
font-size: 14px;
color: var(--nc-muted);
}
.nc-cart__shipping-progress {
margin-top: var(--nc-spacing-md);
}
.nc-cart__shipping-progress .nc-progress-bar {
height: 2px;
background: var(--nc-bg-alt);
border-radius: 1px;
overflow: hidden;
margin-bottom: var(--nc-spacing-xs);
}
.nc-cart__shipping-progress .nc-progress-bar__fill {
height: 100%;
background: var(--nc-primary);
border-radius: 1px;
transition: width 0.3s ease;
}
.nc-cart__shipping-progress .nc-progress-bar__fill {
height: 100%;
background: var(--nc-primary);
border-radius: 3px;
transition: width 0.3s ease;
}
.nc-cart__shipping-msg {
font-size: 13px;
color: var(--nc-secondary);
margin: 0;
}
.nc-cart__shipping-msg strong {
color: var(--nc-primary);
font-weight: 600;
}
.nc-cart__shipping-msg--free {
color: var(--nc-success);
display: flex;
align-items: center;
justify-content: center;
gap: var(--nc-spacing-xs);
}
.nc-cart__shipping-msg--free svg {
width: 16px;
height: 16px;
}
.nc-cart__grid {
display: grid;
gap: var(--nc-spacing-lg);
}
@media (min-width: 1024px) {
.nc-cart__grid {
grid-template-columns: 1fr 380px;
align-items: start;
}
}
.nc-cart__table-header {
display: none;
padding: var(--nc-spacing-sm) 0;
border-bottom: 1px solid var(--nc-border);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--nc-muted);
}
@media (min-width: 768px) {
.nc-cart__table-header {
display: grid;
grid-template-columns: 120px 1fr 100px 100px 40px;
gap: var(--nc-spacing-md);
align-items: center;
text-align: center;
}
}
.nc-cart__items {
display: flex;
flex-direction: column;
gap: var(--nc-spacing-md);
}
.nc-cart__item {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--nc-spacing-sm);
padding: var(--nc-spacing-md);
border: 1px solid var(--nc-border);
border-radius: var(--nc-radius);
position: relative;
}
@media (min-width: 768px) {
.nc-cart__item {
grid-template-columns: 120px 1fr 100px 100px 40px;
align-items: center;
padding: var(--nc-spacing-md) 0;
border: none;
border-bottom: 1px solid var(--nc-border);
border-radius: 0;
}
}
.nc-cart__item--outofstock {
opacity: 0.6;
background: #fef2f2;
}
@media (min-width: 768px) {
.nc-cart__item--outofstock {
background: transparent;
}
}
.nc-cart__item-image {
display: flex;
align-items: center;
}
.nc-cart__item-image img {
width: 100%;
max-width: 120px;
height: auto;
object-fit: contain;
border-radius: var(--nc-radius);
}
@media (min-width: 768px) {
.nc-cart__item-image img {
max-width: 120px;
}
}
.nc-cart__item-info {
display: flex;
flex-direction: column;
gap: var(--nc-spacing-xs);
min-width: 0;
overflow-wrap: break-word;
}
.nc-cart__item-name {
font-size: 14px;
font-weight: 500;
color: var(--nc-primary);
text-decoration: none;
line-height: 1.4;
}
.nc-cart__item-name:hover {
text-decoration: underline;
}
.nc-cart__item-attributes {
display: flex;
flex-wrap: wrap;
gap: var(--nc-spacing-xs);
}
.nc-cart__attribute {
font-size: 12px;
color: var(--nc-secondary);
background: var(--nc-bg-alt);
padding: 2px 8px;
border-radius: 2px;
}
.nc-cart__stock-alert {
font-size: 12px;
color: #ef4444;
font-weight: 500;
}
.nc-cart__item-price,
.nc-cart__item-qty,
.nc-cart__item-total {
display: flex;
flex-direction: column;
gap: var(--nc-spacing-xs);
}
@media (min-width: 768px) {
.nc-cart__item-price,
.nc-cart__item-qty,
.nc-cart__item-total {
align-items: center;
}
}
.nc-cart__label--mobile {
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--nc-muted);
}
@media (min-width: 768px) {
.nc-cart__label--mobile {
display: none;
}
}
.nc-cart__price,
.nc-cart__total {
font-size: 14px;
font-weight: 500;
}
.nc-qty {
display: flex;
align-items: center;
gap: 0;
}
.nc-qty__btn {
width: 28px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--nc-border);
background: var(--nc-bg);
color: var(--nc-primary);
font-size: 16px;
cursor: pointer;
transition: background 0.15s;
}
.nc-qty__btn:hover {
background: var(--nc-bg-alt);
}
.nc-qty__btn--minus {
border-radius: var(--nc-radius) 0 0 var(--nc-radius);
border-right: none;
}
.nc-qty__btn--plus {
border-radius: 0 var(--nc-radius) var(--nc-radius) 0;
border-left: none;
}
.nc-qty__btn:disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.nc-qty__input {
width: 50px;
height: 32px;
padding: 0;
border: 1px solid var(--nc-border);
border-left: none;
border-right: none;
text-align: center;
font-size: 14px;
-moz-appearance: textfield;
border-radius: 0;
}
.nc-qty__input::-webkit-outer-spin-button,
.nc-qty__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.nc-cart__remove {
position: absolute;
top: var(--nc-spacing-sm);
right: var(--nc-spacing-sm);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--nc-muted);
text-decoration: none;
transition: color var(--nc-transition);
}
.nc-cart__remove:hover {
color: #ef4444;
}
.nc-cart__remove svg {
width: 18px;
height: 18px;
}
@media (min-width: 768px) {
.nc-cart__remove {
position: static;
}
}
.nc-cart__summary {
position: -webkit-sticky;
position: sticky;
top: 100px;
}
.nc-summary {
background: var(--nc-bg-alt);
padding: var(--nc-spacing-lg);
border-radius: var(--nc-radius);
}
.nc-summary__title {
font-size: 18px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 var(--nc-spacing-md) 0;
}
.nc-summary__shipping {
margin-bottom: var(--nc-spacing-md);
padding-bottom: var(--nc-spacing-md);
border-bottom: 1px solid var(--nc-border);
}
.nc-shipping-progress__text {
font-size: 13px;
color: var(--nc-secondary);
margin: 0 0 var(--nc-spacing-sm) 0;
}
.nc-shipping-progress__text strong {
color: var(--nc-primary);
}
.nc-progress-bar {
height: 4px;
background: var(--nc-border);
border-radius: 2px;
overflow: hidden;
}
.nc-progress-bar__fill {
height: 100%;
background: var(--nc-primary);
transition: width var(--nc-transition);
}
.nc-summary__shipping--free {
display: flex;
align-items: center;
gap: var(--nc-spacing-xs);
color: var(--nc-success);
font-size: 13px;
}
.nc-summary__shipping--free svg {
width: 16px;
height: 16px;
}
.nc-summary__totals {
margin-bottom: var(--nc-spacing-md);
}
.nc-summary__row {
display: flex;
justify-content: space-between;
padding: var(--nc-spacing-sm) 0;
font-size: 14px;
color: var(--nc-secondary);
}
.nc-summary__row--shipping .nc-summary__free {
color: var(--nc-success);
font-weight: 500;
}
.nc-summary__grand {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--nc-spacing-md) 0;
border-top: 1px solid var(--nc-border);
margin-bottom: var(--nc-spacing-md);
font-size: 14px;
font-weight: 500;
}
.nc-summary__grand-amount {
font-size: 24px;
font-weight: 400;
}
.nc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--nc-spacing-xs);
padding: 14px 28px;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
transition: var(--nc-transition);
}
.nc-btn--disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.nc-summary__secure {
display: flex;
align-items: center;
justify-content: center;
gap: var(--nc-spacing-xs);
margin-top: var(--nc-spacing-md);
padding-top: var(--nc-spacing-md);
border-top: 1px solid var(--nc-border);
font-size: 12px;
color: var(--nc-muted);
}
.nc-summary__secure svg {
width: 14px;
height: 14px;
}
.nc-shipping-estimator {
text-align: center;
padding: var(--nc-spacing-lg) 0;
}
.nc-cart__empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 20px;
}
.nc-empty__icon {
width: 64px;
height: 64px;
color: var(--nc-border);
margin-bottom: var(--nc-spacing-md);
}
.nc-empty__title {
font-size: 20px;
font-weight: 400;
margin: 0 0 var(--nc-spacing-sm) 0;
}
.nc-empty__text {
font-size: 14px;
color: var(--nc-secondary);
margin: 0 0 var(--nc-spacing-md) 0;
}
.nc-cart__alert {
display: flex;
align-items: center;
gap: var(--nc-spacing-sm);
margin-top: var(--nc-spacing-md);
padding: var(--nc-spacing-md);
background: #fef2f2;
border-radius: var(--nc-radius);
color: #ef4444;
font-size: 14px;
}
.nc-cart__alert svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.nc-shipping-estimator {
margin-top: var(--nc-spacing-md);
padding-top: var(--nc-spacing-md);
border-top: 1px solid var(--nc-border);
}
.nc-shipping-estimator__title {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--nc-secondary);
margin: 0 0 var(--nc-spacing-sm) 0;
}
.nc-country-selector {
margin-bottom: var(--nc-spacing-md);
padding-bottom: var(--nc-spacing-md);
border-bottom: 1px solid var(--nc-border);
}
.nc-country-selector__label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--nc-muted);
margin-bottom: var(--nc-spacing-xs);
}
.nc-country-selector__select {
width: 100%;
padding: 10px 12px;
font-size: 13px;
border: 1px solid var(--nc-border);
border-radius: var(--nc-radius);
background: var(--nc-bg);
color: var(--nc-primary);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.nc-country-selector__select:focus {
outline: none;
border-color: var(--nc-primary);
}
.nc-country-selector__result {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--nc-spacing-sm);
padding: var(--nc-spacing-sm);
background: var(--nc-bg-alt);
border-radius: var(--nc-radius);
font-size: 13px;
}
.nc-country-selector__cost {
font-weight: 600;
}
.formuinscription h1,
.contentText h1 {
display: none !important;
}
@media (max-width: 767px) {
.nc-cart__title {
font-size: 22px;
}
.nc-cart__summary {
padding-bottom: 80px;
}
.nc-checkout-sticky {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 12px 16px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
background: var(--nc-bg);
box-shadow: 0 -2px 12px rgba(0,0,0,.1);
z-index: 100;
}
.nc-checkout-sticky--released {
position: static !important;
box-shadow: none !important;
padding: 12px 0 !important;
}
}

@keyframes cs26-spin { to { transform: rotate(360deg); } }

:root {
--nl-primary: var(--nv-noir);
--nl-secondary: var(--nv-texte-2);
--nl-muted: var(--nv-muted);
--nl-bg: var(--nv-fond);
--nl-bg-alt: var(--nv-fond-2);
--nl-border: var(--nv-bordure);
--nl-error: var(--nv-erreur);
--nl-radius: var(--nv-radius);
--nl-transition: 0.25s ease;
--nl-max-width: 1000px;
--nl-spacing-xs: 8px;
--nl-spacing-sm: 16px;
--nl-spacing-md: 24px;
--nl-spacing-lg: 40px;
--nl-spacing-xl: 60px;
}

.contentContainer h1,
.inscri h2 {
display: none !important;
}
.inscri {
background: transparent !important;
border: none !important;
padding: 0 !important;
}

@keyframes nv-marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
body {
padding-top: calc(var(--nvb-navbar-height) + var(--nvb-marquee-height)) !important;
}

}
.pn-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 12px;
margin: 0;
list-style: none;
}

@media (min-width: 768px) {
.pn-product-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
}
@media (min-width: 1200px) {
.pn-product-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
}
}
.pn-toolbar {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 16px 16px;
background: #fff;
}
.pn-toolbar__filter {
flex-shrink: 0;
}
.pn-toolbar__filter select {
display: block !important;
height: auto !important;
background: #111 !important;
color: #fff !important;
border: none !important;
border-radius: 50px !important;
padding: 12px 40px 12px 24px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
line-height: 1.4 !important;
width: 240px !important;
text-align: center !important;
}
.pn-toolbar__filter select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}
.pn-toolbar__filter select option {
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.pn-toolbar__sort {
position: relative;
}
.pn-toolbar__sort-btn {
height: 38px;
padding: 0 14px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: border-color 0.2s;
}
.pn-toolbar__sort-btn:hover {
border-color: #999;
}
.pn-toolbar__sort-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 200px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
display: none;
z-index: 100;
list-style: none;
margin: 0;
padding: 6px 0;
}
.pn-toolbar__sort-menu.is-open {
display: block;
}
.pn-toolbar__sort-menu a {
display: block;
padding: 10px 16px;
font-size: 13px;
color: #333;
text-decoration: none;
transition: background 0.15s;
}
.pn-toolbar__sort-menu a:hover {
background: #f5f5f5;
}
.pn-empty {
padding: 60px 20px;
text-align: center;
font-size: 15px;
color: #666;
}
.navbar-nav > li > a {
line-height: 20px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.navbar-nav > li > a > img {
margin-top: -2px;
vertical-align: middle;
}
.navbar-nav > li > a > i {
vertical-align: middle;
}
.breadcrumb li a {
border: 1px solid #ccc;
padding: 5px 10px;
border-radius: 5px;
margin: 0 5px;
}
.breadcrumb>li+li::before {
content: none !important;
}
a:focus:not(:focus-visible),
img:focus:not(:focus-visible),
button:focus:not(:focus-visible),
*:focus:not(:focus-visible),
*:active:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
a:focus-visible,
img:focus-visible,
button:focus-visible,
*:focus-visible {
outline: 2px solid #000 !important;
outline-offset: 2px !important;
}
* {
-webkit-tap-highlight-color: transparent;
}
body, html, * {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-weight: 700 !important;
}
/* Trait gris sous les titres retire (21/07/2026, demande utilisateur).
   Neutralise le border-bottom herite de bootstrap/custom sur .page-header. */
.page-header {
border-bottom: 0 !important;
}
.about-marquee {
background: #000;
color: #fff;
overflow: hidden;
padding: 12px 0;
margin-bottom: 20px;
position: relative;
z-index: 100;
width: 100%;
display: block;
}
.about-marquee__track {
display: flex;
align-items: center;
animation: about-marquee-scroll 15s linear infinite;
white-space: nowrap;
}
@keyframes about-marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.about-marquee__text {
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 40px;
}
.modal.modal-fullscreen {
/**
* /!\ By using this feature, you force the header and footer to be placed
* in an absolute position. You must handle by yourself the margin of the
* content.
*/
}
.modal {
background-color: #fff;
border: 0px;
}
.modal-content {
width: 100%;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 35px;
}
.modal.modal-fullscreen .modal-dialog {
margin: 0;
width: 100%;
}
.modal.modal-fullscreen .modal-content {
border: none;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
-o-box-shadow: inherit;
box-shadow: inherit;
}
.modal.modal-fullscreen.force-fullscreen {
}
.modal.modal-fullscreen.force-fullscreen .modal-body {
padding: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header,
.modal.modal-fullscreen.force-fullscreen .modal-footer {
left: 0;
position: absolute;
right: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header {
top: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-footer {
bottom: 0;
}
.search-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.search-modal.in {
display: flex !important;
}
.search-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
cursor: pointer;
}
.search-modal__content {
position: relative;
width: 90%;
max-width: 700px;
z-index: 1;
animation: searchModalSlide 0.3s ease-out;
margin: auto;
}
@keyframes searchModalSlide {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-modal__close {
position: absolute;
top: -50px;
right: 0;
width: 44px;
height: 44px;
background: transparent;
border: none;
color: #111;
cursor: pointer;
padding: 10px;
transition: transform 0.2s;
}
.search-modal__close:hover {
transform: rotate(90deg);
}
.search-modal__close svg {
width: 24px;
height: 24px;
}
.search-modal__body {
background: #fff;
padding: 40px;
box-shadow: none;
border: 1px solid #e0e0e0;
}
@media (max-width: 576px) {
.search-modal {
padding: 15px;
}
.search-modal__content {
width: 100%;
}
.search-modal__body {
padding: 30px 20px;
}
.search-modal__close {
top: -45px;
right: 0;
}
}
.search-modal__form {
width: 100%;
}
.search-modal__input-wrapper {
display: flex;
align-items: center;
border-bottom: 2px solid #000;
padding-bottom: 8px;
}
.search-modal__input {
flex: 1;
border: none;
background: transparent;
font-size: 28px;
font-weight: 300;
padding: 12px 0;
outline: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
width: 100%;
}
@media (max-width: 576px) {
.search-modal__input {
font-size: 20px;
}
}
.search-modal__input::placeholder {
color: #999;
font-weight: 300;
}
.search-modal__submit {
width: 50px;
height: 50px;
background: #000;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
transition: background 0.2s;
flex-shrink: 0;
}
.search-modal__submit:hover {
background: #333;
}
.search-modal__submit svg {
width: 22px;
height: 22px;
}
.search-modal__hint {
margin: 20px 0 0 0;
font-size: 13px;
color: #666;
text-align: center;
}
.modal-backdrop {
background: rgba(0, 0, 0, 0.85) !important;
}
.pager-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 24px 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pager-pages {
display: flex;
align-items: center;
gap: 4px;
}
.pager-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
height: 44px;
padding: 0 12px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border: 1px solid #ddd;
color: #333;
background: #fff;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.pager-arrow {
font-size: 16px;
}
.pager-text {
display: none;
}
.pager-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border: 1px solid #ddd;
color: #333;
background: #fff;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.pager-btn:hover, .pager-num:hover {
border-color: #000;
color: #000;
}
.pager-active {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
cursor: default;
}
.pager-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.pager-dots {
color: #999;
padding: 0 4px;
}
.pager-count {
display: block;
text-align: center;
font-size: 13px;
color: #666;
padding: 0 16px 16px;
}
@media (max-width: 400px) {
.pager-wrap { gap: 4px; padding: 16px 8px; }
.pager-btn, .pager-num { min-width: 40px; height: 40px; font-size: 13px; padding: 0 8px; }
}
@media (min-width: 768px) {
.pager-text { display: inline; }
}
.mot-en-rose {
color: #D81B60;
}
.filter-section {
margin-bottom: 20px;
background: #f9f9f9;
border: 1px solid #e1e1e1;
border-radius: 4px;
padding: 15px;
}
.filter-options-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 14px;
color: #333;
text-transform: uppercase;
letter-spacing: 1px;
display: flex;
justify-content: space-between;
align-items: center;
}
.reset-filter {
font-size: 11px;
color: #999;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
font-weight: normal;
cursor: pointer;
}
.reset-filter:hover {
color: #333;
text-decoration: underline;
}
.filter-options-container {
max-height: 200px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #ccc #f0f0f0;
}
.filter-options-container::-webkit-scrollbar {
width: 6px;
}
.filter-options-container::-webkit-scrollbar-track {
background: #f0f0f0;
}
.filter-options-container::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
.filter-option {
display: flex;
align-items: center;
margin-bottom: 6px;
font-size: 13px;
color: #555;
}
.filter-option:last-child {
margin-bottom: 0;
}
.filter-option input[type="checkbox"] {
margin-right: 8px;
margin-top: 0;
cursor: pointer;
}
.filter-option label {
cursor: pointer;
user-select: none;
}
.filter-option input[type="checkbox"]:checked+label {
font-weight: bold;
color: #000;
}
.contentContainer {
position: relative;
transition: opacity 0.2s ease;
}
.ajax-loading::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
z-index: 10;
cursor: wait;
}
.active-filters-container {
margin-bottom: 15px;
}
.active-filter-chip {
display: inline-flex;
align-items: center;
background: #333;
color: #fff;
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
margin-right: 5px;
margin-bottom: 5px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s;
}
.active-filter-chip:hover {
background: #000;
}
.active-filter-chip .remove-icon {
margin-left: 6px;
font-weight: bold;
font-size: 12px;
}
.filter-mode-tiles .filter-options-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
max-height: none;
}
.filter-mode-tiles .checkbox {
margin: 0 5px 5px 0 !important;
width: calc(25% - 5px);
padding: 0;
min-height: 35px;
float: left;
display: block;
}
.filter-mode-tiles .filter-options-container::after {
content: "";
clear: both;
display: table;
}
.filter-mode-tiles .checkbox input[type="checkbox"] {
display: none;
}
.filter-mode-tiles .checkbox label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 35px;
border: 1px solid #ddd;
background: #fff;
color: #333;
font-size: 11px;
font-weight: normal;
cursor: pointer;
transition: all 0.2s;
border-radius: 2px;
text-align: center;
padding: 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.filter-mode-tiles .checkbox input[type="checkbox"]:checked+label {
background: #000;
color: #fff;
border-color: #000;
font-weight: bold;
}
.filter-mode-tiles .checkbox input[type="checkbox"]:disabled+label {
background: #f5f5f5;
color: #ccc;
border-color: #eee;
cursor: not-allowed;
text-decoration: line-through;
opacity: 0.6;
}
.filter-mode-tiles .checkbox:hover input[type="checkbox"]:not(:disabled)+label {
border-color: #666;
}
.checkbox label {
font-size: 11px !important;
font-weight: normal !important;
}
.checkbox.disabled label {
color: #cccccc !important;
cursor: default !important;
}
.checkbox.disabled input {
cursor: default !important;
}
#product-listing>ul.inline-span::before,
#product-listing>ul.inline-span::after {
display: none !important;
content: none !important;
}
.cs-cart-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 1055;
opacity: 0; visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cs-cart-overlay.is-active { opacity: 1; visibility: visible; }
.cs-cart-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 440px; max-width: 90vw;
background: #fff;
z-index: 1060;
transform: translateX(100%);
transition: transform 0.3s ease-out;
box-shadow: -4px 0 24px rgba(0,0,0,0.12);
display: flex; flex-direction: column;
}
.cs-cart-panel.is-active { transform: translateX(0); }
.cs-cart-panel__header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e0e0e0;
flex-shrink: 0;
}
.cs-cart-panel__title {
font-size: 12px; font-weight: 600; color: #000;
text-transform: uppercase; letter-spacing: 0.5px;
}
a.cs-cart-panel__title { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 8px; }
a.cs-cart-panel__title:hover { text-decoration: underline; }
.cs-cart-panel__close {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: none; border: none;
font-size: 20px; color: #666; cursor: pointer;
border-radius: 50%; transition: background 0.2s;
}
.cs-cart-panel__close:hover { background: #f0f0f0; color: #000; }
.cs-cart-panel__body {
flex: 1; overflow-y: auto;
padding: 16px 24px 0;
}
.cs-cart-item {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid #f0f0f0;
align-items: start;
}
.cs-cart-item__img img { display: block; width: 60px; height: 60px; object-fit: contain; }
.cs-cart-item__img--placeholder { width: 60px; height: 60px; }
.cs-cart-item__name { font-size: 13px; font-weight: 600; color: #000; margin-bottom: 2px; }
.cs-cart-item__attrs { font-size: 12px; color: #888; margin-bottom: 4px; }
.cs-cart-item__price { font-size: 12px; color: #666; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.cs-cart-item__price--old { text-decoration: line-through; color: #999; font-size: 11px; }
.cs-cart-item__price--current { color: #d00; font-weight: 600; }
.cs-cart-item__qty {
display: flex; align-items: center; gap: 0;
grid-column: 2; justify-self: start; margin-top: 8px;
}
.cs-qty {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid #ddd;
font-size: 16px; cursor: pointer; color: #333;
transition: all 0.15s; user-select: none;
}
.cs-qty:hover { background: #f5f5f5; border-color: #999; }
.cs-qty:active { background: #eee; }
.cs-qty--minus { border-radius: 2px 0 0 2px; }
.cs-qty--plus { border-radius: 0 2px 2px 0; }
.cs-qty--plus[data-max="true"] { opacity: 0.35; pointer-events: none; cursor: default; }
.cs-qty__input {
width: 44px; height: 32px;
text-align: center; border: 1px solid #ddd;
border-left: none; border-right: none;
font-size: 13px; font-family: inherit;
/* Firefox : "appearance: none" ne masque PAS les fleches d'un input[type=number],
   il faut "textfield". Copie synchronisee de includes/template_bottom.php. */
-moz-appearance: textfield;
-webkit-appearance: none; appearance: textfield;
padding: 0;
}
.cs-qty__input::-webkit-inner-spin-button,
.cs-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cs-cart-item__total {
grid-column: 3; grid-row: 1;
font-size: 13px; font-weight: 600; color: #000;
text-align: right; white-space: nowrap;
}
.cs-cart-item__remove {
grid-column: 3; grid-row: 2;
background: none; border: none;
font-size: 14px; color: #999; cursor: pointer;
text-align: right; padding: 0;
}
.cs-cart-item__remove:hover { color: #d32f2f; }
.cs-cart-summary {
padding-top: 16px;
}
.cs-cart-summary__row {
display: flex; justify-content: space-between;
font-size: 14px; font-weight: 600; color: #000;
padding: 8px 0; margin-bottom: 16px;
}
.cs-cart-btn {
display: block; width: 100%; text-align: center;
padding: 14px; font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: 1px;
text-decoration: none; transition: all 0.2s;
box-sizing: border-box; margin-bottom: 8px;
}
.cs-cart-btn--primary {
background: #000; color: #fff; border: none; font-size: 16px;
}
.cs-cart-btn--primary:hover { background: #333; color: #fff; text-decoration: none; }
.cs-cart-btn--link {
background: none; color: #666; border: none;
}
.cs-cart-btn--link:hover { color: #000; text-decoration: underline; }
.cs-cart-panel__footer {
flex-shrink: 0;
border-top: 1px solid #e0e0e0;
padding: 16px 24px 20px;
background: #fff;
}
.cs-cart-panel__subtotal {
display: flex; justify-content: space-between;
font-size: 14px; font-weight: 600; color: #000;
padding: 8px 0; margin-bottom: 16px;
}
.cs-cart-empty {
text-align: center; padding: 48px 16px;
color: #888; font-size: 14px;
}
.cs-cart-empty p { margin: 0 0 16px; }
.cs-cart-empty__login { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 16px; }
.cs-cart-empty__login a { color: #000; font-weight: 600; text-decoration: underline; }
@media (max-width: 767px) {
.cs-cart-panel { width: 100%; max-width: 100%; }
.cs-cart-panel__header { padding: 16px 20px; }
.cs-cart-panel__body { padding: 12px 16px 20px; }
.cs-cart-item { gap: 10px; }
}

.shop-hero {
text-align: center;
padding: 50px 20px 40px;
max-width: 800px;
margin: 0 auto;
}
.shop-hero__badge {
display: inline-block;
background: #111;
color: #fff;
padding: 8px 18px;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 auto 20px;
text-align: center;
}
.shop-hero h1 {
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
margin: 0 0 16px;
letter-spacing: -0.02em;
color: #111;
}
.shop-hero__subtitle {
font-size: clamp(14px, 2vw, 17px);
color: #666;
margin: 0;
line-height: 1.6;
}
.map-section {
width: 100%;
padding: 0;
margin: 0;
}
#map-boutiques {
width: 100%;
height: 400px;
z-index: 1;
}
@media (min-width: 768px) {
#map-boutiques {
height: 500px;
}
}
.shops-container {
max-width: 900px;
margin: 0 auto;
padding: 50px 20px 80px;
}
.shop-row {
display: flex;
gap: 40px;
align-items: center;
padding: 40px 0;
border-bottom: 1px solid #eee;
}
.shop-row:last-child {
border-bottom: none;
}
@media (max-width: 767px) {
.shop-row {
flex-direction: column;
gap: 24px;
}
}
.shop-row__image {
width: 50%;
max-width: 450px;
height: auto;
border-radius: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
@media (max-width: 767px) {
.shop-row__image {
width: 100%;
max-width: 100%;
height: 250px;
}
}
.shop-row__content {
flex: 1;
min-width: 0;
}
.shop-row__name {
font-size: 28px;
font-weight: 700;
color: #111;
margin: 0 0 20px;
letter-spacing: -0.01em;
}
.shop-row__phone {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #111;
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.shop-row__phone:hover {
color: #ff4757;
}
.shop-row__address-block {
margin: 0 0 12px;
}
.shop-row__address-line {
font-size: 15px;
color: #555;
margin: 0 0 4px;
line-height: 1.5;
}
.shop-row__phone-line {
margin: 0 0 24px;
}
.shop-row__hours {
background: #f8f9fa;
border-radius: 0;
padding: 18px 20px;
margin-bottom: 24px;
}
.shop-row__hours-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #888;
margin: 0 0 12px;
}
.shop-row__hours-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.shop-row__hours-row {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #555;
}
.shop-row__hours-row span:first-child {
font-weight: 500;
color: #333;
}
.shop-row__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.shop-row__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: 0;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.shop-row__btn--dark {
background: #111;
color: #fff;
}
.shop-row__btn--dark:hover {
background: #333;
transform: translateY(-2px);
}
.shop-row__btn--light {
background: #f5f5f5;
color: #555;
border: 1px solid #e0e0e0;
}
.shop-row__btn--light:hover {
background: #eee;
color: #333;
}
.about-story {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
max-width: 1100px;
margin: 60px auto;
padding: 0 40px;
align-items: start;
}
.about-story__photo img {
width: 100%;
height: auto;
display: block;
}
.about-story__content {
padding-top: 0;
}
.about-story__subtitle {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
color: #666;
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.about-story__dates {
font-size: 11px;
letter-spacing: 2px;
color: #999;
font-weight: 400;
}
.about-story__dropcap {
float: left;
font-size: 85px;
line-height: 0.85;
font-weight: 700;
color: #111;
margin-right: 18px;
margin-bottom: 8px;
margin-top: 5px;
}
.about-story__content p {
font-size: 17px;
line-height: 1.9;
color: #333;
margin-bottom: 24px;
text-align: justify;
hyphens: auto;
}
.about-story::after {
content: '';
display: block;
height: 2px;
background: #111;
margin-top: 40px;
grid-column: 1 / -1;
}
@media (max-width: 767px) {
.about-story {
grid-template-columns: 1fr;
gap: 30px;
padding: 0 20px;
}
}
.ahi-page {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
.ahi-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
}
.ahi-header__left {
display: flex;
flex-direction: column;
gap: 4px;
}
.ahi-header__title {
font-size: 24px;
font-weight: 500;
color: #000;
margin: 0;
}
.ahi-header__date {
font-size: 13px;
color: #999;
}
.ahi-header__right {
display: flex;
align-items: center;
gap: 12px;
}
.ahi-status {
display: inline-block;
padding: 6px 16px;
font-size: 12px;
letter-spacing: 0.5px;
background: #f5f5f5;
color: #666;
border-radius: 50px;
white-space: nowrap;
}
.ahi-btn-pdf {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: #111;
color: #fff;
border: none;
border-radius: 50px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.5px;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
cursor: pointer;
}
.ahi-btn-pdf:hover {
background: #333;
}
.ahi-btn-pdf svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.ahi-section {
margin-bottom: 28px;
}
.ahi-section__title {
font-size: 14px;
font-weight: 600;
color: #000;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ahi-card {
background: #fff;
border: 1px solid #e8e8e8;
padding: 20px 24px;
}
.ahi-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.ahi-card__label {
font-size: 10px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #999;
display: block;
margin-bottom: 6px;
}
.ahi-card__text {
font-size: 14px;
color: #111;
line-height: 1.6;
}
.ahi-card__text p {
margin: 0;
}
.ahi-prod-header {
display: grid;
grid-template-columns: 1fr 80px 120px;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #eee;
font-size: 10px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #999;
}
.ahi-prod-header__right {
text-align: right;
}
.ahi-prod-row {
display: grid;
grid-template-columns: 1fr 80px 120px;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid #f5f5f5;
align-items: start;
}
.ahi-prod-row:last-child {
border-bottom: none;
}
.ahi-prod-name {
font-size: 14px;
color: #000;
}
.ahi-prod-attr {
font-size: 12px;
color: #999;
margin-top: 2px;
}
.ahi-prod-qty {
font-size: 14px;
color: #111;
text-align: right;
}
.ahi-prod-price {
font-size: 14px;
color: #111;
font-weight: 500;
text-align: right;
}
.ahi-totals {
margin-top: 16px;
margin-left: auto;
width: 280px;
}
.ahi-total-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 14px;
color: #111;
}
.ahi-total-row--grand {
font-weight: 600;
font-size: 16px;
border-top: 2px solid #111;
padding-top: 10px;
margin-top: 6px;
}
.ahi-total-row__title {
color: #666;
}
.ahi-addr {
line-height: 1.7;
font-size: 14px;
color: #111;
}
.ahi-addr strong {
font-weight: 600;
}
.ahi-history {
list-style: none;
margin: 0;
padding: 0;
}
.ahi-history li {
padding: 14px 0;
border-bottom: 1px solid #f5f5f5;
}
.ahi-history li:last-child {
border-bottom: none;
}
.ahi-history__date {
font-size: 11px;
color: #999;
display: block;
margin-bottom: 2px;
}
.ahi-history__status {
font-size: 14px;
font-weight: 500;
color: #000;
}
.ahi-history__comment {
font-size: 13px;
color: #666;
margin-top: 4px;
font-style: italic;
}
.ahi-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 0;
color: #666;
font-size: 13px;
text-decoration: none;
transition: color 0.2s;
}
.ahi-back:hover {
color: #000;
}
.ahi-back svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
@media (max-width: 700px) {
.ahi-grid-2 {
grid-template-columns: 1fr;
}
.ahi-header {
flex-direction: column;
align-items: flex-start;
}
.ahi-header__right {
width: 100%;
justify-content: flex-start;
}
.ahi-prod-header {
display: none;
}
.ahi-prod-row {
grid-template-columns: 1fr auto;
gap: 8px;
}
.ahi-prod-price {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}
.ahi-totals {
width: 100%;
}
}
.adp-delete {
max-width: 500px;
margin: 40px auto;
padding: 0 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.adp-delete__title {
font-size: 24px;
font-weight: 700;
text-align: center;
margin: 0 0 12px 0;
color: #000;
letter-spacing: 1px;
}
.adp-delete__desc {
font-size: 14px;
color: #666;
text-align: center;
margin: 0 0 32px 0;
line-height: 1.6;
}
.adp-delete__card {
border: 1px solid #eee;
margin-bottom: 32px;
}
.adp-delete__card-header {
padding: 16px 20px;
background: #fafafa;
border-bottom: 1px solid #eee;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.adp-delete__card-body {
padding: 20px;
font-size: 14px;
line-height: 1.6;
color: #666;
}
.adp-delete__actions {
display: flex;
gap: 12px;
}
.adp-delete__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid #000;
background: transparent;
color: #000;
text-align: center;
}
.adp-delete__btn:hover {
background: #f5f5f5;
}
.adp-delete__btn--danger {
border-color: #ef4444;
color: #ef4444;
}
.adp-delete__btn--danger:hover {
background: #fef2f2;
}
@media (max-width: 480px) {
.adp-delete__actions {
flex-direction: column;
}
}
.abpf-form {
max-width: 500px;
margin: 40px auto;
padding: 0 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.abpf-form__title {
font-size: 24px;
font-weight: 700;
text-align: center;
margin: 0 0 32px 0;
color: #000;
letter-spacing: 1px;
}
.abpf-form__group {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.abpf-form__label {
width: 130px;
flex-shrink: 0;
font-size: 13px;
font-weight: 500;
color: #000;
letter-spacing: 0.5px;
padding-top: 14px;
text-align: right;
}
.abpf-form__field {
flex: 1;
}
.abpf-form__input {
width: 100%;
padding: 14px 16px;
font-size: 14px;
font-family: inherit;
border: 1px solid #ddd;
background: #fff;
color: #333;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
.abpf-form__input:focus {
border-color: #000;
}
.abpf-form__select {
width: 100%;
padding: 14px 16px;
font-size: 14px;
font-family: inherit;
border: 1px solid #ddd;
background: #fff;
color: #333;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
.abpf-form__select:focus {
border-color: #000;
}
.abpf-form__gender {
flex: 1;
display: flex;
gap: 24px;
padding: 14px 16px;
border: 1px solid #ddd;
}
.abpf-form__gender label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.abpf-form__gender input[type="radio"] {
margin: 0;
}
.abpf-form__checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #333;
cursor: pointer;
padding: 8px 0;
}
.abpf-form__checkbox input[type="checkbox"] {
margin: 0;
width: 16px;
height: 16px;
}
.abpf-form__group--checkbox {
padding-left: 142px;
}
.abpf-form__actions {
display: flex;
gap: 12px;
margin-top: 32px;
}
.abpf-form__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
font-family: inherit;
border: 1px solid #000;
background: transparent;
color: #000;
}
.abpf-form__btn:hover {
background: #f5f5f5;
}
.abpf-form__btn--primary {
background: #000;
color: #fff;
}
.abpf-form__btn--primary:hover {
background: #333;
}
@media (max-width: 599px) {
.abpf-form__group {
flex-direction: column;
gap: 0;
}
.abpf-form__label {
width: auto;
text-align: left;
padding-top: 0;
margin-bottom: 6px;
}
.abpf-form__group--checkbox {
padding-left: 0;
}
.abpf-form__actions {
flex-direction: column;
}
}

:root {
--nc-primary: var(--nv-noir);
--nc-secondary: var(--nv-texte-2);
--nc-muted: var(--nv-muted);
--nc-bg: var(--nv-fond);
--nc-bg-alt: var(--nv-fond-2);
--nc-border: var(--nv-bordure);
--nc-radius: var(--nv-radius);
--nc-transition: 0.2s ease;
--nc-max-width: 1200px;
--nc-spacing-xs: 8px;
--nc-spacing-sm: 16px;
--nc-spacing-md: 24px;
--nc-spacing-lg: 40px;
}
.btn-circleact,
.btn-circlez {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600;
border-radius: 50%;
background: #000;
margin: 0 auto;
color: #fff;
}
.btn-circleact.disabled {
background: #ddd;
color: #999;
}
.stepwizard {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding: 16px 0;
}
.stepwizard-row {
display: flex;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.nc-checkout {
max-width: var(--nc-max-width);
margin: 0 auto;
padding: var(--nc-spacing-md);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.nc-checkout__products {
border: 1px solid var(--nc-border);
border-radius: var(--nc-radius);
margin-bottom: var(--nc-spacing-md);
}
.nc-checkout__product {
display: flex;
align-items: center;
gap: var(--nc-spacing-sm);
padding: var(--nc-spacing-md);
border-bottom: 1px solid var(--nc-border);
}
.nc-checkout__product:last-child { border-bottom: none; }
.nc-checkout__product-qty {
width: 50px;
color: var(--nc-muted);
font-size: 13px;
flex-shrink: 0;
}
.nc-checkout__product-name {
flex: 1;
min-width: 0;
}
.nc-checkout__product-name strong {
color: var(--nc-primary);
font-weight: 500;
font-size: 14px;
}
.nc-checkout__product-attr {
font-size: 12px;
color: var(--nc-secondary);
margin-top: 4px;
}
.nc-checkout__product-price {
font-weight: 500;
font-size: 14px;
color: var(--nc-primary);
white-space: nowrap;
}
.nc-checkout__comments {
background: var(--nc-bg-alt);
padding: var(--nc-spacing-md);
border-radius: var(--nc-radius);
margin-bottom: var(--nc-spacing-md);
font-size: 13px;
color: var(--nc-secondary);
}
.nc-checkout__summary {
background: var(--nc-bg-alt);
padding: var(--nc-spacing-lg);
border-radius: var(--nc-radius);
margin-bottom: var(--nc-spacing-md);
}
.nc-checkout__summary table { width: 100%; border-collapse: collapse; }
.nc-checkout__summary td {
padding: 10px 0;
font-size: 13px;
color: var(--nc-secondary);
}
.nc-checkout__summary td:last-child {
text-align: right;
font-weight: 500;
color: var(--nc-primary);
}
.nc-checkout__summary tr:last-child td {
font-size: 16px;
font-weight: 600;
padding-top: 16px;
border-top: 1px solid var(--nc-border);
color: var(--nc-primary);
}
.nc-checkout__payment-title {
text-align: center;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 400;
color: var(--nc-primary);
margin: var(--nc-spacing-lg) 0 var(--nc-spacing-md);
}
.nc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
transition: var(--nc-transition);
font-family: inherit;
}
.nc-btn--primary {
background: var(--nc-primary);
color: var(--nc-bg);
}
.nc-btn--primary:hover { background: var(--nc-secondary); }
.nc-btn--text {
background: transparent;
color: var(--nc-secondary);
padding: var(--nc-spacing-sm);
}
.nc-btn--text:hover { color: var(--nc-primary); }
.nc-btn--full { width: 100%; }
@media (max-width: 767px) {
.nc-checkout__actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
padding: var(--nc-spacing-sm);
background: var(--nc-bg);
border-top: 1px solid var(--nc-border);
display: flex;
flex-direction: column;
gap: 4px;
}
.nc-checkout { padding-bottom: 130px; }
.nc-checkout__actions-confirm .button,
.nc-checkout__actions-confirm .btn,
.nc-checkout__actions-confirm input[type="submit"],
.nc-checkout__actions-confirm button {
width: 100% !important;
padding: 16px 28px !important;
background: #000 !important;
color: #fff !important;
border: none !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
cursor: pointer !important;
border-radius: 0 !important;
}
}
@media (min-width: 768px) {
.nc-checkout__actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--nc-spacing-lg);
padding-top: var(--nc-spacing-md);
border-top: 1px solid var(--nc-border);
}
.nc-checkout__actions-confirm .button,
.nc-checkout__actions-confirm .btn,
.nc-checkout__actions-confirm input[type="submit"],
.nc-checkout__actions-confirm button {
padding: 16px 48px !important;
background: #000 !important;
color: #fff !important;
border: none !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
cursor: pointer !important;
border-radius: 0 !important;
}
}

.p23 * { box-sizing: border-box; }
.p23 { width: 100%; max-width: 100%; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; }

.contentContainer h1, .product_title { display: none !important; }
.contentContainer { padding: 0 !important; margin: 0 !important; width: 100% !important; }
.contact-hero {
text-align: center;
padding: 60px 20px 40px;
background: #fff;
}
.contact-hero__badge {
display: inline-block;
background: #111;
color: #fff;
padding: 8px 18px;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.contact-hero h1 {
font-size: 32px;
font-weight: 600;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.contact-hero__subtitle {
font-size: 15px;
color: #666;
max-width: 500px;
margin: 0 auto 12px;
}
.contact-hero__hours {
font-size: 13px;
color: #888;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.contact-hero__hours strong {
color: #111;
font-weight: 600;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px 60px;
}
@media (min-width: 768px) {
.contact-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
.contact-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-card {
background: #f8f9fa;
padding: 24px;
border-radius: 0;
}
.contact-card__icon {
width: 40px;
height: 40px;
background: #111;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 18px;
}
.contact-card__title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.contact-card__text {
font-size: 14px;
color: #444;
line-height: 1.6;
}
.contact-card__text a {
color: #111;
text-decoration: none;
border-bottom: 1px solid #111;
}
.contact-card__text a:hover {
border-bottom: 2px solid #111;
}
.contact-photo {
border: 6px solid #111;
padding: 8px;
background: #fff;
}
.contact-photo__img {
width: 100%;
height: auto;
display: block;
}
.contact-success {
text-align: center;
padding: 80px 20px;
max-width: 600px;
margin: 0 auto;
}
.contact-success__icon {
width: 80px;
height: 80px;
background: #111;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-size: 32px;
}
.contact-success h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 12px;
}
.contact-success p {
font-size: 15px;
color: #666;
margin-bottom: 32px;
}
.contact-success__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: #111;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: background 0.2s;
}
.contact-success__btn:hover {
background: #333;
}
.contact-errors {
max-width: 1000px;
margin: 0 auto 20px;
padding: 0 20px;
}
:root {
--npf-primary: var(--nv-noir);
--npf-secondary: var(--nv-texte-2);
--npf-muted: var(--nv-muted);
--npf-bg: var(--nv-fond);
--npf-border: var(--nv-bordure);
--npf-error: var(--nv-erreur);
--npf-success-text: var(--nv-succes);
--npf-success-bg: var(--nv-succes-fond);
--npf-success-border: var(--nv-succes);
--npf-radius: var(--nv-radius);
--npf-transition: 0.25s ease;
}
.contentContainer h1 {
display: none !important;
}
:root {
--npf-primary: var(--nv-noir);
--npf-secondary: var(--nv-texte-2);
--npf-muted: var(--nv-muted);
--npf-bg: var(--nv-fond);
--npf-border: var(--nv-bordure);
--npf-error: var(--nv-erreur);
--npf-radius: var(--nv-radius);
--npf-transition: 0.25s ease;
}
.pn-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 12px;
margin: 0;
list-style: none;
}
@media (min-width: 480px) {
.pn-product-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
padding: 16px;
}
}
@media (min-width: 768px) {
.pn-product-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
}
@media (min-width: 1200px) {
.pn-product-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
}
}
.pn-product-card {
display: flex;
flex-direction: column;
background: #fff;
text-decoration: none;
color: inherit;
border-radius: 8px;
overflow: hidden;
}
.pn-product-card__image-wrapper {
position: relative;
background: #f9f9f9;
aspect-ratio: 1 / 1.2;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border: 3px solid transparent;
transition: border-color 0.3s ease;
}
.pn-product-card__image-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.pn-product-card__info {
padding: 12px 8px;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.pn-product-card__title {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.4;
margin: 0 0 6px;
color: #111;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pn-product-card__title:hover {
color: #555;
}
.pn-product-card__price {
font-size: 12px;
font-weight: 400;
color: #111;
line-height: 1.4;
}
.pn-product-card__price del {
color: #999;
font-weight: 400;
margin-right: 6px;
}
.pn-product-card__price .sale {
color: #d32f2f;
font-weight: 600;
}
.pn-product-card__soldout {
color: #d32f2f;
font-size: 12px;
font-weight: 600;
}
/* Copie du style inline de includes/modules/also_consider.php : les deux doivent
   rester synchronises. Aligne sur le h1 du nom de produit (.p23-title) — poids 700
   comme les h1 du site, en capitales. */
.ac-title-badge {
display: block;
text-align: center;
margin-bottom: 24px;
font-family: inherit;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
color: #000;
text-transform: uppercase;
letter-spacing: 0;
}
.ac-products-grid {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin: 0 -15px;
}
.ac-product-card {
flex: 0 0 auto;
width: 520px;
max-width: 90vw;
padding: 0;
}
@media (max-width: 1400px) {
.ac-product-card {
width: 450px;
}
}
@media (max-width: 1200px) {
.ac-product-card {
width: 380px;
}
}
@media (max-width: 767px) {
.ac-product-card {
width: 100%;
max-width: 450px;
}
}
.ac-product-card__image-wrapper {
display: flex;
align-items: center;
justify-content: center;
background: #f9f9f9;
aspect-ratio: 1 / 1;
overflow: hidden;
margin-bottom: 15px;
padding: 15px;
}
.ac-product-card__image-wrapper img,
.ac-product-card__image {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
mix-blend-mode: multiply;
display: block;
margin: 0 auto;
}
.ac-product-card__name {
display: block;
font-size: 11px;
font-weight: 500;
color: #111;
text-decoration: none;
margin: 10px 0 5px 0;
line-height: 1.3;
}
.ac-product-card__name:hover {
color: #666;
}
.ac-product-card__price {
font-size: 12px;
color: #111;
margin-top: 8px;
}
.ac-product-card__price--special .ac-price-old {
color: #6e6e6e;
text-decoration: line-through;
}
.ac-product-card__price--special .ac-price-new {
color: #111;
font-weight: 500;
}
.pl-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 16px;
margin: 0;
list-style: none;
}
@media (min-width: 768px) {
.pl-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
}
@media (min-width: 1200px) {
.pl-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
}
.pl-product-card {
display: flex;
flex-direction: column;
background: #fff;
text-decoration: none;
color: inherit;
border-radius: 8px;
overflow: hidden;
}
.pl-product-card__image-wrapper {
position: relative;
background: #f9f9f9;
aspect-ratio: 1 / 1.2;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.pl-product-card__image-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.pl-product-card__info {
padding: 12px 8px;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.pl-product-card__title {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.4;
margin: 0 0 6px;
color: #111;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pl-product-card__title:hover {
color: #555;
}
.pl-product-card__price {
font-size: 12px;
font-weight: 400;
color: #111;
line-height: 1.4;
}
.pl-product-card__price del {
color: #999;
font-weight: 400;
margin-right: 6px;
}
.pl-soldout {
color: #FF0000;
}

/* RESET GLOBAL BODY */
body {
margin: 0;
padding: 0;
border: none;
background: #fff;
box-shadow: none;
}

/* ============================================================================
   SURVOL DES VIGNETTES PRODUITS (2026-07-26)
   ----------------------------------------------------------------------------
   Meme liste de zones que le curseur "+" de includes/nc_photo_cursor.php :
   listings categories/marques, nouveautes, soldes, "also consider" de la fiche
   produit, blocs de la page d'accueil, et bande "vus recemment" du footer.
   Au survol la photo s'eclaircit en fondu et respire tres legerement.
   ========================================================================== */
.pl-product-card__image-wrapper img,
.pn-product-card__image-wrapper img,
.ac-product-card__image-wrapper img,
.nvh-tile img,
.nvh-ph img,
.nf-recent__item img {
transition: opacity .45s ease, transform .45s ease;
}
.pl-product-card__image-wrapper:hover img,
.pn-product-card__image-wrapper:hover img,
.ac-product-card__image-wrapper:hover img,
.nvh-tile:hover img,
.nvh-ph:hover img,
.nf-recent__item:hover img {
opacity: .72;
transform: scale(1.02);
}

/* ----------------------------------------------------------------------------
   Fluidite du zoom sur Firefox (2026-08-19)
   ----------------------------------------------------------------------------
   Sans indication contraire, Firefox REDESSINE la photo a chaque image de
   l'animation, a la nouvelle taille. A 436 px de large sur 26 vignettes il
   n'y arrive pas et le zoom saccade — la ou Chrome et un Mac M1 encaissent.
   backface-visibility + translateZ(0) forcent la promotion en calque : la
   photo est calculee UNE fois, puis simplement agrandie par la carte
   graphique.

   Diagnostic obtenu en testant sept pistes une a une dans le Firefox
   concerne : ni le retrait de mix-blend-mode, ni isolation, ni will-change,
   ni la suppression du fondu n'y changeaient quoi que ce soit. Seule la
   suppression du zoom rendait tout fluide — donc c'est bien le redessin a
   l'echelle qui coute, et rien d'autre.

   ATTENTION : translateZ(0) doit etre REPETE dans l'etat survole. L'omettre
   ferait tomber la promotion au moment meme ou elle sert.

   Limite au pointeur fin : c'est la seule situation ou l'effet existe, et
   promouvoir 26 images coute de la memoire video qu'on ne va pas prendre sur
   un telephone pour rien.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .pl-product-card__image-wrapper img,
  .pn-product-card__image-wrapper img,
  .ac-product-card__image-wrapper img,
  .nvh-tile img,
  .nvh-ph img,
  .nf-recent__item img {
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  .pl-product-card__image-wrapper:hover img,
  .pn-product-card__image-wrapper:hover img,
  .ac-product-card__image-wrapper:hover img,
  .nvh-tile:hover img,
  .nvh-ph:hover img,
  .nf-recent__item:hover img {
    transform: translateZ(0) scale(1.02);
  }
}

/* Pointeur grossier (tactile) : aucun etat de survol persistant apres un tap. */
@media (hover: none) {
.pl-product-card__image-wrapper:hover img,
.pn-product-card__image-wrapper:hover img,
.ac-product-card__image-wrapper:hover img,
.nvh-tile:hover img,
.nvh-ph:hover img,
.nf-recent__item:hover img {
opacity: 1;
transform: none;
}
}

@media (prefers-reduced-motion: reduce) {
.pl-product-card__image-wrapper img,
.pn-product-card__image-wrapper img,
.ac-product-card__image-wrapper img,
.nvh-tile img,
.nvh-ph img,
.nf-recent__item img {
transition: none;
transform: none;
}
}


/* ---------------------------------------------------------------------------
   Champs de saisie : plancher a 16px sur petit ecran.  17/08/2026

   Sous 16px, iOS agrandit automatiquement la page des qu on touche un champ
   de saisie, et ne revient jamais en arriere : le visiteur doit alors faire
   defiler lateralement pour finir sa commande.

   Posee en fin de feuille et limitee aux petits ecrans : rien ne change sur
   ordinateur, et il n y a pas a repercuter la valeur dans les styles en ligne
   de chaque composant.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}