/*
 * pro.css — Espace partenaire pro La Réserve CBD
 * Design "back-office premium" : fond forest-deep, sidebar forest, accents gold.
 * Vanilla CSS — aucun framework externe.
 */

/* ═══════════════════════════════════════════════════════
   VARIABLES CSS (charte pro — complète le main.css)
   ═══════════════════════════════════════════════════════ */
:root {
    --forest-deep: #121F19;
    --forest: #1E3A2B;
    --forest-mid: #2A4F3C;
    --sage: #6B9B78;
    --gold: #B8963E;
    --gold-light: #D4B365;
    --cream: #FAF7F2;
    --cream-warm: #F0EBE0;
    --white: #FFFFFF;
    --success: #2E7D32;
    --warning: #E65100;
    --danger: #C62828;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;

    --sidebar-width: 240px;
    --header-height: 60px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 9999px;

    --shadow-sm: 0 1px 3px rgba(18, 31, 25, 0.12);
    --shadow-md: 0 4px 12px rgba(18, 31, 25, 0.10);
    --shadow-lg: 0 8px 24px rgba(18, 31, 25, 0.14);

    --transition: 200ms ease;
}

/* ═══════════════════════════════════════════════════════
   LAYOUT GLOBAL
   ═══════════════════════════════════════════════════════ */
body.pro-layout {
    display: flex;
    min-height: 100vh;
    background: var(--forest-deep);
    font-family: var(--font-body);
    color: var(--cream);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════ */
.pro-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--forest);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-right: 1px solid rgba(184, 150, 62, 0.15);
    transition: transform var(--transition);
}

.pro-sidebar__brand {
    padding: 24px 20px 20px;
    border-bottom: 1px solid rgba(184, 150, 62, 0.2);
    margin-bottom: 8px;
}

.pro-sidebar__brand-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.02em;
}

.pro-sidebar__brand-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 3px;
}

.pro-sidebar__nav {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pro-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(250, 247, 242, 0.75);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
    position: relative;
}

.pro-sidebar__link:hover {
    background: rgba(184, 150, 62, 0.1);
    color: var(--cream);
}

.pro-sidebar__link.is-active {
    background: rgba(184, 150, 62, 0.15);
    color: var(--gold-light);
    border-left: 2px solid var(--gold);
}

.pro-sidebar__link svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.pro-sidebar__badge {
    margin-left: auto;
    background: var(--gold);
    color: var(--forest-deep);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    min-width: 20px;
    text-align: center;
}

.pro-sidebar__footer {
    padding: 16px 12px;
    border-top: 1px solid rgba(184, 150, 62, 0.15);
}

.pro-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(250, 247, 242, 0.5);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}

.pro-sidebar__logout:hover {
    color: var(--danger);
    background: rgba(198, 40, 40, 0.08);
}

/* ═══════════════════════════════════════════════════════
   ZONE PRINCIPALE
   ═══════════════════════════════════════════════════════ */
.pro-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #0e1a13;
}

/* ═══════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════ */
.pro-header {
    height: var(--header-height);
    background: var(--forest);
    border-bottom: 1px solid rgba(184, 150, 62, 0.15);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.pro-header__menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--cream);
    cursor: pointer;
    padding: 4px;
}

.pro-header__identity {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pro-header__company {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cream);
}

.pro-header__role {
    font-size: 0.7rem;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pro-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pro-header__cart-link {
    position: relative;
    color: var(--cream);
    opacity: 0.8;
    transition: opacity var(--transition);
}

.pro-header__cart-link:hover { opacity: 1; }

.pro-header__cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gold);
    color: var(--forest-deep);
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════
   CONTENU
   ═══════════════════════════════════════════════════════ */
.pro-content {
    padding: 32px 28px;
    flex: 1;
}

.pro-messages {
    padding: 0 28px;
}

.pro-message {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.pro-message--success { background: rgba(46, 125, 50, 0.2); border-left: 3px solid var(--success); color: #a5d6a7; }
.pro-message--error, .pro-message--warning { background: rgba(198, 40, 40, 0.15); border-left: 3px solid var(--danger); color: #ef9a9a; }
.pro-message--info { background: rgba(184, 150, 62, 0.15); border-left: 3px solid var(--gold); color: var(--gold-light); }

/* ═══════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════ */
.pro-page-header {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.pro-page-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cream);
    line-height: 1.2;
}

.pro-page-subtitle {
    color: var(--sage);
    font-size: 0.875rem;
    margin-top: 4px;
}

.pro-page-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   STATISTIQUES DASHBOARD
   ═══════════════════════════════════════════════════════ */
.pro-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.pro-stat-card {
    background: var(--forest);
    border: 1px solid rgba(184, 150, 62, 0.15);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}

.pro-stat-card--alert {
    border-color: rgba(230, 81, 0, 0.4);
    background: rgba(230, 81, 0, 0.06);
}

.pro-stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pro-stat-card__icon--orders { background: rgba(107, 155, 120, 0.15); color: var(--sage); }
.pro-stat-card__icon--revenue { background: rgba(184, 150, 62, 0.15); color: var(--gold); }
.pro-stat-card__icon--pending { background: rgba(107, 155, 120, 0.1); color: var(--sage); }
.pro-stat-card__icon--overdue { background: rgba(230, 81, 0, 0.15); color: var(--warning); }

.pro-stat-card__value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cream);
    line-height: 1;
    margin-bottom: 4px;
}

.pro-stat-card__label {
    display: block;
    font-size: 0.75rem;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pro-quick-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════ */
.pro-section {
    margin-top: 32px;
}

.pro-section__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(184, 150, 62, 0.2);
}

/* ═══════════════════════════════════════════════════════
   TABLEAUX
   ═══════════════════════════════════════════════════════ */
.pro-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(184, 150, 62, 0.12);
}

.pro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pro-table thead tr {
    background: var(--forest);
}

.pro-table th {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sage);
    white-space: nowrap;
}

.pro-table tbody tr {
    border-bottom: 1px solid rgba(184, 150, 62, 0.07);
    transition: background var(--transition);
}

.pro-table tbody tr:hover {
    background: rgba(184, 150, 62, 0.05);
}

.pro-table td {
    padding: 12px 14px;
    color: rgba(250, 247, 242, 0.85);
}

.pro-table__amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.pro-table__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.pro-table tfoot tr { border-top: 1px solid rgba(184, 150, 62, 0.2); }
.pro-table tfoot td { padding: 10px 14px; }
.pro-table__row--total td { color: var(--cream); font-weight: 600; }
.pro-table__subtotal-label { color: var(--sage); font-size: 0.8rem; }

/* ═══════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════ */
.pro-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Statuts commande */
.pro-badge--draft      { background: rgba(107,155,120,0.12); color: var(--sage); }
.pro-badge--confirmed  { background: rgba(184,150,62,0.18); color: var(--gold-light); }
.pro-badge--processing { background: rgba(184,150,62,0.25); color: var(--gold); }
.pro-badge--shipped    { background: rgba(46,125,50,0.2); color: #81c784; }
.pro-badge--delivered  { background: rgba(46,125,50,0.3); color: #a5d6a7; }
.pro-badge--cancelled  { background: rgba(198,40,40,0.15); color: #ef9a9a; }

/* Statuts paiement */
.pro-badge--pay-pending  { background: rgba(107,155,120,0.12); color: var(--sage); }
.pro-badge--pay-paid     { background: rgba(46,125,50,0.2); color: #81c784; }
.pro-badge--pay-overdue  { background: rgba(230,81,0,0.2); color: #ffb74d; }
.pro-badge--pay-refunded { background: rgba(107,155,120,0.12); color: var(--sage); }

/* Type produit */
.pro-badge--type-natural  { background: rgba(107,155,120,0.18); color: var(--sage); }
.pro-badge--type-enriched { background: rgba(184,150,62,0.18); color: var(--gold-light); }

/* Stock */
.pro-badge--in-stock     { background: rgba(46,125,50,0.2); color: #81c784; }
.pro-badge--out-of-stock { background: rgba(198,40,40,0.15); color: #ef9a9a; }

/* Statut partenaire */
.pro-badge--status-pending   { background: rgba(184,150,62,0.15); color: var(--gold); }
.pro-badge--status-approved  { background: rgba(46,125,50,0.2); color: #81c784; }
.pro-badge--status-suspended { background: rgba(198,40,40,0.15); color: #ef9a9a; }

/* ═══════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════ */
.pro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}

.pro-btn--primary {
    background: var(--gold);
    color: var(--forest-deep);
}
.pro-btn--primary:hover {
    background: var(--gold-light);
    box-shadow: 0 4px 12px rgba(184, 150, 62, 0.3);
}

.pro-btn--ghost {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(250, 247, 242, 0.2);
}
.pro-btn--ghost:hover {
    background: rgba(250, 247, 242, 0.06);
    border-color: rgba(250, 247, 242, 0.4);
}

.pro-btn--sm { padding: 6px 14px; font-size: 0.8rem; }
.pro-btn--full { width: 100%; }

/* ═══════════════════════════════════════════════════════
   FORMULAIRES
   ═══════════════════════════════════════════════════════ */
.pro-form { display: flex; flex-direction: column; gap: 18px; }

.pro-fieldset {
    border: 1px solid rgba(184, 150, 62, 0.2);
    border-radius: var(--radius-md);
    padding: 20px;
}

.pro-fieldset__legend {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    padding: 0 8px;
}

.pro-form-group { display: flex; flex-direction: column; gap: 5px; }

.pro-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pro-form-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.pro-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pro-input, .pro-textarea {
    background: rgba(18, 31, 25, 0.6);
    border: 1px solid rgba(250, 247, 242, 0.12);
    border-radius: var(--radius-sm);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 10px 14px;
    width: 100%;
    transition: border-color var(--transition);
}

.pro-input:focus, .pro-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184, 150, 62, 0.15);
}

.pro-input--error { border-color: var(--danger); }
.pro-input--sm { width: 100px; }

.pro-input-hint { font-size: 0.75rem; color: var(--sage); }

.pro-field-error {
    font-size: 0.78rem;
    color: #ef9a9a;
}

.pro-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--cream);
    cursor: pointer;
    padding: 6px 0;
}

.pro-radio { accent-color: var(--gold); }

.pro-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 8px;
}

.pro-form-errors {
    background: rgba(198, 40, 40, 0.12);
    border: 1px solid rgba(198, 40, 40, 0.3);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.pro-form-error { color: #ef9a9a; font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════
   CATALOGUE PRO
   ═══════════════════════════════════════════════════════ */
.pro-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.pro-product-card {
    background: var(--forest);
    border: 1px solid rgba(184, 150, 62, 0.12);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.pro-product-card:hover {
    border-color: rgba(184, 150, 62, 0.35);
    box-shadow: var(--shadow-md);
}

.pro-product-card__image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--forest-mid);
}

.pro-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pro-product-card:hover .pro-product-card__image img { transform: scale(1.03); }

.pro-product-card__body { padding: 16px; flex: 1; }
.pro-product-card__meta { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.pro-product-card__name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--cream); margin-bottom: 4px; }
.pro-product-card__strain { font-size: 0.78rem; color: var(--sage); margin-bottom: 8px; font-style: italic; }
.pro-product-card__desc { font-size: 0.82rem; color: rgba(250,247,242,0.65); line-height: 1.5; margin-bottom: 12px; }
.pro-product-card__cbd { font-size: 0.75rem; color: var(--gold); font-weight: 600; }
.pro-product-card__stock { margin-top: 10px; }
.pro-product-card__footer { padding: 12px 16px; border-top: 1px solid rgba(184,150,62,0.1); }

/* Tarifs dégressifs */
.pro-pricing-tiers { margin-top: 10px; }
.pro-pricing-tiers__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sage); display: block; margin-bottom: 6px; }
.pro-pricing-tiers__list { display: flex; flex-direction: column; gap: 3px; }
.pro-pricing-tier { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; padding: 3px 0; border-bottom: 1px solid rgba(184,150,62,0.07); }
.pro-pricing-tier__range { color: rgba(250,247,242,0.7); }
.pro-pricing-tier__price { font-weight: 600; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.pro-pricing-none { font-size: 0.82rem; color: var(--sage); font-style: italic; }

/* Tableau tarifs (détail produit) */
.pro-pricing-table-wrapper { margin: 20px 0; }
.pro-pricing-table__title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); margin-bottom: 10px; }
.pro-pricing-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pro-pricing-table th { padding: 8px 12px; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sage); border-bottom: 1px solid rgba(184,150,62,0.2); }
.pro-pricing-table td { padding: 9px 12px; border-bottom: 1px solid rgba(184,150,62,0.07); }
.pro-pricing-table tr:hover td { background: rgba(184,150,62,0.05); }
.pro-pricing-table__price { font-weight: 700; color: var(--gold-light); }
.pro-pricing-table__discount { font-size: 0.8rem; color: var(--sage); margin-top: 8px; font-style: italic; }

/* Fiche produit détail */
.pro-product-detail { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: start; }
.pro-product-detail__img { width: 100%; border-radius: var(--radius-md); }
.pro-product-detail__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pro-product-detail__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--cream); margin-bottom: 6px; }
.pro-product-detail__strain { font-size: 0.9rem; color: var(--sage); font-style: italic; margin-bottom: 14px; }
.pro-product-detail__desc { color: rgba(250,247,242,0.75); font-size: 0.9rem; line-height: 1.7; margin-bottom: 14px; }
.pro-product-detail__origin { font-size: 0.82rem; color: var(--sage); margin-bottom: 14px; }
.pro-product-detail__stock { margin: 14px 0; }

/* Formulaire ajout panier */
.pro-cart-add-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(184,150,62,0.15); }

/* ═══════════════════════════════════════════════════════
   PANIER
   ═══════════════════════════════════════════════════════ */
.pro-cart { background: var(--forest); border: 1px solid rgba(184,150,62,0.15); border-radius: var(--radius-md); padding: 20px; }
.pro-cart__items { display: flex; flex-direction: column; gap: 1px; margin-bottom: 20px; }

.pro-cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(184,150,62,0.07);
}

.pro-cart-item__info { display: flex; flex-direction: column; gap: 2px; }
.pro-cart-item__name { font-weight: 500; color: var(--cream); font-size: 0.9rem; }
.pro-cart-item__price-unit { font-size: 0.75rem; color: var(--sage); }
.pro-cart-item__qty-form { display: flex; align-items: center; gap: 6px; }
.pro-cart-item__unit { font-size: 0.8rem; color: var(--sage); }
.pro-cart-item__total { font-weight: 600; color: var(--gold-light); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.pro-cart-item__remove { background: none; border: none; color: rgba(250,247,242,0.3); cursor: pointer; padding: 4px; border-radius: 4px; transition: color var(--transition); }
.pro-cart-item__remove:hover { color: var(--danger); }

.pro-cart__totals { border-top: 1px solid rgba(184,150,62,0.2); padding-top: 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.pro-cart__total-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: rgba(250,247,242,0.75); }
.pro-cart__total-row--total { font-size: 1rem; font-weight: 700; color: var(--cream); padding-top: 8px; border-top: 1px solid rgba(184,150,62,0.2); }
.pro-cart__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pro-cart__empty { text-align: center; padding: 40px 20px; color: var(--sage); display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ═══════════════════════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════════════════════ */
.pro-checkout-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 28px;
    align-items: start;
}

.pro-checkout-summary {
    background: var(--forest);
    border: 1px solid rgba(184,150,62,0.15);
    border-radius: var(--radius-md);
    padding: 20px;
    position: sticky;
    top: calc(var(--header-height) + 20px);
}

.pro-checkout-summary__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--gold-light); margin-bottom: 14px; }
.pro-checkout-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pro-checkout-line { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; color: rgba(250,247,242,0.8); }
.pro-checkout-line__name { flex: 1; }
.pro-checkout-totals { border-top: 1px solid rgba(184,150,62,0.15); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pro-checkout-total-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: rgba(250,247,242,0.75); }
.pro-checkout-total-row--discount { color: var(--success); }
.pro-checkout-total-row--total { font-size: 1.05rem; font-weight: 700; color: var(--cream); padding-top: 8px; border-top: 1px solid rgba(184,150,62,0.2); }

.pro-checkout-form-wrapper {
    background: var(--forest);
    border: 1px solid rgba(184,150,62,0.12);
    border-radius: var(--radius-md);
    padding: 24px;
}

/* ═══════════════════════════════════════════════════════
   CONFIRMATION
   ═══════════════════════════════════════════════════════ */
.pro-confirmation {
    max-width: 560px;
    margin: 40px auto;
    text-align: center;
    background: var(--forest);
    border: 1px solid rgba(184,150,62,0.2);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
}

.pro-confirmation__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(46,125,50,0.15);
    color: #81c784;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.pro-confirmation__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); margin-bottom: 8px; }
.pro-confirmation__ref { color: var(--sage); font-size: 0.9rem; margin-bottom: 20px; }
.pro-confirmation__details { background: rgba(18,31,25,0.4); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; text-align: left; }
.pro-confirmation__row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 5px 0; border-bottom: 1px solid rgba(184,150,62,0.07); color: rgba(250,247,242,0.8); }
.pro-confirmation__lines { text-align: left; margin-bottom: 20px; }
.pro-confirmation__lines h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sage); margin-bottom: 10px; }
.pro-confirmation__line { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; padding: 5px 0; border-bottom: 1px solid rgba(184,150,62,0.07); color: rgba(250,247,242,0.8); }
.pro-confirmation__message { font-size: 0.875rem; color: var(--sage); margin-bottom: 24px; }
.pro-confirmation__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════
   COMMANDES — DÉTAIL
   ═══════════════════════════════════════════════════════ */
.pro-order-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.pro-order-info-card, .pro-info-card, .pro-form-card {
    background: var(--forest);
    border: 1px solid rgba(184,150,62,0.12);
    border-radius: var(--radius-md);
    padding: 20px;
}

.pro-card-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(184,150,62,0.15);
}

.pro-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.875rem; }
.pro-dl dt { color: var(--sage); white-space: nowrap; }
.pro-dl dd { color: var(--cream); }

.pro-address { font-style: normal; font-size: 0.875rem; color: rgba(250,247,242,0.8); line-height: 1.7; }
.pro-notes { font-size: 0.875rem; color: rgba(250,247,242,0.75); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════
   PROFIL
   ═══════════════════════════════════════════════════════ */
.pro-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.pro-info-card__note {
    font-size: 0.78rem;
    color: var(--sage);
    font-style: italic;
    margin-top: 12px;
    border-top: 1px solid rgba(184,150,62,0.1);
    padding-top: 10px;
}

/* ═══════════════════════════════════════════════════════
   INSCRIPTION (pages hors espace pro — fond blanc)
   ═══════════════════════════════════════════════════════ */
.pro-register-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.pro-register-card {
    background: var(--forest);
    border: 1px solid rgba(184,150,62,0.2);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 620px;
    box-shadow: var(--shadow-lg);
    color: var(--cream);
}

.pro-register-card__header { margin-bottom: 28px; }
.pro-register-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--cream); margin-bottom: 8px; }
.pro-register-card__subtitle { font-size: 0.875rem; color: var(--sage); line-height: 1.6; }
.pro-register-card__text { font-size: 0.9rem; color: rgba(250,247,242,0.8); line-height: 1.6; margin-bottom: 10px; }
.pro-register-card__text--small { font-size: 0.8rem; color: var(--sage); }
.pro-register-card__actions { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.pro-pending-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(184,150,62,0.12);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.pro-pending-icon--success {
    background: rgba(46,125,50,0.15);
    color: #81c784;
}

/* ═══════════════════════════════════════════════════════
   UTILITAIRES
   ═══════════════════════════════════════════════════════ */
.pro-ref { font-family: monospace; font-size: 0.85em; background: rgba(18,31,25,0.5); padding: 2px 6px; border-radius: 4px; color: var(--gold-light); }
.pro-link { color: var(--gold); text-decoration: none; font-size: 0.82rem; font-weight: 500; transition: color var(--transition); }
.pro-link:hover { color: var(--gold-light); text-decoration: underline; }
.pro-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--sage); margin-bottom: 20px; }
.pro-breadcrumb a { color: var(--sage); text-decoration: none; } .pro-breadcrumb a:hover { color: var(--gold); }
.pro-empty-state { text-align: center; padding: 60px 20px; color: var(--sage); display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 0.9rem; }
.pro-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.pro-pagination__info { font-size: 0.82rem; color: var(--sage); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — sidebar collapse sur mobile
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pro-sidebar {
        transform: translateX(-100%);
    }

    .pro-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .pro-main {
        margin-left: 0;
    }

    .pro-header__menu-toggle {
        display: flex;
    }

    .pro-product-detail,
    .pro-checkout-layout {
        grid-template-columns: 1fr;
    }

    .pro-checkout-summary {
        position: static;
    }

    .pro-form-row-2 {
        grid-template-columns: 1fr;
    }

    .pro-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pro-content {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .pro-stats-grid {
        grid-template-columns: 1fr;
    }

    .pro-register-card {
        padding: 24px 20px;
    }
}