/*
 * Shell Espace Partenaire (UX1.1) — header léger sans sidebar, Accueil
 * Partenaire. Réservé à l'expérience ROLE_PARTENAIRE_* (`body.shell-partenaire`,
 * posé par base.html.twig) : aucun sélecteur de ce fichier ne s'applique aux
 * autres espaces. Réutilise les tokens de couleur d'app.css ; seules les
 * valeurs propres à ce shell (rayons plus généreux, ombres, largeur) sont
 * déclarées ici.
 *
 * Préfixes : `ps-` = shell (header, conteneur, retour), `pa-` = Accueil.
 *
 * V2 (V2-4, `Plan design/UX` §16.8) : même direction visuelle que les
 * espaces internes — rayons, ombres et fond alignés sur les tokens d'app.css,
 * dégradés localisés sur l'action principale et le bandeau d'appel à l'action.
 * La structure du shell (pas de sidebar, header léger, retour contextuel)
 * reste inchangée.
 */

.shell-partenaire {
    --ps-largeur: 1180px;
    --ps-rayon: var(--rayon-grand);
    --ps-rayon-petit: var(--rayon);
    --ps-ombre: var(--ombre-carte);
    --ps-ombre-survol: var(--ombre-survol);
    --ps-hauteur-entete: 64px;
    background: var(--couleur-fond);
}

/* --- Header ---------------------------------------------------------- */

.ps-entete {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--couleur-bordure);
}

.ps-entete-interieur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--ps-largeur);
    height: var(--ps-hauteur-entete);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.ps-marque {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    border-radius: var(--rayon-petit);
    min-width: 0;
}

.ps-marque-logo {
    display: block;
    height: 32px;
    width: auto;
}

.ps-marque-espace {
    padding-left: 0.85rem;
    border-left: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte-attenue);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.ps-entete-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Les boutons ronds réutilisent `.app-notif` (app.css). V2 (UXPP-1) : le
   raccourci « Mes besoins de formation » (🛒) est pleinement actif depuis
   UX1.3.2 — il n'est plus atténué comme un élément désactivé. */
.ps-panier {
    color: var(--couleur-texte-attenue);
}

/* Menu Compte : <details> natif (menu_deroulant_controller.js ajoute la
   fermeture au clic extérieur et à Échap). */
.ps-compte {
    position: relative;
}

.ps-compte-declencheur {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    background: var(--couleur-surface);
    color: var(--couleur-texte-attenue);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ps-compte-declencheur::-webkit-details-marker {
    display: none;
}

.ps-compte-declencheur:hover,
.ps-compte[open] .ps-compte-declencheur {
    border-color: var(--couleur-primaire);
}

.ps-compte-declencheur:focus-visible {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}

.ps-compte-nom {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--couleur-texte);
    font-size: 0.86rem;
    font-weight: 600;
}

.ps-compte-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 17rem;
    padding: 0.5rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--ps-rayon-petit);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
}

.ps-compte-identite {
    padding: 0.6rem 0.7rem 0.75rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

.ps-compte-identite p {
    margin: 0;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.ps-compte-identite-nom {
    font-weight: 600;
    font-size: 0.92rem !important;
}

.ps-compte-identite-entreprise {
    color: var(--couleur-texte);
}

.ps-compte-role {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem 0.6rem;
    margin: 0;
    border-bottom: 1px solid var(--couleur-bordure);
    font-size: 0.8rem;
    color: var(--couleur-texte-attenue);
}

.ps-compte-deconnexion {
    margin: 0;
}

.ps-compte-lien {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: none;
    border-radius: var(--rayon);
    background: none;
    color: var(--couleur-texte);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ps-compte-lien:hover {
    background: var(--couleur-fond);
    color: var(--couleur-texte);
}

/* --- Conteneur ------------------------------------------------------- */

.shell-partenaire main.ps-contenu {
    max-width: var(--ps-largeur);
    margin: 0 auto;
    padding: 1.75rem 1.5rem 4rem;
}

.ps-retour {
    margin-bottom: 1.25rem;
}

.ps-retour a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--couleur-texte-attenue);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--rayon-petit);
}

.ps-retour a:hover {
    color: var(--couleur-primaire);
}

/* --- Accueil : hero -------------------------------------------------- */

.pa-hero {
    padding: 1.5rem 0 2rem;
}

.pa-hero-entreprise {
    margin: 0 0 0.5rem;
    color: var(--couleur-texte-attenue);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pa-hero h1 {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.pa-hero-question {
    margin: 0.4rem 0 0;
    color: var(--couleur-texte-attenue);
    font-size: 1.1rem;
}

/* --- Accueil : trois portes ------------------------------------------ */

.pa-portes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.pa-porte {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--ps-rayon);
    box-shadow: var(--ps-ombre);
    transition: box-shadow var(--duree-moyenne) ease, border-color var(--duree-rapide) ease, transform var(--duree-moyenne) var(--courbe-sortie);
}

.pa-porte:hover {
    border-color: var(--couleur-bordure-forte);
    box-shadow: var(--ps-ombre-survol);
    transform: translateY(-4px);
}

.pa-porte:hover .pa-porte-icone {
    transform: scale(1.08) rotate(-3deg);
}

.pa-porte:focus-within {
    border-color: var(--couleur-primaire);
}

.pa-porte-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(226, 59, 92, 0.12) 0%, rgba(22, 199, 185, 0.14) 100%);
    color: var(--couleur-accent);
    transition: transform var(--duree-moyenne) var(--courbe-rebond);
}

.pa-accueil h2.pa-porte-titre {
    margin: 0 0 0.5rem;
    padding: 0;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
}

.pa-porte-chiffre {
    margin: 0;
    color: var(--couleur-texte-attenue);
    font-size: 0.95rem;
}

.pa-porte-chiffre strong {
    margin-right: 0.15rem;
    color: var(--couleur-texte);
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.pa-porte-detail {
    margin: 0.25rem 0 0;
    color: var(--couleur-texte-attenue);
    font-size: 0.88rem;
}

.pa-porte-detail-attention {
    color: var(--couleur-attention-texte);
    font-weight: 500;
}

.pa-porte-texte {
    margin: 0;
    color: var(--couleur-texte-attenue);
    font-size: 0.95rem;
    line-height: 1.55;
}

.pa-porte-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--couleur-primaire);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}

/* Carte entièrement cliquable sans <div onclick> : le lien réel s'étend
   sur toute la carte (motif « stretched link »). */
.pa-porte-lien::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--ps-rayon);
}

.pa-porte-lien:focus-visible {
    outline: none;
}

.pa-porte-lien:focus-visible::after {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}

/* Porte d'action principale : bandeau marine en dégradé (V2, §16.8 —
   remplace « fond marine PROFORM, jamais un dégradé » d'UX1.1). */
.pa-porte-principale {
    overflow: hidden;
    isolation: isolate;
    background: var(--degrade-bandeau);
    border-color: transparent;
}

.pa-porte-principale::before {
    content: "";
    position: absolute;
    width: 14rem;
    height: 14rem;
    top: -6rem;
    right: -5rem;
    border-radius: 50%;
    background: rgba(226, 59, 92, 0.3);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

.pa-porte-principale:hover {
    border-color: transparent;
}

.pa-porte-principale .pa-porte-icone {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.pa-accueil .pa-porte-principale h2.pa-porte-titre,
.pa-porte-principale .pa-porte-lien,
.pa-porte-principale .pa-porte-lien:hover {
    color: #ffffff;
}

.pa-porte-principale .pa-porte-texte {
    color: #c8d5e2;
}

.pa-porte-principale .pa-porte-lien:focus-visible::after {
    outline-color: #ffffff;
    outline-offset: -4px;
}

/* --- Accueil : grille principale ------------------------------------- */

.pa-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.pa-colonne-principale,
.pa-colonne-secondaire {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    min-width: 0;
}

.pa-section-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.pa-accueil h2.pa-section-titre {
    margin: 0 0 0.85rem;
    padding: 0;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
}

.pa-section-entete h2.pa-section-titre {
    margin: 0;
}

.pa-lien-discret {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--couleur-primaire);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.pa-lien-discret:hover {
    text-decoration: underline;
}

.pa-accueil ul[role="list"] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* État calme : une ligne, jamais une grande carte vide. */
.pa-calme {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.9rem 1.1rem;
    border-radius: var(--ps-rayon-petit);
    background: var(--couleur-succes-fond);
    color: var(--couleur-succes-texte);
    font-size: 0.92rem;
}

.pa-calme-neutre {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte-attenue);
}

/* --- À votre attention ----------------------------------------------- */

/* Aucune alerte : simple ligne secondaire, jamais un bandeau — la section
   ne reprend de l'importance visuelle que s'il y a réellement à faire. */
.pa-rien-a-signaler {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--couleur-texte-attenue);
    font-size: 0.9rem;
}

.pa-rien-a-signaler svg {
    color: var(--couleur-succes-texte);
}

.pa-attention {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--ps-rayon);
    box-shadow: var(--ps-ombre);
    overflow: hidden;
}

.pa-attention li + li {
    border-top: 1px solid var(--couleur-bordure);
}

.pa-attention-ligne {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    color: var(--couleur-texte-attenue);
    text-decoration: none;
}

.pa-attention-ligne:hover {
    background: #fafbfc;
    color: var(--couleur-primaire);
}

.pa-attention-ligne:focus-visible {
    outline-offset: -2px;
}

.pa-pastille {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.pa-pastille-erreur { background: var(--couleur-erreur-texte); }
.pa-pastille-attention { background: var(--couleur-attention-texte); }
.pa-pastille-info { background: var(--couleur-info-texte); }
.pa-pastille-neutre { background: var(--couleur-bordure); border: 1px solid var(--couleur-bordure-forte); }

.pa-attention-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pa-attention-titre {
    color: var(--couleur-texte);
    font-weight: 600;
    font-size: 0.95rem;
}

.pa-attention-texte {
    font-size: 0.84rem;
}

/* --- Prochaines formations ------------------------------------------- */

.pa-formations {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pa-formation {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem 0.85rem 0.85rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--ps-rayon);
    box-shadow: var(--ps-ombre);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pa-formation:hover {
    border-color: #c9d3de;
    box-shadow: var(--ps-ombre-survol);
}

.pa-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: var(--ps-rayon-petit);
    background: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    line-height: 1.1;
}

.pa-date-jour {
    color: var(--couleur-texte);
    font-size: 1.25rem;
    font-weight: 650;
}

.pa-date-mois {
    color: var(--couleur-texte-attenue);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pa-formation-corps {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.pa-formation-nom {
    color: var(--couleur-texte);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pa-formation-nom::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--ps-rayon);
}

.pa-formation-nom:focus-visible {
    outline: none;
}

.pa-formation-nom:focus-visible::after {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}

.pa-formation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    color: var(--couleur-texte-attenue);
    font-size: 0.85rem;
}

.pa-formation-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pa-formation-action {
    display: flex;
    color: var(--couleur-texte-attenue);
}

.pa-formation:hover .pa-formation-action {
    color: var(--couleur-primaire);
}

/* --- Besoin de former vos équipes ? ---------------------------------- */

.pa-besoin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding: 2rem 2.25rem;
    border-radius: var(--ps-rayon);
    background: var(--degrade-bandeau);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.pa-besoin::after {
    content: "";
    position: absolute;
    width: 18rem;
    height: 18rem;
    bottom: -9rem;
    left: 30%;
    border-radius: 50%;
    background: rgba(22, 199, 185, 0.25);
    filter: blur(50px);
    pointer-events: none;
}

.pa-besoin > * {
    position: relative;
    z-index: 1;
}

.pa-accueil .pa-besoin h2 {
    margin: 0 0 0.3rem;
    padding: 0;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
}

.pa-besoin p {
    margin: 0;
    color: #b7c6d6;
}

.pa-besoin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex-shrink: 0;
}

.pa-besoin .bouton-primaire,
.pa-bouton-clair {
    padding: 0.65rem 1.1rem;
    border-radius: var(--ps-rayon-petit);
    font-weight: 600;
    text-align: center;
}

.pa-bouton-clair {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 0.9rem;
    text-decoration: none;
}

.pa-bouton-clair:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.pa-besoin a:focus-visible {
    outline-color: #ffffff;
    outline-offset: 2px;
}

/* --- Mes demandes ---------------------------------------------------- */

.pa-demandes {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--ps-rayon);
    box-shadow: var(--ps-ombre);
    overflow: hidden;
}

.pa-demandes li + li {
    border-top: 1px solid var(--couleur-bordure);
}

.pa-demande {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1.1rem;
    color: var(--couleur-texte);
    text-decoration: none;
}

.pa-demande:hover {
    background: #fafbfc;
    color: var(--couleur-texte);
}

.pa-demande:focus-visible {
    outline-offset: -2px;
}

.pa-demande-titre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    font-size: 0.92rem;
}

.pa-demande-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
}

/* --- Satisfaction de vos salariés (UX1.3.8) --------------------------
   Information factuelle : couleur de texte neutre, jamais vert/rouge. */

.pa-satisfaction {
    padding: 1rem 1.1rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--ps-rayon);
}

.pa-satisfaction-valeur {
    margin: 0;
    color: var(--couleur-texte);
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.pa-satisfaction-detail,
.pa-satisfaction-attente {
    margin: 0.2rem 0 0;
    color: var(--couleur-texte-attenue);
    font-size: 0.86rem;
}

.pa-satisfaction-attente {
    margin: 0;
}

/* --- Actualités (veille C1.8) ---------------------------------------- */

.pa-veilles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pa-veille {
    padding: 1rem 1.1rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--ps-rayon);
}

.pa-veille-categorie {
    margin: 0 0 0.3rem;
    color: var(--couleur-texte-attenue);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pa-veille-titre {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.pa-veille-resume {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--couleur-texte-attenue);
    font-size: 0.86rem;
    line-height: 1.5;
}

.pa-veille-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 980px) {
    .pa-grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .pa-besoin {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .pa-portes {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    .pa-porte {
        padding: 1.25rem;
    }

    .pa-porte-icone {
        width: 2.25rem;
        height: 2.25rem;
        margin-bottom: 0.7rem;
        border-radius: 10px;
    }

    .pa-porte-lien {
        padding-top: 0.9rem;
    }

    .pa-hero {
        padding: 0.5rem 0 1.5rem;
    }

    .pa-hero h1 {
        font-size: 1.65rem;
    }

    .pa-hero-question {
        font-size: 1rem;
    }
}

@media (max-width: 560px) {
    .ps-entete-interieur,
    .shell-partenaire main.ps-contenu {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ps-marque-espace,
    .ps-compte-nom {
        display: none;
    }

    .ps-compte-menu {
        width: min(17rem, calc(100vw - 2rem));
    }

    .pa-besoin {
        padding: 1.4rem 1.25rem;
    }

    .pa-besoin-actions,
    .pa-besoin-actions a {
        width: 100%;
    }

    .pa-section-entete {
        flex-wrap: wrap;
    }

    .pa-attention-ligne,
    .pa-demande {
        padding: 0.9rem 1rem;
    }
}

@media print {
    .shell-partenaire {
        background: #ffffff;
    }
}