/* =====================================================================
   METAL-PLUS BOUTIQUE — STYLE INDUSTRIEL PREMIUM
   Couleurs : noir #111827 / orange métal #0ea5e9 / gris acier
   ===================================================================== */

.mp-boutique{
    padding:40px 12px;
    font-family:Arial, Helvetica, sans-serif;
    color:#111827;
}

/* ---- HERO ---- */
.mp-hero{
    text-align:center;
    background:linear-gradient(135deg,#0c4a6e 0%,#0369a1 100%);
    color:#fff;
    padding:50px 20px;
    border-radius:28px;
    margin-bottom:30px;
}
.mp-boutique .mp-hero span{
    color:#0ea5e9 !important;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:14px;
}
.mp-boutique .mp-hero h2{
    font-size:42px;
    margin:12px 0;
    color:#fff !important;
}
.mp-boutique .mp-hero p{
    font-size:17px;
    color:#d1d5db !important;
    margin:0;
}

/* ---- RECHERCHE ---- */
#mp-recherche{
    width:100%;
    max-width:520px;
    display:block;
    margin:0 auto 30px auto;
    padding:15px 20px;
    border-radius:18px;
    border:2px solid #0ea5e9;
    font-size:16px;
    outline:none;
}

/* ---- FILTRES CATÉGORIES ---- */
.mp-menu-categories{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-bottom:30px;
}
.mp-filtre-categorie{
    border:none;
    padding:12px 20px;
    border-radius:50px;
    background:#111827;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    transition:.25s ease;
}
.mp-filtre-categorie.actif,
.mp-filtre-categorie:hover{
    background:#0ea5e9;
}

/* ---- GRILLE PRODUITS ---- */
.mp-grille-produits{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}
.mp-produit{
    position:relative;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
    transition:.3s ease;
}
.mp-produit:hover{
    transform:translateY(-8px);
}
.mp-badge{
    position:absolute;
    top:15px;left:15px;z-index:3;
    background:#0ea5e9;color:#fff;
    padding:7px 12px;border-radius:40px;
    font-size:12px;font-weight:900;
}
.mp-favori{
    position:absolute;
    top:14px;right:14px;z-index:3;
    width:40px;height:40px;padding:0;
    border:none !important;background:transparent !important;box-shadow:none !important;
    color:#fff;font-size:28px;cursor:pointer;line-height:1;
    text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.mp-favori.actif{
    background:transparent !important;color:#ef4444;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.mp-image{
    height:260px;background:#f3f4f6;overflow:hidden;
}
.mp-image img{
    width:100%;height:100%;object-fit:cover;transition:.4s ease;
}
.mp-produit:hover .mp-image img{
    transform:scale(1.08);
}
.mp-info{padding:22px;}
.mp-info h3{font-size:21px;color:#111827 !important;margin:0 0 12px;}
.mp-prix{font-size:25px;font-weight:900;color:#0ea5e9;margin-bottom:10px;}
.mp-prix span{
    font-size:15px;color:#9ca3af;text-decoration:line-through;margin-right:8px;
}
.mp-stock{
    display:inline-block;background:#ecfdf5;color:#047857;
    padding:7px 12px;border-radius:30px;font-size:13px;font-weight:800;margin-bottom:16px;
}
/* --- Option 3 : boutons côte à côte --- */
.mp-actions-carte{
    display:flex;gap:10px;margin-top:12px;
}
.mp-detail,.mp-ajout-devis{
    padding:11px 10px;border:1.5px solid transparent;border-radius:14px;
    font-size:13px;font-weight:900;cursor:pointer;transition:.2s ease;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    line-height:1.15;text-align:center;
}
.mp-detail{flex:0 0 auto;white-space:nowrap;}   /* "Voir" compact */
.mp-ajout-devis{flex:1;}                          /* "Ajouter au devis" prend le reste */
.mp-ic{font-size:15px;flex:0 0 auto;}
/* "Voir" : contour bleu foncé */
.mp-detail{background:#fff !important;color:#0c4a6e !important;border-color:#0c4a6e !important;}
.mp-detail:hover{background:#0c4a6e !important;color:#fff !important;}
/* "Devis" : plein bleu */
.mp-ajout-devis{background:#0ea5e9 !important;color:#fff !important;border-color:#0ea5e9 !important;}
.mp-ajout-devis:hover{background:#0284c7 !important;border-color:#0284c7 !important;}

/* ---- BOUTON FLOTTANT DEVIS ---- */
#mp-compteur-panier{
    position:fixed;right:20px;bottom:20px;z-index:9999;
    background:#111827;color:#fff;border:none;
    padding:14px 22px;border-radius:50px;font-weight:900;font-size:15px;cursor:pointer;
    box-shadow:0 12px 35px rgba(0,0,0,.28);
    display:flex;align-items:center;gap:8px;
}
#mp-compteur-panier span{
    background:#0ea5e9;padding:2px 10px;border-radius:50px;min-width:24px;text-align:center;
}

/* ---- PANNEAU PANIER DE DEVIS ---- */
.mp-panier-overlay{
    display:none;position:fixed;inset:0;z-index:2147482000;
    background:rgba(0,0,0,.55);
}
.mp-panier-overlay.actif{display:block;}
.mp-panier-panel{
    position:fixed;top:0;right:-460px;z-index:2147482001;
    width:420px;max-width:90vw;height:100%;
    background:#fff;box-shadow:-12px 0 45px rgba(0,0,0,.25);
    padding:25px;overflow-y:auto;transition:right .35s ease;
}
.mp-panier-panel.actif{right:0;}
.mp-panier-entete{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
}
.mp-panier-entete h3{margin:0;font-size:22px;color:#111827;}
.mp-panier-fermer{
    border:none;background:#ef4444;color:#fff;width:40px;height:40px;border-radius:50%;
    font-size:26px;cursor:pointer;line-height:1;
}
.mp-panier-liste{margin-bottom:20px;}
.mp-panier-item{
    display:flex;justify-content:space-between;align-items:center;
    background:#f9fafb;border:1px solid #eee;border-radius:12px;
    padding:12px 14px;margin-bottom:10px;font-weight:700;color:#111827;
}
.mp-panier-item button{
    border:none;background:#ef4444;color:#fff;border-radius:8px;
    padding:6px 10px;cursor:pointer;font-weight:800;
}
.mp-panier-vide{color:#6b7280;text-align:center;padding:20px 0;}
.mp-panier-form h4{margin:0 0 12px;color:#111827;}
.mp-panier-form input,
.mp-panier-form textarea{
    width:100%;padding:14px;border-radius:12px;border:1px solid #ddd;
    margin-bottom:12px;font-size:15px;box-sizing:border-box;
}
.mp-panier-form textarea{min-height:90px;}
.mp-panier-form button[type=submit]{
    width:100%;padding:15px;border:none;background:#0ea5e9;color:#fff;
    border-radius:14px;font-weight:900;cursor:pointer;font-size:16px;
}
.mp-panier-form button[type=submit]:hover{background:#0284c7;}

/* ---- MODALE PRODUIT ---- */
.mp-modale{
    display:none;position:fixed;inset:0;z-index:2147483000;
    background:rgba(0,0,0,.78);padding:25px;overflow:auto;
}
.mp-modale-contenu{
    background:#fff;max-width:1100px;margin:30px auto;
    border-radius:30px;padding:30px;position:relative;
}
.mp-fermer{
    position:absolute;top:16px;right:18px;width:44px;height:44px;border-radius:50%;
    border:none;background:#ef4444;color:#fff;font-size:28px;cursor:pointer;z-index:20;line-height:1;
}
.mp-modale-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;}
.mp-lightbox-image{position:relative;}
.mp-lightbox-image img{
    width:100%;height:480px;object-fit:cover;border-radius:24px;background:#f3f4f6;
}
/* Cœur favori dans la fiche (plus grand) */
.mp-favori-modale{
    top:18px;right:18px;width:auto;height:auto;
    font-size:44px !important;z-index:5;
}
.mp-mini-galerie{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.mp-mini-galerie img{
    width:75px;height:75px;object-fit:cover;border-radius:12px;cursor:pointer;
    border:3px solid transparent;
}
.mp-mini-galerie img:hover{border-color:#0ea5e9;}
.mp-video{
    display:none;width:100%;margin-top:16px;background:#0c4a6e;color:#fff;border:none;cursor:pointer;
    text-decoration:none;padding:14px 18px;border-radius:15px;font-weight:900;text-align:center;font-size:15px;
}
.mp-video:hover{background:#0369a1;}
.mp-video-zone:empty{display:none;}
.mp-video-zone{margin-top:16px;}
.mp-video-wrap{
    position:relative;width:100%;padding-top:56.25%;
    border-radius:18px;overflow:hidden;background:#000;
}
.mp-video-wrap iframe,
.mp-video-wrap video{
    position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}
.mp-video-fallback{
    display:inline-block;margin-top:8px;color:#0ea5e9;font-weight:800;text-decoration:underline;
}
.mp-modale h2{font-size:34px;color:#111827;margin:0 0 15px;}
.mp-prix-grand{font-size:34px;font-weight:900;color:#0ea5e9;margin-bottom:18px;}
.mp-description{font-size:16px;line-height:1.7;color:#374151;margin-bottom:20px;}
.mp-fiche{
    background:#f0f9ff;border:1px solid #bae6fd;padding:15px 18px;
    border-radius:16px;color:#075985;margin-bottom:20px;
}
.mp-fiche p{margin:8px 0;}
.mp-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;}
.mp-btn-whatsapp,.mp-btn-appel,.mp-btn-devis{
    display:flex;align-items:center;justify-content:center;min-height:52px;
    padding:14px 18px;border-radius:15px;text-decoration:none;font-weight:900;
    border:none;cursor:pointer;font-size:15px;
}
.mp-btn-whatsapp{background:#25D366;color:#fff;}
.mp-btn-appel{background:#111827;color:#fff;}
.mp-btn-devis{background:#0ea5e9;color:#fff;grid-column:1 / -1;}

/* ---- POPUP NOTIFICATION ---- */
.mp-popup{
    position:fixed;z-index:100002;right:20px;top:20px;
    background:#fff;border-left:6px solid #0ea5e9;
    padding:16px 20px;border-radius:16px;
    box-shadow:0 18px 45px rgba(0,0,0,.22);
    font-weight:800;color:#111827;max-width:320px;
    animation:mp-pop .3s ease;
}
@keyframes mp-pop{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}

/* ---- RESPONSIVE ---- */
@media(max-width:850px){
    .mp-modale-grid{grid-template-columns:1fr;}
    .mp-lightbox-image img{height:350px;}
}
@media(max-width:600px){
    .mp-hero h2{font-size:30px;}
    .mp-grille-produits{grid-template-columns:1fr 1fr;gap:14px;}
    .mp-image{height:160px;}
    .mp-info{padding:14px;}
    .mp-info h3{font-size:15px;}
    .mp-prix{font-size:18px;}
    .mp-detail,.mp-ajout-devis{padding:9px 4px;font-size:11px;gap:4px;}
    .mp-actions-carte{gap:6px;}
    .mp-ic{font-size:13px;}
    .mp-modale{padding:10px;}
    .mp-modale-contenu{padding:18px;border-radius:22px;}
    .mp-lightbox-image img{height:260px;}
    .mp-modale h2{font-size:24px;}
    .mp-prix-grand{font-size:26px;}
    .mp-actions{grid-template-columns:1fr;}
    .mp-btn-devis{grid-column:auto;}
}

/* =====================================================================
   AJOUTS v1.0.1 — Titre cliquable, bouton WhatsApp panier, page produit
   ===================================================================== */

/* Titre de carte cliquable */
.mp-titre-lien{color:#111827 !important;text-decoration:none;}
.mp-titre-lien:hover{color:#0ea5e9 !important;}

/* Bouton WhatsApp dans le panier de devis */
.mp-panier-whatsapp{
    width:100%;padding:15px;border:none;background:#25D366;color:#fff;
    border-radius:14px;font-weight:900;cursor:pointer;font-size:16px;margin-bottom:18px;
}
.mp-panier-whatsapp:hover{background:#1ebe57;}

/* ---- PAGE PRODUIT INDIVIDUELLE ---- */
.mp-single{
    max-width:1100px;margin:0 auto;padding:40px 16px;
    font-family:Arial, Helvetica, sans-serif;color:#111827;
}
.mp-retour{
    display:inline-block;margin-bottom:22px;text-decoration:none;
    font-weight:800;color:#111827;
}
.mp-retour:hover{color:#0ea5e9;}
.mp-single-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.mp-single-image{
    position:relative;border-radius:24px;overflow:hidden;background:#f3f4f6;
}
.mp-single-image img{width:100%;height:480px;object-fit:cover;display:block;}
.mp-single-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.mp-single-thumb{
    width:80px;height:80px;object-fit:cover;border-radius:12px;cursor:pointer;
    border:3px solid transparent;
}
.mp-single-thumb:hover{border-color:#0ea5e9;}
.mp-single-info h1{font-size:34px;color:#111827;margin:0 0 16px;}

@media(max-width:850px){
    .mp-single-grid{grid-template-columns:1fr;}
    .mp-single-image img{height:340px;}
}

/* =====================================================================
   AJOUTS v1.0.2 — Sélecteur de quantité dans le panier de devis
   ===================================================================== */
.mp-panier-item{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.mp-panier-nom{flex:1 1 100%;font-weight:800;color:#111827;}

.mp-qte{
    display:inline-flex;align-items:center;border:2px solid #0ea5e9;
    border-radius:12px;overflow:hidden;
}
.mp-qte button{
    width:38px;height:38px;border:none;background:#0ea5e9;color:#fff;
    font-size:20px;font-weight:900;cursor:pointer;line-height:1;
    display:flex;align-items:center;justify-content:center;
}
.mp-qte button:hover{background:#0284c7;}
.mp-qte-input{
    width:52px;height:38px;border:none;text-align:center;
    font-size:16px;font-weight:800;color:#111827;
    -moz-appearance:textfield;
}
.mp-qte-input::-webkit-outer-spin-button,
.mp-qte-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.mp-panier-retirer{
    border:none;background:#ef4444;color:#fff;border-radius:8px;
    padding:8px 12px;cursor:pointer;font-weight:800;margin-left:auto;
}
.mp-panier-retirer:hover{background:#dc2626;}

/* =====================================================================
   MÉGAMENU v1.0.3 — barre + panneaux déroulants (style industriel)
   ===================================================================== */
.mp-megamenu{
    font-family:Arial, Helvetica, sans-serif;
    background:#0c4a6e;
    position:relative;
    z-index:9000;
}
.mp-mm-bar{
    max-width:1200px;margin:0 auto;
    display:flex;align-items:center;gap:10px;
    padding:0 16px;
}
.mp-mm-logo{
    color:#0ea5e9;font-weight:900;font-size:22px;text-transform:uppercase;
    letter-spacing:1px;text-decoration:none;padding:10px 8px;white-space:nowrap;
    display:flex;align-items:center;
}
.mp-mm-logo img{height:46px;width:auto;display:block;}
.mp-hero-logo{
    max-height:90px;width:auto;margin:0 auto 14px;display:block;
    background:#fff;padding:8px 14px;border-radius:14px;
}
.mp-mm-burger{
    display:none;margin-left:auto;background:none;border:none;color:#fff;
    font-size:26px;cursor:pointer;padding:10px;
}
.mp-mm-items{
    list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px;flex:1;
}
.mp-mm-item{position:relative;display:flex;align-items:center;}
.mp-mm-item > a,
.mp-mm-trigger{
    background:none;border:none;cursor:pointer;
    color:#fff;font-weight:800;font-size:15px;text-decoration:none;
    padding:18px 16px;display:flex;align-items:center;gap:6px;
}
.mp-mm-item > a:hover,
.mp-mm-trigger:hover{color:#0ea5e9;}
.mp-mm-arrow{font-size:11px;transition:transform .2s ease;}
.mp-has-panel.open .mp-mm-arrow{transform:rotate(180deg);}

/* Panneau déroulant */
.mp-mm-panel{
    display:none;position:absolute;top:100%;left:0;
    background:#fff;color:#111827;
    border-radius:0 0 18px 18px;
    box-shadow:0 25px 50px rgba(0,0,0,.28);
    padding:22px;min-width:320px;
}
.mp-has-panel.open > .mp-mm-panel{display:block;}
@media (hover:hover) and (min-width:861px){
    .mp-has-panel:hover > .mp-mm-panel{display:block;}
}

/* Grille catégories (noms + images) */
.mp-mm-cats{
    display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:14px;width:560px;max-width:80vw;
}
.mp-mm-cat{
    display:flex;align-items:center;gap:10px;text-decoration:none;color:#111827;
    background:#f9fafb;border:1px solid #eee;border-radius:14px;padding:10px;font-weight:800;
    transition:.2s ease;
}
.mp-mm-cat:hover{background:#f0f9ff;border-color:#bae6fd;color:#0ea5e9;}
.mp-mm-cat-img{
    width:46px;height:46px;border-radius:10px;overflow:hidden;flex-shrink:0;
    background:#111827;display:flex;align-items:center;justify-content:center;
}
.mp-mm-cat-img img{width:100%;height:100%;object-fit:cover;}
.mp-mm-cat-ph{color:#0ea5e9;font-size:22px;}
.mp-mm-cat-nom{font-size:14px;line-height:1.2;}

/* Liste marques */
.mp-mm-marques{display:flex;flex-direction:column;gap:4px;min-width:220px;}
.mp-mm-marque{
    text-decoration:none;color:#111827;font-weight:800;padding:10px 12px;border-radius:10px;
}
.mp-mm-marque:hover{background:#f0f9ff;color:#0ea5e9;}

/* Produits récents */
.mp-mm-produits{
    display:grid;grid-template-columns:repeat(4,150px);gap:14px;max-width:80vw;
}
.mp-mm-prod{
    text-decoration:none;color:#111827;display:flex;flex-direction:column;gap:6px;
    background:#f9fafb;border:1px solid #eee;border-radius:14px;overflow:hidden;
    transition:.2s ease;
}
.mp-mm-prod:hover{transform:translateY(-4px);box-shadow:0 12px 25px rgba(0,0,0,.12);}
.mp-mm-prod img{width:100%;height:110px;object-fit:cover;}
.mp-mm-prod-nom{font-weight:800;font-size:13px;padding:0 10px;}
.mp-mm-prod-prix{color:#0ea5e9;font-weight:900;font-size:14px;padding:0 10px 12px;}

/* Contact */
.mp-mm-contact{margin-left:auto;gap:8px;padding:0 8px;}
.mp-mm-wa,.mp-mm-tel{
    text-decoration:none;font-weight:900;font-size:14px;padding:10px 16px;border-radius:12px;color:#fff;
}
.mp-mm-wa{background:#25D366;}
.mp-mm-tel{background:#0ea5e9;}

/* ---- MÉGAMENU MOBILE ---- */
@media(max-width:860px){
    .mp-mm-bar{flex-wrap:wrap;}
    .mp-mm-burger{display:block;}
    .mp-mm-items{
        flex-direction:column;align-items:stretch;width:100%;
        display:none;padding-bottom:10px;
    }
    .mp-mm-items.ouvert{display:flex;}
    .mp-mm-item{flex-direction:column;align-items:stretch;}
    .mp-mm-item > a,
    .mp-mm-trigger{width:100%;justify-content:space-between;padding:14px 12px;border-top:1px solid #1f2937;}
    .mp-mm-panel{
        position:static;box-shadow:none;border-radius:0;padding:12px;
        background:#f3f4f6;min-width:0;
    }
    .mp-mm-cats,
    .mp-mm-produits{grid-template-columns:1fr 1fr;width:auto;max-width:none;}
    .mp-mm-contact{margin:10px 12px 0;}
}

/* =====================================================================
   v1.0.4 — Prix en direct + remises quantité dans le panier
   ===================================================================== */
.mp-ligne-prix{
    flex:1 1 100%;display:flex;flex-direction:column;gap:2px;margin-top:4px;
}
.mp-ligne-total{font-weight:900;color:#111827;font-size:16px;}
.mp-ligne-unit{color:#6b7280;font-size:12px;font-weight:700;}
.mp-ligne-remise{color:#047857;font-size:12px;font-weight:800;}

.mp-panier-totaux{
    border-top:2px dashed #e5e7eb;margin-top:8px;padding-top:14px;margin-bottom:14px;
}
.mp-total-ligne{
    display:flex;justify-content:space-between;align-items:center;
    font-size:18px;color:#111827;
}
.mp-total-ligne strong{color:#0ea5e9;font-size:22px;}
.mp-total-economie{
    margin-top:6px;background:#ecfdf5;color:#047857;font-weight:900;
    padding:8px 12px;border-radius:10px;text-align:center;font-size:14px;
}
.mp-total-note{color:#9ca3af;font-size:11px;margin-top:8px;text-align:center;}

/* Encart « remises quantité » (panier / modale / page produit) */
.mp-remises-info{
    background:#f0f9ff;border:1px solid #bae6fd;color:#075985;
    padding:10px 14px;border-radius:12px;font-weight:800;font-size:13px;
    margin:0 0 16px;
}
.mp-remises-info:empty{display:none;}

/* Masquer l'encadré (hero) — logo et menu déjà présents en en-tête du site */
.mp-hero{ display:none !important; }