/* =====================================================
   CourrierEnLigne.fr — Styles
   Charte La Poste : bleu Endeavour #0060AE + jaune Broom #FFE413
   ===================================================== */

:root {
    --bleu:           #0060AE;
    --bleu-dark:      #004A85;
    --bleu-light:     #E5F0F9;
    --bleu-pale:      #F4F9FD;
    --jaune:          #FFE413;
    --jaune-dark:     #E6CD00;
    --jaune-light:    #FFF8C4;
    --ink:            #1A1A1A;
    --ink-soft:       #4A4A4A;
    --text:           #2C2C2C;
    --muted:          #6B7280;
    --border:         #E5E7EB;
    --bg-soft:        #F8FAFC;
    --success:        #10A56A;
    --danger:         #DC2626;
    --warning:        #F59E0B;

    --radius:         6px;
    --radius-lg:      10px;
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:      0 4px 12px rgba(0,96,174,0.10);
    --shadow-lg:      0 20px 50px rgba(0,0,0,0.15);

    --font-sans:      'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:      'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: #fff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5rem; }

/* ===================== HEADER ===================== */
.cel-topbar {
    background: var(--bleu);
    color: #fff;
    font-size: 0.78rem;
}
.cel-topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 1280px;
    margin: 0 auto;
}
.cel-topbar a { color: #fff; }
.cel-topbar .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--jaune); margin-right: 0.4rem; vertical-align: middle; }

.cel-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.cel-header .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cel-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}
.cel-logo-mark {
    width: 38px;
    height: 38px;
    background: var(--bleu);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jaune);
}
.cel-logo-text { line-height: 1.1; }
.cel-logo-text strong { font-size: 1.15rem; font-weight: 800; color: var(--bleu); letter-spacing: -0.02em; display: block; }
.cel-logo-text strong span { color: var(--ink); }
.cel-logo-text small { font-size: 0.68rem; color: var(--muted); font-weight: 500; }

.cel-nav { display: flex; gap: 1.75rem; align-items: center; }
.cel-nav a {
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.45rem 0;
    border-bottom: 3px solid transparent;
    text-decoration: none;
}
.cel-nav a:hover { color: var(--bleu); }
.cel-nav a.active { color: var(--bleu); border-bottom-color: var(--jaune); }

.cel-actions { display: flex; align-items: center; gap: 0.5rem; }
.cel-btn-login {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.9rem;
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
.cel-btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bleu);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.55rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
}
.cel-btn-cart .badge {
    background: var(--jaune);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

@media (max-width: 768px) {
    .cel-nav { display: none; }
}

/* ====================================================================
   BREADCRUMB GLOBAL — sous la nav, fullwidth, contenu centré, NON sticky
   ==================================================================== */
.cel-breadcrumb {
    background: #F8FAFC;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    /* PAS de position sticky : la nav du dessus reste sticky, le breadcrumb scroll */
}
.cel-breadcrumb .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.65rem 1.5rem;
}
.cel-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.cel-breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-weight: 500;
}
.cel-breadcrumb li:not(:first-child)::before {
    content: "›";
    margin-right: 0.4rem;
    color: var(--muted);
    opacity: 0.6;
    font-size: 1rem;
    line-height: 1;
}
.cel-breadcrumb li a {
    color: var(--bleu);
    text-decoration: none;
    transition: color 0.15s ease;
}
.cel-breadcrumb li a:hover {
    color: var(--bleu-dark);
    text-decoration: underline;
}
.cel-breadcrumb li.current {
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 600px) {
    .cel-breadcrumb { font-size: 0.78rem; }
    .cel-breadcrumb .container { padding: 0.55rem 1rem; }
    .cel-breadcrumb li { font-size: 0.75rem; }
}

/* ====================================================================
   RESPONSIVE HEADER (mobile-first patch)
   ==================================================================== */

/* Burger toggle button (caché sur desktop, visible mobile) */
.cel-burger {
    display: none;
    background: none;
    border: 0;
    padding: 0.5rem;
    margin: 0;
    cursor: pointer;
    color: var(--ink);
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}
.cel-burger:hover { background: var(--bg-soft, #F3F4F6); }
.cel-burger svg { display: block; }

/* Drawer mobile */
.cel-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh; /* dynamic viewport — gère la barre safari mobile */
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.cel-mobile-drawer.open { transform: translateX(0); }

.cel-mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 60, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.cel-mobile-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.cel-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.cel-mobile-drawer-header strong {
    font-size: 1.05rem;
    color: var(--bleu);
    font-weight: 800;
}
.cel-mobile-drawer-close {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--muted);
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cel-mobile-drawer-close:hover { color: var(--ink); }

.cel-mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
.cel-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.25rem;
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.cel-mobile-nav a.active {
    color: var(--bleu);
    border-left-color: var(--jaune);
    background: #F4F9FD;
}
.cel-mobile-nav a:hover { background: var(--bg-soft, #F8FAFC); }
.cel-mobile-nav .sep {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 1.25rem;
}
.cel-mobile-nav .small-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
    padding: 0.75rem 1.25rem 0.5rem;
}
.cel-mobile-nav .danger {
    color: var(--danger, #DC2626);
}

.cel-mobile-drawer-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--bg-soft, #F8FAFC);
}
.cel-mobile-drawer-footer .phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--bleu);
    font-size: 0.95rem;
    text-decoration: none;
}
.cel-mobile-drawer-footer small {
    font-size: 0.72rem;
    color: var(--muted);
    display: block;
    margin-top: 0.25rem;
}

/* Topbar compact mobile */
@media (max-width: 768px) {
    .cel-topbar { font-size: 0.72rem; }
    .cel-topbar .container { padding: 0.35rem 1rem; gap: 0.5rem; justify-content: center; }
    .cel-topbar .container > div:first-child { display: none; } /* cache horaires + tel sur petit écran */
    .cel-topbar .container > div:last-child { text-align: center; }
    .cel-topbar .hidden-sm { display: none; }
    .cel-header .container { padding: 0.7rem 1rem; gap: 0.5rem; }
    .cel-logo-mark { width: 34px; height: 34px; }
    .cel-logo-text strong { font-size: 1rem; }
    .cel-logo-text small { display: none; }
    .cel-burger { display: inline-flex; }
    .cel-btn-login span { display: none; } /* juste l'icône */
    .cel-btn-login { padding: 0.5rem; width: 40px; height: 40px; justify-content: center; }
    .cel-btn-cart { padding: 0.5rem 0.75rem; }
    .cel-actions { gap: 0.4rem; }
}

@media (max-width: 380px) {
    .cel-header .container { padding: 0.6rem 0.75rem; }
    .cel-logo-text strong { font-size: 0.9rem; }
}

/* ===================== BUTTONS ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 700;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    padding: 0.75rem 1.4rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* Touch-friendly : min 44×44 pour tous les boutons sur écrans tactiles */
@media (max-width: 768px) {
    .btn { min-height: 44px; padding: 0.85rem 1.4rem; }
    .btn-sm { min-height: 38px; padding: 0.5rem 0.85rem; }
    .btn-lg { min-height: 50px; padding: 1rem 1.5rem; }
}

.btn-primary { background: var(--bleu); color: #fff; }
.btn-primary:hover { background: var(--bleu-dark); color: #fff; }
.btn-accent  { background: var(--jaune); color: var(--ink); }
.btn-accent:hover  { background: var(--jaune-dark); color: var(--ink); }
.btn-ghost   { background: transparent; color: var(--bleu); border-color: var(--bleu); }
.btn-white   { background: #fff; color: var(--bleu); border-color: #fff; }
.btn-dark    { background: var(--ink); color: #fff; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ===================== BADGES ===================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}
.badge-bleu    { background: var(--bleu-light); color: var(--bleu); }
.badge-jaune   { background: var(--jaune-light); color: #8A6E00; }
.badge-success { background: #DCFCE7; color: #15803D; }
.badge-danger  { background: #FEE2E2; color: #B91C1C; }
.badge-muted   { background: #F3F4F6; color: var(--muted); }

/* ===================== HERO ===================== */
.hero {
    background: var(--bleu);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero::before, .hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero::before { top: -100px; right: -100px; width: 400px; height: 400px; background: var(--bleu-dark); opacity: 0.4; }
.hero::after  { bottom: -80px; left: -80px; width: 250px; height: 250px; background: var(--jaune); opacity: 0.15; }

.hero .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; } }

.hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
}
.hero h1 .accent { color: var(--jaune); }
.hero .lead {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    margin-top: 1.25rem;
    max-width: 540px;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,228,19,0.2);
    color: var(--jaune);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 0.03em;
}
.hero-badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--jaune);
}
.hero-cta { display: flex; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero-stat { border-left: 3px solid var(--jaune); padding-left: 0.75rem; }
.hero-stat-value { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.hero-stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Hero envelope visual */
.hero-visual { position: relative; }
.envelope {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    aspect-ratio: 1.5/1;
    transform: rotate(-2deg);
    box-shadow: var(--shadow-lg);
    position: relative;
    color: var(--ink);
}
.envelope-from { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); line-height: 1.6; }
.envelope-from strong { color: var(--ink); }
.envelope-stamp {
    position: absolute; top: 20px; right: 20px;
    width: 70px; height: 90px;
    background: var(--jaune);
    border: 2px dashed var(--bleu);
    border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: rotate(4deg);
    padding: 0.5rem;
}
.envelope-stamp .l1 { font-size: 0.55rem; font-weight: 700; color: var(--bleu); letter-spacing: 0.1em; }
.envelope-stamp .l2 { font-size: 1.3rem; font-weight: 800; color: var(--bleu); line-height: 1; }
.envelope-stamp .l3 { font-size: 0.55rem; font-weight: 600; color: var(--bleu); letter-spacing: 0.1em; text-align: center; margin-top: 4px; }
.envelope-mark {
    position: absolute; top: 32px; right: 100px;
    border: 2px solid var(--bleu); border-radius: 50%;
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.5rem; color: var(--bleu);
    text-align: center; line-height: 1.2; opacity: 0.85;
    transform: rotate(-15deg);
}
.envelope-to {
    position: absolute; bottom: 30px; left: 38%;
    font-size: 0.9rem; line-height: 1.6;
}
.envelope-to .name { font-weight: 700; font-size: 1rem; }
.envelope-to .addr { font-family: var(--font-mono); font-size: 0.85rem; }
.envelope-to .country { font-weight: 700; color: var(--bleu); font-family: var(--font-mono); }
.tracking-badge {
    position: absolute; bottom: -16px; right: -16px;
    background: #fff;
    color: var(--ink);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 2px solid var(--jaune);
}
.tracking-badge .live-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--success); animation: pulse 2s infinite;
}
.tracking-badge small { display:block; font-size: 0.65rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.tracking-badge code { font-family: var(--font-mono); font-size: 0.8rem; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } }

/* ===================== SECTIONS ===================== */
.section { padding: 4rem 1.5rem; }
.section.gray { background: var(--bleu-pale); }
.section.dark { background: var(--bg-soft); }
.section .container { max-width: 1280px; margin: 0 auto; }
.section-title-center { text-align: center; margin-bottom: 3rem; }
.section-title-center h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    margin: 0.75rem 0 0.5rem;
}
.section-title-center .badge { margin-bottom: 0.5rem; }
.section-title-center .lead { color: var(--muted); font-size: 1rem; }

/* ===================== PRODUCT CARDS ===================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.product-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.product-card:hover {
    transform: translateY(-3px);
    border-color: var(--bleu);
    text-decoration: none;
}
.product-card.popular { border-color: var(--bleu); box-shadow: 0 8px 30px rgba(0,96,174,0.12); }
.product-card.popular::before {
    content: '★ POPULAIRE';
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--jaune); color: var(--ink);
    font-size: 0.68rem; font-weight: 800;
    padding: 0.25rem 0.75rem; border-radius: 999px;
    letter-spacing: 0.05em;
}
.product-icon {
    width: 44px; height: 44px;
    background: var(--bleu-light);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--bleu);
    margin-bottom: 1rem;
}
.product-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.product-card .desc { font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 1rem; }
.product-card .from { font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.product-card .price {
    font-size: 2.25rem; font-weight: 800; color: var(--bleu);
    line-height: 1; letter-spacing: -0.03em;
}
.product-card .price small { font-size: 1.25rem; font-weight: 700; }
.product-card .delivery {
    font-size: 0.78rem; color: var(--success);
    font-weight: 600; margin: 0.4rem 0 0;
    display: flex; align-items: center; gap: 0.3rem;
}
.product-features { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.product-feature {
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.82rem; color: var(--text); margin-bottom: 0.3rem;
}
.product-feature svg { flex-shrink: 0; margin-top: 2px; color: var(--success); }

/* ===================== STEPS (avec illustrations SVG) ===================== */
.steps-section {
    overflow: hidden;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.step-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.75rem;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 96, 174, 0.10);
    border-color: var(--bleu);
}

/* Illustration en haut de la card */
.step-illustration {
    width: 100%;
    aspect-ratio: 5 / 4;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FB 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
}
.step-illustration svg {
    width: 100%;
    height: 100%;
    max-width: 220px;
    display: block;
}

.step-card .step-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--jaune);
    line-height: 0.9;
    letter-spacing: -0.04em;
    -webkit-text-stroke: 1.5px var(--bleu);
    margin-bottom: 0.25rem;
}
.step-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.25rem 0 0.5rem;
    color: var(--ink);
}
.step-card p {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.55;
}

/* Animation hover sur l'illustration */
.step-card:hover .step-illustration {
    background: linear-gradient(135deg, #EFF6FB 0%, #DDEBF7 100%);
}

@media (max-width: 600px) {
    .step-card { padding: 1.25rem 1.25rem 1.5rem; }
    .step-card .step-number { font-size: 2.25rem; }
}

/* ===================== ENGAGEMENTS ===================== */
.engagements-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 800px) { .engagements-grid { grid-template-columns: 1fr; } }

.engagements-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.engagement-card {
    background: var(--bleu-pale);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border-left: 3px solid var(--jaune);
}
.engagement-card .icon { color: var(--bleu); margin-bottom: 0.5rem; }
.engagement-card .title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-top: 0.5rem; }
.engagement-card .desc { font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.5; }

/* ===================== TESTIMONIALS ===================== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.testimonial {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.testimonial .stars { display: flex; gap: 0.15rem; margin-bottom: 0.75rem; color: var(--jaune); }
.testimonial p { font-size: 0.92rem; color: var(--text); line-height: 1.6; margin: 0; }
.testimonial .author { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.testimonial .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bleu); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
}
.testimonial .author-name { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.testimonial .author-date { font-size: 0.75rem; color: var(--muted); }

/* ===================== CTA FINAL ===================== */
.cta-final {
    background: var(--bleu);
    color: #fff;
    padding: 3rem 1.5rem;
    position: relative;
    overflow: hidden;
}
.cta-final::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 300px; height: 300px;
    background: var(--jaune); opacity: 0.1;
    border-radius: 50%;
    transform: translate(50%, -50%);
}
.cta-final .container {
    max-width: 900px; margin: 0 auto; text-align: center;
    position: relative; z-index: 1;
}
.cta-final h2 { color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; }
.cta-final p { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin: 0.75rem 0 1.75rem; }

/* ===================== FOOTER ===================== */
.cel-footer {
    background: var(--ink);
    color: #A0A0A0;
    padding: 3rem 1.5rem 1.5rem;
}
.cel-footer .container {
    max-width: 1280px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 768px) { .cel-footer .container { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } }
@media (max-width: 480px) { .cel-footer .container { grid-template-columns: 1fr; } }
.cel-footer .col-title {
    font-size: 0.78rem; font-weight: 700; color: var(--jaune);
    letter-spacing: 0.05em; margin-bottom: 1rem;
}
.cel-footer ul { list-style: none; padding: 0; margin: 0; }
.cel-footer ul li { margin-bottom: 0.5rem; }
.cel-footer ul li a { color: #A0A0A0; font-size: 0.88rem; }
.cel-footer ul li a:hover { color: #fff; }
.cel-footer .brand-block p { font-size: 0.85rem; margin: 1rem 0; line-height: 1.6; }
.cel-footer .phone { color: #fff; font-weight: 700; }
.cel-footer .phone-hours { font-size: 0.75rem; color: #6B7280; }
.cel-footer-bottom {
    max-width: 1280px; margin: 2rem auto 0;
    border-top: 1px solid #2A2A2A;
    padding-top: 1.25rem;
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: 0.5rem; font-size: 0.78rem; color: #6B7280;
}

/* ===================== WIZARD ===================== */
.wizard-shell { background: var(--bg-soft); min-height: calc(100vh - 130px); padding: 2.5rem 1.5rem; }
.wizard-container { max-width: 1180px; margin: 0 auto; }

/* ====================================================================
   WIZARD STEPPER BAR — bandeau fullwidth sous la nav
   Container fullwidth (fond gris clair, border-bottom) + contenu centré
   ==================================================================== */
.wizard-stepper-bar {
    background: #F8FAFC;
    border-bottom: 1px solid var(--border);
    /* PAS de position sticky : la nav du dessus reste sticky, le stepper scrolle */
}
.wizard-stepper-bar .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

/* Ancien stepper-card : conservé pour rétro-compat (au cas où utilisé ailleurs) */
.stepper-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.stepper-item { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.stepper-bullet {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border);
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    transition: all 0.2s;
}
.stepper-item.active .stepper-bullet { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.stepper-item.done   .stepper-bullet { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.stepper-item .stepper-label { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.stepper-item.active .stepper-label,
.stepper-item.done   .stepper-label { color: var(--ink); font-weight: 700; }
.stepper-line { flex: 1; height: 2px; background: var(--border); margin: 0 0.5rem; border-radius: 1px; transition: background 0.2s; }
.stepper-line.done { background: var(--bleu); }
@media (max-width: 700px) {
    .stepper-item .stepper-label { display: none; }
    .wizard-stepper-bar .container { padding: 0.75rem 1rem; }
    .stepper-bullet { width: 32px; height: 32px; font-size: 0.8rem; }
    .stepper-line { margin: 0 0.35rem; }
}

.wizard-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
}
@media (max-width: 900px) { .wizard-grid { grid-template-columns: 1fr; } }

.wizard-main {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.wizard-main h2 {
    font-size: 1.6rem; font-weight: 800;
    margin: 0; letter-spacing: -0.02em;
}
.wizard-main .lead { color: var(--muted); margin: 0.5rem 0 1.75rem; }

.wizard-nav {
    display: flex; justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.wizard-aside { position: sticky; top: 130px; height: fit-content; }
@media (max-width: 900px) { .wizard-aside { position: static; } }

/* ====================================================================
   WIZARD MOBILE (≤ 700px) — récap en bas, compact, collapsé par défaut
   ==================================================================== */
@media (max-width: 700px) {
    .wizard-main { padding: 1.25rem; border-radius: 12px; }
    .wizard-main h2 { font-size: 1.3rem; }
    .wizard-main .lead { font-size: 0.92rem; margin-bottom: 1.25rem; }

    /* Récap mobile : reste dans le flux mais EN BAS (pas d'order: -1) */
    .wizard-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .wizard-aside {
        position: static;
        padding: 0;
        margin: 0;
    }
    .wizard-aside .recap-card {
        border-radius: 10px;
        position: relative;
    }
    /* Header du récap = bouton toggle (chevron en absolute pour pas casser l'alignement) */
    .wizard-aside .recap-header {
        cursor: pointer;
        padding: 0.85rem 2.5rem 0.85rem 1rem; /* place à droite pour le chevron */
        position: relative;
        user-select: none;
    }
    .wizard-aside .recap-header::after {
        content: "▼";
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.7);
        transition: transform 0.2s ease;
    }
    .wizard-aside.collapsed .recap-header::after {
        transform: translateY(-50%) rotate(-90deg);
    }
    .wizard-aside .recap-header .label { font-size: 0.65rem; }
    .wizard-aside .recap-header .title { font-size: 0.95rem; margin-top: 0.25rem; }
    .wizard-aside .recap-header .subtitle { font-size: 0.75rem; margin-top: 0.2rem; }
    .wizard-aside .recap-body {
        transition: max-height 0.25s ease, padding 0.25s ease;
        overflow: hidden;
    }
    .wizard-aside.collapsed .recap-body {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Bannière d'info masquée sur mobile (gain de place) */
    .wizard-aside .info-banner { display: none; }
}

/* ====================================================================
   SIDEBAR RECAP MOBILE — couleur gris terne au lieu du bleu CTA
   S'applique à toutes les pages avec un récap (envoi, panier, checkout)
   ==================================================================== */
@media (max-width: 768px) {
    /* Header du récap en gris terne sur toutes les pages mobile */
    .recap-header {
        background: #475569;  /* gris ardoise terne, pas trop sombre */
        color: #fff;
    }
    .recap-header .label { opacity: 0.75; }
    .recap-header .subtitle { opacity: 0.85; }

    /* Espace supplémentaire sous le bouton CTA principal sur mobile */
    .wizard-nav,
    .checkout-actions,
    .cart-actions {
        margin-bottom: 1.5rem;
    }
    /* Si le récap suit immédiatement, on garde une marge confortable */
    .wizard-aside,
    aside .recap-card {
        margin-top: 1rem;
    }
}

.recap-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.recap-header {
    background: var(--bleu);
    color: #fff;
    padding: 1rem 1.25rem;
}
.recap-header .label { font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 700; opacity: 0.8; }
.recap-header .title { font-size: 1.15rem; font-weight: 800; margin-top: 0.25rem; }
.recap-header .subtitle { font-size: 0.8rem; opacity: 0.85; margin-top: 0.2rem; font-weight: 500; }
.recap-body { padding: 1.25rem; }
.recap-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.88rem;
    padding: 0.4rem 0;
}
.recap-row .label { color: var(--text); }
.recap-row .value { font-family: var(--font-mono); font-weight: 700; color: var(--ink); white-space: nowrap; }
.recap-row .value.success { color: var(--success); }
.recap-row .value.muted { color: var(--muted); font-weight: 600; }
.recap-row-item { font-weight: 600; padding: 0.5rem 0; }
.recap-row-item .label { color: var(--ink); font-size: 0.92rem; }

/* Séparateur fin entre les items et la décomposition (espace, pas ligne) */
.recap-sep {
    margin: 0.75rem 0 0.5rem;
    /* Plus de ligne visible : juste un espace pour aérer */
}

/* Total : intégré dans le body, fond gris léger (zone grise distinctive sans bordure) */
.recap-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 1rem -1.25rem 0; /* coller aux bords latéraux */
    padding: 1rem 1.25rem;
    background: #F8FAFC;
}
.recap-total .label { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.recap-total .value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bleu);
    letter-spacing: -0.02em;
}
.recap-tva {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
    margin: 0 -1.25rem -1.25rem; /* colle aux bords latéraux ET au bas, sans margin-top */
    padding: 0.75rem 1.25rem;    /* padding symétrique haut/bas */
    background: #F8FAFC;
    text-align: right;
}

.info-banner {
    background: var(--jaune-light);
    border: 1px solid var(--jaune);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.82rem;
    color: #6B5300;
    display: flex;
    gap: 0.5rem;
}
.info-banner svg { flex-shrink: 0; margin-top: 2px; }

/* Variante discrète, ton gris (ex: "annulation impossible") */
.info-banner-muted {
    background: #F8FAFC;
    border-color: var(--border);
    color: var(--muted);
}

/* ===================== WIZARD STEPS ===================== */
/* Step 1 — Type selection */
.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.type-card {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    font-family: inherit;
    width: 100%;
    color: inherit;
}
.type-card:hover { border-color: var(--bleu); }
.type-card.selected { background: var(--bleu-pale); border-color: var(--bleu); }
.type-card-check {
    display: none;
    position: absolute; top: 10px; right: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bleu); color: #fff;
    align-items: center; justify-content: center;
}
.type-card.selected .type-card-check { display: flex; }
.type-card .type-icon { color: var(--muted); }
.type-card.selected .type-icon { color: var(--bleu); }
.type-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0.75rem 0 0.15rem; }
.type-card .price { color: var(--bleu); font-size: 1rem; font-weight: 800; }
.type-card .desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }

/* Step 2 — Upload */
.dropzone {
    background: var(--bleu-pale);
    border: 2px dashed var(--bleu);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.dropzone.has-file { background: #fff; border-color: var(--success); }
.dropzone-icon-wrap {
    width: 60px; height: 60px;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,96,174,0.15);
    color: var(--bleu);
}
.dropzone.has-file .dropzone-icon-wrap { background: #DCFCE7; color: var(--success); }
.dropzone h3 { font-size: 1.15rem; font-weight: 700; }
.dropzone .small { font-size: 0.9rem; color: var(--muted); margin-top: 0.4rem; }
.dropzone .file-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }
.dropzone-replace {
    margin-top: 0.75rem; background: none; border: none;
    color: var(--bleu); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; text-decoration: underline;
}

/* Step 3 — Adresses */
.addr-block { margin-bottom: 1.5rem; }
.addr-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.addr-num {
    width: 28px; height: 28px;
    background: var(--jaune);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem; color: var(--ink);
}
.addr-header h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }

.toggle-group { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.toggle-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    border: 1.5px solid var(--border);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}
.toggle-btn.active { background: var(--bleu); color: #fff; border-color: var(--bleu); }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; color: var(--text); font-weight: 600; margin-bottom: 0.3rem; }
.field input, .field select, .field textarea {
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.92rem;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border 0.15s;
}
.field input.mono { font-family: var(--font-mono); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bleu); }
.field-error { color: var(--danger); font-size: 0.75rem; margin-top: 0.25rem; display: none; }
.field.has-error input { border-color: var(--danger); }
.field.has-error .field-error { display: block; }

/* Mobile : font 16px minimum pour éviter le zoom iOS sur focus + hauteur tactile */
@media (max-width: 768px) {
    .field input, .field select, .field textarea {
        font-size: 16px;
        padding: 0.85rem 0.95rem;
        min-height: 48px;
    }
    .field label { font-size: 0.82rem; margin-bottom: 0.35rem; }
}

/* ====================================================================
   STEP 4 — OPTIONS (refonte graphique)
   3 sections visuellement distinctes : Délai / Options sup / Impression
   ==================================================================== */

/* Section : enveloppe chaque groupe d'options avec un titre */
.option-section {
    margin-bottom: 1.75rem;
}
.option-section:last-of-type { margin-bottom: 0; }
.option-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.option-section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--bleu);
    border-radius: 2px;
}

/* Groupe de radio buttons pour le délai (3 cards alignées horizontalement sur desktop) */
.option-radio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
@media (max-width: 900px) {
    .option-radio-group { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .option-radio-group { grid-template-columns: 1fr; }
}
.option-radio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem 1rem 1rem;
    padding-right: 2.5rem; /* place pour le checkmark à droite */
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 88px;
}
.option-radio:hover {
    border-color: var(--bleu);
    background: #FAFBFC;
}
.option-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.option-radio.checked,
.option-radio:has(input:checked) {
    border-color: var(--bleu);
    background: var(--bleu-pale);
    box-shadow: 0 2px 8px rgba(0, 96, 174, 0.08);
}
.option-radio.checked::after,
.option-radio:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--bleu);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}
.option-radio-content {
    width: 100%;
}
.option-radio-content .title {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--ink);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.option-radio-content .desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}
.option-radio-content .badge {
    display: inline-block;
    background: var(--bleu);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.option-radio-content .badge-orange {
    background: #F59E0B;
    color: #fff;
}
.option-radio-content .badge-green {
    background: #10B981;
    color: #fff;
}

/* Cartes d'options (checkbox) — même style visuel que les radios */
.option-list { display: grid; gap: 0.6rem; }
.option-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 1rem 2.5rem 1rem 1rem; /* padding-right pour le checkmark */
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 72px;
}
.option-card:hover {
    border-color: var(--bleu);
    background: #FAFBFC;
}
.option-card.checked,
.option-card:has(input:checked) {
    border-color: var(--bleu);
    background: var(--bleu-pale);
    box-shadow: 0 2px 8px rgba(0, 96, 174, 0.08);
}
.option-card.checked::after,
.option-card:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--bleu);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}
/* La vraie checkbox est cachée — on l'utilise juste pour l'état */
.option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.option-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.option-card .title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.option-card .desc {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
}
.option-card .desc em { color: var(--text); font-style: normal; font-weight: 600; }
.option-card .price-tag {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bleu);
    position: absolute;
    right: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
}
.option-card .price-tag.success { color: var(--success); }

/* Mobile : options en 1 colonne, padding réduit */
@media (max-width: 600px) {
    .option-section { margin-bottom: 1.5rem; }
    .option-section-title { font-size: 0.72rem; }
    .option-radio-group { grid-template-columns: 1fr; }
    .option-radio { padding: 0.85rem; }
    .option-card { padding: 0.85rem 1rem; }
    .option-card .title { font-size: 0.95rem; }
    .option-radio-content .title { font-size: 0.95rem; }
}

/* ===================== ALERT / FLASH ===================== */
.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.alert-success { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; }
.alert-danger  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.alert-warning { background: var(--jaune-light); color: #8A6E00; border-color: var(--jaune); }
.alert-info    { background: var(--bleu-light); color: var(--bleu); border-color: var(--bleu); }

/* ===================== UTILITIES ===================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ====================================================================
   GLOBAL RESPONSIVE POLISH
   ==================================================================== */

/* Sur petits écrans, padding des sections réduit */
@media (max-width: 600px) {
    .section { padding: 2.5rem 1rem; }
    .section .container { padding: 0; }
    h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; }
    h2, .h2 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
    h3, .h3 { font-size: 1.1rem; }
}

/* Touch : retire le hover-transform sur tactile (évite les sauts visuels) */
@media (hover: none) {
    .btn:hover, .product-card:hover, .cart-item:hover,
    .cel-logo:hover .cel-logo-mark {
        transform: none !important;
    }
}

/* Forcer wrap des longues URLs et des codes sur mobile */
@media (max-width: 600px) {
    code, .mono { word-break: break-all; }
}

/* Éviter le débordement horizontal global de la page */
html, body { overflow-x: hidden; }

/* ====================================================================
   TEMPLATES — sélecteur de mode + catalogue + formulaire
   ==================================================================== */

/* Tabs upload / template */
.doc-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.doc-mode-tab {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.doc-mode-tab:hover {
    border-color: var(--bleu);
    background: #FAFBFC;
}
.doc-mode-tab.active {
    border-color: var(--bleu);
    background: var(--bleu-pale);
    box-shadow: 0 2px 8px rgba(0, 96, 174, 0.08);
}
.doc-mode-tab svg {
    color: var(--bleu);
    flex-shrink: 0;
}
.doc-mode-tab span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.doc-mode-tab strong {
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 700;
}
.doc-mode-tab small {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
}

@media (max-width: 600px) {
    .doc-mode-tabs { grid-template-columns: 1fr; gap: 0.5rem; }
    .doc-mode-tab { padding: 0.75rem 0.85rem; }
}

.doc-mode-hint {
    color: var(--muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Catalogue templates */
.template-catalogue-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    gap: 0.8rem;
    color: var(--muted);
}
.template-catalogue-intro {
    background: #F8FAFC;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.template-empty,
.template-error {
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    background: #FEF2F2;
    border-radius: 8px;
}

.template-category {
    margin-bottom: 1.5rem;
}
.template-category-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 0.6rem;
    padding-left: 0.7rem;
    border-left: 4px solid var(--bleu);
}
.template-list {
    display: grid;
    gap: 0.5rem;
}
.template-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-family: inherit;
    width: 100%;
}
.template-card:hover {
    border-color: var(--bleu);
    background: #FAFBFC;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 96, 174, 0.08);
}
.template-card-body {
    flex: 1;
    min-width: 0;
}
.template-card-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
}
.template-card-desc {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 0.3rem;
}
.template-card-meta {
    font-size: 0.72rem;
    color: var(--bleu);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.template-card-arrow {
    color: var(--muted);
    flex-shrink: 0;
}
.template-card:hover .template-card-arrow {
    color: var(--bleu);
}

/* Formulaire de remplissage */
.template-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 0;
    color: var(--bleu);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 0.4rem 0;
    margin-bottom: 1rem;
    font-family: inherit;
}
.template-form-back:hover {
    text-decoration: underline;
}
.template-form-header {
    margin-bottom: 1.25rem;
}
.template-form-header h3 {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    color: var(--ink);
}
.template-form-desc {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 0.6rem;
}
.template-form-suggested {
    background: var(--bleu-pale);
    color: var(--bleu);
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    display: inline-block;
}
.template-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.template-field label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink);
    margin-bottom: 0.3rem;
}
.template-field label .req {
    color: var(--danger);
    font-weight: 800;
}
.template-field input,
.template-field textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    transition: border-color 0.15s ease;
}
.template-field input:focus,
.template-field textarea:focus {
    outline: 0;
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(0, 96, 174, 0.12);
}
.template-field textarea {
    resize: vertical;
    min-height: 90px;
}
.template-form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}
.template-form-error {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    color: #B91C1C;
    font-size: 0.88rem;
}

/* Spinner inline */
.spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.3rem;
}

/* Document généré (après PDF prêt) */
.template-generated-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #DCFCE7 0%, #EFFAF3 100%);
    border: 1.5px solid #86EFAC;
    border-radius: 10px;
    padding: 1rem 1.2rem;
}
.template-generated-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #16A34A;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.template-generated-card > div:not(.template-generated-icon) {
    flex: 1;
    min-width: 0;
}
.template-generated-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
}
.template-generated-meta {
    font-size: 0.82rem;
    color: var(--text);
}
.template-generated-reset {
    flex-shrink: 0;
    background: transparent;
    border: 1.5px solid #16A34A;
    color: #16A34A;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.template-generated-reset:hover {
    background: #16A34A;
    color: #fff;
}

/* ====================================================================
   MODE ÉDITION — bandeau au-dessus du wizard quand on édite un item
   ==================================================================== */
.edit-mode-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
    border: 1.5px solid #F59E0B;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.edit-mode-banner-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #F59E0B;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edit-mode-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.edit-mode-banner-body strong {
    color: #92400E;
    font-size: 0.95rem;
    font-weight: 800;
}
.edit-mode-banner-body span {
    font-size: 0.83rem;
    color: #78350F;
    line-height: 1.4;
}
.edit-mode-banner-cancel {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78350F;
    text-decoration: none;
    transition: background 0.15s ease;
}
.edit-mode-banner-cancel:hover {
    background: rgba(120, 53, 15, 0.1);
}

@media (max-width: 600px) {
    .edit-mode-banner { padding: 0.75rem 0.85rem; gap: 0.65rem; }
    .edit-mode-banner-icon { width: 32px; height: 32px; }
    .edit-mode-banner-body strong { font-size: 0.88rem; }
    .edit-mode-banner-body span { font-size: 0.78rem; }
}

/* ====================================================================
   COMMANDE PENDING — bloc reprise paiement (espace client)
   ==================================================================== */
.pending-payment-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
    border: 2px solid #F59E0B;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}
.pending-payment-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: #F59E0B;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pending-payment-body {
    flex: 1;
    min-width: 0;
}
.pending-payment-body h3 {
    margin: 0 0 0.4rem;
    color: #92400E;
    font-size: 1.1rem;
    font-weight: 800;
}
.pending-payment-body p {
    margin: 0 0 1rem;
    color: #78350F;
    line-height: 1.55;
    font-size: 0.92rem;
}
.pending-payment-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.pending-payment-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pending-payment-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid #FBBF24;
    color: #78350F;
}
.pending-payment-actions .btn-ghost:hover {
    background: #fff;
    border-color: #F59E0B;
}

@media (max-width: 600px) {
    .pending-payment-banner {
        flex-direction: column;
        padding: 1rem;
    }
    .pending-payment-icon { width: 44px; height: 44px; }
    .pending-payment-actions { flex-direction: column; }
    .pending-payment-actions .btn { width: 100%; justify-content: center; }
}

/* ====================================================================
   COMPTE — toggle "Voir les commandes masquées"
   ==================================================================== */
.account-card-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.account-card-header-inline h2 {
    margin: 0;
}
.account-toggle-hidden {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.account-toggle-hidden:hover {
    background: var(--bleu-pale, #EFF6FB);
    color: var(--bleu);
    border-color: var(--bleu);
}

/* Row masquée : style légèrement grisé */
.order-row-hidden {
    opacity: 0.65;
}
.order-row-hidden:hover {
    opacity: 1;
}

/* ====================================================================
   COMMANDE — aperçu PDF des courriers
   ----
   Le bloc utilise le pattern .cart-item-thumb du panier (CSS dans pages.css)
   pour la vignette cliquable + modale. Ici on ne définit que :
   - le wrapper layout (vignette à gauche, infos à droite)
   - les infos texte
   - les états d'erreur (document manquant / archivé)
   Pas de hover sur la card parente : il est isolé sur .cart-item-thumb.
   ==================================================================== */
.courrier-pdf-preview-block {
    margin: 1rem 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.courrier-pdf-preview-info {
    flex: 1;
    min-width: 0;
    padding-top: 0.25rem;
}
.courrier-pdf-preview-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    word-break: break-word;
}
.courrier-pdf-preview-meta {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.courrier-pdf-preview-hint {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* Document indisponible / purgé */
.courrier-pdf-preview-missing {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #FEF3C7;
    border: 1.5px solid #FBBF24;
    border-radius: 10px;
    flex: 1;
}
.courrier-pdf-preview-missing-icon {
    flex-shrink: 0;
    color: #B45309;
}
.courrier-pdf-preview-missing strong {
    color: #92400E;
    font-size: 0.95rem;
}

/* Bandeau pending en erreur (fichiers manquants) */
.pending-payment-banner-error {
    background: linear-gradient(135deg, #FEE2E2 0%, #FEF2F2 100%);
    border-color: #DC2626;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.12);
}
.pending-payment-banner-error .pending-payment-body h3 {
    color: #991B1B;
}
.pending-payment-banner-error .pending-payment-body p {
    color: #7F1D1D;
}
.pending-payment-banner-error .pending-payment-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.7);
    border-color: #FCA5A5;
    color: #991B1B;
}
.pending-payment-banner-error .pending-payment-actions .btn-ghost:hover {
    background: #fff;
    border-color: #DC2626;
}

/* Bloc archivé discret (commandes envoyées dont les fichiers ont été purgés) */
.courrier-pdf-preview-archived {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: #F1F5F9;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .courrier-pdf-preview-block {
        gap: 0.85rem;
    }
}