/*
 * Gabarit unique des fiches formation (mise en conformité 2026, lot 2).
 * Couleurs de l'identité PSTM : bleu nuit #043264, bleu #0055a4, bleu clair #7696b9, fond #f4f7fa.
 * Mobile d'abord : texte courant de 16 px au moins, zones tactiles de 44 px, aucun débordement horizontal.
 */
.fiche-formation {
    --ff-nuit: #043264;
    --ff-bleu: #0055a4;
    --ff-clair: #7696b9;
    --ff-fond: #f4f7fa;
    --ff-texte: #1f2a37;
    --ff-bord: #d5dfea;
    color: var(--ff-texte);
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.fiche-formation a { color: var(--ff-bleu); text-decoration: underline; text-underline-offset: 2px; }
.fiche-formation a:hover { color: var(--ff-nuit); }
.fiche-formation a:focus-visible,
.fiche-formation summary:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }

/* En-tête de la fiche */
.ff-bandeau {
    background: linear-gradient(rgba(244, 247, 250, .92), rgba(244, 247, 250, .92)), url(../images/new/img-banner-programmes.jpg) center / cover;
    border-bottom: 1px solid var(--ff-bord);
    /* l'en-tête du site est fixe et se superpose au haut de la page */
    padding: 112px 0 28px;
}
.ff-ariane ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 16px; }
.ff-ariane li + li::before { content: "›"; margin-right: 8px; color: var(--ff-clair); }
.ff-ariane [aria-current] { color: #4a5a6a; }
.fiche-formation h1 {
    font-family: 'ITC-B', 'Poppins', Arial, sans-serif;
    color: var(--ff-nuit);
    font-size: clamp(26px, 5vw, 40px);
    line-height: 1.2;
    margin: 0 0 8px;
}
.ff-sigle { white-space: nowrap; }
.ff-accroche { font-size: 18px; margin: 0; }

/* Grille : encadré « L'essentiel » + contenu */
.ff-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; padding-bottom: 48px; }
@media (min-width: 992px) {
    .ff-grille { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .ff-essentiel { grid-column: 2; grid-row: 1; position: sticky; top: 120px; }
    .ff-contenu { grid-column: 1; grid-row: 1; }
}

.ff-essentiel { background: #fff; border: 1px solid var(--ff-bord); border-top: 4px solid var(--ff-nuit); border-radius: 8px; padding: 20px; }
.ff-essentiel h2 { font-family: 'ITC-B', 'Poppins', Arial, sans-serif; color: var(--ff-nuit); font-size: 22px; margin: 0 0 12px; }
.ff-essentiel dl { margin: 0; }
.ff-essentiel dl > div { padding: 10px 0; border-bottom: 1px solid var(--ff-bord); }
.ff-essentiel dt { font-weight: 600; color: var(--ff-nuit); font-size: 16px; }
.ff-essentiel dd { margin: 2px 0 0; }

.ff-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.fiche-formation .ff-bouton {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 10px 20px;
    border: 2px solid var(--ff-bleu); border-radius: 8px;
    color: var(--ff-bleu); background: #fff; font-weight: 600; text-decoration: none;
    flex: 1 1 140px;
}
.fiche-formation .ff-bouton--plein { background: var(--ff-bleu); color: #fff; }
.fiche-formation .ff-bouton:hover { background: var(--ff-nuit); border-color: var(--ff-nuit); color: #fff; }
.ff-format { font-weight: 400; margin-left: 4px; }

/* Sommaire */
.ff-sommaire { background: var(--ff-fond); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
.ff-sommaire summary { cursor: pointer; font-weight: 600; color: var(--ff-nuit); min-height: 44px; display: flex; align-items: center; }
.ff-sommaire ol { margin: 4px 0 8px; padding-left: 22px; columns: 1; }
@media (min-width: 768px) { .ff-sommaire ol { columns: 2; column-gap: 32px; } }
.ff-sommaire li { padding: 3px 0; break-inside: avoid; }

/* Rubriques */
.ff-section { padding: 24px 0 8px; border-bottom: 1px solid var(--ff-bord); scroll-margin-top: 120px; }
.ff-section h2 { font-family: 'ITC-B', 'Poppins', Arial, sans-serif; color: var(--ff-nuit); font-size: 24px; line-height: 1.3; margin: 0 0 12px; }
.ff-section h3 { color: var(--ff-nuit); font-size: 18px; line-height: 1.4; margin: 16px 0 8px; }
.ff-section p { margin: 0 0 12px; }
.ff-liste { margin: 0 0 12px; padding-left: 22px; }
.ff-liste li { margin-bottom: 8px; }
.ff-liste li::marker { color: var(--ff-clair); }
.ff-reconnaissance { font-weight: 600; background: var(--ff-fond); border-left: 4px solid var(--ff-clair); padding: 12px 16px; }
.ff-bloc { background: var(--ff-fond); border-radius: 8px; padding: 4px 16px 4px; margin-bottom: 12px; }
.ff-bloc-code { display: inline-block; font-size: 15px; font-weight: 600; color: #fff; background: var(--ff-nuit); border-radius: 4px; padding: 0 8px; margin-right: 6px; }
.ff-contacts > div { padding: 8px 0; }
.ff-contacts dt { font-weight: 600; color: var(--ff-nuit); }
.ff-contacts dd { margin: 0; }
.ff-maj { font-size: 16px; color: #4a5a6a; margin: 20px 0 0; }

/* Marqueurs de préproduction : ne doivent jamais être mis en ligne */
.fiche-formation mark.a-completer { background: #fff3b0; color: #6b4e00; padding: 0 4px; border-radius: 3px; }

/* La feuille de style du site neutralise le gras, les puces et le soulignement : on les rétablit dans la fiche */
.fiche-formation strong { font-weight: 700; color: inherit; }
.fiche-formation .ff-liste { list-style: disc; }
.fiche-formation .ff-sommaire ol { list-style: decimal; }
.fiche-formation .ff-contenu a,
.fiche-formation .ff-essentiel dd a,
.fiche-formation .ff-ariane a { text-decoration: underline !important; }
/* La police du site n'a pas de graisse « bold » : le gras utilise sa variante ITC-B */
.fiche-formation strong, .fiche-formation dt, .fiche-formation .ff-bouton, .fiche-formation summary { font-family: 'ITC-B', 'Poppins', Arial, sans-serif; font-weight: normal; }


/* Témoignage (facultatif) */
.fiche-formation .ff-temoignage figure { margin: 0; }
.fiche-formation .ff-temoignage blockquote { margin: 0; padding: 16px 20px; border-left: 4px solid #7696b9; background: #f4f7fa; border-radius: 0 6px 6px 0; }
.fiche-formation .ff-temoignage blockquote p { margin: 0 0 12px; font-style: italic; }
.fiche-formation .ff-temoignage blockquote p:last-child { margin-bottom: 0; }
.fiche-formation .ff-temoignage figcaption { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-weight: 600; color: #043264; }
.fiche-formation .ff-temoignage figcaption img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }