// Design system officiel du Web Vasco.
//
// Les écrans consomment ces primitives au lieu de reconstruire leurs boutons,
// lignes de réglages, champs et feuilles. Les tokens historiques restent la
// source des couleurs : ce module leur ajoute les contrats de composition,
// de typographie et de mouvement qui manquaient à l'application connectée.

if (!window.VascoDesignContract) {
  throw new Error('Le contrat visuel Vasco doit être chargé avant le UI Kit.');
}

const VASCO_UI_TOKENS = window.VascoDesignContract;

function VascoCloseIcon({ size = 18 }) {
  return <svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M18 6L6 18M6 6l12 12" />
  </svg>;
}

function VascoChevronIcon({ direction = 'right', size = 16 }) {
  const path = direction === 'left' ? 'M15 6l-6 6 6 6' : 'M9 6l6 6-6 6';
  return <svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d={path} />
  </svg>;
}

// Babel Standalone transforme chaque fichier JSX dans la portée globale. Ses
// variables d'aide (`_excluded`, `_excluded2`, …) peuvent donc être remplacées
// par un fichier chargé plus tard. Une décomposition avec `...buttonProps`
// finirait alors par transmettre des propriétés React internes au DOM. Cette
// allowlist garde les attributs HTML/accessibilité utiles sans dépendre de ces
// helpers globaux.
//
// Aucune primitive du socle n'utilise plus `...rest` : le tri se fait par ce
// qu'un élément natif accepte, jamais par ce qu'on pense avoir retiré. Une
// primitive dont les données portent un nom d'attribut HTML (`value`,
// `options`, `name`) déclare ce qu'elle consomme dans `ownProps` : cette part
// reste à elle et ne traverse pas vers le DOM.
function vascoSafeButtonProps(props, ownProps = null) {
  const safe = {};
  const htmlAttributes = new Set(['id', 'name', 'value', 'form', 'tabIndex', 'autoFocus', 'role']);
  const domEvents = new Set([
    'onBlur', 'onFocus', 'onKeyDown', 'onKeyUp', 'onMouseEnter', 'onMouseLeave',
    'onPointerDown', 'onPointerUp',
  ]);
  Object.entries(props || {}).forEach(([key, value]) => {
    if (ownProps && ownProps.has(key)) return;
    if (key.startsWith('aria-') || key.startsWith('data-')
      || htmlAttributes.has(key) || domEvents.has(key)) safe[key] = value;
  });
  return safe;
}

function VascoButton(props) {
  const { children, onClick, variant = 'secondary', size = 'large', disabled = false,
    busy = false, busyLabel = null, icon = null, grow = false, type = 'button', ariaLabel = null,
    buttonRef = null, style = {} } = props;
  const buttonProps = vascoSafeButtonProps(props);
  const solid = variant === 'solid';
  const accent = variant === 'accent';
  const accentSoft = variant === 'accent-soft';
  const successSoft = variant === 'success-soft';
  const neutralSoft = variant === 'neutral-soft';
  const danger = variant === 'danger';
  const ghost = variant === 'ghost';
  const height = {
    small: VASCO_UI_TOKENS.control.small,
    medium: VASCO_UI_TOKENS.control.medium,
    large: VASCO_UI_TOKENS.control.large,
  }[size] || VASCO_UI_TOKENS.control.large;
  const inactive = disabled || busy;
  return <button {...buttonProps} ref={buttonRef} type={type} onClick={onClick} disabled={inactive} className="press"
    aria-label={ariaLabel || undefined} style={{
      flex: grow ? '1 1 0' : '0 0 auto', minWidth: 0, height,
      padding: ghost ? '0 8px' : '0 16px', borderRadius: VASCO_UI_TOKENS.radius.lg,
      background: danger ? VASCO_UI_TOKENS.color.danger
        : accent ? VASCO_UI_TOKENS.color.accent
        : successSoft ? VASCO_UI_TOKENS.color.successTint
        : neutralSoft ? VASCO_UI_TOKENS.color.neutralTint
        : accentSoft ? VASCO_UI_TOKENS.color.accentTint : solid ? VASCO_UI_TOKENS.color.ink
        : ghost ? 'transparent' : VASCO_UI_TOKENS.color.surface,
      border: solid || accent || danger || ghost || neutralSoft ? 'none' : successSoft
        ? `1px solid color-mix(in srgb, ${VASCO_UI_TOKENS.color.success} 22%, transparent)`
        : accentSoft
        ? `1px solid color-mix(in srgb, ${VASCO_UI_TOKENS.color.accent} 18%, transparent)`
        : `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
      color: solid || accent || danger ? '#fff' : neutralSoft
        ? VASCO_UI_TOKENS.color.secondary : successSoft
        ? VASCO_UI_TOKENS.color.success : accentSoft
        ? VASCO_UI_TOKENS.color.accent : VASCO_UI_TOKENS.color.ink,
      fontFamily: VASCO_UI_TOKENS.type.body, fontSize: size === 'small' ? 12 : 14,
      fontWeight: 600, cursor: inactive ? 'default' : 'pointer', opacity: disabled ? .48 : 1,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      ...style,
    }}>
    {busy && typeof VascoSpinner !== 'undefined' && <VascoSpinner size={15}
      color={solid || accent || danger ? '#fff' : neutralSoft
        ? VASCO_UI_TOKENS.color.secondary : successSoft
        ? VASCO_UI_TOKENS.color.success : accentSoft
        ? VASCO_UI_TOKENS.color.accent : VASCO_UI_TOKENS.color.ink} thickness={2} />}
    {!busy && icon}
    <span>{busy && busyLabel ? busyLabel : children}</span>
  </button>;
}

function VascoIconButton({ label, onClick, children, variant = 'secondary', disabled = false,
  size = VASCO_UI_TOKENS.control.icon, buttonRef = null, pressed = null,
  expanded = null, title = null, style = {} }) {
  const ghost = variant === 'ghost';
  return <button ref={buttonRef} type="button" className="press" aria-label={label} onClick={onClick}
    aria-pressed={typeof pressed === 'boolean' ? pressed : undefined}
    aria-expanded={typeof expanded === 'boolean' ? expanded : undefined}
    title={title || undefined} disabled={disabled} style={{
      width: size, height: size, flexShrink: 0, padding: 0,
      borderRadius: VASCO_UI_TOKENS.radius.md,
      border: ghost ? 'none' : `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
      background: ghost ? 'transparent' : VASCO_UI_TOKENS.color.surface,
      color: VASCO_UI_TOKENS.color.ink, display: 'inline-flex', alignItems: 'center',
      justifyContent: 'center', cursor: disabled ? 'default' : 'pointer',
      opacity: disabled ? .48 : 1, ...style,
    }}>{children}</button>;
}

// Action textuelle discrète : relancer, modifier, effacer, afficher la suite.
// Elle évite que chaque écran réinvente le faux lien posé sous une carte.
function VascoInlineAction(props) {
  const { children, onClick, disabled = false, busy = false, danger = false,
    icon = null, ariaLabel = null, title = null, type = 'button', style = {} } = props;
  const buttonProps = vascoSafeButtonProps(props);
  const inactive = disabled || busy;
  return <button {...buttonProps} type={type} className="press" onClick={onClick} disabled={inactive}
    aria-label={ariaLabel || undefined} title={title || undefined} style={{
      minHeight: 32, padding: '0 4px', border: 0, background: 'transparent',
      color: danger ? VASCO_UI_TOKENS.color.danger : VASCO_UI_TOKENS.color.accent,
      fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 12.5, fontWeight: 600,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      cursor: inactive ? 'default' : 'pointer', opacity: inactive ? .48 : 1,
      ...style,
    }}>
    {busy && typeof VascoSpinner !== 'undefined'
      ? <VascoSpinner size={13} color="currentColor" thickness={2} /> : icon}
    <span>{children}</span>
  </button>;
}

// Choix compact pour les filtres et variantes exclusives. `aria-pressed` porte
// l'état : la couleur n'est jamais la seule information disponible.
function VascoChoiceChip(props) {
  const { children, selected = false, onClick, disabled = false,
    ariaLabel = null, title = null, style = {} } = props;
  const buttonProps = vascoSafeButtonProps(props);
  return <button {...buttonProps} type="button" className="press" onClick={onClick} disabled={disabled}
    aria-pressed={selected} aria-label={ariaLabel || undefined} title={title || undefined} style={{
      minHeight: 34, padding: '6px 11px', borderRadius: VASCO_UI_TOKENS.radius.pill,
      border: `1px solid ${selected ? VASCO_UI_TOKENS.color.ink : VASCO_UI_TOKENS.color.borderStrong}`,
      background: selected ? VASCO_UI_TOKENS.color.ink : 'transparent',
      color: selected ? '#fff' : VASCO_UI_TOKENS.color.ink,
      fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 12, fontWeight: 600,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .48 : 1,
      ...style,
    }}>{children}</button>;
}

// État global d'une fonctionnalité : information, simulation, indisponibilité
// ou erreur. Le texte reste la preuve principale ; la couleur et le symbole ne
// font que faciliter le balayage visuel.
function VascoStatusNotice({ title, message = null, tone = 'info', compact = false, style = {} }) {
  const appearances = {
    info: { color: VASCO_UI_TOKENS.color.accent, background: VASCO_UI_TOKENS.color.accentTint, symbol: 'i' },
    success: { color: VASCO_UI_TOKENS.color.success, background: VASCO_UI_TOKENS.color.surfaceAlt, symbol: '✓' },
    warning: { color: VASCO_UI_TOKENS.color.warning, background: VASCO_UI_TOKENS.color.surfaceAlt, symbol: '!' },
    danger: { color: VASCO_UI_TOKENS.color.danger, background: VASCO_UI_TOKENS.color.surfaceAlt, symbol: '!' },
  };
  const appearance = appearances[tone] || appearances.info;
  return <div role={tone === 'danger' ? 'alert' : 'status'} style={{
    display: 'flex', alignItems: message ? 'flex-start' : 'center', gap: 9,
    padding: compact ? '8px 10px' : '11px 12px',
    borderRadius: VASCO_UI_TOKENS.radius.md,
    border: `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
    background: appearance.background, color: VASCO_UI_TOKENS.color.ink,
    fontFamily: VASCO_UI_TOKENS.type.body, ...style,
  }}>
    <span aria-hidden="true" style={{
      width: 20, height: 20, borderRadius: VASCO_UI_TOKENS.radius.pill, flexShrink: 0,
      display: 'grid', placeItems: 'center', color: appearance.color,
      border: `1px solid ${appearance.color}`, fontSize: 11, fontWeight: 700,
    }}>{appearance.symbol}</span>
    <span style={{ minWidth: 0, lineHeight: 1.35 }}>
      <span style={{ display: 'block', color: appearance.color,
        fontSize: compact ? 11.5 : 12.5, fontWeight: 650 }}>{title}</span>
      {message && <span style={{ display: 'block', marginTop: 2,
        color: VASCO_UI_TOKENS.color.secondary,
        fontSize: compact ? 10.5 : 11.5, fontWeight: 500 }}>{message}</span>}
    </span>
  </div>;
}

// Ligne ou carte de choix composée. Les contenus métier restent libres mais la
// surface, l'état sélectionné et la cible tactile restent identiques.
function VascoInteractiveRow(props) {
  const { title = null, subtitle = null, children = null, leading = null,
    trailing = null, onClick, selected = false, disabled = false, ariaLabel = null,
    buttonRef = null, style = {} } = props;
  const buttonProps = vascoSafeButtonProps(props);
  return <button {...buttonProps} ref={buttonRef} type="button" className="press"
    onClick={onClick} disabled={disabled}
    aria-pressed={selected || undefined}
    aria-label={ariaLabel || [title, subtitle].filter(Boolean).join('. ') || undefined} style={{
      width: '100%', minHeight: 48, padding: '10px 12px',
      borderRadius: VASCO_UI_TOKENS.radius.md,
      border: `1px solid ${selected ? VASCO_UI_TOKENS.color.accent : VASCO_UI_TOKENS.color.border}`,
      background: selected ? VASCO_UI_TOKENS.color.accentTint : VASCO_UI_TOKENS.color.surface,
      color: VASCO_UI_TOKENS.color.ink, fontFamily: VASCO_UI_TOKENS.type.body,
      display: 'flex', alignItems: 'center', gap: 10, textAlign: 'left',
      cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .48 : 1,
      ...style,
    }}>
    {leading}
    {children || <span style={{ flex: 1, minWidth: 0 }}>
      <span style={{ display: 'block', fontSize: 13.5, fontWeight: 600 }}>{title}</span>
      {subtitle && <span style={{ display: 'block', marginTop: 2,
        color: VASCO_UI_TOKENS.color.secondary, fontSize: 12, fontWeight: 500 }}>{subtitle}</span>}
    </span>}
    {trailing}
  </button>;
}

function VascoSettingRow({ icon, label, sub, right, onClick, danger = false, reason = null,
  role, checked }) {
  const actionable = Boolean(onClick) && !reason;
  const body = <>
    <div style={{
      width: 36, height: 36, borderRadius: VASCO_UI_TOKENS.radius.md,
      background: danger ? 'rgba(185,28,28,.06)' : 'rgba(10,10,10,.04)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      opacity: reason ? .55 : 1,
    }}>
      <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"
        stroke={danger ? VASCO_UI_TOKENS.color.danger : VASCO_UI_TOKENS.color.ink}
        strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{icon}</svg>
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ ...VASCO_UI_TOKENS.type.row,
        color: danger ? VASCO_UI_TOKENS.color.danger : VASCO_UI_TOKENS.color.ink,
        opacity: reason ? .6 : 1 }}>{label}</div>
      {sub && <div style={{ ...VASCO_UI_TOKENS.type.supporting,
        color: VASCO_UI_TOKENS.color.secondary, marginTop: 2 }}>{sub}</div>}
      {reason && <div style={{ fontSize: 11.5, fontWeight: 500,
        color: VASCO_UI_TOKENS.color.secondary, marginTop: 3, lineHeight: 1.35 }}>{reason}</div>}
    </div>
    {right || (actionable ? <span style={{ color: VASCO_UI_TOKENS.color.secondary, display: 'flex' }}>
      <VascoChevronIcon />
    </span> : null)}
  </>;
  const shared = {
    width: '100%', display: 'flex', alignItems: 'center', gap: 14,
    padding: '14px 16px', background: 'none', border: 'none',
    fontFamily: VASCO_UI_TOKENS.type.body, textAlign: 'left',
  };
  if (!actionable) return <div style={shared} role={role}
    aria-disabled={reason ? 'true' : undefined}
    aria-checked={role === 'switch' ? Boolean(checked) : undefined}
    aria-label={[label, sub, reason].filter(Boolean).join('. ')}>{body}</div>;
  return <button type="button" onClick={onClick} className="press" role={role}
    aria-checked={role === 'switch' ? Boolean(checked) : undefined}
    style={{ ...shared, cursor: 'pointer' }}>{body}</button>;
}

function VascoSettingGroup({ title, children, style = {} }) {
  return <section aria-label={title} style={{ marginBottom: 20, ...style }}>
    <div className="mono" style={{ ...VASCO_UI_TOKENS.type.caption,
      color: VASCO_UI_TOKENS.color.secondary, textTransform: 'uppercase', padding: '0 20px 8px' }}>{title}</div>
    <div style={{ background: VASCO_UI_TOKENS.color.surface,
      borderRadius: VASCO_UI_TOKENS.radius.lg, margin: '0 16px',
      border: `1px solid ${VASCO_UI_TOKENS.color.border}`, overflow: 'hidden' }}>
      {React.Children.map(children, (child, index) => <React.Fragment key={index}>
        {index > 0 && <div aria-hidden="true" style={{ height: 1,
          background: VASCO_UI_TOKENS.color.border, marginLeft: 66 }} />}
        {child}
      </React.Fragment>)}
    </div>
  </section>;
}

function VascoToggle({ on, disabled = false }) {
  return <div aria-hidden="true" style={{
    width: 44, height: 26, borderRadius: 13, padding: 2,
    background: on ? VASCO_UI_TOKENS.color.ink : 'rgba(10,10,10,.12)',
    display: 'flex', alignItems: 'center', justifyContent: on ? 'flex-end' : 'flex-start',
    transition: `background ${VASCO_UI_TOKENS.motion.normal}ms ease`,
    opacity: disabled ? .5 : 1, flexShrink: 0,
  }}><div style={{ width: 22, height: 22, borderRadius: '50%', background: '#fff',
    boxShadow: '0 1px 3px rgba(10,10,10,.15)' }} /></div>;
}

function VascoReplaceCloseAction(node, onClose, requestClose) {
  return React.Children.map(node, (child) => {
    if (!React.isValidElement(child)) return child;
    const nextProps = {};
    if (typeof onClose === 'function' && child.props.onClick === onClose) {
      nextProps.onClick = requestClose;
    }
    if (typeof onClose === 'function' && child.props.onClose === onClose) {
      nextProps.onClose = requestClose;
    }
    if (child.props.children !== undefined) {
      nextProps.children = VascoReplaceCloseAction(child.props.children, onClose, requestClose);
    }
    return Object.keys(nextProps).length ? React.cloneElement(child, nextProps) : child;
  });
}

const VASCO_OVERLAY_SCROLL_LOCK = {
  count: 0,
  bodyOverflow: '',
  bodyOverscroll: '',
  bodyPaddingRight: '',
  rootOverflow: '',
  rootOverscroll: '',
};

function VascoUseOverlayScrollLock(active) {
  React.useEffect(() => {
    if (!active) return undefined;
    const body = document.body;
    const root = document.documentElement;
    if (VASCO_OVERLAY_SCROLL_LOCK.count === 0) {
      VASCO_OVERLAY_SCROLL_LOCK.bodyOverflow = body.style.overflow;
      VASCO_OVERLAY_SCROLL_LOCK.bodyOverscroll = body.style.overscrollBehavior;
      VASCO_OVERLAY_SCROLL_LOCK.bodyPaddingRight = body.style.paddingRight;
      VASCO_OVERLAY_SCROLL_LOCK.rootOverflow = root.style.overflow;
      VASCO_OVERLAY_SCROLL_LOCK.rootOverscroll = root.style.overscrollBehavior;
      const scrollbarWidth = Math.max(0, window.innerWidth - root.clientWidth);
      body.style.overflow = 'hidden';
      body.style.overscrollBehavior = 'none';
      root.style.overflow = 'hidden';
      root.style.overscrollBehavior = 'none';
      if (scrollbarWidth > 0) body.style.paddingRight = `${scrollbarWidth}px`;
    }
    VASCO_OVERLAY_SCROLL_LOCK.count += 1;
    return () => {
      VASCO_OVERLAY_SCROLL_LOCK.count = Math.max(0, VASCO_OVERLAY_SCROLL_LOCK.count - 1);
      if (VASCO_OVERLAY_SCROLL_LOCK.count !== 0) return;
      body.style.overflow = VASCO_OVERLAY_SCROLL_LOCK.bodyOverflow;
      body.style.overscrollBehavior = VASCO_OVERLAY_SCROLL_LOCK.bodyOverscroll;
      body.style.paddingRight = VASCO_OVERLAY_SCROLL_LOCK.bodyPaddingRight;
      root.style.overflow = VASCO_OVERLAY_SCROLL_LOCK.rootOverflow;
      root.style.overscrollBehavior = VASCO_OVERLAY_SCROLL_LOCK.rootOverscroll;
    };
  }, [active]);
}

// Une feuille couvre l'écran qui l'a ouverte, et la feuille basse rejoint même
// une autre racine du document (`#vasco-stage`). Les panneaux qui se ferment
// sur un appui extérieur écoutent, eux, `document` : sans retenue, le premier
// toucher dans la feuille leur paraîtrait venir du dehors, et le panneau
// emporterait la feuille en se fermant. L'overlay retient donc les appuis nés
// chez lui – panneau et fond compris – avant qu'ils n'atteignent `document`.
// Les fermetures extérieures propres au socle restent possibles : elles
// écoutent `document` en phase de capture, qui précède cette retenue.
const vascoHoldOverlayPointer = (event) => event.nativeEvent.stopPropagation();
const VASCO_OVERLAY_POINTER_GUARD = Object.freeze({
  onMouseDown: vascoHoldOverlayPointer,
  onPointerDown: vascoHoldOverlayPointer,
  onTouchStart: vascoHoldOverlayPointer,
});

// Les nouveaux consommateurs gardent la feuille montée et pilotent `open`.
// L'absence de `open` conserve les anciens AcSheet : leur fermeture extérieure,
// leur croix et leur bouton Annuler sont retardés jusqu'à la fin du mouvement.
function VascoFormSheet({ open = undefined, title, subtitle, onClose, children, footer,
  busy = false, maxHeight = '82%', zIndex = VASCO_UI_TOKENS.layer.overlay,
  showClose = true }) {
  const controlled = typeof open === 'boolean';
  const [legacyOpen, setLegacyOpen] = React.useState(true);
  const effectiveOpen = controlled ? open : legacyOpen;
  const [mounted, setMounted] = React.useState(Boolean(effectiveOpen));
  const [visible, setVisible] = React.useState(false);
  const legacyCloseTimer = React.useRef(null);

  const requestClose = () => {
    if (busy) return;
    if (controlled) {
      onClose();
      return;
    }
    if (!legacyOpen || legacyCloseTimer.current !== null) return;
    setLegacyOpen(false);
    legacyCloseTimer.current = window.setTimeout(() => {
      legacyCloseTimer.current = null;
      onClose();
    }, VASCO_UI_TOKENS.motion.formExit);
  };

  React.useEffect(() => {
    let mountFrame = null;
    let revealFrame = null;
    let hideTimer = null;
    if (effectiveOpen) {
      setMounted(true);
      mountFrame = window.requestAnimationFrame(() => {
        revealFrame = window.requestAnimationFrame(() => setVisible(true));
      });
    } else {
      setVisible(false);
      hideTimer = window.setTimeout(
        () => setMounted(false),
        VASCO_UI_TOKENS.motion.formExit,
      );
    }
    return () => {
      if (mountFrame !== null) window.cancelAnimationFrame(mountFrame);
      if (revealFrame !== null) window.cancelAnimationFrame(revealFrame);
      if (hideTimer !== null) window.clearTimeout(hideTimer);
    };
  }, [effectiveOpen]);

  React.useEffect(() => {
    if (!effectiveOpen || busy) return undefined;
    const closeOnEscape = (event) => {
      if (event.key === 'Escape') requestClose();
    };
    document.addEventListener('keydown', closeOnEscape);
    return () => document.removeEventListener('keydown', closeOnEscape);
  }, [effectiveOpen, busy, onClose]);

  React.useEffect(() => () => {
    if (legacyCloseTimer.current !== null) window.clearTimeout(legacyCloseTimer.current);
  }, []);

  if (!mounted) return null;
  const duration = visible
    ? VASCO_UI_TOKENS.motion.formEnter
    : VASCO_UI_TOKENS.motion.formExit;
  const renderedFooter = VascoReplaceCloseAction(footer, onClose, requestClose);
  return <div aria-hidden={!visible} {...VASCO_OVERLAY_POINTER_GUARD} style={{
    position: 'absolute', inset: 0, zIndex,
    pointerEvents: visible ? 'auto' : 'none', display: 'flex', flexDirection: 'column',
  }}>
    <div className="vui-form-sheet-backdrop" aria-hidden="true" style={{
      position: 'absolute', inset: 0, background: 'rgba(0,0,0,.35)',
      opacity: visible ? 1 : 0,
      transition: `opacity ${duration}ms ${VASCO_UI_TOKENS.motion.form}`,
    }} />
    <button type="button" tabIndex="-1" aria-label="Fermer la fenêtre"
      className="vui-form-sheet-dismiss" onClick={busy ? undefined : requestClose}
      style={{ position: 'relative', zIndex: VASCO_UI_TOKENS.layer.dialog,
        flex: '1 1 0', minHeight: 16, border: 0, padding: 0, background: 'transparent',
        cursor: busy ? 'default' : 'pointer' }} />
    <div onClick={busy ? undefined : requestClose} style={{
      position: 'relative', zIndex: VASCO_UI_TOKENS.layer.dialog,
      flex: '0 1 auto', minHeight: 0, maxHeight, padding: '0 16px',
      display: 'flex', alignItems: 'stretch',
    }}>
      <div className="vui-form-sheet-panel" role="dialog" aria-modal="true" aria-label={title}
        onClick={(event) => event.stopPropagation()} style={{
        position: 'relative', flex: '1 1 auto', minWidth: 0, minHeight: 0,
        transform: visible ? 'translateY(0) scale(1)' : 'translateY(8px) scale(.975)',
        opacity: visible ? 1 : 0,
        transition: `opacity ${duration}ms ${VASCO_UI_TOKENS.motion.form}, transform ${duration}ms ${VASCO_UI_TOKENS.motion.form}`,
        background: VASCO_UI_TOKENS.color.surface,
        borderRadius: VASCO_UI_TOKENS.radius.sheet, padding: '20px 20px 18px',
        boxShadow: VASCO_UI_TOKENS.shadow.large, maxHeight: '100%',
        display: 'flex', flexDirection: 'column',
      }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: VASCO_UI_TOKENS.color.ink,
            letterSpacing: '-.2px' }}>{title}</div>
          {subtitle && <div style={{ fontSize: 12.5, fontWeight: 500,
            color: VASCO_UI_TOKENS.color.secondary, marginTop: 4, lineHeight: 1.45 }}>{subtitle}</div>}
        </div>
        {showClose && <VascoIconButton label="Fermer" onClick={requestClose} variant="ghost" size={30}
          disabled={busy}>
          <VascoCloseIcon size={20} />
        </VascoIconButton>}
      </div>
      <div className="vasco-scroll" style={{ flex: 1, overflowY: 'auto', marginTop: 16 }}>{children}</div>
      {renderedFooter && <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>{renderedFooter}</div>}
      <style>{`
        @media (prefers-reduced-motion: reduce) {
          .vui-form-sheet-backdrop,
          .vui-form-sheet-panel { transition-duration: 1ms !important; }
        }
      `}</style>
      </div>
    </div>
    <div aria-hidden="true" onClick={busy ? undefined : requestClose} style={{
      position: 'relative', zIndex: VASCO_UI_TOKENS.layer.dialog,
      flex: '1 1 0', minHeight: 16, cursor: busy ? 'default' : 'pointer',
    }} />
  </div>;
}

// Feuille mobile ancrée en bas. Les nouveaux écrans pilotent `open`. L'absence
// de cette propriété garde temporairement compatibles les anciennes feuilles
// conditionnelles tout en leur donnant une vraie animation de sortie.
function VascoBottomSheet({ open = undefined, title, subtitle, onClose, children, footer,
  busy = false, dismissOnBackdrop = true, height = 'auto', maxHeight = '82%', headerAside = null,
  showClose = true, contentRef = null, contentStyle = {} }) {
  const controlled = typeof open === 'boolean';
  const [legacyOpen, setLegacyOpen] = React.useState(true);
  const effectiveOpen = controlled ? open : legacyOpen;
  const [mounted, setMounted] = React.useState(Boolean(effectiveOpen));
  const [visible, setVisible] = React.useState(false);
  const legacyCloseTimer = React.useRef(null);
  const panelRef = React.useRef(null);
  VascoUseOverlayScrollLock(effectiveOpen);

  const requestClose = () => {
    if (busy) return;
    if (controlled) {
      onClose();
      return;
    }
    if (!legacyOpen || legacyCloseTimer.current !== null) return;
    setLegacyOpen(false);
    legacyCloseTimer.current = window.setTimeout(() => {
      legacyCloseTimer.current = null;
      onClose();
    }, VASCO_UI_TOKENS.motion.sheetExit);
  };

  React.useEffect(() => {
    let mountFrame = null;
    let revealFrame = null;
    let hideTimer = null;
    if (effectiveOpen) {
      setMounted(true);
      // Deux images distinctes garantissent que la position basse est peinte
      // avant le début de la transition, même lorsque React groupe ses mises à jour.
      mountFrame = window.requestAnimationFrame(() => {
        revealFrame = window.requestAnimationFrame(() => {
          setVisible(true);
          panelRef.current?.focus({ preventScroll: true });
        });
      });
    } else {
      setVisible(false);
      hideTimer = window.setTimeout(
        () => setMounted(false),
        VASCO_UI_TOKENS.motion.sheetExit,
      );
    }
    return () => {
      if (mountFrame !== null) window.cancelAnimationFrame(mountFrame);
      if (revealFrame !== null) window.cancelAnimationFrame(revealFrame);
      if (hideTimer !== null) window.clearTimeout(hideTimer);
    };
  }, [effectiveOpen]);

  React.useEffect(() => {
    if (!effectiveOpen || busy) return undefined;
    const closeOnEscape = (event) => {
      if (event.key === 'Escape' && dismissOnBackdrop) requestClose();
    };
    document.addEventListener('keydown', closeOnEscape);
    return () => document.removeEventListener('keydown', closeOnEscape);
  }, [effectiveOpen, busy, onClose]);

  React.useEffect(() => () => {
    if (legacyCloseTimer.current !== null) window.clearTimeout(legacyCloseTimer.current);
  }, []);

  if (!mounted) return null;
  const renderedFooter = VascoReplaceCloseAction(footer, onClose, requestClose);
  const overlayRoot = document.getElementById('vasco-stage') || document.body;
  const sheet = <div aria-hidden={!visible} {...VASCO_OVERLAY_POINTER_GUARD} style={{
    position: overlayRoot === document.body ? 'fixed' : 'absolute',
    inset: 0, zIndex: VASCO_UI_TOKENS.layer.overlay,
    pointerEvents: visible ? 'auto' : 'none', display: 'flex', flexDirection: 'column',
    overscrollBehavior: 'none',
  }}>
    <div className="vui-bottom-sheet-backdrop" aria-hidden="true" style={{
      position: 'absolute', inset: 0, background: 'rgba(10,10,10,.30)',
      opacity: visible ? 1 : 0,
      transition: `opacity ${VASCO_UI_TOKENS.motion.normal}ms ease`,
    }} />
    <button type="button" tabIndex="-1" aria-label="Fermer la fenêtre"
      className="vui-bottom-sheet-dismiss"
      onClick={busy || !dismissOnBackdrop ? undefined : requestClose}
      style={{ position: 'relative', zIndex: VASCO_UI_TOKENS.layer.dialog,
        flex: '1 1 auto', minHeight: 0, border: 0, padding: 0,
        background: 'transparent', cursor: busy ? 'default' : 'pointer',
        touchAction: 'none' }} />
    <div className="vui-bottom-sheet-panel" ref={panelRef} role="dialog" tabIndex="-1"
      aria-modal="true" aria-label={title}
      style={{
        position: 'relative', width: '100%', flexShrink: 0,
        outline: 'none',
        zIndex: VASCO_UI_TOKENS.layer.dialog, background: VASCO_UI_TOKENS.color.surface,
        borderTopLeftRadius: VASCO_UI_TOKENS.radius.sheet,
        borderTopRightRadius: VASCO_UI_TOKENS.radius.sheet,
        padding: '10px 16px max(24px, env(safe-area-inset-bottom))',
        height, maxHeight, boxShadow: '0 -12px 36px rgba(10,10,10,.12)',
        display: 'flex', flexDirection: 'column',
        overscrollBehavior: 'contain',
        transform: `translateY(${visible ? '0' : 'calc(100% + 24px)'})`,
        transition: `transform ${visible
          ? VASCO_UI_TOKENS.motion.sheetEnter
          : VASCO_UI_TOKENS.motion.sheetExit}ms ${visible
          ? VASCO_UI_TOKENS.motion.sheet
          : VASCO_UI_TOKENS.motion.standard}`,
      }}>
      <div aria-hidden="true" style={{ width: 34, height: 4,
        borderRadius: VASCO_UI_TOKENS.radius.pill, background: VASCO_UI_TOKENS.color.borderStrong,
        margin: '0 auto 10px', flexShrink: 0 }} />
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, flexShrink: 0 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 17, fontWeight: 700,
            color: VASCO_UI_TOKENS.color.ink }}>{title}</div>
          {subtitle && <div style={{ fontSize: 12, fontWeight: 500,
            color: VASCO_UI_TOKENS.color.secondary, marginTop: 3, lineHeight: 1.35 }}>{subtitle}</div>}
        </div>
        {headerAside}
        {showClose && <VascoIconButton label="Fermer" onClick={requestClose} disabled={busy} size={34}
          style={{ background: VASCO_UI_TOKENS.color.surfaceAlt }}>
          <VascoCloseIcon size={16} />
        </VascoIconButton>}
      </div>
      <div ref={contentRef} className="vasco-scroll" style={{ flex: 1, minHeight: 0,
        overflowY: 'auto', overscrollBehavior: 'contain', touchAction: 'pan-y',
        marginTop: 12, ...contentStyle }}>{children}</div>
      {renderedFooter && <div style={{ display: 'flex', gap: 8, marginTop: 14,
        flexShrink: 0 }}>{renderedFooter}</div>}
      <style>{`
        @media (prefers-reduced-motion: reduce) {
          .vui-bottom-sheet-backdrop,
          .vui-bottom-sheet-panel { transition-duration: 1ms !important; }
        }
      `}</style>
    </div>
  </div>;
  return ReactDOM.createPortal(sheet, overlayRoot);
}

// Écran de détail plein format pour les parcours longs (documents, historique,
// assistants). Il centralise le rôle modal, Échap et le mouvement ; son contenu
// peut garder un en-tête métier pendant la migration.
function VascoDetailSheet({ open = undefined, title = null, subtitle = null, onClose,
  children, footer = null, busy = false, background = VASCO_UI_TOKENS.color.canvas,
  contentStyle = {}, zIndex = VASCO_UI_TOKENS.layer.overlay, onEscape = null,
  ariaLabel = null, motion = 'lift' }) {
  const controlled = typeof open === 'boolean';
  const [legacyOpen, setLegacyOpen] = React.useState(true);
  const effectiveOpen = controlled ? open : legacyOpen;
  const [mounted, setMounted] = React.useState(Boolean(effectiveOpen));
  const [visible, setVisible] = React.useState(false);
  const legacyCloseTimer = React.useRef(null);
  const slidesFromLeft = motion === 'slideFromLeft';
  const enterDuration = slidesFromLeft
    ? VASCO_UI_TOKENS.motion.sheetEnter
    : VASCO_UI_TOKENS.motion.formEnter;
  const exitDuration = slidesFromLeft
    ? VASCO_UI_TOKENS.motion.sheetExit
    : VASCO_UI_TOKENS.motion.formExit;
  const easing = slidesFromLeft
    ? VASCO_UI_TOKENS.motion.sheet
    : VASCO_UI_TOKENS.motion.form;

  const requestClose = () => {
    if (busy) return;
    if (controlled) {
      onClose();
      return;
    }
    if (!legacyOpen || legacyCloseTimer.current !== null) return;
    setLegacyOpen(false);
    legacyCloseTimer.current = window.setTimeout(() => {
      legacyCloseTimer.current = null;
      onClose();
    }, exitDuration);
  };

  React.useEffect(() => {
    let mountFrame = null;
    let revealFrame = null;
    let hideTimer = null;
    if (effectiveOpen) {
      setMounted(true);
      mountFrame = window.requestAnimationFrame(() => {
        revealFrame = window.requestAnimationFrame(() => setVisible(true));
      });
    } else {
      setVisible(false);
      hideTimer = window.setTimeout(() => setMounted(false), exitDuration);
    }
    return () => {
      if (mountFrame !== null) window.cancelAnimationFrame(mountFrame);
      if (revealFrame !== null) window.cancelAnimationFrame(revealFrame);
      if (hideTimer !== null) window.clearTimeout(hideTimer);
    };
  }, [effectiveOpen, exitDuration]);

  React.useEffect(() => {
    if (!effectiveOpen || busy) return undefined;
    const closeOnEscape = (event) => {
      if (event.key === 'Escape') {
        if (onEscape) onEscape(requestClose);
        else requestClose();
      }
    };
    document.addEventListener('keydown', closeOnEscape);
    return () => document.removeEventListener('keydown', closeOnEscape);
  }, [effectiveOpen, busy, onClose, onEscape]);

  React.useEffect(() => () => {
    if (legacyCloseTimer.current !== null) window.clearTimeout(legacyCloseTimer.current);
  }, []);

  if (!mounted) return null;
  const duration = visible ? enterDuration : exitDuration;
  const hiddenTransform = slidesFromLeft ? 'translateX(-100%)' : 'translateY(8px)';
  const renderedChildren = VascoReplaceCloseAction(children, onClose, requestClose);
  const renderedFooter = VascoReplaceCloseAction(footer, onClose, requestClose);
  return <section className="vui-detail-sheet" role="dialog" aria-modal="true"
    aria-label={ariaLabel || title || 'Détail'} aria-hidden={!visible}
    {...VASCO_OVERLAY_POINTER_GUARD} style={{
      position: 'absolute', inset: 0, zIndex, minWidth: 0, minHeight: 0,
      display: 'flex', flexDirection: 'column', overflow: 'hidden', background,
      opacity: visible ? 1 : 0,
      transform: visible ? 'translate(0, 0)' : hiddenTransform,
      transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
      pointerEvents: visible ? 'auto' : 'none',
    }}>
    {title && <VascoScreenHeader title={title} onBack={requestClose} backLabel="Fermer"
      right={subtitle ? <span style={{ color: VASCO_UI_TOKENS.color.secondary,
        fontSize: 11.5, fontWeight: 500 }}>{subtitle}</span> : null} />}
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column',
      ...contentStyle }}>{renderedChildren}</div>
    {renderedFooter && <div style={{ display: 'flex', gap: 8, padding: '12px 16px max(16px, env(safe-area-inset-bottom))',
      background: VASCO_UI_TOKENS.color.surface, borderTop: `1px solid ${VASCO_UI_TOKENS.color.border}` }}>
      {renderedFooter}
    </div>}
    <style>{`
      @media (prefers-reduced-motion: reduce) {
        .vui-detail-sheet { transition-duration: 1ms !important; }
      }
    `}</style>
  </section>;
}

function VascoConfirmDialog({ open = undefined, title, message, confirmLabel = 'Confirmer',
  cancelLabel = 'Annuler', danger = false, busy = false, onClose, onConfirm, children = null }) {
  return <VascoFormSheet open={open} title={title} onClose={onClose} busy={busy}
    footer={<>
      <VascoButton grow onClick={onClose} disabled={busy}>{cancelLabel}</VascoButton>
      <VascoButton grow variant={danger ? 'danger' : 'solid'} onClick={onConfirm} busy={busy}>
        {confirmLabel}
      </VascoButton>
    </>}>
    {message && <p style={{ margin: 0, color: VASCO_UI_TOKENS.color.secondary,
      fontSize: 13, fontWeight: 500, lineHeight: 1.5 }}>{message}</p>}
    {children}
  </VascoFormSheet>;
}

// La saisie libre du socle : une ligne, plusieurs lignes, ou un nombre. Jusqu'ici
// chaque écran redessinait son `<input>` ou son `<textarea>` avec ses propres
// rayons, ses propres teintes et sa propre hauteur ; c'est le même contrôle, il
// n'a aucune raison d'être trois fois différent. `Field` porte le libellé et
// l'aide, `TextField` porte la saisie elle-même.
//
// Le nombre reste un champ de saisie, pas un compteur à flèches : `min` et `max`
// bornent ce que le navigateur accepte, et l'écran reste maître de la valeur
// qu'il retient. `inputMode` ouvre le pavé numérique sur un téléphone.
const VASCO_TEXT_FIELD_OWN_PROPS = Object.freeze(new Set([
  'value', 'onChange', 'multiline', 'rows', 'maxLength', 'placeholder',
  'disabled', 'invalid', 'kind', 'min', 'max', 'width', 'style', 'inputRef',
]));

function VascoTextField(props) {
  const { value, onChange, multiline = false, rows = 3, maxLength = null,
    placeholder = null, disabled = false, invalid = false, kind = 'text',
    min = null, max = null, width = null, inputRef = null, style = {} } = props;
  const attributes = vascoSafeButtonProps(props, VASCO_TEXT_FIELD_OWN_PROPS);
  const number = kind === 'number';
  const shape = {
    width: width == null ? '100%' : width,
    boxSizing: 'border-box',
    minHeight: multiline ? undefined : VASCO_UI_TOKENS.control.large,
    padding: multiline ? '10px 14px' : '0 14px',
    borderRadius: VASCO_UI_TOKENS.radius.lg,
    border: `1px solid ${invalid ? VASCO_UI_TOKENS.color.danger : VASCO_UI_TOKENS.color.borderStrong}`,
    background: disabled ? VASCO_UI_TOKENS.color.surfaceAlt : VASCO_UI_TOKENS.color.surface,
    color: VASCO_UI_TOKENS.color.ink,
    fontFamily: VASCO_UI_TOKENS.type.body,
    fontSize: 14, fontWeight: 500, outline: 'none',
    opacity: disabled ? 0.55 : 1,
    ...style,
  };
  const change = (event) => { if (typeof onChange === 'function') onChange(event.target.value); };
  if (multiline) {
    return <textarea {...attributes} ref={inputRef} value={value} onChange={change}
      rows={rows} maxLength={maxLength || undefined} placeholder={placeholder || undefined}
      disabled={disabled} aria-invalid={invalid || undefined}
      style={{ ...shape, resize: 'none', lineHeight: 1.45 }} />;
  }
  return <input {...attributes} ref={inputRef} type={number ? 'number' : 'text'}
    inputMode={number ? 'numeric' : undefined}
    min={number && min != null ? min : undefined}
    max={number && max != null ? max : undefined}
    value={value} onChange={change} maxLength={number ? undefined : (maxLength || undefined)}
    placeholder={placeholder || undefined} disabled={disabled}
    aria-invalid={invalid || undefined} style={shape} />;
}

function VascoField({ label, hint, children }) {
  return <label style={{ display: 'block', marginBottom: 14 }}>
    <div style={{ fontSize: 12, fontWeight: 650, color: VASCO_UI_TOKENS.color.ink, marginBottom: 6 }}>{label}</div>
    {children}
    {hint && <div style={{ fontSize: 11, fontWeight: 500,
      color: VASCO_UI_TOKENS.color.secondary, marginTop: 4, lineHeight: 1.35 }}>{hint}</div>}
  </label>;
}


// Le choix courant, ses options et sa hauteur de liste appartiennent au
// contrôle : ils portent des noms d'attributs HTML mais ne décrivent pas le
// bouton. Seuls l'accessibilité, les ancres de test et les gestionnaires
// d'évènements le rejoignent.
const VASCO_SIMPLE_SELECT_OWN_PROPS = Object.freeze(new Set([
  'id', 'value', 'onChange', 'options', 'placeholder', 'currentLabel',
  'maxOptionsHeight', 'disabled',
]));

function VascoSimpleSelect(props) {
  const { id, value, onChange, options = [], placeholder = 'Choisir',
    currentLabel = null, maxOptionsHeight = null, disabled = false } = props;
  const accessibility = vascoSafeButtonProps(props, VASCO_SIMPLE_SELECT_OWN_PROPS);
  const [open, setOpen] = React.useState(false);
  const [mounted, setMounted] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const rootRef = React.useRef(null);
  const listboxId = `${id}-options`;
  const selectedOption = options.find(([optionValue]) => optionValue === value);
  const selectedLabel = currentLabel ?? selectedOption?.[1] ?? placeholder;

  React.useEffect(() => {
    let mountFrame = null;
    let revealFrame = null;
    let hideTimer = null;
    if (open) {
      setMounted(true);
      mountFrame = window.requestAnimationFrame(() => {
        revealFrame = window.requestAnimationFrame(() => setVisible(true));
      });
    } else {
      setVisible(false);
      hideTimer = window.setTimeout(
        () => setMounted(false),
        VASCO_UI_TOKENS.motion.selectExit,
      );
    }
    return () => {
      if (mountFrame !== null) window.cancelAnimationFrame(mountFrame);
      if (revealFrame !== null) window.cancelAnimationFrame(revealFrame);
      if (hideTimer !== null) window.clearTimeout(hideTimer);
    };
  }, [open]);

  React.useEffect(() => {
    if (!open) return undefined;
    const closeOutside = (event) => {
      if (!rootRef.current?.contains(event.target)) setOpen(false);
    };
    const closeOnEscape = (event) => {
      if (event.key === 'Escape') setOpen(false);
    };
    // En capture : une feuille du socle retient les appuis nés chez elle pour
    // ne pas fermer l'écran qui l'a ouverte, et la capture passe avant cette
    // retenue. Un choix ouvert dans une feuille se referme donc encore.
    document.addEventListener('pointerdown', closeOutside, true);
    document.addEventListener('keydown', closeOnEscape);
    return () => {
      document.removeEventListener('pointerdown', closeOutside, true);
      document.removeEventListener('keydown', closeOnEscape);
    };
  }, [open]);

  React.useEffect(() => {
    if (!open) return undefined;
    const frame = window.requestAnimationFrame(() => {
      rootRef.current?.scrollIntoView({ block: 'nearest', behavior: 'auto' });
    });
    return () => window.cancelAnimationFrame(frame);
  }, [open]);

  const choose = (nextValue) => {
    onChange(nextValue);
    setOpen(false);
  };
  const duration = visible
    ? VASCO_UI_TOKENS.motion.selectEnter
    : VASCO_UI_TOKENS.motion.selectExit;

  return <div ref={rootRef} style={{ minWidth: 0 }}>
    <button {...accessibility} id={id} type="button" className="press"
      disabled={disabled} aria-haspopup="listbox" aria-expanded={open}
      aria-controls={open ? listboxId : undefined}
      onClick={() => setOpen((current) => !current)} style={{
        width: '100%', minHeight: VASCO_UI_TOKENS.control.medium,
        padding: '0 12px', borderRadius: VASCO_UI_TOKENS.radius.md,
        border: `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
        background: VASCO_UI_TOKENS.color.surface, color: VASCO_UI_TOKENS.color.ink,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
        fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 13, fontWeight: 500,
        textAlign: 'left', cursor: disabled ? 'default' : 'pointer',
        opacity: disabled ? .48 : 1,
      }}>
      <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis',
        whiteSpace: 'nowrap' }}>{selectedLabel}</span>
      <svg className="vui-simple-select-chevron" aria-hidden="true" width="16" height="16"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
        strokeLinecap="round" strokeLinejoin="round" style={{
          color: VASCO_UI_TOKENS.color.secondary, flexShrink: 0,
          transform: `rotate(${open ? 180 : 0}deg)`,
          transition: `transform ${VASCO_UI_TOKENS.motion.selectEnter}ms ${VASCO_UI_TOKENS.motion.select}`,
        }}><path d="M6 9l6 6 6-6" /></svg>
    </button>
    {mounted && <div className="vui-simple-select-reveal" aria-hidden={!visible} style={{
      display: 'grid', gridTemplateRows: visible ? '1fr' : '0fr',
      transition: `grid-template-rows ${duration}ms ${VASCO_UI_TOKENS.motion.select}`,
    }}>
      <div style={{ minHeight: 0, overflow: 'hidden' }}>
        <div id={listboxId} role="listbox" className="vui-simple-select-menu" style={{
          marginTop: 6, overflow: 'hidden',
          border: `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
          maxHeight: maxOptionsHeight || undefined,
          overflowY: maxOptionsHeight ? 'auto' : 'hidden',
          transformOrigin: 'top center',
          transform: visible ? 'translateY(0)' : 'translateY(-4px)',
          opacity: visible ? 1 : 0, pointerEvents: visible ? 'auto' : 'none',
          transition: `opacity ${duration}ms ${VASCO_UI_TOKENS.motion.select}, transform ${duration}ms ${VASCO_UI_TOKENS.motion.select}`,
          borderRadius: VASCO_UI_TOKENS.radius.lg,
          background: VASCO_UI_TOKENS.color.surface,
          boxShadow: VASCO_UI_TOKENS.shadow.medium,
        }}>
          {options.map((option, index) => {
            const [optionValue, label, , optionDisabled = false] = option;
            const selected = optionValue === value;
            return <button key={String(optionValue)} type="button" role="option"
              aria-selected={selected} disabled={optionDisabled}
              onClick={() => { if (!optionDisabled) choose(optionValue); }} style={{
                width: '100%', minHeight: 46, padding: '9px 12px', border: 0,
                borderBottom: index < options.length - 1
                  ? `1px solid ${VASCO_UI_TOKENS.color.border}` : 'none',
                background: selected ? VASCO_UI_TOKENS.color.accentTint
                  : VASCO_UI_TOKENS.color.surface,
                color: VASCO_UI_TOKENS.color.ink, textAlign: 'left',
                cursor: optionDisabled ? 'default' : 'pointer', opacity: optionDisabled ? .48 : 1,
                fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 13, fontWeight: 500,
              }}>
              <span style={{ display: 'flex', alignItems: 'center',
                justifyContent: 'space-between', gap: 10 }}>
                <span style={{ minWidth: 0, overflowWrap: 'anywhere' }}>{label}</span>
                {selected && <span aria-hidden="true" style={{
                  display: 'grid', width: 22, height: 22, flex: '0 0 auto', placeItems: 'center',
                  borderRadius: VASCO_UI_TOKENS.radius.pill,
                  background: VASCO_UI_TOKENS.color.accent, color: '#fff',
                  fontSize: 12, fontWeight: 700,
                }}>✓</span>}
              </span>
            </button>;
          })}
        </div>
      </div>
      <style>{`
        @media (prefers-reduced-motion: reduce) {
          .vui-simple-select-reveal,
          .vui-simple-select-menu,
          .vui-simple-select-chevron { transition-duration: 1ms !important; }
        }
      `}</style>
    </div>}
  </div>;
}

// Barre d'onglets d'une recherche : deux populations distinctes, une seule
// rangée de `ChoiceChip`. `SearchSelect` la pose au-dessus de son champ ;
// l'agenda, qui garde la liste de sa feuille héritée, pose la même au-dessus
// de la sienne. Une seule définition, donc un seul rendu.
function VascoScopeTabs({ scopes, scope, onScopeChange, label = 'Filtrer les résultats',
  idPrefix = null, style = {} }) {
  if (!Array.isArray(scopes) || scopes.length < 2) return null;
  return <div role="group" aria-label={label} style={{
    display: 'flex', gap: 6, flexWrap: 'wrap', ...style }}>
    {scopes.map((entry) => <VascoChoiceChip key={String(entry.id)}
      selected={entry.id === scope} disabled={Boolean(entry.disabled)}
      data-testid={idPrefix ? `${idPrefix}-scope-${entry.id}` : undefined}
      onClick={() => { if (entry.id !== scope) onScopeChange?.(entry.id); }}
      style={{ flex: '1 1 0', minWidth: 0 }}>{entry.label}</VascoChoiceChip>)}
  </div>;
}

function VascoSearchSelect({ id, value, onChange, options = [], placeholder = 'Choisir',
  currentLabel = null, query: controlledQuery = undefined, onQueryChange = null,
  searchPlaceholder = 'Rechercher', loading = false, loadingLabel = 'Recherche…',
  error = null, emptyLabel = 'Aucun résultat', onCreate = null, createLabel = null,
  allowEmptyCreate = false, createPosition = 'after', maxOptionsHeight = 260,
  disabled = false, filterOptions = true,
  // Une recherche qui porte sur deux populations distinctes – vivants et
  // décédés, actifs et archivés – les sépare en onglets plutôt que de les
  // mélanger dans une seule liste. Les onglets sont des `ChoiceChip`
  // officielles : aucune pastille locale n'est réinventée par un écran.
  scopes = null, scope = null, onScopeChange = null,
  scopesLabel = 'Filtrer les résultats',
  getOptionValue = null, getOptionLabel = null, getOptionMeta = null,
  getOptionDisabled = null, onOpenChange = null,
  'aria-label': ariaLabel = undefined,
  'aria-describedby': ariaDescribedBy = undefined,
  'aria-invalid': ariaInvalid = undefined,
  'aria-required': ariaRequired = undefined,
  'data-testid': testId = undefined,
  name = undefined,
}) {
  const [open, setOpen] = React.useState(false);
  const [mounted, setMounted] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const [localQuery, setLocalQuery] = React.useState('');
  const [activeIndex, setActiveIndex] = React.useState(0);
  const rootRef = React.useRef(null);
  const inputRef = React.useRef(null);
  const listboxId = `${id}-options`;
  const query = controlledQuery === undefined ? localQuery : controlledQuery;
  const optionRecord = (option) => ({
    raw: option,
    value: getOptionValue ? getOptionValue(option)
      : Array.isArray(option) ? option[0] : option.value ?? option.id,
    label: getOptionLabel ? getOptionLabel(option)
      : Array.isArray(option) ? option[1] : option.label ?? option.displayName ?? '',
    meta: getOptionMeta ? getOptionMeta(option)
      : Array.isArray(option) ? option[2] : option.meta ?? option.subtitle ?? '',
    disabled: getOptionDisabled ? getOptionDisabled(option)
      : Boolean(Array.isArray(option) ? option[3] : option.disabled),
  });
  const records = options.map(optionRecord);
  const normalizedQuery = query.trim().toLocaleLowerCase('fr');
  const displayed = filterOptions && normalizedQuery
    ? records.filter((option) => `${option.label} ${option.meta}`.toLocaleLowerCase('fr').includes(normalizedQuery))
    : records;
  const selected = records.find((option) => option.value === value);
  const selectedLabel = currentLabel ?? selected?.label ?? placeholder;
  const selectedMeta = selected?.meta || '';

  const changeOpen = (nextOpen) => {
    setOpen(nextOpen);
    onOpenChange?.(nextOpen);
    if (nextOpen) setActiveIndex(Math.max(0, displayed.findIndex((option) => !option.disabled)));
  };
  const changeQuery = (nextQuery) => {
    if (controlledQuery === undefined) setLocalQuery(nextQuery);
    onQueryChange?.(nextQuery);
    setActiveIndex(0);
  };
  // Changer d'onglet relance la recherche sur l'autre population : la saisie
  // est conservée – on cherche le même nom ailleurs –, seul le rang actif
  // repart de zéro, la liste affichée n'étant plus la même.
  const changeScope = (nextScope) => {
    if (nextScope === scope) return;
    onScopeChange?.(nextScope);
    setActiveIndex(0);
  };
  const tabs = Array.isArray(scopes) && scopes.length > 1 ? scopes : null;

  React.useEffect(() => {
    let mountFrame = null;
    let revealFrame = null;
    let hideTimer = null;
    if (open) {
      setMounted(true);
      mountFrame = window.requestAnimationFrame(() => {
        revealFrame = window.requestAnimationFrame(() => setVisible(true));
      });
    } else {
      setVisible(false);
      hideTimer = window.setTimeout(
        () => setMounted(false),
        VASCO_UI_TOKENS.motion.selectExit,
      );
    }
    return () => {
      if (mountFrame !== null) window.cancelAnimationFrame(mountFrame);
      if (revealFrame !== null) window.cancelAnimationFrame(revealFrame);
      if (hideTimer !== null) window.clearTimeout(hideTimer);
    };
  }, [open]);

  React.useEffect(() => {
    if (!open) return undefined;
    const closeOutside = (event) => {
      if (!rootRef.current?.contains(event.target)) changeOpen(false);
    };
    const closeOnEscape = (event) => {
      if (event.key === 'Escape') changeOpen(false);
    };
    // En capture : une feuille du socle retient les appuis nés chez elle pour
    // ne pas fermer l'écran qui l'a ouverte, et la capture passe avant cette
    // retenue. Un choix ouvert dans une feuille se referme donc encore.
    document.addEventListener('pointerdown', closeOutside, true);
    document.addEventListener('keydown', closeOnEscape);
    return () => {
      document.removeEventListener('pointerdown', closeOutside, true);
      document.removeEventListener('keydown', closeOnEscape);
    };
  }, [open, onOpenChange]);

  React.useEffect(() => {
    if (!visible) return undefined;
    const frame = window.requestAnimationFrame(() => {
      rootRef.current?.scrollIntoView({ block: 'nearest', behavior: 'auto' });
      inputRef.current?.focus();
    });
    return () => window.cancelAnimationFrame(frame);
  }, [visible]);

  React.useEffect(() => {
    if (!open || !displayed.length) return;
    if (!displayed[activeIndex] || displayed[activeIndex].disabled) {
      setActiveIndex(Math.max(0, displayed.findIndex((option) => !option.disabled)));
    }
  }, [open, options, query]);

  const choose = (option) => {
    if (option.disabled) return;
    onChange(option.value, option.raw);
    changeQuery('');
    changeOpen(false);
  };
  const moveActive = (direction) => {
    if (!displayed.length) return;
    let next = activeIndex;
    for (let count = 0; count < displayed.length; count += 1) {
      next = (next + direction + displayed.length) % displayed.length;
      if (!displayed[next].disabled) break;
    }
    setActiveIndex(next);
  };
  const handleKeyDown = (event) => {
    if (event.key === 'ArrowDown') {
      event.preventDefault();
      moveActive(1);
    } else if (event.key === 'ArrowUp') {
      event.preventDefault();
      moveActive(-1);
    } else if (event.key === 'Enter' && displayed[activeIndex]) {
      event.preventDefault();
      choose(displayed[activeIndex]);
    } else if (event.key === 'Escape') {
      event.preventDefault();
      changeOpen(false);
    }
  };
  const duration = visible
    ? VASCO_UI_TOKENS.motion.selectEnter
    : VASCO_UI_TOKENS.motion.selectExit;
  const createText = typeof createLabel === 'function'
    ? createLabel(query.trim())
    : createLabel || (query.trim() ? `Créer « ${query.trim()} »` : 'Créer');
  const createAction = onCreate && (allowEmptyCreate || query.trim())
    ? <button type="button" role={createPosition === 'before' ? 'option' : undefined}
      aria-selected={createPosition === 'before' ? false : undefined} onClick={() => {
        const shouldClose = onCreate(query.trim());
        if (shouldClose === false) {
          inputRef.current?.focus();
          return;
        }
        changeQuery('');
        changeOpen(false);
      }} style={{ width: '100%', minHeight: 46, padding: '9px 12px',
        border: 0, borderTop: createPosition === 'after'
          ? `1px solid ${VASCO_UI_TOKENS.color.border}` : 0,
        borderBottom: createPosition === 'before'
          ? `1px solid ${VASCO_UI_TOKENS.color.border}` : 0,
        background: VASCO_UI_TOKENS.color.surface,
        color: VASCO_UI_TOKENS.color.accent, textAlign: 'left', cursor: 'pointer',
        fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 13, fontWeight: 500,
        display: 'flex', alignItems: 'center', gap: 9 }}>
        <span aria-hidden="true" style={{ display: 'grid', width: 22, height: 22,
          placeItems: 'center', borderRadius: VASCO_UI_TOKENS.radius.pill,
          background: VASCO_UI_TOKENS.color.accentTint, fontSize: 17 }}>+</span>
        <span>{createText}</span>
      </button>
    : null;

  return <div ref={rootRef} style={{ minWidth: 0 }}>
    <button id={id} name={name} data-testid={testId} type="button" className="press"
      aria-label={ariaLabel} aria-describedby={ariaDescribedBy}
      aria-invalid={ariaInvalid} aria-required={ariaRequired}
      disabled={disabled} aria-haspopup="listbox" aria-expanded={open}
      aria-controls={open ? listboxId : undefined}
      onClick={() => changeOpen(!open)} style={{
        width: '100%', minHeight: selectedMeta ? 52 : VASCO_UI_TOKENS.control.medium,
        padding: selectedMeta ? '7px 12px' : '0 12px',
        borderRadius: VASCO_UI_TOKENS.radius.md,
        border: `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
        background: VASCO_UI_TOKENS.color.surface, color: VASCO_UI_TOKENS.color.ink,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
        fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 13, fontWeight: 500,
        textAlign: 'left', cursor: disabled ? 'default' : 'pointer',
        opacity: disabled ? .48 : 1,
      }}>
      <span style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {selectedLabel}
        </span>
        {selectedMeta && <span style={{ overflow: 'hidden', textOverflow: 'ellipsis',
          whiteSpace: 'nowrap', color: VASCO_UI_TOKENS.color.secondary,
          fontSize: 11 }}>{selectedMeta}</span>}
      </span>
      <svg className="vui-search-select-chevron" aria-hidden="true" width="16" height="16"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
        strokeLinecap="round" strokeLinejoin="round" style={{
          color: VASCO_UI_TOKENS.color.secondary, flexShrink: 0,
          transform: `rotate(${open ? 180 : 0}deg)`,
          transition: `transform ${VASCO_UI_TOKENS.motion.selectEnter}ms ${VASCO_UI_TOKENS.motion.select}`,
        }}><path d="M6 9l6 6 6-6" /></svg>
    </button>
    {mounted && <div className="vui-search-select-reveal" aria-hidden={!visible} style={{
      display: 'grid', gridTemplateRows: visible ? '1fr' : '0fr',
      transition: `grid-template-rows ${duration}ms ${VASCO_UI_TOKENS.motion.select}`,
    }}>
      <div style={{ minHeight: 0, overflow: 'hidden' }}>
        <div className="vui-search-select-menu" style={{
          marginTop: 6, overflow: 'hidden',
          border: `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
          borderRadius: VASCO_UI_TOKENS.radius.lg,
          background: VASCO_UI_TOKENS.color.surface,
          boxShadow: VASCO_UI_TOKENS.shadow.medium,
          transform: visible ? 'translateY(0)' : 'translateY(-4px)',
          opacity: visible ? 1 : 0, pointerEvents: visible ? 'auto' : 'none',
          transition: `opacity ${duration}ms ${VASCO_UI_TOKENS.motion.select}, transform ${duration}ms ${VASCO_UI_TOKENS.motion.select}`,
        }}>
          <div style={{ padding: 8, borderBottom: `1px solid ${VASCO_UI_TOKENS.color.border}` }}>
            <VascoScopeTabs scopes={tabs} scope={scope} onScopeChange={changeScope}
              label={scopesLabel} idPrefix={id} style={{ marginBottom: 8 }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 7,
              padding: '0 9px', border: `1px solid ${VASCO_UI_TOKENS.color.border}`,
              borderRadius: VASCO_UI_TOKENS.radius.md,
              background: VASCO_UI_TOKENS.color.surfaceAlt }}>
              <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" style={{
                  color: VASCO_UI_TOKENS.color.secondary, flexShrink: 0,
                }}><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
              <input ref={inputRef} type="search" role="combobox" value={query}
                aria-label={searchPlaceholder} aria-autocomplete="list" aria-expanded={open}
                aria-controls={listboxId}
                aria-activedescendant={displayed[activeIndex]
                  ? `${id}-option-${activeIndex}` : undefined}
                placeholder={searchPlaceholder} onChange={(event) => changeQuery(event.target.value)}
                onKeyDown={handleKeyDown} style={{
                  width: '100%', height: 38, minWidth: 0, border: 0, outline: 'none',
                  background: 'transparent', color: VASCO_UI_TOKENS.color.ink,
                  fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 13, fontWeight: 500,
                }} />
              {query && <VascoIconButton label="Effacer la recherche" variant="ghost" size={30}
                onClick={() => changeQuery('')}><VascoCloseIcon size={14} /></VascoIconButton>}
            </div>
          </div>
          <div id={listboxId} role="listbox" style={{ maxHeight: maxOptionsHeight,
            overflowY: 'auto' }}>
            {createPosition === 'before' && createAction}
            {loading && <div role="status" style={{ padding: '13px 12px',
              color: VASCO_UI_TOKENS.color.secondary, fontSize: 12 }}>{loadingLabel}</div>}
            {!loading && error && <div role="alert" style={{ padding: '13px 12px',
              color: VASCO_UI_TOKENS.color.danger, fontSize: 12, lineHeight: 1.4 }}>{error}</div>}
            {!loading && !error && displayed.map((option, index) => {
              const isSelected = option.value === value;
              const isActive = index === activeIndex;
              return <button id={`${id}-option-${index}`} key={String(option.value)} type="button"
                role="option" aria-selected={isSelected} disabled={option.disabled}
                onPointerEnter={() => setActiveIndex(index)} onClick={() => choose(option)} style={{
                  width: '100%', minHeight: option.meta ? 54 : 46, padding: '9px 12px',
                  border: 0, borderBottom: `1px solid ${VASCO_UI_TOKENS.color.border}`,
                  background: isSelected ? VASCO_UI_TOKENS.color.accentTint
                    : isActive ? VASCO_UI_TOKENS.color.surfaceAlt : VASCO_UI_TOKENS.color.surface,
                  color: VASCO_UI_TOKENS.color.ink, textAlign: 'left',
                  cursor: option.disabled ? 'default' : 'pointer', opacity: option.disabled ? .48 : 1,
                  fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 13, fontWeight: 500,
                }}>
                <span style={{ display: 'flex', alignItems: 'center',
                  justifyContent: 'space-between', gap: 10 }}>
                  <span style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <span style={{ overflowWrap: 'anywhere' }}>{option.label}</span>
                    {option.meta && <span style={{ color: VASCO_UI_TOKENS.color.secondary,
                      fontSize: 11 }}>{option.meta}</span>}
                  </span>
                  {isSelected && <span aria-hidden="true" style={{
                    display: 'grid', width: 22, height: 22, flex: '0 0 auto', placeItems: 'center',
                    borderRadius: VASCO_UI_TOKENS.radius.pill,
                    background: VASCO_UI_TOKENS.color.accent, color: '#fff',
                    fontSize: 12, fontWeight: 700,
                  }}>✓</span>}
                </span>
              </button>;
            })}
            {!loading && !error && !displayed.length && <div style={{ padding: '13px 12px',
              color: VASCO_UI_TOKENS.color.secondary, fontSize: 12 }}>{emptyLabel}</div>}
          </div>
          {createPosition !== 'before' && createAction}
        </div>
      </div>
      <style>{`
        @media (prefers-reduced-motion: reduce) {
          .vui-search-select-reveal,
          .vui-search-select-menu,
          .vui-search-select-chevron { transition-duration: 1ms !important; }
        }
      `}</style>
    </div>}
  </div>;
}

function VascoCreatableSelect(props) {
  return <VascoSearchSelect {...props} />;
}

function VascoScreenHeader({ title, onBack = null, backLabel = 'Retour', right = null }) {
  return <header style={{ padding: '54px 18px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
    {onBack && <VascoIconButton label={backLabel} onClick={onBack}>
      <VascoChevronIcon direction="left" size={17} />
    </VascoIconButton>}
    <h1 style={{ flex: 1, margin: 0, color: VASCO_UI_TOKENS.color.ink,
      ...VASCO_UI_TOKENS.type.title }}>{title}</h1>
    {right}
  </header>;
}

// ── Choisir une date, dans la langue de l'application ─────────────────────
//
// Le sélecteur natif du navigateur ne ressemble à aucun écran Vasco, change
// d'un téléphone à l'autre, et parle la langue du système plutôt que celle du
// praticien. Cinq écrans s'en servaient faute d'avoir mieux. Cette primitive
// pose le même calendrier partout : un champ qui dit la date retenue, et le
// mois qui vient PAR-DESSUS l'écran au toucher, dans la feuille officielle.
//
// Déplié sous le champ, à la manière du dropdown simple, il poussait tout le
// formulaire vers le bas : six rangées de dates ne sont pas une liste de trois
// options. La feuille recouvre au lieu de déplacer – rien ne bouge derrière,
// le calendrier a la place de s'afficher en entier, et il ne peut plus naître
// sous le bord d'une feuille qui défile.
//
// Deux usages. Une date seule, ou une période choisie en deux touchers : le
// début, puis la fin. Toucher avant le début rouvre une période au lieu de la
// retourner – la faute devient impossible plutôt que d'être annoncée, et on ne
// demande à personne de deviner dans quel ordre toucher.

const VASCO_DAY_KEY = /^\d{4}-\d{2}-\d{2}$/;
const VASCO_DAY_LETTERS = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];

function vascoIsDayKey(value) {
  return VASCO_DAY_KEY.test(String(value ?? ''));
}

function vascoDayLabel(dayKey, options) {
  if (!vascoIsDayKey(dayKey)) return null;
  try {
    return new Intl.DateTimeFormat('fr-FR', options).format(new Date(`${dayKey}T12:00:00`));
  } catch (failure) {
    return dayKey;
  }
}

// La grille d'un mois, lundi en tête, complétée de cases vides pour que les
// colonnes restent alignées sur les lettres des jours.
function vascoMonthGrid(year, month) {
  let firstColumn = new Date(year, month, 1).getDay() - 1;
  if (firstColumn < 0) firstColumn = 6;
  const last = new Date(year, month + 1, 0).getDate();
  const pad = (value) => String(value).padStart(2, '0');
  const keys = new Array(firstColumn).fill(null);
  for (let day = 1; day <= last; day += 1) keys.push(`${year}-${pad(month + 1)}-${pad(day)}`);
  while (keys.length % 7 !== 0) keys.push(null);
  return keys;
}

// Une échéance porte parfois une heure – un rappel, par exemple. Elle se choisit
// sous le calendrier, dans la même liste déroulante que partout ailleurs, par
// demi-heures : personne ne programme un rappel à 14h07.
const VASCO_HOUR_OPTIONS = (() => {
  const options = [];
  for (let minutes = 6 * 60; minutes <= 22 * 60; minutes += 30) {
    const label = `${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`;
    options.push([label, label]);
  }
  return Object.freeze(options);
})();

const VASCO_DEFAULT_HOUR = '09:00';

function vascoSplitStamp(stamp) {
  const text = String(stamp ?? '');
  const [day, hour] = text.split('T');
  return { day: vascoIsDayKey(day) ? day : null, hour: /^\d{2}:\d{2}/.test(hour || '') ? hour.slice(0, 5) : null };
}

// Même règle pour le calendrier : la date, la période, le jour du jour et
// l'échéance sont ses données, pas des attributs du bouton qui les ouvre.
const VASCO_DAY_PICKER_OWN_PROPS = Object.freeze(new Set([
  'id', 'value', 'end', 'onChange', 'mode', 'min', 'todayKey', 'disabled',
  'withTime', 'format', 'placeholder',
]));

function VascoDayPicker(props) {
  const { id, value = null, end = null, onChange, mode = 'single',
    min = null, todayKey = null, disabled = false, withTime = false,
    format = 'long', placeholder = 'Choisir une date' } = props;
  const accessibility = vascoSafeButtonProps(props, VASCO_DAY_PICKER_OWN_PROPS);
  const range = mode === 'range';
  // Une échéance arrive en un seul morceau (`2026-09-24T18:00`) : le calendrier
  // en lit le jour, la liste des heures en lit l'heure, et l'appelant la reçoit
  // telle qu'il l'a donnée.
  const stamp = vascoSplitStamp(value);
  const day = withTime ? stamp.day : (vascoIsDayKey(value) ? value : null);
  const hour = stamp.hour || VASCO_DEFAULT_HOUR;
  const [open, setOpen] = React.useState(false);
  const gridId = `${id}-days`;
  const [shown, setShown] = React.useState(() => {
    const anchor = [vascoSplitStamp(value).day, todayKey].find(vascoIsDayKey);
    const reference = anchor ? new Date(`${anchor}T12:00:00`) : new Date();
    return { year: reference.getFullYear(), month: reference.getMonth() };
  });

  const move = (step) => setShown((current) => {
    const next = new Date(current.year, current.month + step, 1);
    return { year: next.getFullYear(), month: next.getMonth() };
  });

  const choose = (dayKey) => {
    if (!range) {
      // Avec une heure, le calendrier reste ouvert : l'échéance n'est pas
      // complète tant que l'heure n'a pas été vue.
      onChange(withTime ? `${dayKey}T${hour}` : dayKey);
      if (!withTime) setOpen(false);
      return;
    }
    // Une période commencée attend sa fin ; sinon on en ouvre une nouvelle.
    if (vascoIsDayKey(day) && day === end && dayKey >= day) onChange(day, dayKey);
    else onChange(dayKey, dayKey);
  };

  const short = { weekday: 'short', day: 'numeric', month: 'short' };
  // Un champ étroit – deux dates côte à côte – ne peut pas porter « mercredi 2
  // septembre 2026 » sans le couper. L'année, elle, reste : un traitement peut
  // avoir commencé l'an dernier.
  const compact = { day: 'numeric', month: 'short', year: 'numeric' };
  const long = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
  const dayLabel = vascoDayLabel(day, withTime
    ? short : format === 'compact' ? compact : long);
  const triggerLabel = range
    ? (vascoIsDayKey(day)
      ? `${vascoDayLabel(day, short)} → ${vascoDayLabel(end || day, short)}`
      : placeholder)
    : (dayLabel ? (withTime ? `${dayLabel} · ${hour}` : dayLabel) : placeholder);
  // Le titre dit ce qu'on est venu faire : une date, une période, une échéance.
  const sheetTitle = range ? 'Choisir une période'
    : withTime ? 'Choisir une échéance' : 'Choisir une date';

  return <div style={{ minWidth: 0 }}>
    <button {...accessibility} id={id} type="button" className="press" disabled={disabled}
      aria-haspopup="dialog" aria-expanded={open} aria-controls={open ? gridId : undefined}
      onClick={() => setOpen((current) => !current)} style={{
        width: '100%', minHeight: VASCO_UI_TOKENS.control.medium,
        padding: '0 12px', borderRadius: VASCO_UI_TOKENS.radius.md,
        border: `1px solid ${VASCO_UI_TOKENS.color.borderStrong}`,
        background: VASCO_UI_TOKENS.color.surface, color: VASCO_UI_TOKENS.color.ink,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
        fontFamily: VASCO_UI_TOKENS.type.body, fontSize: 13, fontWeight: 500,
        textAlign: 'left', cursor: disabled ? 'default' : 'pointer',
        opacity: disabled ? .48 : 1,
      }}>
      <span style={{
        minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        color: vascoIsDayKey(day) ? VASCO_UI_TOKENS.color.ink : VASCO_UI_TOKENS.color.secondary,
      }}>{triggerLabel}</span>
      <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"
        style={{ color: VASCO_UI_TOKENS.color.secondary, flexShrink: 0 }}>
        <rect x="3" y="5" width="18" height="16" rx="2" />
        <path d="M16 3v4M8 3v4M3 11h18" />
      </svg>
    </button>
    {/* La feuille reste montée et reçoit son état : la retirer au moment de
        fermer supprimerait son animation de sortie, et un jour choisi
        disparaîtrait d'un coup là où le fond et Échap savent s'effacer. */}
    <VascoBottomSheet open={open} title={sheetTitle} onClose={() => setOpen(false)}>
      <div className="vui-day-picker-panel" style={{ padding: '4px 0 8px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8,
        }}>
          <VascoIconButton label="Mois précédent" variant="ghost" size={30}
            onClick={() => move(-1)}>
            <VascoChevronIcon direction="left" size={15} />
          </VascoIconButton>
          <span style={{
            fontSize: 13, fontWeight: 650, color: VASCO_UI_TOKENS.color.ink,
          }}>{vascoDayLabel(`${shown.year}-${String(shown.month + 1).padStart(2, '0')}-01`,
            { month: 'long', year: 'numeric' })}</span>
          <VascoIconButton label="Mois suivant" variant="ghost" size={30}
            onClick={() => move(1)}>
            <VascoChevronIcon direction="right" size={15} />
          </VascoIconButton>
        </div>
        <div aria-hidden="true" style={{
          display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', marginBottom: 2,
        }}>
          {VASCO_DAY_LETTERS.map((letter, index) => (
            <div key={index} style={{
              textAlign: 'center', fontFamily: VASCO_UI_TOKENS.type.mono,
              fontSize: 10, fontWeight: 600, color: VASCO_UI_TOKENS.color.secondary,
              letterSpacing: '0.3px',
            }}>{letter}</div>
          ))}
        </div>
        <div id={gridId} role="grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2,
        }}>
          {vascoMonthGrid(shown.year, shown.month).map((dayKey, index) => {
            if (!dayKey) return <div key={`vide-${index}`} role="presentation" />;
            const before = vascoIsDayKey(min) && dayKey < min;
            const edge = dayKey === day || (range && dayKey === end);
            const inside = range && vascoIsDayKey(day) && vascoIsDayKey(end)
              && dayKey > day && dayKey < end;
            const today = dayKey === todayKey;
            return <button key={dayKey} type="button" role="gridcell" disabled={before}
              className={before ? undefined : 'press'}
              aria-selected={edge || inside}
              aria-label={vascoDayLabel(dayKey, short)}
              onClick={before ? undefined : () => choose(dayKey)} style={{
                border: 0, padding: '5px 0', background: inside
                  ? VASCO_UI_TOKENS.color.neutralTint : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: before ? 'default' : 'pointer',
                fontFamily: VASCO_UI_TOKENS.type.body,
              }}>
              <span style={{
                width: 32, height: 32, borderRadius: VASCO_UI_TOKENS.radius.pill,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: edge ? VASCO_UI_TOKENS.color.ink
                  : today ? VASCO_UI_TOKENS.color.accentTint : 'transparent',
                color: edge ? '#fff' : today ? VASCO_UI_TOKENS.color.accent
                  : VASCO_UI_TOKENS.color.ink,
                fontSize: 13.5, fontWeight: edge || today ? 700 : 500,
                opacity: before ? .35 : 1,
              }}>{Number(dayKey.slice(8))}</span>
            </button>;
          })}
        </div>
        {withTime && <div style={{
          display: 'flex', alignItems: 'center', gap: 10, marginTop: 12,
          paddingTop: 12, borderTop: `1px solid ${VASCO_UI_TOKENS.color.border}`,
        }}>
          <span style={{
            fontFamily: VASCO_UI_TOKENS.type.mono, fontSize: 10, fontWeight: 600,
            letterSpacing: '0.4px', textTransform: 'uppercase',
            color: VASCO_UI_TOKENS.color.secondary,
          }}>Heure</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <VascoSimpleSelect id={`${id}-hour`} aria-label="Heure de l’échéance"
              value={hour} options={VASCO_HOUR_OPTIONS} maxOptionsHeight={190}
              onChange={(nextHour) => onChange(`${day || todayKey}T${nextHour}`)} />
          </div>
        </div>}
        {/* Une date seule se prend d'un toucher et la feuille se referme. Une
            période et une échéance en demandent deux : le bouton dit quand
            c'est fini, plutôt que de deviner à la place du praticien. */}
        {(range || withTime) && (
          <div style={{ marginTop: 14 }}>
            <VascoButton grow variant="solid" onClick={() => setOpen(false)}>Terminé</VascoButton>
          </div>
        )}
      </div>
    </VascoBottomSheet>
  </div>;
}

// Adaptateur temporaire : Compte conserve exactement son contrat historique,
// mais son rendu passe désormais par les primitives officielles. Les futurs
// écrans utilisent directement window.VascoUI.
function VascoLegacyAcButton(props) {
  const variant = props.variant === 'ghost' ? 'secondary' : props.variant;
  return <VascoButton {...props} variant={variant} size="large" grow />;
}

window.VascoUI = Object.freeze({
  tokens: VASCO_UI_TOKENS,
  Button: VascoButton,
  IconButton: VascoIconButton,
  InlineAction: VascoInlineAction,
  ChoiceChip: VascoChoiceChip,
  InteractiveRow: VascoInteractiveRow,
  StatusNotice: VascoStatusNotice,
  SettingGroup: VascoSettingGroup,
  SettingRow: VascoSettingRow,
  Toggle: VascoToggle,
  FormSheet: VascoFormSheet,
  BottomSheet: VascoBottomSheet,
  DetailSheet: VascoDetailSheet,
  ConfirmDialog: VascoConfirmDialog,
  Field: VascoField,
  TextField: VascoTextField,
  SimpleSelect: VascoSimpleSelect,
  DayPicker: VascoDayPicker,
  ScopeTabs: VascoScopeTabs,
  SearchSelect: VascoSearchSelect,
  CreatableSelect: VascoCreatableSelect,
  ScreenHeader: VascoScreenHeader,
  icons: Object.freeze({ Close: VascoCloseIcon, Chevron: VascoChevronIcon }),
});

// Les fonctions de l'ancien écran Compte sont des bindings script modifiables.
// On les remplace après son chargement plutôt que d'éditer la référence figée.
SettingGroup = VascoSettingGroup;
SettingRow = VascoSettingRow;
Toggle = VascoToggle;
AcSheet = VascoFormSheet;
AcField = VascoField;
AcButton = VascoLegacyAcButton;