/* Page Prestations */
.presta-page{ padding-block: 32px 80px; }
.presta-header{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
}
.presta-title{ margin:0; font-size: clamp(28px, 3vw, 35px); }
.presta-inpage{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.presta-inpage__toggle{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  border-radius: 5px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.presta-inpage__toggle::after{
  content: '\2190';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  font-size: 1.1em;
  line-height: 1;
  transition: transform .2s ease;
}
.presta-inpage__toggle[aria-expanded="true"]::after{
  content: '\25BC';
}
.presta-inpage__toggle:hover,
.presta-inpage__toggle:focus-visible{
  background: rgba(242,233,216,.18);
  border-color: rgba(242,233,216,.55);
  outline:none;
}
.presta-inpage__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.presta-inpage .presta-filter{
  /*--corner-bg: rgba(242,233,216,0);*/
  --corner-fg: var(--ink);
  --corner-hover: var(--ink);
  --corner-padding-y: 0.6rem;
  --corner-padding-x: 1.4rem;
  --corner-font-size: clamp(1.1rem, 0.85rem + 0.6vw, 1.4rem);
  --corner-gap: 0.5rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.presta-inpage .presta-filter:hover{
  color: var(--corner-hover);
}
.presta-inpage .presta-filter.is-active{
  --corner-bg: rgba(242,233,216,0);
  color: var(--ink);
  --corner-hover: var(--ink);
}

a.corner-button.presta-filter.is-active {
  background-color: var(--ink);
  color: var(--paper);
}

@media (max-width: 900px){
  .presta-header{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .presta-inpage{
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
  }

  .presta-inpage__list{
    justify-content:flex-start;
  }
}

@media (max-width: 680px){
  .presta-inpage{
    gap:8px;
  }

  .presta-inpage__toggle{
    display:flex;
  }

  .presta-inpage__list{
    display:none;
    flex-direction:column;
    gap:6px;
  }

  .presta-inpage.is-open .presta-inpage__list{
    display:flex;
  }

  .presta-inpage__list .corner-button{
    border-radius:10px;
    justify-content:flex-start;
  }

  .presta-inpage__list .corner-button::before,
  .presta-inpage__list .corner-button::after{
    display:none;
  }
}

.presta-section{ padding-block: 28px; border-top: 1px dashed rgba(242,233,216,.2); }
.h2{ margin:0 0 10px; font-size: clamp(15px, 2.4vw, 50px); }
.lead{ margin:0 0 16px; opacity:.9; }

/* --- Before/After slider --- */
.ba{
  position:relative; width:100%; margin: 0;
  aspect-ratio: 16/9; overflow:hidden;
  border: 1px solid rgba(242,233,216,.2);
  touch-action: none; /* important pour le drag sur mobile */
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba__after{ z-index:1; }
.ba__before{ z-index:2; clip-path: inset(0 50% 0 0); transition: clip-path .0s; }

/* la barre verticale au centre */
.ba__bar{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background: var(--ink); z-index:4;
  transform: translateX(-1px);
  pointer-events: none; /* la poignée capte le drag */
}

/* la poignée */
.ba__handle{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:28px; height:28px; border-radius:50%;
  background: var(--paper);
  border:2px solid var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  cursor: ew-resize; z-index:5;
}

/* range masqué mais accessible (on garde ton .sr-only global) */
.ba__range{
  appearance: none; -webkit-appearance: none;
  position:absolute; inset:auto 0 0 0; width:100%;
  background:transparent; z-index:3; /* sous la poignée */
  /* on le cache visuellement via .sr-only dans styles.css */
}

/* labels */
.ba__labels{
  position:absolute; inset:10px 10px auto 10px; z-index:6;
  display:flex; justify-content:space-between; pointer-events:none; font-weight:700; opacity:.9;
}
.ba__labels span{ background: rgba(0,0,0,.35); padding:4px 8px; border:1px solid rgba(242,233,216,.25); }

/* Swiper pour la section Étalonnage */
.grade-swiper{ margin-top: 16px; width: 100%; }
.grade-swiper .swiper-slide{ display:block; }
.grade-swiper .swiper-button-prev,
.grade-swiper .swiper-button-next{ color: var(--ink); }
.grade-swiper .swiper-pagination-bullet{ background: rgba(242,233,216,.6); }
.grade-swiper .swiper-pagination-bullet-active{ background: var(--ink); }

/* FX */
.fx-grid{ display:grid; gap: 12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.fx-card{ position:relative; border:1px solid rgba(242,233,216,.2); background: rgba(0,0,0,.08); overflow:hidden; }
.fx-card-media{ position:relative; }
.fx-card--video{ cursor:default; }
.fx-card-video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.fx-card-overlay{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  display:block;
  background: transparent;
  cursor: zoom-in;
  transition: background .2s ease;
}
.fx-card--video:hover .fx-card-overlay,
.fx-card--video .fx-card-overlay:focus-visible{
  background: rgba(0,0,0,.18);
}
.fx-card--video .fx-card-overlay:focus-visible{
  outline: 2px solid rgba(242,233,216,.9);
  outline-offset: 3px;
}
.fx-card img, .fx-card video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.fx-card .fx-embed{ width:100%; background:rgba(0,0,0,.2); overflow:hidden; display:flex; justify-content:center; }
.fx-card .fx-embed iframe{ display:block; width:100%; border:0; background:#000; }
@media (max-width: 900px){ .fx-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .fx-grid{ grid-template-columns: 1fr; } }

.presta-fx-modal{ display:none; }
.presta-fx-modal.modal--active{
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  inset:0;
  padding: min(4vw, 48px);
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1400;
}
.presta-fx-modal .modal__dialog{
  width: min(1024px, 96vw);
  max-height: 100vh;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  gap: 0;
}
.presta-fx-modal .fx-modal-content{
  position:relative;
  display:grid;
  gap: clamp(12px, 4vw, 18px);
  padding: 0;
  background: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  color: var(--ink);
}
.presta-fx-modal .fx-modal-body{
  display:grid;
  gap: clamp(12px, 4vw, 18px);
  justify-items:center;
}
.presta-fx-modal .fx-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:0;
  background: transparent;
  color: var(--ink);
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.presta-fx-modal .fx-modal-close:hover{
  background: rgba(0,0,0,.2);
}
.presta-fx-modal .fx-modal-close:focus-visible{
  outline: 2px solid rgba(242,233,216,.9);
  outline-offset: 3px;
}
.presta-fx-modal .fx-modal-title{
  margin:0;
  font-size: clamp(18px, 3vw, 26px);
  font-weight:700;
  text-align:center;
}
.presta-fx-modal .fx-modal-media{
  width:100%;
  display:block;
}
.presta-fx-modal .fx-modal-video{
  display:block;
  width:100%;
  height:auto;
  max-height: 80vh;
  border-radius: 0;
  background:#000;
}
.presta-fx-modal .fx-modal-caption{
  margin:0;
  font-size:15px;
  opacity:.85;
  text-align:center;
  max-width: 720px;
}
@media (max-width: 600px){
  .presta-fx-modal .modal__dialog{
    width:100%;
    max-height: 100vh;
  }
  .presta-fx-modal .fx-modal-content{
    padding: 0;
  }
}

/* Drone */
.drone-video{
  display:grid;
  gap: clamp(12px, 4vw, 18px);
  justify-items:center;
}
.drone-video-player{
  display:block;
  width:100%;
  max-height: 80vh;
  border:1px solid rgba(242,233,216,.25);
  background:#000;
}
.drone-video-caption{
  margin:0;
  font-size:15px;
  opacity:.85;
  text-align:center;
  max-width: 720px;
}
