/* Parking Toulouse — landing. HTML/CSS pur, aucune dépendance. */
:root {
  --accent: #5b5fe9;
  --vert: #00c853;
  --fond: #fafafc;
  --surface: #ffffff;
  --texte: #1c1d22;
  --texte-2: #5c5f6b;
  --bord: #e4e5ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #9da3ff;
    --fond: #131318;
    --surface: #1d1e25;
    --texte: #ececf1;
    --texte-2: #a3a6b3;
    --bord: #2c2d38;
  }
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main { flex: 1; width: min(960px, 92%); margin: 0 auto; }

header.heros { text-align: center; padding: 64px 0 40px; }
.logo {
  display: inline-grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 22px;
  background: var(--accent);
  color: #fff;
  font-size: 42px; font-weight: 800;
  margin-bottom: 18px;
}
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); letter-spacing: -.5px; }
.pitch {
  max-width: 34em; margin: 12px auto 0;
  font-size: 1.12rem; color: var(--texte-2);
}

.cta { margin-top: 30px; }
.bouton {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700; font-size: 1.05rem;
  text-decoration: none;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 18px rgb(91 95 233 / .35);
}
.bouton[aria-disabled="true"] {
  background: var(--bord); color: var(--texte-2);
  box-shadow: none; cursor: default;
}
.cta .note { margin-top: 10px; font-size: .85rem; color: var(--texte-2); }

.apercu { display: flex; justify-content: center; padding: 24px 0 8px; }
/* Capture d'écran : placeholder dessiné en CSS en attendant la vraie image. */
.telephone {
  width: 280px; height: 580px;
  border-radius: 36px;
  border: 10px solid #23242b;
  background:
    radial-gradient(120px 80px at 75% 18%, rgb(0 200 83 / .25), transparent 70%),
    radial-gradient(160px 110px at 30% 45%, rgb(229 57 53 / .18), transparent 70%),
    linear-gradient(160deg, #dfe3ef 0%, #c8cde0 100%);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .telephone { background:
    radial-gradient(120px 80px at 75% 18%, rgb(0 200 83 / .35), transparent 70%),
    radial-gradient(160px 110px at 30% 45%, rgb(229 57 53 / .25), transparent 70%),
    linear-gradient(160deg, #2a2c36 0%, #1e2029 100%); }
}
.telephone::before { /* fausses rues */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 48%, rgb(0 200 83 / .9) 49% 52%, transparent 53%),
    linear-gradient(0deg, transparent 63%, rgb(120 144 156 / .8) 64% 66%, transparent 67%),
    linear-gradient(35deg, transparent 30%, rgb(251 140 0 / .8) 31% 32.5%, transparent 34%);
}
.telephone .etiquette {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bord);
  padding: 9px 18px; border-radius: 999px;
  font-size: .85rem; font-weight: 700; white-space: nowrap;
}

.points { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 36px 0 56px; }
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 18px;
  padding: 22px;
}
.carte h2 { font-size: 1.02rem; margin-bottom: 6px; }
.carte p { font-size: .94rem; color: var(--texte-2); }
.puce { font-size: 1.5rem; }

footer {
  border-top: 1px solid var(--bord);
  padding: 22px 0;
  text-align: center;
  font-size: .85rem;
  color: var(--texte-2);
}
footer a { color: var(--accent); }

/* Politique de confidentialité */
article.politique { padding: 48px 0 64px; max-width: 46em; }
article.politique h1 { font-size: 1.8rem; margin-bottom: 6px; }
article.politique .maj { color: var(--texte-2); font-size: .9rem; margin-bottom: 28px; }
article.politique h2 { font-size: 1.15rem; margin: 28px 0 8px; }
article.politique p, article.politique li { color: var(--texte-2); }
article.politique ul { padding-left: 1.2em; }
article.politique strong { color: var(--texte); }
.retour { display: inline-block; margin-top: 36px; color: var(--accent); }