/* ================================================================
   MOTRO FRANCE — boutique-jour.css
   Boutique en MODE JOUR par défaut (2026-10-08), chargée APRÈS
   style.css par boutique.html uniquement. Fond #f8fafc, cartes
   blanches à ombre légère, texte #0f172a ; boutons d'action jaunes
   (#ffcc00) inchangés, typographie de l'accueil.
   Le header suit seul : boutique.html n'a plus `header--dark` ni de
   section `data-theme="dark"` en tête (header-theme.js).
   Palette (Tailwind slate) : 50 #f8fafc · 100 #f1f5f9 · 200 #e2e8f0 ·
   300 #cbd5e1 · 400 #94a3b8 · 500 #64748b · 600 #475569 · 700 #334155 ·
   900 #0f172a.
   ================================================================ */

/* ── En-tête de page ── */
.boutique-page-hero {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.boutique-page-hero::before {
    background: radial-gradient(circle at 50% 50%, rgba(255, 204, 0, 0.10) 0%, rgba(255, 204, 0, 0.03) 45%, transparent 70%);
}
.boutique-kicker      { color: #a37f00; }          /* jaune assombri : 4,6:1 sur #f8fafc */
.boutique-titre       { color: #0f172a; }
.boutique-sous-titre  { color: #475569; }

/* ── Barre d'outils collante (recherche, filtres) ── */
.boutique-toolbar {
    background: rgba(248, 250, 252, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
}
.boutique-search-icon { color: #94a3b8; }
.boutique-search-input {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.boutique-search-input:focus {
    border-color: #ffcc00;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.22);
}
.boutique-search-input::placeholder { color: #94a3b8; }
.boutique-search-hint { color: #94a3b8; }

.filtre-select {
    background-color: #ffffff;
    /* Chevron recoloré (slate-500) : l'original était blanc à 40 %. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolyline points='1 1 5 5 9 1' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border: 1px solid #e2e8f0;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.filtre-select:focus  { border-color: #ffcc00; box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.22); }
.filtre-select option { background: #ffffff; color: #0f172a; }
.filtre-reset-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
}
.filtre-reset-btn:hover { border-color: #cbd5e1; color: #0f172a; }
.boutique-count { color: #64748b; }

/* ── Catalogue ── */
.section-boutique { background: #f8fafc; }
.boutique-loading { color: #64748b; }
.boutique-spinner { border-color: rgba(15, 23, 42, 0.12); border-top-color: #ffcc00; }
.boutique-vide    { color: #64748b; }
.boutique-vide-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
}
.boutique-vide-btn:hover { border-color: #cbd5e1; color: #0f172a; }
.vide-plaque-badge  { background: #ffffff; border: 1px solid #e2e8f0; }
.vide-plaque-num    { color: #0f172a; }
.vide-plaque-format { color: #0f172a; background: rgba(255, 204, 0, 0.22); border: 1px solid rgba(255, 204, 0, 0.45); }

/* ── Cartes moteur : blanches, ombre légère, relief au survol ── */
.moteur-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
}
.moteur-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 40px rgba(15, 23, 42, 0.12);
}
.moteur-card-image { background: #f1f5f9; }
.moteur-code {
    color: #0f172a;
    background: rgba(255, 204, 0, 0.22);
    border: 1px solid rgba(255, 204, 0, 0.45);
}
.moteur-titre     { color: #0f172a; }
.moteur-titre-lien:hover .moteur-titre { color: #334155; }
.moteur-cylindree { color: #64748b; }
.moteur-specs {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.moteur-spec       { border-right: 1px solid #e2e8f0; }
.moteur-spec:last-child { border-right: none; }
.moteur-spec svg   { color: #94a3b8; }
.moteur-spec-val   { color: #0f172a; }
.moteur-spec-lib   { color: #64748b; }
.moteur-spec-garantie .moteur-spec-val { color: #a37f00; }
.moteur-prix        { color: #0f172a; }
.moteur-prix-detail { color: #64748b; }
/* .btn-devis : jaune #ffcc00 conservé (style.css). */

/* Badges posés sur la photo : pastille claire pour rester lisibles sur toute image. */
.moteur-badge,
.moteur-carburant-badge {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.badge-occasion      { background: rgba(255, 255, 255, 0.88); color: #15803d; border: 1px solid rgba(21, 128, 61, 0.25); }
.badge-reconditionne { background: rgba(255, 255, 255, 0.88); color: #1d4ed8; border: 1px solid rgba(29, 78, 216, 0.25); }
.carburant-diesel    { background: rgba(255, 255, 255, 0.88); color: #0369a1; border: 1px solid rgba(3, 105, 161, 0.25); }
.carburant-essence   { background: rgba(255, 255, 255, 0.88); color: #c2410c; border: 1px solid rgba(194, 65, 12, 0.25); }
.carburant-hybride   { background: rgba(255, 255, 255, 0.88); color: #15803d; border: 1px solid rgba(21, 128, 61, 0.25); }

/* ── Squelettes de chargement ── */
.moteur-skeleton { background: #ffffff; border: 1px solid #e2e8f0; }
.skeleton-block {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
}

/* ── Index du catalogue (bas de page) ── */
.catalogue-index { border-top-color: #e2e8f0; }
.catalogue-index-titre      { color: #0f172a; }
.catalogue-index-sous-titre { color: #64748b; }
.catalogue-index-marques a,
.catalogue-index-moteurs a  { color: #334155; }
.catalogue-index-marques a:hover,
.catalogue-index-moteurs a:hover,
.catalogue-index-marques a:focus-visible,
.catalogue-index-moteurs a:focus-visible { color: #0f172a; border-bottom-color: #ffcc00; }
.catalogue-index-compte     { color: #94a3b8; }