/* Theme clair : la formation se fait en salle, souvent au videoprojecteur, ou le
   fond sombre passe mal. Palette reprise de cyberconsulting.fr pour que les
   participants reconnaissent la maison. */
:root {
  --encre: #0A192F;
  --texte: #47536B;
  --accent: #0E7C66;        /* turquoise assombri : le #64FFDA d'origine est
                               illisible sur fond clair (1,4:1) */
  --accent-clair: #E6F5F1;
  --fond: #FBFCFD;
  --carte: #FFFFFF;
  --bord: #DDE3EC;
  --alerte: #B4232B;
  --ok: #0E7C66;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.7;
  font-size: 17px;
}
.page { max-width: 680px; margin: 0 auto; padding: 32px 20px 80px; }
h1 { color: var(--encre); font-size: 1.9rem; line-height: 1.25; margin: 0 0 12px; }
h2 { color: var(--encre); font-size: 1.25rem; margin: 32px 0 12px; }
p { margin: 0 0 16px; }
a { color: var(--accent); }

.bandeau {
  background: #FFF7E6; border: 1px solid #E8D5A3; color: #6B5214;
  padding: 12px 16px; border-radius: 8px; font-size: 0.95rem; margin-bottom: 28px;
}
.bandeau strong { color: #4A3A0E; }

/* Indicateur d'etapes horizontal. Volontairement PAS un rail vertical a
   pastilles : ce motif est devenu la signature des interfaces generees. */
.etapes { display: flex; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.etapes li {
  flex: 1; text-align: center; font-size: 0.8rem; padding: 8px 4px;
  border-top: 3px solid var(--bord); color: #8A94A6;
}
.etapes li.faite { border-top-color: var(--ok); color: var(--ok); font-weight: 600; }
.etapes li.active { border-top-color: var(--encre); color: var(--encre); font-weight: 600; }

.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 10px; padding: 28px;
}
label { display: block; font-weight: 600; color: var(--encre); margin: 20px 0 6px; }
input[type=email], input[type=password], input[type=text] {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--bord); border-radius: 8px; background: #fff; color: var(--encre);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

button {
  margin-top: 24px; width: 100%; padding: 14px; font-size: 1rem; font-weight: 600;
  font-family: inherit; color: #fff; background: var(--encre);
  border: 0; border-radius: 8px; cursor: pointer;
}
button:hover { background: #142D4E; }
button:active { transform: scale(0.99); }

.jauge { height: 8px; background: var(--bord); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.jauge span { display: block; height: 100%; width: 0; background: var(--alerte); transition: width .25s, background .25s; }
.verdict { font-size: 0.9rem; margin-top: 8px; min-height: 1.4em; }
.verdict b { color: var(--encre); }

.erreur { background: #FDECEC; border: 1px solid #F0C2C2; color: var(--alerte);
          padding: 12px 16px; border-radius: 8px; margin: 16px 0 0; font-size: 0.95rem; }
.succes { background: var(--accent-clair); border: 1px solid #A8DCCE; color: #0B5F4E;
          padding: 12px 16px; border-radius: 8px; margin: 16px 0 0; font-size: 0.95rem; }

.astuce { background: var(--accent-clair); border-left: 4px solid var(--accent);
          padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 0.95rem; }
.astuce b { color: #0B5F4E; }

.pied { margin-top: 28px; font-size: 0.9rem; text-align: center; }
.liste-recap { padding-left: 20px; }
.liste-recap li { margin-bottom: 10px; }