/* ============================================================
   Product.ma — refonte visuelle (surcouche, le thème n'est pas modifié)
   ============================================================ */

/* ---------- 1. ORDRE DE LA PAGE ---------- */
body.home{display:flex;flex-direction:column}
body.home > .topbar{order:1}
body.home > .hero{order:2}
body.home > #pmar-steps{order:3}
body.home > #catalogue{order:4}
body.home > section.section:not([id]){order:5}
body.home > #telegram{order:6}
body.home > #pma-share{order:7}
body.home > .site-footer{order:8}
/* les 7 grandes cartes de catégories font doublon avec les filtres : fusionnées */
body.home > #categories{display:none}
#catalogue .filters{display:none}

/* ---------- 2. EN-TÊTE ---------- */
.pmar-burger{
  display:none;width:38px;height:38px;flex:0 0 auto;
  align-items:center;justify-content:center;
  border:1.5px solid #e2e8f0;background:#fff;border-radius:10px;
  font-size:17px;line-height:1;cursor:pointer;color:#0F4C81;font-family:inherit;
}
.pmar-burger:hover{border-color:#0F4C81}
@media(max-width:900px){
  .pmar-burger{display:inline-flex}
  .topbar .wrap{gap:8px}
  .topbar .nav{gap:8px}
  body.pmar-menu .topbar .nav{
    position:absolute;top:100%;inset-inline-start:0;width:100%;
    background:#fff;flex-direction:column;align-items:stretch;
    padding:6px 20px 14px;border-top:1px solid #eef2f7;
    box-shadow:0 10px 24px rgba(15,76,129,.13);
  }
  body.pmar-menu .topbar .nav .navlink{
    display:block;padding:12px 2px;border-bottom:1px solid #f1f5f9;font-size:15.5px;
  }
}
@media(max-width:900px){
  /* le bouton orange de l'en-tête déborde sur petit écran (texte long en arabe) ;
     l'appel à l'action reste présent dans la bannière orange du catalogue. */
  .topbar .nav .btn-orange{display:none}
  .topbar .user-pill{font-size:12px;padding:6px 10px;max-width:46vw;overflow:hidden}
  .topbar .wrap{height:auto;min-height:66px;padding-top:8px;padding-bottom:8px}
}
/* dans le panneau du burger, le bouton orange réapparaît en pleine largeur */
@media(max-width:900px){
  body.pmar-menu .topbar .nav .btn-orange{
    display:flex;justify-content:center;width:100%;margin-top:10px;
    padding:11px 14px;font-size:14px;white-space:normal;text-align:center;
  }
}

/* ---------- 3. HERO PLUS COURT, RECHERCHE DEDANS ---------- */
.hero{padding:46px 0 50px}
.hero h1{font-size:36px;margin-bottom:12px}
.hero p{font-size:16.5px;margin-bottom:20px;max-width:46ch}
.hero .ctas{margin-bottom:18px}
.hero .btn{font-size:15px;padding:12px 20px}
.hero .chips{margin-top:16px}
.hero .wrap > div:first-child > .pmai-search{max-width:100%;margin:0 0 10px}
.hero .wrap > div:first-child > .pmai-status{margin:0 0 4px;text-align:start;min-height:0}
@media(max-width:560px){
  .hero .ctas{gap:10px}
  .hero .ctas .btn{flex:1 1 100%;justify-content:center}
}
@media(max-width:820px){
  .hero{padding:28px 0 32px}
  .hero h1{font-size:26px}
  .hero p{font-size:15px;margin-bottom:16px}
}

/* la barre de recherche, posée sur le bleu du hero */
.hero .pmai-search input[type=search]{border-color:transparent}
.hero .pmai-search{background:rgba(255,255,255,.1);border-radius:999px;padding:0}
.hero .pmai-cam{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff}
.hero .pmai-cam:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hero .pmai-status{color:#dbeafe}
.hero .pmai-status b{color:#fff}

/* ---------- 4. COMMENT ÇA MARCHE ---------- */
#pmar-steps{background:#fff;border-bottom:1px solid #e8edf3;padding:20px 0}
.pmar-steps{display:grid;gap:14px}
@media(min-width:760px){.pmar-steps{grid-template-columns:repeat(3,1fr);gap:26px}}
.pmar-step{display:flex;gap:12px;align-items:flex-start}
.pmar-step .no{
  flex:0 0 auto;width:27px;height:27px;border-radius:50%;
  background:#0F4C81;color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.pmar-step b{display:block;font-size:14.5px;font-weight:800;color:#0B1F33;margin-bottom:2px}
.pmar-step small{display:block;font-size:13px;color:#64748b;line-height:1.55}

/* ---------- 5. BANDE CATÉGORIES + BARRE D'OUTILS ---------- */
.pmar-cats{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:7px;margin-bottom:16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.pmar-cat{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1.5px solid #e2e8f0;border-radius:11px;padding:9px 14px;
  font-size:13.5px;font-weight:700;white-space:nowrap;color:#1e293b;font-family:inherit;
}
.pmar-cat:hover{border-color:#bfd4e6}
.pmar-cat.on{border-color:#0F4C81;background:#eff6ff;color:#0F4C81}
.pmar-cat i{font-style:normal;font-size:16px;line-height:1}
.pmar-cat u{text-decoration:none;color:#94a3b8;font-size:12px;font-weight:700}
.pmar-cat.on u{color:#5b8db8}
@media(min-width:900px){.pmar-cats{flex-wrap:wrap;overflow:visible;padding-bottom:0}}

.pmar-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pmar-count{font-size:13px;color:#64748b;font-weight:700}
.pmar-sort{
  margin-inline-start:auto;border:1.5px solid #e2e8f0;background:#fff;border-radius:10px;
  padding:8px 12px;font-size:13px;font-family:inherit;font-weight:700;color:#1e293b;cursor:pointer;
}
.pmar-sort:focus{outline:none;border-color:#0F4C81}
.pmar-more{
  display:block;margin:26px auto 0;background:#fff;border:1.5px solid #0F4C81;color:#0F4C81;
  border-radius:11px;padding:12px 28px;font-size:14.5px;font-weight:800;
  font-family:inherit;cursor:pointer;transition:.15s;
}
.pmar-more:hover{background:#0F4C81;color:#fff}
.pmar-more[hidden]{display:none}

/* ---------- 6. LA CARTE PRODUIT ---------- */
#pma-grid .card{border:1px solid #e6ebf1;box-shadow:none;border-radius:14px}
#pma-grid .card:hover{transform:none;border-color:#bfd4e6;box-shadow:0 10px 26px -18px rgba(11,31,51,.55)}

#pma-grid .card .img{
  height:auto;aspect-ratio:1/1;background:#fff;padding:10px;position:relative;
}
#pma-grid .card .img img{width:100%;height:100%;object-fit:contain}
.pmar-tag{
  position:absolute;top:8px;inset-inline-start:8px;
  background:rgba(255,255,255,.94);border:1px solid #e6ebf1;border-radius:7px;
  padding:3px 8px;font-size:10.5px;font-weight:800;color:#64748b;line-height:1.3;
  max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

#pma-grid .card .body{
  display:grid;grid-template-columns:1fr auto;align-content:start;
  gap:9px 7px;padding:12px 13px 13px;
}
#pma-grid .card .body > h3{
  grid-column:1/-1;font-size:14px;line-height:1.45;min-height:2.9em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#pma-grid .card .body > .meta{grid-column:1/-1;gap:6px;row-gap:4px}
#pma-grid .card .price{font-size:20px}
/* la quantité minimum n'est plus affichée (retirée aussi du HTML par le buffer PHP) */
.moq{display:none !important}
#pma-grid .card .price.ask{font-size:12.5px}
#pma-grid .card .unlock{font-size:11.5px;padding:4px 9px;white-space:nowrap}
#pma-grid .card .lockrow{display:flex;align-items:center;flex-wrap:wrap;gap:5px 7px;min-width:0}
@media(max-width:559px){
  #pma-grid .card .body > .meta{gap:5px 8px}
  #pma-grid .card .price.blurred{font-size:14px;letter-spacing:1.5px}
  #pma-grid .card .unlock{font-size:10.5px;padding:3px 7px}
  #pma-grid .card .pmax-add{font-size:12px;padding:8px 5px}
}

/* bouton principal : bleu marine — l'orange reste au prix */
#pma-grid .card .pmax-add{
  grid-column:1;margin:0;background:#0F4C81;border-radius:10px;
  padding:10px 8px;font-size:13.5px;font-weight:800;
  white-space:normal;line-height:1.3;text-align:center;
}
#pma-grid .card .pmax-add:hover{background:#1668A8;filter:none}
#pma-grid .card .pmax-add.locked,
.pmai-acts .pmax-add.locked{background:#F97316;color:#fff;border:none}
#pma-grid .card .pmax-add.locked:hover,
.pmai-acts .pmax-add.locked:hover{background:#ea580c}
/* le prix masqué : des points nets en gris, plutôt qu'une tache floue orange */
#pma-grid .card .price.blurred,.pmai-meta .price.blurred{
  filter:none;color:#94a3b8;font-size:16px;font-weight:800;letter-spacing:2px;
}
#pma-grid .card .price.blurred small,.pmai-meta .price.blurred small{letter-spacing:0;color:#94a3b8}

/* WhatsApp réduit à une icône, à côté */
#pma-grid .card .btn-wa{
  grid-column:2;grid-row:auto;margin:0;width:42px;min-height:40px;padding:0;gap:0;
  display:flex;align-items:center;justify-content:center;border-radius:10px;
  background:#f0fbf3;border:1.5px solid #bbe5c8;font-size:0;line-height:0;
}
#pma-grid .card .btn-wa::after{
  content:"";width:21px;height:21px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%2316a34a%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
#pma-grid .card .btn-wa:hover{background:#dcf5e5;border-color:#8fd3a8}
/* si le bouton panier n'est pas là (script du panier absent), WhatsApp reprend la largeur */
#pma-grid .card .body > .btn-wa:nth-child(3){grid-column:1/-1;width:100%;font-size:14.5px}
#pma-grid .card .body > .btn-wa:nth-child(3)::after{content:""}

/* le meme logo, en blanc, sur le bouton vert de la fiche produit */
.pmai-acts .pmar-wa{gap:9px}
.pmai-acts .pmar-wa::before{
  content:"";width:19px;height:19px;flex:0 0 auto;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* ---------- 7. LA GRILLE ---------- */
#pma-grid{grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:560px){#pma-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:900px){#pma-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
@media(max-width:400px){
  #pma-grid .card .body{padding:10px 10px 11px}
  #pma-grid .card .body > h3{font-size:13px}
  #pma-grid .card .price{font-size:18px}
  #pma-grid .card .pmax-add{font-size:12.5px;padding:9px 4px}
  #pma-grid .card .btn-wa{width:38px}
}

.pmai-empty{grid-column:1/-1}

/* ---------- 8. BANDEAU CONFIANCE ---------- */
body.home > section.section:not([id]){padding:44px 0;background:#fff;border-top:1px solid #e8edf3}
body.home > section.section:not([id]) .wcard{
  box-shadow:none;border:1px solid #e8edf3;padding:20px 18px;
}

/* ---------- 9. BOUTON WHATSAPP FLOTTANT ---------- */
.float-wa{
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:54px;height:54px;
}
@media(max-width:560px){
  .float-wa{width:48px;height:48px;bottom:calc(14px + env(safe-area-inset-bottom,0px));inset-inline-start:14px}
}

/* ---------- 10. PAGE INTROUVABLE ---------- */
.pmar-404{
  max-width:560px;margin:70px auto;background:#fff;border:1px solid #e6ebf1;
  border-radius:18px;padding:40px 30px;text-align:center;
}
.pmar-404 .big{font-size:46px;font-weight:900;color:#0F4C81;line-height:1;margin-bottom:10px}
.pmar-404 h2{font-size:21px;font-weight:900;color:#0B1F33;margin-bottom:8px}
.pmar-404 p{color:#64748b;font-size:15px;line-height:1.7;margin-bottom:22px}
.pmar-404 .btn{padding:12px 24px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}