/* ============================================================
   pc-hsv-picker.css — Color picker HSV maison (mockup de
   <pc-color-picker-rgaa> COMPOSANTS · zéro dépendance · BRAND no-bloat)

   SOURCE UNIQUE partagée · utilisé par admin/apparence ET la sidebar
   d'aperçu (apercu-sidebar.js). Le <input type=color> natif (onglet
   « Suggestion », S/V=0, non pilotable) est remplacé : l'input reste
   CACHÉ comme modèle de valeur, la pastille est un bouton qui ouvre ce
   panneau Teinte/Saturation/Valeur.

   Retours11 (décision AskUserQuestion) · le popover ne doit JAMAIS
   recouvrir les pastilles/verdicts → PANNEAU FIXE CENTRÉ (modale
   légère · scrim) à TOUTES tailles · ferme au clic extérieur / Échap.
   (Recherche UX : popover ancré qui ne recouvre pas le contenu
   critique · ici simplifié en panneau centré · pas de lib externe.)
   ============================================================ */

.pc-hsv__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: var(--z-modal-backdrop, 1000);
  display: none;
}
.pc-hsv__scrim--ouvert { display: block; }

.pc-hsv {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, calc(100vw - 2 * var(--espacement-md)));
  background: var(--background-card);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-lg);
  padding: var(--espacement-md);
  z-index: var(--z-modal, 1010);
  /* A4 · pas de sélection de texte natif (carré bleu Android au drag). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  display: none;
}
.pc-hsv--ouvert { display: block; }

/* R12-F · panneau ouvert depuis la sidebar « Aperçu en direct » · il ne
   doit JAMAIS recouvrir la sidebar ni la pastille active (sinon on ne
   voit pas la couleur se mettre à jour dans le carré). Le z-index reste
   au-dessus (--z-modal 1010 > --apercu-sidebar-z 900). On RECENTRE le
   panneau hors de la zone des pastilles :
   - desktop : la sidebar est top-right (largeur 340px + marge md) → on
     centre le panneau dans la zone page restante À GAUCHE de la sidebar
     (décalage du centre vers la gauche de la demi-largeur occupée) ;
   - mobile : la sidebar est un bottom-sheet (≤ 50vh en bas) → on centre
     le panneau dans la moitié HAUTE libre (la preview reste visible).
   Fallbacks si les vars apercu-sidebar ne sont pas chargées (le cas
   admin/apparence n'ajoute jamais .pc-hsv--apercu · garde-fou). */
.pc-hsv--apercu {
  left: calc(50% - (var(--apercu-sidebar-width-desktop, 340px) + var(--espacement-md, 16px)) / 2);
}
@media (max-width: 767.98px) {
  .pc-hsv--apercu {
    left: 50%;
    top: 25vh;
  }
}

.pc-hsv__sv, .pc-hsv__hue {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pc-hsv__sv {
  position: relative;
  width: 100%;
  height: 148px;
  border-radius: var(--rayon-md);
  cursor: crosshair;
  touch-action: none;
  border: 1px solid var(--border-subtil);
  /* fond = teinte pure + dégradés blanc(gauche) et noir(bas) · maj JS */
}
.pc-hsv__sv-thumb,
.pc-hsv__hue-thumb {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pc-hsv__hue {
  position: relative;
  width: 100%;
  height: 14px;
  margin-top: var(--espacement-md);
  border-radius: var(--rayon-rond);
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.pc-hsv__hue-thumb { top: 50%; }
.pc-hsv__row {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  margin-top: var(--espacement-md);
}
.pc-hsv__hex {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--texte-sm);
  padding: var(--espacement-xs) var(--espacement-sm);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-md);
  background: var(--background-section);
  color: var(--text-page);
  text-transform: lowercase;
}
.pc-hsv__hex:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pc-hsv__close {
  flex-shrink: 0;
  padding: var(--espacement-xs) var(--espacement-sm);
  font-size: var(--texte-sm);
  font-weight: var(--poids-semibold);
  background: var(--commune-primary);
  color: var(--commune-primary-texte, #fff);
  border: none;
  border-radius: var(--rayon-md);
  cursor: pointer;
}
.pc-hsv__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pc-hsv__sv:focus-visible,
.pc-hsv__hue:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  .pc-hsv { transition: none; }
}