/* ==================================================
   BLOCS DE FICHE — formation et formateur

   Ces blocs n'ont pas de contenu propre : ils affichent
   les champs structurés de la fiche. Leur mise en forme
   est donc commune, d'où une seule feuille.
================================================== */

/* --------------------------------------------------
   RÉSUMÉ & RÉSERVATION
-------------------------------------------------- */

.resume_reservation__accroche {
    max-width: 60ch;
}

/* Repères pratiques : durée, horaire, niveau, participants. */
.resume_reservation__reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 24px 0 0;
}

.resume_reservation__repere dt {
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.resume_reservation__repere dd {
    margin: 3px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--v-texte-corps);
}

/* Intervenants et financement : affichés seulement si l'interrupteur
   correspondant est activé sur le bloc. */
.resume_reservation__intervenants {
    margin-top: 24px;
}

.resume_reservation__intervenants ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.resume_reservation__intervenants a {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--v-texte-titre);
    text-decoration: none;
}

.resume_reservation__intervenants a:hover { text-decoration: underline; }

.resume_reservation__financement {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
}

.resume_reservation__financement i { color: var(--v-action-cta); }

.resume_reservation__financement a {
    color: var(--v-action);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Indicateurs Qualiopi — obligation légale : jamais masqués. */
.resume_reservation__indicateurs {
    margin-top: 28px;
    padding: 18px 22px;
    background: var(--v-turquoise-100);
    border-radius: var(--v-radius-lg);
}

.resume_reservation__indicateurs ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

/* Colonne de réservation — collante sur grand écran, le bouton
   reste à portée pendant qu'on lit le programme. */
.resume_reservation__reservation {
    position: sticky;
    top: 24px;
    padding: 24px;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-xl);
}

.resume_reservation__prix {
    margin: 0 0 18px;
    font-family: var(--v-font-titre);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v-texte-titre);
}

.resume_reservation__prix-mention {
    display: block;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--v-texte-meta);
}

.resume_reservation__sessions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.resume_reservation__session {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--v-papier);
    border-radius: var(--v-radius-md);
}

.resume_reservation__session-dates {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.resume_reservation__session-lieu {
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.resume_reservation__session-alerte {
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-orange);
}

.resume_reservation__session .v-bouton {
    margin-top: 8px;
}

.resume_reservation__vide,
.resume_reservation__mention {
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-meta);
}

.resume_reservation__mention {
    margin: 14px 0 0;
}

/* --------------------------------------------------
   PUBLIC & PRÉREQUIS · INTERVENANTS · EN SAVOIR PLUS
   Trois cartes de même facture.
-------------------------------------------------- */

.public_prerequis__carte,
.intervenants__carte,
.en_savoir_plus__carte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-xl);
}

.public_prerequis__texte,
.en_savoir_plus__texte {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
}

.public_prerequis__texte > *:last-child,
.en_savoir_plus__texte > *:last-child { margin-bottom: 0; }

.intervenants__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.intervenants__personne {
    display: flex;
    align-items: center;
    gap: 14px;
}

.intervenants__portrait img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--v-radius-pill);
    display: block;
}

.intervenants__identite a {
    font-family: var(--v-font-titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    text-decoration: none;
}

.intervenants__role {
    display: block;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.en_savoir_plus__corps {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* Le ratio réserve la place de la vidéo : sans lui, la page saute
   quand l'iframe se charge. */
.en_savoir_plus__video {
    flex: 0 0 46%;
    aspect-ratio: 16 / 9;
    border-radius: var(--v-radius-lg);
    overflow: hidden;
}

.en_savoir_plus__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --------------------------------------------------
   PROFIL DU FORMATEUR
-------------------------------------------------- */

.profil_formateur__portrait {
    margin: 0;
}

.profil_formateur__portrait img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--v-radius-xl);
}

.profil_formateur__role {
    margin: 10px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    color: var(--v-texte-meta);
}

.profil_formateur__specialites {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.profil_formateur__specialites li {
    padding: 4px 12px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    color: var(--v-texte-corps);
}

.profil_formateur__approche {
    margin-top: 20px;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
    max-width: 62ch;
}

.profil_formateur__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 20px 0;
}

.profil_formateur__meta dt {
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.profil_formateur__meta dd {
    margin: 3px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

.profil_formateur__formations {
    margin-top: 56px;
}

.profil_formateur__formations .v-titre {
    margin-bottom: 24px;
}

@media (max-width: 991px) {
    .resume_reservation__reservation { position: static; }
    .en_savoir_plus__corps { flex-direction: column; }
    .en_savoir_plus__video { flex-basis: auto; width: 100%; }
}

@media (max-width: 767px) {
    .public_prerequis__carte,
    .intervenants__carte,
    .en_savoir_plus__carte,
    .resume_reservation__reservation { padding: 20px; }
}