/* Site statique de hmms.app (16/10/2026) : couleurs de l'app
   (lib/theme/hmm_theme.dart, HmmColors.dark / light), polices embarquées
   (Chewy, DM Sans), rien d'extérieur. */

@font-face {
  font-family: "Chewy";
  src: url("/polices/Chewy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/polices/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/polices/DMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fond: #0b0b0d;
  --surface: #151518;
  --bord: #26262b;
  --texte: #f4f2ee;
  --discret: #a19da9;
  --accent: #cdbdf7;
  /* Accent pour du texte (lisible sur le fond clair aussi). */
  --accent-texte: #cdbdf7;
  /* Barre noircie d'une révélation à venir. */
  --noirci: #3a3740;
  /* Encadré pionnier de l'accueil (18/10/2026) : fond violet plein, texte
     clair ; contrastes AA vérifiés par test/logique/site_test.dart. */
  --pionnier-fond: #6347d0;
  --pionnier-texte: #ffffff;
  --pionnier-pale: #f0ebff;
  --pionnier-piste: #47309e;
  /* Pastille « Pionnier » (18/10/2026) : le citron et l'encre du bouton Hmm
     voté de l'app (HmmBrand.hmmVote, hmmVoteEncre), mêmes valeurs dans les
     deux thèmes. */
  --citron: #ffd60a;
  --citron-encre: #1a1a1a;
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #f6f4ef;
    --surface: #ffffff;
    --bord: #e3dfd6;
    --texte: #16121f;
    --discret: #6b6674;
    --accent-texte: #5b3fc4;
    --noirci: #16121f;
    --pionnier-fond: #5b3fc4;
    --pionnier-pale: #e3dafb;
    --pionnier-piste: #3e2a8c;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font: 400 1rem/1.55 "DM Sans", system-ui, sans-serif;
}

main {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
}

body.accueil main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

h1,
h2 {
  font-family: "Chewy", "DM Sans", sans-serif;
  font-weight: 400;
  line-height: 1.1;
}

h1 {
  font-size: 2.25rem;
  margin: 0.5rem 0 1rem;
}

h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.5rem;
}

/* Accueil, maquette du 17/10/2026 : logo grand et centré (la moitié de la
   largeur sur téléphone), accroche et explication centrées. */
.hero {
  text-align: center;
}

.logo {
  margin: 0;
}

.logo img {
  display: block;
  width: clamp(10rem, 50vw, 18rem);
  height: auto;
  margin: 0 auto;
}

.accroche {
  font-family: "Chewy", "DM Sans", sans-serif;
  font-size: clamp(1.5rem, 5.6vw, 2.2rem);
  line-height: 1.15;
  margin: 1.5rem 0 0;
}

.explication {
  color: var(--discret);
  font-size: 1.05rem;
  margin: 0.75rem 0 0;
}

/* Trois photos d'exemple, 4:5, sur une ligne. */
.exemples {
  margin-top: 2rem;
}

.photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  background: var(--surface);
}

.legende {
  color: var(--discret);
  font-size: 0.95rem;
  margin: 0.6rem 0 0;
  text-align: center;
}

/* Deux phrases sous les photos (18/10/2026) : la promesse, puis le reste
   à découvrir, plus discret. */
.promesse {
  margin: 2rem 0 0;
}

.promesse p {
  margin: 0;
  font-size: 1.15rem;
}

.promesse .suite {
  margin-top: 0.4rem;
  color: var(--discret);
  font-size: 1rem;
}

/* Lien vers l'autre langue (18/10/2026), en haut de chaque page. */
.langues {
  margin: 0 0 0.5rem;
  text-align: right;
}

.langues a {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 0;
  font-weight: 700;
}

/* Formulaire anglais pas encore ouvert : une ligne, un lien vers le français. */
.bientot {
  margin: 1rem 0;
}

/* Accueil (18/10/2026, piste A) : encadré pionnier en violet plein. */
.carte-pionnier {
  border-radius: 18px;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--pionnier-fond);
  color: var(--pionnier-texte);
}

.carte-haut {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.carte-pionnier .carte-libelle {
  margin: 0;
  font: 700 0.85rem/1.3 "DM Sans", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pionnier-pale);
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--citron);
  color: var(--citron-encre);
  font-size: 0.85rem;
  font-weight: 700;
}

.pastille svg {
  width: 1rem;
  height: 1rem;
}

.carte-pionnier .compteur {
  margin: 0.4rem 0 0;
  line-height: 1;
}

.carte-pionnier .chiffre {
  font-family: "Chewy", "DM Sans", sans-serif;
  font-size: 3.6rem;
}

.carte-pionnier .sur {
  font-family: "Chewy", "DM Sans", sans-serif;
  font-size: 1.6rem;
  color: var(--pionnier-pale);
}

.carte-pionnier .libres {
  margin: 0.2rem 0 0;
  font-weight: 700;
}

/* Barre native des places prises : seulement les pseudo-éléments du
   navigateur, jamais de style en ligne. */
.carte-pionnier progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  margin: 0.9rem 0 0.2rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pionnier-piste);
}

.carte-pionnier progress::-webkit-progress-bar {
  background: var(--pionnier-piste);
  border-radius: 999px;
}

.carte-pionnier progress::-webkit-progress-value {
  background: var(--pionnier-texte);
  border-radius: 999px;
}

.carte-pionnier progress::-moz-progress-bar {
  background: var(--pionnier-texte);
  border-radius: 999px;
}

.carte-pionnier .places {
  margin: 0.5rem 0 0;
  color: var(--pionnier-texte);
}

.carte-pionnier .avantages {
  margin: 0.9rem 0 0;
  color: var(--pionnier-pale);
}

/* Encadré pionnier, au-dessus du formulaire. */
.pionnier {
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: var(--surface);
}

.pionnier h2 {
  margin: 0;
}

.pionnier p {
  margin: 0.5rem 0 0;
}

a {
  color: var(--texte);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

main li a {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 0;
}

.retour {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 0;
  color: var(--discret);
}

footer {
  border-top: 1px solid var(--bord);
  padding: 1rem;
}

footer ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 40rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

footer a {
  display: inline-block;
  min-height: 44px;
  padding: 0.7rem 0;
  color: var(--discret);
  font-size: 0.9rem;
}

[hidden] {
  display: none !important;
}

/* Liste d'attente (17/10/2026) : formulaire de l'accueil et pages à un
   bouton rendues par la fonction (body.liste-attente). */

#liste-attente {
  width: 100%;
  margin-top: 2rem;
}

.places {
  color: var(--discret);
}

form.liste-attente .champ,
form.liste-attente .consentement,
form.liste-attente .mention,
form.liste-attente .envoi {
  margin: 1rem 0;
}

form.liste-attente label {
  display: block;
  margin-bottom: 0.35rem;
}

input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}

input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.consentement {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.6rem;
  align-items: start;
}

.consentement input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}

.consentement label {
  margin: 0;
  font-size: 0.95rem;
}

.mention {
  color: var(--discret);
  font-size: 0.9rem;
}

button {
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #16121f;
  font: 700 1rem/1.2 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}

/* /coulisses (17/10/2026). */

/* Titre : le vrai logo (fichier de assets/brand, jamais redessiné), puis
   « est prêt. » en Chewy, couleur d'accent. Le logo est en ligne et descendu
   de 15 % de sa hauteur : le bas du S (85 % de la hauteur du dessin) tombe
   sur la ligne de base du texte. Trop étroit : « est prêt. » passe d'un bloc
   à la ligne suivante. */
.titre-logo {
  font-size: clamp(2.1rem, 9.5vw, 2.75rem);
  line-height: 1.2;
}

.titre-logo img {
  display: inline-block;
  height: 5.4rem;
  width: auto;
  vertical-align: -0.81rem;
  /* Le cadre du fichier garde à droite du S la place des trois traits, qui
     sont tout en haut : « est prêt. » glisse dessous, sans les toucher. */
  margin-right: -1.4rem;
}

.titre-logo .suite {
  color: var(--accent-texte);
  white-space: nowrap;
}
/* Ligne sous le titre (18/10/2026) : plus marquée que le sous-titre, sans
   concurrencer le titre (DM Sans gras, couleur du texte, pas Chewy). */
.accroche-coulisses {
  margin: -0.25rem 0 0.35rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--texte);
  /* Sur deux lignes, jamais un mot seul sur la seconde. */
  text-wrap: balance;
}

.sous-titre {
  color: var(--discret);
  font-size: 1.1rem;
  margin: -0.25rem 0 1.5rem;
}

.accroche-coulisses + .sous-titre {
  margin-top: 0;
}

.progression progress {
  display: block;
  width: 100%;
  height: 12px;
  margin: 0.5rem 0;
  accent-color: var(--accent);
}

/* Repères sous la barre : 0, 25, 50, 75, 100. */
.reperes {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  justify-content: space-between;
  color: var(--discret);
  font-size: 0.8rem;
}

/* « Ce qui t'attend » : paliers. Barre noircie de longueur fixe par palier,
   jamais d'après le texte caché. */
.paliers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.palier {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 1.6rem;
}

.palier svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.palier .cadenas {
  color: var(--discret);
}

.palier .ouvert,
.palier.atteint .ferme {
  display: none;
}

.palier.atteint .ouvert {
  display: block;
}

.palier.atteint .cadenas,
.palier.atteint .seuil {
  color: var(--accent-texte);
}

.noirci {
  display: block;
  height: 0.95rem;
  border-radius: 4px;
  background: var(--noirci);
}

.noirci.n25 {
  width: 82%;
}

.noirci.n50 {
  width: 64%;
}

.noirci.n75 {
  width: 74%;
}

.palier .seuil {
  color: var(--discret);
  font-size: 0.85rem;
  white-space: nowrap;
}

.palier.portes .contenu {
  font-weight: 700;
}

.photos.deux {
  grid-template-columns: repeat(2, 1fr);
}

.revelation {
  margin-top: 2rem;
}

a.bouton {
  display: inline-block;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #16121f;
  font-weight: 700;
  text-decoration: none;
}

.instagram {
  color: var(--discret);
  font-size: 0.95rem;
}

/* Page « C'est noté » : lien vers /coulisses. */
.encart-coulisses a {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0;
}

/* Encart d'installation (web app /coulisses), sans script. */
.installer {
  margin-top: 2rem;
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 0 1.1rem;
  background: var(--surface);
}

.installer summary {
  min-height: 44px;
  padding: 0.7rem 0;
  cursor: pointer;
  font-weight: 700;
}

.installer summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.installer p,
.installer ul {
  margin: 0 0 1rem;
}

.installer ul {
  padding-left: 1.2rem;
}

/* Visage de l'icône de l'app (404, pages de résultat) : décoratif. */
.visage {
  margin: 0 0 1rem;
}

.visage img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 24px;
}

/* Champ piège : hors de la page, jamais affiché ni atteint. */
.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}