/**
 * @file 02-base.css
 * @project Nails-Manucure-v1
 * @description Reset, base typographique et fondations globales.
 * @version 1.0.0
 * @standards CSS Living Standard, WCAG 2.2
 * @updated 2026-04-26
 */

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  background: var(--ivory);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: auto;
}


img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

ul {
  list-style: none;
}

/* ═══════════════════════════════════════
   HEADING HIERARCHY
   H1 > H2 > H3 > H4 strict.
   text-wrap: balance → pas d'orphelin,
   pas de ponctuation en début de ligne.
═══════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); line-height: 1.12; font-weight: 400; }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.22; font-weight: 500; }
h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.35; font-weight: 600; }
h4 { font-size: 1rem; line-height: 1.45; font-weight: 600; }

/* ═══════════════════════════════════════
   ACCESSIBILITÉ
═══════════════════════════════════════ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10001;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--plum);
  color: var(--ivory);
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

/* Message erreur formulaire */
.form-error-msg {
  margin-top: 12px;
  padding: 12px 16px;
  background: #FDF0F0;
  border: 1px solid #E8B4B4;
  border-radius: var(--r-sm);
  color: #A03030;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════
   FOCUS VISIBLE (audit: 2 regles -> 7)
═══════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--berry);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════
   PROFONDEUR CARTES (double-bezel light)
═══════════════════════════════════════ */

.card-depth {
  box-shadow:
    var(--sh-sm),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.card-depth-md {
  box-shadow:
    var(--sh-md),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════
   TEXTURE GRAIN
═══════════════════════════════════════ */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9998;
}