/*
 Theme Name:  Storefront macOS UI (Child) — Palette Rose/Gris
 Template:    storefront
 Version:     1.0.0
 Text Domain: storefront-macos
*/

/* =============================
   Tokens & base
============================= */
:root {
  --accent: #e74c3c; /*#e84393;   /* rose */
  --text: #2b2f31; /* texte principal (léger plus sombre que #636e72 pour lisibilité) */
  --muted: #636e72; /* gris foncé */
  --surface: #b2bec3; /* gris clair/surface */
  --bg: #f6f7f8; /* fond très clair */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, 0.12);
  --ring: 0 0 0 2px rgba(232, 67, 147, 1);
}

html,
body {
  height: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
}

.col-full {
  max-width: 1200px !important;
}

/* === PATCH: supprimer le carré violet moche au focus === */
:where(a, button, .button, input, select, textarea):focus,
:where(a, button, .button, input, select, textarea):focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* =============================
   Hero
============================= */
.macos-hero{ padding: 44px 16px 12px; }
.macos-hero__card{
  max-width: 1080px; margin:0 auto; text-align:center;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 24px;
  padding: 28px 22px;
  box-shadow: var(--shadow-1);
}
.macos-hero__subtitle{ color: var(--muted); margin:.25rem 0 1rem; }
.macos-hero__search .search-field,
.macos-hero__search input[type=search]{
  max-width:520px; width:100%; margin:0 auto;
  border-radius: 14px; border:1px solid rgba(0,0,0,.12);
  padding: 12px 14px; outline: none;
}
.macos-hero__usp{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:12px; color:#fff;
}
.macos-hero__usp span{
  background: var(--accent);
  border-radius: 999px; padding:6px 10px; box-shadow: var(--shadow-1);
}