:root {
  --encre: #14161a;
  --papier: #fbfaf7;
  --gris: #5d6470;
  --trait: #e3e0d8;
  --accent: #7a5c2e;
  --accent-clair: #f3ede0;
}
* { box-sizing: border-box; }
body.score-site, .score-site {
  margin: 0;
  color: var(--encre);
  background: var(--papier);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.62;
}
.score-site img { max-width: 100%; height: auto; }
.score-site section, .score-site footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}
.score-site .etiquette {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 .9rem;
}
.score-site h1 {
  font-size: clamp(3.4rem, 12vw, 6rem);
  line-height: .92; margin: .3rem 0 1.2rem; letter-spacing: -.02em;
}
.score-site h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  line-height: 1.18; margin: 0 0 1.1rem; letter-spacing: -.01em;
}
.score-site h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
.score-site p { margin: 0 0 1.05rem; }

/* --- hero --- */
.score-site .hero { padding-top: 5.5rem; padding-bottom: 3rem; }
.score-site .marque {
  display: block; width: 40px; height: 40px; margin-bottom: 1.1rem;
}
.score-site .surtitre {
  font-family: system-ui, sans-serif; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin: 0;
}
.score-site .promesse {
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  color: var(--encre); max-width: 34ch; margin-bottom: 1.6rem;
}
.score-site .chapo { max-width: 60ch; color: var(--gris); }
.score-site .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 1.2rem; }
.score-site .bouton {
  display: inline-block; padding: .82rem 1.5rem; border-radius: 2px;
  background: var(--encre); color: var(--papier); text-decoration: none;
  font-family: system-ui, sans-serif; font-size: .92rem;
  border: 1px solid var(--encre); transition: opacity .15s;
}
.score-site .bouton:hover { opacity: .84; }
.score-site .bouton.fantome { background: transparent; color: var(--encre); }
.score-site .mention {
  font-size: .88rem; color: var(--gris); max-width: 56ch;
  padding-top: 1.2rem; border-top: 1px solid var(--trait);
}

/* --- blocs --- */
.score-site .bloc { border-top: 1px solid var(--trait); }
.score-site .intro { max-width: 62ch; color: var(--gris); }
.score-site .souligne {
  max-width: 62ch; border-left: 3px solid var(--accent);
  padding-left: 1.1rem; color: var(--encre); margin-top: 2rem;
}

/* --- demonstration --- */
.score-site figure { margin: 0; }
.score-site figure img {
  width: 100%; border: 1px solid var(--trait); background: #fff;
}
.score-site figcaption {
  font-size: .93rem; color: var(--gris); margin-top: .9rem; max-width: 60ch;
}

/* --- chiffres --- */
.score-site .grille-chiffres {
  display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); margin: 2.2rem 0 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.score-site .carte { background: var(--papier); padding: 1.6rem 1.3rem; }
.score-site .carte.accent { background: var(--accent-clair); }
.score-site .valeur {
  font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1; margin: 0 0 .35rem;
  letter-spacing: -.02em;
}
.score-site .cle {
  font-family: system-ui, sans-serif; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .5rem;
}
.score-site .detail { font-size: .93rem; color: var(--gris); margin: 0; }
.score-site .note { font-size: .93rem; color: var(--gris); max-width: 66ch; }

/* --- voies --- */
.score-site .voies {
  display: grid; gap: 1.6rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.score-site .voie { border-top: 2px solid var(--encre); padding-top: 1rem; }
.score-site .voie .num {
  font-size: 2.1rem; line-height: 1; margin: 0 0 .4rem; color: var(--accent);
}
.score-site .voie p:last-child { color: var(--gris); margin: 0; }

/* --- regles --- */
.score-site .regles { margin: 1.8rem 0 0; padding: 0; list-style: none; }
.score-site .regles li {
  border-top: 1px solid var(--trait); padding: 1.1rem 0;
  max-width: 68ch; color: var(--gris);
}
.score-site .regles strong { color: var(--encre); }

/* --- limites --- */
.score-site .limites {
  display: grid; gap: 1.5rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.score-site .limite { border-left: 2px solid var(--trait); padding-left: 1.1rem; }
.score-site .limite p { color: var(--gris); font-size: .96rem; margin: 0; }

/* --- formulaire de depot --- */
.score-site .depot-form { margin-top: 2rem; max-width: 44rem; }
.score-site .depot-form p { margin: 0 0 1.2rem; }
.score-site .paire {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.score-site .depot-form label {
  display: block; margin-bottom: .35rem;
  font-family: system-ui, sans-serif; font-size: .88rem;
}
.score-site .depot-form label span { color: var(--accent); }
.score-site .depot-form label span.opt { color: var(--gris); }
.score-site .depot-form input[type=text],
.score-site .depot-form input[type=email],
.score-site .depot-form textarea,
.score-site .depot-form input[type=file] {
  width: 100%; padding: .72rem .85rem; border: 1px solid var(--trait);
  background: #fff; border-radius: 2px; font: inherit; font-size: .97rem;
  color: var(--encre);
}
.score-site .depot-form input:focus, .score-site .depot-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122, 92, 46, .13);
}
.score-site .depot-form .aide {
  display: block; margin-top: .4rem; font-size: .86rem; color: var(--gris);
}
.score-site .depot-form .envoi { margin-top: 1.6rem; }
.score-site .depot-form button {
  padding: .85rem 1.7rem; border: 1px solid var(--encre); border-radius: 2px;
  background: var(--encre); color: var(--papier);
  font-family: system-ui, sans-serif; font-size: .95rem; cursor: pointer;
}
.score-site .depot-form button:hover { opacity: .85; }
.score-site .depot-erreur {
  border-left: 3px solid #a4342c; padding: .8rem 1rem;
  background: #fbf1f0; color: #7c2a23; max-width: 44rem;
}
.score-site .depot-recu {
  border: 1px solid var(--trait); background: var(--accent-clair);
  padding: 2.2rem; max-width: 44rem; margin-top: 2rem;
}
.score-site .depot-recu .grand { font-size: 1.5rem; margin: 0 0 .5rem; }
.score-site .depot-recu p:last-child { margin: 0; color: var(--gris); }

/* --- pied --- */
.score-site .pied { border-top: 1px solid var(--trait); color: var(--gris); }
.score-site .pied .fin { font-size: .9rem; margin: 0; }

@media (max-width: 40rem) {
  body.score-site, .score-site { font-size: 17px; }
  .score-site section, .score-site footer { padding: 3.2rem 1.2rem; }
}