/* ==========================================================================
   Psy.Link — Rubrique « Formations » (présentation de l'offre, catalogue)
   Dépend de site.css (tokens, base, boutons), de accueil.css (sections
   mutualisées : .conteneur, .entete-section, .section-cta-finale), de page.css
   (.page-heros) et de motif.css (blocs alternés .motif-bloc de la page
   d'accueil de la rubrique).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Présentation de l'offre
   -------------------------------------------------------------------------- */
.section-formations-offre {
    padding-bottom: 0;
    background: var(--blanc);
}

/* Les blocs alternés apportent déjà leur propre respiration verticale :
   l'espace de section ferait double emploi sous l'en-tête. */
.section-formations-offre .motifs-liste {
    margin-top: 8px;
}

.formations-compteur {
    display: inline-block;
    padding: 10px 16px;
    border-radius: var(--rayon-sm);
    background: var(--vert-clair);
    color: var(--teal);
    font-size: 15px;
}

.formations-compteur strong {
    font-weight: 800;
}


/* --------------------------------------------------------------------------
   2. Arguments de la rubrique
   -------------------------------------------------------------------------- */
.section-formations-arguments {
    background: var(--doux);
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
}

/* Deux colonnes, et non un remplissage automatique : les quatre arguments
   forment un carré plutôt qu'une rangée de trois suivie d'une carte esseulée. */
.formations-arguments-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.formation-argument {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 26px 24px;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-sm);
}

.formation-argument h3 {
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
}

.formation-argument p {
    color: var(--gris);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Le lien est renvoyé en pied de carte pour que les quatre s'alignent, quelle
   que soit la longueur du texte au-dessus. */
.formation-argument .lien-fleche {
    margin-top: auto;
    padding-top: 6px;
    font-size: 15px;
}

/* Le bandeau Qualiopi n'est pas un argument de plus : il porte la mention
   réglementaire, et se distingue donc des cartes. */
.formation-qualiopi {
    display: flex;
    align-items: center;
    gap: 20px;
    grid-column: 1 / -1;
    padding: 20px 26px;
    background: var(--blanc);
    border: 1px dashed var(--ligne);
    border-radius: var(--rayon);
}

.formation-qualiopi img {
    flex: 0 0 auto;
    width: 150px;
    height: auto;
}

.formation-qualiopi p {
    margin: 0;
    color: var(--gris);
    font-size: 14px;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   3. Satisfaction
   -------------------------------------------------------------------------- */
/* Trois colonnes fixes : six chiffres tombent alors sur deux rangées pleines,
   là où un remplissage automatique laisse une rangée incomplète. */
.formations-satisfaction-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.formation-indicateur {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 24px;
    border-radius: var(--rayon);
    background: linear-gradient(160deg, var(--teal) 0%, #146675 100%);
    color: #fff;
}

.formation-indicateur strong {
    font-family: var(--ff-titre);
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.03em;
}

.formation-indicateur span {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

/* L'effectif est une mention de méthode : lisible, jamais mise en avant. */
.formation-indicateur em {
    margin-top: auto;
    padding-top: 6px;
    font-style: normal;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .68);
}

/* Une carte sur deux en clair : la grille reste lisible sur six chiffres. */
.formation-indicateur:nth-child(even) {
    background: var(--vert-clair);
    color: var(--encre);
    border: 1px solid var(--ligne);
}

.formation-indicateur:nth-child(even) span {
    color: var(--gris);
}

.formation-indicateur:nth-child(even) em {
    color: var(--gris-clair);
}


/* --------------------------------------------------------------------------
   4. Ils nous font confiance
   -------------------------------------------------------------------------- */
.section-formations-partenaires {
    background: var(--doux);
    border-top: 1px solid var(--ligne);
}

.formations-partenaires-liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.formations-partenaires-liste img {
    /* Les fichiers fournis portent chacun leurs propres marges blanches : une
       boîte de taille fixe et un « contain » les ramènent à la même échelle
       apparente. */
    width: 200px;
    height: 110px;
    object-fit: contain;
    /* Logos d'origines diverses : le passage en niveaux de gris les remet sur
       un pied d'égalité, la couleur revient au survol. */
    filter: grayscale(1);
    opacity: .72;
    transition: filter .25s ease, opacity .25s ease;
}

.formations-partenaires-liste img:hover {
    filter: none;
    opacity: 1;
}


/* --------------------------------------------------------------------------
   5. Catalogue : onglets de catégories
   -------------------------------------------------------------------------- */
.section-formations-catalogue {
    background: var(--blanc);
}

/* Les fondus sont posés sur l'enveloppe et non sur la piste : ils doivent
   rester immobiles pendant que les onglets défilent dessous. Leur opacité est
   pilotée par le script, pour ne pas voiler le premier ni le dernier onglet
   quand la barre est au bout de sa course. */
.formations-onglets-enveloppe {
    position: relative;
    margin-bottom: 34px;
}

.formations-onglets-enveloppe::before,
.formations-onglets-enveloppe::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease;
    z-index: 1;
}

.formations-onglets-enveloppe::before {
    left: 0;
    background: linear-gradient(90deg, var(--blanc) 20%, rgba(255, 255, 255, 0) 100%);
}

.formations-onglets-enveloppe::after {
    right: 0;
    background: linear-gradient(270deg, var(--blanc) 20%, rgba(255, 255, 255, 0) 100%);
}

.formations-onglets-enveloppe.a-gauche::before,
.formations-onglets-enveloppe.a-droite::after {
    opacity: 1;
}

/* Les libellés de catégories sont longs : sur grand écran la barre passe à la
   ligne plutôt que de couper le dernier onglet, et ne défile horizontalement
   que lorsque la place manque vraiment. */
.formations-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Un peu d'air en haut et en bas : sans cela le halo de focus des onglets
       est coupé par le débordement masqué. */
    padding: 4px 0;
}

@media (max-width: 900px) {
    .formations-onglets {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
}

.formations-onglets::-webkit-scrollbar {
    display: none;
}

.formation-onglet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--ligne);
    background: var(--blanc);
    color: var(--encre);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.formation-onglet span {
    font-size: 12px;
    font-weight: 700;
    color: var(--gris-clair);
}

.formation-onglet:hover {
    border-color: var(--vert);
    color: var(--vert-fonce);
}

/* Pas de .active : conflit avec Bootstrap/Metronic ailleurs dans le projet. */
.formation-onglet.est-courant {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.formation-onglet.est-courant span {
    color: rgba(255, 255, 255, .7);
}


/* --------------------------------------------------------------------------
   6. Catalogue : groupes et vignettes
   -------------------------------------------------------------------------- */
.formations-groupe+.formations-groupe {
    margin-top: 56px;
}

.formations-groupe .entete-section-ligne {
    margin-bottom: 26px;
}

.formations-groupe h3 {
    font-size: clamp(21px, 2.6vw, 27px);
    margin-bottom: 8px;
}

.formations-groupe p {
    color: var(--gris);
    max-width: 74ch;
    margin: 0;
}

.formations-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 26px;
}

.formation-carte {
    display: flex;
}

.formation-carte-lien {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-sm);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.formation-carte-lien:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre);
    border-color: transparent;
}

.formation-carte-image {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--menthe);
    aspect-ratio: 3 / 2;
}

.formation-carte-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.formation-carte-lien:hover .formation-carte-image img {
    transform: scale(1.05);
}

.formation-carte-categorie,
.formation-carte-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 13px;
    border-radius: var(--rayon-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: var(--ombre-sm);
}

.formation-carte-categorie {
    background: rgba(255, 255, 255, .94);
    color: var(--teal);
}

/* Formation annoncée mais pas encore ouverte : la pastille ambre la distingue
   au premier coup d'œil des formations disponibles. */
.formation-carte-badge {
    background: var(--ambre);
    color: var(--ambre-fonce);
}

.formation-carte-corps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 20px;
    /* La carte occupe toute la hauteur de sa cellule pour que les pieds de
       carte s'alignent d'une colonne à l'autre. */
    flex: 1;
}

.formation-carte-titre {
    font-family: var(--ff-titre);
    color: var(--encre);
    font-size: 18.5px;
    line-height: 1.3;
    letter-spacing: -.015em;
    margin: 0;
}

.formation-carte-description {
    color: var(--gris);
    font-size: 15px;
    line-height: 1.55;
}

.formation-carte-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ligne);
}

.formations-vide {
    color: var(--gris);
    font-size: 16px;
    margin: 0;
}


/* --------------------------------------------------------------------------
   7. Témoignages
   -------------------------------------------------------------------------- */
.section-formations-temoignages {
    background: var(--doux);
    border-top: 1px solid var(--ligne);
}

.formations-temoignages-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.formation-temoignage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 26px 26px 22px;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-sm);
}

.formation-temoignage blockquote {
    margin: 0;
    color: var(--encre);
    font-size: 15.5px;
    line-height: 1.62;
}

.formation-temoignage figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ligne);
}

.formation-temoignage figcaption strong {
    font-size: 15px;
    color: var(--encre);
}

.formation-temoignage figcaption em {
    font-style: normal;
    font-size: 13.5px;
    color: var(--gris-clair);
}


/* --------------------------------------------------------------------------
   8. Formation intégrale
   -------------------------------------------------------------------------- */
.formation-integrale-modalites {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.formation-integrale-modalites li {
    padding: 14px 18px;
    border-left: 3px solid var(--teal);
    border-radius: var(--rayon-sm);
    background: var(--doux);
}

.formation-integrale-modalites strong {
    display: block;
    margin-bottom: 2px;
    color: var(--encre);
}

.section-formation-integrale-responsable {
    background: var(--doux);
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
}

.formation-integrale-responsable {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
}

.formation-integrale-responsable-identite h2 {
    margin: 10px 0 14px;
}

.formation-integrale-citation {
    position: relative;
    margin: 0;
    padding: 30px 30px 26px;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-sm);
    color: var(--encre);
    font-size: 15.5px;
    line-height: 1.65;
}

.formation-integrale-citation::before {
    content: "\201C";
    position: absolute;
    top: -18px;
    left: 24px;
    font-family: var(--ff-titre);
    font-size: 64px;
    line-height: 1;
    color: var(--teal);
}

.formation-integrale-citation p+p {
    margin-top: 12px;
}

.formation-integrale-annees {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.formation-integrale-annee-entete {
    margin-bottom: 18px;
}

.formation-integrale-annee-libelle {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vert-clair);
    color: var(--teal);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.formation-integrale-annee-entete h3 {
    margin: 10px 0 0;
}

.formation-integrale-module-titre {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.formation-integrale-modalite {
    font-family: var(--ff-texte, inherit);
    font-size: 13px;
    font-weight: 600;
    color: var(--teal);
}

/* Module sans description : même carte qu'un module dépliable, sans chevron. */
.formation-integrale-module-seul .formation-integrale-module-titre {
    margin: 0;
    padding: 16px 0;
    font-family: var(--ff-titre);
    font-weight: 800;
    font-size: 16.5px;
    color: var(--encre);
}


/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .formation-integrale-annees,
    .formation-integrale-responsable {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 1000px) {
    .formations-satisfaction-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .formation-qualiopi {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

@media (max-width: 760px) {
    .formations-arguments-grille {
        grid-template-columns: 1fr;
    }

    .formations-grille,
    .formations-satisfaction-grille {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .formations-partenaires-liste {
        gap: 24px;
    }

    .formations-partenaires-liste img {
        width: 140px;
        height: 80px;
    }

    .formations-groupe+.formations-groupe {
        margin-top: 42px;
    }

    .formation-indicateur strong {
        font-size: 34px;
    }
}

/* Le visiteur qui limite les animations garde les vignettes immobiles : seul
   l'ombrage marque encore le survol. */
@media (prefers-reduced-motion: reduce) {

    .formation-carte-lien,
    .formation-carte-image img {
        transition: none;
    }

    .formation-carte-lien:hover {
        transform: none;
    }

    .formation-carte-lien:hover .formation-carte-image img {
        transform: none;
    }
}