/* ======================================================================
   artlocate • Component: Colorpicker (BEM strict) • v3.0 • 2026-02
   ----------------------------------------------------------------------
   Desktop (hover/fine):
   - preview .picker caché
   - inline palette .c-colorpick
   Mobile/Tablet (<=1024px or coarse):
   - sheet fullscreen .c-colorpickSheet
   - overlay .c-colorpickOverlay
   Highlight pro: ring + ✓
====================================================================== */

:root{
  --cp-sheet-dur: 360ms;
  --cp-ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --cp-ease-out: cubic-bezier(0.7, 0, 0.3, 1);

  /* sheet (mobile defaults) */
  --cp-swatch: 44px;
  --cp-gap: 10px;
  --cp-pad: 30px;

  /* inline (desktop defaults) */
  --cp-inline-swatch: 30px;
  --cp-inline-gap: 10px;
  --cp-inline-cols: 10;
}

/* -----------------------------------------------------
   Inline palette (Desktop)
----------------------------------------------------- */
.c-colorpick{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.c-colorpick__label{
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: #3b454b;
}

.c-colorpick__grid{
  display: grid;
  gap: var(--cp-inline-gap);
  grid-template-columns: repeat(var(--cp-inline-cols), var(--cp-inline-swatch));
  justify-content: start;
  align-content: start;
}

.c-colorpick__recentLabel{
  margin-top: 6px;
  font-size: .82rem;
  opacity: .75;
}

.c-colorpick__recent{
  display: grid;
  gap: var(--cp-inline-gap);
  grid-template-columns: repeat(var(--cp-inline-cols), var(--cp-inline-swatch));
}

/* swatch button (commune inline + sheet) */
.c-colorpick__swatch{
  width: var(--cp-inline-swatch);
  height: var(--cp-inline-swatch);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
  cursor: pointer;
  position: relative;
  transition: transform .06s ease, box-shadow .18s ease;
  background: transparent;
  padding: 0;
}

/* Hover desktop */
@media (hover:hover) and (pointer:fine) {
  .c-colorpick__swatch:hover{ box-shadow: 0 0 0 3px rgba(0,0,0,.06) inset; }
  .c-colorpick__swatch:active{ transform: scale(.97); }
}

/* =====================================================
   FIX — Trigger carré (.picker) visible en mobile
   ===================================================== */

/* base (toutes tailles) : le trigger doit avoir une size */
.picker-color{
  display: inline-flex;
  align-items: center;
}

.picker-color > .picker{
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
  cursor: pointer;
  background-color: transparent;
}

/* mobile/tablette : un poil plus “touch friendly” si tu veux */
@media (max-width: 1024px), (pointer: coarse) {
  .picker-color > .picker{
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
}

/* tablette : si tu veux aligné avec ton --swatch=70 */
@media (min-width: 641px) and (max-width: 1024px) {
  .picker-color > .picker{
    width: 70px;
    height: 70px;
    border-radius: 12px;
  }
}

/* Desktop ONLY : on cache le trigger (>=1025px) */
@media (min-width: 1025px) {
  .picker-color > .picker { display: none !important; }
}

/* Mobile/tablette : trigger visible */
@media (max-width: 1024px) {
  .picker-color > .picker{
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
    cursor: pointer;
  }
}

/* dammier = no-color (si tu ne l'as pas déjà) */
.picker.no-color{
  background-image:
    repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),
    repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);
  background-position: 0 0,4px 4px;
  background-size: 8px 8px;
}


/* -----------------------------------------------------
   Sheet (Mobile/Tablet)
----------------------------------------------------- */

/* Safety: si on est en desktop, on ne doit JAMAIS voir l'overlay sheet */
@media (min-width: 1025px) {
  .c-colorpickOverlay { display: none !important; }
}

@media (max-width: 1024px), (pointer: coarse) {

  /* mobile: pas d’inline */
  .c-colorpick{ display: none !important; }

  .c-colorpickOverlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;
    background: transparent !important;
    pointer-events: auto !important;
    overflow-x: hidden !important;
  }

  .c-colorpickSheet{
    position: fixed !important;
    inset: 0 !important;
    z-index: 4001 !important;
    width: 100% !important;
    height: 100dvh !important;
    background: #fff !important;

    display: grid !important;
    grid-template-rows: auto 1fr;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,.18) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;

    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);

    animation: cpSheetIn var(--cp-sheet-dur) var(--cp-ease-in) both;
  }

  @keyframes cpSheetIn{
    from{ transform: translateY(100%); opacity: 0; }
    to  { transform: translateY(0);    opacity: 1; }
  }

  .c-colorpickSheet.is-leaving{
    animation:
      cpSheetOutY 420ms var(--cp-ease-out) forwards,
      cpSheetFade 260ms ease 380ms forwards;
  }

  @keyframes cpSheetOutY{
    from{ transform: translateY(0); }
    to  { transform: translateY(100%); }
  }
  @keyframes cpSheetFade{
    from{ opacity: 1; }
    to  { opacity: 0; }
  }

  .c-colorpickSheet__header{
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;

    height: 64px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;

    font-size: 1.0625rem;
    font-weight: 600;
  }

  .c-colorpickSheet__body{
    min-height: 0;
    padding: var(--cp-pad);
    box-sizing: border-box;
  }

  .c-colorpickSheet__grid{
    --cp-cols: 6;
    display: grid;
    gap: var(--cp-gap);
    grid-template-columns: repeat(var(--cp-cols), var(--cp-swatch));
    justify-content: space-between;
    justify-items: center;
    align-content: start;
  }

  /* swatches sheet sizing */
  .c-colorpickSheet .c-colorpick__swatch{
    width: var(--cp-swatch);
    height: var(--cp-swatch);
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
  }

  .c-colorpickSheet__noColor{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .c-colorpickSheet__noColorLabel{
    margin: 0;
    color: #3b454b;
    font-weight: 600;
    font-size: .95rem;
  }

  .c-colorpickSheet__noColorBtn{
    width: var(--cp-swatch);
    height: var(--cp-swatch);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
    cursor: pointer;

    background-image:
      repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),
      repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);
    background-position: 0 0,4px 4px;
    background-size: 8px 8px;
  }

  .c-colorpickSheet::after{
    content: '';
    display: block;
    height: env(safe-area-inset-bottom, 0px);
  }
}

/* variants swatch/padding */
@media (max-width: 640px){
  .c-colorpickSheet{
    --cp-pad: 30px;
    --cp-swatch: 44px;
  }
}
@media (min-width: 641px) and (max-width: 1024px){
  .c-colorpickSheet{
    --cp-pad: 80px;
    --cp-swatch: 70px;
  }
}
@supports (-webkit-touch-callout: none){
  @media (min-width: 768px) and (max-width: 1024px){
    .c-colorpickSheet{
      --cp-pad: 80px;
      --cp-swatch: 70px;
    }
  }
}

/* focus tactile */
@media (hover:none), (pointer:coarse){
  .c-colorpick__swatch:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(41,54,61,.25) inset !important;
  }
}

/* -----------------------------------------------------
   Highlight pro (commun inline + sheet)
----------------------------------------------------- */
.c-colorpick__swatch.is-selected{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.22),
    0 0 0 6px rgba(255,255,255,.75) inset,
    0 10px 22px rgba(0,0,0,.14);
}

.c-colorpick__swatch.is-selected::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 0 2px rgba(0,0,0,.35);
  pointer-events: none;
}

.c-colorpick__swatch.is-selected.is-light::after{
  color: #111;
  text-shadow:
    0 2px 6px rgba(255,255,255,.45),
    0 0 2px rgba(255,255,255,.35);
}

/* ===============================
   SHEET footer (recents)
================================ */
@media (max-width: 1024px), (pointer: coarse) {

  /* (optionnel) si tu gardes encore le CSS de noColor, on le neutralise */
  .c-colorpickSheet__noColor{ display: none !important; }

  .c-colorpickSheet__footer{
    padding: 14px var(--cp-pad) calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eee;
    background: #fff;
  }

  .c-colorpickSheet__recentLabel{
    display: block;
    margin: 0 0 10px 0;
    font-size: .95rem;
    font-weight: 700;
    color: #15212f;
  }

  .c-colorpickSheet__recentGrid{
    --cp-cols: 6; /* fallback si JS ne l’a pas mis */
    display: grid;
    gap: var(--cp-gap);
    grid-template-columns: repeat(var(--cp-cols), var(--cp-swatch));
    justify-content: space-between;
    justify-items: center;
  }

  /* “Aucune couleur” (dammier) dans le footer */
  .c-colorpickSheet__clearSwatch{
    background-image:
      repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),
      repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);
    background-position: 0 0,4px 4px;
    background-size: 8px 8px;
  }
}