/*
 * Aide à la prise de poste (DEC-125) — préfixe pp-. Même langage que le
 * reste de l'espace stagiaire : cartes, badges, onglets. Le laurier doré
 * (DEC-122) signale un contenu débloqué par la réussite.
 */

.pp-avertissement {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.pp-avertissement > svg {
    flex-shrink: 0;
    margin-top: .15rem;
}

.pp-parcours-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.25rem;
}

.pp-parcours-entete h2 {
    margin: 0 0 .25rem;
}

.pp-parcours-entete p {
    margin: 0;
    max-width: 42rem;
}

/* Compteur et barre : affichés seulement quand le contrôleur Stimulus est
   actif (sans JavaScript, les cases restent cochables, sans compteur). */
.pp-progression {
    display: none;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.lc-active .pp-progression {
    display: flex;
}

.pp-progression-texte {
    font-weight: 700;
    font-size: .9rem;
    color: var(--couleur-texte);
    min-width: 8.5rem;
}

.pp-progression-piste {
    position: relative;
    width: 9rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--couleur-surface-secondaire);
    overflow: hidden;
}

.pp-progression-barre {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--couleur-sarcelle);
    transition: width var(--duree-moyenne, .25s) ease;
}

.lc-complete .pp-progression-texte {
    color: var(--couleur-succes-texte);
}

.lc-complete .pp-progression-barre {
    background: var(--couleur-succes-texte);
}

.pp-reinitialiser {
    padding: .35rem .8rem;
    font-size: .85rem;
}

.pp-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    align-items: start;
}

.pp-etape {
    margin: 0;
}

.pp-etape-complement {
    border-color: var(--couleur-info-bordure);
}

.pp-etape-entete {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .6rem;
}

.pp-etape-entete h3 {
    margin: 0;
    font-size: 1rem;
    flex: 1;
}

.pp-etape-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--couleur-marine);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}

.pp-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.pp-points li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.pp-points input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: .15rem 0 0;
    accent-color: var(--couleur-sarcelle);
    cursor: pointer;
}

.pp-points label {
    cursor: pointer;
    line-height: 1.45;
    transition: color var(--duree-rapide, .15s) ease;
}

.pp-points input:checked + label {
    color: var(--couleur-texte-attenue);
    text-decoration: line-through;
    text-decoration-color: var(--couleur-bordure-forte);
}

.pp-conseil {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .85rem 0 0;
    padding-top: .7rem;
    border-top: 1px dashed var(--couleur-bordure);
    font-size: .88rem;
    color: var(--couleur-texte-attenue);
}

.pp-conseil > svg {
    flex-shrink: 0;
    margin-top: .15rem;
}

.pp-version {
    margin-top: 1.5rem;
    font-size: .85rem;
}

/* Accueil : un niveau par carte, ou l'explication du guide encore fermé. */
.pp-niveau {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
}

.pp-niveau h2 {
    margin: .25rem 0 0;
}

.pp-niveau p {
    margin: 0;
}

.pp-niveau-lien {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .25rem;
    font-weight: 700;
    color: var(--couleur-primaire);
}

.pp-verrou {
    max-width: 38rem;
    text-align: center;
    margin-inline: auto;
}

.pp-verrou-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--couleur-surface-secondaire);
    color: var(--couleur-texte-attenue);
    margin-bottom: .5rem;
}