/* ========================================
   SHEET — Mobile/Tablet (iOS friendly)
   - Header & Footer collés
   - Scroll interne only
   - Safe-areas iOS
   - Renommage .sheet__ui -> .sheet__footer
   ======================================== */

:root{
  /* Anim */
  --sheet-dur: .3s;
  --sheet-overlay-dur: .3s;
  --sheet-ease-in: cubic-bezier(.33, 0, 0, 1);
  --sheet-ease-out: cubic-bezier(.33, 0, 0, 1);
  --title-slide-dur: 400ms;
  --title-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* UI */
  --bottom-bar-h: 56px; /* ajuste si ta .bottom-bar diffère */
  --surface-border: #eee;
  --footer-pad: 20px;
  --header-pad-x: 16px;
  --header-pad-y: 12px;

  /* Safe areas (iOS Notch) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Les sheets passent AU-DESSUS de la bottom-bar 
.sheets-container{
  position: relative;
  z-index: 2000;            
  max-width: 100%;
  overflow: hidden !important;
}
*/

/* iOS scrolling fluide dans les conteneurs défilants */
@supports (-webkit-touch-callout: none){
  .sheet__body,
  .sheet__scroll{
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------
   Scroll-lock page (géré par JS, mais styles prêts)
---------------------------------------------------*/
html.has-sheets-open,
body.is-sheet-locked{
  overflow: hidden !important;
  width: 100%;
  /*height: 100%;
  position: fixed;*/
  overscroll-behavior: none;
}

@media (min-width: 1024px) {
  /* ton lock */
  html.has-sheets-open { overflow: hidden; }
  body.is-sheet-locked { overflow: hidden; }

  /* compensation : on garde la même largeur de contenu qu’avant */
  body.is-sheet-locked {
    padding-right: var(--sbw, 0px);
  }

  /* si nav-bottom est fixed/sticky et bougent, compense aussi */
  body.is-sheet-locked .nav-bottom {
    padding-right: var(--sbw, 0px);
  }
}
@media (max-width: 768px) {
  body.is-sheet-locked .nav-bottom {
    padding-right: var(--sbw, 0px);
  }
}


/* --------------------------------------------------
   Overlay
---------------------------------------------------*/
.sheets__overlay{
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 44%);
  opacity: 0;
  pointer-events: none;
  overflow: hidden !important;
  transition: opacity var(--sheet-overlay-dur) var(--sheet-ease-in);
  /* Évite les gestes qui traversent sur iOS */
  touch-action: none;
}
.sheets__overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.sheet__overlay.is-visible.is-closing{
  opacity: 0;
  pointer-events: auto; /* important: évite clic “à travers” pendant le fade */
}

/* --------------------------------------------------
   Sheet (plein écran, au-dessus de la bottom bar)
---------------------------------------------------*/

@supports (height: 100dvh){
  .sheet{ height: 100dvh; }             /* viewport dynamique moderne */
}
/* Fallback iOS anciens WebKit */
@supports (-webkit-touch-callout: none){
  .sheet{ height: -webkit-fill-available; }
}

.sheets{
  position: relative;
  z-index: 2000;
  max-width: 100%;
  overflow: hidden !important;
}

.sheet {
  position: fixed;
  inset: 0;
  /* Hauteur vraiment "visuelle" iOS : */
  height: 100svh;
  background: #fff;
  /*box-shadow: 0 -12px 40px rgba(0,0,0,.18);*/
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  padding-bottom: max(var(--safe-bottom), 0px);
  transform: translateY(100%);
  will-change: transform;
  pointer-events: none;
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: none;
}

/* ====== MOBILE / TABLET : bottom-sheet vertical ====== */
@media (max-width: 1023.98px) {
  .sheet.is-opening {
    animation: sheetIn var(--sheet-dur) var(--sheet-ease-in) forwards;
  }
  .sheet.is-open {
    transform: translateY(0);
  }
  .sheet.is-closing {
    animation: sheetOut var(--sheet-dur) var(--sheet-ease-out) forwards;
  }
}

/* ====== DESKTOP : panneau latéral droite ====== */
@media (min-width: 1024px) {
  .sheet {
    /* part de la droite */
    width: min(450px, 100vw);  /* adaptatif */
    left: auto;
    right: 0;
    transform: translateX(100%);
    /*box-shadow: -12px 0 40px rgba(0,0,0,.18);*/
    padding-bottom: 0; /* plus de safe-bottom en desktop */
  }
.sheet h4{
  font-size: inherit;
  margin-top: 1rem;
  margin-bottom: .5rem;
}
.sheet h4:first-of-type{
  margin-top: 0;
  margin-bottom: .5rem;
}

  .sheet.is-opening {
    animation: sheetInRight var(--sheet-dur) var(--sheet-ease-in) forwards;
  }
  .sheet.is-open {
    transform: translateX(0);
  }
  .sheet.is-closing {
    animation: sheetOutRight var(--sheet-dur) var(--sheet-ease-out) forwards;
  }
}

/* Visibilité (commune mobile + desktop) */
.sheet[aria-hidden="true"] { visibility: hidden; }
.sheet.is-opening,
.sheet.is-open,
.sheet.is-closing {
  visibility: visible;
  pointer-events: auto;
}

/* Keyframes */
@keyframes sheetIn   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetOut  { from { transform: translateY(0); }    to { transform: translateY(100%); } }
@keyframes sheetInRight  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sheetOutRight { from { transform: translateX(0); }    to { transform: translateX(100%); } }


/* --------------------------------------------------
   Header — collé en haut (safe-area friendly)
---------------------------------------------------*/
.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;

  /* Hauteur fixe + padding adaptatif top (safe-area) */
  block-size: 64px; /* hauteur visuelle souhaitée */
  padding-inline: var(--header-pad-x);
  padding-block-start: calc(var(--safe-top, 0px) + 8px);
  padding-block-end: 8px;

  border-bottom: 1px solid var(--surface-border);
  overflow: hidden;
  box-sizing: border-box;
}

.sheet__title{
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}
.sheet__title {
  transform: none !important;
  animation: none !important;
}
.sheet.title-visible .sheet__title,
.sheet.title-intro .sheet__title {
  transform: none !important;
  animation: none !important;
}
.sheet__title i { font-size:var(--fs-600);}
.sheet__title h2{
  margin: 0;
  font-size: var(--fs-500, 1.125rem);
}

/* --------------------------------------------------
   Body (non scrollant) + zone scroll dédiée
---------------------------------------------------*/
.sheet__body{
  /* Le body reste “conteneur” (non scrollant) */
  overflow: hidden;
  padding: 20px; /* léger padding si tu n'utilises pas .sheet__scroll */
}
.sheet__body.sheet__body--location {
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
}
/* text si pas de criter de recherche  */
.sheet__no-filter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* indispensable */
  text-align: center;
}
/* Zone scrollable dédiée (ex: #sheet-filters) */
.sheet__scroll{
  flex: 1 1 auto;
  min-height: 0;                    /* crucial pour grid + iOS */
  overflow: auto;                   /* seul élément qui scrolle */
  -webkit-overflow-scrolling: touch;
  display: block;
  padding: 15px 25px 25px;
  margin-bottom: 0;                 /* footer désormais collé, pas besoin d’espace */
  overscroll-behavior: contain;     /* empêche le “pull to bounce” parent */
}
/* --------------------------------------------------
   Section
---------------------------------------------------*/
.sheet__section {
  position: relative;
}
/* --------------------------------------------------
   Panel
---------------------------------------------------*/
.sheet__panel {
  overflow: auto;                       /* doit scroller */
  -webkit-overflow-scrolling: touch;    /* inertie iOS */
  touch-action: pan-y;                  /* autorise le scroll vertical */
  overscroll-behavior: contain;         /* évite de scroller l'arrière-plan */
}

/* --------------------------------------------------
   TAGS 
---------------------------------------------------*/
.sheet__tags-container {
  padding: 0.9rem 0;
  margin-bottom: 15px;
}
@media (min-width: 1024px) {
  .sheet__tags-container {
  padding: 0;
  margin-bottom:0;
}
}
.sheet__tags-container[data-has="0"], .location__tags-container[data-has="0"] {
  display: none;
}
.sheet__tags-container[data-has="1"], .location__tags-container[data-has="1"]  {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-start;
}
.sheet__tags.is-visible{ display: grid; }
.sheet__tags{
  display: none;
  
}
.sheet__tags[data-visible="0"]{ display: none; }
.sheet__tags[data-visible="1"]{
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
  background:#fff;
  border-bottom: 1px solid var(--surface-border);
}
.sheet__tags > div{ display: flex; flex-wrap: wrap; gap: 6px; }
.sheet__tags > div[data-has="0"]{ display: none; }
.sheet__tags-title[visible="0"] {
  display: none;
}
.sheet__tags-title[visible="1"] {
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-bottom: solid 1px #c3c3c3;
  padding-bottom: 10px;
}

/* --------------------------------------------------
   Footer (renommage .sheet__ui -> .sheet__footer)
   - Collé en bas
---------------------------------------------------*/
.sheet__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  /* Hauteur fixe + sécurité iOS */
  block-size: 64px; /* hauteur visuelle du footer */
  padding-inline: var(--footer-pad, 16px);
  padding-block-end: calc(var(--safe-bottom, 0px) + 8px);
  padding-block-start: 8px;

  background: #fff;
  border-top: 1px solid var(--surface-border);
  box-sizing: border-box;

  /* Sécurité viewport */
  inline-size: 100%;
  max-inline-size: 100vw;
  flex-shrink: 0; /* empêche l’écrasement en flex parent */
}

.sheet__footer--reset {
  block-size: auto; 
  border-top: none;
  flex-direction: column;
}


/* Bouton d’action principal dans le footer */
.sheet__footer button,
.sheet__ui button{
  background: #fff;
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 8px 12px;
  border-radius: 20px;
  width: 100%;
  justify-content: center;
  font-weight: bold;
  color: #405059;
  border: 2px solid #405059;
}

/* --------------------------------------------------
   Réductions motion
---------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  .sheet.is-opening, .sheet.is-closing{ animation: none; }
  .sheet.is-open{ transform: none; }
  .sheet.title-intro .sheet__title{ animation: none; }
  .sheet.title-visible .sheet__title{ transform: none; }
}

/* --------------------------------------------------
   Divers (x overflow)
---------------------------------------------------*/
.sheet,
.sheet__footer{ max-width: 100vw; }
.sheet{ overflow-x: hidden; }


.sheet--sub {
  inset: 0;
  background: #fff;
  z-index: 1600; /* au-dessus du sheet parent */
  transform: translateX(100%);
  will-change: transform;
  pointer-events: none;
  visibility: hidden;
}
.sheet--sub .sheet__title {
  transform:none;
}

.sheet--sub.is-active {
  visibility: visible;
  pointer-events: auto;
  animation: slideInSheet var(--sheet-dur, 360ms) var(--sheet-ease-in, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}

.sheet--sub.is-leaving {
  visibility: visible;
  animation: slideOutSheet var(--sheet-dur, 360ms) var(--sheet-ease-out, cubic-bezier(0.7, 0, 0.3, 1)) forwards;
}

.sheet--sub.is-leaving-down {
  visibility: visible;
  animation: subLeaveDown var(--sheet-dur, 360ms) var(--sheet-ease-out, cubic-bezier(0.7,0,0.3,1)) forwards;
}

/* Keyframes horizontaux */
@keyframes slideInSheet {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideOutSheet {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes subLeaveDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}