/* ============================================================
   ALOÉ BIEN-ÊTRE - produits.css
   Chargé par produits-aloe-vera-forever.php : familles, étiquettes, fiches produits.
   ============================================================ */

/* ---------- Large gamme (étiquettes) ---------- */
.gamme-intro{text-align:center;max-width:820px;margin:0 auto 45px;font-size:1.1rem;color:var(--muted)}
.gamme-intro strong{color:var(--fl-green-dark)}
.gamme-families{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.family{background:var(--white);border:1px solid #eaeaea;border-radius:var(--radius);padding:30px;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s}
.family:hover{transform:translateY(-6px);border-color:var(--fl-green-lime);box-shadow:0 18px 40px rgba(45,90,39,.10)}
.family-head{display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;padding:10px 22px;border-radius:50px;background:var(--fl-green-dark)}
.family-head i{color:var(--fl-green-lime);font-size:1.35rem}
.family-head h3{color:#fff;font-size:1.35rem}
.cat-tags{display:flex;flex-wrap:wrap;gap:10px}
.cat-tag{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:50px;font-size:.9rem;font-weight:bold;background:var(--bg-light);color:var(--fl-green-dark);border:1px solid #e2e8e0;transition:background .3s,color .3s,border-color .3s,transform .3s var(--e)}
.cat-tag::before{content:"\f0da";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.7rem;color:var(--fl-green-lime);transition:transform .3s var(--e)}
.cat-tag:hover{background:var(--fl-green-lime);color:var(--fl-green-dark);border-color:var(--fl-green-lime);transform:translateY(-3px)}
.cat-tag:hover::before{color:var(--fl-green-dark);transform:translateX(3px)}
.gamme-solo{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px}
.cat-solo{flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:13px;padding:24px 20px;border-radius:var(--radius);background:linear-gradient(135deg,var(--fl-green-dark),#24491f);color:#fff;font-family:'Arial Black',Arial,sans-serif;font-size:1.08rem;box-shadow:0 6px 20px rgba(45,90,39,.18);transition:transform .45s var(--e),box-shadow .45s var(--e)}
.cat-solo i{color:var(--fl-green-lime);font-size:1.35rem}
.cat-solo:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(45,90,39,.30)}

/* ---------- Comment commander ---------- */
.order-box{background:var(--white);border:2px dashed var(--fl-green-lime);padding:30px;border-radius:var(--radius);text-align:center;transition:border-color .5s,box-shadow .5s var(--e)}
.order-box:hover{border-color:var(--fl-green-dark);box-shadow:0 16px 40px rgba(45,90,39,.10)}
.order-box h3{font-size:1.4rem;color:var(--fl-green-dark);margin-bottom:20px}

/* ---------- Produits ---------- */
.products-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.product-card{background:var(--white);border-radius:var(--radius);padding:22px 14px;text-align:center;transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s;border:2px solid transparent;display:flex;flex-direction:column}
.product-card:hover{border-color:var(--fl-green-lime);transform:translateY(-5px);box-shadow:0 22px 44px rgba(45,90,39,.14)}
.product-icon{width:116px;height:116px;background:var(--bg-light);border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,.05);overflow:hidden;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.product-icon img{width:100%;height:100%;object-fit:contain;padding:6px;transition:transform .55s var(--e)}
.product-card:hover .product-icon{transform:scale(1.05)}
.product-card:hover .product-icon img{transform:scale(1.1) rotate(-3deg)}
.product-ref{display:block;font-family:'Arial Black',Arial,sans-serif;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#9aa8a0;margin:2px 0 8px}
.product-card h3{font-size:1rem;line-height:1.2;margin-bottom:8px;flex-grow:1}
.product-card p{font-size:.83rem;margin-bottom:16px;color:var(--muted)}
.product-card .btn{font-size:.76rem;padding:10px 12px;width:100%;margin-top:auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:992px){
  .gamme-families{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-icon{width:132px;height:132px}
}
@media (max-width:420px){
  .cat-solo{flex-basis:100%}
}

/* Étape conseiller : photo + texte côte à côte, carte centrée verticalement */
.step-advisor{justify-content:center}
.advisor-row{display:flex;align-items:center;gap:14px;text-align:left;margin-top:4px}
.step-avatar{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 4px 14px rgba(45,90,39,.18);border:3px solid var(--fl-green-lime);background:#eef3ea}
.advisor-row span{font-size:.95rem;line-height:1.35}
@media (max-width:768px){
  .advisor-row{justify-content:center}
}

/* ============================================================
   MOBILE - BLOC DÉFINITIF (en-tête, espaces, produits)
   ============================================================ */
@media (max-width:768px){
  /* --- PRODUITS : 2 par ligne, parfaitement centrés --- */
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch}
  /* --- PRODUITS : 2 par ligne, parfaitement centrés --- */
  .product-card{padding:16px 12px}
  /* --- PRODUITS : 2 par ligne, parfaitement centrés --- */
  .product-icon{width:118px;height:118px;margin:0 auto 10px}
  /* --- PRODUITS : 2 par ligne, parfaitement centrés --- */
  .product-card h3{font-size:.98rem}
  /* --- PRODUITS : 2 par ligne, parfaitement centrés --- */
  .product-card p{font-size:.82rem;margin-bottom:12px}
  /* --- PRODUITS : 2 par ligne, parfaitement centrés --- */
  .product-ref{margin:2px 0 6px}
}
@media (max-width:420px){
  .product-icon{width:104px;height:104px}
}

/* --- Produits : centrage parfait image + contenu --- */
.product-icon{align-self:center}
.product-card{align-items:center}
.product-card h3,.product-card p,.product-ref{width:100%;text-align:center}
.product-icon img{margin:auto}