/* =========================================================
   CAPNATU — PAGE COMMERCES PREMIUM
   Cartes photo + scroll naturel uniquement sur cette page.
   ========================================================= */

/* ---------- SCROLL NATUREL ---------- */

html.capnatu-commerces-native-scroll{
  width:100%;
  height:auto !important;
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:#536fb2;
}

body.capnatu-commerces-native-scroll{
  width:100%;
  height:auto !important;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  margin:0;
  padding:0;
  overflow-x:hidden !important;
  overflow-y:visible !important;
  overscroll-behavior-y:auto !important;
  -webkit-overflow-scrolling:touch;

  background:
    radial-gradient(760px 430px at 12% 5%,rgba(255,255,255,.25),transparent 62%),
    radial-gradient(760px 460px at 91% 26%,rgba(79,222,224,.20),transparent 64%),
    radial-gradient(780px 470px at 42% 102%,rgba(226,100,195,.22),transparent 65%),
    linear-gradient(155deg,#367faf 0%,#536fb2 52%,#79569a 100%) !important;

  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center top !important;
  background-attachment:scroll !important;
}

body.capnatu-commerces-native-scroll::before,
body.capnatu-commerces-native-scroll::after{
  display:none !important;
  content:none !important;
}

body.capnatu-commerces-native-scroll .app{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  width:100% !important;
  max-width:760px !important;
  height:auto !important;
  min-height:100vh !important;
  min-height:100svh !important;
  min-height:100dvh !important;

  margin:0 auto !important;
  overflow:visible !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
  overscroll-behavior:auto !important;
  -webkit-overflow-scrolling:auto !important;

  padding:
    calc(52px + env(safe-area-inset-top) + 12px)
    5px
    calc(108px + env(safe-area-inset-bottom)) !important;

  background:transparent !important;
}

body.capnatu-commerces-native-scroll .app-header{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:0 !important;
  z-index:1200 !important;
  padding-top:env(safe-area-inset-top) !important;
  min-height:calc(52px + env(safe-area-inset-top)) !important;
}

body.capnatu-commerces-native-scroll .bottom-nav{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:8px !important;
  transform:translateX(-50%) !important;
  width:min(540px,calc(100% - 16px)) !important;
  margin:0 !important;
  padding:7px !important;
  z-index:1500 !important;
}

/* ---------- CONTENEUR ---------- */

.commerces-home-container{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:4px 8px 18px;
}

.commerces-home-hero{
  margin-bottom:14px;
}

/* ---------- GRILLE ---------- */

.commerces-home-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

/* ---------- CARTES ---------- */

.commerces-home-card{
  position:relative;
  isolation:isolate;
  display:block;
  min-width:0;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.62);
  border-radius:25px;

  background-color:#17223b;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;

  box-shadow:
    0 16px 32px rgba(18,25,61,.24),
    inset 0 1px 0 rgba(255,255,255,.19);

  text-decoration:none;
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white,black);

  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.commerces-home-card-main{
  grid-column:1/-1;
  min-height:230px;
}

.commerces-home-card-small{
  min-height:192px;
}

.commerces-card-agdej{
  grid-column:1/-1;
  min-height:170px;
}

.commerces-card-shade{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(90deg,rgba(7,14,34,.82) 0%,rgba(7,14,34,.43) 48%,rgba(7,14,34,.07) 80%),
    linear-gradient(0deg,rgba(7,14,34,.70) 0%,transparent 59%);
}

.commerces-home-card-small .commerces-card-shade{
  background:
    linear-gradient(0deg,rgba(7,14,34,.82) 0%,rgba(7,14,34,.20) 82%),
    linear-gradient(90deg,rgba(7,14,34,.26),transparent);
}

.commerces-card-content{
  position:relative;
  z-index:2;
  width:100%;
  min-height:230px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;

  padding:22px;
}

.commerces-home-card-small .commerces-card-content{
  min-height:192px;
  padding:15px;
}

.commerces-card-agdej .commerces-card-content{
  min-height:170px;
}

.commerces-card-icon{
  width:45px;
  height:45px;
  margin:0 0 10px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.46);
  border-radius:15px;

  color:#fff;
  background:rgba(255,255,255,.17);
  box-shadow:0 8px 18px rgba(0,0,0,.15);

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);

  font-size:20px;
}

.commerces-card-title{
  max-width:94%;
  color:#fff;
  font-size:25px;
  font-weight:950;
  line-height:1.03;
  letter-spacing:.1px;
  text-shadow:0 2px 8px rgba(0,0,0,.42);
}

.commerces-card-desc{
  max-width:80%;
  margin-top:7px;
  color:rgba(255,255,255,.89);
  font-size:12.5px;
  line-height:1.4;
  text-shadow:0 1px 5px rgba(0,0,0,.38);
}

.commerces-card-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:11px;
  padding:8px 11px;

  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;

  color:#fff;
  background:rgba(255,255,255,.17);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  font-size:10.5px;
  font-weight:850;
}

.commerces-card-button b{
  font-size:17px;
  line-height:.7;
}

.commerces-home-card-small .commerces-card-icon{
  width:38px;
  height:38px;
  margin-bottom:8px;
  font-size:17px;
}

.commerces-home-card-small .commerces-card-title{
  max-width:100%;
  font-size:15px;
  line-height:1.08;
}

.commerces-home-card-small .commerces-card-desc{
  max-width:100%;
  font-size:10px;
}

.commerces-home-card-small .commerces-card-button{
  margin-top:8px;
  padding:7px 9px;
  font-size:9.5px;
}

/* ---------- PHOTOS ---------- */
/* Place les images dans /assets/img/commerces-cards/ */

.commerces-card-bars{
  background-image:
    linear-gradient(135deg,rgba(22,67,115,.22),rgba(97,36,111,.22)),
    url("/assets/img/commerces-cards/bars-restaurants.webp");
}

.commerces-card-shopping{
  background-image:
    linear-gradient(135deg,rgba(85,42,111,.20),rgba(25,67,103,.18)),
    url("/assets/img/commerces-cards/pret-a-porter.webp");
}

.commerces-card-wellness{
  background-image:
    linear-gradient(135deg,rgba(60,105,119,.20),rgba(91,49,111,.18)),
    url("/assets/img/commerces-cards/beaute-bien-etre.webp");
}

.commerces-card-sports{
  background-image:
    linear-gradient(135deg,rgba(20,105,130,.18),rgba(37,72,121,.18)),
    url("/assets/img/commerces-cards/sports-loisirs.webp");
}

.commerces-card-services{
  background-image:
    linear-gradient(135deg,rgba(56,71,112,.20),rgba(95,71,115,.18)),
    url("/assets/img/commerces-cards/pratique-services.webp");
}

.commerces-card-agdej{
  background-image:
    linear-gradient(135deg,rgba(83,57,107,.18),rgba(43,85,111,.18)),
    url("/assets/img/commerces-cards/agdej.webp");
}

/* ---------- ANIMATION ---------- */

@media (hover:hover) and (pointer:fine){
  .commerces-home-card:hover{
    transform:translateY(-3px) scale(1.003);
    box-shadow:0 22px 42px rgba(20,27,67,.29);
    filter:brightness(1.04);
  }

  .commerces-home-card:hover .commerces-card-button{
    background:rgba(255,255,255,.28);
  }
}

.commerces-home-card:active{
  transform:scale(.988);
}

/* ---------- WEBAPP ---------- */

@media (display-mode:standalone){
  body.capnatu-commerces-native-scroll .app{
    padding-bottom:calc(94px + env(safe-area-inset-bottom)) !important;
  }

  body.capnatu-commerces-native-scroll .bottom-nav{
    bottom:0 !important;
    width:100% !important;
    max-width:560px !important;

    padding:
      7px
      max(8px,env(safe-area-inset-right))
      calc(7px + env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left)) !important;

    border-right:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;
    border-radius:22px 22px 0 0 !important;
    background:rgba(247,250,255,.92) !important;
  }
}

@supports (-webkit-touch-callout:none){
  html.capnatu-commerces-native-scroll,
  body.capnatu-commerces-native-scroll{
    min-height:-webkit-fill-available;
  }

  body.capnatu-commerces-native-scroll .app{
    min-height:-webkit-fill-available !important;
  }
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:520px){
  .commerces-home-grid{
    gap:9px;
  }

  .commerces-home-card-main{
    min-height:205px;
  }

  .commerces-home-card-main .commerces-card-content{
    min-height:205px;
    padding:17px;
  }

  .commerces-home-card-main .commerces-card-title{
    font-size:21px;
  }

  .commerces-home-card-main .commerces-card-desc{
    max-width:88%;
    font-size:11.5px;
  }

  .commerces-home-card-small{
    min-height:172px;
  }

  .commerces-home-card-small .commerces-card-content{
    min-height:172px;
    padding:12px;
  }

  .commerces-card-agdej,
  .commerces-card-agdej .commerces-card-content{
    min-height:155px;
  }
}

@media (max-width:390px){
  body.capnatu-commerces-native-scroll .app{
    padding-right:3px !important;
    padding-left:3px !important;
  }

  body.capnatu-commerces-native-scroll .bottom-nav{
    width:calc(100% - 12px) !important;
  }

  .commerces-home-card-small .commerces-card-title{
    font-size:13.5px;
  }

  .commerces-home-card-small .commerces-card-desc{
    font-size:9.2px;
  }
}

@media (display-mode:standalone) and (max-width:390px){
  body.capnatu-commerces-native-scroll .bottom-nav{
    width:100% !important;
  }
}

@media (min-width:760px){
  .commerces-home-card-main{
    min-height:245px;
  }

  .commerces-home-card-main .commerces-card-content{
    min-height:245px;
    padding:25px;
  }

  .commerces-home-card-main .commerces-card-title{
    font-size:29px;
  }

  .commerces-home-card-main .commerces-card-desc{
    font-size:14px;
  }

  .commerces-home-card-small{
    min-height:205px;
  }

  .commerces-home-card-small .commerces-card-content{
    min-height:205px;
    padding:17px;
  }

  .commerces-home-card-small .commerces-card-title{
    font-size:18px;
  }

  .commerces-card-agdej{
    grid-column:auto;
  }

  .commerces-home-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .commerces-home-card-main{
    grid-column:1/-1;
  }
}