/* mpstar.ma — la feuille commune de l'accueil et des pages légales. */
@import url("/marque/polices/fira-sans-400.css");
@import url("/marque/polices/fira-sans-500.css");
@import url("/marque/polices/fira-sans-700.css");

:root {
  color-scheme: light dark;
  --fond: #fbfaf8; --fond-doux: #f4ebe3; --texte: #2b2b28; --doux: #6b6b67;
  --trait: #e3d9cf; --accent: #861932; --sur-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1b1b1e; --fond-doux: #232327; --texte: #f2efe9; --doux: #9b9b95;
    --trait: #35353a; --accent: #c9445e; --sur-accent: #ffffff;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fond); color: var(--texte);
  font: 16px/1.7 "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
strong { font-weight: 500; }

/* La marque, claire ou sombre selon le thème du lecteur. */
.marque.sombre { display: none; }
@media (prefers-color-scheme: dark) {
  .marque.clair { display: none; }
  .marque.sombre { display: block; }
}

/* Le bouton de connexion. */
.connexion {
  display: inline-block; background: var(--accent); color: var(--sur-accent);
  text-decoration: none; font-weight: 500; border-radius: 8px;
  padding: 0.8rem 1.6rem;
}
.connexion:hover, .connexion:focus-visible { filter: brightness(1.1); }

/* — L'accueil — */
.entete {
  background: var(--fond-doux); text-align: center;
  padding: 3rem 1rem 3.5rem;
}
.entete .marque { width: min(17rem, 70vw); height: auto; margin: 0 auto 2rem; }
.entete h1 {
  font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25; max-width: 36rem; margin: 0 auto;
}
.entete p { color: var(--doux); max-width: 34rem; margin: 1rem auto 2rem; }

.sections {
  max-width: 60rem; margin: 0 auto; padding: 3rem 1rem;
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.sections h2 { font-size: 1.125rem; font-weight: 700; }
.sections p { margin-top: 0.6rem; color: var(--doux); }

.plateforme {
  max-width: 44rem; margin: 0 auto; padding: 0 1rem 3rem; text-align: center;
}
.plateforme h2 { font-size: 1.25rem; font-weight: 700; }
.plateforme p { margin: 0.8rem auto 1.75rem; color: var(--doux); }

/* — Les pages légales — */
.page { max-width: 42rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.page .marque { width: 8rem; height: auto; margin-bottom: 2.5rem; }
.page h1 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
.page .date { color: var(--doux); font-size: 0.875rem; margin-top: 0.5rem; }
.page h2 {
  font-size: 1.0625rem; font-weight: 700; margin-top: 2.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--trait);
}
.page p, .page li { margin-top: 0.85rem; }
.page ul { padding-left: 1.25rem; }
.page li::marker { color: var(--accent); }

/* — Le pied, partout — */
.pied {
  border-top: 1px solid var(--trait); color: var(--doux); font-size: 0.875rem;
  text-align: center; padding: 1.5rem 1rem 2.5rem;
}
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; }
.pied p { margin-top: 0.6rem; }