:root{
      /* MinaGlow (logo) */
      --pink:#E30183;
      --pink-600:#C90074;
      --pink-100:#FFE3F3;

      /* touches Sénégal */
      --sn-green:#00853F;
      --sn-yellow:#FCD116;
      --sn-red:#E31B23;

      /* UI */
      --bg:#ffffff;
      --text:#0F172A;
      --muted:#64748B;
      --line:#E7EAF0;
      --card:#ffffff;
      --shadow: 0 12px 30px rgba(15, 23, 42, .10);
      --radius: 18px;
      --max: 1120px;

      --ring: 0 0 0 4px rgba(227,1,131,.14);


      /* ICON SYSTEM (uniformisation) */
      --icon-size: 44px;                 /* taille pastille */
      --icon-glyph: 22px;                /* taille svg */
      --icon-radius: 999px;

      --icon-color: var(--pink);
      --icon-bg: rgba(227,1,131,.10);
      --icon-bg-hover: rgba(227,1,131,.14);
      --icon-bg-active: rgba(227,1,131,.16);

      --icon-border: 1px solid rgba(227,1,131,.18);
      --icon-border-active: 1px solid rgba(227,1,131,.28);

      --icon-shadow: 0 10px 22px rgba(227,1,131,.10);
      --icon-shadow-hover: 0 14px 28px rgba(227,1,131,.14);
      --icon-shadow-active: 0 16px 34px rgba(227,1,131,.16);
      --bottom-nav-h: 96px;
}

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 500px at 10% 0%, rgba(227,1,131,.06), transparent 55%),
        radial-gradient(900px 500px at 100% 10%, rgba(0,133,63,.06), transparent 55%),
        radial-gradient(900px 500px at 90% 90%, rgba(252,209,22,.07), transparent 55%),
        var(--bg);
    }
    a{color:inherit; text-decoration:none}
    img{display:block; max-width:100%}
    button, input, select{font:inherit}

    .container{
      width: min(100% - 28px, var(--max));
      margin-inline:auto;
    }

    /* Header (mobile-first) */
    .header{
      position:sticky; top:0; z-index:50;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .header__inner{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap:12px;
    }
    .brand{display:flex; align-items:center; gap:10px; min-width: 170px;}
    .brand__mark{
      width:40px; height:40px; border-radius:14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 55%),
        linear-gradient(135deg, var(--pink), #ff3aa9);
      box-shadow: 0 10px 22px rgba(227,1,131,.18);
      border: 1px solid rgba(227,1,131,.18);
    }
    .brand__text strong{display:block; font-weight:800; font-size:14px; line-height:1.1}
    .brand__text span{display:block; font-size:12px; color:var(--muted)}

    .header__cta{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 11px 14px;
      border-radius: 999px;
      border: 1px solid rgba(227,1,131,.25);
      background: linear-gradient(135deg, rgba(227,1,131,.10), rgba(227,1,131,.03));
      color: var(--pink-600);
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(227,1,131,.10);
      white-space:nowrap;
    }
    .header__cta:active{transform: translateY(1px)}

    /* Hero */
    .hero{padding: 18px 0 10px;}
    .hero__card{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
      overflow:hidden;
      position:relative;
    }
    .hero__card:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(500px 180px at 0% 0%, rgba(227,1,131,.12), transparent 60%),
        radial-gradient(520px 200px at 100% 0%, rgba(0,133,63,.10), transparent 62%),
        radial-gradient(520px 240px at 100% 100%, rgba(252,209,22,.12), transparent 65%);
      pointer-events:none;
    }
    .hero__content{position:relative}
    .kicker{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.70);
      color: var(--muted);
      font-size: 12.5px;
    }
    .dot{
      width:10px; height:10px; border-radius:50%;
      background: var(--pink);
      box-shadow: 0 0 0 6px rgba(227,1,131,.10);
    }
    h1{
      margin: 12px 0 8px;
      font-size: clamp(22px, 6.2vw, 36px);
      line-height:1.08;
      letter-spacing:-.6px;
    }
    .sub{
      margin:0;
      color: var(--muted);
      font-size: 14px;
      max-width: 62ch;
    }
    .hero__actions{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-top: 14px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 8px 18px rgba(15,23,42,.06);
      font-weight: 900;
      font-size: 13px;
    }
    .btn:focus-visible{outline:none; box-shadow: var(--ring), 0 8px 18px rgba(15,23,42,.06)}
    .btn--primary{
      border-color: rgba(227,1,131,.22);
      background: linear-gradient(135deg, rgba(227,1,131,.12), rgba(227,1,131,.05));
      color: var(--pink-600);
    }

    /* Filter bar container */
    .filters{
      margin-top: 14px;
    }

    /* Unified group */
    .filters__group{
      display: flex;
      align-items: stretch;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 8px 18px rgba(15,23,42,.06);
      overflow: hidden;
    }

    /* Fields */
    .field{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: transparent;
    }

    .field--search{ flex: 2; }
    .field--select{ flex: 1; }

    .field svg{ flex: 0 0 auto; }

    /* Inputs */
    .field input,
    .field select{
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      font-weight: 600;
      font-size: 14px;
      color: var(--text);
    }

    /* Separator */
    .filters__sep{
      width: 1px;
      background: var(--line);
    }

    /* Focus inside */
    .filters__group:focus-within{
      border-color: #22c55e;
      box-shadow: 0 0 0 3px rgba(34,197,94,.15);
    }


    /* Mobile */
    @media (max-width: 640px){
      .filters__group{
        flex-direction: column;
      }
      .filters__sep{
        width: 100%;
        height: 1px;
      }
    }

    /* fin filter */
    .toggle{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid var(--line);
      box-shadow: 0 8px 18px rgba(15,23,42,.05);
      background:#fff;
    }
    .toggle label{
      font-weight: 800;
      font-size: 13px;
      color: var(--text);
    }
    .switch{
      width: 46px; height: 28px; border-radius: 999px;
      border:1px solid var(--line);
      background: #F1F5F9;
      position:relative;
      cursor:pointer;
    }
    .switch:after{
      content:"";
      width: 22px; height: 22px;
      border-radius: 50%;
      background:#fff;
      border:1px solid rgba(15,23,42,.08);
      position:absolute; top: 50%; left: 3px;
      transform: translateY(-50%);
      transition: .18s ease;
      box-shadow: 0 6px 14px rgba(15,23,42,.12);
    }
    #onlyAvailable:checked + .switch{
      background: rgba(0,133,63,.14);
      border-color: rgba(0,133,63,.22);
    }
    #onlyAvailable:checked + .switch:after{
      left: 21px;
      border-color: rgba(0,133,63,.20);
    }

    /* Products */
    .section{padding: 12px 0 60px;}
    .section__head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:10px;
      margin: 16px 0 10px;
    }
    .section__head h2{margin:0; font-size:16px; letter-spacing:.2px}
    .section__head p{margin:0; color:var(--muted); font-size:12.5px}

    .grid{
      display:grid;
      grid-template-columns: 1fr; /* mobile-first */
      gap: 14px;
      margin-top: 10px;
    }

    /* Card style (image cover like your example) */
    .product{
        border-radius: 22px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .media{
      position: relative;            /* ✅ indispensable pour absolute */
      aspect-ratio: 16 / 10;
      background: #fff;
      cursor: pointer;

      display: flex;
      align-items: center;
      justify-content: center;
    }
    .media img{
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
    }

    /* Badge (top-right) */
    .badge{
        position: absolute;
        top: 12px;
        left: 12px;                   /* ✅ top-left */
        z-index: 3;

        padding: 7px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        border: 1px solid rgba(255,255,255,.65);
        color: #fff;
        box-shadow: 0 10px 24px rgba(15,23,42,.14);
        backdrop-filter: blur(8px);
    }
    .badge--ok{ background: rgba(0,133,63,.92); }
    .badge--no{ background: rgba(227,27,35,.92); }

    /* Optional "favorite" */
    .heart{
      position:absolute;
      top: 12px; left: 12px;
      width: 38px; height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.85);
      background: rgba(255,255,255,.92);
      display:grid; place-items:center;
      box-shadow: 0 10px 24px rgba(15,23,42,.10);
    }

    /* Little hint bottom-left */
    .media__hint{
      position: absolute;
      left: 12px;
      bottom: 12px;
      z-index: 3;

      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      color: #0F172A;

      border: 1px solid rgba(255,255,255,.75);
      background: rgba(255,255,255,.90);
      box-shadow: 0 10px 24px rgba(15,23,42,.10);
      cursor: pointer;

      /* reset bouton */
      appearance: none;
      outline: none
    }

    /* petit effet */
    .media__hint:hover{
      transform: translateY(-1px);
    }

    .body{ padding: 14px 14px 16px; }
    .chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 8px;}
    .chip{
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
    }
    .chip--accent{
      border-color: rgba(0,133,63,.18);
      color: #0a5a2e;
      background: rgba(0,133,63,.06);
    }

    .price{
      font-size: 18px;
      font-weight: 900;
      margin: 6px 0 4px;
    }
    .title{
      margin: 0 0 6px;
      font-weight: 900;
      font-size: 15px;
      letter-spacing:.1px;
    }
    .desc{
      margin:0 0 12px;
      color: var(--muted);
      font-size: 13px;
      line-height:1.35;
    }

    .buy{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .buy .btn-wa{
      flex: 1;
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(227,1,131,.22);
      background: linear-gradient(135deg, rgba(227,1,131,.12), rgba(227,1,131,.05));
      color: var(--pink-600);
      font-weight: 900;
      font-size: 13px;
      cursor:pointer;
    }
    .buy .btn-wa:active{transform: translateY(1px)}
    .buy .btn-wa:focus-visible{outline:none; box-shadow: var(--ring)}

    /* Sold out state */
/*     .product[data-available="false"] .media img{
      filter: grayscale(.15) contrast(.98) brightness(.95);
    } */
    .product[data-available="false"] .buy .btn-wa{
      border-color: rgba(15,23,42,.14);
      background: #F1F5F9;
      color: #475569;
      pointer-events: none;
      opacity: .75;
    }

    /* Footer */
    footer{
      border-top: 1px solid var(--line);
      padding: 18px 0;
      color: var(--muted);
      font-size: 13px;
      background: rgba(255,255,255,.7);
    }
    .footer__inner{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }

    /* Floating WhatsApp */
    .fab{
      position:fixed;
      right: 16px;
      bottom: 16px;
      z-index: 60;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid rgba(0,133,63,.22);
      background: linear-gradient(135deg, rgba(0,133,63,.12), rgba(0,133,63,.06));
      color: #0a5a2e;
      font-weight: 900;
      box-shadow: 0 14px 30px rgba(15,23,42,.12);
    }

    /* Modal */
    .modal{
      position:fixed;
      inset:0;
      background: rgba(15,23,42,.55);
      display:none;
      align-items: flex-end; /* mobile-first : modal bottom sheet */
      justify-content:center;
      z-index: 100;
      padding: 14px;
    }
    .modal[aria-hidden="false"]{display:flex;}
    .modal__panel{
      width: min(100%, 980px);
      background:#fff;
      border-radius: 22px;
      overflow:hidden;
      box-shadow: 0 30px 80px rgba(15,23,42,.25);
      border: 1px solid rgba(255,255,255,.55);
      max-height: 98vh;
      display:flex;
      flex-direction:column;
    }
    .modal__top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 12px;
      border-bottom: 1px solid var(--line);
    }
    .modal__title{
      font-weight: 900;
      font-size: 14px;
      margin:0;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .modal__close{
      width: 40px; height: 40px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background:#fff;
      cursor:pointer;
      display:grid;
      place-items:center;
      font-weight: 900;
    }
    .modal__content{
      padding: 12px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      overflow:auto;
    }
    .viewer{
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid var(--line);
      background: #F8FAFC;
      position:relative;
    }
    .viewer img{
      width:100%;
      height: 46vh;
      object-fit: cover;
      object-position:center;
    }
    .navbtn{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px; height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.75);
      background: rgba(255,255,255,.92);
      cursor:pointer;
      display:grid; place-items:center;
      box-shadow: 0 10px 24px rgba(15,23,42,.14);
    }
    .navbtn.prev{left: 10px}
    .navbtn.next{right: 10px}

    .thumbs{
      display:flex;
      gap:10px;
      overflow:auto;
      padding-bottom: 4px;
    }
    .thumb{
      width: 86px;
      height: 62px;
      border-radius: 14px;
      border: 2px solid transparent;
      overflow:hidden;
      flex: 0 0 auto;
      background: #F1F5F9;
      cursor:pointer;
    }
    .thumb img{width:100%; height:100%; object-fit: cover;}
    .thumb[aria-current="true"]{
      border-color: rgba(227,1,131,.55);
      box-shadow: var(--ring);
    }

    .modal__meta{
      border-top: 1px solid var(--line);
      padding: 12px;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .modal__meta .p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
    }
    .modal__meta .strong{
      font-weight: 900;
      color: var(--text);
    }

    .brand__logo{
      width: 64px;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--pink-600);
      object-fit: contain; 
      display: grid;
      place-items: center;
      padding-bottom: 5px;
    }

    .btn-wa.disabled {
        background: #ccc;          /* gris */
        color: #777;
        pointer-events: none;      /* rend NON cliquable */
        cursor: not-allowed;
        opacity: 1;
      }

  


    /* Desktop improvements */
    @media (min-width: 720px){
      .filters{grid-template-columns: 1.2fr .8fr .8fr;}
      .grid{grid-template-columns: repeat(2, 1fr);}
      .modal{align-items:center;}
      .modal__content{
        grid-template-columns: 1.2fr .8fr;
        align-items:start;
      }
      .viewer img{height: 64vh;}
    }
    @media (min-width: 1024px){
      .grid{grid-template-columns: repeat(3, 1fr);}
      .hero__card{padding: 18px;}
    }

    /* Accessibility */
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); border:0;
    }

/* =========================================================
   BOTTOM NAV (mobile-nav)
   - Desktop: affiché en haut (dans le header)
   - Mobile: barre flottante en bas
   ========================================================= */

.mobile-nav{
  display:flex;
  align-items:center;
  gap:22px;
}

/* Item */
.mobile-nav__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:90px;
  padding: 4px 8px;
  border-radius: 16px;
  transition: transform .18s ease;
}

/* Icon (uniformisé) */
.mobile-nav__icon{
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--icon-radius);
  display:grid;
  place-items:center;

  background: var(--icon-bg);
  border: var(--icon-border);
  color: var(--icon-color);
  box-shadow: var(--icon-shadow);

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mobile-nav__icon svg{
  width: var(--icon-glyph);
  height: var(--icon-glyph);
  display:block;
}

.mobile-nav__item > span:last-child{
  font-size: 12.5px;
  font-weight: 900;
  color: var(--text);
}

@media (hover:hover){
  .mobile-nav__item:hover{ transform: translateY(-1px); }
  .mobile-nav__item:hover .mobile-nav__icon{
    background: var(--icon-bg-hover);
    box-shadow: var(--icon-shadow-hover);
    transform: translateY(-1px);
  }
  .mobile-nav__item:hover > span:last-child{ color: var(--pink-600); }
}

.mobile-nav__item.is-active .mobile-nav__icon{
  background: var(--icon-bg-active);
  border: var(--icon-border-active);
  box-shadow: var(--icon-shadow-active);
}
.mobile-nav__item.is-active > span:last-child{ color: var(--pink-600); }

.mobile-nav__item:active{ transform: scale(.98); }
.mobile-nav__item:active .mobile-nav__icon{ transform: scale(.96); }

/* Mobile: toujours flottant en bas */
@media (max-width: 900px), (hover: none) and (pointer: coarse){
  /* Le sticky+backdrop du header peut casser le fixed sur certains mobiles */
  .header{
    position: static !important;
    top: auto !important;
    backdrop-filter: none !important;
  }

  .mobile-nav{
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    z-index: 999999 !important;

    justify-content: space-around !important;
    gap: 0 !important;

    padding: 10px 8px !important;
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: var(--shadow) !important;

    transform: translateZ(0);
    will-change: transform;
  }

  body{
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

/* On n'utilise plus burger / header panel */
.header__burger,
.header__nav,
.header__actions,
.mg-bottom-nav{
  display:none !important;
}


.hero__card--contact{
  border-color: rgba(227,1,131,.18);
}

.hero__card--contact:before{
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(227,1,131,.18), transparent 62%),
    radial-gradient(520px 220px at 100% 0%, rgba(0,133,63,.10), transparent 62%),
    radial-gradient(520px 240px at 100% 100%, rgba(252,209,22,.12), transparent 65%);
}

/* Badges paiement */
.contact-badges{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.badge-pay{
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.badge-wave{
  color:#0a5a2e;
  background:linear-gradient(135deg, rgba(0,133,63,.12), rgba(0,133,63,.05));
  border-color:rgba(0,133,63,.25);
}

.badge-om{
  background:linear-gradient(135deg, rgba(252,209,22,.25), rgba(255,255,255,.7));
}

/* Boutons */
.contact-buttons{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  font-weight:900;
  font-size:14px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
  transition:.2s ease;
}

.contact-btn svg{
  width:22px;
  height:22px;
}

.contact-btn:hover{
  transform:translateY(-2px);
}

/* Couleurs */
.contact-btn--mail{
  color:var(--pink-600);
  border-color:rgba(227,1,131,.25);
  background:linear-gradient(135deg, rgba(227,1,131,.12), rgba(227,1,131,.05));
}

.contact-btn--wa{
  color:var(--sn-green);
  border-color:rgba(0,133,63,.25);
  background:linear-gradient(135deg, rgba(0,133,63,.12), rgba(0,133,63,.05));
}

.contact-btn--call{
  color:var(--text);
}

/* Pulse subtil */
.contact-btn--pulse{
  position:relative;
}

.contact-btn--pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:18px;
  border:2px solid rgba(0,133,63,.25);
  opacity:0;
  animation:pulseMG 2.2s ease-out infinite;
}

@keyframes pulseMG{
  0%{transform:scale(.95); opacity:0}
  20%{opacity:.45}
  70%{transform:scale(1.05); opacity:0}
  100%{opacity:0}
}

/* Mobile */
@media (max-width:640px){
  .contact-buttons{
    flex-direction:column;
  }
  .contact-btn{
    justify-content:center;
  }
}


/**/


/* ==============================
   TRUST BAND — full width SANS scroll horizontal
   ============================== */

html, body{ overflow-x: clip; }

.trust-band{
  position: relative;
  padding: 48px 0;
  overflow: hidden;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 40px;

  background:
    radial-gradient(900px 260px at 10% 0%, rgba(227,1,131,.08), transparent 60%),
    radial-gradient(900px 260px at 100% 10%, rgba(0,133,63,.04), transparent 60%),
    #fff;
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 2px solid rgba(15,23,42,.06);
}

.trust-band::before{
  content:"";
  position:absolute;
  inset:0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(227,1,131,.08), transparent 60%),
    radial-gradient(900px 260px at 100% 10%, rgba(0,133,63,.04), transparent 60%),
    #fff;
  z-index: -1;
  pointer-events:none;
}

.trust-band__inner{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
  text-align:center;
}

@media (min-width: 768px){
  .trust-band__inner{
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

.trust-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.trust-icon{
  width:54px;
  height:54px;
  border-radius:999px;
  display:grid;
  place-items:center;

  background: var(--icon-bg);
  border: var(--icon-border);
  color: var(--icon-color);
  box-shadow: var(--icon-shadow);
}

.trust-icon svg{
  width:28px;
  height:28px;
  display:block;
}

.trust-item h4{
  margin:0;
  font-size:15px;
  font-weight:900;
}

.trust-item p{
  margin:0;
  font-size:13px;
  color: var(--muted);
}

@media (hover:hover){
  .trust-item:hover .trust-icon{
    transform: translateY(-2px);
    transition: .2s ease;
    background: var(--icon-bg-hover);
    box-shadow: var(--icon-shadow-hover);
  }
}


@media (max-width: 900px), (hover: none) and (pointer: coarse){

  /* barre en bas */
  .mobile-nav{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;

    min-height: var(--bottom-nav-h) !important;
    padding: 10px 8px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;

    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid var(--line) !important;

    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 -10px 26px rgba(15,23,42,.10) !important;

    z-index: 999999 !important;
  }

  /* ✅ crée de la "vraie" hauteur scrollable après le footer */
  body::after{
    content:"";
    display:block;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 16px);
  }

  /* évite les effets bizarres de marges */
  footer{
    padding-bottom: 12px;
  }

  /* empêche chevauchement des items */
  .mobile-nav__item{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .mobile-nav__item > span:last-child{
    white-space: nowrap !important;
  }
}