/* ===============================
   Canva (2 images + hotspots)
   =============================== */

.ch-canva{
  position:relative;
  /*
    Full-bleed without horizontal scroll.
    NOTE: 100vw can include scrollbar width and create a tiny overflow.
    We provide a modern fix using svw when supported.
  */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:hidden; /* fallback */
  overflow-x:clip;
}

@supports (width: 100svw){
  .ch-canva{
    width:100svw;
    max-width:100svw;
    margin-left:calc(50% - 50svw);
    margin-right:calc(50% - 50svw);
  }
}

/* Ensure sizing is contained */
.ch-canva, .ch-canva *{ box-sizing:border-box; }

.ch-canva__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 0;
}

@media (max-width:980px){
  .ch-canva__grid{ grid-template-columns:1fr; }
}

.ch-canva__media{
  position:relative;
  overflow:hidden;
  /* Desktop: max height 72vh */
  height:72vh;
  max-height:72vh;
}

@media (max-width:980px){
 .ch-canva__media{
    height:auto;
    max-height:none;
    overflow:visible; /* optionnel, si tu veux éviter toute coupe */
  }

  .ch-canva__img{
    height:auto;
    object-fit:contain; /* ou enlève carrément object-fit */
  }
}

@media (max-width:600px){
   .ch-canva__media{
    height:auto;
    max-height:none;
    overflow:visible; /* optionnel, si tu veux éviter toute coupe */
  }

  .ch-canva__img{
    height:auto;
    object-fit:contain; /* ou enlève carrément object-fit */
  }
}

.ch-canva__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Hotspot wrapper positioned via CSS vars */
.ch-hotspot{
  position:absolute;
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--gap-xs);
  z-index:2;
}

@media (max-width:980px){
  .ch-hotspot{
    left: var(--x-md, var(--x));
    top:  var(--y-md, var(--y));
  }
}

@media (max-width:600px){
  .ch-hotspot{
    left: var(--x-sm, var(--x-md, var(--x)));
    top:  var(--y-sm, var(--y-md, var(--y)));
  }
}

/* ===== Bouton + (même style que Team Member) ===== */
.ch-hotspot__btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--k-color-1);
  background:var(--k-color-1);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.ch-hotspot__btn:hover{ transform:scale(1.03); }
.ch-hotspot__btn:active{ transform:scale(.99); }
.ch-hotspot__btn:focus-visible{ outline:2px solid var(--k-color-1); outline-offset:3px; }

.ch-plus{ position:relative; width:14px; height:14px; display:block; }
.ch-plus__bar{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:2px;
  background:#fff;
  transform:translate(-50%, -50%);
  transition:transform 180ms ease, background 180ms ease;
}
.ch-plus__bar--v{ width:2px; height:14px; }

/* Hover closed: + -> - */
.ch-hotspot:not(.is-active) .ch-hotspot__btn:hover .ch-plus__bar--v,
.ch-hotspot:not(.is-active) .ch-hotspot__btn:focus-visible .ch-plus__bar--v{
  transform:translate(-50%, -50%) rotate(90deg);
}

/* Active state: - */
.ch-hotspot.is-active .ch-hotspot__btn{
  background:#fff;
  border-color:#fff;
}
.ch-hotspot.is-active .ch-plus__bar{ background:var(--k-color-1); }
.ch-hotspot.is-active .ch-plus__bar--v{ transform:translate(-50%, -50%) rotate(90deg); }

/* Hover active: - -> + */
.ch-hotspot.is-active .ch-hotspot__btn:hover .ch-plus__bar--v,
.ch-hotspot.is-active .ch-hotspot__btn:focus-visible .ch-plus__bar--v{
  transform:translate(-50%, -50%) rotate(0deg);
}

/* Title label */
.ch-hotspot__label{
  border:0;
  background: rgba(255,255,255,0.92);
  color: var(--k-color-2);
  text-transform: uppercase;
  font-size: var(--h6-font-size);
  padding: var(--padding-xl);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  cursor:pointer;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.ch-hotspot__label:hover,
.ch-hotspot__label:focus-visible{
  background: var(--k-color-1) !important;
  color:#fff !important;
}


.ch-hotspot.is-active .ch-hotspot__label{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.ch-hotspot__label:focus-visible{
  outline:2px solid var(--k-color-1);
  outline-offset:3px;
}

/* =========================
   MODAL = DRAWER RIGHT
   ========================= */
.ch-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}

.ch-modal.is-open{ opacity:1; pointer-events:auto; }

.ch-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .28s ease;
}

.ch-modal.is-open .ch-modal__backdrop{ opacity:1; }

.ch-modal__panel{
  position:absolute;
  right:0;
  top:5vh;
  height:90vh;
  width:70vw;
  max-width:70vw;
  background:#fff;
  transform:translateX(100%);
  transition:transform .32s ease;
  overflow:hidden;
  box-shadow:-20px 0 60px rgba(0,0,0,.25);
}

.ch-modal.is-open .ch-modal__panel{ transform:translateX(0); }

.ch-modal__close{
  position:absolute;
  top:18px;
  left:18px;
  z-index:3;
  width:30px;
  height:30px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:#f36a21;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform 220ms ease;
}

/* default: '-' */
.ch-modal__close .ch-plus__bar{ background:#fff; transition: transform 220ms ease; }
.ch-modal__close .ch-plus__bar--v{ transform:translate(-50%, -50%) rotate(90deg); }

.ch-modal__close:hover,
.ch-modal__close:focus-visible{ transform: rotate(-45deg); }

.ch-modal__close:hover .ch-plus__bar--v,
.ch-modal__close:focus-visible .ch-plus__bar--v{ transform:translate(-50%, -50%) rotate(0deg); }

.ch-modal__close:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.ch-modal__grid{ height:100%; display:grid; grid-template-columns:48% 52%; }

.ch-modal__left{ background:#e9e9e9; overflow:hidden; }
.ch-modal__left img{ width:100%; height:100%; object-fit:cover; display:block; }

.ch-modal__right{ padding: var(--margin-l, 32px); overflow:auto; display:flex; flex-direction:column; justify-content:center; }
.ch-modal__content{ width:80%; }

.ch-modal__title{ margin-bottom:var(--gap-xs, 8px); font-size: var(--h5-font-size, 28px) !important; color: var(--k-color-1); }
.ch-modal__quote{ margin-top: var(--margin-m, 20px) !important; margin-bottom: var(--margin-l, 32px);}
.ch-modal__quote:before{display:none; }
.ch-modal__quote p{ font-size: 1rem !important; padding-left: 0; padding-top: 25px; }
.ch-modal__imgwrap{ margin: 16px 0 20px; }
.ch-modal__text{ font-size:13px; line-height:1.6; }
.ch-canva__panel{margin-bottom: 0 !important;}
/* ✅ MOBILE: stack image + text, no overlap, scroll inside the popin */
@media (max-width:980px){

  /* le panneau (popin) scrolle */
  .ch-modal__panel{
    top: 0;
    height: 100dvh;              /* mieux que 100vh sur mobile */
    overflow: auto;              /* scroll dans la popin */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
max-width:100vw;
width:100vw;
  }

  /* on empile en colonne (plus robuste que grid ici) */
  .ch-modal__grid{
    display: flex;
    flex-direction: column;
    height: auto;                /* pas de hauteur figée */
    min-height: 100%;
  }

  /* image en haut */
  .ch-modal__left{
    overflow: hidden;
    height: auto;
  }

  .ch-modal__left img{
    width: 100%;
    height: auto;                /* 🔥 évite les comportements “100%” bizarres */
    display: block;
    object-fit: cover;           /* tu peux mettre 'contain' si tu veux tout voir */
  }

  /* texte en dessous */
  .ch-modal__right{
    overflow: visible;           /* le scroll est sur .ch-modal__panel */
    justify-content: flex-start;
  }
}