/* ============================================================
   SHOP.CSS — demo-ecommerce « Le Shop Koaee » (LOT 3 → 3bis, 2026-06-11)
   Couche e-commerce AU-DESSUS de base.css + themes/blue.css + ecom-i18n.css.
   LOT 3bis (corrections L9 Erwan) :
     A1 système de boutons = STYLE HÔTEL (rempli) décliné bleu — re-override
        du fix8 base.css (ghost orange hardcodé, fuite resto) ;
     A2 heros custom (.shop-hero/.shop-page-hero) SUPPRIMÉS → en-hero-split ;
     A4 tuiles catégories avec IMAGES + crédits ;
     A6 loaders gracieux (skeleton thémé + spinner discret).
   Couleurs : uniquement vars du thème (fix7) + #004b99/#003a75 actés Erwan.
   ============================================================ */

/* =========================================================================
   A1 — SYSTÈME DE BOUTONS BLEU (référence = pilote hôtel emerald-noir :
   primaire REMPLI --en-mint/texte action, hover brightness+lift ; décliné
   #004b99 / hover #003a75, blanc 8.51:1 AA — arbitrage Erwan verbatim).
   Re-override du fix8 base.css (!important vs !important : shop.css chargé
   APRÈS → le dernier gagne, AP-009 maîtrisé). L'orange disparaît du Shop.
   ========================================================================= */
.en-btn-primary, .en-nav-cta--order, .en-btn-direct {
    background: var(--accent-surface) !important;       /* #004b99 les 2 thèmes (L3) */
    border: 1px solid var(--accent-surface) !important;
    color: var(--text-on-surface) !important;           /* blanc, 8.51 AA */
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background-color .25s ease, transform .2s ease !important;
}
.en-btn-primary:hover, .en-btn-primary:focus-visible,
.en-nav-cta--order:hover, .en-nav-cta--order:focus-visible,
.en-btn-direct:hover, .en-btn-direct:focus-visible {
    background: var(--accent-surface) !important;       /* LOT RECETTE-FIX 2026-06-13 : hover token-based (ex #003a75 blue hardcodé parasite, clonage) */
    border-color: var(--accent-surface) !important;
    color: var(--text-on-surface) !important;
    filter: brightness(.9) !important;                  /* feedback hover, thème-portable */
    transform: translateY(-2px) !important;
}
/* Pendants DARK : fix8 base.css pose [data-theme="dark"]{color:#FF6B35!important}
   (spécificité 0,2,0 > 0,1,0 — mesuré R32) → même spécificité requise. */
[data-theme="dark"] .en-btn-primary, [data-theme="dark"] .en-nav-cta--order, [data-theme="dark"] .en-btn-direct {
    background: var(--accent-on-dark) !important;       /* LOT RECETTE-FIX 2026-06-13 : Option 1 — fond clair token (composant ≥7:1 /page) */
    border-color: var(--accent-on-dark) !important;
    color: #1a1a1a !important;                          /* label sombre sur fond clair (≥4.5:1) */
}
[data-theme="dark"] .en-btn-primary:hover, [data-theme="dark"] .en-btn-primary:focus-visible,
[data-theme="dark"] .en-nav-cta--order:hover, [data-theme="dark"] .en-nav-cta--order:focus-visible,
[data-theme="dark"] .en-btn-direct:hover, [data-theme="dark"] .en-btn-direct:focus-visible {
    background: var(--accent-on-dark) !important;
    border-color: var(--accent-on-dark) !important;
    color: #1a1a1a !important;
    filter: brightness(1.1) !important;
}
[data-theme="dark"] .en-btn-ghost { color: var(--text) !important; }
[data-theme="dark"] .en-btn-ghost:hover, [data-theme="dark"] .en-btn-ghost:focus-visible { color: var(--text) !important; }
[data-theme="dark"] .en-filter-btn { color: var(--text-muted) !important; }
[data-theme="dark"] .en-philosophy-cta { color: var(--text) !important; }
[data-theme="dark"] .en-philosophy-cta:hover { color: var(--text) !important; }

/* Ghost = pattern hôtel : transparent, texte neutre, bordure discrète, hover surface */
.en-btn-ghost {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.en-btn-ghost:hover, .en-btn-ghost:focus-visible {
    background: var(--surface-2) !important;
    border-color: var(--text-faint) !important;
    color: var(--text) !important;
}
/* Filtres catalogue : neutres au repos, REMPLIS bleu à l'actif/hover (langage primaire) */
.en-filter-btn {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    text-transform: none !important;
}
.en-filter-btn:hover, .en-filter-btn.active,
[data-theme="dark"] .en-filter-btn:hover, [data-theme="dark"] .en-filter-btn.active {
    background: var(--accent-surface) !important;
    border-color: var(--accent-surface) !important;
    color: var(--text-on-surface) !important;
}
/* Lien philosophie : texte neutre souligné bleu (pas un bouton) */
.en-philosophy-cta {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    border-bottom: 2px solid var(--accent-surface) !important;
    border-radius: 0 !important;
    padding: 0 0 .35rem 0 !important;
}
.en-philosophy-cta:hover, .en-philosophy-cta:focus-visible {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom-color: var(--accent-surface) !important;  /* LOT RECETTE-FIX 2026-06-13 : token (ex #003a75 blue hardcodé) */
    transform: none !important;
}
/* Tri : neutre + bordure bleue, chevron neutre (plus d'orange fix9) */
.en-sort-select, select.en-sort-select, [data-theme="dark"] .en-sort-select, [data-theme="dark"] select.en-sort-select {
    color: var(--text) !important;
    border: 1px solid var(--accent-surface) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
/* Eyebrow du hero split : pâle bleu lisible sur les 2 fonds (base.css hardcode mint #6ee7b7) */
.en-hero-split-content .en-hero-eyebrow { color: var(--text-faint); letter-spacing: .25em; }

/* =========================================================================
   A6 — LOADERS GRACIEUX (socle Shop ; portage pilotes = #LOADERS-pilotes)
   Skeleton shimmer thémé derrière toute image (visible pendant le lazy-load,
   recouvert par l'image chargée). Spinner discret pour les fetchs (panier).
   ========================================================================= */
@keyframes shop-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.en-card-img-wrap, .shop-product-img-wrap, .en-hero-split-image, .shop-cat-img, .en-philosophy-img-wrap {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 800px 100%;
    animation: shop-shimmer 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .en-card-img-wrap, .shop-product-img-wrap, .en-hero-split-image, .shop-cat-img, .en-philosophy-img-wrap { animation: none; }
}
.shop-spinner {
    width: 2rem; height: 2rem; margin: 3rem auto; border-radius: 50%;
    border: 3px solid var(--surface-3); border-top-color: var(--accent-surface);
    animation: shop-spin .8s linear infinite;
}
@keyframes shop-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   A4 — Tuiles catégories AVEC IMAGES (photo produit représentatif + crédit,
   hover pattern hôtel bento : lift + zoom doux image)
   ========================================================================= */
.shop-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.5rem; padding:0 3rem 4rem; }
.shop-cat-tile { display:flex; flex-direction:column; background:var(--surface-1); border:1px solid var(--border); border-radius:.25rem; overflow:hidden; color:var(--text); transition:transform .3s, border-color .3s, box-shadow .3s; }
.shop-cat-tile:hover, .shop-cat-tile:focus-within { transform:translateY(-6px); border-color:var(--accent-surface); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.shop-cat-img { position:relative; display:block; height:150px; overflow:hidden; }
.shop-cat-img-link { display:block; height:100%; }
.shop-cat-img-link:focus-visible { outline:2px solid var(--accent-strong); outline-offset:-2px; }
.shop-cat-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.shop-cat-tile:hover .shop-cat-img img { transform:scale(1.05); }
/* Crédit tuile : badge visible (HORS du <a> image — AP-001), au-dessus du zoom hover */
.shop-cat-img .image-credit { font-size:.62rem; z-index:3; max-width:95%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop-cat-body { display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.25rem 1.25rem; text-decoration:none; color:inherit; }
.shop-cat-body:focus-visible { outline:2px solid var(--accent-strong); outline-offset:-2px; }
.shop-cat-name { font-family:var(--font-serif); font-size:1.1rem; }
.shop-cat-count { font-size:.85rem; color:var(--text-faint); }
@media (max-width:480px) { .shop-cats { padding:0 1.25rem 3rem; } }

/* --- Cards produit (complète en-card de base.css) --- */
.shop-price-row { display:flex; align-items:baseline; gap:.6rem; }
.shop-price-old { font-size:.9rem; color:var(--text-faint); text-decoration:line-through; }
.shop-badge { position:absolute; top:.75rem; left:.75rem; z-index:4; background:var(--accent-surface); color:var(--text-on-surface); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .6rem; border-radius:.2rem; white-space:nowrap; }
.shop-stock-low { font-size:.8rem; color:var(--error); }
.shop-stock-ok { font-size:.8rem; color:var(--text-faint); }

/* --- Page produit (réservation nav fixed : padding-top calc — Sprint #65 BLOC B) --- */
.shop-product { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:3rem; padding:3rem; padding-top:calc(var(--banner-height, 48px) + var(--nav-height, 84px) + 3rem); max-width:80rem; margin:0 auto; }
.shop-product-img-wrap { position:relative; border-radius:.25rem; overflow:hidden; }
.shop-product-img-wrap img { display:block; width:100%; height:auto; }
.shop-product-eyebrow { font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.shop-product-title { font-family:var(--font-serif); font-size:clamp(1.6rem,3.5vw,2.4rem); margin:.5rem 0 1rem; }
.shop-product-price { font-size:1.6rem; font-weight:700; }
.shop-product-desc { line-height:1.8; color:var(--text-muted); margin:1.25rem 0; }
.shop-specs { margin:1.5rem 0; border-top:1px solid var(--border); }
.shop-specs-row { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--border); font-size:.92rem; }
.shop-specs-key { color:var(--text-faint); }
.shop-reassure { display:flex; flex-direction:column; gap:.5rem; margin:1.5rem 0; padding:1.25rem; background:var(--surface-1); border:1px solid var(--border); border-radius:.25rem; font-size:.9rem; }
.shop-reassure-item { display:flex; align-items:center; gap:.6rem; }
.shop-reassure-item .material-symbols-outlined { font-size:1.2rem; color:var(--accent-surface); }
@media (max-width:900px) { .shop-product { grid-template-columns:1fr; padding:2rem 1.25rem; padding-top:calc(var(--banner-height, 48px) + var(--nav-height, 84px) + 2rem); } }

/* --- Quantité + boutons panier --- */
.shop-qty { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:.25rem; overflow:hidden; }
.shop-qty button { width:2.6rem; height:2.6rem; background:var(--surface-2); border:none; color:var(--text); font-size:1.1rem; cursor:pointer; }
.shop-qty button:hover { background:var(--surface-hover); }
.shop-qty input { width:3.2rem; height:2.6rem; text-align:center; border:none; background:var(--bg); color:var(--text); font-size:1rem; }
.shop-add-row { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1rem; }

/* --- Panier --- */
.shop-cart { max-width:64rem; margin:0 auto; padding:3rem; padding-top:calc(var(--banner-height, 48px) + var(--nav-height, 84px) + 3rem); }
.shop-cart-item { display:grid; grid-template-columns:90px 1fr auto; gap:1.25rem; align-items:center; padding:1.25rem 0; border-bottom:1px solid var(--border); }
.shop-cart-item img { width:90px; height:68px; object-fit:cover; border-radius:.2rem; }
.shop-cart-item-name { font-weight:600; }
.shop-cart-item-meta { display:flex; gap:1rem; align-items:center; margin-top:.4rem; flex-wrap:wrap; }
.shop-cart-remove { background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:.85rem; text-decoration:underline; }
.shop-cart-remove:hover { color:var(--error); }
.shop-cart-totals { margin-top:2rem; padding:1.5rem; background:var(--surface-1); border:1px solid var(--border); border-radius:.25rem; max-width:24rem; margin-left:auto; }
.shop-cart-totals-row { display:flex; justify-content:space-between; padding:.4rem 0; font-size:.95rem; }
.shop-cart-totals-row.total { font-weight:700; font-size:1.15rem; border-top:1px solid var(--border); margin-top:.5rem; padding-top:.9rem; }
.shop-cart-empty { text-align:center; padding:4rem 1rem; color:var(--text-muted); }
@media (max-width:600px) { .shop-cart { padding:2rem 1.25rem; padding-top:calc(var(--banner-height, 48px) + var(--nav-height, 84px) + 2rem); } .shop-cart-item { grid-template-columns:70px 1fr; } .shop-cart-item > :last-child { grid-column:2; } }

/* --- Pages éditoriales : prose + cartes faits (les heros = en-hero-split du socle) --- */
.shop-prose { max-width:46rem; margin:0 auto; padding:4rem 1.5rem; line-height:1.85; }
.shop-prose h2 { font-family:var(--font-serif); font-size:1.5rem; margin:2.5rem 0 1rem; }
.shop-prose p { color:var(--text-muted); margin:0 0 1.25rem; }
.shop-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem; max-width:64rem; margin:0 auto; padding:0 1.5rem 4rem; }
.shop-fact { padding:1.5rem; background:var(--surface-1); border:1px solid var(--border); border-radius:.25rem; }
.shop-fact .material-symbols-outlined { font-size:1.8rem; color:var(--accent-surface); margin-bottom:.6rem; }
.shop-fact-title { font-weight:700; margin-bottom:.4rem; }
.shop-fact-text { font-size:.92rem; color:var(--text-muted); line-height:1.65; }

/* --- Terminus démo + trace compte client simulée --- */
.shop-terminus { max-width:42rem; margin:0 auto; padding:4rem 1.5rem; padding-top:calc(var(--banner-height, 48px) + var(--nav-height, 84px) + 4rem); text-align:center; }
.shop-terminus-icon { width:4.5rem; height:4.5rem; margin:0 auto 1.5rem; border-radius:50%; background:var(--accent-surface); color:var(--text-on-surface); display:flex; align-items:center; justify-content:center; }
.shop-terminus-icon .material-symbols-outlined { font-size:2.2rem; }
.shop-account-trace { margin-top:2.5rem; padding:1.5rem; text-align:left; background:var(--surface-1); border:1px dashed var(--border); border-radius:.25rem; font-size:.92rem; }
.shop-account-trace-title { font-weight:700; display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.shop-account-trace-row { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; color:var(--text-muted); }

/* --- Nav : lien panier avec compteur --- */
.shop-nav-cart { position:relative; display:inline-flex; align-items:center; color:var(--nav-link); text-decoration:none; padding:.4rem; border-radius:.25rem; }
.shop-nav-cart:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
.shop-nav-cart .material-symbols-outlined { font-size:1.5rem; }
.shop-nav-cart-count { position:absolute; top:-2px; right:-4px; min-width:1.1rem; height:1.1rem; border-radius:.55rem; background:var(--accent-surface); color:var(--text-on-surface); font-size:.68rem; display:flex; align-items:center; justify-content:center; padding:0 .25rem; }

/* Brand mobile court : règles dans ecom-i18n.css (clone resto, source unique — pas de doublon). */

/* Brand « LE SHOP KOAEE » sur UNE ligne (mesuré R32 : 234px contraints → wrap sans nowrap). */
.en-nav-logo { white-space:nowrap; }

/* =========================================================================
   FIX #BANNIERE (3quater bis, scope ecommerce — portage socle = #PORTAGE-pilotes)
   Diagnostic R32 : .en-section catalogue pt=64px figé vs stack fixe 146px mobile
   (eyebrow 100% masqué, h1 tronqué 52px) ; .en-nav top hardcodé 48/70px en SHARED.
   a) La nav suit la hauteur RÉELLE de la bannière (--banner-height pilotée runtime
      par le JS du header — shop.css chargé après base.css : gagne la cascade).
   b) Toute page ouvrant sur .en-section réserve le stack fixe (catalogue…).
   c) ≤480px : bannière COMPACTE une ligne (texte court ×16, clé _header/banner.compact).
   ========================================================================= */
.en-nav { top: var(--banner-height, 48px); }
/* FIX FILTRE (2026-06-12) — hidden neutralisé par .en-card-wrap{display:flex} (base.css:130) :
   règle du contrat composant filtres, portée localement (fallback no-JS / pré-script). */
[data-koaee-filter-grid] [data-cat][hidden] { display: none !important; }
main > .en-section:first-child {
    padding-top: calc(var(--banner-height, 48px) + var(--nav-height, 84px) + 2.5rem);
}
@media (max-width: 768px) {
    main > .en-section:first-child {
        padding-top: calc(var(--banner-height, 70px) + var(--nav-height, 76px) + 1.5rem);
    }
}
.en-demo-banner-compact { display: none; }
@media (max-width: 480px) {
    .en-demo-banner-title, .en-demo-banner-divider, .en-demo-banner-subtitle { display: none; }
    .en-demo-banner-compact {
        display: block;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(234, 229, 216, .9);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .en-demo-banner { min-height: 0; padding: 9px 10px; }
}