:root {
    --black: #0a0a0a;
    --white: #fafaf8;
    --gold: #c9a84c;
    --gold-light: #e8d5a3;
    --gold-dark: #9a7a2e;
    --cream: #f5f0e8;
    --gray-100: #f0ede8;
    --gray-200: #e2ddd5;
    --gray-400: #9e9890;
    --gray-600: #6b6560;
    --glass: rgba(250,250,248,0.08);
    --glass-border: rgba(201,168,76,0.2);
    --shadow-gold: 0 8px 40px rgba(201,168,76,0.15);
    --shadow-deep: 0 24px 80px rgba(0,0,0,0.3);
    --transition: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    background: var(--white);
    color: var(--black);
    overflow-x: hidden;
}

/* ─── TYPOGRAPHY ─── */
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(2.8rem, 7vw, 6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }

.serif-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; }
.gold { color: var(--gold); }
.overline { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

/* ─── BUTTONS ─── */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 500;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: 16px 38px; border: none; cursor: pointer;
    text-decoration: none; transition: all 0.3s var(--transition);
    position: relative; overflow: hidden;
}
.btn::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.12);
    transform: translateX(-100%);
    transition: transform 0.4s var(--transition);
}
.btn:hover::before { transform: translateX(0); }

.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--white); box-shadow: 0 6px 30px rgba(201,168,76,0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,168,76,0.45); }

.btn-outline {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}
.btn-outline:hover { background: var(--gold); color: var(--white); }

.btn-dark {
    background: var(--black);
    color: var(--white);
}
.btn-dark:hover { background: #1a1a1a; transform: translateY(-2px); }

.btn-white {
    background: var(--white);
    color: var(--black);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }

/* ─── NAV ─── */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 22px 5%;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.4s var(--transition);
    background: var(--black);
}
nav.scrolled {
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    padding: 16px 5%;
    border-bottom: 1px solid rgba(201,168,76,0.15);
}
.nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem; font-weight: 500; color: var(--white);
    text-decoration: none; letter-spacing: 0.05em;
}
.nav-logo span { color: var(--gold); }

.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
    color: rgba(255,255,255,0.8); text-decoration: none;
    font-size: 0.8rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
    transition: color 0.3s;
    position: relative;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transition: transform 0.3s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-cart {
    position: relative; cursor: pointer;
    color: var(--white); background: none; border: none;
    font-size: 1.3rem; transition: color 0.3s;
}
.nav-cart:hover { color: var(--gold); }
.cart-badge {
    position: absolute; top: -8px; right: -10px;
    background: var(--gold); color: var(--white);
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 0.68rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Jost', sans-serif;
}

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; }
.hamburger span { width: 24px; height: 1.5px; background: var(--white); transition: all 0.3s; }

/* ─── HERO ─── */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    overflow: hidden; background: var(--black);
}

#lien-hero, .hero-link {
    text-decoration: none;
}
.hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1510 40%, #0d0b08 100%);
}
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.particle {
    position: absolute; width: 1px; height: 1px;
    background: var(--gold-light); border-radius: 50%;
    animation: float linear infinite;
    opacity: 0;
}
@keyframes float {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-20vh) scale(1.5); opacity: 0; }
}

.hero-scene {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #1a1208 0%, #2d2010 30%, #1a1510 60%, #0f0d0a 100%);
    position: relative;
}

/* Bucket illustration SVG */
.hero-bucket-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.hero-content {
    position: relative; z-index: 2;
    padding: 0 5% 0 7%;
    max-width: 700px;
    width: 45%;
    flex-shrink: 0;
}
.hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 30px;
    border: 1px solid rgba(201,168,76,0.35);
    padding: 8px 18px; background: rgba(201,168,76,0.08);
}
.hero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero h1 {
    color: var(--white); margin-bottom: 12px;
    animation: slideUp 0.8s ease both 0.2s;
}
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-sub {
    color: rgba(255,255,255,0.6); font-size: 1.05rem;
    margin-bottom: 44px; max-width: 440px; line-height: 1.7;
    animation: slideUp 0.8s ease both 0.4s;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; animation: slideUp 0.8s ease both 0.6s; }
.hero-trust { margin-top: 56px; display: flex; gap: 32px; animation: slideUp 0.8s ease both 0.8s; }
.trust-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.55); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.trust-icon { font-size: 1.1rem; color: var(--gold); }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-scroll {
    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.4); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    animation: fadeIn 1.5s ease both 1.2s;
    cursor: pointer;
}


.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-visual {
    position: absolute; right: 0; top: 0; bottom: 0; width: 55%;
    overflow: hidden;
}
.hero-visual::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--black) 0%, transparent 40%, transparent 80%, rgba(10,10,10,0.4) 100%);
}
.scroll-line { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: scrollAnim 2s ease-in-out infinite; }
@keyframes scrollAnim { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── SECTIONS ─── */
section { padding: 100px 7%; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-header .overline { display: block; margin-bottom: 16px; }
.section-header h2 { margin-bottom: 20px; }
.section-header p { color: var(--gray-600); max-width: 540px; margin: 0 auto; line-height: 1.75; font-size: 1.05rem; }

.divider {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 24px auto;
}

/* ─── EXAMPLES ─── */
.examples { background: var(--black); padding: 100px 7%; }
.examples .section-header .overline { color: var(--gold); }
.examples .section-header h2 { color: var(--white); }
.examples .section-header p { color: rgba(255,255,255,0.5); }

.example-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201,168,76,0.15);
    overflow: hidden;
    transition: all 0.4s var(--transition);
    cursor: pointer;
}
.example-card:hover { transform: translateY(-8px); border-color: rgba(201,168,76,0.4); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.example-visual {
    height: 240px; position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.example-visual canvas { position: absolute; inset: 0; }
.example-info { padding: 24px; }
.example-type { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.example-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--white); margin-bottom: 8px; }
.example-desc { font-size: 0.82rem; color: rgba(255,255,255,0.45); line-height: 1.6; }

/* ─── PRODUCTS ─── */
.products { background: var(--cream); }

.product-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.4s var(--transition);
    position: relative;
}
.product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-gold); border-color: rgba(201,168,76,0.3); }
.product-card.featured { border-color: var(--gold); }
.product-badge {
    position: absolute; top: 20px; left: 20px; z-index: 2;
    background: var(--gold); color: var(--white);
    padding: 6px 14px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
}
.product-visual {
    height: 260px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.product-visual img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.4s;
}


.product-visual svg { transition: transform 0.4s; }
.product-info { padding: 28px; }
.product-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; margin-bottom: 8px; }
.product-desc { font-size: 0.85rem; color: var(--gray-600); line-height: 1.65; margin-bottom: 20px; }
.product-features { list-style: none; margin-bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.product-features li { font-size: 0.82rem; color: var(--gray-600); display: flex; align-items: center; gap: 8px; }
.product-features li::before { content: '—'; color: var(--gold); }
.product-price-row { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--black); }
.product-price-sub { font-size: 0.75rem; color: var(--gray-400); font-family: 'Jost', sans-serif; }

/* ─── ADVANTAGES ─── */
.advantages { background: var(--white); }

.advantage-item {
    text-align: center;
    padding: 24px;

}
.advantage-icon {
    width: 72px; height: 72px; margin: 0 auto 24px;
    border: 1px solid var(--gold-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    transition: all 0.3s;
    background: linear-gradient(135deg, transparent, rgba(201,168,76,0.08));
}
.advantage-title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; margin-bottom: 10px; }
.advantage-desc { font-size: 0.83rem; color: var(--gray-600); line-height: 1.65; }

/* ─── TESTIMONIALS ─── */
.testimonials { background: var(--black); padding: 100px 7%; }
.testimonials .section-header h2 { color: var(--white); }
.testimonials .section-header .overline { color: var(--gold); }
.testimonials-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201,168,76,0.12);
    padding: 36px; position: relative;
    transition: all 0.3s;
}
.testimonial-card:hover { border-color: rgba(201,168,76,0.35); transform: translateY(-4px); }
.testimonial-quote { font-size: 4rem; font-family: 'Cormorant Garamond', serif; color: var(--gold); opacity: 0.4; line-height: 1; margin-bottom: 16px; }
.testimonial-text { color: rgba(255,255,255,0.7); font-size: 0.92rem; line-height: 1.75; margin-bottom: 28px; font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: var(--white); font-size: 0.9rem;
}
.testimonial-name { font-weight: 500; color: var(--white); font-size: 0.88rem; }
.testimonial-event { font-size: 0.75rem; color: var(--gold); letter-spacing: 0.1em; }
.stars { color: var(--gold); font-size: 0.8rem; margin-bottom: 16px; }

/* ─── URGENCY BANNER ─── */
.urgency-banner {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    padding: 16px 7%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.urgency-banner p { color: var(--white); font-size: 0.88rem; font-weight: 400; letter-spacing: 0.08em; }
.urgency-banner strong { font-weight: 600; }

/* ─── PROFESSIONALS ─── */
.professionals { background: var(--cream); }
.pro-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pro-text .overline { display: block; margin-bottom: 20px; }
.pro-text h2 { margin-bottom: 20px; }
.pro-text p { color: var(--gray-600); line-height: 1.75; margin-bottom: 16px; }
.pro-perks { list-style: none; margin: 28px 0 36px; display: flex; flex-direction: column; gap: 12px; }
.pro-perks li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9rem; }
.perk-check { color: var(--gold); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.pro-form { background: var(--white); padding: 48px; border: 1px solid var(--gray-200); }
.form-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; margin-bottom: 8px; }
.form-sub { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 32px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 8px; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 14px 16px;
    border: 1px solid var(--gray-200); background: var(--white);
    font-family: 'Jost', sans-serif; font-size: 0.9rem;
    color: var(--black); transition: border-color 0.3s;
    outline: none; appearance: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── FOOTER ─── */
footer {
    background: var(--black); padding: 80px 7% 40px;
    border-top: 1px solid rgba(201,168,76,0.15);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.footer-brand .nav-logo { font-size: 1.6rem; display: block; margin-bottom: 16px; }
.footer-brand p { color: rgba(255,255,255,0.45); font-size: 0.85rem; line-height: 1.7; margin-bottom: 24px; max-width: 280px; }
.footer-social { display: flex; gap: 12px; }
.social-btn {
    width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4); font-size: 0.85rem; cursor: pointer;
    transition: all 0.3s; text-decoration: none;
}
.social-btn:hover { border-color: var(--gold); color: var(--gold); }
.footer-col h4 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a { color: rgba(255,255,255,0.45); text-decoration: none; font-size: 0.85rem; transition: color 0.3s; }
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { color: rgba(255,255,255,0.25); font-size: 0.78rem; }
.payment-icons { display: flex; gap: 10px; }
.payment-icon { background: rgba(255,255,255,0.08); padding: 6px 12px; font-size: 0.72rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; }

/* ─── PRODUCT CONFIGURATOR PAGE ─── */
#page-configurator {

    min-height: 100vh; background: var(--white); padding-top: 100px;
}
#page-configurator.active { display: block; }

.configurator-wrapper { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 100px); }
.configurator-preview {
    background: var(--gray-100); position: sticky; top: 80px;
    height: calc(100vh - 80px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 40px;
}
.preview-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 32px; }
.preview-canvas-wrap { position: relative; }
#previewCanvas { max-width: 340px; width: 100%; border-radius: 4px; }
.preview-note { margin-top: 24px; text-align: center; font-size: 0.78rem; color: var(--gray-400); }

.configurator-form { padding: 60px 48px; }
.config-header { margin-bottom: 40px; }
.config-header .overline { display: block; margin-bottom: 12px; }
.config-header h2 { margin-bottom: 8px; }
.config-header p { color: var(--gray-600); font-size: 0.9rem; }

.config-section { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--gray-100); }
.config-section-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 20px; }

/* Size selector */
.size-options { display: flex; gap: 16px; }
.size-opt {
    flex: 1; border: 1px solid var(--gray-200); padding: 20px;
    cursor: pointer; transition: all 0.3s; text-align: center;
    position: relative;
}
.size-opt.active { border-color: var(--gold); background: rgba(201,168,76,0.05); }
.size-opt-price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; display: block; }
.size-opt-label { font-size: 0.78rem; color: var(--gray-600); }
.size-opt-sub { font-size: 0.72rem; color: var(--gray-400); margin-top: 4px; }

/* Color selector */
.color-options { display: flex; gap: 12px; }
.color-opt {
    width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer; border: 3px solid transparent;
    transition: all 0.3s;
}
.color-opt.active { border-color: var(--gold); transform: scale(1.1); }

/* Text input */
.text-preview { position: relative; }
.text-preview input {
    width: 100%; padding: 14px 16px; border: 1px solid var(--gray-200);
    font-family: 'Cormorant Garamond', serif; font-size: 1.1rem;
    outline: none; transition: border-color 0.3s;
}
.text-preview input:focus { border-color: var(--gold); }
.char-count { position: absolute; right: 12px; bottom: 10px; font-size: 0.72rem; color: var(--gray-400); }

/* Font selector */
.font-options { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.font-opt {
    padding: 8px 16px; border: 1px solid var(--gray-200);
    cursor: pointer; font-size: 0.85rem; transition: all 0.3s;
}
.font-opt.active { border-color: var(--gold); background: rgba(201,168,76,0.05); color: var(--black); }
.font-opt[data-font="Cormorant Garamond"] { font-family: 'Cormorant Garamond', serif; }
.font-opt[data-font="serif"] { font-family: Georgia, serif; }

/* Image upload */
.upload-zone {
    border: 2px dashed var(--gray-200); padding: 32px; text-align: center;
    cursor: pointer; transition: all 0.3s; position: relative;
}
.upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-size: 2rem; margin-bottom: 12px; color: var(--gray-400); }
.upload-text { font-size: 0.85rem; color: var(--gray-600); }
.upload-text strong { color: var(--gold); }
.upload-preview { max-height: 80px; max-width: 160px; margin: 12px auto 0; display: none; }

/* Checkbox option */
.checkbox-opt {
    display: flex; align-items: flex-start; gap: 14px;
    border: 1px solid var(--gray-200); padding: 20px; cursor: pointer;
    transition: all 0.3s;
}
.checkbox-opt:hover { border-color: var(--gold-light); }
.checkbox-opt.active { border-color: var(--gold); background: rgba(201,168,76,0.05); }
.custom-check {
    width: 20px; height: 20px; border: 2px solid var(--gray-400);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; margin-top: 1px;
}
.checkbox-opt.active .custom-check { background: var(--gold); border-color: var(--gold); color: var(--white); font-size: 0.75rem; }
.check-text strong { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.check-text span { font-size: 0.8rem; color: var(--gray-600); }
.check-price-tag { font-size: 0.78rem; color: var(--gold); font-weight: 500; margin-left: auto; white-space: nowrap; }

/* Quantity */
.qty-selector { display: flex; align-items: center; gap: 0; border: 1px solid var(--gray-200); width: fit-content; }
.qty-btn {
    width: 44px; height: 44px; border: none; background: none; cursor: pointer;
    font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; color: var(--black);
}
.qty-btn:hover { background: var(--gray-100); }
.qty-val { width: 60px; text-align: center; font-size: 1rem; border: none; border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); padding: 10px; outline: none; font-family: 'Jost', sans-serif; }

/* Config summary */
.config-summary {
    background: var(--black); padding: 28px; margin-bottom: 20px;
}
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; color: var(--white); font-size: 0.85rem; }
.summary-row.total { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 8px; padding-top: 16px; }
.summary-row.total .label { font-weight: 500; font-size: 0.9rem; }
.summary-row.total .val { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--gold); }
.summary-row .val { color: var(--gold-light); }

.upsell-hint { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.25); padding: 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.upsell-hint p { font-size: 0.82rem; color: var(--gray-600); }
.upsell-hint strong { color: var(--gold-dark); }

/* ─── CART SIDEBAR ─── */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-sidebar {
    position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 100vw;
    background: var(--white); z-index: 2001;
    transform: translateX(100%); transition: transform 0.4s var(--transition);
    display: flex; flex-direction: column;
}
.cart-overlay.open .cart-sidebar { transform: translateX(0); }
.cart-head { padding: 28px 28px 24px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.cart-head h3 { font-size: 1.4rem; }
.cart-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--gray-400); transition: color 0.3s; }
.cart-close:hover { color: var(--black); }
.cart-items { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 20px; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--gray-400); }
.cart-empty p { margin-top: 16px; font-size: 0.9rem; }
.cart-item { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); }
.cart-item-img { width: 72px; height: 72px; background: var(--gray-100); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cart-item-img canvas { width: 100%; height: 100%; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 0.9rem; font-weight: 500; margin-bottom: 4px; }
.cart-item-custom { font-size: 0.78rem; color: var(--gray-600); margin-bottom: 8px; }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; }
.cart-item-price { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.ciq-btn { width: 28px; height: 28px; border: 1px solid var(--gray-200); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 0.9rem; }
.ciq-btn:hover { border-color: var(--gold); }
.ciq-val { font-size: 0.88rem; width: 28px; text-align: center; }
.cart-remove { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 0.75rem; transition: color 0.2s; }
.cart-remove:hover { color: #c0392b; }
.cart-foot { padding: 24px 28px; border-top: 1px solid var(--gray-100); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cart-subtotal span { font-size: 0.85rem; color: var(--gray-600); }
.cart-subtotal .price { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; }
.cart-shipping-note { font-size: 0.78rem; color: var(--gray-400); margin-bottom: 20px; }
.cart-cross { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.2); padding: 14px 16px; margin-bottom: 20px; }
.cart-cross p { font-size: 0.8rem; color: var(--gray-600); }
.cart-cross strong { color: var(--gold-dark); }

/* ─── CHECKOUT MODAL ─── */
.checkout-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.3s; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.checkout-overlay.open { opacity: 1; pointer-events: all; }
.checkout-modal { background: var(--white); width: 100%; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; transform: translateY(30px); transition: transform 0.4s; }
.checkout-overlay.open .checkout-modal { transform: translateY(0); }
.checkout-left { padding: 48px; border-right: 1px solid var(--gray-200); }
.checkout-right { padding: 48px; background: var(--gray-100); }
.checkout-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; margin-bottom: 8px; }
.checkout-sub { font-size: 0.82rem; color: var(--gray-600); margin-bottom: 32px; }
.step-tabs { display: flex; gap: 0; margin-bottom: 32px; }
.step-tab { flex: 1; padding: 12px; text-align: center; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; border-bottom: 2px solid var(--gray-200); color: var(--gray-400); transition: all 0.3s; cursor: pointer; }
.step-tab.active { border-color: var(--gold); color: var(--black); }
.checkout-step { display: none; }
.checkout-step.active { display: block; }
.stripe-mock { margin-top: 16px; }
.stripe-card-field { background: var(--white); border: 1px solid var(--gray-200); padding: 14px 16px; font-family: monospace; font-size: 0.9rem; color: var(--gray-400); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.stripe-card-field .card-icon { color: var(--gold); }
.stripe-badge { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--gray-400); margin-top: 16px; }
.checkout-order-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--gray-200); font-size: 0.85rem; }
.checkout-order-sum { padding-top: 16px; }
.checkout-order-sum .row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 6px 0; color: var(--gray-600); }
.checkout-order-sum .row.total { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--black); border-top: 1px solid var(--gray-200); padding-top: 16px; margin-top: 8px; }

/* ─── SUCCESS ─── */
.success-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 4000; display: none; flex-direction: column; align-items: center; justify-content: center; }
.success-overlay.show { display: flex; }
.success-box { text-align: center; color: var(--white); padding: 40px; max-width: 500px; }
.success-icon { font-size: 4rem; margin-bottom: 24px; animation: popIn 0.6s ease; }
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }

/* ─── PAGE SELECTOR ─── */
#page-home { display: block; }
#page-pros { }
#page-home.active { display: block; }
#page-pros.active { display: block; }

/* ─── MOBILE NAV ─── */
/* ─── MOBILE MENU ─── */
.mobile-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--black, #0a0a0a);
    border-top: 1px solid rgba(201,168,76,0.2);
    padding: 24px 7%;
    gap: 0;
    z-index: 9998;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.mobile-menu a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--gold, #c9a84c); }

/* ─── PRODUCTS / EXAMPLES / ADVANTAGES GRIDS ─── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* ─── CROSS-SELL ─── */
.crosssell-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.crosssell-grid > div {
    display: flex;
    align-items: center;
    gap: 24px;
}


/* ─── NFC MODAL & INFO ─── */
.nfc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.nfc-modal-content {
    background: #1a1a1a;
    color: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    position: relative;
    animation: fadeIn 0.3s ease;
}

.nfc-close {
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
    font-size: 1.2rem;
}

.nfc-modal h2 {
    margin-bottom: 10px;
    color: var(--gold);
}

.nfc-modal ul {
    padding-left: 18px;
    margin-top: 5px;
}

.nfc-modal li {
    margin-bottom: 5px;
}

.info-nfc {
    cursor: pointer;
    margin-left: 6px;
    font-size: 0.9rem;
    color: var(--gold);
    transition: 0.2s;
}

.info-nfc:hover {
    opacity: 0.7;
}

.nfc-info-banner { background:rgba(201,168,76,0.06); border:1px solid rgba(201,168,76,0.2); padding:16px 18px; display:flex; align-items:flex-start; gap:12px; }
.nfc-info-banner p { font-size:0.82rem; color:var(--gray-600); line-height:1.6; }
.nfc-type-options { display:flex; gap:10px; flex-wrap:wrap; }
.nfc-type-btn { flex:1 1 80px; border:1px solid var(--gray-200); background:none; padding:14px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; font-family:'Jost',sans-serif; font-size:0.78rem; color:var(--gray-600); transition:all 0.25s; text-align:center; }
.nfc-type-btn:hover { border-color:var(--gold-light); color:var(--black); }
.nfc-type-btn.active { border-color:var(--gold); background:rgba(201,168,76,0.05); color:var(--black); }
.nfc-field-block { margin-top:14px; }
.nfc-field-label { display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray-600); margin-bottom:10px; }

/* ─── CANVAS & CONTROLS ─── */
.canvas-hint {
    position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,0.55); color:rgba(255,255,255,0.7);
    font-size:0.7rem; letter-spacing:0.06em; padding:5px 12px;
    pointer-events:none; white-space:nowrap; border-radius:20px;
    transition:opacity 0.4s; opacity:0.8;
}

.text-control-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.text-control-label {
    font-size:0.72rem; font-weight:600; letter-spacing:0.15em;
    text-transform:uppercase; color:var(--gray-600);
    white-space:nowrap; min-width:60px;
}
.size-slider-wrap { display:flex; align-items:center; gap:6px; flex:1; flex-wrap:wrap; }
.size-slider-wrap input[type="range"] { flex:1; min-width:80px; accent-color:var(--gold); height:4px; cursor:pointer; }
.size-slider-wrap input[type="number"] {
    width:52px; padding:5px 8px; text-align:center;
    border:1px solid var(--gray-200); font-family:'Jost',sans-serif;
    font-size:0.82rem; outline:none; transition:border-color 0.2s;
}
.size-slider-wrap input[type="number"]:focus { border-color:var(--gold); }
.size-unit { font-size:0.75rem; color:var(--gray-400); }
.size-step-btn {
    background:none; border:1px solid var(--gray-200);
    color:var(--gray-600); width:26px; height:26px; font-size:1rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; line-height:1; padding:0;
}
.size-step-btn:hover { border-color:var(--gold); color:var(--gold); }

/* ─── COLOR & TEXT OPTIONS ─── */
.color-text-opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.color-opt-text {
    width:26px; height:26px; border-radius:50%; cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
    border:2px solid transparent; box-sizing:border-box;
}
.color-opt-text:hover { transform:scale(1.18); }
.color-opt-text.active { box-shadow:0 0 0 3px var(--gold); transform:scale(1.18); }

/* ─── CAROUSEL ─── */
.product-carousel { display:flex; gap:14px; flex-wrap:wrap; }
.carousel-card {
    flex:1 1 120px; min-width:110px; max-width:160px;
    border:1px solid var(--gray-200); text-decoration:none;
    color:var(--black); transition:all 0.3s var(--transition);
    text-align:center; overflow:hidden; position:relative;
}
.carousel-card:hover { border-color:var(--gold-light); transform:translateY(-3px); box-shadow:var(--shadow-gold); }
.carousel-card.active { border-color:var(--gold); background:rgba(201,168,76,0.04); box-shadow:var(--shadow-gold); }
.carousel-card.active::after {
    content:'✓'; position:absolute; top:8px; right:8px;
    width:20px; height:20px; background:var(--gold); color:var(--white);
    border-radius:50%; font-size:0.65rem; display:flex;
    align-items:center; justify-content:center; line-height:20px;
}
.carousel-card-visual { background:var(--gray-100); padding:16px 0 8px; display:flex; align-items:center; justify-content:center; }
.carousel-card-info { padding:10px 12px 14px; }
.carousel-card-name { display:block; font-size:0.78rem; font-weight:500; color:var(--black); margin-bottom:4px; line-height:1.3; }
.carousel-card-price { font-family:'Cormorant Garamond',serif; font-size:1.25rem; display:block; }

/* ─── AVIS SECTION (EXTENDED) ─── */
/* ─── AVIS SECTION (EXTENDED) ─── */
.avis-section {
    padding: 100px 7%;
    background: var(--white);
}

.avis-summary { display:flex; align-items:center; gap:20px; justify-content:center; margin-bottom:56px; }
.avis-score { display:flex; align-items:baseline; gap:4px; }
.avis-score-number { font-family:'Cormorant Garamond',serif; font-size:3.5rem; color:var(--gold); line-height:1; }
.avis-score-max { font-size:1rem; color:var(--gray-400); }
.avis-score-stars { display:flex; align-items:center; gap:4px; }
.avis-score-stars .star { font-size:1.3rem; color:var(--gray-200); }
.avis-score-stars .star.filled { color:var(--gold); }
.avis-score-count { font-size:0.8rem; color:var(--gray-400); margin-left:6px; }
.avis-empty { text-align:center; padding:60px 20px; color:var(--gray-400); }
.avis-empty-icon { font-size:3rem; margin-bottom:16px; }
.avis-form-wrap { max-width:640px; margin:64px auto 0; }
.avis-form-inner { background:var(--white); border:1px solid var(--gray-200); padding:40px; box-shadow:var(--shadow-gold); }
.star-picker { display:flex; gap:6px; }
.star-pick-btn { background:none; border:none; font-size:2rem; color:var(--gray-200); cursor:pointer; transition:color 0.2s,transform 0.2s; padding:0; line-height:1; }
.star-pick-btn.active,.star-pick-btn:hover { color:var(--gold); transform:scale(1.15); }
.avis-login-cta { text-align:center; margin-top:48px; font-size:0.9rem; color:var(--gray-600); }

/* ─── SIMPLE MODE ─── */
.simple-mode-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: rgba(201,168,76,0.05);
    border: 1px solid rgba(201,168,76,0.2);
    margin-bottom: 4px;
}
.simple-mode-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}
.simple-mode-info p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ─── STRIPE ELEMENTS ─── */
.stripe-elements-field {
    border: 1px solid var(--gray-200);
    padding: 14px 16px;
    transition: border-color 0.2s;
    background: var(--white);
}
.stripe-elements-field.StripeElement--focus,
.stripe-elements-field:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.12);
}
.stripe-elements-field.StripeElement--invalid {
    border-color: #e53935;
}
#stripe-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── RESPONSIVE ─── */

/* Tablette large */
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .configurator-wrapper { grid-template-columns: 1fr; }
    .configurator-preview { position: relative; height: auto; top: auto; }
}

/* Tablette */
@media (max-width: 1024px) {
    .examples-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .advantages-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-visual { width: 260px; }
}

/* Petite tablette / grand mobile */
@media (max-width: 900px) {
    .testimonials-track { grid-template-columns: 1fr; }
    .pro-content { grid-template-columns: 1fr; }
    .checkout-modal { grid-template-columns: 1fr; }
    .checkout-right { display: none; }
    .hero-visual { display: none; }
    .hero-content { max-width: 100%; }
}

/* Mobile */
@media (max-width: 768px) {
    html { font-size: 15px; }
    section { padding: 60px 5%; }
    h1 { font-size: clamp(2rem, 8vw, 3rem); }
    h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }

    /* Hero → colonne : image en haut, texte en bas */
    .hero {
        flex-direction: column;
        padding: 100px 6% 60px;
        min-height: auto;
        text-align: center;
        gap: 32px;
    }
    .hero-visual { display: block; width: 220px; order: -1; position: relative; top: auto; right: auto; bottom: auto; height: 220px; }
    .hero-content { max-width: 100%; padding: 0 5%; }
    .hero-content h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
    .hero-sub { max-width: 100%; }
    .hero-ctas { flex-direction: column; align-items: center; gap: 12px; justify-content: center; }
    .hero-ctas .btn { width: 100%; max-width: 320px; justify-content: center; text-align: center; }
    .hero-trust { flex-direction: column; gap: 16px; align-items: center; justify-content: center; }
    .hero-tag { justify-content: center; }
    .hero-scroll { display: none; }

    /* Urgency banner → colonne */
    .urgency-banner {
        flex-direction: column;
        text-align: center;
        padding: 18px 6%;
        gap: 12px;
    }
    .urgency-banner .btn { width: 100%; max-width: 280px; text-align: center; }

    /* Grilles → 1 colonne */
    .examples-grid { grid-template-columns: 1fr; gap: 16px; }
    .products-grid { grid-template-columns: 1fr; gap: 24px; }
    .advantages-grid { grid-template-columns: 1fr; gap: 24px; }
    .advantage-item { display: flex; flex-direction: column; align-items: center; text-align: center; }

    /* Testimonials → colonne */
    .testimonials-track { grid-template-columns: 1fr; }
    .testimonial-card { width: 100%; min-width: unset; max-width: 480px; }

    /* Cross-sell → colonne */
    .crosssell-grid { grid-template-columns: 1fr; gap: 16px; }
    .crosssell-grid > div { flex-direction: column; text-align: center; align-items: center; padding: 28px 20px; }

    /* Sections */
    .section-header h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .examples, .products, .advantages, .testimonials { padding-left: 6%; padding-right: 6%; }

    /* Configurator */
    .configurator-form { padding: 40px 20px; }
    .configurator-preview { padding: 40px 20px; }

    /* Orders */
    .order-table thead { display: none; }
    .order-table, .order-table tbody, .order-table tr, .order-table td { display: block; width: 100%; }
    .order-table tr { margin-bottom: 16px; border-bottom: 2px solid var(--gray-200); }
    .order-table td { display: flex; justify-content: space-between; padding: 10px; font-size: 0.85rem; }
    .order-table td::before { content: attr(data-label); font-weight: 500; color: var(--gray-600); }
}

/* Petit mobile */
@media (max-width: 640px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .hero-ctas { flex-direction: column; }
    .size-options { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .cart-sidebar { width: 100vw; }
    .cart-head, .cart-items, .cart-foot { padding-left: 16px; padding-right: 16px; }
}

/* Très petit mobile */
@media (max-width: 420px) {
    .hero { padding: 90px 5% 48px; }
    .hero-visual { width: 180px; height: 180px; }
    .hero-content h1 { font-size: 1.75rem; }
}


/* ── Configurateur : layout 2 colonnes → 1 colonne ── */
@media (max-width: 900px) {
    .configurator-wrapper {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .configurator-preview {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 32px 6% 20px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #previewCanvas {
        width: 100% !important;
        height: 100% !important;
    }
    .configurator-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 6% 60px !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* ── Checkout modal : layout 2 colonnes → 1 colonne ── */
@media (max-width: 860px) {
    .checkout-modal {
        flex-direction: column !important;
        max-width: 600px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        margin: auto !important;
        width: 100% !important;
    }
    .checkout-left,
    .checkout-right {
        width: 100% !important;
        max-width: 100% !important;
        padding: 28px 24px !important;
    }
    .checkout-right {
        border-left: none !important;
        border-top: 1px solid rgba(0,0,0,0.08) !important;
        padding-top: 24px !important;
    }
    .checkout-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }
}

/* ── Cart et Avis sur mobile ── */
@media (max-width: 600px) {
    .cart-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .cart-overlay {
        padding: 0 !important;
    }
    .stripe-mock {
        padding: 0 !important;
    }
    .stripe-badge {
        font-size: 0.72rem !important;
        gap: 6px !important;
        padding: 10px 12px !important;
    }
    #stripe-submit-btn {
        font-size: 0.82rem !important;
        padding: 16px 12px !important;
    }
    .avis-section {
        padding: 60px 6% !important;
    }
    .avis-form-inner {
        padding: 24px 18px !important;
    }
    .avis-summary {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ── Petit mobile : checkout & form ── */
@media (max-width: 480px) {
    .checkout-modal {
        max-height: 95vh !important;
        border-radius: 0 !important;
    }
    .checkout-left,
    .checkout-right {
        padding: 20px 16px !important;
    }
    .checkout-title {
        font-size: 1.4rem !important;
    }
    .step-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .step-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 0.72rem !important;
    }
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .checkout-order-item {
        font-size: 0.82rem !important;
    }
    .checkout-order-sum {
        font-size: 0.85rem !important;
    }
    .success-box {
        padding: 40px 24px !important;
        width: 92vw !important;
        max-width: 100% !important;
        text-align: center;
    }
    .success-box h2 {
        font-size: 1.7rem !important;
    }
}

/* ── Avis testimonials mobile ── */
@media (max-width: 600px) {
    .testimonials-track {
        flex-direction: column !important;
        align-items: center !important;
    }
    .testimonial-card {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }
}


/* ════════════════════════════════════════════════════════════
   BASE RESPONSIVE OVERRIDES — Merged from base.html.twig
   ════════════════════════════════════════════════════════════ */

/* ── Navigation & Mobile Menu @ 900px ── */
@media (max-width: 900px) {
    #mainNav {
        padding: 0 5%;
    }
    .nav-links {
        display: none !important;
    }
    .nav-right .btn-gold,
    .nav-right > div,
    .nav-right > a.btn-outline {
        display: none !important;
    }
    .nav-cart {
        display: flex !important;
    }
    .hamburger {
        display: flex !important;
    }
    .mobile-menu.open {
        display: flex !important;
    }
}

/* ── Hero Responsive @ 768px ── */
@media (max-width: 768px) {
    .hero {
        flex-direction: column !important;
        min-height: auto !important;
        padding: 100px 6% 60px !important;
        text-align: center;
    }
    .hero-visual {
        order: -1;
        width: 100% !important;
        max-width: 280px;
        margin: 0 auto 32px !important;
    }
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }
    .hero-ctas {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .hero-ctas .btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    .hero-trust {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 12px !important;
    }
    .hero-tag {
        justify-content: center;
    }
    .hero-scroll {
        display: none !important;
    }
}

/* ── Urgency Banner @ 768px ── */
@media (max-width: 768px) {
    .urgency-banner {
        flex-direction: column !important;
        text-align: center;
        gap: 12px !important;
        padding: 16px 6% !important;
    }
    .urgency-banner p {
        font-size: 0.8rem !important;
    }
}

/* ── Examples Grid @ 900px & 480px ── */
@media (max-width: 900px) {
    .examples-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}
@media (max-width: 480px) {
    .examples-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Products Grid @ 900px ── */
@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .product-card.featured {
        order: -1;
    }
}

/* ── Advantages Grid @ 768px & 480px ── */
@media (max-width: 768px) {
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}
@media (max-width: 480px) {
    .advantages-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Testimonials @ 768px ── */
@media (max-width: 768px) {
    .testimonials-track {
        flex-direction: column !important;
        align-items: center !important;
    }
    .testimonial-card {
        width: 100% !important;
        max-width: 480px !important;
        min-width: unset !important;
    }
}

/* ── Cross-sell Banner @ 768px ── */
@media (max-width: 768px) {
    .crosssell-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ── Footer @ 900px & 480px ── */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 24px !important;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
    .footer-brand {
        grid-column: auto;
    }
    .footer-bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center;
    }
    .footer-bottom > div {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ── Section Headers @ 768px ── */
@media (max-width: 768px) {
    .section-header h2 {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }
}

/* ── General Section Padding @ 768px ── */
@media (max-width: 768px) {
    .examples, .products, .advantages, .testimonials {
        padding-left: 6% !important;
        padding-right: 6% !important;
    }
}


/* ════════════════════════════════════════════════════════════
   ACCOUNT & USER PAGES STYLES
   ════════════════════════════════════════════════════════════ */

/* ── Modale édition compte ── */
.modal-account-edit {
    max-width: 540px;
    border: 1px solid var(--glass-border);
}
.modal-section-label {
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold); margin: 0 0 18px;
}
.modal-separator {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0 20px;
    font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--gray-400);
}
.modal-separator::before,
.modal-separator::after {
    content: ''; flex: 1;
    height: 1px; background: rgba(255,255,255,0.08);
}
.modal-row-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0;
}
@media (max-width: 480px) { .modal-row-2 { grid-template-columns: 1fr; } }
.modal-input {
    width: 100%; padding: 12px 14px; box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white); font-family: 'Jost', sans-serif;
    font-size: 0.88rem; outline: none; transition: border-color 0.2s;
}
.modal-input:focus { border-color: var(--gold); }
.modal-input::placeholder { color: var(--gray-600); }
.modal-input-hint {
    display: block; font-size: 0.7rem;
    color: var(--gray-600); margin-top: 5px;
}
.modal-pwd-wrap {
    position: relative; display: flex; align-items: center;
}
.modal-pwd-wrap .modal-input { padding-right: 40px; }
.modal-pwd-eye {
    position: absolute; right: 10px;
    background: none; border: none; cursor: pointer;
    font-size: 0.9rem; opacity: 0.4;
    transition: opacity 0.2s; padding: 0; line-height: 1;
}
.modal-pwd-eye:hover { opacity: 0.8; }
/* ── Mise en page ── */
/* ── Mise en page ── */
.account-section {
    min-height: 100vh;
    background: var(--black);
    padding: 120px 7% 80px;
}
.account-inner { max-width: 1000px; margin: 0 auto; }

/* ── Flash ── */
.flash { padding: 12px 16px; margin-bottom: 20px; font-size: 0.85rem; }
.flash-error   { background:#2b0f0f; color:#ffb3b3; border:1px solid rgba(255,100,100,0.2); }
.flash-success { background:#0f2b1a; color:#a3e4c1; border:1px solid rgba(100,200,140,0.2); }

/* ── Header ── */
.account-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 48px; flex-wrap: wrap; gap: 16px;
}
.account-title { color: var(--white); margin-top: 8px; }
.account-since { color: var(--gray-400); font-size: 0.85rem; margin-top: 4px; }
.account-back-btn { padding: 10px 22px; font-size: 0.75rem; }

/* ── Grid ── */
.account-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .account-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.account-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    padding: 32px;
}
.account-card-avis { margin-top: 32px; }
.account-card-title {
    color: var(--white); font-size: 1.1rem;
    margin-bottom: 24px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 10px;
}
.account-card-count {
    color: var(--gold);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem; line-height: 1;
}

/* ── Info list ── */
.info-list { display: flex; flex-direction: column; gap: 16px; }
.info-label {
    color: var(--gray-400); font-size: 0.72rem;
    letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 4px;
}
.info-value { color: var(--white); font-size: 0.9rem; }

/* ── Danger zone ── */
.danger-zone { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,80,80,0.15); }
.danger-zone-text { color: var(--gray-400); font-size: 0.78rem; line-height: 1.5; margin-bottom: 16px; }
.btn-danger {
    width: 100%; background: transparent;
    border: 1px solid rgba(255,80,80,0.4); color: #ff8080;
    font-family: 'Jost', sans-serif; font-size: 0.75rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 10px 18px; cursor: pointer; transition: all 0.3s;
}
.btn-danger:hover { background: rgba(255,80,80,0.1); }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--gray-400); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 16px; }
.empty-state p { font-size: 0.9rem; }

/* ── Commandes ── */
.commandes-list { display: flex; flex-direction: column; gap: 16px; }
.commande-row {
    border: 1px solid rgba(255,255,255,0.08);
    padding: 20px; transition: border-color 0.3s;
}
.commande-row:hover { border-color: rgba(201,168,76,0.3); }
.commande-row-head {
    display: flex; justify-content: space-between;
    align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.commande-link {
    color: var(--white); font-size: 0.88rem; font-weight: 500;
    text-decoration: none; transition: color 0.2s;
}
.commande-link:hover { color: var(--gold); }
.commande-date { color: var(--gray-400); font-size: 0.78rem; margin-top: 2px; }
.commande-row-right { display: flex; align-items: center; gap: 12px; }
.commande-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem; color: var(--gold);
}

/* ── Badges statut ── */
.badge-statut {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 12px; display: flex; flex-direction: column; gap: 8px;
}
.commande-line {
    display: flex; justify-content: space-between;
    align-items: center; font-size: 0.82rem;
}
.commande-line-desc {
    color: var(--gray-400); display: flex;
    align-items: center; gap: 6px; flex-wrap: wrap;
}
.commande-line-qty   { color: var(--white); font-weight: 500; }
.commande-line-price { color: var(--white); white-space: nowrap; }
.commande-line-color { color: var(--gray-600); font-size: 0.75rem; }
.commande-line-badge {
    font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 7px;
    background: rgba(201,168,76,0.12); color: var(--gold);
    border: 1px solid rgba(201,168,76,0.25);
}
.commande-line-badge.nfc {
    background: rgba(100,180,255,0.1); color: #7ecfff;
    border-color: rgba(100,180,255,0.25);
}
.commande-address {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem; color: var(--gray-400);
}

/* ── Tableau avis ── */
.avis-table-wrap { overflow-x: auto; }
.avis-table { width: 100%; border-collapse: collapse; }
.avis-table thead { background: rgba(255,255,255,0.04); }
.avis-table th {
    color: var(--gray-400); font-size: 0.7rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: 12px 16px; text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-weight: 500;
}
.avis-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--white); vertical-align: middle;
}
.avis-table tr:last-child td { border-bottom: none; }
.avis-table tr:hover td      { background: rgba(255,255,255,0.02); }
.avis-stars     { display: flex; gap: 3px; }
.star-filled    { color: var(--gold); font-size: 1rem; }
.star-empty     { color: rgba(255,255,255,0.15); font-size: 1rem; }
.avis-content   { color: var(--gray-400); font-style: italic; font-size: 0.85rem; }
.avis-date      { color: var(--gray-400); font-size: 0.78rem; white-space: nowrap; }
.avis-edit-link {
    color: var(--gold); text-decoration: none;
    font-size: 0.75rem; letter-spacing: 0.08em;
    text-transform: uppercase; transition: opacity 0.2s;
}
.avis-edit-link:hover { opacity: 0.75; }

/* ══════════════════════════════
   RESPONSIVE — MOBILE FIRST
══════════════════════════════ */

/* ── Section padding ── */
@media (max-width: 768px) {
    .account-section { padding: 90px 5% 60px; }
}
@media (max-width: 480px) {
    .account-section { padding: 80px 4% 48px; }
    .account-card { padding: 20px 16px; }
}

/* ── Header ── */
@media (max-width: 600px) {
    .account-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 28px;
    }
    .account-back-btn { width: 100%; text-align: center; }
    .account-title { font-size: 1.6rem; }
}

/* ── Commande row : badge + prix sur petit écran ── */
@media (max-width: 480px) {
    .commande-row-head { flex-direction: column; gap: 10px; }
    .commande-row-right { flex-wrap: wrap; gap: 8px; }
    .commande-line { flex-direction: column; align-items: flex-start; gap: 4px; }
    .commande-line-price { align-self: flex-end; }
}

/* ── Tableau avis → cards sur mobile ── */
@media (max-width: 680px) {
    .avis-table thead { display: none; }
    .avis-table,
    .avis-table tbody,
    .avis-table tr,
    .avis-table td { display: block; width: 100%; }
    .avis-table tr {
        border: 1px solid rgba(255,255,255,0.08);
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .avis-table tr:hover td { background: transparent; }
    .avis-table td { padding: 4px 0; border-bottom: none; }
    .avis-table td:nth-child(1)::before {
        content: 'Produit : ';
        color: var(--gray-400); font-size: 0.7rem;
        letter-spacing: 0.1em; text-transform: uppercase;
        display: block; margin-bottom: 2px;
    }
    .avis-table td:nth-child(2) { margin: 8px 0 4px; }
    .avis-table td:nth-child(3) { color: var(--gray-400); font-size: 0.85rem; font-style: italic; }
    .avis-table td:nth-child(4) { font-size: 0.75rem; color: var(--gray-400); margin-top: 4px; }
    .avis-actions-cell {
        text-align: left !important;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
    }
    .avis-btn { margin-left: 0; margin-right: 8px; }
}

/* ── Modales ── */
@media (max-width: 600px) {
    .modal-box { padding: 24px 20px; max-width: 100% !important; }
    .modal-overlay { padding: 12px; align-items: flex-end; }
    .modal-account-edit { max-height: 90vh; overflow-y: auto; }
    .modal-actions { flex-direction: column; gap: 10px; }
    .btn-modal-cancel,
    .btn-modal-save,
    .btn-modal-delete { width: 100%; }
}

/* ── Actions dans le tableau avis ── */
.avis-actions-cell { text-align: right; white-space: nowrap; }
.avis-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Jost', sans-serif; font-size: 0.72rem;
    font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 6px 12px; border: 1px solid; cursor: pointer;
    background: transparent; transition: all 0.25s; margin-left: 6px;
}
.avis-btn-edit {
    color: var(--gold); border-color: rgba(201,168,76,0.35);
}
.avis-btn-edit:hover { background: rgba(201,168,76,0.1); border-color: var(--gold); }
.avis-btn-delete {
    color: #ff8080; border-color: rgba(255,80,80,0.3);
}
.avis-btn-delete:hover { background: rgba(255,80,80,0.1); border-color: rgba(255,80,80,0.6); }

/* ── Modal édition avis ── */
.modal-edit { border: 1px solid var(--glass-border); }
.modal-edit-header {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 28px;
}
.modal-close {
    background: none; border: none; color: var(--gray-400);
    font-size: 1.1rem; cursor: pointer; transition: color 0.2s; padding: 4px;
}
.modal-close:hover { color: var(--white); }
.modal-field { margin-bottom: 24px; }
.modal-label {
    display: block; font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gray-400); margin-bottom: 12px;
}
.modal-textarea {
    width: 100%; padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white); font-family: 'Jost', sans-serif;
    font-size: 0.9rem; resize: vertical; outline: none;
    transition: border-color 0.3s; line-height: 1.6; min-height: 100px;
}
.modal-textarea:focus { border-color: var(--gold); }
.modal-charcount {
    display: block; text-align: right;
    font-size: 0.72rem; color: var(--gray-400); margin-top: 6px;
}
.modal-feedback {
    font-size: 0.82rem; margin-bottom: 16px; padding: 10px 14px;
    border: 1px solid;
}
.btn-modal-save {
    flex: 1; background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: none; color: var(--white);
    font-family: 'Jost', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 12px; cursor: pointer; transition: all 0.3s;
}
.btn-modal-save:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-modal-save:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Sélecteur étoiles dans la modal ── */
.star-edit-picker { display: flex; gap: 6px; }
.star-edit-btn {
    background: none; border: none;
    font-size: 1.8rem; color: rgba(255,255,255,0.15);
    cursor: pointer; transition: color 0.15s, transform 0.15s; padding: 0; line-height: 1;
}
.star-edit-btn:hover, .star-edit-btn.active { color: var(--gold); transform: scale(1.15); }

/* ── Aperçu avis dans la modal delete ── */
.modal-avis-preview {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 16px 18px; margin-bottom: 24px;
}
.modal-avis-preview-text {
    color: var(--gray-400); font-size: 0.85rem;
    font-style: italic; margin-top: 8px; line-height: 1.5;
}

/* ── Modal ── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    z-index: 5000; align-items: center; justify-content: center; padding: 20px;
}
.modal-box { background: #0f0f0f; padding: 40px; max-width: 440px; width: 100%; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
.modal-danger { border: 1px solid rgba(255,80,80,0.3); }
.modal-title  { color: var(--white); font-size: 1.3rem; margin-bottom: 12px; }
.modal-text   { color: var(--gray-400); font-size: 0.88rem; line-height: 1.6; margin-bottom: 32px; }
.modal-actions { display: flex; gap: 12px; }
.btn-modal-cancel {
    flex: 1; background: transparent;
    border: 1px solid rgba(255,255,255,0.15); color: var(--gray-400);
    font-family: 'Jost', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 12px; cursor: pointer; transition: all 0.3s;
}
.btn-modal-cancel:hover { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-modal-delete {
    width: 100%; background: rgba(255,80,80,0.15);
    border: 1px solid rgba(255,80,80,0.5); color: #ff8080;
    font-family: 'Jost', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 12px; cursor: pointer; transition: all 0.3s;
}
.btn-modal-delete:hover { background: rgba(255,80,80,0.3); }

/* ════════════════════════════════════════════════════════════
   ADMIN PAGES STYLES (Orders & Quotes)
   ════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.admin-section { min-height: 100vh; background: var(--black); padding: 120px 7% 80px; }
.admin-inner   { max-width: 1100px; margin: 0 auto; }

/* ── Header ── */
.admin-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 20px; margin-bottom: 40px;
}
.admin-page-title { color: var(--white); margin-top: 8px; }
.admin-back-btn   { padding: 10px 22px; font-size: 0.75rem; margin-top: 8px; }

/* ── Badges ── */
.badge { padding: 4px 10px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.badge-paid      { background: rgba(29,158,117,0.12); color: #5dcaa5;     border-color: rgba(29,158,117,0.3); }
.badge-shipped   { background: rgba(201,168,76,0.12); color: var(--gold); border-color: rgba(201,168,76,0.3); }
.badge-delivered { background: rgba(93,202,165,0.1);  color: #9fe1cb;     border-color: rgba(93,202,165,0.2); }
.badge-pending   { background: rgba(255,200,60,0.1);  color: #ffc83c;     border-color: rgba(255,200,60,0.25); }
.badge-cancelled { background: rgba(255,80,80,0.1);   color: #ff8080;     border-color: rgba(255,80,80,0.2); }
.badge-default   { background: rgba(255,255,255,0.05); color: var(--gray-400); border-color: rgba(255,255,255,0.1); }

/* ── Grille infos ── */
.order-info-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; margin-bottom: 40px;
}
@media (max-width: 768px) { .order-info-grid { grid-template-columns: 1fr; } }

.order-info-card {
    background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
    padding: 24px 28px;
}
.order-info-card-total {
    border-color: rgba(201,168,76,0.2); background: rgba(201,168,76,0.03);
}
.order-info-label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px;
}
.order-info-value { color: var(--white); font-size: 0.88rem; line-height: 1.7; }
.order-info-sub   { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.order-total-amount {
    font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; color: var(--gold); line-height: 1;
}

/* ── Titre section ── */
.section-title {
    color: var(--white); font-size: 0.88rem; font-family: 'Jost', sans-serif;
    font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Carte ligne commande ── */
.ligne-detail-card {
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.02);
    margin-bottom: 24px; overflow: hidden;
}

.ligne-detail-head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    padding: 18px 28px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ligne-detail-num {
    font-size: 0.68rem; color: var(--gray-400); letter-spacing: 0.15em;
    text-transform: uppercase; margin-right: 10px;
}
.ligne-detail-produit {
    color: var(--white); font-size: 0.95rem; font-weight: 500; margin-right: 8px;
}
.ligne-detail-type {
    font-size: 0.72rem; color: var(--gray-400);
}
.ligne-detail-head-right { display: flex; align-items: center; gap: 14px; }
.ligne-detail-qty        { color: var(--gold); font-size: 1rem; }
.ligne-detail-price-val  {
    font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--gold);
}

.ligne-detail-body {
    display: grid; grid-template-columns: 280px 1fr;
    gap: 0;
}
@media (max-width: 860px) { .ligne-detail-body { grid-template-columns: 1fr; } }

/* ── Images ── */
.ligne-detail-images {
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 24px 24px;
    display: flex; flex-direction: column; gap: 24px;
    background: rgba(0,0,0,0.15);
}
.ligne-img-block { display: flex; flex-direction: column; }
.ligne-img-label {
    font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--gray-400); margin-bottom: 10px;
}
.ligne-img-wrap {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    padding: 12px; min-height: 120px;
}
.ligne-img {
    max-width: 100%; max-height: 180px; object-fit: contain;
}
.ligne-no-img {
    color: var(--gray-400); font-size: 0.82rem; font-style: italic;
    padding: 20px 0;
}

/* ── Specs ── */
.ligne-detail-specs { padding: 24px 28px; }

.spec-group { margin-bottom: 24px; }
.spec-group-title {
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
}
.spec-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
}
.spec-item {
    display: flex; flex-direction: column; gap: 4px;
}
.spec-item-full { grid-column: 1 / -1; }
.spec-label {
    font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--gray-400);
}
.spec-val {
    color: var(--white); font-size: 0.85rem;
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.spec-text-preview {
    font-size: 1.1rem !important; line-height: 1.4;
    padding: 8px 0; letter-spacing: 0.02em;
}
.spec-nfc-url {
    display: block; font-size: 0.72rem; color: var(--gray-400);
    word-break: break-all; margin-top: 4px;
}

/* ── Couleurs ── */
.color-dot {
    width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0; display: inline-block;
}
.color-swatch {
    width: 16px; height: 16px; border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.15); display: inline-block; flex-shrink: 0;
}
.color-dark  { background: #111; }
.color-light { background: #f0ede8; }
.color-red  { background: red; }
.color-gray { background: gray; }

/* ── Badges produit ── */
.commande-line-badge {
    font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 7px; display: inline-block;
    background: rgba(201,168,76,0.12); color: var(--gold);
    border: 1px solid rgba(201,168,76,0.25);
}
.commande-line-badge.nfc {
    background: rgba(100,180,255,0.08); color: #7ecfff;
    border-color: rgba(100,180,255,0.2);
}

/* ── Boutons ── */
.admin-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 9px 18px; border: 1px solid; cursor: pointer;
    background: transparent; text-decoration: none; transition: all 0.25s;
}
.admin-btn-ship {
    color: var(--gold); border-color: rgba(201,168,76,0.4);
}
.admin-btn-ship:hover { background: rgba(201,168,76,0.1); border-color: var(--gold); }
.admin-btn-dl {
    color: gray; border-color: rgba(255,255,255,0.15);
    font-size: 0.68rem; padding: 7px 14px;
}
.admin-btn-dl:hover { color: var(--white); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }

/* ── Empty ── */
.admin-empty {
    padding: 40px 32px; text-align: center;
    color: var(--gray-400); font-size: 0.88rem;
}
.admin-empty-icon { display: block; font-size: 2.2rem; margin-bottom: 12px; }

/* ── Actions footer ── */
.order-detail-actions { display: flex; gap: 14px; flex-wrap: wrap; }


/* ════════════════════════════════════════════════════════════
   DASHBOARD & LIST PAGES STYLES
   ════════════════════════════════════════════════════════════ */
.upload-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.upload-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid var(--gray-200, #e0ddd6);
    border-radius: 4px;
    display: block;
}
.upload-thumb-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(229,57,53,0.9);
    color: #fff;
    border: none;
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    font-weight: 700;
    z-index: 2;
}
.upload-thumb-del:hover { background: #b71c1c; }

/* ── Mise en page ── */
.account-section {
    min-height: 100vh;
    background: var(--black);
    padding: 120px 7% 80px;
}
.account-inner { max-width: 1200px; margin: 0 auto; }

/* ── Flash ── */
.flash { padding: 12px 16px; margin-bottom: 20px; font-size: 0.85rem; }
.flash-error   { background:#2b0f0f; color:#ffb3b3; border:1px solid rgba(255,100,100,0.2); }
.flash-success { background:#0f2b1a; color:#a3e4c1; border:1px solid rgba(100,200,140,0.2); }

/* ── Header ── */
.account-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 48px; flex-wrap: wrap; gap: 16px;
}
.account-title { color: var(--white); margin-top: 8px; }
.account-since { color: var(--gray-400); font-size: 0.85rem; margin-top: 4px; }
.account-back-btn { padding: 10px 22px; font-size: 0.75rem; }

/* ── Card ── */
.account-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    padding: 32px;
}
.account-card-avis { margin-top: 32px; }
.account-card-title {
    color: var(--white); font-size: 1.1rem;
    margin-bottom: 24px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.account-card-count {
    color: var(--gold);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem; line-height: 1;
}
.add-btn { margin-left: auto; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--gray-400); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 16px; }
.empty-state p { font-size: 0.9rem; }

/* ── Tableau ── */
.avis-table-wrap { overflow-x: auto; }
.avis-table { width: 100%; border-collapse: collapse; }
.avis-table thead { background: var(--black); }
.avis-table th {
    color: var(--gray-400); font-size: 0.7rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: 12px 14px; text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-weight: 500; white-space: nowrap;
}
.avis-table td {
    padding: 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--white); vertical-align: middle;
    font-size: 0.85rem;
}
.avis-table tr:last-child td { border-bottom: none; }
.avis-table tbody tr:hover td { background: rgba(255,255,255,0.025); }

/* ── Cellules spéciales ── */
.cell-name  { font-weight: 500; color: var(--white); }
.cell-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem; color: var(--gold); white-space: nowrap;
}
.cell-meta  { color: var(--gray-400); font-size: 0.82rem; text-transform: capitalize; }
.cell-center { text-align: center; }
.cell-sub {
    display: inline-block;
    font-size: 0.7rem; color: var(--gray-400);
    background: rgba(255,255,255,0.06);
    padding: 1px 6px; margin-left: 4px;
}
.avis-content { color: var(--gray-400); font-style: italic; }
.avis-date    { color: var(--gray-400); font-size: 0.78rem; white-space: nowrap; }
.avis-stars   { display: flex; gap: 3px; }
.star-filled  { color: var(--gold); font-size: 0.95rem; }
.star-empty   { color: rgba(255,255,255,0.12); font-size: 0.95rem; }

/* ── Badge gravure oui/non ── */
.badge-bool {
    font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 8px; border: 1px solid;
}
/* ── Input couleur sous chaque thumbnail ── */
.upload-thumb-wrap {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 6px; position: relative;
}
.upload-thumb-color {
    width: 100%; max-width: 110px;
    padding: 5px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--white); font-family: 'Jost', sans-serif;
    font-size: 0.72rem; outline: none;
    transition: border-color 0.25s;
    text-align: center;
    box-sizing: border-box;
}
.upload-thumb-color::placeholder { color: var(--gray-400); }
.upload-thumb-color:focus { border-color: var(--gold); }

.badge-bool-yes {
    background: rgba(29,158,117,0.12); color: #5DCAA5;
    border-color: rgba(29,158,117,0.25);
}
.badge-bool-no {
    background: rgba(255,255,255,0.05); color: var(--gray-400);
    border-color: rgba(255,255,255,0.1);
}

/* ── Boutons d'action ── */
.avis-actions-cell { text-align: right; white-space: nowrap; }
.avis-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Jost', sans-serif; font-size: 0.7rem;
    font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 6px 12px; border: 1px solid; cursor: pointer;
    background: transparent; transition: all 0.25s; margin-left: 6px;
}
.avis-btn-edit  { color: var(--gold); border-color: rgba(201,168,76,0.35); }
.avis-btn-edit:hover { background: rgba(201,168,76,0.1); border-color: var(--gold); }
.avis-btn-delete { color: #ff8080; border-color: rgba(255,80,80,0.3); }
.avis-btn-delete:hover { background: rgba(255,80,80,0.1); border-color: rgba(255,80,80,0.6); }

/* ── Modal overlay ── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.88);
    z-index: 5000; align-items: center; justify-content: center;
    padding: 20px; overflow-y: auto;
}
.modal-box {
    background: #0f0f0f; padding: 40px;
    max-width: 440px; width: 100%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    margin: auto;
}
.modal-wide { max-width: 680px; }
.modal-danger { border: 1px solid rgba(255,80,80,0.3); }
.modal-edit   { border: 1px solid var(--glass-border); }

/* ── Contenu modal ── */
.modal-edit-header {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 28px;
}
.modal-close {
    background: none; border: none; color: var(--gray-400);
    font-size: 1.1rem; cursor: pointer; transition: color 0.2s; padding: 4px;
}
.modal-close:hover { color: var(--white); }
.modal-title { color: var(--white); font-size: 1.3rem; margin: 0; }
.modal-text  { color: var(--gray-400); font-size: 0.88rem; line-height: 1.6; margin-bottom: 24px; }

/* ── Grille 2 colonnes dans modal ── */
.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .modal-grid-2 { grid-template-columns: 1fr; } }

/* ── Champs modal ── */
.modal-field { margin-bottom: 20px; }
.modal-label {
    display: block; font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gray-400); margin-bottom: 10px;
}
.modal-input {
    width: 100%; padding: 11px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white); font-family: 'Jost', sans-serif;
    font-size: 0.9rem; outline: none; transition: border-color 0.3s;
    box-sizing: border-box;
}
.modal-input:focus { border-color: var(--gold); }
.modal-textarea {
    width: 100%; padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white); font-family: 'Jost', sans-serif;
    font-size: 0.9rem; resize: vertical; outline: none;
    transition: border-color 0.3s; line-height: 1.6; min-height: 90px;
    box-sizing: border-box;
}
.modal-textarea:focus { border-color: var(--gold); }
.modal-charcount {
    display: block; text-align: right;
    font-size: 0.72rem; color: var(--gray-400); margin-top: 6px;
}

/* ── Radios et checkbox ── */
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-opt {
    display: flex; align-items: center; gap: 10px;
    color: var(--gray-400); font-size: 0.85rem; cursor: pointer;
    transition: color 0.2s;
}
.radio-opt:hover { color: var(--white); }
.radio-opt input[type="radio"] {
    accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer;
}
.checkbox-opt-wrap { display: flex; align-items: flex-start; }
.checkbox-opt-label {
    display: flex; align-items: center; gap: 10px;
    color: var(--gray-400); font-size: 0.85rem; cursor: pointer;
    transition: color 0.2s;
}
.checkbox-opt-label:hover { color: var(--white); }
.modal-checkbox {
    accent-color: var(--gold); width: 16px; height: 16px;
    cursor: pointer; flex-shrink: 0; margin-top: 1px;
}

/* ── Feedback ── */
.modal-feedback {
    font-size: 0.82rem; margin-bottom: 16px;
    padding: 10px 14px; border: 1px solid;
}

/* ── Aperçu avis dans modal delete ── */
.modal-avis-preview {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 16px 18px; margin-bottom: 24px;
}
.modal-avis-preview-text {
    color: var(--gray-400); font-size: 0.85rem;
    font-style: italic; margin-top: 8px; line-height: 1.5;
}

/* ── Actions modal ── */
.modal-actions { display: flex; gap: 12px; margin-top: 8px; }
.btn-modal-cancel {
    flex: 1; background: transparent;
    border: 1px solid rgba(255,255,255,0.15); color: var(--gray-400);
    font-family: 'Jost', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 12px; cursor: pointer; transition: all 0.3s;
}
.btn-modal-cancel:hover { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-modal-save {
    flex: 1; background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: none; color: var(--white);
    font-family: 'Jost', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 12px; cursor: pointer; transition: all 0.3s;
}
.btn-modal-save:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-modal-save:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-modal-delete {
    flex: 1; background: rgba(255,80,80,0.15);
    border: 1px solid rgba(255,80,80,0.5); color: #ff8080;
    font-family: 'Jost', sans-serif; font-size: 0.78rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 12px; cursor: pointer; transition: all 0.3s;
}
.btn-modal-delete:hover { background: rgba(255,80,80,0.3); }
.btn-modal-delete:disabled { opacity: 0.5; cursor: not-allowed; }


.color-opt-text {
    width:26px; height:26px; border-radius:50%; cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
    border:2px solid transparent; box-sizing:border-box;
}
.color-opt-text:hover { transform:scale(1.18); }
.color-opt-text.active { box-shadow:0 0 0 3px var(--gold); transform:scale(1.18); }

/* ════════════════════════════════════════════════════════════
   ADMIN LIST PAGES (Commandes & Devis Lists)
   ════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.admin-block { border: 1px solid rgba(255,255,255,0.06); margin-bottom: 28px; }
.admin-block-sent { border-color: rgba(201,168,76,0.15); }

.admin-block-head {
    padding: 28px 32px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.admin-block-title-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.admin-block-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dot-paid    { background: #5dcaa5; box-shadow: 0 0 8px rgba(93,202,165,0.5); }
.dot-shipped { background: var(--gold); box-shadow: 0 0 8px rgba(201,168,76,0.4); }
.admin-block-title {
    color: var(--white); font-size: 1rem; font-weight: 500;
    font-family: 'Jost', sans-serif; letter-spacing: 0.04em; margin: 0;
}
.admin-count-badge {
    background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25);
    color: var(--gold); font-size: 0.72rem; padding: 2px 10px;
    font-family: 'Jost', sans-serif; letter-spacing: 0.1em;
}
.admin-block-sub { color: var(--gray-400); font-size: 0.8rem; margin: 0; }

/* ── Empty state ── */
.admin-empty {
    padding: 48px 32px; text-align: center;
    color: var(--gray-400); font-size: 0.88rem;
}
.admin-empty-icon { display: block; font-size: 2.2rem; margin-bottom: 12px; }

/* ── Liste commandes ── */
.admin-commandes-list { padding: 0; }
.admin-commande-row {
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
}
.admin-commande-row:last-child { border-bottom: none; }
.admin-commande-row:hover      { background: rgba(255,255,255,0.02); }
.admin-commande-row-sent       { opacity: 0.75; }
.admin-commande-row-sent:hover { opacity: 1; }

/* ── En-tête ligne ── */
.admin-commande-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.admin-commande-meta { display: flex; flex-direction: column; gap: 4px; }
.admin-commande-link {
    color: var(--white); text-decoration: none; font-size: 0.92rem;
    transition: color 0.2s;
}
.admin-commande-link:hover { color: var(--gold); }
.admin-commande-link strong { color: var(--gold); }
.admin-commande-client {
    font-size: 0.82rem; color: gray;
}
.admin-commande-email { color: var(--gray-400); }
.admin-commande-date  { font-size: 0.75rem; color: var(--gray-400); }

.admin-commande-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.admin-commande-price {
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold);
}

/* ── Badges ── */
.badge-paid      { background: rgba(29,158,117,0.12); color: #5dcaa5;     border-color: rgba(29,158,117,0.3); }
.badge-shipped   { background: rgba(201,168,76,0.12); color: var(--gold); border-color: rgba(201,168,76,0.3); }
.badge-pending   { background: rgba(255,200,60,0.1);  color: #ffc83c;     border-color: rgba(255,200,60,0.25); }
.badge-cancelled { background: rgba(255,80,80,0.1);   color: #ff8080;     border-color: rgba(255,80,80,0.2); }
.badge-default   { background: rgba(255,255,255,0.05); color: var(--gray-400); border-color: rgba(255,255,255,0.1); }

/* ── Lignes produits ── */
.admin-lignes {
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05);
    padding: 4px 0; margin-bottom: 12px;
}
.admin-ligne {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 16px; gap: 12px;
}
.admin-ligne + .admin-ligne { border-top: 1px solid rgba(255,255,255,0.04); }
.admin-ligne-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-ligne-qty   { color: var(--gold); font-size: 0.82rem; font-weight: 600; }
.admin-ligne-name  { color: var(--white); font-size: 0.85rem; }
.admin-ligne-color { color: var(--gray-400); font-size: 0.78rem; }
.admin-ligne-price { color: var(--gray-400); font-size: 0.82rem; white-space: nowrap; }

.commande-line-badge {
    font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 7px;
    background: rgba(201,168,76,0.12); color: var(--gold);
    border: 1px solid rgba(201,168,76,0.25);
}
.commande-line-badge.nfc {
    background: rgba(100,180,255,0.08); color: #7ecfff;
    border-color: rgba(100,180,255,0.2);
}

/* ── Adresse ── */
.admin-commande-address {
    font-size: 0.78rem; color: var(--gray-400);
    margin-bottom: 16px; padding-left: 2px;
}

/* ── Boutons action ── */
.admin-commande-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 9px 18px; border: 1px solid; cursor: pointer;
    background: transparent; text-decoration: none;
    transition: all 0.25s;
}
.admin-btn-view {
    color: gray; border-color: rgba(255,255,255,0.15);
}
.admin-btn-view:hover { color: var(--white); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
.admin-btn-ship {
    color: var(--gold); border-color: rgba(201,168,76,0.4);
}
.admin-btn-ship:hover { background: rgba(201,168,76,0.1); border-color: var(--gold); }

/* ─── ANIMATIONS ON SCROLL ─── */
/*.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }*/
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── LOADING ─── */
.page-loader {
    position: fixed; inset: 0; background: var(--black); z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.done { opacity: 0; visibility: hidden; }
.loader-logo { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--white); }
.loader-logo span { color: var(--gold); }
.loader-bar { width: 200px; height: 1px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.loader-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); width: 0%; transition: width 0.6s ease; }




/*chatgpt*/

/* ─── USER ORDER PAGE ─── */

.user-order {
    padding: 120px 7%;
    background: var(--cream);
}

/* CARD INFOS */
.order-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-gold);
}

.order-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.order-grid p {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--gray-600);
}

.order-price {
    text-align: right;
}

.order-price span {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-400);
}

.order-price strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    color: var(--gold);
}

/* TABLE */
.order-table-wrapper {
    background: var(--white);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
}

.order-table thead {
    background: var(--black);
}

.order-table th {
    color: var(--white);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 16px;
    text-align: left;
}

.order-table td {
    padding: 16px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem;
}

.order-table tr:hover {
    background: var(--gray-100);
}

/* ACTIONS */
.order-actions {
    margin-top: 30px;
}


.review {
    color: var(--black);
}

/* ─── AVIS SECTION (fond clair) — surcharge les styles testimonials ───  */
.avis-section .testimonial-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
}
.avis-section .testimonial-card:hover {
    border-color: rgba(201,168,76,0.4);
}
.avis-section .testimonial-text {
    color: var(--black);
}
.avis-section .testimonial-name {
    color: var(--black);
}
.avis-section .section-header p {
    color: var(--gray-600);
}



/* ── Sélecteur de forme d'image ── */
.shape-options { display:flex; gap:10px; flex-wrap:wrap; }
.shape-opt {
    flex:1 1 60px; min-width:64px; max-width:90px;
    border:1px solid var(--gray-200); background:none;
    padding:12px 8px 10px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    font-family:'Jost',sans-serif; font-size:0.72rem;
    color:var(--gray-600); letter-spacing:0.05em;
    transition:all 0.25s var(--transition);
}
.shape-opt svg { transition:color 0.25s; }
.shape-opt:hover { border-color:var(--gold-light); color:var(--black); }
.shape-opt.active {
    border-color:var(--gold); background:rgba(201,168,76,0.06);
    color:var(--gold);
}
/* ─── NFC MODAL & INFO ─── */



/* REMOVED DUPLICATE: .nfc-modal h2 */

/* REMOVED DUPLICATE: .nfc-modal ul */

/* REMOVED DUPLICATE: .nfc-modal li */


/* REMOVED DUPLICATE: .info-nfc:hover */

/* REMOVED DUPLICATE: .nfc-info-banner p */
/* REMOVED DUPLICATE: .nfc-type-btn:hover */

/* ─── CANVAS & CONTROLS ─── */

/* REMOVED DUPLICATE: .size-slider-wrap input[type="range"] */
/* REMOVED DUPLICATE: .size-slider-wrap input[type="number"] */
/* REMOVED DUPLICATE: .size-slider-wrap input[type="number"]:focus */
/* REMOVED DUPLICATE: .size-step-btn:hover */

/* ─── COLOR & TEXT OPTIONS ─── */
/* REMOVED DUPLICATE: .color-opt-text:hover */

/* ─── CAROUSEL ─── */
/* REMOVED DUPLICATE: .carousel-card:hover */
.carousel-card.active::after {
    content:'✓'; position:absolute; top:8px; right:8px;
    width:20px; height:20px; background:var(--gold); color:var(--white);
    border-radius:50%; font-size:0.65rem; display:flex;
    align-items:center; justify-content:center; line-height:20px;
}

/* ─── AVIS SECTION (EXTENDED) ─── */
.avis-score-stars .star { font-size:1.3rem; color:var(--gray-200); }
.avis-score-stars .star.filled { color:var(--gold); }
.star-pick-btn.active,.star-pick-btn:hover { color:var(--gold); transform:scale(1.15); }

/* ─── SIMPLE MODE ─── */
/* REMOVED DUPLICATE: .simple-mode-info p */

/* ─── STRIPE ELEMENTS ─── */
.stripe-elements-field.StripeElement--focus
/* REMOVED DUPLICATE: .stripe-elements-field:focus-within */
/* REMOVED DUPLICATE: #stripe-submit-btn:disabled */