/* Un même reflet rose / bleu pour tous les contrôles Signature.
   Les ombres intérieures se fondent progressivement, sans déplacer les éléments. */
@media screen {
  :root[data-concept=signature] {
    --interaction-pink: #f595c0;
    --interaction-accent: #e82f89;
    --interaction-light: inset 28px 0 38px -14px #344c9dc9,
      inset -28px 0 38px -14px #e82f8980,
      0 0 0 1px #f595c0, 0 4px 16px #24398438;
  }

  :root[data-concept=signature] body :is(.header #main-navigation>a,
    a[href], button, input:not([type=hidden]), select, textarea, summary,
    [role=button], [role=radio], [role=checkbox], [role=option], [role=tab],
    [tabindex]:not([tabindex^="-"]),
    .catalogue-filter-option, .studio-model-option, .studio-upload, .check-row,
    .request-mode label, label:has(>input[type=checkbox], >input[type=radio]),
    .product-card, .led-stage) {
    --interaction-rest-top: transparent;
    --interaction-rest-pink: transparent;
    --interaction-rest-drop: transparent;
    /* Même ordre d'ombres au repos et au survol pour permettre leur interpolation. */
    box-shadow: inset 0 1px 0 0 var(--interaction-rest-top),
      inset 0 -2px 0 0 var(--interaction-rest-pink),
      0 0 0 0 transparent, 0 3px 10px 0 var(--interaction-rest-drop);
    transition: box-shadow 220ms ease, border-color 220ms ease,
      color 220ms ease, background-color 220ms ease,
      outline-color 220ms ease, text-decoration-color 220ms ease;
  }
  :root[data-concept=signature] body :is(.header #main-navigation>a,
    .button, .auth-button, .menu-toggle, .cart-button, .catalogue-filter-button,
    .mobile-category, .category-button, .led-power, .led-off, .led-temperatures button,
    .led-stage-bottom button, .studio-temperature, .site-back, .chat-launcher,
    .product-card, .led-stage) {
    --interaction-rest-top: #ffffff26;
    --interaction-rest-drop: #0002;
  }
  :root[data-concept=signature] body :is(.header #main-navigation>a[aria-current=page],
    .category-button[aria-pressed=true]) { --interaction-rest-pink: transparent; }

  /* Une sélection est un état interactif, y compris sur un écran tactile. */
  :root[data-concept=signature] body :is(.header #main-navigation>a,
    button, a[href], [role=radio], [role=checkbox], [role=option], [role=tab]):not(:disabled):not([aria-disabled=true]):is([aria-current=page], [aria-pressed=true], [aria-selected=true], [aria-checked=true]),
  :root[data-concept=signature] body label:has(>input:checked):not(:has(:disabled)),
  :root[data-concept=signature] body .pro-field:focus-within {
    border-color:var(--interaction-pink)!important;
    box-shadow:var(--interaction-light)!important;
  }
  :root[data-concept=signature] body input:is([type=checkbox],[type=radio]) { accent-color:var(--interaction-accent); }

  /* Les lignes entières réagissent aussi au clavier et à l'appui tactile. */
  :root[data-concept=signature] body :is(.catalogue-filter-option,
    .studio-model-option, .studio-upload, .check-row, .request-mode label,
    label:has(>input[type=checkbox], >input[type=radio])):not(:has(:disabled, [aria-disabled=true])):is(:focus-within, :active),
  :root[data-concept=signature] body :is(.header #main-navigation>a,
    a[href], button, input:not([type=hidden]), select, textarea, summary,
    [role=button], [role=radio], [role=checkbox], [role=option], [role=tab],
    [tabindex]:not([tabindex^="-"])):not(.product-open):not(.led-canvas):not(:disabled):not([aria-disabled=true]):is(:focus-visible, :active),
  :root[data-concept=signature] body .product-card:has(.product-open:focus-visible),
  :root[data-concept=signature] body .led-stage:has(.led-canvas:focus-visible) {
    border-color: var(--interaction-pink)!important;
    box-shadow: var(--interaction-light)!important;
    text-decoration-color: var(--interaction-pink);
  }
  :root[data-concept=signature] body :is(.catalogue-filter-option,
    .studio-model-option, .check-row, .request-mode label) { border-radius: 8px; }
  :root[data-concept=signature] body :is(a[href], button, summary) {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* La carte porte le reflet ; la photo et le modèle LED restent sans filtre. */
  :root[data-concept=signature] body .product-card .product-open:is(:hover, :active) {
    box-shadow: none!important;
  }
  :root[data-concept=signature] body .led-canvas:is(:hover, :active) {
    box-shadow: none!important;
  }
}

@media screen and (hover:hover) and (pointer:fine) {
  :root[data-concept=signature] body :is(.header #main-navigation>a,
    a[href], button, input:not([type=hidden]), select, textarea, summary,
    [role=button], [role=radio], [role=checkbox], [role=option], [role=tab],
    [tabindex]:not([tabindex^="-"])):not(.product-open):not(.led-canvas):not(:disabled):not([aria-disabled=true]):hover,
  :root[data-concept=signature] body :is(.catalogue-filter-option,
    .studio-model-option, .studio-upload, .check-row, .request-mode label,
    label:has(>input[type=checkbox], >input[type=radio])):not(:has(:disabled, [aria-disabled=true])):hover,
  :root[data-concept=signature] body .product-card:has(.product-open:hover),
  :root[data-concept=signature] body .led-stage:has(.led-canvas:hover) {
    border-color: var(--interaction-pink)!important;
    box-shadow: var(--interaction-light)!important;
    text-decoration-color: var(--interaction-pink)!important;
    outline-color: var(--interaction-pink);
  }
  :root[data-concept=signature] body :is(a[href], button, summary,
    .catalogue-filter-option, .studio-model-option, .check-row,
    .request-mode label):not(:disabled):not([aria-disabled=true]):not(:has(:disabled)):hover {
    color: #fff!important;
  }
  :root[data-concept=signature] body :is(.text-link,
    .footer-company-info a, .contact-email a):hover {
    box-shadow: var(--interaction-light)!important;
  }
  :root[data-concept=signature] body .product-card .product-open:hover,
  :root[data-concept=signature] body .led-canvas:hover { box-shadow: none!important; }
}

@media (prefers-reduced-motion:reduce) {
  :root[data-concept=signature] body * { transition: none!important; }
}
@media (forced-colors:active) {
  :root[data-concept=signature] body :is(a[href], button, input, select, textarea,
    summary, [tabindex]):is(:hover, :focus-visible) {
    outline: 2px solid Highlight!important;
    outline-offset: 3px;
  }
}