/* Accesoft — composants. À charger après accesoft-tokens.css. Aucune valeur en dur : uniquement des tokens. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: var(--font-weight-regular) 16px/1.6 var(--font-sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }

/* Boutons — pilules, une seule action principale par écran */
.ac-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--button-height); padding: 0 var(--button-padding-x); border: var(--hairline) solid var(--action); border-radius: var(--button-radius); background: var(--action); color: var(--on-action); font: var(--font-weight-medium) 15px/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard); }
.ac-button:hover { background: var(--action-hover); border-color: var(--action-hover); }
.ac-button:active { transform: scale(0.98); }
.ac-button.secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.ac-button.secondary:hover { background: var(--surface-soft); }
.ac-button.ghost { background: transparent; color: var(--text); border-color: transparent; }
.ac-button.ghost:hover { background: var(--surface-soft); }
.ac-button.danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.ac-button.small { min-height: 36px; padding: 0 var(--space-4); font-size: 13px; }
.ac-button.icon-only { width: var(--button-height); padding: 0; }
.ac-button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; }

.ac-icon { width: var(--icon); height: var(--icon); flex-shrink: 0; display: inline-block; vertical-align: middle; stroke-width: var(--icon-stroke); }
.ac-button .ac-icon { width: 18px; height: 18px; }

.ac-button:focus-visible, .ac-input:focus-visible, .ac-select:focus-visible, .ac-textarea:focus-visible, .ac-link:focus-visible, .ac-tab:focus-visible, .ac-switch:focus-visible, .ac-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.ac-link { color: var(--text); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 4px; }
.ac-link:hover { text-decoration-thickness: 2px; }

/* Champs */
.ac-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ac-label { font: var(--font-weight-medium) 14px/1.2 var(--font-sans); }
.ac-help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.ac-error { margin: 0; font-size: 12px; line-height: 1.45; color: var(--danger); }
.ac-input, .ac-select, .ac-textarea { width: 100%; min-height: var(--field-height); padding: 0 var(--space-4); font: var(--font-weight-regular) 15px/1.4 var(--font-sans); color: var(--text); background: var(--surface); border: var(--hairline) solid var(--border-strong); border-radius: var(--field-radius); transition: border-color var(--duration-fast) var(--easing-standard); }
.ac-textarea { min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; }
.ac-input:hover, .ac-select:hover, .ac-textarea:hover { border-color: var(--text-muted); }
.ac-input::placeholder, .ac-textarea::placeholder { color: var(--text-muted); opacity: 1; }
.ac-input[aria-invalid="true"] { border-color: var(--danger); }
.ac-input:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

.ac-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control); font-size: 14px; cursor: pointer; }
.ac-check input { accent-color: var(--action); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }

.ac-switch { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control); padding: 0; background: none; border: 0; color: var(--text); font: var(--font-weight-regular) 14px var(--font-sans); cursor: pointer; }
.ac-switch span { width: 44px; height: 26px; border-radius: var(--radius-round); background: var(--border-strong); position: relative; transition: background var(--duration-base) var(--easing-standard); }
.ac-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: transform var(--duration-base) var(--easing-standard); }
.ac-switch[aria-checked="true"] span { background: var(--action); }
.ac-switch[aria-checked="true"] span::after { background: var(--on-action); transform: translateX(18px); }

/* Statut */
.ac-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-round); background: var(--surface-soft); color: var(--text-muted); font: var(--font-weight-medium) 12px/1 var(--font-sans); }
.ac-badge.success { background: var(--success-bg); color: var(--success); }
.ac-badge.warning { background: var(--warning-bg); color: var(--warning); }
.ac-badge.danger { background: var(--danger-bg); color: var(--danger); }
.ac-badge.metal { background: var(--metal-copper); color: var(--ink); }

.ac-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-soft); color: var(--text); font-size: 14px; line-height: 1.5; }
.ac-alert p { margin: 0; }
.ac-alert.success { background: var(--success-bg); color: var(--success); }
.ac-alert.warning { background: var(--warning-bg); color: var(--warning); }
.ac-alert.danger { background: var(--danger-bg); color: var(--danger); }

/* Contenu */
.ac-card { padding: var(--card-padding); border: var(--hairline) solid var(--border); border-radius: var(--card-radius); background: var(--surface); color: var(--text); }
.ac-card.metal { border: 0; background: var(--metal-platinum); color: var(--ink); }

.ac-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.ac-table caption { padding: 0 0 var(--space-4); text-align: left; font-size: 12px; color: var(--text-muted); }
.ac-table th { padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--border); font: var(--font-weight-medium) 11px/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ac-table td { padding: var(--space-4); border-bottom: var(--hairline) solid var(--border); font-variant-numeric: tabular-nums; vertical-align: middle; }
.ac-table .numeric { text-align: right; }
.ac-table tfoot td { border-bottom: 0; font-weight: var(--font-weight-semibold); }

.ac-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-round); background: var(--surface-soft); }
.ac-tab { min-height: 36px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-round); background: transparent; color: var(--text-muted); font: var(--font-weight-medium) 14px var(--font-sans); cursor: pointer; transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.ac-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 var(--hairline) var(--border); }
.ac-tab-panel { padding: var(--space-6) 0 0; }

.ac-dialog { width: min(460px, calc(100vw - 32px)); padding: var(--dialog-padding); border: var(--hairline) solid var(--border); border-radius: var(--dialog-radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-overlay); }
.ac-dialog::backdrop { background: color-mix(in srgb, var(--ink) 50%, transparent); backdrop-filter: blur(8px); }
.ac-dialog h2 { margin: 0 0 var(--space-3); font: var(--font-weight-semibold) 22px/1.25 var(--font-sans); letter-spacing: -0.02em; }
.ac-dialog p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.ac-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-8); }

.ac-disclosure { border-bottom: var(--hairline) solid var(--border); }
.ac-disclosure summary { padding: var(--space-6) 0; font: var(--font-weight-medium) 16px var(--font-sans); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.ac-disclosure summary::after { content: "+"; color: var(--text-muted); font-weight: var(--font-weight-regular); }
.ac-disclosure[open] summary::after { content: "–"; }
.ac-disclosure p { margin: 0 0 var(--space-6); font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* Filet métal : un par écran, platine par défaut, cuivre en accent */
.ac-rule { height: var(--hairline); margin: var(--space-6) 0; border: 0; background: var(--border); }
.ac-rule.platinum { height: var(--rule); background: var(--rule-platinum); }
.ac-rule.copper { height: var(--rule); background: var(--rule-copper); }
.ac-rule.short { width: 48px; }

/* Titres */
.ac-eyebrow { margin: 0; font: var(--font-weight-medium) 11px/1.3 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ac-section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.ac-section-head h2 { margin: 0; font: var(--font-weight-semibold) 32px/1.15 var(--font-sans); letter-spacing: -0.03em; }
.ac-section-head p { margin: 0; font-size: 18px; line-height: 1.55; letter-spacing: -0.01em; color: var(--text-muted); }
.ac-section-head .ac-rule { margin: 0; }
.ac-display { margin: 0; font: var(--font-weight-semibold) clamp(44px, 7vw, 72px)/1 var(--font-sans); letter-spacing: -0.045em; }
.ac-num { font-variant-numeric: tabular-nums; }
.ac-code { font: 13px/1.55 var(--font-mono); }