/* ==========================================================
 *  WorldWeed · Skin STREET / MOLÉCULE FORTE
 *  Layer additionnel par-dessus style.css :
 *  - Palette plus acide / béton / spray
 *  - Stickers HHC/H4-CBD/HHCP/CBG en chips agressifs
 *  - Grain & textures (overlay subtil)
 *  - Drops numérotés type "001/200"
 *  - Typographie brutale sur titres clés (Archivo Black + Fraunces)
 *  - Marquees plus "tag urbain"
 *  - Stickers caoutchouc rotatifs (transform)
 *  - Transitions de page fluides (#nav-progress + fade body)
 * ========================================================== */

/* ============================================
 *  PAGE TRANSITIONS · barre top + fade body
 * ============================================ */

/* Masquer définitivement l'ancien loader si un cache le sert encore */
#page-loader { display: none !important; }

/* Barre de progression fixe en haut, ultra discrète, fonctionne mobile */
#nav-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2.5px;
    width: 0%;
    background: linear-gradient(90deg, #b8ff3a 0%, #c8f560 50%, #ff6b35 100%);
    box-shadow: 0 0 12px rgba(184,255,58,.55), 0 0 4px rgba(184,255,58,.85);
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    transition: width 8s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
#nav-progress.active { opacity: 1; }

/* Fade body au chargement + au départ de page */
html.page-loading body > main,
html.page-loading body > header,
html.page-loading body > .topbar {
    opacity: 0;
}
html.page-ready body > main,
html.page-ready body > header,
html.page-ready body > .topbar {
    opacity: 1;
    transition: opacity .35s cubic-bezier(.2,.8,.2,1);
}
html.page-leaving body > main {
    opacity: 0.35;
    transition: opacity .22s ease;
    pointer-events: none;
}

/* Anim subtile du contenu à l'arrivée (desktop) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    html.page-ready body > main {
        animation: pageEnter .5s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes pageEnter {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    #nav-progress { transition: opacity .15s ease; }
    html.page-ready body > main { animation: none !important; }
}

:root {
    /* Palette street layered au-dessus de la base */
    --acid:        #b8ff3a;       /* vert plus acide */
    --acid-deep:   #8ee400;
    --concrete:    #1a1916;       /* béton sombre */
    --concrete-2:  #232220;
    --sand:        #f5f1e8;
    --sticker-orange: #ff6b35;
    --sticker-pink:   #ff3d8b;
    --sticker-cyan:   #34e4ff;
    --sticker-purple: #c478ff;
    --tag-yellow: #fff200;

    --font-brutal: "Archivo Black", "Druk", "Inter", sans-serif;
}

/* ---------- Background grain ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: overlay;
    z-index: 1;
    opacity: .9;
}
@media (max-width: 600px) {
    body::before { opacity: .5; }
}

/* ---------- Topbar marquee · plus tag ---------- */
.topbar {
    background: var(--acid) !important;
    color: var(--concrete) !important;
    border-bottom: 2px solid var(--concrete);
    font-family: 'JetBrains Mono', monospace;
}
.topbar-marquee {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    font-size: 11px;
}
.topbar-marquee span::before {
    content: "▸";
    margin: 0 14px;
    color: var(--concrete);
    opacity: .7;
}

/* ---------- Header logo + nav -------- */
.header-nav a {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.header-nav a.active::after,
.header-nav a:hover::after {
    background: var(--acid);
    height: 3px;
}

/* ---------- Stickers molécule ----------
   .sticker, .sticker-hhc, .sticker-h4cbd, .sticker-hhcp, .sticker-drop, .sticker-cbg
*/
.sticker {
    display: inline-block;
    padding: 6px 12px;
    font-family: var(--font-brutal);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    transform: rotate(-3deg);
    transition: transform .2s ease;
    box-shadow: 2px 2px 0 rgba(0,0,0,.6);
    color: #111;
}
.sticker:hover { transform: rotate(-3deg) scale(1.05); }
.sticker.sticker-cbd      { background: var(--acid); }
.sticker.sticker-hhc      { background: var(--sticker-orange); color: #fff; transform: rotate(2deg); }
.sticker.sticker-h4cbd    { background: var(--sticker-cyan); transform: rotate(-2deg); }
.sticker.sticker-hhcp     { background: var(--sticker-pink); color: #fff; transform: rotate(4deg); }
.sticker.sticker-thcp     { background: var(--sticker-purple); color: #fff; transform: rotate(-4deg); }
.sticker.sticker-cbg      { background: var(--tag-yellow); transform: rotate(1deg); }
.sticker.sticker-mix      { background: linear-gradient(45deg, var(--acid), var(--sticker-orange)); color: #111; }

/* Petits stickers (utilisé sur cartes produits) */
.sticker-sm {
    padding: 4px 8px; font-size: 9px; letter-spacing: 1.5px;
    box-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

/* ---------- Badge force / drop ---------- */
.force-badge {
    display: inline-flex;
    align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--concrete);
    border: 1px solid var(--acid);
    color: var(--acid);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
}
.force-badge.forte { color: var(--sticker-orange); border-color: var(--sticker-orange); }
.force-badge.premium { color: var(--tag-yellow); border-color: var(--tag-yellow); }

/* Drop number type "001/200" */
.drop-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--ink-faint);
    border-top: 1px dashed currentColor;
    border-bottom: 1px dashed currentColor;
    padding: 4px 12px;
}

/* ---------- Cards produits façon "drop card" ---------- */
.product-card {
    border: 1px solid rgba(245,241,232,.08);
    position: relative;
    overflow: hidden;
}
/* Pseudo-pattern uniquement sur l'image, pas sur l'info (sinon il cache le prix) */
.product-card .product-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 12px,
            rgba(200,245,96,.015) 12px 13px
        );
    pointer-events: none;
    z-index: 1;
}
.product-card .product-info {
    position: relative;
    z-index: 2;
    background: var(--bg-elev);
}
.product-card:hover {
    border-color: var(--acid);
    box-shadow: 0 0 0 1px var(--acid), 4px 4px 0 -1px var(--concrete);
}

/* ---------- ZONES de la .product-image ----------
   Layout choisi pour ne plus rien chevaucher :
     · top-left      : .product-badges  (Promo, Signature, Rupture)
     · top-right     : .wish-btn        (favori coeur)
     · bottom-left   : .product-molecule  (sticker HHC/H4-CBD/HHCP/CBG…)
     · bottom-right  : .product-strength-pill  (pastille "Forte")
   Plus de bandeau diagonal qui mange tout.
   ----------------------------------------------- */

/* Override : on cache l'ancien bandeau diagonal trop volumineux */
.product-strength-strip { display: none !important; }

/* Sticker molécule en bas à gauche de l'image */
.product-image .product-molecule {
    position: absolute;
    left: 12px; bottom: 12px;
    z-index: 3;
    padding: 5px 10px;
    font-family: var(--font-brutal);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 4px;
    color: #111;
    transform: rotate(-3deg);
    box-shadow: 2px 2px 0 rgba(0,0,0,.5);
    pointer-events: none;
}
.product-molecule.m-hhc   { background: var(--sticker-orange); color: #fff; transform: rotate(-2deg); }
.product-molecule.m-h4cbd { background: var(--sticker-cyan); transform: rotate(2deg); }
.product-molecule.m-hhcp  { background: var(--sticker-pink); color: #fff; transform: rotate(-3deg); }
.product-molecule.m-thcp  { background: var(--sticker-purple); color: #fff; transform: rotate(3deg); }
.product-molecule.m-cbg   { background: var(--tag-yellow); transform: rotate(-1deg); }
.product-molecule.m-mix   { background: linear-gradient(45deg, var(--acid), var(--sticker-orange)); color: #111; }
.product-molecule.m-cbd   { background: var(--acid); }

/* Pastille "Forte" en bas à droite */
.product-image .product-strength-pill {
    position: absolute;
    right: 12px; bottom: 12px;
    z-index: 3;
    padding: 4px 10px;
    background: rgba(10,9,8,.85);
    color: var(--sticker-orange);
    border: 1px solid var(--sticker-orange);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    pointer-events: none;
}
.product-image .product-strength-pill.s-premium { color: var(--tag-yellow); border-color: var(--tag-yellow); }
.product-image .product-strength-pill.s-mid     { color: var(--acid); border-color: var(--acid); }

/* Le bouton favoris : on le sort de l'image et on le rend bien tappable
   et accessible (hors hover) — top-right de la card */
.product-card .wish-btn {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 4;
    width: 38px; height: 38px;
    background: rgba(10,9,8,.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,241,232,.12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink-dim);
    transition: all .2s ease;
}
.product-card .wish-btn:hover,
.product-card .wish-btn:focus-visible { color: var(--sticker-pink); border-color: var(--sticker-pink); outline: none; }
.product-card .wish-btn.active { background: var(--sticker-pink); color: #fff; border-color: var(--sticker-pink); }

/* On replace les .product-badges proprement à gauche (no overlap avec product-quick) */
.product-card .product-badges {
    left: 12px; top: 12px;
    gap: 4px;
    z-index: 3;
}
.product-card .product-badges .badge {
    padding: 4px 9px;
    font-size: 9px;
    letter-spacing: 1.2px;
}
.badge-out {
    background: var(--danger);
    color: var(--ink);
}
.product-cat .product-drop {
    color: var(--acid);
    font-weight: 600;
}
.product-title-link { text-decoration: none; color: inherit; display: block; }

/* ===== VARIANT CHIPS (paliers 1g/3g/5g/10g, ×1/×2/...) sur la card ===== */
.product-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 24px 14px;
    position: relative;
    z-index: 2;
}
.variant-chip {
    border: 1px solid rgba(245,241,232,.12);
    background: transparent;
    color: var(--ink-dim);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.variant-chip:hover:not(.selected) {
    border-color: var(--acid);
    color: var(--ink);
}
.variant-chip.selected {
    background: var(--acid);
    color: var(--bg);
    border-color: var(--acid);
}

@media (max-width: 600px) {
    .product-variants { padding: 0 14px 12px; gap: 4px; }
    .variant-chip { font-size: 10px; padding: 5px 10px; min-height: 32px; }
}
@media (max-width: 480px) {
    /* Sur tout petit écran, on autorise scroll horizontal */
    .product-variants {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .product-variants::-webkit-scrollbar { display: none; }
    .variant-chip { flex: 0 0 auto; }
}

/* ===== STEPPER QTY + BTN ADD inline sur la card ===== */
.product-buy {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--bg);
    border: 1.5px solid var(--acid);
    border-radius: 999px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 0 0 0 rgba(184,255,58,.2);
    animation: stepperPop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stepperPop {
    from { transform: scale(.8); opacity: .4; }
    to   { transform: scale(1);  opacity: 1; }
}
.product-stepper .step-btn {
    width: 36px; height: 36px;
    background: transparent;
    color: var(--acid);
    border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    padding: 0;
}
.product-stepper .step-btn:hover:not(:disabled) { background: var(--acid); color: var(--bg); }
.product-stepper .step-btn:disabled { opacity: .35; cursor: not-allowed; }
.product-stepper .step-qty {
    min-width: 32px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--acid);
    pointer-events: none;
    padding: 0 4px;
}

/* Bouton "Ajouter" version compacte sur la card */
.product-card .btn-add.card-add {
    width: auto;
    height: 36px;
    border-radius: 999px;
    padding: 0 14px;
    background: var(--acid);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform .2s ease, background .2s ease;
}
.product-card .btn-add.card-add:hover {
    transform: translateY(-1px);
    background: var(--acid-deep, #8ee400);
}
.product-card .btn-add.card-add .card-add-label { white-space: nowrap; }

/* Label rupture stock */
.product-out-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--danger);
    padding: 6px 12px;
    border: 1px solid var(--danger);
    border-radius: 999px;
    background: rgba(244,67,54,.08);
}

/* Footer responsive : si trop serré, on stack price puis CTA */
.product-footer {
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 480px) {
    .product-card .btn-add.card-add { padding: 0 12px; height: 38px; }
    .product-card .btn-add.card-add .card-add-label { display: inline; }
    .product-stepper .step-btn { width: 38px; height: 38px; }
    .product-stepper .step-qty { min-width: 28px; font-size: 13px; }
}
/* Sur écran très étroit, on cache le label "Ajouter" pour laisser juste l'icône */
@media (max-width: 360px) {
    .product-card .btn-add.card-add .card-add-label { display: none; }
}

/* .product-quick (flèche au hover) ne sert plus puisqu'on a la wishlist
   au même endroit — on le déplace en bas-centre, visible au hover uniquement,
   ou on le cache. Choix : on le cache (la card est cliquable de toute façon). */
.product-card .product-quick { display: none; }

/* ---------- Titres brutaux sur certains H1 ---------- */
.brutal-title {
    font-family: var(--font-brutal);
    text-transform: uppercase;
    letter-spacing: -.02em;
    line-height: .9;
}

/* ---------- Marquee secondaire type tag ---------- */
.tag-marquee {
    background: var(--concrete);
    color: var(--acid);
    padding: 14px 0;
    border-top: 2px solid var(--acid);
    border-bottom: 2px solid var(--acid);
    font-family: var(--font-brutal);
    font-size: 18px;
    letter-spacing: 6px;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}
.tag-marquee-track {
    display: inline-flex; gap: 40px;
    animation: marquee 30s linear infinite;
}
.tag-marquee-track span::before { content: "✦"; margin-right: 40px; color: var(--sticker-orange); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Spray / stencil effects ---------- */
.spray-text {
    position: relative;
    display: inline-block;
}
.spray-text::after {
    content: "";
    position: absolute;
    inset: -6px -10px;
    background: radial-gradient(ellipse, rgba(184,255,58,.18), transparent 70%);
    z-index: -1;
    border-radius: 50%;
    filter: blur(8px);
}

/* ---------- Error pages ---------- */
.errpage {
    text-align: center;
    padding: 120px 24px 100px;
    max-width: 640px;
    margin: 0 auto;
}
.errpage-num {
    font-family: var(--font-brutal);
    font-size: clamp(120px, 22vw, 220px);
    line-height: 1;
    color: var(--acid);
    letter-spacing: -.02em;
    text-shadow:
        4px 4px 0 var(--sticker-orange),
        8px 8px 0 var(--concrete);
}
.errpage-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(32px, 5vw, 56px);
    margin: 24px 0 12px;
}
.errpage p { color: var(--ink-dim); font-size: 16px; }
.errpage-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
    position: fixed;
    bottom: 16px; left: 16px; right: 16px;
    max-width: 720px; margin: 0 auto;
    background: var(--concrete-2);
    border: 1px solid var(--acid);
    color: var(--ink);
    padding: 18px 22px;
    border-radius: 14px;
    z-index: 200;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.cookie-banner p { margin: 0; font-size: 13px; line-height: 1.6; flex: 1 1 280px; color: var(--ink-dim); }
.cookie-banner strong { color: var(--acid); }
.cookie-banner .cookie-actions { display: flex; gap: 8px; }

/* ---------- Auth pages : skin street ---------- */
.auth-page {
    min-height: calc(100vh - 220px);
    display: flex; align-items: center; justify-content: center;
    padding: 60px 16px 100px;
    position: relative;
    overflow: hidden;
}
.auth-page::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 500px 350px at 20% 30%, rgba(184,255,58,.06), transparent 70%),
        radial-gradient(ellipse 400px 300px at 80% 70%, rgba(255,107,53,.05), transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.auth-box {
    max-width: 480px; width: 100%;
    background: var(--bg-elev);
    border: 1px solid rgba(245,241,232,.08);
    border-radius: 18px;
    padding: 44px 38px;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* Sticker accent en haut de la box d'auth */
.auth-box::before {
    content: "EST. 2026 · WORLDWEED";
    position: absolute;
    top: -14px; left: 24px;
    background: var(--acid);
    color: var(--concrete);
    font-family: var(--font-brutal);
    font-size: 10px;
    letter-spacing: 3px;
    padding: 6px 14px;
    border-radius: 4px;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

.auth-box h1 {
    font-family: var(--font-display); font-style: italic;
    font-size: 42px; line-height: 1; margin: 8px 0 8px;
    letter-spacing: -.02em;
}
.auth-box h1 em { color: var(--acid); font-style: italic; }
.auth-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 28px;
}

.auth-link {
    text-align: center; margin-top: 22px;
    color: var(--ink-dim); font-size: 13px;
    line-height: 1.8;
}
.auth-link a { color: var(--acid); text-decoration: none; font-weight: 500; }
.auth-link a:hover { text-decoration: underline; }
.muted-link { color: var(--ink-faint) !important; font-size: 12px; }

/* Auth form inputs harmonisés street */
.auth-box .form-group label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 6px;
}
.auth-box input[type=email],
.auth-box input[type=password],
.auth-box input[type=text],
.auth-box input[type=date] {
    width: 100%;
    background: var(--bg);
    border: 1px solid rgba(245,241,232,.1);
    color: var(--ink);
    padding: 14px 16px;
    border-radius: 12px;
    font-family: inherit; font-size: 14px;
    transition: border-color .15s ease, background .15s ease;
}
.auth-box input:focus {
    outline: none;
    border-color: var(--acid);
    background: rgba(184,255,58,.04);
}
.auth-box .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-box .form-group { margin-bottom: 14px; }
.auth-box .btn-block { margin-top: 8px; }

@media (max-width: 520px) {
    .auth-box { padding: 36px 22px; }
    .auth-box h1 { font-size: 34px; }
}

/* ---------- Checkout layouts (migration depuis inline) ---------- */
.checkout-wrap { padding: 40px 24px 100px; }
.checkout-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    padding-top: 16px;
}
.checkout-col > .admin-card { margin-bottom: 20px; }
.checkout-recap { position: sticky; top: 100px; }

.checkout-items { max-height: 260px; overflow-y: auto; margin-bottom: 18px; }
.checkout-item {
    display: flex; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(245,241,232,.05);
    font-size: 13px;
}
.checkout-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.checkout-item-info { flex: 1; }
.checkout-item-info .name { font-weight: 500; }
.checkout-item-info .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.checkout-item-info .variant { color: var(--acid); }
.checkout-item .price { font-family: var(--font-display); font-style: italic; color: var(--acid); font-size: 15px; }

.rewards-block {
    background: rgba(184,255,58,.08);
    border: 1px solid rgba(184,255,58,.2);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}
.rewards-block-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--acid); margin-bottom: 8px;
}
.rewards-block-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; margin-top: 4px; color: var(--ink);
}

.payment-methods { display: grid; gap: 12px; }
.payment-method {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid rgba(245,241,232,.1);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease;
}
.payment-method:hover { border-color: var(--acid); }
.payment-method input[type=radio] { accent-color: var(--acid); margin-right: 4px; }
.payment-method input[type=radio]:checked + .payment-icon + .payment-body { color: var(--acid); }
.payment-method .payment-icon { color: var(--ink-dim); }
.payment-method .payment-body { flex: 1; }
.payment-method .payment-body strong { display: block; font-size: 14px; }
.payment-method .payment-body small { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

.checkout-secure {
    text-align: center; margin-top: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Success/cancel screens */
.checkout-success {
    text-align: center;
    padding: 80px 24px;
}
.checkout-success-box {
    max-width: 540px; margin: 0 auto;
    background: var(--bg-elev);
    border: 1px solid var(--acid);
    border-radius: 22px;
    padding: 60px 40px;
}
.checkout-success-icon { color: var(--acid); margin-bottom: 22px; }
.checkout-success-box h1 {
    font-family: var(--font-display); font-size: 48px; font-style: italic; margin: 0 0 16px;
}
.checkout-num-box {
    background: var(--bg);
    padding: 22px; border-radius: 14px;
    margin: 28px 0;
}
.checkout-num-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.checkout-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px; color: var(--acid);
}
.checkout-total {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 32px; font-style: italic;
}
.checkout-actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* Cart drawer migration */
.cart-totals .cart-total-line { display: flex; justify-content: space-between; padding: 6px 0; }
.cart-totals .grand { font-size: 18px; padding-top: 12px; border-top: 1px solid rgba(245,241,232,.08); margin-top: 6px; }
.cart-totals .discount { color: var(--acid); }

/* Promo input */
.promo-input-row {
    display: flex; gap: 6px;
    margin: 14px 0;
}
.promo-input-row input {
    flex: 1; background: var(--bg);
    border: 1px solid rgba(245,241,232,.1);
    color: var(--ink);
    padding: 10px 14px; border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.promo-input-row button {
    background: var(--acid); color: var(--concrete);
    border: 0; padding: 0 18px; border-radius: 10px;
    cursor: pointer; font-weight: 600; font-size: 13px;
}

/* Wishlist heart */
.wish-btn {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(15,14,13,.8);
    border: 1px solid rgba(245,241,232,.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink-dim);
    z-index: 2;
    transition: all .15s ease;
}
.wish-btn:hover { color: var(--sticker-pink); border-color: var(--sticker-pink); }
.wish-btn.active { background: var(--sticker-pink); color: #fff; border-color: var(--sticker-pink); }

/* ============================================
 *  MOBILE-FIRST · responsive global
 * ============================================ */

/* iOS : empêche le zoom au focus en forçant inputs >= 16px */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
    /* Touch-targets minimum 44px (WCAG / Apple HIG) */
    button, .btn, .header-icon-btn, .wish-btn, .btn-add, .qty-control button {
        min-height: 44px;
    }
    .btn-add { width: 44px; height: 44px; }
    /* Header icon buttons tappables */
    .header-icon-btn { width: 44px; height: 44px; }
    /* Header plus compact pour libérer de l'espace */
    .header-inner { padding: 12px 0 !important; gap: 8px !important; }
    /* Empêche le bounce de scroll iOS qui peut révéler du contenu sous le drawer */
    html { overscroll-behavior-y: contain; }
}

/* Anti-tap-highlight bleu/gris des navigateurs mobiles, on garde notre propre :active */
* { -webkit-tap-highlight-color: transparent; }

/* Products grid : 2 colonnes solides dès 480px, 3 cols dès 900px, auto au-delà */
.products-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (max-width: 900px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 420px) {
    .products-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Card produit responsive */
@media (max-width: 600px) {
    .product-card .product-info { padding: 14px 14px 16px; }
    .product-card .product-name { font-size: 16px; line-height: 1.2; }
    .product-card .product-price { font-size: 20px; }
    .product-card .product-meta { font-size: 10px; gap: 8px; }
    .product-card .product-molecule { font-size: 9px; padding: 4px 8px; left: 10px; bottom: 10px; }
    .product-card .product-strength-pill { font-size: 8px; padding: 3px 8px; right: 10px; bottom: 10px; }
    .product-card .wish-btn { width: 34px; height: 34px; top: 10px; right: 10px; }
    .product-card .product-badges { left: 10px; top: 10px; }
    .product-card .product-badges .badge { font-size: 8px; padding: 3px 7px; }
}

/* Catalog layout : sidebar filtres collapsable sur mobile */
@media (max-width: 900px) {
    .catalog-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .filters {
        position: static !important;
        order: 2;
    }
}

/* Header : sur mobile la navbar disparaît + on cache le burger
   (la navigation est assurée par la bottom-nav sticky) */
@media (max-width: 980px) {
    .header-nav { display: none; }
    .header-actions { gap: 4px; }
}
@media (max-width: 768px) {
    .header-icon-btn.mobile-menu-btn,
    [data-mobile-menu] { display: none !important; }
}
@media (max-width: 480px) {
    .topbar-marquee { font-size: 9px; letter-spacing: 2px; }
    .topbar { padding: 6px 0; }
}

/* Bottom-nav : 5 items, touch zone confortable */
@media (max-width: 768px) {
    body { padding-bottom: 72px; }
    .bottom-nav { display: block; }
    .bottom-nav-inner a { min-height: 56px; padding: 6px 0; }
}
@media (min-width: 769px) {
    .bottom-nav { display: none; }
}

/* ============================================
 *  CART DRAWER mobile-first
 * ============================================ */

/* Layout principal : header sticky en haut, footer sticky en bas, body scrollable */
.cart-drawer {
    display: flex !important;
    flex-direction: column;
    /* Safe-area iOS pour notch / Dynamic Island */
    padding-top: env(safe-area-inset-top, 0);
}
#cart-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.cart-drawer-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-elev);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}
/* Bouton X dans le header : touch target large + couleur visible */
.cart-drawer-header [data-close-cart],
.cart-drawer-header .header-icon-btn {
    width: 44px !important;
    height: 44px !important;
    background: rgba(245,241,232,.05);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    border: 1px solid rgba(245,241,232,.1);
    transition: background .15s ease, color .15s ease;
}
.cart-drawer-header [data-close-cart]:hover,
.cart-drawer-header [data-close-cart]:active {
    background: var(--acid, #b8ff3a);
    color: var(--bg);
    border-color: var(--acid);
}
/* Tout ce qui est entre header et footer doit pouvoir scroller */
.cart-drawer-header ~ .preroll-rewards,
.cart-drawer-header ~ .cart-items,
.cart-drawer-header ~ .cart-empty {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cart-drawer .cart-items {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
}
.cart-drawer-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-elev);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    /* Safe-area iOS pour barre home */
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0));
}

/* Cart drawer plein écran sur mobile */
@media (max-width: 600px) {
    .cart-drawer {
        width: 100% !important;
        max-width: none !important;
        border-left: 0;
    }
    .cart-drawer-header { padding: 18px 18px; }
    .cart-drawer-header h3 { font-size: 19px; }
}

/* Empêcher scroll body quand le drawer est ouvert */
body.cart-open {
    overflow: hidden;
    touch-action: none;  /* bloque le scroll iOS sous le drawer */
}
body.cart-open .cart-drawer,
body.cart-open .cart-drawer * {
    touch-action: auto;  /* mais autorise le scroll DANS le drawer */
}

/* Page header / breadcrumb confortables */
@media (max-width: 600px) {
    .page-header { padding: 24px 0 16px; }
    .page-header h1 {
        font-size: clamp(34px, 8vw, 52px);
        line-height: 1;
    }
    .breadcrumb { font-size: 10px; gap: 6px; }
}

/* Sections home compactes */
@media (max-width: 600px) {
    .home-section { padding: 48px 0; }
    .home-section-header { gap: 12px; margin-bottom: 28px; }
    .home-section-header .section-title { font-size: 32px; }
    .home-hero { padding: 36px 0 28px; }
    .home-hero-title { font-size: clamp(40px, 11vw, 56px); }
    .home-hero-cta .btn { flex: 1; min-width: 0; }
    .home-hero-cta { gap: 8px; }
}

/* Trust grid mobile */
@media (max-width: 600px) {
    .home-trust { grid-template-columns: 1fr; gap: 10px; }
    .home-trust-item { padding: 18px 16px; }
}

/* FAQ mobile */
@media (max-width: 600px) {
    .home-faq-item summary { padding: 18px 0; gap: 10px; }
    .home-faq-item summary .num { font-size: 11px; }
}

/* Auth page mobile */
@media (max-width: 480px) {
    .auth-box { padding: 32px 20px 28px; border-radius: 14px; }
    .auth-box::before { font-size: 9px; padding: 5px 10px; }
    .auth-box h1 { font-size: 30px; }
}

/* Forms / checkout */
@media (max-width: 760px) {
    .checkout-grid { grid-template-columns: 1fr; gap: 20px; }
    .checkout-recap { position: static; }
}

/* ---------- Galerie produit ---------- */
.gallery-thumbs {
    display: flex; gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.gallery-thumb {
    width: 64px; height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid rgba(245,241,232,.1);
    background: none;
    cursor: pointer; padding: 0;
    transition: border-color .15s ease;
}
.gallery-thumb.active { border-color: var(--acid); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Stickers row sur fiche ---------- */
.product-stickers {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 16px 0 20px;
    align-items: center;
}

/* ---------- Rating ---------- */
.rating-line {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 14px;
}
.rating-stars { color: var(--accent-warm); letter-spacing: 2px; font-size: 16px; }

/* ---------- Reviews ---------- */
.reviews-section { padding: 60px 0; }
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 20px;
}
.review-card {
    background: var(--bg-elev);
    border: 1px solid rgba(245,241,232,.06);
    border-radius: 14px;
    padding: 18px;
}
.review-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.review-card h4 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.review-card p { margin: 0; color: var(--ink-dim); font-size: 13px; line-height: 1.6; }

/* Star input radio inversé */
.star-input { direction: rtl; display: inline-flex; }
.star-input input { display: none; }
.star-input label {
    color: rgba(245,241,232,.15);
    font-size: 28px;
    cursor: pointer;
    padding: 0 4px;
    transition: color .12s;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--accent-warm); }

/* ---------- Product trust grid ---------- */
.product-trust {
    margin-top: 28px;
    padding: 20px;
    background: var(--bg-elev);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 12px;
    color: var(--ink-dim);
}
.product-trust > div {
    display: flex; gap: 8px; align-items: center;
}

/* ============================================
 *  HOME · sections home alignées avec le site
 * ============================================ */

/* HERO */
.home-hero {
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}
.home-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 700px 500px at 80% 30%, rgba(184,255,58,.08), transparent 65%),
        radial-gradient(ellipse 500px 400px at 10% 80%, rgba(255,107,53,.05), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.home-hero .container { position: relative; z-index: 1; }
.home-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

.home-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: rgba(184,255,58,.08);
    border: 1px solid rgba(184,255,58,.25);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--acid);
    margin-bottom: 28px;
}
.pulse-dot {
    width: 8px; height: 8px;
    background: var(--acid);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(184,255,58,.6);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(184,255,58,.6); }
    70%  { box-shadow: 0 0 0 12px rgba(184,255,58,0); }
    100% { box-shadow: 0 0 0 0 rgba(184,255,58,0); }
}

.home-hero-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(48px, 7vw, 88px);
    line-height: .95;
    letter-spacing: -.025em;
    margin: 0 0 24px;
    color: var(--ink);
}
.home-hero-title em {
    color: var(--acid);
    font-style: italic;
}
.home-hero-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-dim);
    max-width: 540px;
    margin-bottom: 36px;
}
.home-hero-lead strong { color: var(--ink); font-weight: 500; }

.home-hero-cta {
    display: flex; gap: 12px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.home-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(245,241,232,.06);
    padding-top: 24px;
}
.home-hero-stats > div {
    padding: 0 14px;
    border-left: 1px solid rgba(245,241,232,.06);
    display: flex; flex-direction: column;
}
.home-hero-stats > div:first-child { border-left: 0; padding-left: 0; }
.home-hero-stats .v {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(22px, 2.5vw, 32px);
    color: var(--ink);
}
.home-hero-stats .k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 4px;
}

.home-hero-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
}
.home-hero-card {
    display: block;
    height: 100%;
    background: var(--bg-elev);
    border: 1px solid rgba(245,241,232,.08);
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    transition: border-color .2s ease, transform .25s ease;
}
.home-hero-card:hover { border-color: var(--acid); transform: translateY(-4px); }
.home-hero-card .hhc-image {
    width: 100%; height: 70%;
    overflow: hidden;
}
.home-hero-card .hhc-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}
.home-hero-card:hover .hhc-image img { transform: scale(1.05); }
.home-hero-card .hhc-overlay {
    padding: 22px 26px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}
.home-hero-card .hhc-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--acid); margin-bottom: 6px;
}
.home-hero-card .hhc-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26px;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 8px;
}
.home-hero-card .hhc-meta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 12px; color: var(--ink-dim);
}
.home-hero-card .hhc-price {
    margin-left: auto;
    font-family: var(--font-display); font-style: italic;
    font-size: 20px; color: var(--acid);
}

/* SECTIONS GÉNÉRIQUES HOME */
.home-section { padding: 80px 0; }
.home-section-alt {
    background: var(--bg-elev);
    border-top: 1px solid rgba(245,241,232,.04);
    border-bottom: 1px solid rgba(245,241,232,.04);
}
.home-section-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
    align-items: end;
}
.home-section-header .section-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(38px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 16px 0 0;
}
.home-section-header .section-title em { color: var(--acid); font-style: italic; }
.home-section-intro {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-dim);
    max-width: 460px;
    margin-left: auto;
}
.home-section-cta {
    text-align: center;
    margin-top: 56px;
}

/* CATÉGORIES grid */
.home-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.home-cat {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-elev);
    border: 1px solid rgba(245,241,232,.08);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .25s ease;
}
.home-cat:hover { border-color: var(--acid); transform: translateY(-4px); }
.home-cat-art {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .85;
    transition: transform .6s ease;
}
.home-cat:hover .home-cat-art { transform: scale(1.06); }
.home-cat-content {
    position: absolute; inset: 0;
    padding: 20px 24px;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, transparent 30%, rgba(10,9,8,.85));
}
.home-cat-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--acid);
    margin-bottom: 6px;
}
.home-cat-content h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26px;
    color: var(--ink);
    margin: 0;
    line-height: 1;
}
.home-cat-arrow {
    position: absolute;
    top: 18px; right: 18px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--acid);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.home-cat:hover .home-cat-arrow { background: var(--acid); color: var(--bg); transform: rotate(-45deg); }

/* MANIFESTO */
.home-manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}
.home-manifesto-body p {
    color: var(--ink-dim);
    line-height: 1.8;
    margin-bottom: 18px;
    font-size: 16px;
}
.home-manifesto-body strong {
    color: var(--ink);
    font-weight: 500;
}
.home-manifesto-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* TRUST */
.home-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.home-trust-item {
    background: var(--bg-elev);
    border: 1px solid rgba(245,241,232,.06);
    border-radius: 16px;
    padding: 26px 22px;
    transition: border-color .2s ease, transform .25s ease;
}
.home-trust-item:hover { border-color: var(--acid); transform: translateY(-3px); }
.home-trust-item .ic {
    color: var(--acid);
    margin-bottom: 14px;
}
.home-trust-item .t {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 6px;
}
.home-trust-item .d {
    font-size: 13px;
    color: var(--ink-dim);
    line-height: 1.6;
}

/* FAQ */
.home-faq-wrap { max-width: 880px; }
.home-faq { margin-top: 32px; }
.home-faq-item {
    border-bottom: 1px solid rgba(245,241,232,.08);
    padding: 4px 0;
}
.home-faq-item summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 28px);
    color: var(--ink);
    transition: color .15s ease;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary:hover { color: var(--acid); }
.home-faq-item summary .num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--ink-faint);
    margin-right: 4px;
}
.home-faq-item summary .caret {
    margin-left: auto;
    transition: transform .2s ease;
    color: var(--acid);
}
.home-faq-item[open] summary .caret { transform: rotate(90deg); }
.home-faq-answer {
    padding: 0 0 26px 56px;
    color: var(--ink-dim);
    line-height: 1.8;
    font-size: 15px;
}

/* RESPONSIVE HOME */
@media (max-width: 980px) {
    .home-hero { padding: 56px 0 40px; }
    .home-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .home-hero-visual { aspect-ratio: 5 / 4; max-width: 520px; margin: 0 auto; }
    .home-section { padding: 56px 0; }
    .home-section-header { grid-template-columns: 1fr; gap: 16px; }
    .home-section-intro { max-width: none; margin-left: 0; }
    .home-cat-grid { grid-template-columns: 1fr 1fr; }
    .home-trust { grid-template-columns: 1fr 1fr; }
    .home-manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    .home-hero-stats { grid-template-columns: 1fr 1fr; gap: 0; }
    .home-hero-stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
    .home-hero-stats > div { padding: 12px 8px; border-top: 1px solid rgba(245,241,232,.04); }
    .home-cat-grid { grid-template-columns: 1fr; }
    .home-trust { grid-template-columns: 1fr; }
    .home-faq-item summary { font-size: 18px; gap: 12px; }
    .home-faq-answer { padding-left: 0; }
}

/* ============================================
 *  HOME · Illustrations bud / hash plate
 * ============================================ */

/* Stage du bud dans le hero */
.home-hero-illustration {
    background: radial-gradient(ellipse at 50% 40%, rgba(184,255,58,.10), transparent 60%),
                radial-gradient(ellipse at 30% 70%, rgba(255,107,53,.06), transparent 60%);
    border: 1px solid rgba(245,241,232,.06);
    border-radius: 22px;
    padding: 32px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 18px;
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
}
.home-hero-illustration::before {
    /* Trace de grain subtile */
    content: "";
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 11px, rgba(184,255,58,.022) 11px 12px);
    pointer-events: none;
}
.bud-stage {
    width: 78%;
    max-width: 360px;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    z-index: 1;
    animation: budFloat 9s ease-in-out infinite;
}
.bud-stage svg { width: 100%; height: auto; display: block; }
@keyframes budFloat {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-12px) rotate(1.5deg); }
}
.bud-tag {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; position: relative; z-index: 1;
}
.bud-tag-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--acid);
    padding: 4px 10px;
    border-top: 1px dashed currentColor;
    border-bottom: 1px dashed currentColor;
}
.bud-tag-name {
    font-family: var(--font-brutal);
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--ink-dim);
}

@media (prefers-reduced-motion: reduce) {
    .bud-stage { animation: none; }
}
@media (max-width: 700px) {
    .home-hero-illustration { padding: 20px; aspect-ratio: 5 / 4; }
    .bud-stage { width: 65%; }
}

/* ===== BAND DÉCORATIF · hash + bud cohabitent ===== */
.home-decor-band {
    padding: 80px 0;
    border-top: 1px solid rgba(245,241,232,.04);
    border-bottom: 1px solid rgba(245,241,232,.04);
    background:
        radial-gradient(ellipse at 80% 20%, rgba(184,255,58,.05), transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(255,107,53,.04), transparent 55%),
        var(--bg-elev);
}
.home-decor-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
}
.home-decor-text .section-title {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(38px, 5vw, 60px);
    line-height: .95;
    margin: 14px 0 22px;
}
.home-decor-text .section-title em { color: var(--acid); }
.home-decor-text p {
    color: var(--ink-dim);
    line-height: 1.7;
    font-size: 16px;
    max-width: 420px;
}
.home-decor-text strong { color: var(--ink); font-weight: 600; }

.home-decor-visuals {
    position: relative;
    min-height: 320px;
    display: flex; align-items: center; justify-content: center;
}
.home-decor-bud {
    position: absolute;
    top: -20px; left: 0;
    width: 280px; max-width: 50%;
    animation: budFloat 11s ease-in-out infinite;
    transform-origin: center;
}
.home-decor-bud svg { width: 100%; height: auto; }
.home-decor-hash {
    position: absolute;
    bottom: -10px; right: 0;
    width: 380px; max-width: 65%;
    animation: hashBob 7s ease-in-out infinite;
}
.home-decor-hash svg { width: 100%; height: auto; }
@keyframes hashBob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-8px) rotate(1deg); }
}

@media (max-width: 900px) {
    .home-decor-band { padding: 56px 0; }
    .home-decor-grid { grid-template-columns: 1fr; gap: 32px; }
    .home-decor-text { order: 1; }
    .home-decor-visuals { order: 2; min-height: 320px; }
    .home-decor-bud { position: absolute; top: 0; left: 10%; width: 200px; }
    .home-decor-hash { position: absolute; bottom: 10px; right: 5%; width: 280px; }
}
@media (max-width: 480px) {
    .home-decor-bud { width: 160px; left: 0; }
    .home-decor-hash { width: 220px; right: 0; }
    .home-decor-visuals { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-decor-bud, .home-decor-hash { animation: none; }
}

/* ---------- Account page ---------- */
.account-page { padding: 60px 32px 120px; }
.account-stats { margin-bottom: 40px; }
.account-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
}
@media (max-width: 1024px) { .account-grid { grid-template-columns: 1fr; } }

/* ---------- Legal docs ---------- */
.legal-doc {
    max-width: 760px;
    padding: 40px 24px 100px;
    color: var(--ink-dim);
    line-height: 1.8;
}
.legal-doc h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 24px;
    color: var(--ink);
    margin: 32px 0 12px;
}
.legal-doc ul { padding-left: 22px; }
.legal-doc a { color: var(--acid); }

/* Mobile: cookie banner stack */
@media (max-width: 600px) {
    .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-banner .cookie-actions { justify-content: center; }
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-recap { position: static; }
}