/*
 * Espaces internes PROFORM — composants V2 (préfixe pf-) : écrans de
 * travail groupé (convocations, pièces, inscriptions), listes de contrôle,
 * mises en page en colonnes. Même direction visuelle que l'Espace
 * Partenaire (`Plan design/UX` §10, §16.14) : pleine largeur, blocs
 * répartis en colonnes plutôt qu'empilés, une seule colonne sous 960px.
 */

/* Deux colonnes : contenu principal large, colonne d'action à droite. */
.pf-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    align-items: start;
    gap: 1.25rem;
}

.pf-colonnes > * {
    min-width: 0;
}

/* Fiche en deux colonnes : onglets de travail à gauche, réglages et
   ouverture dans une colonne latérale présentée en cartes. */
.pf-colonnes-fiche {
    grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr);
}

.pf-fiche-cote {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-fiche-cote > .fiche-section {
    margin: 0;
    padding: 1rem 1.1rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-carte);
}

/* Formation non ouverte : l'ouverture est l'action du moment, en tête. */
.pf-fiche-cote > .pf-prioritaire {
    order: -1;
}

.pf-controle-replie > summary {
    cursor: pointer;
    color: var(--couleur-sarcelle-texte);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.pf-fiche-cote .fiche-section-titre {
    font-size: 1rem;
}

.pf-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    align-items: start;
    gap: 1.25rem;
}

.pf-collant {
    position: sticky;
    top: calc(var(--hauteur-header) + 1rem);
}

.carte.pf-carte {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0;
    padding: 1.25rem 1.35rem;
}

.pf-carte-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

h2.pf-carte-titre {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.05rem;
}

.pf-compteur {
    margin: 0.15rem 0 0;
    color: var(--couleur-primaire);
    font-size: 0.9rem;
    font-weight: 600;
}

.pf-note {
    display: block;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 400;
}

.pf-bouton-lien {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    background: var(--couleur-surface);
    color: var(--couleur-primaire);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}

.pf-bouton-lien:hover {
    border-color: var(--couleur-primaire);
    transform: none;
}

.pf-vide {
    margin: 0;
    padding: 1.4rem 1.5rem;
    border: 1px dashed var(--couleur-bordure-forte);
    border-radius: var(--rayon-grand);
    background: var(--couleur-surface);
    color: var(--couleur-texte-attenue);
}

.pf-carte textarea {
    width: 100%;
    max-width: none;
    resize: vertical;
}

/* Liste de sélection (cases à cocher) */

.pf-selection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-selection li[hidden] {
    display: none;
}

.pf-selection-ligne {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.2rem 0.7rem;
    height: 100%;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-surface);
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--duree-rapide) ease, background-color var(--duree-rapide) ease;
}

.pf-selection-ligne:hover {
    border-color: var(--couleur-bordure-forte);
}

.pf-selection-ligne:has(input:checked) {
    border-color: var(--couleur-primaire);
    background: var(--couleur-info-fond);
}

.pf-selection-ligne input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.pf-selection-ligne .app-avatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

.pf-selection-nom {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pf-selection-etat {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    grid-column: 3;
}

@media (max-width: 960px) {
    .pf-colonnes {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-collant {
        position: static;
    }
}

.pf-actions-onglet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pf-compte-grand {
    margin: 0;
    color: var(--couleur-texte-attenue);
}

.pf-compte-grand strong {
    color: var(--couleur-texte);
    font-family: var(--police-titre);
    font-size: 1.6rem;
}

.pf-vide-succes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-style: solid;
    border-color: var(--couleur-succes-bordure);
    background: var(--couleur-succes-fond);
    color: var(--couleur-succes-texte);
}

.pf-vide-succes p {
    margin: 0;
}

/* File de travail (pièces à vérifier…) : une ligne = un élément à traiter,
   actions sur la ligne. */
.pf-file {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-file-ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-grand);
    background: var(--couleur-surface);
    box-shadow: var(--ombre-carte);
}

.pf-file-corps p {
    margin: 0;
}

.pf-file-titre {
    font-weight: 650;
}

.pf-file-meta {
    color: var(--couleur-texte-attenue);
    font-size: 0.88rem;
}

.pf-file-meta a {
    color: var(--couleur-texte);
}

.pf-file-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.5rem;
}

.pf-file-actions form {
    margin: 0;
}

.pf-redepot summary {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    color: var(--couleur-texte-attenue);
    font-size: 0.9rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.pf-redepot summary::-webkit-details-marker {
    display: none;
}

.pf-redepot[open] summary {
    border-color: var(--couleur-attention-bordure);
    color: var(--couleur-attention-texte);
}

.pf-redepot form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.pf-redepot input[type="text"] {
    min-width: 14rem;
}

@media (max-width: 720px) {
    .pf-file-ligne {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pf-file-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.pf-pile {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.pf-selection-inactive {
    cursor: default;
    opacity: 0.7;
}

.carte.pf-carte-discrete {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.pf-carte-discrete p {
    margin: 0;
}

.pf-liste-noms {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 26rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.pf-liste-noms li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
}

.pf-liste-noms .app-avatar {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.7rem;
}

.pf-bouton-plein {
    display: block;
    text-align: center;
}

/* Cartes de session (choix d'une session, listes visuelles) */

.pf-sessions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 0.9rem;
}

.pf-session-carte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-grand);
    background: var(--couleur-surface);
    box-shadow: var(--ombre-carte);
    color: inherit;
    text-decoration: none;
    transition: transform var(--duree-moyenne) var(--courbe-sortie), box-shadow var(--duree-moyenne) ease, border-color var(--duree-rapide) ease;
}

.pf-session-carte:hover {
    border-color: var(--couleur-bordure-forte);
    box-shadow: var(--ombre-survol);
    transform: translateY(-2px);
}

.pf-session-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3.4rem;
    padding: 0.45rem 0;
    border-radius: var(--rayon);
    background: var(--degrade-marine);
    color: #fff;
    line-height: 1.1;
}

.pf-session-jour {
    font-family: var(--police-titre);
    font-size: 1.3rem;
    font-weight: 700;
}

.pf-session-mois {
    font-size: 0.68rem;
    opacity: 0.8;
}

.pf-session-corps {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pf-session-titre {
    font-weight: 650;
    overflow-wrap: anywhere;
}

.pf-session-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--couleur-texte-attenue);
    font-size: 0.85rem;
}

.pf-session-fin {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.pf-session-jauge {
    display: block;
    width: 5rem;
    height: 0.3rem;
    border-radius: 999px;
    background: var(--couleur-surface-secondaire);
    overflow: hidden;
}

.pf-session-jauge span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--couleur-sarcelle);
    transform-origin: left;
    animation: remplissage-barre var(--duree-lente) var(--courbe-sortie) both;
}

/* Grille de sessions : la jauge passe sous le titre, pour laisser au nom
   de la formation toute la largeur de la carte. */
.pf-sessions .pf-session-carte {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.pf-sessions .pf-session-fin {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem 0.75rem;
}

.pf-sessions .pf-session-fin .pf-session-jauge {
    flex: 1 1 6rem;
    max-width: 10rem;
}

/* Recherche compacte dans un en-tête de bloc : champ et bouton sur une
   ligne, jamais empilés. */
:is(.pf-carte-entete, .planning-barre) form.pf-recherche-compacte {
    flex-wrap: nowrap;
    align-items: center;
}

:is(.pf-carte-entete, .planning-barre) form.pf-recherche-compacte > label {
    flex: 1 1 14rem;
}

:is(.pf-carte-entete, .planning-barre) form.pf-recherche-compacte > label > input[type="search"] {
    margin-top: 0;
}

.pf-case {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
    cursor: pointer;
}

.pf-case input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
}

.pf-surtitre {
    margin: 0 0 0.15rem;
    color: var(--couleur-texte-attenue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

h3.pf-carte-titre {
    margin: 0;
    font-size: 1.05rem;
}

.pf-demande-liee form {
    margin: 0;
}

.pf-colonne-case {
    width: 2.5rem;
}

.pf-colonne-case input {
    width: 1.1rem;
    height: 1.1rem;
}

.pf-lot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px dashed var(--couleur-bordure-forte);
    border-radius: var(--rayon);
    background: var(--couleur-fond);
}

.pf-lot label {
    margin: 0;
    font-weight: 600;
}

.pf-lot input[type="text"] {
    flex: 1 1 16rem;
    max-width: 28rem;
}

/* Filtres en pastilles (mêmes composants que l'Espace Partenaire). */
.pf-filtres {
    margin: 0 0 1rem;
}

/* Liste de contrôle (ouverture d'une formation…) */

.pf-progression {
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--couleur-surface-secondaire);
    overflow: hidden;
}

.pf-progression span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--couleur-sarcelle) 0%, #0fa99d 100%);
    transform-origin: left;
    animation: remplissage-barre var(--duree-lente) var(--courbe-sortie) both;
}

.pf-controle-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-controle-liste li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-surface);
}

.pf-controle-puce {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--couleur-surface-secondaire);
    color: var(--couleur-texte-attenue);
    font-size: 0.8rem;
    font-weight: 700;
}

.pf-controle-ok .pf-controle-puce {
    background: var(--couleur-succes-fond);
    color: var(--couleur-succes-texte);
}

.pf-controle-manque {
    border-color: var(--couleur-attention-bordure);
}

.pf-controle-manque .pf-controle-puce {
    background: var(--couleur-attention-fond);
    color: var(--couleur-attention-texte);
}

.pf-controle-ok .pf-controle-libelle {
    color: var(--couleur-texte-attenue);
}

.pf-controle-libelle {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
}

.pf-controle-action {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.pf-identite {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-avatar.pf-avatar-grand {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.1rem;
    background: var(--degrade-marine);
    color: #fff;
}

.pf-session-date-mini {
    width: 2.6rem;
    padding: 0.3rem 0;
}

.pf-session-date-mini .pf-session-jour {
    font-size: 1rem;
}

.pf-habilitation {
    grid-template-columns: auto minmax(0, 1fr);
}

.pf-habilitation .pf-file-actions {
    grid-column: 2;
    justify-content: flex-start;
}

.pf-carte label:not(.pf-case):not(.pf-selection-ligne) {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Parité visuelle avec l'Espace Partenaire (V2) --------------------
   En-tête des accueils PROFORM (`.tb-entete`) en bandeau : même dégradé
   marine/sarcelle que la vitrine du catalogue Partenaire, salutation en
   grand, actions principales et chiffres du jour. */

.tb-entete {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
    padding: 1.9rem 2.1rem;
    overflow: hidden;
    border-radius: var(--rayon-grand);
    background: var(--degrade-bandeau);
    color: #fff;
    box-shadow: var(--ombre-carte);
}

.tb-entete::after {
    content: "";
    position: absolute;
    right: -5rem;
    bottom: -9rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 199, 185, 0.28) 0%, rgba(22, 199, 185, 0) 70%);
    pointer-events: none;
}

.tb-entete > * {
    position: relative;
    z-index: 1;
}

.tb-entete h1 {
    color: #fff;
    font-size: 1.95rem;
}

.tb-entete .texte-attenue,
.tb-entete p {
    color: rgba(255, 255, 255, 0.78);
}

.tb-entete a:not([class]) {
    color: #fff;
}

.tb-entete .bouton-secondaire {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tb-entete .bouton-secondaire:hover {
    background: rgba(255, 255, 255, 0.16);
}

.tb-entete-actions {
    justify-content: flex-end;
}

.tb-chiffres {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.tb-chiffres a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--rayon);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
    text-decoration: none;
    transition: background-color var(--duree-rapide) ease, transform var(--duree-moyenne) var(--courbe-sortie);
}

.tb-chiffres a:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.tb-chiffres strong {
    color: #fff;
    font-family: var(--police-titre);
    font-size: 1.65rem;
    line-height: 1.1;
}

/* Tâches des accueils : réparties sur deux colonnes quand la place le permet. */
.tb-niveau-1 .taches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
    gap: 0.6rem;
}

.pf-sessions-colonne {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
}

.pf-sessions-colonne .pf-session-carte {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.75rem 0.85rem;
}

.pf-sessions-colonne .pf-session-meta {
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
}

@media (max-width: 760px) {
    .tb-entete {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.4rem 1.25rem;
    }

    .tb-entete h1 {
        font-size: 1.55rem;
    }

    .tb-entete-actions {
        justify-content: flex-start;
    }

    .tb-chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Catalogue interne des formations : mêmes fiches que la vitrine Partenaire. */
.pf-barre-filtres {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.pf-barre-filtres form {
    max-width: 36rem;
}

.pf-formations h2.ff-carte-titre {
    margin: 0.15rem 0 0.3rem;
    padding: 0;
    border: none;
    font-size: 1.05rem;
    line-height: 1.35;
}

.ff-carte-dispo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.eq-filtre .ff-pastille {
    display: inline-block;
    margin-right: 0.15rem;
    vertical-align: 0.05rem;
}

/* Bandeau des fiches (formation, session, dossier, formateur) — même
   langage que la fiche formation du catalogue Partenaire : fond coloré
   (teinte du thème ou marine), texte clair, actions lisibles. */
.fiche-entete.pf-fiche-bandeau {
    position: relative;
    align-items: center;
    padding: 1.6rem 1.9rem;
    overflow: hidden;
    border-radius: var(--rayon-grand);
    background: var(--ff-teinte, var(--degrade-bandeau));
    color: var(--ff-texte, #fff);
    box-shadow: var(--ombre-carte);
}

.pf-bandeau-marine {
    --ff-teinte: var(--degrade-bandeau);
}

.fiche-entete.pf-fiche-bandeau::after {
    content: "";
    position: absolute;
    top: -6rem;
    right: -4rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.pf-fiche-bandeau > * {
    position: relative;
    z-index: 1;
}

.pf-fiche-bandeau h1 {
    color: #fff;
}

.pf-fiche-bandeau .fiche-entete-meta,
.pf-fiche-bandeau .fiche-entete-meta span,
.pf-fiche-bandeau .texte-attenue,
.pf-fiche-bandeau p {
    color: rgba(255, 255, 255, 0.85);
}

.pf-fiche-bandeau .fiche-entete-meta svg {
    color: rgba(255, 255, 255, 0.7);
}

.pf-fiche-bandeau a:not([class]) {
    color: #fff;
}

.pf-fiche-bandeau .badge {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.92);
}

.pf-fiche-bandeau .bouton-secondaire {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.pf-fiche-bandeau .bouton-secondaire:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pf-fiche-bandeau .app-avatar.pf-avatar-grand {
    background: rgba(255, 255, 255, 0.18);
}

.pf-fiche-bandeau .pf-compte-grand,
.pf-fiche-bandeau .pf-compte-grand strong {
    color: #fff;
}

@media (max-width: 760px) {
    .fiche-entete.pf-fiche-bandeau {
        padding: 1.25rem;
    }
}

/* --- Listes en lignes-cartes (V2, parité Espace Partenaire) ----------- */

.pf-demandes .bf-ligne {
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-carte);
    transition: transform var(--duree-moyenne) var(--courbe-sortie), box-shadow var(--duree-moyenne) ease, border-color var(--duree-rapide) ease;
}

.pf-demandes .bf-ligne:hover {
    border-color: var(--couleur-bordure-forte);
    box-shadow: var(--ombre-survol);
    transform: translateY(-2px);
}

.pf-demande-a-traiter {
    border-left: 3px solid var(--couleur-accent-vif);
}

.pf-avatar-entreprise {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--rayon);
    background: var(--degrade-marine);
    color: #fff;
    font-family: var(--police-titre);
    font-weight: 700;
}

.pf-demande-entreprise {
    color: var(--couleur-texte-attenue);
    font-size: 0.82rem;
    font-weight: 500;
}

@media (max-width: 560px) {
    .pf-demandes .bf-ligne {
        flex-wrap: wrap;
    }

    .pf-demandes .bf-ligne-fin {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .pf-demandes .bf-ligne-meta {
        white-space: normal;
    }
}

/* --- Signalements en cartes (V2) --------------------------------------- */

.pf-signalement {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    border-left: 3px solid var(--couleur-attention-bordure);
}

.pf-signalement-clos {
    border-left-color: var(--couleur-succes-bordure);
}

.pf-signalement-concerne {
    margin: 0;
    font-size: 0.9rem;
}

.pf-citation {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rayon);
    background: var(--couleur-surface-secondaire);
    color: var(--couleur-texte);
    line-height: 1.5;
}

.pf-signalement-reponse {
    margin: 0;
    font-size: 0.92rem;
}

.pf-signalement-formulaire {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.pf-signalement-formulaire > label {
    flex: 1;
    margin: 0;
}

.pf-signalement-formulaire textarea {
    width: 100%;
    max-width: none;
    min-height: 2.6rem;
}

.pf-signalement-pied {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--couleur-bordure);
    font-size: 0.9rem;
}

@media (max-width: 560px) {
    .pf-signalement-formulaire {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Niveaux QCM en cartes (V2) ---------------------------------------- */

.pf-niveaux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 0.9rem;
}

.pf-niveau {
    display: flex;
    gap: 1rem;
    margin: 0;
}

.pf-niveau-chiffre {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 5.5rem;
    padding: 0.75rem 0.4rem;
    border-radius: var(--rayon);
    background: var(--degrade-marine);
    color: #fff;
    text-align: center;
    line-height: 1.15;
}

.pf-niveau-chiffre strong {
    font-family: var(--police-titre);
    font-size: 1.6rem;
}

.pf-niveau-chiffre span {
    font-size: 0.7rem;
    opacity: 0.8;
}

.pf-niveau-vide {
    background: var(--couleur-surface-secondaire);
    color: var(--couleur-texte-attenue);
}

.pf-niveau-corps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.pf-niveau-formations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.85rem;
}

.pf-etiquette {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--couleur-sarcelle-fond);
    color: var(--couleur-sarcelle-texte);
    font-weight: 500;
    text-decoration: none;
}

.pf-etiquette:hover {
    text-decoration: underline;
}

.pf-niveau-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pf-collant-haut {
    position: sticky;
    top: calc(var(--hauteur-header) + 1rem);
}

@media (max-width: 960px) {
    .pf-collant-haut {
        position: static;
    }
}

.pf-fiche-cote > .carte,
.pf-fiche-principal > .carte:first-child {
    margin-top: 0;
}

@media (max-width: 960px) {
    /* Saisie ouverte depuis une autre page (ex. signalement) : en tête sur mobile. */
    .pf-prioritaire-mobile {
        order: -1;
    }
}

/* Mes sessions (formateur) : cartes côte à côte plutôt qu'en pleine largeur. */
.cartes-grille.pf-grille-sessions {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
}

/* Rôles d'un compte en libellés (V2) : jamais le code `ROLE_…`. */
.pf-roles .pf-badge-role {
    margin: 0.1rem 0.25rem 0.1rem 0;
}

/* Cartes de domaine des accueils (niveau 2) : un badge long passe à la
   ligne plutôt que de sortir de sa carte étroite. */
.tb-niveau-2 .carte .badge {
    max-width: 100%;
    white-space: normal;
    border-radius: var(--rayon);
}

/* --- Évolutions mensuelles en histogramme (pilotage, V2) -------------- */

.pf-tendances > .carte {
    margin: 0;
}

.pf-evolution {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-items: end;
    gap: 0.5rem;
    height: 11rem;
    padding: 0.5rem 0 0;
}

.pf-evolution-colonne {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    justify-items: center;
    gap: 0.3rem;
    cursor: default;
}

.pf-evolution-piste {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid var(--couleur-bordure-forte);
}

.pf-evolution-barre {
    width: min(100%, 1.6rem);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--couleur-sarcelle);
    transition: filter var(--duree-rapide) ease;
}

.pf-evolution-vide .pf-evolution-barre {
    min-height: 0;
}

.pf-evolution-valeur {
    visibility: hidden;
    color: var(--couleur-texte);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.pf-evolution-colonne:hover .pf-evolution-valeur,
.pf-evolution-derniere .pf-evolution-valeur {
    visibility: visible;
}

.pf-evolution-colonne:hover .pf-evolution-barre {
    filter: brightness(0.88);
}

.pf-evolution-periode {
    color: var(--couleur-texte-attenue);
    font-size: 0.72rem;
    white-space: nowrap;
}

.pf-evolution-tableau {
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

.pf-evolution-tableau > summary {
    cursor: pointer;
    color: var(--couleur-texte-attenue);
}

/* Taux de remplissage dans un tableau : jauge + valeur. */
.pf-jauge-ligne {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .pf-evolution-periode {
        font-size: 0.62rem;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }
}

.planning-barre form.pf-recherche-compacte {
    flex: 1 1 20rem;
    max-width: 32rem;
    margin: 0;
}

.pf-dates {
    white-space: nowrap;
}

/* Rappel utile seulement sur téléphone (ex. « Mon parcours » du stagiaire). */
@media (min-width: 961px) {
    .pf-mobile-seulement {
        display: none;
    }
}

/* Téléphone : l'étiquette d'une tâche passe sous son titre plutôt que de
   l'écraser (titres longs coupés en plein mot à 390 px). */
@media (max-width: 560px) {
    .tache {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .tache .tache-corps {
        flex: 1 1 calc(100% - 3.5rem);
        min-width: 0;
    }

    .tache .tache-etiquette {
        margin-left: calc(2.4rem + 0.9rem);
    }

    /* Toute la ligne est cliquable : la flèche n'apporte rien à cette largeur. */
    .tache .tache-fleche {
        display: none;
    }
}

/* Lien dans un en-tête en bandeau (ex. entreprise d'une session intra). */
.pf-lien-bandeau {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Accès rapides (accueil administrateur, V2) ----------------------- */

h2.pf-raccourcis-titre {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.05rem;
}

.pf-raccourcis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.9rem;
}

.pf-raccourci {
    margin: 0;
}

.pf-raccourci h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 1rem;
}

.pf-raccourci-icone {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--rayon);
    background: var(--couleur-sarcelle-fond);
    color: var(--couleur-sarcelle-texte);
}

.pf-raccourci ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-raccourci li a {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    color: var(--couleur-texte);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--duree-rapide) ease, background var(--duree-rapide) ease;
}

.pf-raccourci li a:hover {
    border-color: var(--couleur-primaire);
    background: var(--couleur-surface-secondaire);
}

.pf-raccourci .pf-note {
    margin: 0.6rem 0 0;
}

/* Zone sensible repliée en pied de fiche (DEC-114 : suppression d'une
   session créée par erreur) — discrète tant qu'elle n'est pas ouverte. */
.pf-zone-sensible {
    margin-top: 1.5rem;
    border-style: dashed;
}

.pf-zone-sensible > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--couleur-texte-attenue);
}

.pf-zone-sensible[open] > summary {
    margin-bottom: 0.75rem;
    color: var(--couleur-erreur-texte);
}

.pf-zone-sensible form {
    display: grid;
    gap: 0.4rem;
    max-width: 32rem;
}

.pf-zone-sensible-actions {
    margin-top: 0.4rem;
}

.pf-bouton-suppression {
    color: var(--couleur-erreur-texte);
    border-color: var(--couleur-erreur-bordure);
}

.pf-bouton-suppression:hover {
    background: var(--couleur-erreur-fond);
    color: var(--couleur-erreur-texte);
    border-color: var(--couleur-erreur-texte);
}

/* Clôture de relais par le responsable pédagogique (DEC-115). */
.pf-creneaux-relais {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-creneaux-relais li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--couleur-bordure);
}

.pf-creneaux-relais li:last-child {
    border-bottom: none;
}

.pf-creneaux-relais li > :first-child {
    font-weight: 600;
    min-width: 9rem;
}

.pf-creneaux-relais .badge {
    margin-left: auto;
}

.pf-cloture-relais {
    display: grid;
    gap: 0.4rem;
}

.pf-cloture-relais-signature {
    margin: 0.6rem 0 0;
    font-weight: 600;
}

/* DEC-121 : bandeau « électricité » (jaune sourd) — texte foncé, jamais du
   blanc sur jaune (contraste insuffisant). */
.pf-fiche-bandeau.ff-teinte-electricite h1,
.pf-fiche-bandeau.ff-teinte-electricite a:not([class]),
.pf-fiche-bandeau.ff-teinte-electricite .pf-compte-grand,
.pf-fiche-bandeau.ff-teinte-electricite .pf-compte-grand strong {
    color: var(--ff-texte);
}

.pf-fiche-bandeau.ff-teinte-electricite .fiche-entete-meta,
.pf-fiche-bandeau.ff-teinte-electricite .fiche-entete-meta span,
.pf-fiche-bandeau.ff-teinte-electricite .fiche-entete-meta svg,
.pf-fiche-bandeau.ff-teinte-electricite .texte-attenue,
.pf-fiche-bandeau.ff-teinte-electricite p {
    color: rgba(58, 46, 8, 0.85);
}

.pf-fiche-bandeau.ff-teinte-electricite .bouton-secondaire {
    border-color: rgba(58, 46, 8, 0.3);
    background: rgba(255, 255, 255, 0.35);
    color: var(--ff-texte);
}

/* Rappel « réussite validée d'office » de l'onglet Stagiaires (DEC-122). */
.pf-rappel-reussite {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.pf-rappel-reussite > svg {
    flex-shrink: 0;
    margin-top: .15rem;
}

/* DEC-131 : documents de réussite — actions de bas de section et correction motivée repliable. */
.pf-actions-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.pf-actions-ligne form {
    margin: 0;
}

.dr-corriger {
    display: inline-block;
    margin-left: 0.75rem;
}

.dr-corriger summary {
    cursor: pointer;
    color: var(--couleur-texte-attenue);
}

.dr-corriger form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* DEC-134 : épreuve d'habilitation électrique (copie stagiaire, correction formateur). */
.eh-question {
    margin: 0 0 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--couleur-bordure);
}

.eh-enonce {
    margin: 0 0 0.5rem;
    font-weight: 600;
    line-height: 1.45;
}

.eh-option {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.35rem 0;
    cursor: pointer;
}

.eh-question textarea {
    width: 100%;
}

.eh-choix {
    margin: 0 0 0.5rem;
    padding-left: 0.25rem;
    list-style: none;
}

.eh-choix li {
    padding: 0.15rem 0;
}

.eh-choix .eh-bon {
    color: var(--couleur-succes-texte);
    font-weight: 600;
}

.eh-choix .eh-choisi:not(.eh-bon) {
    color: var(--couleur-erreur-texte);
    text-decoration: line-through;
}

.eh-reponse {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--couleur-bordure-forte);
    background: var(--couleur-surface-secondaire);
    white-space: pre-wrap;
}

.eh-attendu {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--couleur-texte-attenue);
}

.eh-notation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.eh-notation input[type="number"] {
    width: 5rem;
}

.eh-commentaire {
    flex: 1;
    min-width: 12rem;
}

.eh-commentaire input {
    width: 100%;
}

.eh-resume {
    margin-bottom: 1rem;
}

.eh-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.5rem 0;
    padding: 0;
    list-style: none;
}

.eh-ok {
    color: var(--couleur-succes-texte);
}

.eh-ko {
    color: var(--couleur-erreur-texte);
}

.eh-mention {
    display: inline-block;
    cursor: default;
}

.eh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.eh-etat {
    font-weight: 600;
}

/* La légende d'un fieldset déborde du cadre : on la remet dans le flux. */
.eh-question > legend {
    float: left;
    width: 100%;
    padding: 0;
}

.eh-question > legend + * {
    clear: both;
}