/* =============================================================================
PAGNIFIK CRÉA — Design System v2 | Cormorant + Montserrat | Liquid Glass
Thème enfant OceanWP | Mode africaine premium | Lomé, Togo
============================================================================= */
/* --- 1. GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Montserrat:wght@300;400;500;600;700&display=swap');
/* --- 2. DESIGN TOKENS --- */
:root {
/* Couleurs principales */
--pkc-primary: #1C1917;
--pkc-primary-90: rgba(28,25,23,0.90);
--pkc-secondary: #44403C;
--pkc-accent: #A16207;
--pkc-accent-hover: #92400E;
--pkc-gold: #D97706;
--pkc-gold-light: #FEF3C7;
--pkc-terracotta: #C2410C;
/* Surfaces */
--pkc-bg: #FAFAF9;
--pkc-bg-warm: #FFFBEB;
--pkc-bg-section: #F5F0E8;
--pkc-white: #FFFFFF;
/* Texte */
--pkc-foreground: #0C0A09;
--pkc-muted: #78716C;
--pkc-muted-light: #A8A29E;
--pkc-border: #E7E5E4;
/* Typographie */
--font-heading: 'Cormorant', Georgia, serif;
--font-body: 'Montserrat', -apple-system, sans-serif;
/* Tailles de texte généreuses */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
--text-8xl: 6rem; /* 96px */
/* Espacement (base 8px) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
--sp-32: 128px;
/* Bordures */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-2xl: 48px;
--radius-full: 9999px;
/* Ombres */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
--shadow-sm: 0 2px 8px rgba(28,25,23,0.06);
--shadow-md: 0 4px 20px rgba(28,25,23,0.09);
--shadow-lg: 0 8px 40px rgba(28,25,23,0.12);
--shadow-xl: 0 16px 64px rgba(28,25,23,0.16);
--shadow-gold: 0 6px 24px rgba(161,98,7,0.30);
/* Transitions */
--ease-fast: 200ms ease;
--ease-base: 280ms ease;
--ease-slow: 400ms cubic-bezier(0.25,0.46,0.45,0.94);
/* Layout */
--max-w: 1320px;
--pad-x: clamp(16px, 4vw, 48px);
--header-h: 84px;
}
/* --- 3. RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
color: var(--pkc-foreground);
background: var(--pkc-bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip; /* clip au lieu de hidden pour ne pas casser position: sticky */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* --- 4. SUPPRESSION HEADER OCEANWP sur front-page ---
On cache le header natif OceanWP, on gère notre propre nav */
body.home #site-header.oceanwp-hf-sec-wrap,
body.home #site-header {
/* NE PAS cacher — on laisse OceanWP gérer le header */
}
/* Compense la hauteur du header OceanWP fixe */
body.home .pkc-hero {
padding-top: 0;
}
/* --- 5. TYPOGRAPHY SCALE --- */
.pkc-display {
font-family: var(--font-heading);
font-size: clamp(var(--text-5xl), 8vw, var(--text-8xl));
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--pkc-primary);
}
.pkc-h1 {
font-family: var(--font-heading);
font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--pkc-primary);
}
.pkc-h2 {
font-family: var(--font-heading);
font-size: clamp(3rem, 7vw, 5.5rem); /* Massive size */
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--pkc-primary);
}
.pkc-h3 {
font-family: var(--font-heading);
font-size: clamp(var(--text-2xl), 2.5vw, var(--text-4xl));
font-weight: 500;
line-height: 1.2;
}
.pkc-h4 {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 500;
line-height: 1.25;
}
.pkc-overline {
font-family: var(--font-body);
font-size: var(--text-base); /* Very large overline */
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--pkc-accent);
}
.pkc-body-xl {
font-size: var(--text-xl);
line-height: 1.75;
color: var(--pkc-secondary);
font-weight: 300;
}
.pkc-body-lg {
font-size: clamp(1.2rem, 3vw, 1.5rem);
line-height: 1.75;
color: var(--pkc-secondary);
font-weight: 400;
}
.pkc-body {
font-size: var(--text-base);
line-height: 1.7;
color: var(--pkc-secondary);
}
/* --- 6. LAYOUT --- */
.pkc-container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
}
.pkc-section {
padding: var(--sp-32) 0;
}
@media (max-width: 768px) {
.pkc-section { padding: var(--sp-20) 0; }
}
.pkc-section-header {
text-align: center;
margin-bottom: var(--sp-16);
}
.pkc-section-header .pkc-overline {
display: block;
margin-bottom: var(--sp-4);
}
.pkc-section-header .pkc-h2 {
margin-bottom: var(--sp-5);
}
.pkc-section-header .pkc-body-lg {
max-width: 620px;
margin: 0 auto;
}
/* --- 7. BOUTONS --- */
.pkc-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 16px 36px;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-lg); /* increased from base/sm */
font-weight: 700; /* increased from 600 */
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
border: 2px solid transparent;
transition: all var(--ease-slow);
white-space: nowrap;
text-decoration: none;
line-height: 1;
}
.pkc-btn svg { width: 18px; height: 18px; transition: transform var(--ease-fast); }
.pkc-btn:hover svg { transform: translateX(4px); }
.pkc-btn:focus-visible { outline: 3px solid var(--pkc-accent); outline-offset: 4px; }
.pkc-btn--primary {
background: var(--pkc-primary);
color: var(--pkc-white);
border-color: var(--pkc-primary);
}
.pkc-btn--primary:hover {
background: var(--pkc-accent);
border-color: var(--pkc-accent);
transform: translateY(-2px);
box-shadow: var(--shadow-gold);
color: var(--pkc-white);
}
.pkc-btn--accent {
background: var(--pkc-accent);
color: var(--pkc-white);
border-color: var(--pkc-accent);
}
.pkc-btn--accent:hover {
background: var(--pkc-accent-hover);
border-color: var(--pkc-accent-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-gold);
color: var(--pkc-white);
}
.pkc-btn--ghost {
background: transparent;
color: var(--pkc-white);
border-color: rgba(255,255,255,0.55);
}
.pkc-btn--ghost:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.85);
color: var(--pkc-white);
}
.pkc-btn--outline {
background: transparent;
color: var(--pkc-primary);
border-color: var(--pkc-primary);
}
.pkc-btn--outline:hover {
background: var(--pkc-primary);
color: var(--pkc-white);
transform: translateY(-2px);
}
/* --- 8. HERO --- */
.pkc-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center; /* reverted to center for desktop */
overflow: hidden;
background: var(--pkc-primary);
}
.pkc-hero-media {
position: absolute;
inset: 0;
overflow: hidden;
}
.pkc-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.04);
transition: transform 10s ease-out;
will-change: transform;
}
.pkc-hero-media img.loaded {
transform: scale(1);
}
/* Overlay gradient directionnel */
.pkc-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(100deg,
rgba(12,10,9,0.88) 0%,
rgba(12,10,9,0.65) 45%,
rgba(12,10,9,0.20) 100%),
linear-gradient(to top,
rgba(12,10,9,0.50) 0%,
transparent 50%);
}
.pkc-hero-body {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: var(--sp-32) var(--pad-x); /* reverted to original for desktop */
display: grid;
grid-template-columns: 1fr;
align-items: center; /* reverted to center for desktop */
min-height: 100vh;
}
.pkc-hero-content {
max-width: 720px;
}
/* Overline animée */
.pkc-hero-overline {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-body);
font-size: var(--text-base); /* increased from sm */
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--pkc-gold);
margin-bottom: var(--sp-6);
opacity: 0;
animation: pkc-up 0.7s ease forwards 0.3s;
}
.pkc-hero-overline::before {
content: '';
display: block;
width: 40px;
height: 1.5px;
background: var(--pkc-gold);
flex-shrink: 0;
}
/* Titre héro */
.pkc-hero h1 {
font-family: var(--font-heading);
font-size: clamp(4rem, 9vw, 8.5rem); /* heavily increased */
font-weight: 700; /* increased weight */
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--pkc-white);
margin-bottom: var(--sp-6);
opacity: 0;
animation: pkc-up 0.9s ease forwards 0.5s;
}
.pkc-hero h1 em {
font-style: italic;
color: var(--pkc-gold);
font-weight: 400;
}
/* Description héro */
.pkc-hero-desc {
font-family: var(--font-body);
font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* heavily increased */
font-weight: 500; /* increased from 300 to not be 'trop legere' */
line-height: 1.8;
color: rgba(255,255,255,0.78);
max-width: 560px;
margin-bottom: var(--sp-10);
opacity: 0;
animation: pkc-up 0.9s ease forwards 0.7s;
}
.pkc-hero-actions {
display: flex;
gap: var(--sp-4);
flex-wrap: wrap;
margin-bottom: var(--sp-16);
opacity: 0;
animation: pkc-up 0.9s ease forwards 0.9s;
}
/* Stats glassmorphiques */
.pkc-hero-stats {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
background: rgba(255,255,255,0.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-xl);
padding: var(--sp-6) var(--sp-10);
opacity: 0;
animation: pkc-up 0.9s ease forwards 1.1s;
}
.pkc-hero-stat-num {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 700;
color: var(--pkc-white);
line-height: 1;
display: block;
}
.pkc-hero-stat-label {
font-size: var(--text-xs);
color: rgba(255,255,255,0.55);
letter-spacing: 0.5px;
margin-top: 3px;
display: block;
}
.pkc-hero-stat-sep {
width: 1px;
height: 44px;
background: rgba(255,255,255,0.15);
flex-shrink: 0;
}
/* Scroll indicator */
.pkc-hero-scroll {
position: absolute;
bottom: var(--sp-10);
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
color: rgba(255,255,255,0.40);
font-size: var(--text-xs);
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0;
animation: pkc-up 0.9s ease forwards 1.4s;
}
.pkc-hero-scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
animation: pkc-scroll-line 2s ease-in-out infinite;
}
@keyframes pkc-scroll-line {
0%,100% { opacity: 0.4; height: 48px; }
50% { opacity: 1; height: 56px; }
}
/* --- 9. TRUST STRIP --- */
.pkc-trust {
background: var(--pkc-primary);
padding: var(--sp-6) 0;
border-top: 1px solid rgba(255,255,255,0.06);
}
.pkc-trust-inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-16);
flex-wrap: wrap;
}
.pkc-trust-item {
display: flex;
align-items: center;
gap: var(--sp-3);
color: rgba(255,255,255,0.85); /* Slightly brighter for better contrast */
font-size: var(--text-lg); /* Increased from sm */
font-weight: 500;
letter-spacing: 0.3px;
white-space: nowrap;
}
.pkc-trust-item svg {
color: var(--pkc-gold);
flex-shrink: 0;
width: 26px; /* Increased from 20px */
height: 26px; /* Increased from 20px */
}
/* --- 10. CATEGORIES --- */
.pkc-categories {
background: var(--pkc-bg);
}
.pkc-cat-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-6);
}
.pkc-cat-card {
flex: 1 1 300px;
max-width: 380px;
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
aspect-ratio: 3/4;
display: block;
transition: transform var(--ease-slow);
background: var(--pkc-primary);
text-decoration: none;
}
.pkc-cat-card:hover { transform: translateY(-6px); }
.pkc-cat-card:focus-visible { outline: 3px solid var(--pkc-accent); outline-offset: 4px; }
.pkc-cat-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ease-slow);
}
.pkc-cat-card:hover .pkc-cat-card-img {
transform: scale(1.08);
}
/* Overlay gradient fort en bas */
.pkc-cat-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(12,10,9,0.92) 0%,
rgba(12,10,9,0.45) 45%,
transparent 100%
);
transition: background var(--ease-base);
}
.pkc-cat-card:hover .pkc-cat-card-overlay {
background: linear-gradient(
to top,
rgba(12,10,9,0.96) 0%,
rgba(12,10,9,0.55) 50%,
rgba(12,10,9,0.10) 100%
);
}
.pkc-cat-card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--sp-8) var(--sp-6);
}
.pkc-cat-card-icon {
width: 48px;
height: 48px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-4);
color: var(--pkc-gold);
transition: all var(--ease-base);
}
.pkc-cat-card:hover .pkc-cat-card-icon {
background: var(--pkc-accent);
border-color: var(--pkc-accent);
color: var(--pkc-white);
}
.pkc-cat-card-title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 6vw, 4rem); /* Massive title */
font-weight: 600;
color: var(--pkc-white);
line-height: 1.1;
margin-bottom: var(--sp-1);
letter-spacing: -0.01em;
}
.pkc-cat-card-sub {
font-size: var(--text-xl); /* Increased for high legibility */
color: rgba(255,255,255,0.8);
font-weight: 400;
}
/* Placeholders si pas d'image */
.pkc-cat-card--sacs { background: linear-gradient(145deg, #7C2D12 0%, #C2410C 60%, #EA580C 100%); }
.pkc-cat-card--habits { background: linear-gradient(145deg, #14532D 0%, #15803D 60%, #16A34A 100%); }
.pkc-cat-card--access { background: linear-gradient(145deg, #1E3A5F 0%, #1D4ED8 60%, #3B82F6 100%); }
.pkc-cat-card--chaussures{ background: linear-gradient(145deg, #4C1D95 0%, #7C3AED 60%, #A78BFA 100%); }
/* --- 11. PRODUITS VEDETTES --- */
.pkc-featured {
background: var(--pkc-bg-section);
}
.pkc-products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
/* Fallback : si 1 seul produit → centré large */
.pkc-products-grid:has(.pkc-product-card:only-child) {
grid-template-columns: minmax(0, 480px);
justify-content: center;
}
.pkc-product-card {
background: var(--pkc-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--ease-slow);
cursor: pointer;
display: flex;
flex-direction: column;
}
.pkc-product-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-8px);
}
.pkc-product-img-wrap {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--pkc-bg-section);
flex-shrink: 0;
}
.pkc-product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ease-slow);
}
.pkc-product-card:hover .pkc-product-img {
transform: scale(1.06);
}
.pkc-product-badge {
position: absolute;
top: var(--sp-4);
left: var(--sp-4);
background: var(--pkc-terracotta);
color: var(--pkc-white);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--radius-full);
}
.pkc-product-badge--new { background: var(--pkc-primary); }
/* Actions rapides (hover) */
.pkc-product-quick {
position: absolute;
inset: 0;
background: rgba(12,10,9,0.25);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--ease-base);
}
.pkc-product-card:hover .pkc-product-quick { opacity: 1; }
.pkc-product-quick-btn {
background: var(--pkc-white);
color: var(--pkc-primary);
border: none;
border-radius: var(--radius-full);
padding: 13px 28px;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
letter-spacing: 0.5px;
transition: all var(--ease-base);
transform: translateY(8px);
transition: all var(--ease-slow);
}
.pkc-product-card:hover .pkc-product-quick-btn { transform: translateY(0); }
.pkc-product-quick-btn:hover { background: var(--pkc-accent); color: var(--pkc-white); }
/* Info produit */
.pkc-product-info {
padding: var(--sp-6);
flex: 1;
display: flex;
flex-direction: column;
}
.pkc-product-cat {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--pkc-accent);
margin-bottom: var(--sp-2);
}
.pkc-product-name {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 600;
color: var(--pkc-primary);
line-height: 1.25;
margin-bottom: var(--sp-2);
letter-spacing: -0.01em;
}
.pkc-product-name a { color: inherit; }
.pkc-product-name a:hover { color: var(--pkc-accent); }
.pkc-product-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: var(--sp-4);
border-top: 1px solid var(--pkc-border);
}
.pkc-product-price {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 700;
color: var(--pkc-primary);
line-height: 1;
}
/* Surcharge WooCommerce price */
.pkc-product-price .woocommerce-Price-amount,
.pkc-product-price .amount {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 700;
color: var(--pkc-primary);
}
.pkc-product-price ins {
text-decoration: none;
}
.pkc-product-price del {
color: var(--pkc-muted-light);
font-size: var(--text-lg);
font-weight: 400;
margin-left: var(--sp-2);
}
.pkc-product-add {
width: 48px;
height: 48px;
background: var(--pkc-primary);
color: var(--pkc-white);
border: none;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--ease-base);
flex-shrink: 0;
}
.pkc-product-add:hover {
background: var(--pkc-accent);
transform: scale(1.12);
box-shadow: var(--shadow-gold);
}
.pkc-product-add:focus-visible { outline: 3px solid var(--pkc-accent); outline-offset: 3px; }
/* Centrage CTA boutique */
.pkc-featured-cta {
text-align: center;
margin-top: var(--sp-16);
}
/* --- 12. ABOUT / HISTOIRE --- */
.pkc-about {
background: var(--pkc-bg);
}
.pkc-about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-20);
align-items: center;
}
/* Colonne média */
.pkc-about-media {
position: relative;
}
.pkc-about-img-wrap {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4/5;
}
.pkc-about-img-main {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ease-slow);
}
.pkc-about-media:hover .pkc-about-img-main {
transform: scale(1.03);
}
/* Badge flottant "5+ ans" */
.pkc-about-badge {
position: absolute;
bottom: var(--sp-8);
right: calc(-1 * var(--sp-8));
background: var(--pkc-white);
border-radius: var(--radius-lg);
padding: var(--sp-6) var(--sp-8);
box-shadow: var(--shadow-xl);
text-align: center;
min-width: 140px;
}
.pkc-about-badge-num {
font-family: var(--font-heading);
font-size: var(--text-5xl);
font-weight: 700;
color: var(--pkc-accent);
line-height: 1;
}
.pkc-about-badge-text {
font-size: var(--text-sm);
color: var(--pkc-muted);
margin-top: var(--sp-1);
font-weight: 500;
}
/* Colonne contenu */
.pkc-about-content .pkc-overline {
display: block;
margin-bottom: var(--sp-4);
}
.pkc-about-content .pkc-h2 {
margin-bottom: var(--sp-6);
}
.pkc-about-content .pkc-body-xl {
margin-bottom: var(--sp-5);
}
.pkc-about-content .pkc-body {
margin-bottom: var(--sp-10);
}
.pkc-about-description p {
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
line-height: 1.8;
color: var(--pkc-secondary);
margin-bottom: var(--sp-6);
}
.pkc-about-description p:last-child {
margin-bottom: 0;
}
/* Values grid */
.pkc-about-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
margin-bottom: var(--sp-10);
}
.pkc-about-value {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-6);
background: var(--pkc-bg-section);
border-radius: var(--radius-md);
border: 1px solid transparent;
transition: all var(--ease-base);
}
.pkc-about-value:hover {
background: var(--pkc-white);
border-color: rgba(161, 98, 7, 0.15);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.pkc-about-value-icon {
width: 44px;
height: 44px;
background: var(--pkc-gold-light);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--pkc-accent);
flex-shrink: 0;
}
.pkc-about-value-title {
font-weight: 600;
font-size: var(--text-lg);
color: var(--pkc-primary);
margin-bottom: 4px;
}
.pkc-about-value-desc {
font-size: var(--text-base);
color: var(--pkc-secondary);
line-height: 1.6;
}
/* --- 13. PILIERS DARK --- */
.pkc-pillars {
background: var(--pkc-primary);
position: relative;
overflow: hidden;
}
.pkc-pillars::before {
content: '';
position: absolute;
top: -30%;
right: -5%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(161,98,7,0.10) 0%, transparent 65%);
pointer-events: none;
}
.pkc-pillars .pkc-section-header .pkc-overline { color: var(--pkc-gold); }
.pkc-pillars .pkc-section-header .pkc-h2 { color: var(--pkc-white); }
.pkc-pillars .pkc-section-header .pkc-body-lg { color: rgba(255,255,255,0.80); }
.pkc-pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.pkc-pillar-card {
position: relative;
padding: var(--sp-12) var(--sp-8);
background: rgba(255,255,255,0.04);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl);
text-align: center;
transition: all var(--ease-slow);
overflow: hidden;
}
.pkc-pillar-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--pkc-accent), var(--pkc-gold));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--ease-slow);
}
.pkc-pillar-card:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(161, 98, 7, 0.25);
transform: translateY(-6px);
}
.pkc-pillar-card:hover::before { transform: scaleX(1); }
.pkc-pillar-num {
position: absolute;
top: var(--sp-6); right: var(--sp-6);
font-family: var(--font-heading);
font-size: 6rem;
font-weight: 700;
color: rgba(255,255,255,0.03);
line-height: 1;
user-select: none;
}
.pkc-pillar-icon {
width: 80px; height: 80px;
background: rgba(161,98,7,0.12);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--sp-6);
color: var(--pkc-gold);
transition: all var(--ease-base);
}
.pkc-pillar-card:hover .pkc-pillar-icon {
background: var(--pkc-accent);
color: var(--pkc-white);
transform: scale(1.08);
}
.pkc-pillar-title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 600;
color: var(--pkc-white);
margin-bottom: var(--sp-4);
letter-spacing: -0.01em;
}
.pkc-pillar-desc {
font-size: var(--text-lg);
line-height: 1.8;
color: rgba(255,255,255,0.75);
font-weight: 400;
}
/* --- 14. TÉMOIGNAGES --- */
.pkc-testimonials {
background: var(--pkc-bg-warm);
}
.pkc-testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.pkc-testi-card {
background: var(--pkc-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition: all var(--ease-slow);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.pkc-testi-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.pkc-testi-header-img {
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
flex-shrink: 0;
}
.pkc-testi-header-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ease-slow);
}
.pkc-testi-card:hover .pkc-testi-header-img img {
transform: scale(1.05);
}
.pkc-testi-body {
padding: var(--sp-6) var(--sp-6) var(--sp-8);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.pkc-testi-quote {
font-family: var(--font-heading);
font-size: 5rem;
color: var(--pkc-gold-light);
line-height: 0.8;
margin-bottom: var(--sp-2);
display: block;
font-style: italic;
}
.pkc-testi-stars {
display: flex;
gap: 3px;
margin-bottom: var(--sp-5);
color: var(--pkc-gold);
}
.pkc-testi-text {
font-size: var(--text-xl);
line-height: 1.8;
color: var(--pkc-secondary);
font-style: italic;
font-weight: 400;
margin-bottom: var(--sp-6);
}
.pkc-testi-author {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-top: auto; /* Push author info to the bottom of the card */
}
.pkc-testi-avatar {
width: 52px; height: 52px;
border-radius: var(--radius-full);
background: var(--pkc-bg-section);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
color: var(--pkc-accent);
flex-shrink: 0;
overflow: hidden;
border: 2px solid var(--pkc-gold-light);
}
.pkc-testi-name {
font-weight: 600;
font-size: var(--text-lg);
color: var(--pkc-primary);
font-family: var(--font-body);
}
.pkc-testi-location {
font-size: var(--text-base);
color: var(--pkc-muted);
margin-top: 2px;
}
/* --- 15. CTA BANNER --- */
.pkc-cta-banner {
position: relative;
overflow: hidden;
padding: var(--sp-32) 0;
text-align: center;
background: linear-gradient(135deg, #92400E 0%, #A16207 40%, #D97706 100%);
}
.pkc-cta-banner::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.pkc-cta-banner::after {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 60%);
pointer-events: none;
}
.pkc-cta-content {
position: relative;
z-index: 1;
}
.pkc-cta-content .pkc-overline {
color: rgba(255,255,255,0.85);
display: block;
margin-bottom: var(--sp-6);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: var(--text-sm);
}
.pkc-cta-content h2 {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 6.5vw, 5rem);
font-weight: 600;
color: var(--pkc-white);
letter-spacing: -0.02em;
margin-bottom: var(--sp-6);
line-height: 1.15;
}
.pkc-cta-content p {
font-size: var(--text-2xl);
color: rgba(255,255,255,0.9);
margin-bottom: var(--sp-12);
max-width: 800px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
line-height: 1.8;
}
.pkc-btn--white:hover .pkc-cta-arrow-icon {
transform: translateX(5px) !important;
}
.pkc-cta-actions {
display: flex;
gap: var(--sp-4);
justify-content: center;
flex-wrap: wrap;
}
.pkc-btn--white {
background: var(--pkc-white);
color: var(--pkc-accent-hover);
border-color: var(--pkc-white);
}
.pkc-btn--white:hover {
background: rgba(255,255,255,0.92);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
color: var(--pkc-accent-hover);
}
/* --- 16. FOOTER --- */
.pkc-footer {
background: #0d0c0b;
color: rgba(255,255,255,0.75);
padding: var(--sp-32) 0 var(--sp-20);
border-top: 1px solid rgba(255,255,255,0.06);
}
.pkc-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: var(--sp-16);
margin-bottom: var(--sp-20);
padding-bottom: var(--sp-20);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pkc-footer-logo-wrap {
margin-bottom: var(--sp-6);
}
.pkc-footer-logo-wrap img {
max-height: 96px;
width: auto;
display: block;
}
.pkc-footer-logo-wrap .custom-logo-link {
display: inline-block;
}
.pkc-footer-logo {
font-family: var(--font-heading);
font-size: var(--text-6xl);
font-weight: 700;
color: var(--pkc-white);
letter-spacing: -0.02em;
display: block;
}
.pkc-footer-logo span { color: var(--pkc-gold); }
.pkc-footer-desc {
font-size: 1.375rem;
line-height: 1.8;
color: rgba(255,255,255,0.80);
margin-bottom: var(--sp-8);
max-width: 440px;
}
.pkc-footer-socials {
display: flex;
gap: var(--sp-4);
}
.pkc-footer-social {
width: 60px; height: 60px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85);
cursor: pointer;
transition: all var(--ease-base);
text-decoration: none;
}
.pkc-footer-social svg {
width: 26px; height: 26px;
}
.pkc-footer-social:hover {
background: var(--pkc-accent);
border-color: var(--pkc-accent);
color: var(--pkc-white);
transform: translateY(-4px);
}
.pkc-footer-social:focus-visible { outline: 3px solid var(--pkc-accent); outline-offset: 2px; }
.pkc-footer-col-title {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 600;
color: var(--pkc-white);
margin-bottom: var(--sp-8);
letter-spacing: -0.01em;
}
.pkc-footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.pkc-footer-links a {
font-size: 1.375rem;
color: rgba(255,255,255,0.80);
transition: all var(--ease-base);
cursor: pointer;
font-weight: 400;
display: inline-block;
}
.pkc-footer-links a:hover {
color: var(--pkc-gold);
transform: translateX(8px);
}
.pkc-footer-contact-row {
display: flex;
align-items: center;
gap: var(--sp-5);
margin-bottom: var(--sp-6);
font-size: 1.375rem;
color: rgba(255,255,255,0.80);
line-height: 1.6;
}
.pkc-footer-contact-row svg {
color: var(--pkc-gold);
flex-shrink: 0;
width: 30px; height: 30px;
}
.pkc-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-6);
padding-top: var(--sp-8);
}
.pkc-footer-copy {
font-size: var(--text-xl);
color: rgba(255,255,255,0.65);
}
.pkc-footer-bottom-links {
display: flex;
gap: var(--sp-8);
}
.pkc-footer-bottom-links a {
font-size: var(--text-xl);
color: rgba(255,255,255,0.65);
transition: color var(--ease-fast);
}
.pkc-footer-bottom-links a:hover { color: var(--pkc-gold); }
/* --- 17. ANIMATIONS --- */
@keyframes pkc-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pkc-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Scroll reveal */
.pkc-reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.pkc-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.pkc-reveal-d1 { transition-delay: 0.10s; }
.pkc-reveal-d2 { transition-delay: 0.20s; }
.pkc-reveal-d3 { transition-delay: 0.30s; }
.pkc-reveal-d4 { transition-delay: 0.40s; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.pkc-reveal { opacity: 1; transform: none; }
}
/* --- 18. RESPONSIVE --- */
@media (max-width: 1200px) {
.pkc-cat-grid { gap: var(--sp-4); }
.pkc-products-grid { grid-template-columns: repeat(2, 1fr); }
.pkc-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
}
@media (max-width: 1024px) {
.pkc-about-grid { grid-template-columns: 1fr; gap: var(--sp-12); }
.pkc-about-media { max-width: 480px; margin: 0 auto; }
.pkc-about-badge { right: calc(-1 * var(--sp-4)); }
.pkc-pillars-grid { grid-template-columns: repeat(2, 1fr); }
.pkc-testi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.pkc-hero-body {
align-items: flex-start;
padding-top: 15vh; /* Reduced padding-top on mobile to move content up */
padding-bottom: 5vh; /* Reduced padding-bottom on mobile */
}
.pkc-hero h1 { font-size: clamp(3.2rem, 13vw, 5rem); }
.pkc-hero-stats { flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); }
.pkc-hero-stat-sep { display: none; }
.pkc-hero-actions { flex-direction: column; align-items: flex-start; }
.pkc-trust-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6) var(--sp-2);
width: 100%;
}
.pkc-trust-item {
flex-direction: column;
text-align: center;
white-space: normal;
font-size: var(--text-base);
}
.pkc-trust-item svg {
margin-bottom: var(--sp-1);
}
.pkc-cat-grid { gap: var(--sp-3); }
.pkc-cat-card { flex-basis: 100%; max-width: 100%; }
.pkc-products-grid { grid-template-columns: 1fr; }
.pkc-pillars-grid { grid-template-columns: 1fr; }
.pkc-testi-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--sp-5);
padding: var(--sp-2) var(--pad-x) var(--sp-6);
margin: 0 calc(-1 * var(--pad-x));
-ms-overflow-style: none;
scrollbar-width: none;
}
.pkc-testi-grid::-webkit-scrollbar {
display: none;
}
.pkc-testi-card {
flex: 0 0 85%;
scroll-snap-align: center;
transition: none; /* Disable transform animation during swipe for performance */
}
.pkc-testi-card:hover {
transform: none; /* Disable hover translation on mobile */
}
.pkc-about-values { grid-template-columns: 1fr; }
.pkc-footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
.pkc-footer-bottom { flex-direction: column; align-items: flex-start; }
.pkc-cta-actions { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
.pkc-cat-grid { gap: var(--sp-3); }
.pkc-about-badge { right: var(--sp-4); }
}
/* --- 18. SCROLL TO TOP PREMIUM --- */
#scroll-top {
width: 54px !important;
height: 54px !important;
line-height: 50px !important;
background: rgba(28, 25, 23, 0.85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1.5px solid var(--pkc-accent) !important;
border-radius: var(--radius-full) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
transition: all var(--ease-base) !important;
text-align: center !important;
}
#scroll-top > span,
#scroll-top i,
#scroll-top svg,
#scroll-top .owp-icon {
line-height: 50px !important;
font-size: 22px !important;
color: var(--pkc-white) !important;
transition: transform var(--ease-base) !important;
margin: 0 !important;
display: inline-block !important;
vertical-align: middle !important;
}
#scroll-top .owp-icon use {
stroke: var(--pkc-white) !important;
}
#scroll-top:hover {
background: var(--pkc-accent) !important;
border-color: var(--pkc-accent) !important;
box-shadow: 0 8px 30px rgba(161, 98, 7, 0.5) !important;
transform: translateY(-5px) !important;
}
#scroll-top:hover i,
#scroll-top:hover svg,
#scroll-top:hover .owp-icon {
transform: translateY(-2px) !important;
}
/* =============================================================================
19. WOOCOMMERCE CATALOGUE & SHOP
============================================================================= */
/* Conteneur principal */
.archive.post-type-archive-product #content-wrap,
.tax-product_cat #content-wrap {
max-width: var(--max-w) !important;
margin: 0 auto !important;
padding: var(--sp-16) var(--pad-x) !important;
}
/* En-tête Boutique */
.pkc-shop-header {
text-align: center;
margin-bottom: var(--sp-16);
}
.pkc-shop-header .pkc-overline {
display: block;
font-size: var(--text-lg) !important; /* Agrandissement overline 18px */
margin-bottom: var(--sp-4);
letter-spacing: 4px;
font-weight: 600;
color: var(--pkc-accent);
text-transform: uppercase;
}
.pkc-shop-header .pkc-h1 {
font-size: clamp(3.5rem, 8vw, 6.5rem) !important; /* Agrandissement titre */
margin-bottom: var(--sp-6);
font-family: var(--font-heading);
font-weight: 600;
color: var(--pkc-primary);
line-height: 1.05;
}
.pkc-shop-header p {
max-width: 750px;
margin: 0 auto;
color: var(--pkc-secondary);
font-size: 1.3rem !important; /* Agrandissement description */
line-height: 1.75;
}
/* Toolbar minimaliste (Prise en main du bloc filtres/layout) */
.woocommerce .oceanwp-toolbar {
border: none !important;
background: transparent !important;
padding: 0 !important;
margin-bottom: var(--sp-12) !important;
display: flex !important;
justify-content: flex-end !important; /* Aligne le tri à droite */
align-items: center !important;
}
/* Masque les contrôles de vue (grid/list) et le sélecteur d'affichage de pagination OceanWP */
.woocommerce .oceanwp-toolbar .oceanwp-grid-list,
.woocommerce .oceanwp-toolbar ul.result-count,
.woocommerce .oceanwp-toolbar .woocommerce-result-count {
display: none !important;
}
.woocommerce-ordering {
float: none !important;
margin: 0 !important;
}
/* Design moderne et épuré pour le dropdown de tri */
.woocommerce-ordering select {
font-family: var(--font-body) !important;
font-size: var(--text-base) !important; /* 16px */
font-weight: 500 !important;
padding: 12px 36px 12px 20px !important;
border: 1.5px solid var(--pkc-border) !important;
border-radius: var(--radius-full) !important;
background-color: var(--pkc-white) !important;
color: var(--pkc-primary) !important;
outline: none !important;
cursor: pointer !important;
transition: all var(--ease-base) !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 16px !important;
min-width: 240px !important;
}
.woocommerce-ordering select:hover {
border-color: var(--pkc-primary) !important;
}
.woocommerce-ordering select:focus {
border-color: var(--pkc-accent) !important;
box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.12) !important;
}
/* Grille de produits */
ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--sp-10) !important; /* Espace plus aéré (40px) */
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
ul.products::before,
ul.products::after {
display: none !important;
}
/* Carte Produit Moderne */
ul.products li.product {
float: none !important;
width: auto !important;
margin: 0 !important;
background: var(--pkc-white) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
box-shadow: var(--shadow-sm) !important;
transition: all var(--ease-slow) !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
padding: 0 !important;
border: none !important;
text-align: center !important; /* Centrage typique des catalogues de luxe */
}
ul.products li.product:hover {
box-shadow: var(--shadow-xl) !important;
transform: translateY(-8px) !important;
}
/* Conteneur de l'image du produit */
ul.products li.product li.image-wrap {
position: relative !important;
aspect-ratio: 4/5 !important;
overflow: hidden !important;
background: var(--pkc-bg-section) !important;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
ul.products li.product li.image-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform var(--ease-slow) !important;
margin: 0 !important;
display: block !important;
}
ul.products li.product:hover li.image-wrap img {
transform: scale(1.06) !important;
}
/* Badges Promo et Nouveau */
ul.products li.product span.onsale,
ul.products li.product .out-of-stock {
position: absolute !important;
top: var(--sp-5) !important;
left: var(--sp-5) !important;
background: var(--pkc-terracotta) !important;
color: var(--pkc-white) !important;
font-size: var(--text-sm) !important; /* Agrandissement 14px */
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 6px 16px !important;
border-radius: var(--radius-full) !important;
line-height: 1 !important;
z-index: 2 !important;
margin: 0 !important;
box-shadow: var(--shadow-sm) !important;
}
/* Infos produit inner list */
ul.products li.product ul.woo-entry-inner {
padding: 0 0 var(--sp-8) 0 !important; /* Pas de padding sur les côtés pour laisser l'image aller bord à bord */
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
list-style: none !important;
background: var(--pkc-white) !important;
align-items: center !important; /* Centrage vertical des éléments */
}
ul.products li.product ul.woo-entry-inner > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Marges et padding horizontal sur les textes (pour ne pas toucher les bords de la carte) */
ul.products li.product ul.woo-entry-inner > li:not(.image-wrap) {
padding-left: var(--sp-8) !important;
padding-right: var(--sp-8) !important;
}
/* Catégorie */
ul.products li.product li.category {
font-size: var(--text-base) !important; /* Agrandissement 16px (UI-UX-Pro-Max) */
font-weight: 600 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--pkc-accent) !important;
margin-top: var(--sp-6) !important; /* Espacement depuis l'image bord à bord */
margin-bottom: var(--sp-3) !important;
}
ul.products li.product li.category a {
color: inherit !important;
}
/* Titre du Produit */
ul.products li.product li.title {
margin-bottom: var(--sp-3) !important;
}
ul.products li.product li.title h2 {
font-family: var(--font-heading) !important;
font-size: var(--text-3xl) !important; /* Agrandissement 30px */
font-weight: 600 !important;
color: var(--pkc-primary) !important;
line-height: 1.2 !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
}
ul.products li.product li.title h2 a {
color: inherit !important;
transition: color var(--ease-fast) !important;
}
ul.products li.product li.title h2 a:hover {
color: var(--pkc-accent) !important;
}
/* Prix */
ul.products li.product li.price-wrap {
margin-top: auto !important; /* Pousse vers le bas */
padding-top: var(--sp-6) !important;
border-top: none !important; /* Suppression de la ligne pour un look épuré */
margin-bottom: var(--sp-6) !important;
}
ul.products li.product span.price {
font-family: var(--font-heading) !important;
font-size: var(--text-4xl) !important; /* Agrandissement 36px */
font-weight: 700 !important;
color: var(--pkc-primary) !important;
line-height: 1 !important;
margin: 0 !important;
display: block !important;
}
ul.products li.product span.price .woocommerce-Price-amount,
ul.products li.product span.price amount {
font-family: var(--font-heading) !important;
font-size: var(--text-4xl) !important;
font-weight: 700 !important;
color: var(--pkc-primary) !important;
}
ul.products li.product span.price ins {
text-decoration: none !important;
color: var(--pkc-primary) !important;
}
ul.products li.product span.price del {
color: var(--pkc-muted-light) !important;
font-size: var(--text-xl) !important; /* Agrandissement 20px */
font-weight: 400 !important;
margin-left: var(--sp-2) !important;
}
/* Boutons d'Action Chic / Minimaliste */
ul.products li.product li.btn-wrap {
margin: 0 !important;
}
/* Bouton ajouter au panier (Outline moderne et élégant) */
ul.products li.product a.button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 52px !important; /* Agrandissement pour confort tactile (UI-UX-Pro-Max) */
background: transparent !important;
color: var(--pkc-primary) !important;
border: 2px solid var(--pkc-primary) !important;
border-radius: var(--radius-full) !important;
font-family: var(--font-body) !important;
font-size: var(--text-base) !important; /* 16px */
font-weight: 600 !important;
text-align: center !important;
letter-spacing: 0.5px !important;
transition: all var(--ease-base) !important;
cursor: pointer !important;
padding: 0 var(--sp-4) !important;
box-shadow: none !important;
}
ul.products li.product a.button:hover {
background: var(--pkc-primary) !important;
color: var(--pkc-white) !important;
border-color: var(--pkc-primary) !important;
box-shadow: var(--shadow-md) !important;
}
/* Masquer les éléments OceanWP non désirés */
ul.products li.product .owp-quick-view {
display: none !important;
}
/* Pagination Boutique */
ul.page-numbers {
display: flex !important;
justify-content: center !important;
gap: var(--sp-3) !important;
list-style: none !important;
margin: var(--sp-20) 0 0 0 !important;
padding: 0 !important;
}
ul.page-numbers li a,
ul.page-numbers li span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 52px !important;
height: 52px !important;
border-radius: var(--radius-full) !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: var(--text-lg) !important; /* Agrandissement 18px */
border: 1.5px solid var(--pkc-border) !important;
transition: all var(--ease-base) !important;
background: var(--pkc-white) !important;
color: var(--pkc-primary) !important;
}
ul.page-numbers li span.current {
background: var(--pkc-primary) !important;
color: var(--pkc-white) !important;
border-color: var(--pkc-primary) !important;
}
ul.page-numbers li a:hover {
background: var(--pkc-accent) !important;
color: var(--pkc-white) !important;
border-color: var(--pkc-accent) !important;
}
/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sp-8) !important;
}
}
@media (max-width: 768px) {
/* Barre d'outils mobile centrée */
.oceanwp-toolbar {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: var(--sp-6) !important;
padding: 0 var(--sp-4) !important;
}
.woocommerce-ordering {
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
.woocommerce-ordering select {
width: 100% !important;
max-width: 320px !important;
min-width: 0 !important;
}
/* Grille 2 colonnes sur mobile pour un effet catalogue moderne */
ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sp-4) !important; /* Espacement plus compact */
padding: 0 var(--sp-4) !important;
}
.pkc-shop-header {
padding: var(--sp-12) var(--sp-4) var(--sp-6) var(--sp-4) !important;
}
.pkc-shop-header .pkc-h1 {
font-size: clamp(2.5rem, 8vw, 3.8rem) !important;
margin-bottom: var(--sp-3) !important;
}
.pkc-shop-header .pkc-body-lg {
font-size: var(--text-base) !important; /* 16px sur mobile */
line-height: 1.5 !important;
}
/* Ajustement des cartes produits en mode 2 colonnes mobile */
ul.products li.product ul.woo-entry-inner {
padding-bottom: var(--sp-5) !important;
}
ul.products li.product ul.woo-entry-inner > li:not(.image-wrap) {
padding-left: var(--sp-4) !important;
padding-right: var(--sp-4) !important;
}
ul.products li.product li.category {
font-size: var(--text-xs) !important; /* 12px sur mobile */
margin-top: var(--sp-4) !important;
margin-bottom: var(--sp-1) !important;
letter-spacing: 1.5px !important;
}
ul.products li.product li.title h2 {
font-size: var(--text-lg) !important; /* ~18px sur mobile */
margin-bottom: var(--sp-1) !important;
}
ul.products li.product span.price {
font-size: var(--text-xl) !important; /* ~20px sur mobile */
margin-bottom: var(--sp-3) !important;
}
ul.products li.product a.button {
height: 44px !important; /* Plus compact pour le tactile mobile */
font-size: var(--text-sm) !important; /* 14px */
padding: 0 var(--sp-2) !important;
}
}
@media (max-width: 480px) {
/* Très petits écrans : garder 2 colonnes mais adapter le texte */
ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sp-3) !important;
padding: 0 var(--sp-3) !important;
}
ul.products li.product ul.woo-entry-inner > li:not(.image-wrap) {
padding-left: var(--sp-3) !important;
padding-right: var(--sp-3) !important;
}
ul.products li.product li.title h2 {
font-size: var(--text-base) !important; /* 16px sur petits mobiles */
}
ul.products li.product span.price {
font-size: var(--text-lg) !important; /* 18px */
}
ul.products li.product a.button {
font-size: var(--text-xs) !important; /* 12px */
height: 40px !important;
}
}
/* ==========================================================================
PAGE PRODUIT UNIQUE (SINGLE PRODUCT)
========================================================================== */
/* Structure de grille moderne (CSS Grid) sur Desktop */
.pkc-product-top-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--sp-8) !important;
max-width: 1200px !important;
margin: 0 auto var(--sp-10) auto !important;
clear: both !important;
}
@media (min-width: 960px) {
.pkc-product-top-grid {
grid-template-columns: 1fr 1fr !important; /* Largeurs d'une égalité parfaite */
gap: 60px !important; /* Espace horizontal optimal et équilibré */
}
}
/* Supprime les traits verticaux inutiles qui encombrent la colonne de droite (summary) */
.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
border-left: none !important;
border-right: none !important;
border: none !important;
box-shadow: none !important;
}
/* Force les colonnes de produit WooCommerce à ne pas flotter */
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
float: none !important;
width: 100% !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce-page div.product .woocommerce-product-gallery {
float: none !important;
width: 100% !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Forçage du nettoyage de flotting sur tous les blocs suivants */
.woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs,
.pkc-product-savoirfaire,
.pkc-product-whatsapp-card,
.related,
.upsells,
.woocommerce section.related.products,
.woocommerce section.upsells.products,
.clear-after-summary {
clear: both !important;
float: none !important;
width: 100% !important;
}
/* Galerie d'Images & Vignettes (Thumbnails) - Dimensions Fluides et Carrées */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce-page div.product .woocommerce-product-gallery {
border-radius: var(--radius-lg) !important;
max-width: 100% !important; /* S'adapte à la largeur de colonne de 1fr */
width: 100% !important;
margin-left: 0 !important;
margin-right: auto !important;
float: none !important;
}
.woocommerce-product-gallery__wrapper {
height: 100% !important;
}
@media (min-width: 768px) {
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce-page div.product .woocommerce-product-gallery .flex-viewport {
height: auto !important;
width: 100% !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
aspect-ratio: 1/1 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce-page div.product .woocommerce-product-gallery__image {
/* Pas de largeur/hauteur forcée pour ne pas perturber les calculs X de Flexslider */
aspect-ratio: 1/1 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce-page div.product .woocommerce-product-gallery__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: var(--radius-lg) !important;
}
}
@media (max-width: 767px) {
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce-page div.product .woocommerce-product-gallery .flex-viewport {
height: auto !important;
width: 100% !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
aspect-ratio: 1/1 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce-page div.product .woocommerce-product-gallery__image {
/* Pas de largeur/hauteur forcée pour ne pas perturber les calculs X de Flexslider */
aspect-ratio: 1/1 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce-page div.product .woocommerce-product-gallery__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: var(--radius-lg) !important;
}
}
/* Vignettes (Thumbnails) */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin-top: 16px !important;
padding: 0 !important;
list-style: none !important;
clear: both !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs li {
width: 80px !important;
height: 80px !important;
float: none !important;
margin: 0 !important;
overflow: hidden !important;
border-radius: var(--radius-md) !important;
flex-shrink: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img,
.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs li img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
cursor: pointer !important;
transition: all var(--ease-base) !important;
border: 2px solid transparent !important;
border-radius: var(--radius-md) !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
border-color: var(--pkc-accent) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-sm) !important;
}
/* Détails du Produit (Summary) */
.woocommerce div.product .summary .product_title,
.woocommerce-page div.product .summary .product_title {
font-family: var(--font-heading) !important;
font-size: clamp(3.2rem, 7vw, 5rem) !important; /* Titre très grand et majestueux */
font-weight: 600 !important;
line-height: 1.15 !important;
color: var(--pkc-primary) !important;
margin: 0 0 var(--sp-2) 0 !important;
letter-spacing: -0.01em !important;
}
/* Prix Produit */
/* Prix Produit */
.woocommerce div.product .summary .price,
.woocommerce-page div.product .summary .price,
.woocommerce div.product .summary .price .amount,
.woocommerce-page div.product .summary .price .amount,
.woocommerce div.product .summary .price ins .amount,
.woocommerce-page div.product .summary .price ins .amount {
font-family: var(--font-body) !important;
font-size: var(--text-5xl) !important; /* 48px */
font-weight: 700 !important;
color: var(--pkc-accent) !important; /* Couleur or de la marque */
margin: 0 0 var(--sp-4) 0 !important;
text-decoration: none !important;
}
.woocommerce div.product .summary .price del,
.woocommerce-page div.product .summary .price del,
.woocommerce div.product .summary .price del .amount,
.woocommerce-page div.product .summary .price del .amount {
font-size: var(--text-3xl) !important; /* 30px */
color: var(--pkc-muted) !important;
margin-right: var(--sp-3) !important;
text-decoration: line-through !important;
}
/* Description Courte & Puces Premium */
.woocommerce-product-details__short-description {
font-size: var(--text-2xl) !important; /* 24px */
line-height: 1.75 !important;
color: var(--pkc-primary) !important;
margin-bottom: var(--sp-6) !important;
opacity: 0.95 !important;
}
.woocommerce-product-details__short-description ul {
list-style: none !important;
padding-left: 0 !important;
margin: 0 0 var(--sp-6) 0 !important;
}
.woocommerce-product-details__short-description li {
position: relative !important;
padding-left: var(--sp-6) !important;
margin-bottom: var(--sp-3) !important;
font-size: var(--text-2xl) !important; /* 24px */
line-height: 1.6 !important;
}
.woocommerce-product-details__short-description li::before {
content: "•" !important;
position: absolute !important;
left: 0 !important;
color: var(--pkc-accent) !important; /* Puces or de marque */
font-weight: bold !important;
font-size: var(--text-2xl) !important;
}
/* Formulaire de Variations (Disposition Stacked Moderne - Sans trait horizontal) */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
margin-bottom: var(--sp-6) !important;
padding: var(--sp-2) 0 !important;
border: none !important; /* Trait retiré */
}
.woocommerce div.product form.cart table.variations,
.woocommerce-page div.product form.cart table.variations,
.woocommerce div.product.elementor form.cart table.variations,
.woocommerce-page div.product.elementor form.cart table.variations {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
border: none !important;
margin-bottom: var(--sp-2) !important;
}
/* Suppression absolue de tout trait ou bordure parasite sur les éléments internes de la table */
.woocommerce div.product form.cart table.variations *,
.woocommerce-page div.product form.cart table.variations *,
.woocommerce div.product.elementor form.cart table.variations *,
.woocommerce-page div.product.elementor form.cart table.variations * {
border: none !important;
border-bottom: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce-page div.product form.cart table.variations tbody,
.woocommerce div.product.elementor form.cart table.variations tbody,
.woocommerce-page div.product.elementor form.cart table.variations tbody {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
border: none !important;
}
.woocommerce div.product form.cart table.variations tr,
.woocommerce-page div.product form.cart table.variations tr,
.woocommerce div.product.elementor form.cart table.variations tr,
.woocommerce-page div.product.elementor form.cart table.variations tr {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
margin-bottom: var(--sp-2) !important;
border: none !important;
}
.woocommerce div.product form.cart table.variations td,
.woocommerce-page div.product form.cart table.variations td,
.woocommerce div.product.elementor form.cart table.variations td,
.woocommerce-page div.product.elementor form.cart table.variations td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
border: none !important;
text-align: left !important;
}
.woocommerce div.product form.cart table.variations td.label,
.woocommerce-page div.product form.cart table.variations td.label,
.woocommerce div.product.elementor form.cart table.variations td.label,
.woocommerce-page div.product.elementor form.cart table.variations td.label {
width: 100% !important;
margin-bottom: var(--sp-2) !important;
border: none !important;
}
.woocommerce div.product form.cart table.variations td.label label,
.woocommerce-page div.product form.cart table.variations td.label label,
.woocommerce div.product.elementor form.cart table.variations td.label label,
.woocommerce-page div.product.elementor form.cart table.variations td.label label {
font-family: var(--font-body) !important;
font-size: var(--text-lg) !important; /* 18px */
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
color: var(--pkc-primary) !important;
margin: 0 !important;
display: inline-block !important;
text-decoration: none !important;
border-bottom: none !important;
}
/* Dropdowns Select de Variations stylisés (Largeur contrôlée) */
.woocommerce div.product form.cart table.variations td.value select,
.woocommerce-page div.product form.cart table.variations td.value select {
width: 100% !important;
max-width: 400px !important;
font-family: var(--font-body) !important;
font-size: var(--text-2xl) !important; /* 24px */
font-weight: 600 !important;
padding: 14px 40px 14px 22px !important;
border: 1.5px solid var(--pkc-border) !important;
border-radius: var(--radius-full) !important;
background-color: var(--pkc-white) !important;
color: var(--pkc-primary) !important;
outline: none !important;
cursor: pointer !important;
transition: all var(--ease-base) !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 18px center !important;
background-size: 18px !important;
}
.woocommerce div.product form.cart table.variations td.value select:hover,
.woocommerce-page div.product form.cart table.variations td.value select:hover {
border-color: var(--pkc-primary) !important;
}
.woocommerce div.product form.cart table.variations td.value select:focus,
.woocommerce-page div.product form.cart table.variations td.value select:focus {
border-color: var(--pkc-accent) !important;
box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.15) !important;
}
.woocommerce div.product form.cart table.variations td.value .theme-select,
.woocommerce-page div.product form.cart table.variations td.value .theme-select {
display: block !important;
width: 100% !important;
max-width: 400px !important;
height: 56px !important; /* Alignement sur la hauteur des autres boutons */
line-height: 54px !important;
padding: 0 48px 0 22px !important;
border: 1.5px solid var(--pkc-border) !important;
border-radius: var(--radius-full) !important; /* Bouton pilule premium */
background-color: var(--pkc-white) !important;
color: var(--pkc-primary) !important;
transition: all var(--ease-base) !important;
box-shadow: none !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: auto !important;
float: none !important;
}
.woocommerce div.product form.cart table.variations td.value .theme-selectInner,
.woocommerce-page div.product form.cart table.variations td.value .theme-selectInner {
font-family: var(--font-body) !important;
font-size: var(--text-2xl) !important; /* 24px */
font-weight: 600 !important;
color: var(--pkc-primary) !important;
display: inline-block !important;
line-height: 54px !important;
height: 54px !important;
vertical-align: middle !important;
}
/* Personnalisation de l'icône de flèche (.theme-select::after) */
.woocommerce div.product form.cart table.variations td.value .theme-select::after,
.woocommerce-page div.product form.cart table.variations td.value .theme-select::after {
border: none !important; /* Retirer la séparation verticale */
content: "\f107" !important; /* Chevron down FontAwesome */
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
color: var(--pkc-accent) !important; /* Flèche dorée de la marque */
font-size: 20px !important;
height: 100% !important;
width: auto !important;
right: 22px !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
}
.woocommerce div.product form.cart table.variations td.value .theme-select:hover,
.woocommerce-page div.product form.cart table.variations td.value .theme-select:hover {
border-color: var(--pkc-primary) !important;
}
.woocommerce div.product form.cart table.variations td.value .theme-select.theme-selectHover,
.woocommerce-page div.product form.cart table.variations td.value .theme-select.theme-selectHover {
border-color: var(--pkc-accent) !important;
box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.15) !important;
}
/* Assurer le clic fonctionnel sur le select invisible */
.woocommerce div.product form.cart table.variations td.value select.hasCustomSelect,
.woocommerce-page div.product form.cart table.variations td.value select.hasCustomSelect {
opacity: 0 !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
z-index: 3 !important;
cursor: pointer !important;
}
/* Boutons d'ajout au panier & Bloc Quantité Unifié */
.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
display: inline-flex !important;
align-items: center !important;
margin-right: var(--sp-4) !important;
float: none !important;
position: relative !important;
border: 1.5px solid var(--pkc-border) !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
background: var(--pkc-bg-warm) !important;
}
.woocommerce div.product form.cart .quantity a.minus,
.woocommerce div.product form.cart .quantity a.plus,
.woocommerce-page div.product form.cart .quantity a.minus,
.woocommerce-page div.product form.cart .quantity a.plus {
width: 50px !important;
height: 56px !important;
background: transparent !important;
color: var(--pkc-primary) !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--text-2xl) !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all var(--ease-base) !important;
cursor: pointer !important;
}
.woocommerce div.product form.cart .quantity a.minus:hover,
.woocommerce div.product form.cart .quantity a.plus:hover,
.woocommerce-page div.product form.cart .quantity a.minus:hover,
.woocommerce-page div.product form.cart .quantity a.plus:hover {
background: var(--pkc-accent) !important;
color: var(--pkc-white) !important;
}
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-page div.product form.cart .quantity input.qty {
width: 60px !important;
height: 56px !important;
font-family: var(--font-body) !important;
font-size: var(--text-2xl) !important; /* 24px */
font-weight: 700 !important;
text-align: center !important;
border: none !important;
background: var(--pkc-white) !important;
color: var(--pkc-primary) !important;
outline: none !important;
padding: 0 !important;
-moz-appearance: textfield !important;
}
/* Bouton Ajouter au Panier */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce-page div.product form.cart .single_add_to_cart_button {
height: 60px !important;
padding: 0 var(--sp-12) !important;
font-family: var(--font-body) !important;
font-size: var(--text-2xl) !important; /* 24px */
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
border-radius: var(--radius-md) !important;
background-color: var(--pkc-accent) !important;
color: var(--pkc-white) !important;
border: none !important;
cursor: pointer !important;
transition: all var(--ease-base) !important;
box-shadow: var(--shadow-md) !important;
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce-page div.product form.cart .single_add_to_cart_button:hover {
background-color: var(--pkc-accent-hover) !important;
box-shadow: var(--shadow-gold) !important;
transform: translateY(-2px) !important;
}
/* Badges de confiance (Trust Badges - Sans trait horizontal) */
.pkc-single-product-badges {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sp-4) !important;
margin-top: var(--sp-6) !important;
padding-top: 0 !important;
border: none !important; /* Trait retiré */
}
.pkc-sp-badge {
display: flex !important;
gap: var(--sp-3) !important;
align-items: start !important;
transition: transform var(--ease-base) !important;
}
.pkc-sp-badge:hover {
transform: translateY(-2px) !important;
}
.pkc-sp-badge-icon {
width: 38px;
height: 38px;
background: var(--pkc-gold-light);
color: var(--pkc-accent);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pkc-sp-badge-icon svg {
width: 22px;
height: 22px;
}
.pkc-sp-badge-text strong {
font-family: var(--font-body) !important;
font-size: var(--text-2xl) !important; /* 24px */
font-weight: 700 !important;
color: var(--pkc-primary) !important;
display: block !important;
line-height: 1.3 !important;
}
.pkc-sp-badge-text span {
font-size: var(--text-xl) !important; /* 20px */
color: var(--pkc-muted) !important;
display: block !important;
line-height: 1.4 !important;
margin-top: 2px !important;
}
/* Meta produit (SKU, Catégories - Sans trait horizontal) */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
font-family: var(--font-body) !important;
font-size: var(--text-xl) !important; /* 20px */
line-height: 1.6 !important;
color: var(--pkc-muted) !important;
border: none !important; /* Trait retiré */
margin-top: var(--sp-6) !important;
padding-top: 0 !important;
}
.woocommerce div.product .product_meta > span,
.woocommerce-page div.product .product_meta > span {
display: block !important;
margin-bottom: var(--sp-2) !important;
}
.woocommerce div.product .product_meta a,
.woocommerce-page div.product .product_meta a {
color: var(--pkc-primary) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.woocommerce div.product .product_meta a:hover,
.woocommerce-page div.product .product_meta a:hover {
color: var(--pkc-accent) !important;
}
/* Onglets WooCommerce épurés (Tabs) */
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
margin: var(--sp-6) 0 !important;
border-top: none !important; /* Retrait de la ligne horizontale du haut */
padding-top: var(--sp-2) !important;
clear: both !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
display: flex !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important; /* Force sur une seule ligne */
overflow-x: auto !important; /* Permet le scroll horizontal sur petit ecran */
-webkit-overflow-scrolling: touch !important;
gap: var(--sp-3) !important;
border-top: none !important; /* Retrait de la fine ligne de OceanWP */
border-bottom: none !important; /* Retrait de la ligne horizontale en dessous des onglets */
padding: 0 !important;
margin: 0 0 var(--sp-6) 0 !important;
background: transparent !important;
list-style: none !important;
scrollbar-width: none !important; /* Firefox */
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar,
.woocommerce-page div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
display: none !important; /* Chrome/Safari */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
background: var(--pkc-bg-warm) !important; /* Mode Pilule */
border: none !important;
margin: 0 !important;
padding: var(--sp-2) var(--sp-5) !important;
border-radius: var(--radius-full) !important;
position: relative !important;
transition: all var(--ease-base) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after {
display: none !important; /* Retrait du trait horizontal actif */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
background: var(--pkc-primary) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--font-body) !important;
font-size: 14px !important; /* Ajusté à 14px pour un aspect plus fin et élégant */
font-weight: 600 !important;
color: var(--pkc-muted) !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 0 !important;
white-space: nowrap !important; /* Empeche le texte de se casser sur 2 lignes */
transition: all var(--ease-base) !important;
border: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
color: #ffffff !important;
background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
color: var(--pkc-primary) !important;
background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-page div.product .woocommerce-tabs .woocommerce-Tabs-panel {
padding: 0 !important;
border: none !important;
box-shadow: none !important;
font-size: 15px !important; /* Taille de lecture idéale */
line-height: 1.75 !important;
color: var(--pkc-secondary) !important;
}
/* On cible specifiquement les paragraphes et listes a l'interieur de la description et des avis */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel p,
.woocommerce-page div.product .woocommerce-tabs .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel li,
.woocommerce-page div.product .woocommerce-tabs .woocommerce-Tabs-panel li,
.woocommerce #reviews #comments ol.commentlist li .comment-text p {
font-size: 15px !important;
line-height: 1.8 !important;
color: var(--pkc-secondary) !important;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel h2,
.woocommerce-page div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
font-family: var(--font-heading) !important;
font-size: var(--text-2xl) !important;
color: var(--pkc-primary) !important;
margin-bottom: var(--sp-4) !important;
}
/* Formulaires de commentaires / avis (Reviews Form) */
#review_form_wrapper {
background: var(--pkc-bg-warm) !important;
padding: var(--sp-6) var(--sp-8) !important;
border-radius: var(--radius-xl) !important;
border: 1px solid var(--pkc-border) !important;
margin-top: var(--sp-4) !important;
}
#review_form_wrapper label {
font-size: var(--text-2xl) !important; /* 24px */
font-weight: 600 !important;
}
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
font-size: var(--text-2xl) !important; /* 24px */
background: var(--pkc-white) !important;
border: 1.5px solid var(--pkc-border) !important;
border-radius: var(--radius-md) !important;
padding: var(--sp-4) !important;
}
#review_form_wrapper input[type="submit"] {
background-color: var(--pkc-primary) !important;
color: var(--pkc-white) !important;
font-size: var(--text-2xl) !important; /* 24px */
font-weight: 600 !important;
padding: var(--sp-4) var(--sp-8) !important;
border-radius: var(--radius-full) !important;
cursor: pointer !important;
transition: all var(--ease-base) !important;
}
#review_form_wrapper input[type="submit"]:hover {
background-color: var(--pkc-accent) !important;
transform: translateY(-2px) !important;
}
/* Attributs additionnels */
.woocommerce-product-attributes {
border-collapse: collapse !important;
width: 100% !important;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
font-size: var(--text-2xl) !important; /* 24px */
padding: var(--sp-3) var(--sp-5) !important;
border-bottom: 1.5px solid var(--pkc-border) !important;
}
.woocommerce-product-attributes th {
font-weight: 700 !important;
color: var(--pkc-primary) !important;
}
.woocommerce-product-attributes td {
color: var(--pkc-secondary) !important;
font-style: italic !important;
}
/* SECTION SAVOIR-FAIRE ARTISANAL (Design Compact et Robuste) */
.pkc-product-savoirfaire {
border-top: none !important;
padding: var(--sp-6) 0 !important; /* Réduit drastiquement de sp-12 à sp-6 sur mobile */
clear: both !important;
}
@media (min-width: 960px) {
.pkc-product-savoirfaire {
padding: var(--sp-12) 0 !important;
}
}
.pkc-psf-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--sp-6) !important; /* Réduit de sp-8 à sp-6 sur mobile */
align-items: center !important;
}
@media (min-width: 960px) {
.pkc-psf-grid {
grid-template-columns: 1.1fr 0.9fr !important;
gap: var(--sp-12) !important;
}
}
.pkc-psf-content {
display: flex !important;
flex-direction: column !important;
gap: var(--sp-3) !important; /* Réduit l'espace vertical */
}
/* Surcouche des textes pour harmonie (ni minuscule, ni géant) */
.pkc-psf-content .pkc-overline {
font-size: 12px !important;
letter-spacing: 0.15em !important;
margin-bottom: var(--sp-1) !important;
}
.pkc-psf-content .pkc-h2 {
font-size: 28px !important; /* Remplace le h2 massif par une taille adaptée */
line-height: 1.2 !important;
margin: 0 0 var(--sp-2) 0 !important;
}
@media (min-width: 960px) {
.pkc-psf-content .pkc-h2 { font-size: 36px !important; }
}
.pkc-psf-content p {
font-size: 15px !important;
line-height: 1.6 !important;
color: var(--pkc-secondary) !important;
margin: 0 !important;
}
.pkc-psf-content .pkc-btn {
align-self: flex-start !important; /* Pour ne pas étirer le bouton sur mobile */
margin-top: var(--sp-2) !important; /* Ecrase le style en ligne */
font-size: 14px !important; /* Taille de texte de bouton ajustée */
padding: var(--sp-3) var(--sp-6) !important;
}
@media (min-width: 960px) {
.pkc-psf-content .pkc-btn { font-size: 15px !important; padding: var(--sp-4) var(--sp-8) !important; }
}
.pkc-psf-image {
border-radius: var(--radius-lg) !important; /* Moins courbé sur mobile */
overflow: hidden !important;
box-shadow: var(--shadow-sm) !important; /* Ombre plus subtile */
height: 300px !important; /* Hauteur réduite sur mobile */
width: 100% !important;
margin-top: var(--sp-2) !important;
}
@media (min-width: 960px) {
.pkc-psf-image {
border-radius: var(--radius-xl) !important;
box-shadow: var(--shadow-lg) !important;
height: 420px !important;
margin-top: 0 !important;
}
}
.pkc-psf-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform var(--ease-slow) !important;
}
.pkc-psf-image:hover img {
transform: scale(1.03) !important;
}
/* SECTION WhatsApp SUR-MESURE (Design Premium WhatsApp Card) */
.pkc-product-whatsapp-card {
background: var(--pkc-bg-warm) !important;
border: 1px solid rgba(161, 98, 7, 0.1) !important; /* Bordure très discrète */
border-radius: var(--radius-lg) !important; /* Légèrement moins arrondi */
padding: var(--sp-6) var(--sp-4) !important; /* Forte réduction (était 12 et 16) */
margin: var(--sp-6) auto !important; /* Marge supérieure fortement réduite */
max-width: 1000px !important;
text-align: center !important;
clear: both !important;
box-shadow: none !important; /* Design épuré sans ombre sur mobile */
position: relative !important;
overflow: hidden !important;
}
@media (min-width: 960px) {
.pkc-product-whatsapp-card {
padding: var(--sp-10) var(--sp-12) !important;
margin: var(--sp-10) auto !important;
border-radius: var(--radius-xl) !important;
}
}
.pkc-pwc-content {
max-width: 700px !important;
margin: 0 auto var(--sp-4) auto !important; /* Marge avant bouton réduite */
}
.pkc-pwc-content .pkc-overline {
color: var(--pkc-accent) !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
margin-bottom: var(--sp-2) !important;
display: block !important;
font-size: 12px !important; /* Overline discret */
text-transform: uppercase !important;
}
.pkc-pwc-content h3 {
font-family: var(--font-heading) !important;
font-size: 22px !important; /* Taille raisonnable sur mobile */
color: var(--pkc-primary) !important;
margin: 0 0 var(--sp-3) 0 !important;
}
@media (min-width: 960px) {
.pkc-pwc-content h3 {
font-size: 28px !important;
}
}
.pkc-pwc-content p {
font-size: 15px !important; /* Texte de lecture élégant */
color: var(--pkc-secondary) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.pkc-product-whatsapp-card .pkc-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--sp-2) !important;
font-size: 14px !important; /* Texte bouton ajusté */
padding: var(--sp-3) var(--sp-6) !important;
border-radius: var(--radius-full) !important;
background-color: var(--pkc-accent) !important;
color: var(--pkc-white) !important;
font-weight: 600 !important;
transition: all var(--ease-base) !important;
}
@media (min-width: 960px) {
.pkc-product-whatsapp-card .pkc-btn {
font-size: 15px !important;
padding: var(--sp-4) var(--sp-8) !important;
}
}
.pkc-product-whatsapp-card .pkc-btn:hover {
background-color: var(--pkc-accent-hover) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
@media (max-width: 768px) {
.pkc-product-whatsapp-card {
padding: var(--sp-8) var(--sp-6) !important;
}
.pkc-psf-image {
height: 250px !important;
}
}
/* Titres section Related & Upsells */
.woocommerce section.related.products > h2,
.woocommerce section.upsells.products > h2 {
font-family: var(--font-heading) !important;
font-size: clamp(2.2rem, 4vw, 2.8rem) !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--pkc-primary) !important;
margin-top: var(--sp-8) !important;
margin-bottom: var(--sp-4) !important;
}
/* RESPONSIVE PAGE PRODUIT UNIQUE */
@media (max-width: 959px) {
.woocommerce div.product {
padding: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery {
margin-bottom: var(--sp-8) !important;
}
.woocommerce div.product .summary {
padding: 0 !important;
}
.woocommerce div.product .summary .product_title {
font-size: var(--text-3xl) !important; /* 30px sur mobile/tablette */
}
.woocommerce div.product .summary .price {
font-size: var(--text-3xl) !important;
}
.woocommerce div.product form.cart select {
max-width: 100% !important; /* selecteur pleine largeur */
}
.woocommerce div.product form.cart .quantity {
margin-bottom: var(--sp-4) !important;
margin-right: 0 !important;
width: 100% !important;
justify-content: center !important;
}
.woocommerce div.product form.cart .quantity a.minus,
.woocommerce div.product form.cart .quantity a.plus,
.woocommerce div.product form.cart .quantity input.qty {
height: 52px !important;
}
.woocommerce div.product form.cart .quantity input.qty {
width: 100% !important;
max-width: 120px !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
width: 100% !important; /* bouton panier pleine largeur sur mobile */
height: 52px !important;
}
.pkc-single-product-badges {
grid-template-columns: 1fr !important;
gap: var(--sp-4) !important;
}
}
/* Masquage de sécurité de la sidebar et étirement du contenu en pleine largeur sur WooCommerce */
.woocommerce-page #sidebar,
.woocommerce-page .sidebar-container {
display: none !important;
}
@media (max-width: 959px) {
/* Sur mobile et tablette, forcer le conteneur principal à occuper toute la largeur disponible de l'écran */
#content-wrap,
#primary,
.content-area,
#content,
.site-content,
div.product,
div.product div.images,
div.product .woocommerce-product-gallery,
.pkc-product-top-grid {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important; /* Retrait du padding sur les sous-conteneurs pour eviter le cumul de marges ! */
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
float: none !important;
}
/* Uniquement le conteneur global recoit le padding de securite */
.container,
#content-wrap.container {
width: 100% !important;
max-width: 100% !important;
padding-left: var(--sp-4) !important;
padding-right: var(--sp-4) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#main #content-wrap {
padding-top: var(--sp-4) !important; /* Reduction de l'espace vertical au-dessus de l'image du produit sur mobile */
}
/* Retrait de tout padding supplémentaire ou marge sur la grille de contenu produit */
.pkc-product-top-grid {
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* --- 23. PAGE À PROPOS --- */
.pkc-ap-hero {
position: relative;
padding: var(--sp-32) 0 var(--sp-24);
min-height: 50vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--pkc-primary);
}
.pkc-ap-hero-bg {
position: absolute;
inset: 0;
z-index: 1;
}
.pkc-ap-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
}
.pkc-ap-hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to bottom, rgba(28, 25, 23, 0.4) 0%, rgba(28, 25, 23, 0.8) 100%);
}
.pkc-ap-hero-content {
position: relative;
z-index: 3;
max-width: 800px;
margin: 0 auto;
text-align: center;
color: var(--pkc-white);
}
.pkc-ap-hero-content .pkc-display {
color: var(--pkc-white);
margin-bottom: var(--sp-4);
}
.pkc-ap-hero-sub {
font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
font-weight: 300;
color: rgba(255, 255, 255, 0.9);
line-height: 1.65;
font-family: var(--font-body);
}
/* Grille Histoire */
.pkc-ap-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-16);
align-items: center;
}
.pkc-ap-media {
position: relative;
}
.pkc-ap-img-wrap {
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: var(--shadow-lg);
}
.pkc-ap-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ease-slow);
}
.pkc-ap-media:hover img {
transform: scale(1.03);
}
.pkc-ap-badge {
position: absolute;
bottom: var(--sp-8);
right: calc(-1 * var(--sp-4));
background: var(--pkc-white);
border-radius: var(--radius-lg);
padding: var(--sp-4) var(--sp-6);
box-shadow: var(--shadow-xl);
text-align: center;
z-index: 2;
border: 1px solid rgba(161, 98, 7, 0.1);
}
.pkc-ap-badge-num {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 700;
color: var(--pkc-accent);
display: block;
line-height: 1;
}
.pkc-ap-badge-text {
font-size: var(--text-base);
color: var(--pkc-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.pkc-ap-content .pkc-overline {
margin-bottom: var(--sp-2);
}
.pkc-ap-desc p {
font-size: var(--text-xl);
line-height: 1.8;
color: var(--pkc-secondary);
margin-bottom: var(--sp-4);
}
.pkc-ap-desc p:last-child {
margin-bottom: 0;
}
/* Grille Valeurs */
.pkc-ap-values {
background-color: var(--pkc-bg-section);
}
.pkc-ap-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-8);
}
.pkc-ap-value-card {
background: var(--pkc-white);
border-radius: var(--radius-xl);
padding: var(--sp-8) var(--sp-6);
box-shadow: var(--shadow-sm);
border: 1px solid transparent;
transition: all var(--ease-base);
}
.pkc-ap-value-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(161, 98, 7, 0.15);
}
.pkc-ap-value-icon {
width: 56px;
height: 56px;
background: var(--pkc-gold-light);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--pkc-accent);
margin-bottom: var(--sp-6);
}
.pkc-ap-value-icon svg {
width: 28px;
height: 28px;
}
.pkc-ap-value-card h3 {
font-family: var(--font-heading);
font-size: var(--text-3xl);
color: var(--pkc-primary);
margin-bottom: var(--sp-3);
font-weight: 600;
}
.pkc-ap-value-card p {
font-size: var(--text-lg);
color: var(--pkc-secondary);
line-height: 1.65;
}
/* Section Matériaux */
.pkc-ap-materials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-8);
}
.pkc-ap-material-card {
background: var(--pkc-bg);
border-radius: var(--radius-xl);
padding: var(--sp-8) var(--sp-6);
border: 1px solid var(--pkc-border);
position: relative;
transition: all var(--ease-base);
}
.pkc-ap-material-card:hover {
border-color: var(--pkc-accent);
box-shadow: var(--shadow-md);
background: var(--pkc-white);
}
.pkc-ap-material-num {
font-family: var(--font-heading);
font-size: var(--text-5xl);
color: rgba(161, 98, 7, 0.15);
font-weight: 700;
display: block;
margin-bottom: var(--sp-4);
transition: color var(--ease-base);
}
.pkc-ap-material-card:hover .pkc-ap-material-num {
color: var(--pkc-accent);
}
.pkc-ap-material-card h3 {
font-family: var(--font-heading);
font-size: var(--text-3xl);
color: var(--pkc-primary);
margin-bottom: var(--sp-3);
font-weight: 600;
}
.pkc-ap-material-card p {
font-size: var(--text-lg);
color: var(--pkc-secondary);
line-height: 1.65;
}
/* Section Processus */
.pkc-ap-process {
background-color: var(--pkc-bg-section);
}
.pkc-ap-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
position: relative;
}
.pkc-ap-step {
background: var(--pkc-white);
border-radius: var(--radius-xl);
padding: var(--sp-8) var(--sp-6);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
align-items: flex-start;
transition: all var(--ease-base);
border: 1px solid transparent;
}
.pkc-ap-step:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(161, 98, 7, 0.1);
}
.pkc-ap-step-badge {
width: 40px;
height: 40px;
background: var(--pkc-primary);
color: var(--pkc-white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: var(--text-base);
margin-bottom: var(--sp-4);
transition: background-color var(--ease-base);
}
.pkc-ap-step:hover .pkc-ap-step-badge {
background: var(--pkc-accent);
}
.pkc-ap-step-content h3 {
font-family: var(--font-heading);
font-size: var(--text-2xl);
color: var(--pkc-primary);
margin-bottom: var(--sp-2);
font-weight: 600;
}
.pkc-ap-step-content p {
font-size: var(--text-base);
color: var(--pkc-secondary);
line-height: 1.6;
}
/* Responsive pour À Propos */
@media (max-width: 1024px) {
.pkc-ap-steps {
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
}
@media (max-width: 768px) {
.pkc-ap-grid {
grid-template-columns: 1fr;
gap: var(--sp-10);
}
.pkc-ap-media {
max-width: 480px;
margin: 0 auto;
}
.pkc-ap-values-grid,
.pkc-ap-materials-grid {
grid-template-columns: 1fr;
gap: var(--sp-6);
}
.pkc-ap-steps {
grid-template-columns: 1fr;
}
.pkc-ap-badge {
right: var(--sp-2);
bottom: var(--sp-4);
}
}
/* --- 24. PAGE CONTACT --- */
.pkc-contact-hero {
/* Hérite de .pkc-ap-hero */
}
.pkc-contact-hero-bg {
background-size: cover;
background-position: center;
}
.pkc-contact-layout {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--sp-12);
align-items: start;
}
.pkc-contact-info {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.pkc-contact-info .pkc-overline {
font-size: var(--text-xl) !important; /* Overline augmenté à 20px */
margin-bottom: calc(-1 * var(--sp-2));
}
.pkc-contact-info h2 {
font-size: clamp(2.5rem, 5vw, 3.5rem); /* Titre plus imposant */
margin-bottom: var(--sp-2);
}
.pkc-contact-details {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.pkc-contact-item {
display: flex;
gap: var(--sp-4);
align-items: start;
}
.pkc-contact-item-icon {
width: 56px; /* Un peu plus grand pour aller avec les textes */
height: 56px;
background: var(--pkc-gold-light);
color: var(--pkc-accent);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--ease-base);
}
.pkc-contact-item:hover .pkc-contact-item-icon {
background: var(--pkc-accent);
color: var(--pkc-white);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.pkc-contact-item-icon svg {
width: 26px;
height: 26px;
}
.pkc-contact-item-content h3 {
font-family: var(--font-body);
font-size: var(--text-xl) !important; /* Augmenté à 20px pour une lisibilité parfaite */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--pkc-accent) !important; /* Utilisation de la couleur accent */
margin-bottom: var(--sp-1);
}
.pkc-contact-item-content p {
font-size: var(--text-2xl) !important; /* Augmenté à 24px (très lisible) */
color: var(--pkc-foreground) !important;
line-height: 1.5;
font-weight: 500;
}
.pkc-contact-link {
color: var(--pkc-foreground);
transition: color var(--ease-fast);
position: relative;
font-weight: 500;
}
.pkc-contact-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1.5px;
background-color: var(--pkc-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--ease-base);
}
.pkc-contact-link:hover {
color: var(--pkc-accent);
}
.pkc-contact-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.pkc-contact-action-box {
background: var(--pkc-bg-warm);
border-radius: var(--radius-lg);
padding: var(--sp-6);
border: 1px dashed rgba(161, 98, 7, 0.2);
display: flex;
flex-direction: column;
gap: var(--sp-4);
align-items: start;
margin-top: var(--sp-2);
}
.pkc-contact-action-box p {
font-size: var(--text-xl) !important; /* Augmenté à 20px */
color: var(--pkc-secondary);
line-height: 1.6;
}
.pkc-contact-hours {
display: flex;
gap: var(--sp-4);
align-items: start;
border-top: 1px solid var(--pkc-border);
padding-top: var(--sp-6);
margin-top: var(--sp-2);
}
.pkc-contact-hours-icon {
width: 56px;
height: 56px;
background: var(--pkc-primary);
color: var(--pkc-white);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pkc-contact-hours-icon svg {
width: 26px;
height: 26px;
}
.pkc-contact-hours-sublabel {
font-size: var(--text-xl) !important; /* Augmenté à 20px */
color: var(--pkc-muted) !important;
margin-bottom: var(--sp-2);
}
.pkc-contact-hours-list {
font-size: var(--text-2xl) !important; /* Augmenté à 24px */
color: var(--pkc-secondary);
line-height: 1.6;
font-weight: 500;
}
.pkc-contact-map {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
aspect-ratio: 16/9;
border: 1px solid var(--pkc-border);
margin-top: var(--sp-4);
}
.pkc-contact-map iframe {
width: 100% !important;
height: 100% !important;
display: block;
}
/* Formulaire droite */
.pkc-contact-form-card {
background: var(--pkc-white);
border-radius: var(--radius-xl);
padding: var(--sp-10) var(--sp-10); /* Espacement intérieur plus généreux */
box-shadow: var(--shadow-lg);
border: 1px solid rgba(28, 25, 23, 0.04);
}
.pkc-contact-form-header {
margin-bottom: var(--sp-8);
}
.pkc-contact-form-title {
font-size: clamp(2.25rem, 4vw, 3rem); /* Titre plus grand */
font-weight: 600;
color: var(--pkc-primary);
margin-bottom: var(--sp-2);
}
.pkc-contact-form-desc {
font-size: var(--text-xl) !important; /* Augmenté à 20px */
color: var(--pkc-muted) !important;
line-height: 1.5;
}
.pkc-contact-form {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.pkc-form-group {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.pkc-form-group label {
font-family: var(--font-body);
font-size: var(--text-xl) !important; /* Augmenté à 20px */
font-weight: 600;
color: var(--pkc-primary);
display: flex;
align-items: center;
gap: 4px;
}
.pkc-required {
color: var(--pkc-terracotta);
}
.pkc-input {
width: 100%;
font-family: var(--font-body);
font-size: var(--text-xl) !important; /* Augmenté à 20px */
color: var(--pkc-foreground);
background: var(--pkc-bg);
border: 1px solid var(--pkc-border);
border-radius: var(--radius-md);
padding: var(--sp-5) var(--sp-6) !important; /* Rembourrage interne plus confortable */
transition: all var(--ease-base);
}
.pkc-input::placeholder {
color: var(--pkc-muted-light) !important;
font-size: var(--text-xl) !important; /* Placeholders à 20px */
}
.pkc-input:hover {
border-color: var(--pkc-muted);
}
.pkc-input:focus {
outline: none;
border-color: var(--pkc-accent);
background: var(--pkc-white);
box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.15);
}
.pkc-textarea {
resize: vertical;
}
/* Bouton Soumettre avec forçage de couleur de marque */
.pkc-btn-submit {
align-self: start;
width: auto;
padding: var(--sp-5) var(--sp-10) !important; /* Hauteur tactile renforcée et largeur généreuse */
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-xl) !important; /* Texte augmenté à 20px */
font-weight: 600 !important;
border: none !important;
cursor: pointer !important;
}
.pkc-btn-submit.pkc-btn--accent {
background-color: var(--pkc-accent) !important; /* Or doré de marque */
border-color: var(--pkc-accent) !important;
color: var(--pkc-white) !important;
}
.pkc-btn-submit.pkc-btn--accent:hover {
background-color: var(--pkc-accent-hover) !important; /* Brun or plus foncé */
border-color: var(--pkc-accent-hover) !important;
color: var(--pkc-white) !important;
box-shadow: var(--shadow-gold) !important;
}
/* Alertes succès / erreur */
.pkc-alert {
display: flex;
gap: var(--sp-3);
align-items: start;
padding: var(--sp-5) var(--sp-6);
border-radius: var(--radius-md);
font-size: var(--text-xl) !important; /* Alertes augmentées à 20px */
line-height: 1.5;
margin-bottom: var(--sp-6);
}
.pkc-alert svg {
flex-shrink: 0;
margin-top: 3px;
width: 24px;
height: 24px;
}
.pkc-alert--success {
background-color: #F0FDF4;
color: #166534;
border: 1px solid #BBF7D0;
}
.pkc-alert--success svg {
color: #15803d;
}
.pkc-alert--error {
background-color: #FEF2F2;
color: #991B1B;
border: 1px solid #FEE2E2;
}
.pkc-alert--error svg {
color: #b91c1c;
}
/* Responsive */
@media (max-width: 1024px) {
.pkc-contact-layout {
grid-template-columns: 1fr;
gap: var(--sp-12);
}
}
@media (max-width: 768px) {
.pkc-contact-form-card {
padding: var(--sp-8) var(--sp-6);
}
.pkc-btn-submit {
width: 100% !important;
justify-content: center;
}
}
/* ══════════════════════════════════════════════════════════════════
MODALE COMMANDE WHATSAPP — Pagnifik Créa
══════════════════════════════════════════════════════════════════ */
/* --- Overlay (fond sombre) --- */
.pkc-modal {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
padding: 16px;
}
.pkc-modal.pkc-modal--open {
display: flex;
}
.pkc-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 10, 5, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
}
/* --- Panneau central --- */
.pkc-modal__panel {
position: relative;
z-index: 1;
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 540px;
max-height: 90dvh;
overflow-y: auto;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.12);
animation: pkc-modal-slide-up 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pkc-modal-slide-up {
from {
opacity: 0;
transform: translateY(32px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* --- En-tête modale --- */
.pkc-modal__header {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 24px 24px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
position: relative;
}
.pkc-modal__header-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
background: #25D366;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
.pkc-modal__title {
font-family: var(--font-heading) !important;
font-size: 20px !important;
font-weight: 600 !important;
color: var(--pkc-primary) !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
}
.pkc-modal__subtitle {
font-size: 13px !important;
color: var(--pkc-muted) !important;
margin: 0 !important;
line-height: 1.4 !important;
}
.pkc-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border: none;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--pkc-secondary);
transition: background 0.2s, color 0.2s;
padding: 0;
}
.pkc-modal__close:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--pkc-primary);
}
/* --- Corps formulaire --- */
.pkc-modal__form {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.pkc-form-row {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 480px) {
.pkc-form-row--2col {
flex-direction: row;
}
.pkc-form-row--2col .pkc-form-field {
flex: 1;
}
}
.pkc-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.pkc-form-field label {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--pkc-primary) !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
margin: 0 !important;
}
.pkc-form-field input,
.pkc-form-field textarea {
width: 100%;
font-size: 15px !important;
font-family: var(--font-body) !important;
color: var(--pkc-primary) !important;
border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 10px !important;
padding: 11px 14px !important;
background: #fafaf8 !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.pkc-form-field input:focus,
.pkc-form-field textarea:focus {
border-color: var(--pkc-accent) !important;
box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.12) !important;
background: #fff !important;
}
.pkc-form-field input.pkc-field--invalid,
.pkc-form-field textarea.pkc-field--invalid {
border-color: #c0392b !important;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}
.pkc-field-error {
font-size: 12px !important;
color: #c0392b !important;
font-weight: 500 !important;
min-height: 16px;
}
.pkc-required {
color: #c0392b;
font-weight: 700;
margin-left: 2px;
}
.pkc-optional {
font-size: 11px;
color: var(--pkc-muted);
font-weight: 400;
margin-left: 4px;
}
/* --- Notice informative --- */
.pkc-modal__notice {
display: flex;
align-items: flex-start;
gap: 8px;
background: rgba(37, 211, 102, 0.07);
border: 1px solid rgba(37, 211, 102, 0.2);
border-radius: 10px;
padding: 12px 14px;
font-size: 13px !important;
color: var(--pkc-secondary) !important;
line-height: 1.5 !important;
}
.pkc-modal__notice svg {
flex-shrink: 0;
margin-top: 1px;
color: #25D366;
}
/* --- Bouton de soumission --- */
.pkc-modal__submit {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 20px;
background: #25D366;
color: #fff;
font-family: var(--font-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.03em;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
}
.pkc-modal__submit:hover {
background: #1da851;
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
}
.pkc-modal__submit:active {
transform: translateY(0);
}
.pkc-modal__submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Spinner animé sur le bouton */
.pkc-btn-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: pkc-spin 0.65s linear infinite;
}
@keyframes pkc-spin {
to { transform: rotate(360deg); }
}
/* --- Banner de succès (toast en haut de page) --- */
.pkc-success-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999;
transform: translateY(-110%);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
.pkc-success-banner.pkc-banner--visible {
transform: translateY(0);
pointer-events: auto;
}
.pkc-success-banner__inner {
display: flex;
align-items: center;
gap: 12px;
background: #1a7840;
color: #fff;
padding: 14px 20px;
font-size: 14px;
line-height: 1.4;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.pkc-success-banner__inner strong {
display: block;
font-size: 15px;
font-weight: 700;
}
.pkc-success-banner__icon {
font-size: 22px;
flex-shrink: 0;
}
.pkc-banner-close {
margin-left: auto;
flex-shrink: 0;
background: none;
border: none;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: color 0.15s;
}
.pkc-banner-close:hover { color: #fff; }
/* Scrollbar élégante dans la modale */
.pkc-modal__panel::-webkit-scrollbar { width: 4px; }
.pkc-modal__panel::-webkit-scrollbar-track { background: transparent; }
.pkc-modal__panel::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
border-radius: 4px;
}