/* Formulaire de diagnostic WP Doctor. Couleurs alignees sur le theme de la
   vitrine dans config/storefronts.json : primaire #0F3D3E, accent #E4572E. */
.wpd-form {
  --wpd-primary: #0F3D3E;
  --wpd-accent: #E4572E;
  --wpd-line: #d9ded9;
  --wpd-muted: #5b6070;
  --wpd-bg: #fbfaf7;
  max-width: 34rem;
  margin: 0 auto;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color: #16181d;
  background: #fff;
  border: 1px solid var(--wpd-line);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  box-sizing: border-box;
}
.wpd-form * { box-sizing: inherit; }
.wpd-ligne { margin: 0 0 1rem; }
.wpd-ligne label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.wpd-form input[type=text],
.wpd-form input[type=email] {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  color: inherit;
  background: var(--wpd-bg);
  border: 1px solid var(--wpd-line);
  border-radius: 9px;
}
.wpd-form input:focus-visible { outline: 2px solid var(--wpd-primary); outline-offset: 1px; }
.wpd-deux { display: flex; gap: .75rem; flex-wrap: wrap; }
.wpd-deux > span { flex: 1 1 12rem; min-width: 0; }
.wpd-consent { font-size: .9rem; margin: 0 0 1.1rem; }
.wpd-consent label { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.wpd-consent input { margin-top: .25rem; flex: 0 0 auto; }
.wpd-btn {
  display: inline-block;
  width: 100%;
  padding: .85rem 1.2rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--wpd-accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.wpd-btn:disabled { opacity: .6; cursor: progress; }
.wpd-btn-lien { background: var(--wpd-primary); margin-top: .4rem; }
.wpd-note { font-size: .82rem; color: var(--wpd-muted); margin: .9rem 0 0; }
.wpd-etat {
  margin-top: 1rem;
  padding: .8rem .9rem;
  font-size: .93rem;
  background: var(--wpd-bg);
  border: 1px solid var(--wpd-line);
  border-radius: 10px;
}
.wpd-etat.wpd-err { background: #fdf0ee; border-color: #f3cfc8; color: #9b1c13; }
.wpd-fini { margin-top: 1rem; text-align: center; }
.wpd-fini-titre { font-weight: 700; font-size: 1.05rem; margin: 0 0 .2rem; }
.wpd-score { font-size: 2.4rem; font-weight: 800; color: var(--wpd-primary); margin: .2rem 0 .6rem; line-height: 1; }
@media (prefers-color-scheme: dark) {
  .wpd-form:not([data-theme=light]) {
    --wpd-line: #2c3330; --wpd-muted: #9aa6a4; --wpd-bg: #151a19;
    color: #eef1f0; background: #1b201f;
  }
  .wpd-form:not([data-theme=light]) .wpd-etat.wpd-err { background: #2a1714; border-color: #5c2a22; color: #f3b5ac; }
  .wpd-form:not([data-theme=light]) .wpd-score { color: #7fd1c4; }
}

/* ---- Page d'accueil de la vitrine ---- */
.wpd-hero { max-width: 40rem; margin: 0 auto 2rem; text-align: center; }
.wpd-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #E4572E; margin: 0 0 .6rem; }
.wpd-h1 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); line-height: 1.18; margin: 0 0 .8rem; }
.wpd-lead { font-size: 1.08rem; line-height: 1.6; color: #41474f; margin: 0; }
.wpd-sections { max-width: 46rem; margin: 2.6rem auto 0; }
.wpd-sec { margin: 0 0 2.2rem; }
.wpd-sec h3 { font-size: 1.3rem; margin: 0 0 .7rem; }
.wpd-sec h4 { font-size: 1rem; margin: 0 0 .25rem; }
.wpd-sec p { margin: 0 0 .6rem; line-height: 1.6; }
.wpd-etapes { margin: 0; padding-left: 1.3rem; }
.wpd-etapes li { margin: 0 0 .6rem; line-height: 1.6; }
.wpd-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.1rem; }
.wpd-grille > div { background: #fbfaf7; border: 1px solid #d9ded9; border-radius: 12px; padding: 1rem 1.1rem; }
.wpd-grille p { font-size: .93rem; color: #5b6070; margin: 0; }
.wpd-sec-encadre { background: #0F3D3E; color: #fff; border-radius: 16px; padding: 1.5rem 1.6rem; }
.wpd-sec-encadre h3 { color: #fff; }
.wpd-sec-encadre p { color: #dfe8e6; margin: 0; }
@media (prefers-color-scheme: dark) {
  .wpd-lead { color: #b9c0c6; }
  .wpd-grille > div { background: #151a19; border-color: #2c3330; }
  .wpd-grille p { color: #9aa6a4; }
}