/* t204 : page /formation-drone-cpf en parcours illustré (maquette UX t47 validée par Aymen le 04/10/2026, « T47-49-t52-oui »).
   Chargée par formation-drone-cpf.tag seulement. Textes inchangés ; pictos de Béryl (Canva) et picto 01 d'UX (t70), PNG transparents
   dans /images/formation/cpf/. Reprend maquettes\t47\correctif.css de la session UX, emplacements nommés remplacés par les images. */

/* ---------- 1. Étapes « Votre demande de formation en moins de 5 minutes! » : parcours 01 → 05 ---------- */
.md-parcours-cpf > .col-md-12 > hr { width: 120px; border-top: 4px solid #e7fdba; margin: 12px 0 40px; }
.sub-theorique-pratique .md-parcours { list-style: none; padding: 0; margin: 0; counter-reset: etape; }
.sub-theorique-pratique .md-parcours > li { position: relative; line-height: inherit; color: inherit; counter-increment: etape; }

/* Couleur de chaque étape (secondaires de la charte, texte noir dessus ; 05 en violet, texte blanc 4,7:1) et de la suivante (trait) */
.md-parcours > li:nth-child(1) { --md-etoile: #fd636b; --md-suivante: #ffb901; }
.md-parcours > li:nth-child(2) { --md-etoile: #ffb901; --md-suivante: #3be8b0; }
.md-parcours > li:nth-child(3) { --md-etoile: #3be8b0; --md-suivante: #1aafd0; }
.md-parcours > li:nth-child(4) { --md-etoile: #1aafd0; --md-suivante: #6a67ce; }
.md-parcours > li:nth-child(5) { --md-etoile: #6a67ce; --md-suivante: #6a67ce; }

/* Picto : image de Béryl (rond compris dans l'image), dans un cadre carré qui porte l'étoile */
.md-picto { position: relative; z-index: 1; flex: none; display: block; width: 120px; height: 120px; }
.md-picto img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Étoile numérotée (motif des slides « Identité visuelle » p.10) : décorative, le numéro est déjà dans « Etape 0N » */
.md-parcours .md-picto::after {
  content: counter(etape, decimal-leading-zero);
  content: counter(etape, decimal-leading-zero) / "";
  position: absolute; top: -8px; right: -12px;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; font-size: 16px; font-weight: 800; color: #000;
  background: var(--md-etoile);
  clip-path: polygon(50% 0%, 60.4% 11.4%, 75% 6.7%, 78.3% 21.7%, 93.3% 25%, 88.6% 39.6%, 100% 50%, 88.6% 60.4%, 93.3% 75%, 78.3% 78.3%, 75% 93.3%, 60.4% 88.6%, 50% 100%, 39.6% 88.6%, 25% 93.3%, 21.7% 78.3%, 6.7% 75%, 11.4% 60.4%, 0% 50%, 11.4% 39.6%, 6.7% 25%, 21.7% 21.7%, 25% 6.7%, 39.6% 11.4%);
}
.md-parcours > li:nth-child(5) .md-picto::after { color: #fff; }

/* Trait ondulé entre deux pictos (lignes ondulées en dégradé de l'identité visuelle p.6) */
.md-parcours > li:not(:last-child)::before {
  content: ""; position: absolute; z-index: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 12 Q20 1 40 12 T80 12' fill='none' stroke='black' stroke-width='5'/%3E%3C/svg%3E") repeat-x center / 80px 24px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 12 Q20 1 40 12 T80 12' fill='none' stroke='black' stroke-width='5'/%3E%3C/svg%3E") repeat-x center / 80px 24px;
}

/* Carte de l'étape : carte blanche du site, plus serrée ; « Etape 0N » en surtitre ; texte 16 px #333 (12,6:1) au lieu de gris clair */
.md-parcours .newcard { margin: 0; padding: 24px 20px; text-align: left; }
.md-parcours .newcard h4 { margin: 0 0 8px; }
.md-parcours .newcard h4.md-etape-num { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.md-parcours .newcard h4:not(.md-etape-num) { font-size: 18px; line-height: 24px; font-weight: 600; color: #000; }
.md-parcours .newcard p { font-size: 16px; line-height: 24px; color: #333; margin: 0; }
.md-parcours .newcard p:empty { display: none; }

/* Ordinateur (992 px et plus) : parcours horizontal, 5 étapes côte à côte, trait ondulé de picto en picto */
@media (min-width: 992px) {
  .md-parcours-cpf > .col-md-12 > h2 { text-align: center; }
  .md-parcours-cpf > .col-md-12 > hr { margin: 12px auto 48px; }
  .sub-theorique-pratique .md-parcours { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 24px; }
  .md-parcours > li { display: flex; flex-direction: column; align-items: center; }
  .md-parcours .newcard { margin-top: 28px; flex: 1; width: 100%; }
  .md-parcours > li:not(:last-child)::before {
    top: 48px; left: calc(50% + 66px); width: calc(100% + 24px - 132px); height: 24px;
    background: linear-gradient(90deg, var(--md-etoile), var(--md-suivante));
  }
}

/* Téléphone et tablette (moins de 992 px) : frise verticale, picto à gauche, carte à droite, ordre 01 → 05 */
@media (max-width: 991px) {
  .md-parcours > li { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; align-items: start; margin-bottom: 28px; }
  .md-parcours > li:last-child { margin-bottom: 0; }
  .md-parcours .md-picto { width: 72px; height: 72px; }
  .md-parcours .md-picto::after { width: 34px; height: 34px; font-size: 13px; top: -8px; right: -10px; }
  .md-parcours > li:not(:last-child)::before {
    top: 76px; bottom: -24px; left: 24px; width: 24px;
    background: linear-gradient(180deg, var(--md-etoile), var(--md-suivante));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='80' viewBox='0 0 24 80'%3E%3Cpath d='M12 0 Q1 20 12 40 T12 80' fill='none' stroke='black' stroke-width='5'/%3E%3C/svg%3E") repeat-y center / 24px 80px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='80' viewBox='0 0 24 80'%3E%3Cpath d='M12 0 Q1 20 12 40 T12 80' fill='none' stroke='black' stroke-width='5'/%3E%3C/svg%3E") repeat-y center / 24px 80px;
  }
  .md-parcours .newcard { padding: 20px 16px; }
}

/* ---------- 2. « Laissez-nous vous accompagner » : encadré lime avec le picto « groupe Minutedrone » de Béryl ---------- */
.wrapCards .md-accompagner {
  float: none; width: auto; margin: 0 15px;
  display: flex; align-items: center; gap: 32px;
  background: #e7fdba; border-radius: 12px; padding: 32px 40px; text-align: left;
}
.md-accompagner .md-picto { width: 120px; height: 120px; }
.md-accompagner h3 { margin: 0 0 8px; color: #000; }
.md-accompagner p { font-size: 16px; line-height: 24px; color: #333; margin: 0 0 12px; }
.md-accompagner h3 + p + h3 { margin: 0; font-size: 22px; }
.md-accompagner a[href^="mailto:"] { color: #000; text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; }
@media (max-width: 767px) {
  .wrapCards .md-accompagner { flex-direction: column; text-align: center; gap: 16px; padding: 28px 16px; margin: 0; }
  .md-accompagner .md-picto { width: 96px; height: 96px; }
  .md-accompagner h3 + p + h3 { font-size: 20px; }
}

/* ---------- 3. Cartes des formations : surtitre en pastille lime, badges lisibles, texte 16 px ---------- */
.wrapCards .md-surtitre {
  display: inline-block; background: #e7fdba; color: #000; border-radius: 30px;
  padding: 4px 16px; margin-bottom: 8px; font-size: 14px; line-height: 24px;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
/* Badges : texte noir sur bleu #1aafd0 (8:1 au lieu de 2,6:1 en blanc) ; violet garde le blanc (4,7:1) ; 13 px au lieu de 12 px */
.wrapCards .badge.md-badge-bleu { background: #1aafd0; color: #000; }
.wrapCards .badge.md-badge-violet { background: #6a67ce; color: #fff; }
.wrapCards .badge { font-size: 13px; padding: 5px 10px; margin: 0 2px 6px; font-weight: 600; }
.wrapCards .newcard > span:not(.badge) { display: block; font-size: 16px; line-height: 24px; color: #333; }