/*
Theme Name: NDMedics V2
Theme URI: https://ndmedics.fr
Description: Thème e-commerce médical NDMedics — design épuré, navy/teal, Inter + Roboto Mono.
Version: 2.0.0
Author: NDMedics
Author URI: https://ndmedics.fr
Text Domain: ndmedics-v2
Requires at least: 6.4
Requires PHP: 8.0
Requires Plugins: woocommerce
*/
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* Couleurs primaires */
--color-primary: #0A1628;
--color-primary-dark: #0F2140;
--color-primary-light: #E6F3FA;
/* Couleurs secondaires (teal bleu médical) */
--color-secondary: #0077B6;
--color-secondary-dark: #005A8C;
--color-secondary-light:#E6F3FA;
/* Accent doré */
--color-gold: #C4A35A;
--color-gold-light: #F5F0E3;
--color-mid-gray: #6B7B8D;
/* Neutres */
--color-white: #FFFFFF;
--color-bg: #F8FAFB;
--color-text: #2C3E50;
--color-text-light: #637381;
--color-text-muted: #888888;
--color-border: #E2E8EF;
--color-border-light: #F0F4F8;
/* États */
--color-success: #27AE60;
--color-success-bg: #EAFAF1;
--color-warning: #F39C12;
--color-warning-bg: #FEF9E7;
--color-warning-border: #f8c971;
--color-error: #E74C3C;
--color-error-bg: #FDEDEC;
/* Typographie */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Roboto Mono', 'Courier New', monospace;
/* Tailles texte */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
/* Graisse */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* Espacement */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* Layout */
--container-max: 1280px;
--container-pad: 24px;
--header-h: 72px;
/* Bordures */
--radius-sm: 4px;
--radius: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* Ombres */
--shadow-xs: 0 1px 2px rgba(27,58,92,0.05);
--shadow-sm: 0 1px 3px rgba(27,58,92,0.08), 0 1px 2px rgba(27,58,92,0.04);
--shadow-md: 0 4px 6px rgba(27,58,92,0.07), 0 2px 4px rgba(27,58,92,0.04);
--shadow-lg: 0 10px 15px rgba(27,58,92,0.08), 0 4px 6px rgba(27,58,92,0.04);
--shadow-xl: 0 20px 25px rgba(27,58,92,0.10), 0 8px 10px rgba(27,58,92,0.04);
--shadow-secondary: 0 4px 14px rgba(0,119,182,0.25);
--shadow-secondary-hover: 0 6px 20px rgba(0,119,182,0.35);
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
/* Z-index */
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
/* ── Formulaires — champs ─────────────────────────────────── */
--form-font-size: var(--text-sm);
--form-field-padding: 10px 14px;
--form-border-width: 1.5px;
--form-border-color: var(--color-border);
--form-border-radius: var(--radius-md);
--form-bg: var(--color-bg);
--form-bg-focus: var(--color-white);
--form-border-focus: var(--color-secondary);
--form-shadow-focus: 0 0 0 3px rgba(0,137,123,0.12);
--form-text-color: var(--color-text);
--form-placeholder-color: #9CA3AF;
/* ── Formulaires — labels ─────────────────────────────────── */
--form-label-size: var(--text-sm);
--form-label-weight: var(--weight-semibold);
--form-label-color: var(--color-text);
--form-label-gap: 6px;
/* ── Formulaires — layout ─────────────────────────────────── */
--form-row-gap: var(--space-5);
--form-textarea-min-h: 100px;
--form-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23637381'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
--form-select-pad-right: 36px;
/* ── Formulaires — bouton submit ──────────────────────────── */
--form-submit-padding: 12px var(--space-6);
--form-submit-letter-spacing: 0.02em;
/* ── Formulaires — variante sombre (section contact) ─────── */
--form-dark-bg: rgba(255,255,255,0.1);
--form-dark-bg-focus: rgba(255,255,255,0.15);
--form-dark-border: rgba(255,255,255,0.2);
--form-dark-border-focus: var(--color-secondary);
--form-dark-text: var(--color-white);
--form-dark-placeholder: rgba(255,255,255,0.4);
--form-dark-label: rgba(255,255,255,0.9);
--form-dark-textarea-min-h: 120px;
/* ── Teintes complémentaires ──────────────────────────────── */
--color-primary-deeper: #050e1b;
--color-primary-medium: #1a3a5c;
--color-secondary-deep: #003f6b;
--color-secondary-medium: #0099d6;
--color-success-dark: #2E7D32;
--color-success-border: #a9dfbf;
--color-secondary-border: #b3d9ef;
--color-error-dark: #c0392b;
--color-star: #F59E0B;
/* ── Texte sur fond sombre (sections navy/teal) ───────────── */
--color-text-on-dark: rgba(219,234,254,0.9);
--color-text-on-dark-high: rgba(219,234,254,0.85);
--color-text-on-dark-medium: rgba(219,234,254,0.8);
--color-text-on-dark-soft: rgba(219,234,254,0.75);
--color-text-on-dark-light: rgba(219,234,254,0.7);
--color-text-on-dark-muted: rgba(219,234,254,0.6);
--color-text-on-dark-subtle: rgba(219,234,254,0.5);
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
[hidden] { display: none !important; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: 1.6;
color: var(--color-text);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; line-height: normal; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ============================================================
3. DESIGN TOKEN UTILITY CLASSES
(Correspond exactement à design-tokens.css des mockups)
============================================================ */
/* Référence produit — Roboto Mono */
.ref-mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-primary);
letter-spacing: 0.02em;
}
/* Badge stock */
.badge-stock {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
padding: 2px 8px;
border-radius: var(--radius-full);
white-space: nowrap;
flex-shrink: 0;
}
.badge-stock--available { background: var(--color-success-bg); color: var(--color-success); }
.badge-stock--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-stock--unavail { background: var(--color-error-bg); color: var(--color-error); }
/* Point de couleur dans le badge stock (dot) */
.badge-stock__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.badge-stock--available .badge-stock__dot { background: var(--color-success); }
.badge-stock--warning .badge-stock__dot { background: var(--color-warning); }
.badge-stock--unavail .badge-stock__dot { background: var(--color-error); }
/* Nav link (design-tokens) — utilisé dans les menus simples */
.nav-link {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
text-decoration: none;
padding: 4px 0;
border-bottom: 2px solid transparent;
transition: all var(--transition-fast);
}
.nav-link:hover,
.nav-link.active {
color: var(--color-primary);
border-bottom-color: var(--color-secondary);
}
/* ============================================================
3b. LAYOUT UTILITIES
============================================================ */
.ndm-container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
/* ============================================================
4. BUTTONS
============================================================ */
.ndm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1;
padding: 10px 20px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
white-space: nowrap;
}
.ndm-btn--primary {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.ndm-btn--primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
}
.ndm-btn--teal {
background: var(--color-secondary-dark);
color: var(--color-white);
border-color: var(--color-secondary-dark);
}
.ndm-btn--teal:hover {
background: var(--color-secondary-deep);
border-color: var(--color-secondary-deep);
color: var(--color-white);
}
.ndm-btn--outline {
background: transparent;
color: var(--color-white);
border-color: rgba(255,255,255,0.4);
}
.ndm-btn--outline:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.7);
color: var(--color-white);
}
.ndm-btn--outline-primary {
background: transparent;
color: var(--color-secondary);
border-color: var(--color-secondary);
}
.ndm-btn--outline-primary:hover {
background: var(--color-secondary);
color: var(--color-white);
}
.ndm-btn--ghost {
background: transparent;
color: var(--color-primary);
border-color: var(--color-border);
}
.ndm-btn--ghost:hover {
background: var(--color-primary-light);
color: var(--color-primary);
}
.ndm-btn--lg { padding: 14px 28px; font-size: var(--text-base); }
.ndm-btn--sm { padding: 7px 14px; font-size: var(--text-xs); }
/* ============================================================
5. HEADER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
height: var(--header-h);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
gap: var(--space-8);
}
/* Logo */
.site-logo img { height: 65px; width: auto; display: block; }
/* Nav principale */
.site-nav {
display: flex;
align-items: center;
gap: var(--space-8);
}
.site-nav__item { position: relative; }
.site-nav__link {
position: relative;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
padding: 4px 0;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color var(--transition-fast);
cursor: pointer;
background: none;
border: none;
}
.site-nav__link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--color-secondary);
transition: width var(--transition-base);
}
.site-nav__link:hover,
.site-nav__link.is-active { color: var(--color-primary); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { width: 100%; }
/* Dropdown */
.site-nav__dropdown {
display: none;
position: absolute;
top: calc(100% + 12px);
left: 0;
width: 240px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-2) 0;
z-index: var(--z-dropdown);
}
/* Pont invisible au-dessus du dropdown — comble le gap de 12px
pour que le hover soit maintenu quand la souris descend vers le menu */
.site-nav__dropdown::before {
content: '';
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
/* Dropdown boutique — 2 colonnes, plus large */
.site-nav__dropdown--boutique {
width: 480px;
}
.site-nav__dropdown-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item.dropdown-open .site-nav__dropdown { display: block; }
.site-nav__dropdown-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 10px var(--space-4);
font-size: var(--text-sm);
color: var(--color-text);
transition: background var(--transition-fast), color var(--transition-fast);
}
.site-nav__dropdown-item:hover {
background: var(--color-primary-light);
color: var(--color-primary);
}
.site-nav__dropdown-item--all {
font-weight: var(--weight-semibold);
color: var(--color-primary);
}
.site-nav__dropdown-divider {
border: none;
border-top: 1px solid var(--color-border-light);
margin: var(--space-1) 0;
}
.site-nav__arrow {
color: var(--color-text-light);
transition: transform var(--transition-base);
}
.site-nav__item:hover .site-nav__arrow { transform: rotate(180deg); }
.site-nav__icon { color: var(--color-text-light); }
/* Header actions */
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.header-phone {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-primary);
transition: color var(--transition-fast);
}
.header-phone:hover { color: var(--color-secondary); }
.header-phone svg { width: 16px; height: 16px; }
.header-sep {
width: 1px;
height: 20px;
background: var(--color-border);
}
.header-account {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 8px 12px;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.header-account:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
.header-account svg { width: 16px; height: 16px; }
.header-cart {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--color-text);
border-radius: var(--radius-md);
transition: color var(--transition-fast), background var(--transition-fast);
}
.header-cart:hover { color: var(--color-primary); background: var(--color-primary-light); }
.header-cart svg { width: 20px; height: 20px; }
.header-cart-count {
position: absolute;
top: 0;
right: 0;
transform: translate(25%, -25%);
background: var(--color-secondary);
color: var(--color-white);
font-size: 10px;
font-weight: var(--weight-bold);
min-width: 18px;
height: 18px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
line-height: 1;
}
.header-cart-count:empty,
.header-cart-count:is([data-count="0"]) { display: none; }
/* ── Animation panier après ajout AJAX ──────────────────────────────────── */
@keyframes ndm-cart-icon-bump {
0% { transform: scale(1) rotate(0deg); }
20% { transform: scale(1.35) rotate(-12deg); }
45% { transform: scale(1.25) rotate(8deg); }
65% { transform: scale(1.3) rotate(-6deg); }
80% { transform: scale(1.1) rotate(3deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes ndm-cart-badge-pop {
0% { transform: translate(25%, -25%) scale(1); background: var(--color-secondary); }
35% { transform: translate(25%, -25%) scale(1.6); background: var(--color-primary); }
70% { transform: translate(25%, -25%) scale(0.9); background: var(--color-primary); }
100% { transform: translate(25%, -25%) scale(1); background: var(--color-secondary); }
}
@keyframes ndm-cart-ring {
0% { box-shadow: 0 0 0 0 rgba(27,58,92,0.55); background: var(--color-primary-light); color: var(--color-primary); }
60% { box-shadow: 0 0 0 10px rgba(27,58,92,0); background: var(--color-primary-light); color: var(--color-primary); }
100% { box-shadow: 0 0 0 0 rgba(27,58,92,0); background: transparent; color: var(--color-text); }
}
#header-cart-btn.is-cart-bumped {
animation: ndm-cart-ring 0.65s ease forwards;
}
#header-cart-btn.is-cart-bumped svg {
animation: ndm-cart-icon-bump 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
#header-cart-btn.is-cart-bumped .header-cart-count {
animation: ndm-cart-badge-pop 0.55s ease both;
}
/* Hamburger */
.site-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
transition: background var(--transition-fast);
}
.site-hamburger:hover { background: var(--color-bg); }
.site-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: transform var(--transition-base), opacity var(--transition-base);
}
.site-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-hamburger.is-active span:nth-child(2) { opacity: 0; }
.site-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Search overlay */
.site-search {
display: none;
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
padding: var(--space-4) 0;
}
.site-search.is-open { display: block; }
.site-search__form {
display: flex;
align-items: center;
gap: var(--space-3);
}
.site-search__icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--color-text-muted);
}
.site-search__input {
flex: 1;
padding: 8px var(--space-3);
font-family: var(--font-sans);
font-size: var(--text-sm);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.site-search__input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
/* ============================================================
6. HERO
============================================================ */
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 80%, rgba(0,119,182,.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(196,163,90,.15) 0%, transparent 50%);
pointer-events: none;
}
.hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-secondary) 100%);
inset: 0;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero__bg-wave {
position: absolute;
inset: 0;
display: flex;
align-items: center;
overflow: hidden;
opacity: 0.08;
pointer-events: none;
}
.hero__bg-wave svg {
width: 200%;
height: 120px;
flex-shrink: 0;
}
.hero__bg-circle-1 {
position: absolute;
right: -8rem;
top: -8rem;
width: 24rem;
height: 24rem;
border-radius: 50%;
background: var(--color-secondary);
opacity: 0.05;
pointer-events: none;
}
.hero__bg-circle-2 {
position: absolute;
left: -4rem;
bottom: 0;
width: 16rem;
height: 16rem;
border-radius: 50%;
background: var(--color-secondary);
opacity: 0.05;
pointer-events: none;
}
.hero__inner {
position: relative;
z-index: 1;
padding-block: 80px;
max-width: 900px;
margin-inline: auto;
text-align: center;
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
color: var(--color-gold);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 8px 20px;
border-radius: var(--radius-full);
border: 1px solid rgba(255,255,255,0.2);
margin-bottom: var(--space-8);
}
.hero__badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-gold);
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%,100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hero__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: var(--weight-extrabold);
color: var(--color-white);
line-height: 1.15;
margin-bottom: var(--space-5);
}
.hero__title-accent { color: var(--color-gold); }
.hero__desc {
font-size: var(--text-lg);
color: var(--color-text-on-dark-high);
line-height: 1.6;
margin-bottom: var(--space-8);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.hero__stats {
display: flex;
gap: var(--space-16);
justify-content: center;
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid rgba(255,255,255,0.15);
}
.hero__stat-value {
display: block;
font-size: var(--text-3xl);
font-weight: var(--weight-extrabold);
color: var(--color-gold);
}
.hero__stat-label {
font-size: var(--text-sm);
color: rgba(255,255,255,0.7);
}
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
}
.hero__trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
color: var(--color-text-on-dark-medium);
}
.hero__trust-item svg { color: var(--color-secondary); flex-shrink: 0; }
@keyframes eeg-wave-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.hero__bg-wave svg { animation: eeg-wave-scroll 20s linear infinite; }
/* ============================================================
7. TRUST BAR (5 arguments)
============================================================ */
.trust-bar {
background: var(--color-primary);
border-top: 3px solid var(--color-gold);
border-bottom: none;
position: relative;
overflow: hidden;
padding: 3em;
}
.trust-bar::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,119,182,0.18) 0%, transparent 70%);
pointer-events: none;
}
.trust-bar__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
padding-block: 0;
position: relative;
z-index: 1;
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
padding: var(--space-8);
position: relative;
transition: background var(--transition-base);
}
.trust-item:hover { background: rgba(255,255,255,0.04); }
.trust-item + .trust-item::before {
content: '';
position: absolute;
left: 0;
top: 15%;
height: 70%;
width: 1px;
background: rgba(255,255,255,0.12);
}
.trust-item__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-white);
background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
box-shadow: 0 6px 20px rgba(0,119,182,0.45);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.trust-item:hover .trust-item__icon {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 10px 28px rgba(0,119,182,0.55);
}
.trust-item__icon--primary { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); }
.trust-item__icon--secondary { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); }
.trust-item__icon svg { width: 26px; height: 26px; color: var(--color-white); }
.trust-item__icon--primary svg { color: var(--color-white); }
.trust-item__icon--secondary svg { color: var(--color-white); }
.trust-item__content {
display: flex;
flex-direction: column;
gap: 2px;
}
.trust-item__value {
display: block;
font-size: var(--text-base);
font-weight: var(--weight-extrabold);
color: var(--color-gold);
line-height: 1.1;
letter-spacing: -0.01em;
}
.trust-item__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-white);
margin-bottom: 0;
line-height: 1.3;
}
.trust-item__desc {
font-size: var(--text-xs);
color: rgba(255,255,255,0.5);
line-height: 1.4;
}
/* ============================================================
8. SECTION HEADERS & GENERICS
============================================================ */
.section-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-secondary);
margin-bottom: var(--space-2);
}
.section-title {
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
color: var(--color-primary);
line-height: 1.2;
}
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-10);
gap: var(--space-4);
}
.section-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-secondary);
transition: color var(--transition-fast);
white-space: nowrap;
}
.section-link:hover { color: var(--color-secondary-dark); }
.section-link svg { width: 16px; height: 16px; }
.ndm-section {
padding-block: var(--space-16);
}
.ndm-section--bg {
background: var(--color-bg);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* ============================================================
9. CATEGORY CARDS (homepage)
============================================================ */
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.cat-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: clip;
transition: all var(--transition-slow);
display: flex;
flex-direction: column;
text-decoration: none;
cursor: pointer;
}
.cat-card:hover {
border-color: transparent;
box-shadow: 0 20px 56px rgba(10,22,40,.14), 0 4px 20px rgba(124,58,237,.13);
transform: translateY(-6px);
}
.cat-card--alt { background: var(--color-white); }
.cat-card__header {
height: 140px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.cat-card__header::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.12) 0%, transparent 60%);
pointer-events: none;
}
.cat-card__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.25;
transition: opacity var(--transition-base);
}
.cat-card:hover .cat-card__bg { opacity: 0.38; }
.cat-card__icon {
width: 68px;
height: 68px;
border-radius: var(--radius-lg);
background: rgba(255,255,255,0.15);
backdrop-filter: blur(6px);
border: 1.5px solid rgba(255,255,255,0.35);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: transform var(--transition-base), background var(--transition-base);
flex-shrink: 0;
}
.cat-card:hover .cat-card__icon {
background: rgba(255,255,255,0.25);
transform: scale(1.1) translateY(-3px);
}
.cat-card__icon--navy { background: rgba(255,255,255,0.15); }
.cat-card__icon--teal { background: rgba(255,255,255,0.15); }
.cat-card__icon svg { width: 34px; height: 34px; color: var(--color-white); }
.cat-card__icon--primary svg { color: var(--color-white); }
.cat-card__icon--secondary svg { color: var(--color-white); }
.cat-card__body {
padding: var(--space-6) var(--space-6) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.cat-card__title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 0;
transition: color var(--transition-fast);
}
.cat-card:hover .cat-card__title { color: var(--color-secondary); }
.cat-card__desc {
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.5;
margin-bottom: 0;
}
.cat-card__link {
margin-top: auto;
padding-top: var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
display: inline-flex;
align-items: center;
gap: 4px;
border-top: 1px solid var(--color-border);
}
.cat-card__link svg { width: 15px; height: 15px; transition: transform var(--transition-fast); }
.cat-card:hover .cat-card__link svg { transform: translateX(4px); }
/* Gradients couleur spectre par position */
.cat-card:nth-child(1) .cat-card__header { background: linear-gradient(135deg, #7C3AED 0%, #1E1040 100%); }
.cat-card:nth-child(1) .cat-card__link { color: #7C3AED; }
.cat-card:nth-child(2) .cat-card__header { background: linear-gradient(135deg, #06B6D4 0%, #072030 100%); }
.cat-card:nth-child(2) .cat-card__link { color: #0891B2; }
.cat-card:nth-child(3) .cat-card__header { background: linear-gradient(135deg, #10B981 0%, #052E1C 100%); }
.cat-card:nth-child(3) .cat-card__link { color: #059669; }
.cat-card:nth-child(4) .cat-card__header { background: linear-gradient(135deg, #F59E0B 0%, #1C0E00 100%); }
.cat-card:nth-child(4) .cat-card__link { color: #D97706; }
.cat-card:nth-child(5) .cat-card__header { background: linear-gradient(135deg, #F97316 0%, #1C0800 100%); }
.cat-card:nth-child(5) .cat-card__link { color: #EA580C; }
.cat-card:nth-child(6) .cat-card__header { background: linear-gradient(135deg, #EC4899 0%, #1A0010 100%); }
.cat-card:nth-child(6) .cat-card__link { color: #DB2777; }
/* ============================================================
10. PAGE HEADERS (breadcrumb bar)
============================================================ */
.page-header {
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
}
.page-header__inner {
padding-block: var(--space-4);
}
.page-header__breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-light);
margin-bottom: var(--space-1);
}
.page-header__breadcrumb a {
color: var(--color-text-light);
transition: color var(--transition-fast);
}
.page-header__breadcrumb a:hover { color: var(--color-primary); }
.page-header__breadcrumb .current {
color: var(--color-primary);
font-weight: var(--weight-medium);
}
.page-header__breadcrumb svg { width: 14px; height: 14px; flex-shrink: 0; }
.page-header__title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
/* Page header navy (WC pages) */
.page-header--wc {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-bottom: none;
}
.page-header--wc .page-header__inner { padding-block: var(--space-10); }
.page-header--wc .page-header__title { color: var(--color-white); font-size: var(--text-3xl); }
.page-header--wc .page-header__desc { color: var(--color-text-on-dark-medium); margin-top: var(--space-2); }
.page-header--wc .page-header__breadcrumb a,
.page-header--wc .page-header__breadcrumb { color: rgba(255,255,255,0.6); }
.page-header--wc .page-header__breadcrumb a:hover { color: var(--color-white); }
.page-header--wc .page-header__breadcrumb .current { color: rgba(255,255,255,0.9); }
/* ============================================================
11. SHOP LAYOUT
============================================================ */
.wc-page-content { background: var(--color-bg); }
.wc-page-content > .ndm-container { padding-block: var(--space-8); }
.shop-layout {
display: flex;
gap: var(--space-8);
align-items: flex-start;
}
/* Sidebar */
.shop-sidebar {
width: 260px;
flex-shrink: 0;
position: sticky;
top: calc(var(--header-h) + 24px);
}
.shop-sidebar-block {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-3);
margin-bottom: var(--space-3);
}
.shop-sidebar-block__title {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-primary);
margin-bottom: var(--space-2);
padding: 0 var(--space-2);
}
.shop-cat-nav__list { display: flex; flex-direction: column; gap: 1px; }
.shop-cat-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
background: transparent;
border: 1px solid transparent;
transition: all var(--transition-fast);
}
.shop-cat-nav__link:hover { background: var(--color-primary-light); color: var(--color-primary); }
.shop-cat-nav__link.is-active {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
/* Select catégories mobile — injecté dans shop-main, caché sur desktop */
.shop-cat-mobile {
display: none;
margin-bottom: var(--space-4);
}
.shop-cat-select {
width: 100%;
padding: var(--form-field-padding);
border: 1px solid var(--form-border-color);
border-radius: var(--form-border-radius);
font-size: var(--form-font-size);
color: var(--form-text-color);
background: var(--color-white);
}
/* Main shop zone */
.shop-main { flex: 1; min-width: 0; }
/* Shop toolbar */
.shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.shop-toolbar .woocommerce-result-count {
order: 1;
font-size: var(--text-sm);
color: var(--color-text-muted);
font-weight: var(--weight-medium);
margin: 0;
}
.shop-toolbar .woocommerce-ordering {
order: 2;
margin-left: auto;
}
.shop-toolbar .woocommerce-ordering select {
padding: 6px 10px;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
color: var(--color-text);
background: var(--color-white);
outline: none;
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.shop-toolbar .woocommerce-ordering select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
/* WooCommerce product grid — neutralise float-layout WC et force CSS Grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-5) !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
/* reset clearfix que WC applique via ::before/::after */
clear: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
display: none !important;
}
/* ============================================================
12. PRODUCT CARDS (NDM V2 custom template)
============================================================ */
/* List reset — annule les floats WC par défaut (le fond/border/shadow viennent de .ndm-product-card) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
/* NE PAS forcer background/border/shadow ici — .ndm-product-card les gère */
}
/* Card wrapper — le lui-même est la carte (plus de __link global) */
.ndm-product-card {
display: flex;
flex-direction: column;
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.ndm-product-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(10,22,40,.15);
border-color: var(--color-secondary);
}
/* Image zone — lien cliquable, ratio aligné sur woocommerce_thumbnail (480×359, cf. functions.php) */
.ndm-product-card__img {
display: block;
width: 240px;
margin: auto;
aspect-ratio: 480 / 359;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, var(--color-bg), var(--color-primary-light));
position: relative;
text-decoration: none;
}
.ndm-product-card__photo {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
display: block;
transition: transform var(--transition-slow);
}
.ndm-product-card:hover .ndm-product-card__photo {
transform: scale(1.03);
}
.ndm-product-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--color-border);
}
/* Card body */
.ndm-product-card__body {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--space-2);
padding: var(--space-4);
}
/* Lien titre — stretched link : le ::after couvre toute la carte */
.ndm-product-card__title-link {
text-decoration: none;
color: inherit;
}
.ndm-product-card__title-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
}
/* Éléments interactifs au-dessus du stretched link */
.ndm-product-card__img,
.ndm-product-card .ndm-product-btn,
.ndm-product-card .ndm-add-to-quote {
position: relative;
z-index: 1;
}
/* SKU + Stock row */
.ndm-product-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.ndm-product-card__sku {
/* Inherits .ref-mono — override size for card context */
font-size: var(--text-xs);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Stock badge */
.stock-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
padding: 2px 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
white-space: nowrap;
}
.stock-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.stock-badge--available { background: var(--color-success-bg); color: var(--color-success); }
.stock-badge--available .stock-badge__dot { background: var(--color-success); }
.stock-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.stock-badge--warning .stock-badge__dot { background: var(--color-warning); }
.stock-badge--unavail { background: var(--color-error-bg); color: var(--color-error); }
/* Product title */
.ndm-product-card__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-primary);
line-height: 1.35;
margin: 0;
}
/* Short description */
.ndm-product-card__desc {
font-size: var(--text-xs);
color: var(--color-text-light);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Price + Button footer */
.ndm-product-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-light);
}
.ndm-product-card__price {
flex: 1;
min-width: 0;
}
.ndm-product-card__price[data-tooltip] {
position: relative;
cursor: help;
}
.ndm-product-card__price .price,
.ndm-product-card__price .woocommerce-Price-amount {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
display: block;
}
.price-label-hidden {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.price-login-link {
display: block;
font-size: var(--text-xs);
color: var(--color-secondary);
text-decoration: underline;
margin-top: var(--space-1);
}
.loop-card-actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Add to cart / devis button (loop) */
.ndm-product-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--color-secondary);
color: var(--color-white);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 8px 12px;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: background var(--transition-fast);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.ndm-product-btn:hover { background: var(--color-secondary-dark); color: var(--color-white); }
.ndm-product-btn--devis { background: var(--color-primary); color: var(--color-white); }
.ndm-product-btn--devis:hover:not(:disabled) { background: var(--color-primary-dark); color: var(--color-white); }
.ndm-product-btn--devis.is-in-quote {
background: var(--color-primary-light);
color: var(--color-primary);
cursor: default;
}
/* Product badges */
.product-card__badge {
position: absolute;
top: var(--space-3);
left: var(--space-3);
max-width: calc(100% - 2 * var(--space-3));
background: var(--color-primary);
color: var(--color-white);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 3px 10px;
border-radius: var(--radius-full);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 2;
}
.product-card__badge--cond { background: var(--color-secondary); }
/* Legacy compatibility */
.product-sku-badge {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-primary);
letter-spacing: 0.02em;
padding: 0 var(--space-4);
margin-bottom: var(--space-1);
}
.price-hidden {
font-size: var(--text-sm);
color: var(--color-text-light);
padding: var(--space-2) var(--space-4) var(--space-4);
display: block;
}
/* Pagination */
.woocommerce-pagination {
margin-top: var(--space-8);
display: flex;
justify-content: center;
}
.woocommerce-pagination ul {
display: flex;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
background: var(--color-white);
transition: all var(--transition-fast);
}
.woocommerce-pagination ul li a:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.woocommerce-pagination ul li span.current {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
/* ============================================================
13. SINGLE PRODUCT
============================================================ */
/*
* WooCommerce layout CSS flotte div.images (left 48%) et div.summary (right 48%)
* et utilise .woocommerce-tabs { clear: both } pour réinitialiser.
* Puisque notre template remplace .woocommerce-tabs par .product-tabs-section,
* on convertit le layout en CSS grid pour éviter les conflits de flottants.
*/
.woocommerce div.product,
.woocommerce-page div.product {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content auto;
gap: var(--space-4);
align-items: start;
margin-bottom: var(--space-12);
}
/* Galerie et résumé : annuler les floats WC + placement explicite dans la grille */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce-page div.product .woocommerce-product-gallery,
.woocommerce-page div.product div.images {
float: none !important;
width: auto !important;
grid-column: 1;
grid-row: 1;
margin-bottom: 0 !important;
}
.woocommerce-page div.product .woocommerce-product-gallery .woocommerce-product-gallery__image{
border-radius: var(--radius-md);
}
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
float: none !important;
width: auto !important;
clear: none !important;
grid-column: 2;
grid-row: 1 / -1;
margin-bottom: 0 !important;
}
/* Upsells et produits liés : pleine largeur, lignes suivantes (implicites) */
.woocommerce div.product .upsells,
.woocommerce div.product .related,
.woocommerce-page div.product .upsells,
.woocommerce-page div.product .related {
grid-column: 1 / -1;
clear: both; /* fallback si grid ne s'applique pas */
}
/* Onglets : juste sous l'image, même largeur que la colonne galerie (desktop) */
.woocommerce div.product .product-tabs-section,
.woocommerce-page div.product .product-tabs-section {
grid-column: 1;
grid-row: 2;
clear: both; /* fallback si grid ne s'applique pas */
}
.product-single-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: start;
margin-bottom: var(--space-12);
}
/* Gallery */
.product-gallery__main {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
overflow: hidden;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.product-gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
margin-top: var(--space-3);
}
.product-gallery__thumb {
aspect-ratio: 1;
background: var(--color-white);
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
cursor: pointer;
transition: border-color var(--transition-fast);
}
.product-gallery__thumb:hover { border-color: var(--color-secondary); }
.product-gallery__thumb.is-active { border-color: var(--color-primary); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Product summary */
.product-summary {}
.product-summary .product_title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-primary);
line-height: 1.2;
margin-bottom: var(--space-3);
font-family: var(--font-sans);
}
/* SKU block — boîte grise avec ref-mono + bouton copier (mockup produit) */
.product-sku-block {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 10px var(--space-4);
margin-bottom: var(--space-5);
}
.product-sku-block__label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
white-space: nowrap;
}
.product-sku-block__ref {
font-size: 15px; /* légèrement plus grand que text-sm */
}
.product-sku-block__copy {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 2px;
cursor: pointer;
color: var(--color-text-muted);
transition: color var(--transition-fast);
border-radius: var(--radius);
}
.product-sku-block__copy:hover { color: var(--color-secondary); }
.product-sku-block__copy svg { width: 16px; height: 16px; }
/* Masquer le sku_wrapper WooCommerce par défaut (remplacé par product-sku-block) */
.product-summary .sku_wrapper { display: none; }
/* Bandeau stock J+1 — fond vert pâle sous le bloc SKU */
.product-stock-banner {
display: flex;
align-items: flex-start;
gap: var(--space-2);
background: var(--color-success-bg);
border: 1px solid var(--color-success-border);
border-radius: var(--radius-lg);
padding: 8px 12px;
margin-bottom: var(--space-5);
}
.product-stock-banner__icon {
color: var(--color-success);
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 2px;
}
.product-stock-banner__status {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-success);
}
.product-stock-banner__info {
font-size: var(--text-xs);
color: var(--color-success);
}
.product-stock-banner--deferred {
background: var(--color-warning-bg);
border-color: var(--color-warning-border);
}
.product-stock-banner--deferred .product-stock-banner__icon,
.product-stock-banner--deferred .product-stock-banner__status,
.product-stock-banner--deferred .product-stock-banner__info {
color: var(--color-warning);
}
/* Description produit — bloc entre la purchase card et les onglets */
.product-description {
display: block;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
padding: var(--space-4) var(--space-5);
}
.product-description__title {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin: 0 0 var(--space-3);
}
.product-description p {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.7;
margin: 0 0 var(--space-3);
}
.product-description p:last-child { margin-bottom: 0; }
.product-description ul,
.product-description ol {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.7;
padding-left: var(--space-5);
margin: 0 0 var(--space-3);
}
.product-description li { margin-bottom: var(--space-1); }
.product-description strong { font-weight: var(--weight-semibold); color: var(--color-primary); }
.product-summary .price {
font-size: var(--text-3xl);
font-weight: var(--weight-extrabold);
color: var(--color-primary);
margin-bottom: var(--space-5);
display: block;
}
.product-summary .woocommerce-Price-amount { color: var(--color-primary); }
/* Masquer le bloc prix WC par défaut — remplacé par la purchase card */
.single-product .summary > p.price { display: none !important; }
/* Masquer les notices WC sur la fiche produit */
.single-product .woocommerce-notices-wrapper { display: none !important; }
.product-summary .stock {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
margin-bottom: var(--space-4);
padding: 4px 12px;
border-radius: var(--radius-full);
display: inline-block;
}
.product-summary .in-stock { background: var(--color-success-bg); color: var(--color-success); }
.product-summary .out-of-stock { background: var(--color-error-bg); color: var(--color-error); }
.product-summary .woocommerce-product-details__short-description {
display: none;
}
/* Qty + add to cart */
.product-summary .quantity {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.product-summary .qty {
width: 72px;
padding: var(--form-field-padding);
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--form-border-radius);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--form-text-color);
text-align: center;
outline: none;
}
.product-summary .qty:focus { border-color: var(--form-border-focus); }
.product-summary .single_add_to_cart_button {
flex: 1;
padding: 14px 24px;
background: var(--color-secondary);
color: var(--color-white);
border: none;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background var(--transition-fast);
text-align: center;
}
.product-summary .single_add_to_cart_button:hover { background: var(--color-secondary-dark); }
/* Add-to-cart : état "ajouté" */
.ndm-product-btn.is-added,
.product-summary .single_add_to_cart_button.is-added {
background: var(--color-success-dark) !important;
border-color: var(--color-success-dark) !important;
color: var(--color-white) !important;
pointer-events: none;
animation: ndm-added-pulse 0.35s ease;
}
@keyframes ndm-added-pulse {
0% { transform: scale(1); }
45% { transform: scale(1.06); }
100% { transform: scale(1); }
}
/* Delivery info card */
.product-delivery-card {
background: var(--color-secondary-light);
border: 1px solid rgba(0,137,123,0.2);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-top: var(--space-5);
}
.product-delivery-card svg { width: 20px; height: 20px; color: var(--color-secondary); flex-shrink: 0; }
.product-delivery-card__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); }
.product-delivery-card__desc { font-size: var(--text-xs); color: var(--color-secondary-dark); }
/* ── PURCHASE CARD (zone prix / connexion / qty / CTA) ────────────────────── */
.product-purchase-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 16px;
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
/* Ligne prix */
.product-purchase-card__price { display: flex; flex-direction: column; gap: 2px; }
.product-purchase-card__price-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.product-purchase-card__price-login {
font-size: var(--text-2xl);
font-weight: var(--weight-extrabold);
color: var(--color-primary);
line-height: 1.2;
}
.product-purchase-card__login-link {
font-size: var(--text-sm);
color: var(--color-secondary);
text-decoration: underline;
}
.product-purchase-card__price-hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.product-purchase-card__price-amount .price,
.product-purchase-card__price-amount .woocommerce-Price-amount {
font-size: var(--text-2xl);
font-weight: var(--weight-extrabold);
color: var(--color-primary);
}
.product-purchase-card__price-amount[data-tooltip] {
position: relative;
cursor: help;
}
.product-purchase-card__price-row {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
/* Même rendu que le bouton devis (.ndm-add-to-quote) — outlined, ghost */
.product-purchase-card__price-badge {
padding: 3px 10px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
border-radius: var(--radius-md);
background: var(--color-secondary);
color: var(--color-white);
white-space: nowrap;
}
/* Ligne quantité */
.product-purchase-qty {
display: flex;
align-items: center;
gap: var(--space-4);
}
.product-purchase-qty__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
white-space: nowrap;
}
.product-purchase-qty__stepper {
display: flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.product-purchase-qty__btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg);
border: none;
color: var(--color-text);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background var(--transition-fast);
flex-shrink: 0;
}
.product-purchase-qty__btn:hover { background: var(--color-primary-light); color: var(--color-primary); }
.product-purchase-qty__input {
width: 56px;
height: 40px;
text-align: center;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-primary);
border: none;
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
outline: none;
/* Masquer les flèches natives */
-moz-appearance: textfield;
}
.product-purchase-qty__input::-webkit-outer-spin-button,
.product-purchase-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Form : colonne alignée à gauche — quantité puis boutons */
.product-purchase-form,
form.cart.product-purchase-form {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: var(--space-3);
margin-bottom: 0 !important;
}
/* WC qty input généré — alignement dans notre stepper */
.product-purchase-form .quantity { display: contents; }
.product-purchase-form .qty {
width: 56px !important;
height: 40px !important;
text-align: center;
border: none !important;
border-left: 1px solid var(--color-border) !important;
border-right: 1px solid var(--color-border) !important;
border-radius: 0 !important;
padding: 0 !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
color: var(--color-primary) !important;
-moz-appearance: textfield;
}
.product-purchase-form .qty::-webkit-outer-spin-button,
.product-purchase-form .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Ligne CTA — boutons alignés */
.product-purchase-card__actions {
display: flex;
gap: var(--space-3);
align-items: stretch;
}
.product-purchase-card__btn-primary {
flex: 1;
justify-content: center;
background: var(--color-secondary);
border-color: var(--color-secondary);
}
/* Bouton devis dans la ligne CTA : auto-width, style ghost */
.product-purchase-card__actions .ndm-add-to-quote {
width: auto;
padding: 10px 16px;
gap: var(--space-2);
font-size: var(--text-sm);
}
/* Lien devis secondaire (côté "acheter") */
.product-purchase-devis {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 12px var(--space-4);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-primary);
text-decoration: none;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.product-purchase-devis:hover { background: var(--color-bg); border-color: var(--color-primary); }
/* Message "en rupture" */
.product-out-of-stock {
font-size: var(--text-sm);
color: var(--color-error);
font-weight: var(--weight-medium);
}
/* ── PRODUCT TABS (notre template override) ─────────────────────────────── */
.product-tabs-section {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.product-tabs__nav {
display: flex;
align-items: center;
height: calc(var(--space-4) * 2 + var(--space-6));
border-bottom: 1px solid var(--color-border);
padding: 0 var(--space-6);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.product-tabs__btn {
flex-shrink: 0;
padding: var(--space-4) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), border-color var(--transition-fast);
margin-bottom: -1px;
}
.product-tabs__btn:hover { color: var(--color-primary); }
.product-tabs__btn.is-active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: var(--weight-semibold);
}
.product-tabs__panels {
display: grid;
}
.product-tabs__panel {
grid-area: 1 / 1 / 2 / 2;
visibility: hidden;
opacity: 0;
pointer-events: none;
padding: var(--space-6);
}
.product-tabs__panel.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.product-tabs__empty {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
padding: var(--space-8) 0;
}
/* Tableau des attributs WooCommerce dans l'onglet Caractéristiques */
.product-tabs__panel .woocommerce-product-attributes {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
font-size: var(--text-sm);
}
.product-tabs__panel .woocommerce-product-attributes th,
.product-tabs__panel .woocommerce-product-attributes td {
font-style: normal !important;
width: 200px;
padding: 10px var(--space-5);
text-align: left;
border-bottom: 1px solid var(--color-border-light);
}
.product-tabs__panel .woocommerce-product-attributes th {
width: 180px;
font-weight: var(--weight-medium);
color: var(--color-text-muted);
background: var(--color-bg);
}
.product-tabs__panel .woocommerce-product-attributes td { color: var(--color-text); }
.product-tabs__panel .woocommerce-product-attributes tr:last-child th,
.product-tabs__panel .woocommerce-product-attributes tr:last-child td { border-bottom: none; }
.product-tabs__panel .woocommerce-product-attributes tr:nth-child(even) { background: var(--color-bg); }
/* Description dans l'onglet */
.product-tabs__panel .woocommerce-Tabs-panel--description p {
font-size: var(--text-base);
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-4);
}
.product-tabs__panel h2 { display: none; } /* cache le titre auto-généré par WC */
/* Liste PDF dans l'onglet Téléchargements */
.product-tabs__pdf-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.product-tabs__pdf-item { display: flex; }
.product-tabs__pdf-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
background: var(--color-white);
transition: all var(--transition-fast);
width: 100%;
max-width: 480px;
}
.product-tabs__pdf-link:hover {
border-color: var(--color-secondary);
color: var(--color-secondary);
background: var(--color-bg);
}
.product-tabs__pdf-icon { flex-shrink: 0; color: var(--color-secondary); }
.product-tabs__pdf-link:hover .product-tabs__pdf-icon { color: var(--color-secondary-deep); }
.product-tabs__pdf-name { flex: 1; }
.product-tabs__pdf-size {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-weight: var(--weight-normal);
font-family: var(--font-mono);
}
.product-tabs__pdf-dl { flex-shrink: 0; opacity: 0.5; }
.product-tabs__pdf-link:hover .product-tabs__pdf-dl { opacity: 1; }
/* Liste des mentions dans l'onglet Propriétés */
.product-tabs__properties-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.product-tabs__property-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.5;
}
.product-tabs__property-icon {
flex-shrink: 0;
margin-top: 2px;
color: var(--color-secondary);
}
.product-tabs__property-text { flex: 1; }
/* WooCommerce tabs override (au cas où l'ancien template s'affiche) */
.woocommerce-tabs .wc-tabs {
display: flex;
border-bottom: 2px solid var(--color-border);
margin-bottom: var(--space-8);
padding: 0;
list-style: none;
}
.woocommerce-tabs .wc-tabs li a {
display: block;
padding: 12px 24px;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-light);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all var(--transition-fast);
}
.woocommerce-tabs .wc-tabs li a:hover { color: var(--color-primary); }
.woocommerce-tabs .wc-tabs li.active a {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: var(--weight-semibold);
}
.woocommerce-tabs .panel { padding: 0; }
.woocommerce .entry-summary .cart { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* ============================================================
14. CART
============================================================ */
.woocommerce-cart-form {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: var(--space-6);
}
.woocommerce-cart-form__contents { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form__contents thead th {
padding: var(--space-4) var(--space-5);
background: var(--color-bg);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
border-bottom: 1px solid var(--color-border);
text-align: left;
}
.woocommerce-cart-form__contents tbody td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-light);
vertical-align: middle;
font-size: var(--text-sm);
color: var(--color-text);
}
.woocommerce-cart-form__contents tbody tr:last-child td { border-bottom: none; }
.woocommerce-cart-form__contents td.product-name a {
font-weight: var(--weight-semibold);
color: var(--color-primary);
}
.woocommerce-cart-form__contents td.product-price,
.woocommerce-cart-form__contents td.product-subtotal {
font-weight: var(--weight-semibold);
color: var(--color-primary);
}
.woocommerce-cart-form__contents .quantity input {
width: 60px;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
text-align: center;
font-size: var(--text-sm);
}
.woocommerce-cart-form__contents .product-remove a {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius);
color: var(--color-text-muted);
font-size: 18px;
font-weight: var(--weight-bold);
transition: all var(--transition-fast);
}
.woocommerce-cart-form__contents .product-remove a:hover {
background: var(--color-error-bg);
color: var(--color-error);
}
/* Cart totals */
.cart-collaterals {
display: flex;
justify-content: flex-end;
margin-top: var(--space-6);
}
.cart_totals {
width: 360px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
}
.cart_totals h2 {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th, .cart_totals table td {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border-light);
font-size: var(--text-sm);
color: var(--color-text);
}
.cart_totals table th { font-weight: var(--weight-semibold); color: var(--color-text-light); }
.cart_totals .order-total td { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-primary); border-bottom: none; }
.cart_totals .wc-proceed-to-checkout { margin-top: var(--space-5); }
.cart_totals .checkout-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 20px;
background: var(--color-secondary-dark);
color: var(--color-white);
border: 2px solid transparent;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
line-height: 1;
text-align: center;
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
}
.cart_totals .checkout-button:hover {
background: var(--color-secondary-deep);
color: var(--color-white);
}
/* Boutons secondaires du panier */
.woocommerce-cart button[name="update_cart"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-border);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1;
cursor: pointer;
transition: all var(--transition-base);
}
.woocommerce-cart button[name="update_cart"]:hover {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--color-primary);
}
.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled] {
opacity: .4;
cursor: not-allowed;
}
.woocommerce-cart button[name="apply_coupon"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: transparent;
color: var(--color-secondary);
border: 2px solid var(--color-secondary);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1;
cursor: pointer;
transition: all var(--transition-base);
}
.woocommerce-cart button[name="apply_coupon"]:hover {
background: var(--color-secondary);
color: var(--color-white);
}
/* ============================================================
15. MY ACCOUNT (override WC floats)
============================================================ */
.woocommerce-account .woocommerce {
display: grid !important;
grid-template-columns: 220px 1fr !important;
gap: var(--space-8) !important;
float: none !important;
width: 100% !important;
clear: none !important;
}
.woocommerce-MyAccount-navigation {
float: none !important;
width: auto !important;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
height: fit-content;
position: sticky;
top: 90px;
}
/* En-tête de la sidebar */
.woocommerce-MyAccount-navigation::before {
content: 'Mon espace';
display: block;
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-MyAccount-navigation ul li { margin: 0 !important; }
.woocommerce-MyAccount-navigation ul li a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
border-bottom: 1px solid var(--color-border-light);
border-left: 3px solid transparent;
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce-MyAccount-navigation ul li:last-child a { border-bottom: none; }
/* Icônes par entrée */
.woocommerce-MyAccount-navigation ul li a::before {
flex-shrink: 0;
width: 1em;
text-align: center;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: '⊙'; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: '⊕'; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: '≡'; font-size: 1.1em; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: '↩'; }
/* Hover */
.woocommerce-MyAccount-navigation ul li a:hover {
background: var(--color-secondary-light);
color: var(--color-secondary);
border-left-color: var(--color-secondary);
}
.woocommerce-MyAccount-navigation ul li a:hover::before { color: var(--color-secondary); }
/* Actif */
.woocommerce-MyAccount-navigation ul li.is-active a {
background: var(--color-primary-light);
color: var(--color-primary);
border-left-color: var(--color-primary);
font-weight: var(--weight-semibold);
}
.woocommerce-MyAccount-navigation ul li.is-active a::before { color: var(--color-primary); }
/* Déconnexion : séparateur warning + style distinctif */
.woocommerce-MyAccount-navigation-link--customer-logout {
border-top: 2px solid var(--color-warning-bg);
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-text); font-weight: var(--weight-semibold); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: var(--color-warning-bg);
color: var(--color-primary);
border-left-color: var(--color-warning);
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before { color: var(--color-primary); }
.woocommerce-MyAccount-content {
float: none !important;
width: auto !important;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
}
/* Clearfix override */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
display: none !important;
}
/* ── Contenu : titres ── */
.woocommerce-MyAccount-content h2 {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 2px solid var(--color-border-light);
}
.woocommerce-MyAccount-content p {
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.7;
}
/* ── Mixin champ de formulaire (réutilisé sur account + adresse) ── */
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
margin-bottom: var(--form-row-gap);
}
.woocommerce-EditAccountForm .form-row label,
.woocommerce-address-fields .form-row label {
display: block;
margin-bottom: var(--form-label-gap);
font-family: var(--font-sans);
font-size: var(--form-label-size);
font-weight: var(--form-label-weight);
color: var(--form-label-color);
}
.woocommerce-EditAccountForm .form-row label .required,
.woocommerce-address-fields .form-row label .required {
color: var(--color-error);
margin-left: 2px;
}
.woocommerce-EditAccountForm .form-row input,
.woocommerce-EditAccountForm .form-row select,
.woocommerce-address-fields .form-row input,
.woocommerce-address-fields .form-row select {
display: block;
width: 100%;
padding: var(--form-field-padding);
font-family: var(--font-sans);
font-size: var(--form-font-size);
color: var(--form-text-color);
background: var(--form-bg);
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--form-border-radius);
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
}
.woocommerce-EditAccountForm .form-row select,
.woocommerce-address-fields .form-row select {
background-image: var(--form-select-chevron);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: var(--form-select-pad-right);
}
.woocommerce-EditAccountForm .form-row input::placeholder,
.woocommerce-address-fields .form-row input::placeholder {
color: var(--form-placeholder-color);
}
.woocommerce-EditAccountForm .form-row input:focus,
.woocommerce-EditAccountForm .form-row select:focus,
.woocommerce-address-fields .form-row input:focus,
.woocommerce-address-fields .form-row select:focus {
background: var(--form-bg-focus);
border-color: var(--form-border-focus);
box-shadow: var(--form-shadow-focus);
}
/* Grille 2 colonnes — formulaire compte */
.woocommerce-EditAccountForm {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--space-6);
}
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last {
display: block;
width: 100%;
}
/* Champs pleine largeur dans le formulaire compte */
.woocommerce-EditAccountForm .form-row-wide,
.woocommerce-EditAccountForm fieldset,
.woocommerce-EditAccountForm p:not(.form-row-first):not(.form-row-last) {
grid-column: 1 / -1;
}
/* Formulaire adresse — 1 colonne, champs pleine largeur */
.woocommerce-address-fields__field-wrapper {
display: flex;
flex-direction: column;
gap: 0;
}
.woocommerce-address-fields__field-wrapper .form-row {
width: 100%;
}
/* Section mot de passe — fieldset */
.woocommerce-EditAccountForm fieldset {
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-top: var(--space-3);
background: var(--form-bg);
grid-column: 1 / -1;
}
.woocommerce-EditAccountForm fieldset legend {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-primary);
background: var(--color-bg);
padding: 0 var(--space-2);
}
/* Indicateur de force du mot de passe */
.woocommerce-password-strength {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 4px 10px;
border-radius: var(--radius);
margin-top: var(--space-2);
display: inline-block;
}
.woocommerce-password-strength.strong { background: var(--color-success-bg); color: var(--color-success); }
.woocommerce-password-strength.good { background: var(--color-primary-light); color: var(--color-primary); }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { background: var(--color-error-bg); color: var(--color-error); }
.woocommerce-password-hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
/* Bouton de sauvegarde — identique aux boutons primaires du thème */
.woocommerce-EditAccountForm [type="submit"],
.woocommerce-address-fields [type="submit"] {
grid-column: 1 / -1;
display: block;
width: 100%;
padding: var(--form-submit-padding);
font-family: var(--font-sans);
font-size: var(--form-font-size);
font-weight: var(--weight-semibold);
letter-spacing: var(--form-submit-letter-spacing);
text-align: center;
color: var(--color-white);
background: var(--color-primary);
border: none;
border-radius: var(--form-border-radius);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce-EditAccountForm [type="submit"]:hover,
.woocommerce-address-fields [type="submit"]:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Lien retour WooCommerce rendu avec classe .button sur la page adresse */
.woocommerce-address-fields .button:not([type="submit"]) {
display: inline-flex;
align-items: center;
padding: 10px var(--space-5);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-primary);
background: transparent;
border: 1.5px solid var(--color-primary);
border-radius: var(--form-border-radius);
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.woocommerce-address-fields .button:not([type="submit"]):hover {
background: var(--color-primary);
color: var(--color-white);
}
/* ── Adresses : vue récapitulative (2 cartes) ── */
/* woocommerce-layout.css injecte float+clearfix sur .col2-set/.col-1/.col-2 — on neutralise tout */
.woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr;
gap: var(--space-6);
float: none !important;
width: auto !important;
}
.woocommerce-Addresses::before,
.woocommerce-Addresses::after {
content: none !important;
display: none !important;
}
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
float: none !important;
width: 100% !important;
}
.woocommerce-Address {
background: var(--color-bg);
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.woocommerce-Address-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-3);
margin-bottom: var(--space-4);
border-bottom: 2px solid var(--color-border-light);
}
.woocommerce-Address-title h2 {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-primary);
margin: 0;
}
.woocommerce-Address-title .edit {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-secondary);
text-decoration: none;
padding: 4px 10px;
border: 1.5px solid var(--color-secondary);
border-radius: var(--radius);
transition: background var(--transition-fast), color var(--transition-fast);
}
.woocommerce-Address-title .edit:hover {
background: var(--color-secondary);
color: var(--color-white);
}
.woocommerce-Address address {
font-style: normal;
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.9;
}
.woocommerce-Address address p {
color: var(--color-text-muted);
font-style: italic;
}
/* ── TOOLTIP GLOBAL (position: fixed, échappe overflow: hidden) ──────────── */
#ndm-tooltip {
position: fixed;
z-index: 9999;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
padding: var(--space-1) var(--space-3);
border: 2px solid white;
border-radius: var(--radius-md);
max-width: 300px;
white-space: normal;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-fast), transform var(--transition-fast);
transform: translateY(3px);
box-shadow: var(--shadow-sm);
}
#ndm-tooltip.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 640px) {
.woocommerce-EditAccountForm {
grid-template-columns: 1fr;
}
}
/* ── Page connexion / création de compte (non connecté) ──────────────────── */
/* WooCommerce rend #customer_login directement dans .woocommerce sans nav/content.
woocommerce-layout.css force float+width sur .col-1/.col-2 et injecte un
clearfix ::before/::after sur .col2-set — on neutralise tout ça. */
.woocommerce-account:not(.logged-in) .woocommerce {
display: block !important;
grid-template-columns: unset !important;
}
.woocommerce-account:not(.logged-in) #customer_login {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: stretch;
}
.woocommerce-account:not(.logged-in) #customer_login::before,
.woocommerce-account:not(.logged-in) #customer_login::after {
display: none !important;
content: none !important;
}
/* Colonnes */
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
float: none !important;
width: 100% !important;
background: var(--color-white);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* En-têtes de colonne */
.woocommerce-account:not(.logged-in) #customer_login h2 {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-white);
background: var(--color-primary);
margin: 0;
padding: var(--space-4) var(--space-6);
border-bottom: 3px solid var(--color-secondary);
}
.woocommerce-account:not(.logged-in) #customer_login .u-column2 h2 {
border-bottom-color: var(--color-warning);
}
/* Corps du formulaire */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form {
padding: var(--space-6);
border: none !important;
margin: 0 !important;
flex: 1;
display: flex;
flex-direction: column;
}
/* Pousse le bouton submit en bas, aligné entre les deux colonnes */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form .form-row:last-of-type {
margin-top: auto;
padding-top: var(--space-5);
margin-bottom: 0;
}
/* Labels */
.woocommerce-account:not(.logged-in) #customer_login .form-row label,
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form__label {
display: block;
font-family: var(--font-sans);
font-size: var(--form-label-size);
font-weight: var(--form-label-weight);
color: var(--form-label-color);
margin-bottom: var(--form-label-gap);
}
.woocommerce-account:not(.logged-in) #customer_login .form-row .required {
color: var(--color-secondary);
margin-left: 2px;
}
/* Champs texte */
.woocommerce-account:not(.logged-in) #customer_login .form-row input.input-text {
display: block;
width: 100%;
padding: var(--form-field-padding);
font-family: var(--font-sans);
font-size: var(--form-font-size);
color: var(--form-text-color);
background: var(--form-bg);
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--form-border-radius);
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
box-sizing: border-box;
}
.woocommerce-account:not(.logged-in) #customer_login .form-row input.input-text::placeholder {
color: var(--form-placeholder-color);
}
.woocommerce-account:not(.logged-in) #customer_login .form-row input.input-text:focus {
background: var(--form-bg-focus);
border-color: var(--form-border-focus);
box-shadow: var(--form-shadow-focus);
}
/* Espacement lignes */
.woocommerce-account:not(.logged-in) #customer_login .form-row {
margin-bottom: var(--form-row-gap);
}
.woocommerce-account:not(.logged-in) #customer_login .form-row:last-child {
margin-bottom: 0;
}
/* Case "Se souvenir de moi" */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form__label-for-checkbox {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-light);
cursor: pointer;
}
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form__input-checkbox {
width: 15px;
height: 15px;
accent-color: var(--color-secondary);
cursor: pointer;
flex-shrink: 0;
}
/* Lien mot de passe oublié */
.woocommerce-account:not(.logged-in) .lost_password {
margin-top: var(--space-3);
}
.woocommerce-account:not(.logged-in) .lost_password a {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.woocommerce-account:not(.logged-in) .lost_password a:hover {
color: var(--color-secondary-dark);
text-decoration: underline;
}
/* Bouton "Se connecter" */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__submit {
display: block;
width: 100%;
padding: var(--form-submit-padding);
font-family: var(--font-sans);
font-size: var(--form-font-size);
font-weight: var(--weight-semibold);
letter-spacing: var(--form-submit-letter-spacing);
text-align: center;
color: var(--color-white) !important;
background: var(--color-primary) !important;
border: none;
border-radius: var(--form-border-radius);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__submit:hover {
background: var(--color-primary-dark) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Bouton "Créer un compte" */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register__submit {
display: block;
width: 100%;
padding: var(--form-submit-padding);
font-family: var(--font-sans);
font-size: var(--form-font-size);
font-weight: var(--weight-semibold);
letter-spacing: var(--form-submit-letter-spacing);
text-align: center;
color: var(--color-white) !important;
background: var(--color-secondary) !important;
border: none;
border-radius: var(--form-border-radius);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register__submit:hover {
background: var(--color-secondary-dark) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Politique de confidentialité */
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: 1.6;
background: var(--color-bg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-5);
}
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a {
color: var(--color-secondary);
text-decoration: none;
font-weight: var(--weight-medium);
}
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a:hover {
text-decoration: underline;
}
/* Vérification anti-robot (honeypot — champ piège invisible) */
.ndm-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Force de mot de passe */
.woocommerce-account:not(.logged-in) .woocommerce-password-strength {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 4px 10px;
border-radius: var(--radius);
margin-top: var(--space-2);
text-align: center;
}
.woocommerce-account:not(.logged-in) .woocommerce-password-hint {
font-size: var(--text-xs);
color: var(--color-text-light);
margin-top: var(--space-1);
}
/* Responsive */
@media (max-width: 768px) {
.woocommerce-account:not(.logged-in) #customer_login {
grid-template-columns: 1fr;
}
}
/* ============================================================
16b. ORDER RECEIVED (thank-you page)
============================================================ */
/* Header de confirmation */
.page-header--order-received {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
padding-block: var(--space-12) var(--space-10);
text-align: center;
}
.page-header--order-received .page-header__inner--center {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.order-received-icon {
width: 64px;
height: 64px;
background: rgba(255,255,255,0.2);
border: 2px solid rgba(255,255,255,0.5);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.page-header--order-received .page-header__title {
color: var(--color-white);
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
}
.page-header--order-received .page-header__desc {
color: rgba(255,255,255,0.85);
font-size: var(--text-base);
max-width: 480px;
}
.page-header--order-received .page-header__desc strong {
color: var(--color-white);
}
/* Notice de confirmation WC masquée (le header la remplace) */
.woocommerce-order .woocommerce-thankyou-order-received {
display: none;
}
/* Récapitulatif de commande : bandeau de 4-5 pastilles */
.woocommerce-order-overview.order_details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0;
list-style: none;
margin: 0 0 var(--space-8);
padding: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.woocommerce-order-overview.order_details li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-5) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
border-right: 1px solid var(--color-border);
text-align: center;
}
.woocommerce-order-overview.order_details li:last-child {
border-right: none;
}
.woocommerce-order-overview.order_details li strong {
display: block;
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
text-transform: none;
letter-spacing: 0;
}
.woocommerce-order-overview.order_details li.woocommerce-order-overview__total strong {
font-size: var(--text-lg);
color: var(--color-secondary-dark);
}
/* Sections détails + adresses */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: var(--space-6);
}
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-primary);
padding: var(--space-5) var(--space-6);
margin: 0;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
/* Tableau produits commandés */
.woocommerce-order .woocommerce-table--order-details {
width: 100%;
border-collapse: collapse;
}
.woocommerce-order .woocommerce-table--order-details thead th {
padding: var(--space-4) var(--space-6);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-light);
border-bottom: 1px solid var(--color-border-light);
text-align: left;
background: transparent;
}
.woocommerce-order .woocommerce-table--order-details thead th:last-child {
text-align: right;
}
.woocommerce-order .woocommerce-table--order-details tbody td {
padding: var(--space-4) var(--space-6);
font-size: var(--text-sm);
color: var(--color-text);
border-bottom: 1px solid var(--color-border-light);
vertical-align: middle;
}
.woocommerce-order .woocommerce-table--order-details tbody tr:last-child td {
border-bottom: none;
}
.woocommerce-order .woocommerce-table--order-details .product-name {
font-weight: var(--weight-semibold);
color: var(--color-primary);
}
.woocommerce-order .woocommerce-table--order-details .product-total {
text-align: right;
font-weight: var(--weight-semibold);
}
.woocommerce-order .woocommerce-table--order-details tfoot tr {
border-top: 1px solid var(--color-border);
}
.woocommerce-order .woocommerce-table--order-details tfoot th,
.woocommerce-order .woocommerce-table--order-details tfoot td {
padding: var(--space-3) var(--space-6);
font-size: var(--text-sm);
color: var(--color-text-light);
}
.woocommerce-order .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order .woocommerce-table--order-details tfoot .order-total td {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.woocommerce-order .woocommerce-table--order-details tfoot .order-total td {
color: var(--color-secondary-dark);
}
/* Adresses */
.woocommerce-order .woocommerce-columns--addresses {
display: grid;
grid-template-columns: 1fr 1fr;
}
.woocommerce-order .woocommerce-column {
padding: var(--space-5) var(--space-6);
}
.woocommerce-order .woocommerce-column--1 {
border-right: 1px solid var(--color-border-light);
}
.woocommerce-order .woocommerce-column address {
font-style: normal;
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.8;
}
/* Responsive */
@media (max-width: 640px) {
.woocommerce-order-overview.order_details {
grid-template-columns: 1fr 1fr;
}
.woocommerce-order-overview.order_details li:nth-child(even) {
border-right: none;
}
.woocommerce-order-overview.order_details li:nth-child(odd):not(:nth-last-child(-n+2)) {
border-bottom: 1px solid var(--color-border);
}
.woocommerce-order .woocommerce-columns--addresses {
grid-template-columns: 1fr;
}
.woocommerce-order .woocommerce-column--1 {
border-right: none;
border-bottom: 1px solid var(--color-border-light);
}
.page-header--order-received .page-header__title { font-size: var(--text-2xl); }
}
/* ============================================================
17. NEWS / BLOG
============================================================ */
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.news-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-card__img {
aspect-ratio: 16/9;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
}
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.news-card:hover .news-card__img img { transform: scale(1.03); }
.news-card__body { padding: var(--space-5); }
.news-card__cat {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-secondary);
background: var(--color-secondary-light);
padding: 3px 10px;
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.news-card__title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
line-height: 1.3;
margin-bottom: var(--space-2);
}
.news-card__title a { color: inherit; }
.news-card__title a:hover { color: var(--color-secondary); }
.news-card__excerpt {
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.5;
margin-bottom: var(--space-4);
}
.news-card__meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-weight: var(--weight-medium);
}
/* Single article */
.single-post { background: var(--color-white); }
.single-post__header { margin-bottom: var(--space-8); }
.single-post__cat {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-secondary);
background: var(--color-secondary-light);
padding: 3px 10px;
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.single-post__title {
font-size: var(--text-4xl);
font-weight: var(--weight-extrabold);
color: var(--color-primary);
line-height: 1.15;
margin-bottom: var(--space-4);
}
.single-post__meta {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.single-post__featured {
border-radius: var(--radius-2xl);
overflow: hidden;
margin-bottom: var(--space-8);
}
.single-post__featured img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.entry-content {
font-size: var(--text-base);
line-height: 1.7;
color: var(--color-text);
max-width: 720px;
}
.entry-content h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-primary); margin: var(--space-8) 0 var(--space-4); }
.entry-content h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-primary); margin: var(--space-6) 0 var(--space-3); }
.entry-content p { margin-bottom: var(--space-4); }
.entry-content ul, .entry-content ol { margin: var(--space-4) 0 var(--space-4) var(--space-6); }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content a { color: var(--color-secondary); }
.entry-content a:hover { text-decoration: underline; }
.entry-content img { border-radius: var(--radius-lg); margin-block: var(--space-6); }
.entry-content blockquote {
border-left: 3px solid var(--color-secondary);
padding-left: var(--space-5);
color: var(--color-text-light);
font-style: italic;
margin-block: var(--space-6);
}
/* ============================================================
18. HOMEPAGE — CONTACT FORM
============================================================ */
.contact-section {
background: var(--color-bg);
}
.contact-section .section-title { color: var(--color-primary); }
.contact-section .section-label { color: var(--color-secondary); }
.contact-form {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
padding: var(--space-8);
max-width: 800px;
margin-inline: auto;
}
.contact-form .form-row { margin-bottom: var(--form-row-gap);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);}
.contact-form .form-group { margin-bottom: var(--space-5); }
.contact-form label {
display: block;
font-size: var(--form-label-size);
font-weight: var(--form-label-weight);
color: var(--form-label-color);
margin-bottom: var(--form-label-gap);
}
.contact-form label .required { color: var(--color-error); }
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: var(--form-field-padding);
background: var(--form-bg);
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--form-border-radius);
font-size: var(--form-font-size);
color: var(--form-text-color);
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--form-placeholder-color); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: var(--form-border-focus);
background: var(--form-bg-focus);
box-shadow: var(--form-shadow-focus);
}
.contact-form textarea { resize: vertical; min-height: var(--form-textarea-min-h); }
.contact-notice {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-lg);
border: 1px solid;
margin-bottom: var(--space-6);
font-size: var(--text-sm);
line-height: 1.5;
}
.contact-notice svg { flex-shrink: 0; margin-top: 2px; }
.contact-notice strong { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.contact-notice p { margin: 0; }
.contact-notice--success {
background: var(--color-success-bg);
border-color: var(--color-success-border);
color: var(--color-success-dark);
}
.contact-notice--error {
background: var(--color-error-bg);
border-color: var(--color-error);
color: var(--color-error-dark);
}
/* ============================================================
19. FOOTER
============================================================ */
.site-footer {
background: var(--color-primary);
color: var(--color-text-on-dark-light);
}
.site-footer__top { padding-block: var(--space-16); }
.site-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-10);
}
.footer-brand {
display: flex;
align-items: center;
gap: var(--space-6);
margin-bottom: var(--space-6);
}
.footer-logo { flex-shrink: 0; }
.footer-logo img { width: auto; filter: brightness(0) invert(1); }
.footer-tagline {
font-size: var(--text-sm);
line-height: 1.6;
margin-bottom: 0;
color: var(--color-text-on-dark-muted);
}
.footer-certs {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.footer-cert {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 4px 10px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-full);
color: rgba(255,255,255,0.7);
}
.footer-col__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-white);
margin-bottom: var(--space-5);
}
.footer-col__list { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col__list li a {
font-size: var(--text-sm);
color: var(--color-text-on-dark-light);
transition: color var(--transition-fast);
}
.footer-col__list li a:hover { color: var(--color-white); }
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-on-dark-light);
margin-bottom: var(--space-3);
}
.footer-contact-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-secondary); }
.footer-contact-item a { color: var(--color-text-on-dark-light); }
.footer-contact-item a:hover { color: var(--color-white); }
.site-footer__bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-block: var(--space-5);
}
.site-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--color-text-on-dark-subtle);
flex-wrap: wrap;
}
.site-footer__bottom-inner p { margin: 0; }
.site-footer__bottom-inner a { color: var(--color-text-on-dark-subtle); }
.site-footer__bottom-inner a:hover { color: var(--color-white); }
.site-footer__bottom-links {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
/* ============================================================
19b. SOCIAL PROOF SECTION
============================================================ */
.social-proof {
background: var(--color-bg);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding-block: var(--space-16);
}
.social-proof__label {
text-align: center;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin-bottom: var(--space-8);
}
.social-proof__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.testimonial-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.testimonial-card__stars {
display: flex;
gap: 2px;
margin-bottom: var(--space-3);
}
.testimonial-card__stars svg { width: 16px; height: 16px; color: var(--color-star); flex-shrink: 0; }
.testimonial-card__text {
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: var(--space-4);
font-style: italic;
}
.testimonial-card__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); }
.testimonial-card__role { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.stats-card {
background: var(--color-primary);
border-radius: var(--radius-xl);
padding: var(--space-6);
color: var(--color-white);
}
.stats-card__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-on-dark); margin-bottom: var(--space-5); }
.stats-card__row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-4);
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: var(--space-4);
}
.stats-card__row:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.stats-card__label { font-size: var(--text-sm); color: var(--color-text-on-dark-light); }
.stats-card__value { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); color: var(--color-white); }
.stats-card__value--teal { color: var(--color-secondary); }
/* ============================================================
19c. CTA HOSPITALIER
============================================================ */
.cta-hospi { padding-block: var(--space-12); }
.cta-hospi__inner {
background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-primary-light) 100%);
border: 1px solid var(--color-secondary-border);
border-radius: var(--radius-2xl);
padding: var(--space-10);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
}
.cta-hospi__tag {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-secondary);
margin-bottom: var(--space-3);
}
.cta-hospi__tag svg { width: 20px; height: 20px; }
.cta-hospi__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-primary); margin-bottom: var(--space-2); }
.cta-hospi__desc { font-size: var(--text-base); color: var(--color-text-light); max-width: 520px; line-height: 1.6; }
.cta-hospi__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); flex-shrink: 0; }
.ndm-btn--white {
background: var(--color-white);
color: var(--color-primary);
border-color: var(--color-border);
}
.ndm-btn--white:hover { background: var(--color-bg); color: var(--color-primary); }
/* Footer social links */
.footer-social { display: flex; gap: var(--space-3); }
.footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
transition: background var(--transition-fast), color var(--transition-fast);
}
.footer-social-link:hover { background: rgba(255,255,255,0.2); color: var(--color-white); }
.footer-social-link svg { width: 16px; height: 16px; }
/* ============================================================
19b. HOMEPAGE — SECTIONS SPÉCIFIQUES V1
============================================================ */
/* Section navy (dark) */
.ndm-section--navy {
background: var(--color-primary);
color: var(--color-white);
}
.ndm-section--navy h2,
.ndm-section--navy h3,
.ndm-section--navy h4 { color: var(--color-white); }
/* Section header centré */
.ndm-section__header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-12);
}
.ndm-section__header p {
color: var(--color-text-light);
font-size: var(--text-lg);
margin-top: var(--space-3);
}
.ndm-section--navy .ndm-section__header p { color: rgba(255,255,255,0.7); }
/* Grid générique */
.ndm-grid { display: grid; gap: var(--space-6); }
.ndm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ndm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ndm-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Bouton doré */
.ndm-btn--gold {
background: var(--color-gold);
color: var(--color-primary);
border-color: var(--color-gold);
}
.ndm-btn--gold:hover {
background: #B8963F;
border-color: #B8963F;
color: var(--color-primary);
}
.ndm-btn--white {
background: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
}
.ndm-btn--white:hover {
background: var(--color-bg);
color: var(--color-primary);
}
/* Why-cards (section navy) */
.why-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
padding: var(--space-8);
transition: all var(--transition-base);
}
.why-card:hover {
background: rgba(255,255,255,0.08);
border-color: var(--color-gold);
transform: translateY(-4px);
}
.why-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius);
background: rgba(0,119,182,0.2);
color: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-6);
transition: background var(--transition-base), color var(--transition-base);
}
.why-card:hover .why-card__icon {
background: var(--color-gold);
color: var(--color-primary);
}
.why-card__icon svg { width: 28px; height: 28px; }
.why-card__title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
margin-bottom: var(--space-2);
color: var(--color-white);
}
.why-card__desc {
font-size: var(--text-sm);
color: rgba(255,255,255,0.7);
line-height: 1.6;
}
/* ============================================================
19. PARTNERSHIP BAR
============================================================ */
.partnership-bar {
background: var(--color-white);
border-top: 3px solid var(--color-gold);
border-bottom: 3px solid var(--color-gold);
padding: var(--space-5) 0;
}
.partnership-bar__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
}
.partnership-bar__image img {
max-height: 80px;
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
}
.partnership-bar__cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--color-gold);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-lg);
text-decoration: none;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(196,163,90,0.3);
transition: filter var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.partnership-bar__cta:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(196,163,90,0.5);
color: var(--color-primary);
text-decoration: none;
}
.partnership-bar__cta svg { width: 14px; height: 14px; }
/* ============================================================
20. 404 & SEARCH
============================================================ */
.error-404 { text-align: center; padding-block: var(--space-20); }
.error-404__code { font-size: 120px; font-weight: var(--weight-extrabold); color: var(--color-primary); opacity: 0.1; line-height: 1; }
.error-404__title { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-primary); margin-bottom: var(--space-4); }
.error-404__desc { font-size: var(--text-lg); color: var(--color-text-light); margin-bottom: var(--space-8); }
.search-results-header { margin-bottom: var(--space-8); }
.search-results-header h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-primary); }
.search-results-header p { color: var(--color-text-light); margin-top: var(--space-2); }
/* ============================================================
20b. WOOCOMMERCE BLOCKS — boutons
============================================================ */
/* Base alignée sur .ndm-btn */
.wc-block-components-button,
.wp-element-button {
font-family: var(--font-sans) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
line-height: 1 !important;
border-radius: var(--radius) !important;
padding: 10px 20px !important;
cursor: pointer;
transition: all var(--transition-base) !important;
text-decoration: none;
}
/* Bouton principal du panier (contained) → teal CTA */
.wc-block-cart__submit-button.contained,
.wc-block-components-button.contained.wc-block-cart__submit-button {
background: var(--color-secondary-dark) !important;
color: var(--color-white) !important;
border: 2px solid transparent !important;
box-shadow: none !important;
}
.wc-block-cart__submit-button.contained:hover,
.wc-block-components-button.contained.wc-block-cart__submit-button:hover {
background: var(--color-secondary-deep) !important;
color: var(--color-white) !important;
}
/* Autres boutons contained (place order, etc.) → primary navy */
.wc-block-components-button.contained:not(.wc-block-cart__submit-button) {
background: var(--color-primary) !important;
color: var(--color-white) !important;
border: 2px solid transparent !important;
box-shadow: none !important;
}
.wc-block-components-button.contained:not(.wc-block-cart__submit-button):hover {
background: var(--color-primary-dark) !important;
color: var(--color-white) !important;
}
/* Boutons outline → outline-primary (contour teal) */
.wc-block-components-button.outlined,
.wc-block-components-button:not(.contained) {
background: transparent !important;
color: var(--color-secondary) !important;
border: 2px solid var(--color-secondary) !important;
box-shadow: none !important;
}
.wc-block-components-button.outlined:hover,
.wc-block-components-button:not(.contained):hover {
background: var(--color-secondary) !important;
color: var(--color-white) !important;
}
/* Bouton "Ajouter au panier" du bloc Product Button (grilles Product Collection,
ex. ventes croisées panier) — n'a pas la classe .wc-block-components-button,
même traitement teal que .ndm-product-btn / bouton "contained" ci-dessus. */
.wc-block-components-product-button__button {
background: var(--color-secondary) !important;
color: var(--color-white) !important;
border: 2px solid transparent !important;
box-shadow: none !important;
}
.wc-block-components-product-button__button:hover {
background: var(--color-secondary-dark) !important;
color: var(--color-white) !important;
}
/* ============================================================
20c. WOOCOMMERCE BLOCKS — Product Collection "ventes croisées"
panier ("Vous serez peut-être intéressé par…"). Même rendu que
les cartes .ndm-product-card / .related.products (12. PRODUCT
CARDS / 24. RELATED PRODUCTS) — mêmes tokens, mais sélecteurs
adaptés au markup réel du bloc woocommerce/product-collection
(collection cross-sells), différent du
classique généré par content-product.php. Scope via l'attribut
data-collection, unique à cette instance du bloc.
============================================================ */
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] {
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] > .wp-block-heading {
font-size: var(--text-2xl) !important;
font-weight: var(--weight-bold) !important;
color: var(--color-primary) !important;
text-align: left !important;
margin-bottom: var(--space-6) !important;
}
/* Grille — mêmes points de rupture que .related.products (24.) */
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wc-block-product-template {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-5) !important;
}
@media (max-width: 1100px) {
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wc-block-product-template { grid-template-columns: repeat(1, 1fr) !important; }
}
/* Carte — image en bleed (comme .ndm-product-card__img), texte/actions paddés */
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] li.wc-block-product {
display: flex !important;
flex-direction: column;
box-sizing: border-box;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] li.wc-block-product:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(10,22,40,.15);
border-color: var(--color-secondary);
}
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wc-block-components-product-image {
margin: 0 !important;
aspect-ratio: 480 / 359 !important;
background: linear-gradient(135deg, var(--color-bg), var(--color-primary-light));
}
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wc-block-components-product-image img {
aspect-ratio: 480 / 359 !important;
object-fit: cover !important;
width: 100%;
height: 100%;
}
/* Titre — bloc "Titre de l'article" (wp-block-post-title) réutilisé par Product Collection */
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wp-block-post-title {
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
color: var(--color-primary) !important;
text-align: left !important;
line-height: 1.35 !important;
margin: var(--space-4) var(--space-4) var(--space-2) !important;
}
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wp-block-post-title a {
color: inherit;
text-decoration: none;
}
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wp-block-woocommerce-product-price {
text-align: left !important;
margin: 0 var(--space-4) var(--space-3) !important;
}
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .wc-block-components-product-price .woocommerce-Price-amount {
font-size: var(--text-base) !important;
font-weight: var(--weight-bold) !important;
color: var(--color-primary) !important;
}
/* Footer boutons — .loop-card-actions vient du filtre PHP woocommerce_loop_add_to_cart_link
(inc/woocommerce.php), déjà stylé globalement ; on ajoute juste la mise en page carte. */
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] .loop-card-actions {
margin-top: auto;
margin-left: var(--space-4);
margin-right: var(--space-4);
margin-bottom: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-light);
justify-content: flex-end;
}
/* ============================================================
21. RESPONSIVE
============================================================ */
/* Trust bar : passage à 3 colonnes entre 1024px et 1280px */
@media (max-width: 1280px) {
.trust-bar__grid { grid-template-columns: repeat(3, 1fr); }
.trust-item:nth-child(4)::before { display: none; }
.trust-bar { padding: var(--space-12) var(--space-8); }
}
/* Select mobile Mon compte — caché par défaut, affiché via @media (max-width: 1024px) */
.ndm-account-nav-mobile {
display: none;
padding: var(--space-3) var(--space-4) var(--space-4);
}
@media (max-width: 1024px) {
/* Hide desktop nav, show hamburger */
.site-nav { display: none; }
.site-hamburger { display: flex; }
.header-phone { display: none !important; }
.header-sep { display: none; }
.header-account {
width: 40px; height: 40px;
justify-content: center;
border: none; padding: 0;
color: var(--color-text);
transition: color var(--transition-fast), background var(--transition-fast);
}
.header-account span { display: none; }
.header-account svg { width: 20px; height: 20px; }
.header-account:hover { color: var(--color-primary); background: var(--color-primary-light); border-color: transparent; }
.site-header__actions .ndm-btn { display: none; }
/* Mobile nav overlay */
.site-nav.is-open {
display: flex;
flex-direction: column;
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
bottom: 0;
background: var(--color-white);
padding: var(--space-6);
overflow-y: auto;
z-index: var(--z-overlay);
gap: 0;
align-items: flex-start;
}
.site-nav.is-open .site-nav__item { width: 100%; }
.site-nav.is-open .site-nav__link {
display: flex;
justify-content: space-between;
padding: var(--space-4) 0;
font-size: var(--text-base);
border-bottom: 1px solid var(--color-border-light);
width: 100%;
}
.site-nav.is-open .site-nav__link::after { display: none; }
.site-nav.is-open .site-nav__dropdown {
position: static;
box-shadow: none;
border: none;
background: var(--color-bg);
border-radius: var(--radius-md);
width: 100%;
padding: var(--space-2);
margin-top: var(--space-2);
}
/* Boutique dropdown : 1 colonne en mobile */
.site-nav.is-open .site-nav__dropdown--boutique { width: 100%; }
.site-nav.is-open .site-nav__dropdown-grid { grid-template-columns: 1fr; }
.site-nav.is-open .site-nav__item.dropdown-open .site-nav__dropdown { display: block; }
.site-nav.is-open .site-nav__dropdown:not(.is-open) { display: none; }
/* Shop layout */
.shop-sidebar { display: none; }
.shop-cat-mobile { display: block; }
/* My Account nav → select */
.ndm-account-nav-mobile { display: block; }
.woocommerce-MyAccount-navigation ul { display: none; }
.shop-toolbar { display: none; }
.shop-layout { flex-direction: column; }
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; }
/* Trust bar — 2 colonnes tablette */
.trust-bar__grid { grid-template-columns: repeat(2, 1fr); }
.trust-item:nth-child(4)::before { display: block; } /* réactivé : col 2 de la rangée 2 */
.trust-item:nth-child(3)::before,
.trust-item:nth-child(5)::before { display: none; } /* débuts de rangée */
.trust-bar { padding: var(--space-10) var(--space-8); }
/* Cat grid */
.cat-grid { grid-template-columns: repeat(2, 1fr); }
/* Social proof */
.social-proof__grid { grid-template-columns: 1fr 1fr; }
/* Contact grid */
.contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
/* Grids homepage */
.ndm-grid--3 { grid-template-columns: repeat(2, 1fr); }
.hero__stats { gap: var(--space-8); }
/* CTA hospi */
.cta-hospi__inner { flex-direction: column; align-items: flex-start; }
/* Footer */
.site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.footer-brand { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
/* Product single */
.product-single-layout { grid-template-columns: 1fr; }
.woocommerce div.product,
.woocommerce-page div.product { grid-template-columns: 1fr; }
/* Réinitialise les placements explicites desktop pour revenir au flux DOM normal
(image → résumé → onglets), identique au comportement actuel */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .product-tabs-section,
.woocommerce-page div.product .woocommerce-product-gallery,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary,
.woocommerce-page div.product .product-tabs-section {
grid-column: 1;
grid-row: auto;
}
.product-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
/* Account */
.woocommerce-account .woocommerce {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 640px) {
:root { --container-pad: 16px; }
.hero__inner { padding-block: 48px; }
.hero__title { font-size: 1.75rem; }
.hero__actions { flex-direction: column; }
.hero__actions .ndm-btn { width: 100%; justify-content: center; }
.hero__stats { flex-wrap: wrap; gap: var(--space-6); }
.ndm-grid--3 { grid-template-columns: 1fr; }
.partnership-bar__inner { flex-direction: column; align-items: center; gap: var(--space-5); }
.partnership-bar__image img { max-height: 48px; }
/* Trust bar — colonne unique mobile, séparateurs horizontaux */
.trust-bar { padding: var(--space-6) var(--space-5); }
.trust-bar__grid { grid-template-columns: 1fr; gap: 0; }
.trust-item { padding: var(--space-4) var(--space-4); gap: var(--space-4); }
.trust-item__icon { width: 44px; height: 44px; }
.trust-item__icon svg { width: 20px; height: 20px; }
/* Tous les séparateurs réactivés en mode horizontal */
.trust-item:nth-child(3)::before,
.trust-item:nth-child(4)::before,
.trust-item:nth-child(5)::before { display: block; }
.trust-item + .trust-item::before {
top: 0; left: var(--space-4);
width: calc(100% - var(--space-8));
height: 1px;
}
.cat-grid { grid-template-columns: 1fr; }
.news-grid { grid-template-columns: 1fr; }
.social-proof__grid { grid-template-columns: 1fr; }
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: 1fr !important; }
.section-header { flex-direction: column; align-items: flex-start; }
.site-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
.site-footer__bottom-inner { flex-direction: column; text-align: center; }
.cart-collaterals { justify-content: stretch; }
.cart_totals { width: 100%; }
}
/* ============================================================
22. WOOCOMMERCE NOTICES
============================================================ */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
position:static;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
background: var(--color-primary-light);
border-left: 4px solid var(--color-primary);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
font-size: var(--text-sm);
color: var(--color-primary);
list-style: none;
display: block;
}
.woocommerce-error {
background: var(--color-error-bg);
border-color: var(--color-error);
color: var(--color-error);
}
.woocommerce-message { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
/* Masquer le lien "Voir le panier" injecté par WC après ajout AJAX — remplacé par l'animation header */
a.added_to_cart.wc-forward { display: none !important; }
/* ============================================================
23. FORMS GÉNÉRIQUES
============================================================ */
.ndm-form-row { margin-bottom: var(--form-row-gap); }
.ndm-label {
display: block;
font-size: var(--form-label-size);
font-weight: var(--form-label-weight);
color: var(--form-label-color);
margin-bottom: var(--form-label-gap);
}
.ndm-label .required { color: var(--color-error); margin-left: 2px; }
.ndm-input,
.ndm-select,
.ndm-textarea {
width: 100%;
padding: var(--form-field-padding);
border: var(--form-border-width) solid var(--form-border-color);
border-radius: var(--form-border-radius);
font-size: var(--form-font-size);
font-family: var(--font-sans);
color: var(--form-text-color);
background: var(--form-bg);
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.ndm-select {
appearance: none;
-webkit-appearance: none;
background-image: var(--form-select-chevron);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: var(--form-select-pad-right);
cursor: pointer;
}
.ndm-input::placeholder, .ndm-textarea::placeholder { color: var(--form-placeholder-color); }
.ndm-input:focus, .ndm-select:focus, .ndm-textarea:focus {
background: var(--form-bg-focus);
border-color: var(--form-border-focus);
box-shadow: var(--form-shadow-focus);
}
.ndm-textarea { resize: vertical; min-height: var(--form-textarea-min-h); }
.ndm-hint { font-size: var(--text-xs); color: var(--color-text-light); margin-top: 4px; }
/* ============================================================
24. RELATED PRODUCTS
============================================================ */
.related.products h2 {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-6);
padding-top: var(--space-12);
border-top: 1px solid var(--color-border);
}
.related.products ul.products { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1100px) {
.related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
.related.products ul.products { grid-template-columns: repeat(1, 1fr) !important; }
}
/* ============================================================
25. ANIMATIONS
============================================================ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeInUp 0.7s ease forwards; }
@keyframes ndmQuoteAdded {
0% { transform: scale(1); }
25% { transform: scale(1.35); filter: brightness(1.15); }
55% { transform: scale(0.9); }
80% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.ndm-quote-added {
animation: ndmQuoteAdded 0.55s cubic-bezier(.36,.07,.19,.97) both;
}
/* ============================================================
26. NDMEDICS QUOTE – intégration thème
============================================================ */
/* Badge devis dans le header (miroir de .header-cart-count, couleur accent) */
.header-quote-count {
position: absolute;
top: 0;
right: 0;
transform: translate(25%, -25%);
background: var(--color-warning, #F39C12);
color: var(--color-white);
font-size: 10px;
font-weight: var(--weight-bold);
min-width: 18px;
height: 18px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
line-height: 1;
}
/* Wrapper bouton devis sur page produit unique */
.product-purchase-devis-wrap {
margin-top: var(--space-3);
}
/* ── Bouton "Ajouter au devis" ── */
.ndm-add-to-quote {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
padding: 8px 12px;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
border: 2px solid var(--color-primary, #1B3A5C);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-primary, #1B3A5C);
cursor: pointer;
transition: background 0.2s, color 0.2s;
text-decoration: none;
white-space: nowrap;
}
/* Dans les cartes produit, le bouton est compact — pas de largeur forcée */
.ndm-add-to-quote.ndm-product-btn { width: auto; }
.ndm-add-to-quote:hover:not(:disabled) {
background: var(--color-primary, #1B3A5C);
color: var(--color-white);
}
.ndm-add-to-quote:disabled,
.ndm-add-to-quote.is-in-quote {
background: var(--color-primary-light, #E8F4FD);
border-color: var(--color-primary, #1B3A5C);
color: var(--color-primary, #1B3A5C);
cursor: default;
}
.ndm-add-to-quote svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Variante page produit unique — même style outlined que le loop, padding agrandi */
.ndm-add-to-quote--single {
padding: 12px 20px;
font-size: var(--text-sm);
margin-top: var(--space-3);
}
/* Lien "→ Voir mon devis" apparu après ajout */
.ndm-quote-hint {
display: block;
margin-top: 6px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-secondary);
text-decoration: none;
}
.ndm-quote-hint:hover { color: var(--color-secondary-dark); }
.ndm-quote-inline-error {
display: block;
margin-top: 4px;
font-size: var(--text-xs);
color: var(--color-error);
}
/* ── Page devis : hero enrichi ── */
.page-header--quote {
padding-block: var(--space-4) var(--space-3);
text-align: center;
}
.page-header__inner--center {
align-items: center;
text-align: center;
}
.page-header__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .95);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 6px 16px;
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, .2);
margin-bottom: var(--space-4);
}
.page-header__badge svg {
width: 14px;
height: 14px;
color: var(--color-secondary);
flex-shrink: 0;
}
/* Steps indicator in hero */
.page-header__steps {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-6);
}
.page-header__step {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: rgba(255, 255, 255, .75);
}
.page-header__step-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, .2);
color: var(--color-white);
font-size: 12px;
font-weight: var(--weight-bold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.page-header__step-num--active {
background: var(--color-secondary);
}
.page-header__step-arrow {
color: rgba(255, 255, 255, .35);
flex-shrink: 0;
}
@media (max-width: 480px) { .page-header__step-arrow { display: none; } }
/* Breadcrumb bar (white bar below hero) */
.page-header__breadcrumb-bar {
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
}
.page-header__breadcrumb-bar .ndm-container {
padding-block: var(--space-3);
}
.page-header__breadcrumb-bar .page-header__breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-light);
}
.page-header__breadcrumb-bar .page-header__breadcrumb a {
color: var(--color-text-light);
text-decoration: none;
transition: color 150ms ease;
}
.page-header__breadcrumb-bar .page-header__breadcrumb a:hover {
color: var(--color-primary);
}
.page-header__breadcrumb-bar .page-header__breadcrumb svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.page-header__breadcrumb-bar .page-header__breadcrumb .current {
color: var(--color-primary);
font-weight: var(--weight-medium);
}
/* ============================================================
27. MOT DE PASSE OUBLIÉ
============================================================ */
.ndm-lost-password {
display: flex;
justify-content: center;
}
.ndm-lost-password__card {
width: 100%;
max-width: 480px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: var(--space-10) var(--space-8);
text-align: center;
}
.ndm-lost-password__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: var(--color-primary-light);
border-radius: var(--radius-full);
color: var(--color-primary);
margin-bottom: var(--space-5);
}
.ndm-lost-password__title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.ndm-lost-password__desc {
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: var(--space-8);
}
.ndm-lost-password__form {
text-align: left;
border: none !important;
margin: 0 !important;
}
.ndm-lost-password__field {
margin-bottom: var(--space-6);
}
.ndm-lost-password__label {
display: block;
font-size: var(--form-label-size);
font-weight: var(--form-label-weight);
color: var(--form-label-color);
margin-bottom: var(--space-2);
}
.ndm-lost-password__label .required {
color: var(--color-error);
margin-left: 2px;
}
.ndm-lost-password__input-wrap {
position: relative;
}
.ndm-lost-password__input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
pointer-events: none;
}
.ndm-lost-password__input {
display: block;
width: 100%;
padding: 11px 14px 11px 40px;
font-family: var(--font-sans);
font-size: var(--form-font-size);
color: var(--form-text-color);
background: var(--form-bg);
border: var(--form-border-width) solid var(--form-border-color) !important;
border-radius: var(--form-border-radius) !important;
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
box-sizing: border-box;
}
.ndm-lost-password__input::placeholder {
color: var(--form-placeholder-color);
}
.ndm-lost-password__input:focus {
background: var(--form-bg-focus);
border-color: var(--form-border-focus) !important;
box-shadow: var(--form-shadow-focus);
}
/* Dans le form reset-password, les champs password n'ont pas d'icône gauche */
.ndm-pw-wrap .ndm-lost-password__input {
padding-left: 14px;
padding-right: 44px;
}
.ndm-lost-password__submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 13px var(--space-6);
font-family: var(--font-sans);
font-size: var(--form-font-size);
font-weight: var(--weight-semibold);
line-height: 1;
color: var(--color-white) !important;
background: var(--color-secondary-dark) !important;
border: 2px solid transparent !important;
border-radius: var(--form-border-radius) !important;
cursor: pointer;
transition: all var(--transition-base);
}
.ndm-lost-password__submit:hover {
background: var(--color-secondary-deep) !important;
color: var(--color-white) !important;
}
.ndm-lost-password__footer {
margin-top: var(--space-6);
text-align: center;
}
.ndm-lost-password__back {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-light);
text-decoration: none;
transition: color var(--transition-fast);
}
.ndm-lost-password__back:hover {
color: var(--color-secondary-dark);
}
@media (max-width: 640px) {
.ndm-lost-password__card {
padding: var(--space-8) var(--space-5);
}
}
/* ============================================================
28. MY ACCOUNT — COMPOSANTS ÉTENDUS
============================================================ */
/* ── Icônes de navigation ── */
.woocommerce-MyAccount-navigation .ndm-nav-icon {
flex-shrink: 0;
opacity: 0.55;
transition: opacity var(--transition-fast);
}
.woocommerce-MyAccount-navigation ul li a:hover .ndm-nav-icon,
.woocommerce-MyAccount-navigation ul li.is-active a .ndm-nav-icon {
opacity: 1;
}
.woocommerce-MyAccount-navigation ul li a::before { content: none !important; }
/* ── Status badges ── */
.ndm-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.ndm-status--lg { font-size: var(--text-sm); padding: 5px 14px; }
.ndm-status--success { background: var(--color-success-bg); color: var(--color-success); }
.ndm-status--info { background: var(--color-primary-light); color: var(--color-primary); }
.ndm-status--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ndm-status--error { background: var(--color-error-bg); color: var(--color-error); }
.ndm-status--muted { background: var(--color-border); color: var(--color-text-muted); }
/* ── Badges inline ── */
.ndm-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.ndm-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.ndm-badge--muted { background: var(--color-border); color: var(--color-text-muted); }
/* ============================================================
28a. DASHBOARD
============================================================ */
.ndm-dashboard__welcome {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-radius: var(--radius-xl);
margin-bottom: var(--space-6);
flex-wrap: wrap;
}
.ndm-dashboard__greeting {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-white);
margin-bottom: var(--space-1);
}
.ndm-dashboard__sub { font-size: var(--text-sm); color: var(--color-text-on-dark-soft); }
.ndm-dashboard__welcome-actions { flex-shrink: 0; }
.ndm-dashboard__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.ndm-kpi-card {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
position: relative;
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.ndm-kpi-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.ndm-kpi-card--alert { border-color: rgba(0,137,123,0.25); }
.ndm-kpi-card--ghost { background: var(--color-bg); }
.ndm-kpi-card__icon {
width: 44px; height: 44px;
border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ndm-kpi-card__icon--primary { background: var(--color-primary-light); color: var(--color-primary); }
.ndm-kpi-card__icon--teal { background: var(--color-secondary-light); color: var(--color-secondary); }
.ndm-kpi-card__icon--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ndm-kpi-card__icon--muted { background: var(--color-border); color: var(--color-text-muted); }
.ndm-kpi-card__body { flex: 1; min-width: 0; }
.ndm-kpi-card__label {
font-size: var(--text-xs); font-weight: var(--weight-semibold);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--color-text-muted); margin-bottom: var(--space-1);
}
.ndm-kpi-card__value { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-primary); }
.ndm-kpi-card__value--large { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); }
.ndm-kpi-card__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.ndm-kpi-card__date { font-size: var(--text-xs); color: var(--color-text-muted); }
.ndm-kpi-card__hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.ndm-kpi-card__link {
position: absolute; top: var(--space-4); right: var(--space-4);
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
color: var(--color-text-muted); background: var(--color-bg);
border: 1px solid var(--color-border);
transition: background var(--transition-fast), color var(--transition-fast);
}
.ndm-kpi-card__link:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary-light); }
/* ============================================================
28b. FORM CARDS
============================================================ */
.ndm-form-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: var(--space-5);
}
.ndm-form-card__header {
display: flex; align-items: flex-start; gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border-light);
background: var(--color-bg);
}
.ndm-form-card__icon {
width: 40px; height: 40px; border-radius: var(--radius-lg);
background: var(--color-primary-light); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ndm-form-card__icon--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ndm-form-card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-primary); margin-bottom: var(--space-1); }
.ndm-form-card__desc { font-size: var(--text-sm); color: var(--color-text-light); line-height: 1.5; }
.ndm-form-card__footer {
display: flex; align-items: flex-start; gap: var(--space-2);
padding: var(--space-4) var(--space-6);
background: var(--color-bg); border-top: 1px solid var(--color-border-light);
font-size: var(--text-sm); color: var(--color-text-light);
}
.ndm-form-card__footer--info { background: var(--color-primary-light); color: var(--color-primary); border-top-color: rgba(27,58,92,0.1); }
.ndm-form-card--danger { border-color: rgba(231,76,60,0.15); }
.ndm-form-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--space-5) var(--space-6); padding: var(--space-6);
}
.ndm-form-grid--single { grid-template-columns: 1fr; }
.ndm-form-grid--identity { grid-template-columns: minmax(110px, auto) 1fr 1fr; }
.ndm-form-grid .ndm-form-row {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: 0;
}
.ndm-form-row--full { grid-column: 1 / -1; }
.ndm-form-row--narrow { max-width: 140px; }
.ndm-input-wrap { position: relative; }
.ndm-input-wrap--locked .ndm-input { background: var(--color-bg) !important; color: var(--color-text-muted); cursor: not-allowed; padding-right: 38px; }
.ndm-input-lock {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
color: var(--color-text-muted); opacity: 0.6; pointer-events: none;
}
.ndm-label-hint { font-weight: var(--weight-regular); color: var(--color-text-muted); font-size: var(--text-xs); margin-left: var(--space-2); }
.ndm-fieldset { border: none; padding: 0; margin: 0; }
.ndm-legend { display: block; font-size: var(--form-label-size); font-weight: var(--form-label-weight); color: var(--form-label-color); margin-bottom: var(--space-3); }
.ndm-radio-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ndm-radio { position: relative; cursor: pointer; }
.ndm-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.ndm-radio span {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 8px 16px;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-border);
background: var(--color-white);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-light);
line-height: 1;
cursor: pointer;
transition: all var(--transition-base);
user-select: none;
}
.ndm-radio:hover span {
border-color: var(--color-secondary);
color: var(--color-secondary-dark);
background: var(--color-secondary-light);
}
.ndm-radio input[type="radio"]:checked + span {
background: var(--color-secondary-light);
border-color: var(--color-secondary);
color: var(--color-secondary-dark);
font-weight: var(--weight-semibold);
}
.ndm-radio input[type="radio"]:focus-visible + span {
box-shadow: var(--form-shadow-focus);
}
.ndm-form-submit { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border-light); background: var(--color-bg); }
.ndm-link { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }
.ndm-link:hover { color: var(--color-secondary-dark); }
/* Extra button variants */
.ndm-btn--xs { padding: 5px 12px; font-size: var(--text-xs); }
.ndm-btn--ghost { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text-light); }
.ndm-btn--ghost:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-text-muted); }
.ndm-btn--danger { background: var(--color-error); border-color: var(--color-error); color: var(--color-white); }
.ndm-btn--danger:hover { background: var(--color-error-dark); border-color: var(--color-error-dark); color: var(--color-white); }
/* ============================================================
28c. ORDERS LIST
============================================================ */
.ndm-orders-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ndm-orders-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ndm-orders-table th {
padding: var(--space-3) var(--space-4); text-align: left;
font-size: var(--text-xs); font-weight: var(--weight-semibold);
text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);
background: var(--color-bg); border-bottom: 1.5px solid var(--color-border); white-space: nowrap;
}
.ndm-orders-table__row:not(:last-child) { border-bottom: 1px solid var(--color-border-light); }
.ndm-orders-table__row:hover td { background: var(--color-bg); }
.ndm-orders-table__col { padding: var(--space-4); vertical-align: middle; }
.ndm-orders-table__col--number { font-weight: var(--weight-semibold); }
.ndm-orders-table__col--total { font-weight: var(--weight-semibold); color: var(--color-primary); text-align: right; }
.ndm-orders-table__col--actions { text-align: right; white-space: nowrap; }
.ndm-orders-table__order-link { color: var(--color-primary); font-weight: var(--weight-semibold); }
.ndm-orders-table__order-link:hover { color: var(--color-secondary); text-decoration: underline; }
.ndm-orders-table__item-count { display: block; font-weight: var(--weight-medium); color: var(--color-text); }
.ndm-orders-table__item-names { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ndm-orders-table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.ndm-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-border); margin-top: var(--space-4); }
.ndm-pagination__info { font-size: var(--text-sm); color: var(--color-text-muted); }
.ndm-empty-state { text-align: center; padding: var(--space-12) var(--space-8); }
.ndm-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--color-primary-light); border-radius: var(--radius-full); color: var(--color-primary); margin-bottom: var(--space-5); opacity: 0.5; }
.ndm-empty-state__title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-primary); margin-bottom: var(--space-3); }
.ndm-empty-state__desc { font-size: var(--text-sm); color: var(--color-text-light); margin-bottom: var(--space-6); }
/* ============================================================
28d. ORDER DETAIL
============================================================ */
.ndm-order-header { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-5); }
.ndm-order-header__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.ndm-order-header__number { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-primary); margin-bottom: var(--space-1); }
.ndm-order-header__date { font-size: var(--text-sm); color: var(--color-text-muted); }
.ndm-order-progress { display: flex; align-items: center; }
.ndm-order-progress__step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.ndm-order-progress__dot {
width: 32px; height: 32px; border-radius: 50%;
background: var(--color-border); color: var(--color-text-muted);
display: flex; align-items: center; justify-content: center;
font-size: var(--text-xs); font-weight: var(--weight-bold);
border: 2px solid var(--color-border);
transition: background var(--transition-base), border-color var(--transition-base);
}
.ndm-order-progress__step--done .ndm-order-progress__dot { background: var(--color-success); border-color: var(--color-success); color: var(--color-white); }
.ndm-order-progress__step--current .ndm-order-progress__dot { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.ndm-order-progress__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); white-space: nowrap; }
.ndm-order-progress__step--done .ndm-order-progress__label { color: var(--color-success); }
.ndm-order-progress__step--current .ndm-order-progress__label { color: var(--color-primary); font-weight: var(--weight-semibold); }
.ndm-order-progress__line { flex: 1; height: 2px; background: var(--color-border); margin-bottom: 20px; transition: background var(--transition-base); }
.ndm-order-progress__line--done { background: var(--color-success); }
.ndm-order-section-title { font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-primary); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border-light); background: var(--color-bg); }
.ndm-order-items-card { padding: 0; }
.ndm-order-items-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ndm-order-items-table thead th { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); background: var(--color-bg); white-space: nowrap; }
.ndm-order-items-table__row { border-bottom: 1px solid var(--color-border-light); }
.ndm-order-items-table__row:last-child { border-bottom: none; }
.ndm-order-items-table__img,
.ndm-order-items-table__name,
.ndm-order-items-table__sku,
.ndm-order-items-table__qty,
.ndm-order-items-table__total { padding: var(--space-4); vertical-align: middle; }
.ndm-order-item-img { width: 56px; height: 56px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border-light); }
.ndm-order-item-img img { width: 100%; height: 100%; object-fit: cover; }
.ndm-order-item-img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-border); }
.ndm-order-items-table__product-name { display: block; color: var(--color-text); margin-bottom: 4px; }
.ndm-order-item-meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.ndm-order-items-table__total { font-weight: var(--weight-semibold); text-align: right; }
.ndm-order-items-table__qty { text-align: center; }
.ndm-order-items-table__sku { font-size: var(--text-xs); }
.ndm-order-items-table tfoot tr { border-top: 1px solid var(--color-border-light); }
.ndm-order-items-table tfoot td { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); text-align: right; }
.ndm-order-totals__label { color: var(--color-text-muted); text-align: right; }
.ndm-order-totals__grand td { border-top: 2px solid var(--color-border); font-size: var(--text-base); }
.ndm-order-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.ndm-order-address { font-style: normal; font-size: var(--text-sm); color: var(--color-text-light); line-height: 1.9; padding: var(--space-5) var(--space-6); }
.ndm-order-payment { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-light); font-size: var(--text-xs); color: var(--color-text-muted); }
.ndm-order-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid var(--color-border-light); margin-top: var(--space-5); }
/* Carte facture PDF */
.ndm-order-invoice-card { background: var(--color-secondary-light); padding: 0; }
.ndm-order-invoice { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); }
.ndm-order-invoice__icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--color-secondary); }
.ndm-order-invoice__icon svg { width: 100%; height: 100%; }
.ndm-order-invoice__body { flex: 1; min-width: 0; }
.ndm-order-invoice__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0 0 var(--space-1); }
.ndm-order-invoice__meta { font-size: var(--text-xs); color: var(--color-text-light); margin: 0; }
.ndm-order-invoice__btn { flex-shrink: 0; }
.ndm-muted { color: var(--color-text-muted); }
/* ============================================================
28e. SECURITE — Password meter
============================================================ */
.ndm-pw-wrap { position: relative; }
.ndm-pw-wrap .ndm-input { padding-right: 44px; }
.ndm-pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px; cursor: pointer; color: var(--color-text-muted); line-height: 0; transition: color var(--transition-fast); }
.ndm-pw-toggle:hover { color: var(--color-primary); }
.ndm-strength-meter { margin-top: var(--space-3); }
.ndm-strength-bar { height: 6px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-2); }
.ndm-strength-bar__fill { height: 100%; width: 0; border-radius: var(--radius-full); transition: width var(--transition-base), background var(--transition-base); }
.ndm-strength-bar__fill--very-weak { background: var(--color-error); }
.ndm-strength-bar__fill--weak { background: var(--color-warning); }
.ndm-strength-bar__fill--fair { background: var(--color-star); }
.ndm-strength-bar__fill--good { background: var(--color-secondary); }
.ndm-strength-bar__fill--strong { background: var(--color-success); }
.ndm-strength-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.ndm-pw-policy { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); list-style: none; }
.ndm-pw-rule { font-size: var(--text-xs); color: var(--color-text-muted); padding-left: var(--space-5); position: relative; transition: color var(--transition-fast); }
.ndm-pw-rule::before { content: "o"; position: absolute; left: 0; color: var(--color-border); font-size: 10px; }
.ndm-pw-rule--ok { color: var(--color-success); }
.ndm-pw-rule--ok::before { content: "v"; color: var(--color-success); font-weight: bold; }
.ndm-pw-rule--fail { color: var(--color-error); }
.ndm-pw-rule--fail::before { content: "x"; color: var(--color-error); font-weight: bold; }
.ndm-pw-match-hint--ok { color: var(--color-success) !important; }
.ndm-pw-match-hint--error { color: var(--color-error) !important; }
/* ============================================================
28f. PREFERENCES / RGPD
============================================================ */
.ndm-consent-list { list-style: none; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; }
.ndm-consent-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-light); }
.ndm-consent-item:last-child { border-bottom: none; }
.ndm-consent-item--required { opacity: 0.75; }
.ndm-consent-item__check { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.ndm-consent-item__check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.ndm-consent-item__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); cursor: pointer; flex-wrap: wrap; }
.ndm-consent-item__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; padding-left: 30px; }
.ndm-consent-actions { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border-light); background: var(--color-bg); }
.ndm-gdpr-actions { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.ndm-gdpr-action { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); flex-wrap: wrap; }
.ndm-gdpr-action--danger { border-color: rgba(231,76,60,0.2); background: var(--color-error-bg); }
.ndm-gdpr-action__text { flex: 1; min-width: 0; }
.ndm-gdpr-action__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); margin-bottom: var(--space-1); }
.ndm-gdpr-action__title--danger { color: var(--color-error); }
.ndm-gdpr-action__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; }
/* ============================================================
28g. RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.ndm-dashboard__cards { grid-template-columns: 1fr; }
.ndm-form-grid { grid-template-columns: 1fr; }
.ndm-form-row--full { grid-column: 1; }
.ndm-form-row--narrow { max-width: 100%; }
.ndm-orders-table thead { display: none; }
.ndm-orders-table__row { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.ndm-orders-table__col { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); gap: var(--space-2); }
.ndm-orders-table__col::before { content: attr(data-label); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); flex-shrink: 0; }
.ndm-orders-table__col:last-child { border-bottom: none; }
.ndm-orders-table__col--actions { justify-content: flex-end; }
.ndm-orders-table__col--actions::before { display: none; }
.ndm-order-addresses { grid-template-columns: 1fr; }
.ndm-order-progress__label { display: none; }
.ndm-order-actions { flex-direction: column; }
.ndm-order-actions .ndm-btn { width: 100%; justify-content: center; }
.ndm-order-invoice { flex-wrap: wrap; gap: var(--space-4); }
.ndm-order-invoice__btn { width: 100%; justify-content: center; }
.ndm-order-items-table thead { display: none; }
.ndm-order-items-table__row { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-2); padding: var(--space-4); }
.ndm-order-items-table__img { padding: 0; }
.ndm-order-items-table__name { grid-column: 2; padding: 0; }
.ndm-order-items-table__sku,
.ndm-order-items-table__qty,
.ndm-order-items-table__total { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: var(--space-2) 0; border-top: 1px solid var(--color-border-light); text-align: left; }
.ndm-order-items-table__sku::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ndm-order-items-table__qty::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ndm-order-items-table__total::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ndm-gdpr-action { flex-direction: column; }
}
@media (max-width: 480px) {
.ndm-dashboard__welcome { flex-direction: column; }
.ndm-dashboard__welcome-actions { width: 100%; }
.ndm-dashboard__welcome-actions .ndm-btn { width: 100%; justify-content: center; }
.ndm-form-grid { padding: var(--space-4); }
.ndm-form-card__header { padding: var(--space-4); }
.ndm-consent-item__desc { padding-left: 0; }
.ndm-radio-group { flex-direction: column; gap: var(--space-3); }
}
/* ============================================================
ADRESSES DE LIVRAISON MULTIPLES
============================================================ */
/* Lien retour */
.ndm-back-link {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--text-sm); font-weight: var(--weight-medium);
color: var(--color-text-light);
margin-bottom: var(--space-5);
transition: color var(--transition-fast);
}
.ndm-back-link:hover { color: var(--color-secondary); }
/* Message vide */
.ndm-addresses-empty {
padding: var(--space-8) var(--space-6);
color: var(--color-text-muted);
font-size: var(--text-sm);
text-align: center;
}
/* Grille d'adresses */
.ndm-address-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--space-4);
padding: var(--space-6);
}
/* Carte adresse */
.ndm-address-card {
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
display: flex; flex-direction: column; gap: var(--space-3);
background: var(--color-white);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.ndm-address-card:hover { border-color: var(--color-secondary-border); box-shadow: var(--shadow-sm); }
.ndm-address-card--default {
border-color: var(--color-secondary-border);
background: var(--color-secondary-light);
}
.ndm-address-card__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.ndm-address-card__label {
font-size: var(--text-sm); font-weight: var(--weight-semibold);
color: var(--color-primary);
}
.ndm-address-card__addr {
font-style: normal;
font-size: var(--text-sm); color: var(--color-text-light);
line-height: 1.6; flex: 1;
}
.ndm-address-card__actions {
display: flex; align-items: center; gap: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border-light);
}
/* Badge "Par défaut" */
.ndm-badge--addr-default {
background: var(--color-secondary-light);
color: var(--color-secondary-dark);
border: 1px solid var(--color-secondary-border);
}
/* Formulaire inline (suppression) */
.ndm-inline-form { display: contents; }
/* Checkbox */
.ndm-checkbox-label {
display: flex; align-items: center; gap: var(--space-3);
font-size: var(--text-sm); color: var(--color-text);
cursor: pointer;
}
.ndm-checkbox {
width: 16px; height: 16px; flex-shrink: 0;
accent-color: var(--color-secondary);
cursor: pointer;
}
/* Prévisualisation adresse de facturation */
.ndm-address-billing-preview address,
.ndm-address-billing-preview p { font-style: normal; line-height: 1.6; }
/* Responsive */
@media (max-width: 640px) {
.ndm-address-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CHECKOUT
═══════════════════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-checkout-contact-information-block {
display: none;
}
/* ── Sélecteur d'adresses de livraison ─────────────────────────────────── */
.ndm-addr-selector {
padding-bottom: var(--space-5);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.ndm-addr-selector__row {
display: flex;
align-items: center;
gap: var(--space-3);
}
.ndm-addr-select {
flex: 1;
min-width: 0;
height: var(--form-height);
padding: var(--space-2);
border: 1.5px solid;
border-radius: var(--radius-md);
background-color: var(--color-white);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
appearance: none;
-webkit-appearance: none;
font-size: var(--text-sm);
font-family: var(--font-sans);
font-weight: var(--weight-medium);
color: var(--color-text);
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.ndm-addr-select:hover {
background-color: var(--color-secondary-light, #f0faf9);
}
.ndm-addr-select:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.15);
background-color: var(--color-white);
}
.ndm-addr-manage-link {
flex-shrink: 0;
font-size: var(--text-xs);
text-decoration: none;
white-space: nowrap;
}
.ndm-addr-manage-link:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.ndm-addr-selector__row {
flex-direction: column;
align-items: stretch;
}
.ndm-addr-manage-link { text-align: center; }
}