/* ========================================================= 
   CAPNATU — commerces_list.css (CLEAN)
   Layout :
   - Titre full width
   - Ligne 2 : photo 60% (entière, radius) / droite 40% (cat + boutons 2x2)
   - Boutons compacts (mobile)
   - Tools : select + search + retour discret
   - Modal VR inclus
   ========================================================= */

*{ box-sizing:border-box; }

/* =========================
   TOOLS (select/search/boutons)
   ========================= */
.commerces-list .cl-tools{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.commerces-list .cl-select,
.commerces-list .cl-search{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
  color: #fff;
  outline: none;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* flèche select */
.commerces-list .cl-select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor:pointer;
}

.commerces-list .cl-search::placeholder{
  color: rgba(255,255,255,.62);
}

/* boutons tools */
.commerces-list .cl-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);

  color:#fff;
  text-decoration:none;
  font-weight: 950;
  cursor:pointer;

  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.commerces-list .cl-btn:hover{ background: rgba(0,0,0,.16); }
.commerces-list .cl-btn:active{ transform: translateY(1px); }

/* reset soft */
.commerces-list .cl-btn-soft{
  background: rgba(18,140,131,.16);
  border-color: rgba(18,140,131,.30);
}
.commerces-list .cl-btn-soft:hover{ background: rgba(18,140,131,.22); }

/* tools en 1 colonne */
@media (max-width: 420px){
  .commerces-list .cl-tools{ grid-template-columns: 1fr; }
}

/* =========================
   LISTE
   ========================= */
.cl-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:12px;
}

.cl-empty{
  padding: 14px;
  font-weight: 900;
  opacity: .85;
  color: #fff;
  text-align:center;
}

/* =========================
   CARD
   ========================= */
.cl-card{
  display:flex;
  flex-direction:column;
  border-radius:18px;
  overflow:hidden;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* titre */
.cl-title{
  display:block;
  width:100%;
  padding:12px;
  text-align:center;

  color:#fff;
  text-decoration:none;
  font-weight: 1000;
  font-size:16px;
  letter-spacing:.3px;
  line-height:1.15;

  background: rgba(0,0,0,.20);
  border-bottom: 1px solid rgba(255,255,255,.10);

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* body photo 60 / droite 40 */
.cl-body{
  display:grid;
  grid-template-columns: 60% 40%;
  gap:12px;
  padding:12px;
  align-items:stretch;
}

/* photo */
.cl-photo{
  display:block;
  border-radius:18px;
  overflow:hidden;
  background: rgba(0,0,0,.10);
  min-height: 170px;
}

.cl-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;
  background: transparent;
}

.cl-noimg{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  opacity:.6;
  background: rgba(0,0,0,.18);
}

.cl-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;

  padding-right:12px;   /* espace contre le bord */
}

/* catégorie */
.cl-cat{
  width:100%;
  display:flex;
  justify-content:center;
  text-align:center;

  padding:7px 8px;
  border-radius:999px;

  font-size:12px;
  line-height:1;
  font-weight: 900;

  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.14);
}

/* =========================
   ACTIONS (boutons 2x2)
   ========================= */
.cl-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  width:100%;
}

.cl-act{
  width:100%;
  min-height: 50px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;

  padding:8px 6px;
  border-radius:14px;

  text-decoration:none;
  color:#fff;
  font-weight: 950;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);

  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;

  overflow:hidden;
}

.cl-act-btn{ appearance:none; border:0; }

.cl-ico{
  font-size:16px;
  line-height:1;
}

.cl-act small{
  font-size:11px;
  opacity:.92;
  font-weight: 900;
  white-space:nowrap;
}

.cl-act:hover{
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.20);
}

.cl-act:active{ transform: scale(.98); }

/* ✅ STYLE “ATTIRANT” (comme Fiche)
   - Utilise soit cl-primary (ton choix initial)
   - soit cl-hot (si tu préfères)
*/
.commerces-list .cl-actions .cl-act.cl-primary,
.commerces-list .cl-actions .cl-act.cl-hot{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}

/* effet léger premium (optionnel mais joli) */
.commerces-list .cl-actions .cl-act.cl-primary,
.commerces-list .cl-actions .cl-act.cl-hot{
  background-image: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
}

/* hover plus “bouton” */
.commerces-list .cl-actions .cl-act.cl-primary:hover,
.commerces-list .cl-actions .cl-act.cl-hot:hover{
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

/* disabled */
.cl-disabled{
  opacity: .55;
  background: rgba(0,0,0,.14);
  border-color: rgba(255,255,255,.10);
  pointer-events:none;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 520px){
  .cl-body{
    grid-template-columns: 60% 40%;
    gap:10px;
    padding:10px;
  }

  .cl-photo{ min-height: 150px; }

  .cl-act{
    min-height: 48px;
    padding:7px 5px;
  }

  .cl-act small{ font-size:10.5px; }
}

@media (min-width: 900px){
  .cl-list{ max-width: 860px; margin: 0 auto; }
  .cl-photo{ min-height: 190px; }
  .cl-title{ font-size:17px; }
}

/* =========================
   MODAL VR
   ========================= */
.cl-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: rgba(0,0,0,.78);
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.cl-modal.open{ display:flex; }

.cl-modal-box{
  width: 90vw;
  height: 90vh;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
}

.cl-modal-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  color: #fff;
  background: rgba(0,0,0,.45);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.cl-modal-title{
  font-weight: 950;
  font-size: 13px;
  opacity: .95;
}

.cl-modal-close{
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 950;
  cursor: pointer;
}

.cl-modal-frame{
  width: 100%;
  height: 100%;
  border: 0;
  flex: 1 1 auto;
  background: #000;
}
/* =========================================================
   Drawer Filtres — version "dans le conteneur" (Safari-safe)
   - Backdrop: fixed plein écran
   - Panel: ABSOLUTE dans .commerces-list (donc dans le site)
   - Résout souvent Safari desktop (fixed + stacking context)
   ========================================================= */

/* Le drawer couvre l'écran pour le backdrop,
   mais le panel sera ancré dans le conteneur */
.commerces-list .cl-drawer{
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  z-index: 2147483647 !important;
}

/* Ouvert */
.commerces-list .cl-drawer[aria-hidden="false"]{
  display: block !important;
}

/* FORCE 2 boutons sur une ligne */
.commerces-list .cl-tools.cl-tools-2btn{
  display:flex !important;
  flex-direction:row !important;
  gap:10px !important;
  align-items:stretch !important;
  justify-content:space-between !important;
}

.commerces-list .cl-tools.cl-tools-2btn .cl-btn.cl-btn-2{
  flex:1 1 0 !important;
  width:50% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.commerces-list .cl-tools.cl-tools-2btn button.cl-btn{
  -webkit-appearance:none;
  appearance:none;
}

/* Backdrop plein écran (toujours fixed) */
.commerces-list .cl-drawer__backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 0 !important;
}

/* ✅ Le conteneur devient la référence du panel */
.commerces-list{
  position: relative !important;
}

/* Panel DANS le site : absolu dans .commerces-list */
.commerces-list .cl-drawer__panel{
  position: absolute !important;

  /* position dans le conteneur */
  top: 110px !important;           /* ajuste si besoin (selon ton header) */
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;

  width: min(560px, calc(100% - 24px)) !important;
  max-width: 560px !important;

  max-height: calc(100vh - 160px) !important;
  overflow: auto !important;

  z-index: 1 !important;

  background: linear-gradient(180deg, rgba(18,22,32,.98), rgba(10,12,18,.98)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  padding: 14px !important;

  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /* animation */
  transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s !important;
}

/* Ouvert : visible + petite anim */
.commerces-list .cl-drawer[aria-hidden="false"] .cl-drawer__panel{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  transition: opacity .18s ease, transform .22s ease, visibility 0s !important;
}

/* Head */
.commerces-list .cl-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.commerces-list .cl-drawer__title{
  color:#fff;
  font-weight:900;
  font-size:18px;
}

.commerces-list .cl-drawer__close{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
}

/* Body */
.commerces-list .cl-drawer__body{
  display:grid;
  gap:10px;
}

.commerces-list .cl-drawer__label{
  display:block;
  color:#fff;
  opacity:.9;
  font-weight:800;
  margin-top:6px;
}

/* Inputs Safari */
.commerces-list .cl-drawer__panel select,
.commerces-list .cl-drawer__panel input{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.commerces-list .cl-drawer__panel input::placeholder{
  color: rgba(255,255,255,.65) !important;
}

/* Actions */
.commerces-list .cl-drawer__actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

/* ✅ Mobile: panel un peu plus haut et plus large */
@media (max-width: 520px){
  .commerces-list .cl-drawer__panel{
    top: 90px !important;
    width: calc(100% - 20px) !important;
    max-height: calc(100vh - 130px) !important;
  }
}