/* Testeur de mot de passe : styles propres à la page Téléchargements, s'appuient sur les variables de style.css */
.testeur { max-width: 44rem; margin: 0 auto; --c: var(--c-secu); }
.testeur .carte { margin-bottom: 0; }
.testeur label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--marine); }
.testeur-champ { position: relative; }
.testeur-champ input {
  width: 100%; padding: .8rem 5.5rem .8rem 1rem; border: 2px solid #c5d0e0; border-radius: .75rem;
  background: #fff; color: var(--marine); font: inherit; font-size: 1.0625rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.testeur-champ input:focus-visible, .testeur-afficher:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.testeur-afficher {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); min-height: 2.5rem; padding: 0 .75rem;
  border: 0; border-radius: .5rem; background: transparent; color: var(--accent-fonce); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.testeur-aide { margin: .6rem 0 0; font-size: .9375rem; }
.testeur-barre { height: .75rem; margin: 1.25rem 0 .75rem; border-radius: 999px; background: var(--filet); overflow: hidden; }
.testeur-barre div { width: 0; height: 100%; border-radius: 999px; transition: width .25s ease, background-color .25s ease; }
.testeur-niveau { font-size: 1.25rem; font-weight: 700; color: var(--marine); }
.testeur-duree { margin-top: .25rem; font-size: 1rem; }
.testeur-controles { list-style: none; margin: 1rem 0 0; padding: 0; }
.testeur-controles li { display: flex; gap: .75rem; padding: .4rem 0; border-top: 1px solid var(--filet); font-size: 1rem; color: var(--texte-doux); }
.testeur-controles li:first-child { border-top: 0; }
.testeur-marque { flex: 0 0 1.25rem; font-weight: 700; }
.testeur-marque.ok { color: var(--c-web); }
.testeur-marque.ko { color: var(--c-secu); }
.testeur-note { margin-top: .75rem; font-size: .9375rem; }
.explications { max-width: 44rem; margin: 3rem auto 0; }
.explications h3 { margin: 2rem 0 .5rem; font-size: 1.375rem; line-height: 1.25; }
.explications p { margin: 0 0 1rem; }
.explications .exemple { padding: .75rem 1rem; border-left: 4px solid var(--accent); background: var(--gris); border-radius: 0 .5rem .5rem 0; }
[hidden] { display: none !important; }