/* ==========================================================================
   Nomadisme — Feuille de style principale (Mobile First)
   Identité : fond blanc cassé, typographie minimaliste, style premium
   ========================================================================== */

:root {
    --color-bg: #f7f5f0;         /* blanc cassé */
    --color-bg-alt: #ffffff;
    --color-text: #1c1b19;
    --color-text-muted: #6f6b63;
    --color-border: #e4e0d8;
    --color-accent: #2f2b23;     /* terre/brun profond */
    --color-error: #b3402a;
    --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-heading: Georgia, "Times New Roman", serif;
    --radius: 2px;
    --transition: 200ms ease;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0 0 .6em;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.12em;
}

.logo span {
    display: block;
    font-family: var(--font-body);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: var(--color-text-muted);
}

.main-nav { display: none; }
.main-nav a {
    color: var(--color-text-muted);
    transition: color var(--transition);
}
.main-nav a:hover,
.main-nav a.is-active {
    color: var(--color-text);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.85rem;
}

.icon-link { white-space: nowrap; }

.burger {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Boutons */
.btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
}
.btn-primary:hover { background: #46403410; }
.btn-primary:hover { opacity: .85; }

.btn-outline {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.btn-outline:hover { background: var(--color-accent); color: #fff; }

.btn-sm { padding: 8px 16px; font-size: 0.75rem; }

/* Hero */
.hero {
    background: var(--color-bg-alt);
    padding: 90px 20px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.hero-inner { max-width: 640px; margin: 0 auto; }

.hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-bottom: 1.2em;
}

.hero h1 {
    font-size: 2.1rem;
    margin-bottom: 0.4em;
    animation: fadeUp 700ms ease both;
}

.hero-sub {
    color: var(--color-text-muted);
    margin-bottom: 2em;
    animation: fadeUp 700ms ease 100ms both;
}

.hero .btn { animation: fadeUp 700ms ease 200ms both; }

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

/* Section heading commun (Collection, Accueil...) */
.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
}
.section-link {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.section-link:hover { color: var(--color-text); }

/* Grille produits */
.collection-preview,
.collection-page { padding: 60px 20px; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.product-card { display: block; }

.product-card-media {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
}
.product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.product-card:hover .product-card-media img { transform: scale(1.03); }

.product-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-border);
}

.product-card-info { padding: 12px 2px; }
.product-card-info h3 {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 4px;
}
.product-card-price {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Filtres collection */
.collection-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}
.filter-pill {
    padding: 8px 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.filter-pill:hover { border-color: var(--color-accent); color: var(--color-text); }
.filter-pill.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Bandeau valeurs */
.values-strip {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 50px 20px;
}
.values-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
}
.value-item h3 { font-size: 1rem; margin-bottom: 0.4em; }
.value-item p { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; }

/* Section note sprint (à retirer en fin de projet) */
.sprint-note {
    padding: 50px 20px;
    max-width: 640px;
}
.sprint-note h2 { font-size: 1.2rem; }
.sprint-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Auth forms */
.auth-section { padding: 60px 20px; max-width: 420px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.auth-form input {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    font-size: 0.95rem;
}
.auth-form input:focus { outline: none; border-color: var(--color-accent); }
.auth-switch { margin-top: 18px; font-size: 0.85rem; color: var(--color-text-muted); }
.auth-switch a { text-decoration: underline; }

.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 8px; }
.alert-error { background: #f6e4df; color: var(--color-error); }

.muted { color: var(--color-text-muted); font-size: 0.9rem; }

/* Footer */
.site-footer {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    margin-top: 60px;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 50px 20px 30px;
}
.footer-col h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 10px; }
.footer-col a { display: block; font-size: 0.9rem; margin-bottom: 6px; }
.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding: 16px 20px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.not-found { padding: 100px 20px; text-align: center; }

/* ==========================================================================
   Fiche produit (Sprint 3)
   ========================================================================== */

.product-page { padding: 40px 20px 80px; }

.product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.product-gallery-main {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.product-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.thumb {
    width: 64px;
    height: 76px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info h1 {
    font-size: 1.5rem;
    margin-bottom: 0.2em;
}
.product-price {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 0.85rem;
}
.stars { color: #b8862f; letter-spacing: 2px; }
.rating-count { color: var(--color-text-muted); }

.product-description {
    color: var(--color-text-muted);
    margin-bottom: 26px;
    line-height: 1.7;
}

.product-option-group { margin-bottom: 26px; }
.option-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.color-options { display: flex; gap: 10px; }
.color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dot-color, #ccc);
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: box-shadow var(--transition);
}
.color-dot.is-selected { box-shadow: 0 0 0 2px var(--color-accent); }

.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
    min-width: 46px;
    padding: 10px 6px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition);
}
.size-btn:hover { border-color: var(--color-accent); }
.size-btn.is-selected { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.size-btn.is-out-of-stock {
    text-decoration: line-through;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.stock-message { margin-top: 10px; font-size: 0.8rem; color: var(--color-text-muted); }
.stock-message.is-error { color: var(--color-error); }

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 26px 14px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    font-size: 0.85rem;
    cursor: not-allowed;
    color: var(--color-text-muted);
}
.upload-dropzone.is-disabled { background: var(--color-bg-alt); }
.upload-dropzone small { font-size: 0.72rem; }
.upload-dropzone input { display: none; }

.btn-add-to-cart { width: 100%; }
.btn-add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; }
.small-note { margin-top: 10px; text-align: center; }

.product-reviews { margin-top: 60px; }
.product-reviews h2 { font-size: 1.1rem; margin-bottom: 20px; }
.reviews-list { display: flex; flex-direction: column; gap: 20px; }
.review-item { border-top: 1px solid var(--color-border); padding-top: 16px; }
.review-stars { color: #b8862f; letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 6px; }
.review-comment { margin: 0 0 6px; }
.review-author { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }



.cart-table{width:100%;border-collapse:collapse;margin-top:24px;}
.cart-table th,.cart-table td{padding:12px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle;}
.cart-product{display:flex;align-items:center;gap:12px;}
.cart-product img{width:56px;height:56px;object-fit:cover;border-radius:4px;}
.color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.cart-qty-input{width:56px;padding:4px;}
.cart-remove{background:none;border:none;cursor:pointer;color:#999;font-size:16px;}
.cart-remove:hover{color:#c0392b;}
.stock-warning{color:#c0392b;display:block;font-size:11px;}
.cart-summary{margin-top:24px;text-align:right;}
.cart-total{font-size:18px;margin-bottom:12px;}
.cart-empty{margin-top:24px;color:#777;}
.cart-note{font-size:12px;color:#999;margin-top:8px;}


.upload-dropzone{display:block;border:1.5px dashed #ccc;border-radius:6px;padding:16px;text-align:center;cursor:pointer;position:relative;}
.upload-dropzone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.upload-preview{position:relative;margin-top:10px;max-width:160px;}
.upload-preview img{width:100%;border-radius:4px;border:1px solid #eee;}
.upload-remove{position:absolute;top:-8px;right:-8px;background:#fff;border:1px solid #ccc;border-radius:50%;width:22px;height:22px;cursor:pointer;}
.upload-controls{margin-top:12px;}
.upload-control-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;}
.upload-control-row label{width:70px;}
.upload-status{font-size:12px;color:#666;}
.cart-upload{margin-top:6px;display:flex;align-items:center;gap:6px;}
.cart-upload-thumb{width:32px;height:32px;object-fit:cover;border-radius:4px;}
.upload-status-badge{font-size:11px;padding:2px 6px;border-radius:10px;}
.status-pending{background:#fff3cd;color:#856404;}
.status-approved{background:#d4edda;color:#155724;}
.status-rejected{background:#f8d7da;color:#721c24;}