/* ---------------------------------------------------------------------------
   djeremia-child/assets/formation.css
   Espace formation : ecran de verrouillage, page /acces/, sommaire de sujet.
   Fichier separe de style.css, qui est partage et deja lourd.
   ------------------------------------------------------------------------ */

/* --- Ecran de verrouillage d'un module ---------------------------------- */

.dj-lock {
  background: var(--dj-surface);
  border: 1px solid var(--dj-border);
  border-radius: var(--dj-radius);
  padding: 2.4rem 2rem;
  margin: 2.5rem 0;
  text-align: center;
}

.dj-lock-tag {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dj-signal-glow);
  border: 1px solid rgba(110, 143, 255, .3);
  border-radius: 999px;
  padding: .28rem .8rem;
  margin-bottom: 1.1rem;
}

.dj-lock h2 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  margin: 0 0 .9rem;
}

.dj-lock p {
  color: var(--dj-text-dim);
  max-width: 46ch;
  margin: 0 auto 1.4rem;
}

.dj-lock-btn,
.dj-lock-btn:visited,
.dj-lock-alt,
.dj-lock-alt:visited {
  display: inline-block;
  border-radius: 999px;
  padding: .8rem 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--dj-transition);
  margin: .25rem;
}

.dj-lock-btn { background: var(--dj-signal); color: #fff; }
.dj-lock-btn:hover { background: var(--dj-signal-glow); transform: translateY(-1px); }

.dj-lock-alt { border: 1px solid var(--dj-border); color: var(--dj-text-dim); }
.dj-lock-alt:hover { border-color: var(--dj-signal-glow); color: var(--dj-text); }

/* --- Page /acces/ -------------------------------------------------------- */

.dj-acces { margin: 2rem 0 3rem; }

.dj-acces h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 1.2rem; }

.dj-acces-ok {
  background: rgba(22, 82, 240, .12);
  border: 1px solid rgba(110, 143, 255, .35);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.8rem;
  color: var(--dj-text);
}

.dj-acces-sujet {
  background: var(--dj-surface);
  border: 1px solid var(--dj-border);
  border-radius: var(--dj-radius);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.4rem;
}

.dj-acces-sujet h3 { margin: 0 0 1rem; font-size: 1.25rem; }

.dj-acces-modules { margin: 0; padding-left: 1.4rem; }

.dj-acces-modules li { margin: .55rem 0; }

.dj-acces-modules a {
  color: var(--dj-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--dj-transition);
}

.dj-acces-modules a:hover {
  color: var(--dj-signal-glow);
  border-bottom-color: currentColor;
}

.dj-acces-vide { color: var(--dj-text-mute); font-style: italic; margin: 0; }

.dj-acces-help,
.dj-acces-foot { color: var(--dj-text-mute); font-size: .92rem; }

/* Le formulaire natif de WordPress, remis au gabarit du site. */
.dj-acces .login-username,
.dj-acces .login-password { margin-bottom: 1rem; }

.dj-acces label {
  display: block;
  font-size: .88rem;
  color: var(--dj-text-dim);
  margin-bottom: .35rem;
}

.dj-acces input[type="text"],
.dj-acces input[type="password"] {
  width: 100%;
  background: var(--dj-surface-2);
  border: 1px solid var(--dj-border);
  border-radius: 12px;
  color: var(--dj-text);
  padding: .8rem 1rem;
  font: inherit;
}

.dj-acces input[type="text"]:focus,
.dj-acces input[type="password"]:focus {
  outline: none;
  border-color: var(--dj-signal-glow);
}

.dj-acces .button-primary,
.dj-acces input[type="submit"] {
  background: var(--dj-signal);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.8rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--dj-transition);
}

.dj-acces .button-primary:hover,
.dj-acces input[type="submit"]:hover { background: var(--dj-signal-glow); }

/* --- Sommaire d'un sujet, en bas de chaque module ------------------------ */

.dj-sommaire {
  background: var(--dj-surface);
  border: 1px solid var(--dj-border);
  border-radius: var(--dj-radius);
  padding: 1.5rem 1.8rem;
  margin: 3rem 0 1rem;
}

.dj-sommaire-titre {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dj-text-mute);
  margin-bottom: .9rem;
}

.dj-sommaire ol { margin: 0; padding-left: 1.4rem; }

.dj-sommaire li { margin: .5rem 0; color: var(--dj-text-dim); }

.dj-sommaire a { color: var(--dj-text-dim); text-decoration: none; }
.dj-sommaire a:hover { color: var(--dj-signal-glow); }

.dj-sommaire-ici > span { color: var(--dj-text); font-weight: 700; }

/* --- Bloc d'achat, etat « deja acquis » ---------------------------------- */

.dj-buy--owned { text-align: center; }

@media (max-width: 640px) {
  .dj-lock { padding: 1.8rem 1.2rem; }
  .dj-acces-sujet,
  .dj-sommaire { padding: 1.2rem 1.1rem; }
}