/* Site de Popizy : palette pastel de docs/brand/branding.md. */

@font-face {
  font-family: 'Sora';
  src: url('/fonts/Sora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --lavande: #B7A0EE;
  --rose: #F1A7CC;
  --peche: #FCB97E;
  --beurre: #FCDC7E;
  --encre: #1F1830;
  --violet: #5A4096;
  --lien: #A63A70;
  --fond: #FAF8FD;
  --carte: #FFFFFF;
  --teinte: #EFEBFA;
  --texte: #1F1830;
  --doux: #5E566E;
  --bord: #E4DDF5;
  --degrade: linear-gradient(135deg, var(--lavande), var(--rose));
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141020;
    --carte: #1E1830;
    --teinte: #2A2240;
    --texte: #F3EFFA;
    --doux: #BDB4CF;
    --bord: #3A3052;
    --violet: #CBB9F5;
    --lien: #F1A7CC;
  }
}

* {
  box-sizing: border-box;
}

/* `.bouton` (display: inline-flex) l'emporterait sur l'attribut hidden. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 17px/1.6 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

main {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

h1,
h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--texte);
}

h1 {
  font-size: 30px;
  margin: 24px 0 12px;
}

h2 {
  font-size: 20px;
  margin: 32px 0 8px;
  color: var(--violet);
}

p,
li {
  color: var(--texte);
}

a {
  color: var(--lien);
  font-weight: 600;
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--texte);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 20px;
}

.marque img {
  width: 44px;
  height: 44px;
}

.hero {
  text-align: center;
  padding-top: 24px;
}

.hero img {
  width: 160px;
  height: 160px;
}

.accroche {
  font-size: 19px;
  color: var(--doux);
  margin: 0 auto 24px;
  max-width: 440px;
}

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 20px;
  padding: 20px 22px;
  margin: 24px 0;
}

.carte.teinte {
  background: var(--teinte);
  border-color: transparent;
}

.provisoire {
  background: var(--beurre);
  color: var(--encre);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 600;
  margin: 16px 0 24px;
}

.provisoire * {
  color: var(--encre);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 20px 0 8px;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--degrade);
  color: var(--encre);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(149, 121, 216, 0.25);
}

.bouton[aria-disabled='true'] {
  background: var(--carte);
  border: 1px solid var(--bord);
  color: var(--doux);
  box-shadow: none;
  pointer-events: none;
}

.etapes {
  padding-left: 22px;
}

.etapes li {
  margin: 6px 0;
}

.petit {
  font-size: 15px;
  color: var(--doux);
}

footer {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--bord);
  font-size: 15px;
  color: var(--doux);
  text-align: center;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 8px;
}

footer a {
  font-weight: 600;
}