/* ==================================================
   BLOC — CONTENU PÉDAGOGIQUE
   Colonne de gauche de la maquette 97:35
================================================== */

.contenu_formation__titre {
    margin-bottom: 1.75rem;
}

/* Le rythme vertical du bloc : 24 px entre les sections, comme dans la
   maquette, qui les pose les unes sous les autres sans séparateur. */
.contenu_formation__corps > * + * {
    margin-top: 1.5rem;
}

.contenu_formation__section {
    padding: 8px 0;
}

/* Les titres de section sont en violet foncé, sans filet de couleur à
   gauche : la maquette n'en pose aucun, et le liseré qu'on avait ajouté
   redécoupait la colonne en tranches là où elle doit se lire d'un trait.
   La filière se dit ailleurs — badges de date, arrêts du programme. */
.contenu_formation__section-titre {
    margin: 0 0 0.875rem;
    color: var(--v-violet-700);
}

/* --------------------------------------------------
   LA FORMATION
-------------------------------------------------- */

/* Surlignée au jaune de la charte, comme au feutre : le fond épouse la
   phrase et non la largeur de la colonne, d'où le span. */
.contenu_formation__phrase {
    margin: 0 0 0.875rem;
}

.contenu_formation__phrase span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--v-jaune-500);
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--v-texte-titre);
}

/* --------------------------------------------------
   TEXTE COURANT

   Il vient de l'ancien site : listes, titres intermédiaires,
   paragraphes serrés. On lui rend de l'air plutôt que de le réécrire.
-------------------------------------------------- */

.contenu_formation__texte {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--v-texte-corps);
}

.contenu_formation__texte > *:first-child { margin-top: 0; }
.contenu_formation__texte > *:last-child  { margin-bottom: 0; }

.contenu_formation__texte p { margin-bottom: 0.9rem; }

.contenu_formation__texte ul,
.contenu_formation__texte ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.contenu_formation__texte li { margin-bottom: 0.4rem; }

/* Les intertitres du contenu repris arrivent en h2, h3 ou h4 dans le
   HTML : on les ramène à une taille qui ne concurrence pas les titres
   de section du bloc lui-même. */
.contenu_formation__texte h2,
.contenu_formation__texte h3,
.contenu_formation__texte h4 {
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    margin: 1.5rem 0 0.6rem;
}

/* --------------------------------------------------
   INFORMATIONS UTILES

   Sept cases étiquetées dans une carte bordée, réparties sur deux
   colonnes. Ce n'était auparavant qu'un champ libre déversé dans un
   encadré turquoise : on ne pouvait pas y chercher l'horaire ou le lieu
   sans lire tout le paragraphe.
-------------------------------------------------- */

.contenu_formation__infos {
    padding: 22px 24px;
    border-radius: var(--v-radius-lg);
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    box-shadow: 0 4px 16px rgba(56, 49, 111, 0.08);
}

.contenu_formation__grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    margin: 0;
}

.contenu_formation__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.contenu_formation__info-label {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.contenu_formation__info-valeur {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
}

.contenu_formation__info-valeur > *:first-child { margin-top: 0; }
.contenu_formation__info-valeur > *:last-child  { margin-bottom: 0; }
.contenu_formation__info-valeur p { margin: 0; }

/* Le tarif est celui de la session la moins chère : sans cette ligne il
   se lirait comme un prix ferme, alors que trois mécanismes le font
   baisser sans qu'on le demande. */
.contenu_formation__info-note {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* Les liens dans le texte d'une fiche : violets et soulignés.
   Le thème retire le soulignement de tous les liens (base.css) ; dans un
   paragraphe, la couleur seule ne suffit pas à les distinguer du texte. */
.contenu_formation__texte a,
.contenu_formation__info-valeur a {
    color: var(--v-violet-500);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.contenu_formation__texte a:hover,
.contenu_formation__info-valeur a:hover {
    color: var(--v-violet-700);
}

/* Prérequis : le dernier en gras, puis « voir plus » et ses bulles — le
   composant partagé .v-prerequis-* (base.css), le même que sur les
   cartes de formation. */
.contenu_formation__prerequis-directs a {
    font-weight: 600;
}

/* « (ou Module Intensif) » : l'équivalence, en retrait du prérequis. */
.contenu_formation__prerequis-ou,
.contenu_formation__prerequis-directs .contenu_formation__prerequis-ou a {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--v-texte-meta);
}

/* Financement : les logos des dispositifs, côte à côte, chacun dans un
   rectangle horizontal de même taille (Virages, 21/09/2026). Un logo y
   tient entier, centré, sans être rogné ni déformé. */
.contenu_formation__financements {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.contenu_formation__financement--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    aspect-ratio: 16 / 9;
    padding: 10px 14px;
    border-radius: var(--v-radius-md);
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
}

.contenu_formation__financement--logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Sans logo déposé, le nom du dispositif en pastille. */
.contenu_formation__financement:not(.contenu_formation__financement--logo) {
    padding: 3px 10px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-turquoise-700);
}

/* Ce que les sept cases ne recueillent pas — accessibilité, matériel,
   restauration — reste rendu sous le tableau, séparé par un filet. */
.contenu_formation__infos-libres {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--v-bordure);
}

/* --------------------------------------------------
   OBJECTIFS PÉDAGOGIQUES

   Deux colonnes de puces à coche turquoise. La liste vient du champ
   riche : la mise en forme se fait ici, sans demander à l'équipe de
   ressaisir quoi que ce soit.
-------------------------------------------------- */

.contenu_formation__objectifs > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contenu_formation__objectifs > ul > li {
    position: relative;
    margin: 0;
    padding-left: 30px;
    line-height: var(--v-lh-corps);
}

.contenu_formation__objectifs > ul > li::before {
    content: "✓";
    position: absolute;
    top: 0.05em;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--v-turquoise-500);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-blanc);
}

/* Le contenu repris enveloppe souvent chaque puce dans un paragraphe :
   il ne doit pas rouvrir une marge à l'intérieur de la coche. */
.contenu_formation__objectifs > ul > li > p {
    margin: 0 0 0.35rem;
}

.contenu_formation__objectifs > ul > li > p:last-child { margin-bottom: 0; }

/* Les sous-listes gardent leurs puces ordinaires : la coche dit
   « objectif atteint », pas « détail d'objectif ». */
.contenu_formation__objectifs > ul ul {
    margin: 0.35rem 0 0 1.1rem;
    list-style: disc;
}

.contenu_formation__objectifs > ul ul li::before { content: none; }

/* --------------------------------------------------
   LE PROGRAMME

   Un itinéraire : un arrêt numéroté par module, relié au suivant par
   des pointillés, avec sa durée en pastille jaune.
-------------------------------------------------- */

.contenu_formation__route {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contenu_formation__virage {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
}

.contenu_formation__stop {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cat, var(--v-violet-500));
    font-family: var(--v-font-titre);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cat-texte, var(--v-blanc));
}

/* Les pointillés qui mènent à l'arrêt suivant. Le dernier arrêt n'en a
   pas : la route s'arrête là. */
.contenu_formation__virage:not(:last-child) .contenu_formation__stop::after {
    content: "";
    position: absolute;
    top: 34px;
    left: 12px;
    bottom: 0;
    width: 6px;
    border-left: 3px dotted var(--cat, var(--v-violet-500));
    opacity: 0.5;
}

.contenu_formation__virage-corps {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 4px;
}

.contenu_formation__virage-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.contenu_formation__chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--v-radius-pill);
    background: var(--v-jaune-500);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--v-texte-titre);
}

.contenu_formation__virage-texte {
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   TARIFS ET FINANCEMENTS
-------------------------------------------------- */

.contenu_formation__encadre {
    padding: 22px 24px;
    border-radius: var(--v-radius-lg);
    background: var(--v-turquoise-100);
}

.contenu_formation__encadre--tarifs {
    background: var(--v-fond-alerte-douce);
}

/* Les tarifs, ligne par ligne : l'intitulé, puis le montant en gros.
   La réduction suit le tarif en ligne sans en être séparée : c'est en
   la voyant là qu'on la compte dans son coût. */
.contenu_formation__tarifs {
    display: grid;
    gap: 14px;
    margin: 0;
}

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

.contenu_formation__tarif-valeur {
    margin: 2px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    color: var(--v-texte-titre);
}

.contenu_formation__tarif-valeur--montant,
.contenu_formation__tarif-valeur--montant .amount {
    font-family: var(--v-font-titre);
    font-size: 1.25rem;
    font-weight: 600;
}

.contenu_formation__tarif-precision {
    display: block;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--v-texte-meta);
}

.contenu_formation__tarifs-texte {
    margin-top: 1.25rem;
}

.contenu_formation__tarifs + .contenu_formation__tarifs-texte,
.contenu_formation__note + .contenu_formation__tarifs-texte {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(56, 49, 111, 0.12);
}

.contenu_formation__note {
    margin: 0.9rem 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* Sous 768 px la colonne fait toute la largeur : les grilles à deux
   colonnes n'y tiennent plus. */
@media (max-width: 767px) {
    .contenu_formation__grille,
    .contenu_formation__objectifs > ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .contenu_formation__infos {
        padding: 18px;
    }
}