/* Feuille de composants partagée — Mon Affiche Garage
   Chargée APRÈS les feuilles existantes : elle harmonise sans les réécrire. */

[hidden] { display: none !important; }

/* Accessibilité clavier : focus visible unique et lisible */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--mag-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: var(--mag-z-toast);
  background: var(--mag-action);
  color: var(--mag-on-action);
  padding: 12px 18px;
  border-radius: var(--mag-radius-control);
}
.skip-link:focus { left: 16px; top: 16px; }

/* Boutons : aplats, pas de pilules brillantes ; cible tactile >= 44 px */
button, .button, .primary-button, .ghost-button, .text-button {
  appearance: none;
  font: inherit;
  line-height: 1.2;
  border-radius: var(--mag-radius-control);
  min-height: var(--mag-touch-target);
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--mag-motion-fast) var(--mag-ease), border-color var(--mag-motion-fast) var(--mag-ease), color var(--mag-motion-fast) var(--mag-ease);
}
.button.primary, .primary-button {
  background: var(--mag-action);
  color: var(--mag-on-action);
  border: 1.5px solid var(--mag-action);
}
.button.primary:hover, .primary-button:hover { background: var(--mag-action-hover); border-color: var(--mag-action-hover); }
.button.ghost, .ghost-button, .text-button {
  background: transparent;
  color: var(--mag-text);
  border: 1.5px solid var(--mag-border-control);
}
.button.ghost:hover, .ghost-button:hover { background: var(--mag-selected-bg); }
button:disabled, .disabled, button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Inset control groups: shared calm surface for related controls. */
.control-surface {
  padding: var(--mag-space-4);
  border: 1px solid var(--mag-border);
  border-radius: var(--mag-radius-panel);
  background: var(--mag-surface-subtle);
}

/* Champs : limites visibles, pas le seul filet décoratif */
.field-input, .field-select, input[type="text"], input[type="email"], input[type="password"], select {
  min-height: var(--mag-control-height);
  background: var(--mag-surface);
  color: var(--mag-text);
  border: 1.5px solid var(--mag-border-control);
  border-radius: var(--mag-radius-control);
  padding: 10px 12px;
  font: inherit;
}
.field-input:focus-visible, .field-select:focus-visible {
  outline: 3px solid var(--mag-focus);
  outline-offset: 1px;
}

/* Cartes de choix : sélection évidente, pas un simple hover */
.format-option { position: relative; }
.format-option input { position: absolute; opacity: 0; }
.format-option input:checked + .format-card {
  border: 2px solid var(--mag-action);
  background: var(--mag-selected-bg);
}
.format-option input:focus-visible + .format-card {
  outline: 3px solid var(--mag-focus);
  outline-offset: 2px;
}
.style-picker-card { min-height: var(--mag-touch-target); }
.style-picker-card[aria-pressed="true"] {
  border: 2px solid var(--mag-action);
  background: var(--mag-selected-bg);
}
.style-picker-card:focus-visible { outline: 3px solid var(--mag-focus); outline-offset: 2px; }

/* Prix et données : chiffres alignés, fonte signature */
.pricing-grid strong, #reference-total-price, .hero-v2-price strong {
  font-family: var(--mag-font-display);
  font-variant-numeric: tabular-nums;
}

/* Curseurs : prise en main visible, transforms de cadrage inchangés */
.ba-range, .range-input { accent-color: var(--mag-action); }
.ba-range:focus-visible, .range-input:focus-visible { outline: 3px solid var(--mag-focus); outline-offset: 2px; }

/* Surfaces d'état */
.pilot-note, .gallery-status, .trust-copy { color: var(--mag-text-muted); }
.pill {
  background: var(--mag-selected-bg);
  color: var(--mag-action);
  border-radius: var(--mag-radius-control);
}

/* FAQ : sections ouvertes par filets, pas des cartes empilées */
details { border-top: 1px solid var(--mag-border); }
details summary {
  cursor: pointer;
  min-height: var(--mag-touch-target);
  display: flex;
  align-items: center;
  font-family: var(--mag-font-display);
}

/* Final surface overrides: opaque paper, restrained radii and shadows. */
body.public-site, body.studio-page, body.admin-body { background: var(--mag-bg); color: var(--mag-text); font-family: var(--mag-font-body); }
.public-nav, .admin-hero, .admin-panel, .admin-card, .login-card, .hero-v2-card,
.studio-page-reference .reference-step-card, .studio-page-reference .studio-right-panel-reference {
  background: var(--mag-surface); border-color: var(--mag-border); border-radius: var(--mag-radius-panel); box-shadow: none;
}
.public-nav { border-radius: 0; backdrop-filter: none; }
.public-nav a, .studio-panel-tab, .studio-link-pill, .admin-tab { min-height: 44px; display: inline-flex; align-items: center; }
.hero-copy h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -.03em; }
.hero-v2-poster, .reference-preview-poster { border-radius: 0; box-shadow: var(--mag-shadow-print); }
.hero-v2-poster img { object-fit: contain; }
.hero-v2-price, .soft-pill, .studio-link-pill, .studio-panel-tab, .admin-tab { border-radius: var(--mag-radius-control); }
.pilot-note, .product-caption, .gallery-status, .pricing-note, .helper-copy { font-size: 14px; line-height: 1.5; }
.faq-list details { padding: 16px 0; }
.faq-list summary { font-size: 16px; }
.faq-list p { max-width: 75ch; line-height: 1.5; }
.style-picker-card { position: relative; border-radius: var(--mag-radius-control); box-shadow: none; }
.style-picker-card[aria-pressed="true"]::after { content: 'Choisi'; position: absolute; top: 8px; right: 8px; padding: 4px 8px; background: var(--mag-action); color: var(--mag-on-action); font-size: 13px; }
/* The image keeps the full comparison width. Only its mask changes. */
.before-after-slider .after-wrap { width: 100%; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.before-after-slider img { object-fit: contain; }
.before-after-slider { border-radius: var(--mag-radius-panel); background: var(--mag-surface-subtle); box-shadow: none; }
.before-after-slider:focus-within { outline: 3px solid var(--mag-focus); outline-offset: 3px; }
.before-after-slider .ba-range { margin: 0; padding: 0; border: 0; }
#crop-image-2 { object-fit: cover; pointer-events: none; }
#client-result { object-fit: contain; }
#crop-viewport-2:focus-visible { outline: 3px solid var(--mag-focus); outline-offset: 3px; }
#result-caption { color: var(--mag-text-secondary); }
.generation-frame[data-state="stale"] { outline: 2px solid var(--mag-warning); outline-offset: 2px; }
@media (max-width: 760px) {
  .public-nav { position: static; }
  .public-nav nav { gap: 8px 16px; }
  .hero-v2-visual, .hero-v2-card, .studio-left-panel, .studio-right-panel { min-width: 0; }
  .studio-page-reference .generation-frame-reference { min-height: 0; height: clamp(300px, 58vh, 520px); }
  .style-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-checkout-row, .result-actions-row { flex-wrap: wrap; }
}

/* Mouvement réduit : le site reste lisible, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}