.face-library-native-wrap,
.face-library-native-overlay,
.face-library-native-input{
  display:none !important;
}

/* ===== Shared trigger ===== */
.face-library-field{
  width:100%;
  margin-top:0 !important;
}

.face-library-trigger{
  width:100%;
  height:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 10px 0 14px;
  border-radius:12px;
  border:1px solid rgba(31,35,40,.18);
  background:#fff;
  box-shadow:none;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.face-library-trigger:hover,
.face-library-trigger:focus-visible{
  border-color:rgba(47,111,78,.32);
  background:#fff;
  box-shadow:none;
  outline:none;
}

.face-library-trigger-copy{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
}

.face-library-trigger-hint{
  display:none !important;
}

.face-library-trigger-value{
  color:var(--text);
  font-size:14px;
  font-weight:500;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.face-library-trigger-side{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.face-library-mini-thumb{
  width:18px;
  height:18px;
  border-radius:5px;
  object-fit:cover;
  display:none;
  border:1px solid rgba(0,0,0,.08);
  background:#eef6f0;
}
.face-library-field.has-thumb .face-library-mini-thumb{display:block}

.face-library-trigger-icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:#e7efe9;
  color:#2f6b42;
  font-size:9px;
  font-weight:700;
}

/* ===== Add face section ===== */
.section-add-face .face-ref-col{
  display:flex;
  flex-direction:column;
  min-width:260px !important;
}

.section-add-face .face-ref-col label[for="faceRefSelect"]{
  margin:0 0 6px 0 !important;
}

.section-add-face .face-ref-col .face-library-field{
  margin-top:0 !important;
}

.section-add-face .face-ref-col .face-library-trigger{
  height:40px;
  min-height:40px;
}

.section-add-face .face-preview-under,
#facePreview2.face-preview-slot{
  margin-top:10px !important;
  width:100% !important;
  max-width:100% !important;
  border:1px solid rgba(76,117,96,.14);
  border-radius:16px;
  background:#fafafa;
  padding:6px;
  overflow:hidden;
}

.section-add-face .face-preview-under img,
#facePreviewImg2{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:1.7 / 1;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* ===== Drawer section ===== */
.tiroir-face-grid{
  display:grid;
  grid-template-columns:minmax(240px, auto) 238px;
  column-gap:18px;
  row-gap:8px;
  align-items:start;
  width:100%;
}

.tiroir-face-radios{
  grid-column:1;
  grid-row:1;
  align-self:start;
}

.tiroir-face-left-col{
  grid-column:1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:start;
}

.tiroir-face-color{
  margin-top:4px;
  width:240px;
  max-width:240px;
}

.tiroir-face-select,
#tiroirFaceSelectWrap{
  grid-column:2;
  grid-row:1;
  width:238px;
  max-width:238px;
  align-self:start;
}

#tiroirFaceSelectWrap{
  display:none;
}

#tiroirFaceSelectWrap.is-visible{
  display:flex !important;
  flex-direction:column;
  margin-top:-24px !important;
}

#tiroirFaceSelectWrap .tiroir-face-ref-label{
  margin:0 0 4px 0 !important;
  line-height:1.1;
}

#tiroirFaceSelectWrap .face-library-field{
  margin-top:0 !important;
}

#tiroirFaceSelectWrap .face-library-trigger{
  height:40px;
  min-height:40px;
}

#tiroirFacePreview{
  display:none !important;
  grid-column:2;
  grid-row:2;
  width:238px !important;
  max-width:238px !important;
  margin:6px 0 0 0 !important;
  border:1px solid rgba(76,117,96,.14);
  border-radius:16px;
  background:#fafafa;
  padding:6px !important;
  overflow:hidden;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
}

#tiroirFacePreview.is-visible{
  display:flex !important;
}

#tiroirFacePreviewImg{
  display:block;
  width:100%;
  max-width:none;
  aspect-ratio:1.7 / 1;
  object-fit:cover;
  border-radius:12px;
}

/* ===== Modal ===== */
.face-library-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:10000;
}
.face-library-backdrop.is-open{opacity:1;pointer-events:auto}

.face-library-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:10001;
}
.face-library-modal.is-open{opacity:1;pointer-events:auto}

.face-library-card{
  width:min(1220px, calc(100vw - 28px));
  max-height:min(90vh, 940px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(76,117,96,.18);
  box-shadow:0 34px 90px rgba(0,0,0,.22);
  transform:translateY(8px) scale(.988);
  transition:transform .22s ease;
}
.face-library-modal.is-open .face-library-card{transform:translateY(0) scale(1)}

.face-library-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(76,117,96,.10);
  background:linear-gradient(180deg, rgba(121,193,66,.06), rgba(255,255,255,0));
}
.face-library-title-wrap h3{margin:0;color:var(--text);font-size:1.08rem}
.face-library-title-wrap p{margin:4px 0 0;color:var(--muted);font-size:13px}
.face-library-close{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:14px;
  border:1px solid rgba(76,117,96,.16);
  background:#fff;
  color:var(--text);
  padding:0;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
}
.face-library-tools{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 14px;
  border-bottom:1px solid rgba(76,117,96,.08);
}
.face-library-search{flex:1 1 320px;min-width:220px}
.face-library-meta{color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.face-library-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0;min-height:0;flex:1 1 auto}
.face-library-grid-wrap{min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 26px 20px 20px;scrollbar-gutter:stable;contain:layout paint size;box-sizing:border-box}
.face-library-grid{position:relative;min-height:1px;width:100%;box-sizing:border-box}
.face-library-sentinel{height:1px;width:100%}

.face-library-item{
  appearance:none;
  position:absolute;
  top:0;
  left:0;
  border:1px solid rgba(76,117,96,.14);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  text-align:left;
  transition:box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
  will-change:transform;
}
.face-library-item:hover,
.face-library-item:focus-visible{
  border-color:rgb(121, 193, 66);
  background:rgba(121, 193, 66, .10);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
  outline:none;
}
.face-library-item.is-selected{
  border-color:rgba(121,193,66,.48);
  background:linear-gradient(180deg, rgba(121,193,66,.10), rgba(255,255,255,1) 32%);
  box-shadow:0 0 0 4px rgba(121,193,66,.14);
}
.face-library-thumb{aspect-ratio:1/1;width:100%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.face-library-thumb img{width:100%;height:100%;object-fit:cover;display:block;background:#eef6f0}
.face-library-bodycopy{padding:8px 10px 10px;min-height:76px;display:flex;flex-direction:column;justify-content:flex-start;box-sizing:border-box;overflow:hidden}
.face-library-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:12px;font-weight:800;line-height:1.22;word-break:break-word;min-height:2.5em;margin:0}
.face-library-hint{margin-top:2px;color:var(--muted);font-size:10px;line-height:1.2;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.face-library-item:hover .face-library-label,
.face-library-item:focus-visible .face-library-label{color:rgb(73, 132, 37)}
.face-library-item:hover .face-library-hint,
.face-library-item:focus-visible .face-library-hint{color:rgb(73, 132, 37)}

.face-library-side{
  border-left:1px solid rgba(76,117,96,.08);
  background:linear-gradient(180deg, rgba(241,248,243,.95), rgba(247,250,248,.88));
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.face-library-preview-box{border:1px solid rgba(76,117,96,.12);border-radius:20px;background:#fff;overflow:hidden}
.face-library-preview-media{aspect-ratio:1.18/1;background:linear-gradient(180deg,#eef6f0,#f7fbf8);display:flex;align-items:center;justify-content:center}
.face-library-preview-media img{width:100%;height:100%;object-fit:cover;display:block}
.face-library-preview-copy{padding:14px}
.face-library-preview-copy strong{display:block;color:var(--text);line-height:1.4}
.face-library-preview-copy p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.face-library-empty,.face-library-loading{padding:24px;border:1px dashed rgba(76,117,96,.18);border-radius:18px;background:rgba(255,255,255,.8);color:var(--muted);text-align:center;font-size:14px}
.face-library-selected-line{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(121,193,66,.12);color:var(--green-2);font-size:12px;font-weight:800}
.face-library-help{color:var(--muted);font-size:12px;line-height:1.55}

@media (max-width: 900px){
  .face-library-card{
    width:min(100vw - 16px, 760px);
    max-height:92vh;
    border-radius:22px;
  }

  .face-library-head{
    padding:18px 18px 12px;
  }

  .face-library-tools{
    padding:12px 18px 12px;
  }

  .face-library-body{
    grid-template-columns:1fr;
    min-height:0;
  }

  .face-library-side{
    display:none !important;
  }

  .face-library-grid-wrap{
    padding:14px 14px 18px;
  }

  .tiroir-face-grid{
    grid-template-columns:1fr;
  }

  .tiroir-face-select,
  #tiroirFaceSelectWrap,
  #tiroirFacePreview,
  .section-add-face .face-ref-col{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  #tiroirFaceSelectWrap.is-visible{
    margin-top:0 !important;
  }
}


/* MOBILE FULLSCREEN : garder seulement la grille et agrandir fortement la popup */
@media (max-width: 1100px), (hover: none) and (pointer: coarse){
  .face-library-modal{
    padding: 4px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  .face-library-card{
    width: min(100vw - 8px, 760px) !important;
    height: 96dvh !important;
    max-height: 96dvh !important;
    border-radius: 18px !important;
    margin: auto !important;
  }

  .face-library-head{
    padding: 12px 14px 10px !important;
  }

  .face-library-title-wrap p{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .face-library-tools{
    padding: 10px 14px 10px !important;
    gap: 8px !important;
  }

  .face-library-search{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .face-library-meta{
    width: 100% !important;
    white-space: normal !important;
  }

  .face-library-body{
    display: block !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  .face-library-side,
  .face-library-preview,
  .face-library-preview-box,
  .face-library-preview-media,
  .face-library-preview-copy,
  .face-library-selected-line{
    display: none !important;
  }

  .face-library-grid-wrap{
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 10px 14px !important;
    -webkit-overflow-scrolling: touch;
  }

  .face-library-grid{
    width: 100% !important;
  }


  .face-library-item{height:auto !important;}
  .face-library-bodycopy{min-height:76px !important;padding:8px 10px 10px !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;}
  .face-library-hint{display:block !important;font-size:10px !important;line-height:1.15 !important;margin-top:2px !important;color:#6b7280 !important;}
}



/* fix mobile card spacing */
.face-card{
display:flex;
flex-direction:column;
height:auto;
}

.face-card-label{
padding:8px 10px;
line-height:1.2;
min-height:auto;
}

.face-card-label strong{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}


/* === Drawer finish: desktop + mobile final layout fix === */
#tiroirFaceSelectWrap,
.tiroir-face-select,
.tiroir-face-grid,
.tiroir-face-left-col,
.tiroir-3d-visual,
#tiroirFacePreview{
  min-width:0;
}

#tiroirFaceSelectWrap .face-library-field,
#tiroirFaceSelectWrap .face-library-trigger{
  width:100%;
  max-width:100%;
}

#tiroirFaceSelectWrap.is-visible{
  margin-top:0 !important;
}

#tiroirFacePreview,
.tiroir-3d-visual{
  background:#fafafa;
  border:1px solid rgba(76,117,96,.14);
}

@media (min-width: 901px){
  .tiroir-face-grid{
    grid-template-columns:315px minmax(0,1fr);
    column-gap:18px;
    row-gap:14px;
    align-items:start;
    width:100%;
  }

  .tiroir-face-radios{
    grid-column:1;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
    width:100%;
  }

  .tiroir-face-radios .radio-pill{
    width:100%;
    min-height:64px;
    justify-content:flex-start;
    white-space:normal;
    padding:12px 14px;
  }

  .tiroir-face-radios .radio-pill span{
    white-space:normal;
    line-height:1.2;
  }

  .tiroir-face-left-col{
    grid-column:1;
    grid-row:2;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:stretch;
  }

  .tiroir-face-color{
    width:100%;
    max-width:none;
    margin-top:0;
  }

  .tiroir-face-color select{
    width:100%;
  }

  .tiroir-3d-visual{
    width:100%;
    max-width:none;
    padding:10px;
  }

  .tiroir-3d-visual model-viewer{
    background: var(--model-3d-bg, #f1f3f5);
    width:100%;
    height:320px;
  }

  #tiroirFaceSelectWrap{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
    margin:0 !important;
    position:relative;
    z-index:2;
  }

  #tiroirFaceSelectWrap,
  #tiroirFaceSelectWrap .datalist-input-wrap,
  #tiroirFaceRefInput,
  #tiroirFaceOverlay{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .tiroir-face-grid > *{
    min-width:0;
  }

  #tiroirFacePreview{
    grid-column:2;
    grid-row:2;
    width:100% !important;
    max-width:none !important;
    min-height:342px;
    margin:0 !important;
    padding:10px !important;
    align-self:start;
  }

  #tiroirFacePreviewImg{
    width:100%;
    height:320px;
    max-width:none;
    object-fit:cover;
  }
}

@media (max-width: 900px){
  .tiroir-face-grid{
    display:flex;
    flex-direction:column;
    row-gap:12px;
  }

  .tiroir-face-left-col{
    order:1;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .tiroir-face-radios{
    order:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:100%;
  }

  .tiroir-face-radios .radio-pill{
    width:100%;
    min-height:58px;
    justify-content:flex-start;
    white-space:normal;
    padding:12px 14px;
  }

  .tiroir-face-radios .radio-pill span{
    white-space:normal;
    line-height:1.2;
  }

  #tiroirFaceSelectWrap{
    order:3;
  }

  #tiroirFacePreview{
    order:4;
  }

  .tiroir-face-color,
  .tiroir-3d-visual,
  #tiroirFacePreview,
  #tiroirFaceSelectWrap{
    width:100% !important;
    max-width:none !important;
  }

  .tiroir-3d-visual model-viewer,
  #tiroirFacePreviewImg{
    height:260px;
  }
}

@media (max-width: 560px){
  .tiroir-face-radios{
    grid-template-columns:1fr;
  }
}