/* ==========================================================
   DÉTAIL D’UN ARTICLE
   ========================================================== */

.article-detail-page {
  --article-page-bg: #f6f9f3;
  --article-surface: #ffffff;
  --article-surface-soft: #f3f8ed;
  --article-title: #121713;
  --article-text: #2f3830;
  --article-muted: #687268;
  --article-border: #dce5d8;
  --article-focus: rgba(112, 197, 0, 0.22);
  --article-shadow: 0 24px 70px rgba(32, 52, 27, 0.1);

  min-height: 100vh;
  padding: clamp(35px, 6vw, 72px) 0 clamp(70px, 9vw, 120px);
  background:
    radial-gradient(circle at 10% 8%, rgba(112, 197, 0, 0.1), transparent 28rem),
    radial-gradient(circle at 90% 92%, rgba(243, 181, 54, 0.08), transparent 24rem),
    var(--article-page-bg);
  color: var(--article-text);
}

.article-detail-container {
  width: min(calc(100% - 40px), 1080px);
  margin-inline: auto;
}

/* Fil d’Ariane */

.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 960px;
  margin: 0 auto 24px;
  font-size: 13px;
  color: var(--article-muted);
}

.article-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 750;
  color: inherit;
  transition: color 0.25s ease;
}

.article-breadcrumb a:hover {
  color: var(--primary-dark);
}

.article-breadcrumb i {
  font-size: 9px;
  color: var(--primary);
}

.article-breadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-breadcrumb a:focus-visible,
.article-back-link:focus-visible,
.article-detail-content a:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--article-focus);
  outline-offset: 4px;
}

/* Article */

.article-detail {
  overflow: hidden;
  max-width: 960px;
  margin-inline: auto;
  border: 1px solid var(--article-border);
  border-radius: clamp(22px, 4vw, 34px);
  box-shadow: var(--article-shadow);
  background-color: var(--article-surface);
}

.article-detail-header {
  max-width: 850px;
  margin-inline: auto;
  padding: clamp(48px, 8vw, 82px) clamp(22px, 6vw, 60px) clamp(34px, 5vw, 52px);
  text-align: center;
}

.article-detail-category,
.article-detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 9px 15px;
  border: 1px solid rgba(112, 197, 0, 0.22);
  border-radius: 999px;
  background-color: var(--article-surface-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.article-detail-header h1 {
  max-width: 820px;
  margin: 0 auto 22px;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--article-title);
}

.article-detail-excerpt {
  max-width: 730px;
  margin-inline: auto;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.75;
  text-wrap: pretty;
  color: var(--article-muted);
}

.article-detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--article-muted);
}

.article-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.article-detail-meta i {
  color: var(--primary-dark);
}

/* Image */

.article-detail-image {
  width: calc(100% - 80px);
  aspect-ratio: 16 / 8.7;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--article-border);
  border-radius: 24px;
  background-color: var(--article-surface-soft);
  box-shadow: 0 18px 42px rgba(20, 36, 17, 0.12);
}

.article-detail-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenu */

.article-detail-content {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(42px, 7vw, 68px) clamp(22px, 5vw, 38px);
  font-size: clamp(1rem, 1.3vw, 1.075rem);
  line-height: 1.9;
  color: var(--article-text);
}

.article-detail-content p {
  margin-bottom: 1.45em;
  text-wrap: pretty;
}

.article-detail-content p:last-child {
  margin-bottom: 0;
}

.article-detail-content h2,
.article-detail-content h3 {
  margin: 2.1em 0 0.7em;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--article-title);
}

.article-detail-content h2 {
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.article-detail-content h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
}

.article-detail-content ul,
.article-detail-content ol {
  margin: 20px 0 25px 25px;
}

.article-detail-content ul {
  list-style: disc;
}

.article-detail-content ol {
  list-style: decimal;
}

.article-detail-content li {
  margin-bottom: 0.65em;
  padding-left: 0.25em;
}

.article-detail-content li::marker {
  color: var(--primary-dark);
  font-weight: 800;
}

.article-detail-content a {
  color: var(--primary-dark);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.article-detail-content strong {
  color: var(--article-title);
}

.article-detail-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 16px;
}

.article-detail-content blockquote {
  margin: 30px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--primary);
  border-radius: 0 15px 15px 0;
  background-color: var(--article-surface-soft);
  font-style: italic;
  color: var(--article-title);
}

/* Pied de l’article */

.article-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px clamp(22px, 5vw, 40px);
  border-top: 1px solid var(--article-border);
  background-color: var(--article-surface-soft);
}

.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(112, 197, 0, 0.34);
  border-radius: 12px;
  background-color: var(--article-surface);
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-dark);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.article-back-link:hover {
  border-color: var(--primary);
  background-color: var(--primary);
  color: #17210f;
  transform: translateY(-2px);
}

.article-back-link i {
  transition: transform 0.25s ease;
}

.article-back-link:hover i {
  transform: translateX(-3px);
}

.article-detail-signature {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--article-muted);
}

/* Articles similaires */

.related-articles {
  padding-top: 80px;
}

.related-articles-heading {
  margin-bottom: 30px;
  text-align: center;
}

.related-articles-heading > span {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.related-articles-heading h2 {
  margin-top: 8px;
  font-size: clamp(30px, 5vw, 45px);
  color: var(--dark);
}

.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}

.related-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-small);
  background-color: var(--white);
}

.related-card-media {
  height: 180px;
  overflow: hidden;
  background-color: var(--primary-light);
}

.related-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-card-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 38px;
  color: var(--primary);
}

.related-card-body {
  padding: 22px;
}

.related-card-body > span {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-dark);
}

.related-card h3 {
  margin: 9px 0 10px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--dark);
}

.related-card h3 a:hover {
  color: var(--primary-dark);
}

.related-card p {
  font-size: 14px;
  color: var(--text-light);
}

.related-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 17px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
}

/* Responsive */

@media (max-width: 850px) {
  .related-articles-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .article-detail-page {
    padding: 35px 0 70px;
  }

  .article-detail-container {
    width: min(100% - 24px, 1050px);
  }

  .article-detail-header {
    padding: 45px 20px 35px;
  }

  .article-detail-excerpt {
    font-size: 16px;
  }

  .article-detail-image {
    width: calc(100% - 30px);
    border-radius: 18px;
  }

  .article-detail-content {
    padding: 40px 22px;
    font-size: 16px;
  }

  .article-detail-footer {
    padding: 22px;
  }

  .related-articles {
    padding-top: 55px;
  }

  .related-articles-grid {
    grid-template-columns: 1fr;
  }
}

.related-card-category {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-dark);
}

.related-card-category:hover {
  text-decoration: underline;
}

/* ==========================================================
   COMMENTAIRES
   ========================================================== */

.comments-section {
  padding-top: 80px;
}

.comment-messages {
  margin-bottom: 25px;
}

.comment-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
}

.comment-message--success {
  border: 1px solid rgba(112, 197, 0, 0.4);
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

.comment-message--error {
  border: 1px solid rgba(200, 50, 50, 0.3);
  background-color: #fff1f1;
  color: #a62828;
}

.comments-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 30px;
}

.comments-heading span {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.comments-heading h2 {
  margin-top: 5px;
  font-size: clamp(31px, 5vw, 45px);
  color: var(--dark);
}

.comments-heading > strong {
  padding: 8px 13px;
  border-radius: 999px;
  background-color: var(--primary-light);
  font-size: 13px;
  color: var(--primary-dark);
}

.comments-layout {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
  gap: 35px;
}

/* Liste */

.comments-list {
  display: grid;
  gap: 18px;
}

.comment-card {
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-small);
  background-color: var(--white);
}

.comment-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.comment-avatar {
  display: grid;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  place-items: center;
  background-color: var(--primary);
  font-size: 18px;
  font-weight: 900;
  color: var(--dark);
}

.comment-card-header h3 {
  font-size: 16px;
  color: var(--dark);
}

.comment-card-header time {
  font-size: 12px;
  color: var(--text-light);
}

.comment-card-content {
  line-height: 1.75;
  color: var(--text);
}

.comments-empty {
  padding: 45px 25px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background-color: var(--white);
  text-align: center;
}

.comments-empty > i {
  margin-bottom: 15px;
  font-size: 38px;
  color: var(--primary);
}

.comments-empty h3 {
  margin-bottom: 7px;
  color: var(--dark);
}

.comments-empty p {
  font-size: 14px;
  color: var(--text-light);
}

/* Formulaire */

.comment-form-box {
  position: sticky;
  top: 115px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-small);
  background-color: var(--white);
}

.comment-form-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 25px;
}

.comment-form-heading > div > span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.comment-form-heading h3,
.comment-form-heading h1 {
  margin-top: 3px;
  color: var(--dark);
}

.comment-form-icon {
  display: grid;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  place-items: center;
  background-color: var(--primary-light);
  font-size: 20px;
  color: var(--primary-dark);
}

.comment-form {
  display: grid;
  gap: 18px;
}

.comment-field {
  display: grid;
  gap: 7px;
}

.comment-field label {
  font-size: 13px;
  font-weight: 800;
  color: var(--dark);
}

.comment-field input,
.comment-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  outline: none;
  background-color: var(--light);
  color: var(--text);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.comment-field textarea {
  min-height: 135px;
  resize: vertical;
}

.comment-field input:focus,
.comment-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(112, 197, 0, 0.13);
}

.comment-field small {
  font-size: 11px;
  color: var(--text-light);
}

.comment-field-error,
.comment-field-errors {
  font-size: 12px;
  font-weight: 700;
  color: #b42323;
}

.comment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  border-radius: 12px;
  background-color: var(--primary);
  font-weight: 800;
  color: var(--dark);
}

.comment-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  color: var(--text-light);
}

.comment-notice i {
  margin-top: 3px;
  color: var(--primary-dark);
}

@media (max-width: 850px) {
  .comments-layout {
    grid-template-columns: 1fr;
  }

  .comment-form-box {
    position: static;
  }
}

@media (max-width: 550px) {
  .comments-section {
    padding-top: 55px;
  }

  .comments-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .comment-card,
  .comment-form-box {
    padding: 21px;
  }
}

/* ==========================================================
   MODE SOMBRE

   Compatible avec les systèmes les plus courants :
   body.dark-mode, body.dark-theme, body.dark et data-theme.
   ========================================================== */

html.dark-mode .article-detail-page,
body.dark-mode .article-detail-page,
body.dark-theme .article-detail-page,
body.dark .article-detail-page,
html[data-theme="dark"] .article-detail-page,
body[data-theme="dark"] .article-detail-page {
  --article-page-bg: #0d120e;
  --article-surface: #151c16;
  --article-surface-soft: #1b251c;
  --article-title: #f4f8f1;
  --article-text: #d8e0d6;
  --article-muted: #a9b5a7;
  --article-border: rgba(220, 229, 216, 0.14);
  --article-focus: rgba(139, 217, 41, 0.3);
  --article-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);

  background:
    radial-gradient(circle at 10% 8%, rgba(112, 197, 0, 0.11), transparent 28rem),
    radial-gradient(circle at 90% 92%, rgba(243, 181, 54, 0.06), transparent 24rem),
    var(--article-page-bg);
}

html.dark-mode .article-detail-kicker,
html.dark-mode .article-detail-category,
body.dark-mode .article-detail-kicker,
body.dark-mode .article-detail-category,
body.dark-theme .article-detail-kicker,
body.dark-theme .article-detail-category,
body.dark .article-detail-kicker,
body.dark .article-detail-category,
[data-theme="dark"] .article-detail-kicker,
[data-theme="dark"] .article-detail-category {
  border-color: rgba(139, 217, 41, 0.24);
  color: #9bdd49;
}

html.dark-mode .article-breadcrumb a:hover,
html.dark-mode .article-detail-content a,
body.dark-mode .article-breadcrumb a:hover,
body.dark-mode .article-detail-content a,
body.dark-theme .article-breadcrumb a:hover,
body.dark-theme .article-detail-content a,
body.dark .article-breadcrumb a:hover,
body.dark .article-detail-content a,
[data-theme="dark"] .article-breadcrumb a:hover,
[data-theme="dark"] .article-detail-content a {
  color: #9bdd49;
}

html.dark-mode .related-card,
html.dark-mode .comment-card,
html.dark-mode .comments-empty,
html.dark-mode .comment-form-box,
body.dark-mode .related-card,
body.dark-mode .comment-card,
body.dark-mode .comments-empty,
body.dark-mode .comment-form-box,
body.dark-theme .related-card,
body.dark-theme .comment-card,
body.dark-theme .comments-empty,
body.dark-theme .comment-form-box,
body.dark .related-card,
body.dark .comment-card,
body.dark .comments-empty,
body.dark .comment-form-box,
[data-theme="dark"] .related-card,
[data-theme="dark"] .comment-card,
[data-theme="dark"] .comments-empty,
[data-theme="dark"] .comment-form-box {
  border-color: var(--article-border);
  background-color: var(--article-surface);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

html.dark-mode .related-card h3,
html.dark-mode .related-articles-heading h2,
html.dark-mode .comments-heading h2,
html.dark-mode .comment-card-header h3,
html.dark-mode .comments-empty h3,
html.dark-mode .comment-form-heading h3,
.comment-form-heading h1,
html.dark-mode .comment-field label,
body.dark-mode .related-card h3,
body.dark-mode .related-articles-heading h2,
body.dark-mode .comments-heading h2,
body.dark-mode .comment-card-header h3,
body.dark-mode .comments-empty h3,
body.dark-mode .comment-form-heading h3,
.comment-form-heading h1,
body.dark-mode .comment-field label,
body.dark-theme .related-card h3,
body.dark-theme .related-articles-heading h2,
body.dark-theme .comments-heading h2,
body.dark-theme .comment-card-header h3,
body.dark-theme .comments-empty h3,
body.dark-theme .comment-form-heading h3,
.comment-form-heading h1,
body.dark-theme .comment-field label,
body.dark .related-card h3,
body.dark .related-articles-heading h2,
body.dark .comments-heading h2,
body.dark .comment-card-header h3,
body.dark .comments-empty h3,
body.dark .comment-form-heading h3,
.comment-form-heading h1,
body.dark .comment-field label,
[data-theme="dark"] .related-card h3,
[data-theme="dark"] .related-articles-heading h2,
[data-theme="dark"] .comments-heading h2,
[data-theme="dark"] .comment-card-header h3,
[data-theme="dark"] .comments-empty h3,
[data-theme="dark"] .comment-form-heading h3,
.comment-form-heading h1,
[data-theme="dark"] .comment-field label {
  color: var(--article-title);
}

html.dark-mode .related-card p,
html.dark-mode .comment-card-content,
html.dark-mode .comments-empty p,
body.dark-mode .related-card p,
body.dark-mode .comment-card-content,
body.dark-mode .comments-empty p,
body.dark-theme .related-card p,
body.dark-theme .comment-card-content,
body.dark-theme .comments-empty p,
body.dark .related-card p,
body.dark .comment-card-content,
body.dark .comments-empty p,
[data-theme="dark"] .related-card p,
[data-theme="dark"] .comment-card-content,
[data-theme="dark"] .comments-empty p {
  color: var(--article-text);
}

html.dark-mode .comment-field input,
html.dark-mode .comment-field textarea,
body.dark-mode .comment-field input,
body.dark-mode .comment-field textarea,
body.dark-theme .comment-field input,
body.dark-theme .comment-field textarea,
body.dark .comment-field input,
body.dark .comment-field textarea,
[data-theme="dark"] .comment-field input,
[data-theme="dark"] .comment-field textarea {
  border-color: var(--article-border);
  background-color: var(--article-surface-soft);
  color: var(--article-text);
}

html.dark-mode .comment-field input::placeholder,
html.dark-mode .comment-field textarea::placeholder,
body.dark-mode .comment-field input::placeholder,
body.dark-mode .comment-field textarea::placeholder,
body.dark-theme .comment-field input::placeholder,
body.dark-theme .comment-field textarea::placeholder,
body.dark .comment-field input::placeholder,
body.dark .comment-field textarea::placeholder,
[data-theme="dark"] .comment-field input::placeholder,
[data-theme="dark"] .comment-field textarea::placeholder {
  color: #839081;
}

/* États interactifs et mouvements accessibles */

.related-card,
.comment-card,
.comment-submit {
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.related-card:hover {
  border-color: rgba(112, 197, 0, 0.48);
  box-shadow: 0 20px 50px rgba(32, 52, 27, 0.13);
  transform: translateY(-5px);
}

.comment-submit:hover {
  box-shadow: 0 12px 28px rgba(85, 165, 0, 0.24);
  transform: translateY(-2px);
}

.comment-submit:focus-visible,
.comment-field input:focus-visible,
.comment-field textarea:focus-visible {
  outline: 3px solid var(--article-focus);
  outline-offset: 3px;
}

@media (max-width: 650px) {
  .article-detail-page {
    padding-top: 28px;
  }

  .article-detail-container {
    width: min(calc(100% - 24px), 1080px);
  }

  .article-breadcrumb {
    margin-bottom: 18px;
  }

  .article-detail-header h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .article-detail-image {
    width: calc(100% - 28px);
    aspect-ratio: 4 / 3;
    border-radius: 17px;
  }

  .article-detail-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .article-back-link {
    justify-content: center;
    width: 100%;
  }

  .article-detail-signature {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-back-link,
  .article-back-link i,
  .related-card,
  .comment-card,
  .comment-submit {
    transition: none;
  }
}
/* ==========================================================
   INFORMATIONS FORMATION + LIKES + INSCRIPTION
   ========================================================== */
.formation-summary-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}.formation-summary-bar span{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--article-border);border-radius:999px;background:var(--article-surface-soft);font-size:13px;color:var(--article-muted)}.formation-summary-bar i{color:var(--primary-dark)}.formation-information-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 clamp(22px,5vw,40px) 42px}.formation-info-card{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:28px;border:1px solid var(--article-border);border-radius:22px;background:var(--article-surface-soft)}.formation-info-icon{display:grid;width:50px;height:50px;place-items:center;border-radius:15px;background:var(--primary);color:#15210e;font-size:20px}.formation-info-card span{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--primary-dark)}.formation-info-card h2{margin:5px 0 16px;color:var(--article-title);font-size:1.35rem}.formation-info-card ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}.formation-info-card li{position:relative;padding-left:24px;line-height:1.6;color:var(--article-text)}.formation-info-card li::before{content:"✓";position:absolute;left:0;color:var(--primary-dark);font-weight:900}.formation-action-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0 clamp(22px,5vw,40px) 42px;padding:32px;border-radius:24px;background:linear-gradient(135deg,#142019,#263729);color:#fff;box-shadow:0 20px 50px rgba(14,31,18,.2)}.formation-action-copy{max-width:600px}.formation-action-kicker{font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:#9fea43}.formation-action-copy h2{margin:7px 0 10px;font-size:clamp(1.5rem,3vw,2.25rem)}.formation-action-copy p{margin:0;color:#c5d2c6;line-height:1.7}.formation-action-copy small{display:block;margin-top:12px;color:#97aa9a;line-height:1.5}.formation-action-buttons{display:grid;gap:10px;min-width:min(100%,290px)}.official-registration-btn,.article-like-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 17px;border-radius:14px;font-weight:850;transition:transform .2s ease,box-shadow .2s ease}.official-registration-btn{background:#8be51c;color:#14200f;box-shadow:0 10px 30px rgba(139,229,28,.22)}.official-registration-btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(139,229,28,.3)}.article-like-btn{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;cursor:pointer}.article-like-btn strong{display:grid;min-width:28px;height:28px;padding:0 7px;place-items:center;border-radius:999px;background:rgba(255,255,255,.1)}.article-like-btn.is-liked{border-color:rgba(139,229,28,.35);color:#b8f370}.article-like-btn:disabled{cursor:default;opacity:.9}body.dark-mode .formation-info-card{background:#182019;border-color:#314034}body.dark-mode .formation-info-card h2{color:#fff}@media(max-width:780px){.formation-information-grid{grid-template-columns:1fr}.formation-action-panel{align-items:stretch;flex-direction:column}.formation-action-buttons{width:100%;min-width:0}}@media(max-width:540px){.formation-info-card{grid-template-columns:1fr}.formation-action-panel{padding:24px}.formation-summary-bar{justify-content:flex-start}}

/* ==========================================================
   V4 - FICHE FORMATION PREMIUM
   Ces règles remplacent visuellement l'ancienne grande carte blanche.
   ========================================================== */

.formation-detail-page {
  --fp-dark: #0f1912;
  --fp-dark-soft: #17231a;
  --fp-green: #79c900;
  --fp-green-bright: #96e62f;
  --fp-green-soft: #eef8e4;
  --fp-cream: #f7f8f3;
  --fp-card: #ffffff;
  --fp-text: #273128;
  --fp-muted: #69736a;
  --fp-border: #dde5d8;
  --fp-shadow: 0 24px 70px rgba(17, 31, 19, .11);
  --fp-shadow-strong: 0 32px 90px rgba(10, 24, 13, .22);

  padding-top: clamp(28px, 5vw, 58px);
  background:
    radial-gradient(circle at 6% 6%, rgba(121, 201, 0, .12), transparent 28rem),
    radial-gradient(circle at 94% 40%, rgba(121, 201, 0, .07), transparent 24rem),
    linear-gradient(180deg, #f8faf5 0%, #f4f7f0 100%);
}

.formation-detail-container {
  width: min(calc(100% - 42px), 1240px);
}

.formation-breadcrumb {
  max-width: 1240px;
  margin-bottom: 20px;
}

.formation-premium {
  overflow: visible;
}

/* ---------- Hero ---------- */
.formation-premium-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  min-height: 590px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 34px;
  background:
    radial-gradient(circle at 15% 15%, rgba(150, 230, 47, .12), transparent 28rem),
    linear-gradient(135deg, #0c1510 0%, #142219 58%, #1a2b1f 100%);
  box-shadow: var(--fp-shadow-strong);
}

.formation-premium-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to right, #000 0%, transparent 72%);
}

.formation-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 78px);
}

.formation-hero-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.formation-kicker,
.formation-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.formation-kicker {
  border: 1px solid rgba(150, 230, 47, .32);
  background: rgba(150, 230, 47, .1);
  color: #b7f066;
}

.formation-category {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #d7e1d8;
}

.formation-hero-copy h1 {
  max-width: 690px;
  margin: 0;
  font-size: clamp(2.55rem, 5.2vw, 4.8rem);
  line-height: .99;
  letter-spacing: -.045em;
  text-wrap: balance;
  color: #fff;
}

.formation-hero-excerpt {
  max-width: 650px;
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.75;
  color: #bdc9bf;
}

.formation-quick-infos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
}

.formation-quick-info {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(8px);
}

.formation-quick-icon {
  display: grid;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  place-items: center;
  border-radius: 11px;
  background: rgba(150,230,47,.12);
  color: var(--fp-green-bright);
}

.formation-quick-info div {
  min-width: 0;
}

.formation-quick-info small,
.formation-quick-info strong {
  display: block;
}

.formation-quick-info small {
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8f9d91;
}

.formation-quick-info strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  color: #f3f7f2;
}

.formation-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.formation-primary-cta,
.formation-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.formation-primary-cta {
  background: linear-gradient(135deg, #9aeb33, #72c300);
  box-shadow: 0 16px 34px rgba(108, 190, 0, .22);
  color: #12200e;
}

.formation-primary-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(108,190,0,.30);
}

.formation-secondary-cta {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.formation-secondary-cta:hover {
  border-color: rgba(150,230,47,.42);
  background: rgba(150,230,47,.09);
  transform: translateY(-2px);
}

.formation-hero-visual {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  background: #1b271e;
}

.formation-hero-visual > img,
.formation-visual-placeholder {
  width: 100%;
  height: 100%;
  min-height: 590px;
}

.formation-hero-visual > img {
  display: block;
  object-fit: cover;
  object-position: center;
}

.formation-visual-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  background:
    radial-gradient(circle at 50% 40%, rgba(150,230,47,.20), transparent 36%),
    linear-gradient(135deg,#203224,#101a13);
  color: #dff6c3;
}

.formation-visual-placeholder i {
  font-size: 84px;
  color: var(--fp-green-bright);
}

.formation-visual-placeholder span {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.formation-visual-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,25,18,.62) 0%, transparent 24%),
    linear-gradient(0deg, rgba(8,16,11,.62) 0%, transparent 42%);
  pointer-events: none;
}

.formation-visual-badge,
.formation-visual-rating {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  backdrop-filter: blur(14px);
}

.formation-visual-badge {
  left: 26px;
  bottom: 27px;
  gap: 12px;
  max-width: calc(100% - 52px);
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 17px;
  background: rgba(14,25,17,.72);
  color: #fff;
}

.formation-badge-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--fp-green-bright);
  color: #15220f;
}

.formation-visual-badge small,
.formation-visual-badge strong {
  display: block;
}

.formation-visual-badge small {
  margin-bottom: 2px;
  font-size: 10px;
  color: #aab7ac;
}

.formation-visual-badge strong {
  font-size: 13px;
}

.formation-visual-rating {
  top: 25px;
  right: 25px;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(14,25,17,.72);
}

.formation-visual-rating span {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}

.formation-visual-rating span i {
  margin-right: 4px;
  color: #c3f36e;
}

.formation-visual-rating small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #aab7ac;
}

/* ---------- Corps de fiche ---------- */
.formation-premium-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  align-items: start;
  gap: 28px;
  margin-top: 30px;
}

.formation-main-column {
  display: grid;
  gap: 22px;
}

.formation-section-card {
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--fp-border);
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 45px rgba(25,41,25,.07);
}

.formation-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

.formation-section-icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #eff8e8, #e3f3d5);
  box-shadow: inset 0 0 0 1px rgba(121,201,0,.14);
  color: #579600;
}

.formation-section-overline {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #66a90b;
}

.formation-section-heading h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #162019;
}

.formation-section-heading p {
  max-width: 680px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fp-muted);
}

.formation-rich-text {
  padding: 24px 26px;
  border-left: 4px solid var(--fp-green);
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, #f4f9ee, #fafcf8);
  font-size: 15px;
  line-height: 1.9;
  color: #344036;
}

/* Programme numéroté */
.formation-program-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.formation-program-list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 12px 15px 12px 12px;
  border: 1px solid #e4e9e0;
  border-radius: 18px;
  background: #fbfcfa;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.formation-program-list li:hover {
  border-color: rgba(121,201,0,.34);
  box-shadow: 0 12px 28px rgba(31,54,28,.08);
  transform: translateX(4px);
}

.formation-program-number {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  background: #17231a;
  font-size: 13px;
  font-weight: 900;
  color: #a7ed4c;
}

.formation-program-list li div small,
.formation-program-list li div strong {
  display: block;
}

.formation-program-list li div small {
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7f8a80;
}

.formation-program-list li div strong {
  font-size: 14px;
  line-height: 1.45;
  color: #222d24;
}

.formation-program-list li > i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #edf8e3;
  font-size: 11px;
  color: #61a700;
}

/* Prérequis */
.formation-prerequisite-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formation-prerequisite-list li,
.formation-prerequisite-default > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 13px 15px;
  border: 1px solid #e3e9df;
  border-radius: 16px;
  background: #fbfcfa;
}

.formation-prerequisite-list li > span,
.formation-prerequisite-default > div > span {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #edf8e3;
  color: #5da000;
}

.formation-prerequisite-list strong,
.formation-prerequisite-default strong {
  font-size: 13px;
  line-height: 1.45;
  color: #2c372e;
}

.formation-empty-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px dashed #cfddc8;
  border-radius: 17px;
  background: #f8fbf5;
  color: #49564b;
}

.formation-empty-info > i {
  font-size: 22px;
  color: #6cb100;
}

.formation-empty-info strong,
.formation-empty-info span {
  display: block;
}

.formation-empty-info strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.formation-empty-info span {
  font-size: 12px;
  color: #748076;
}

/* ---------- Colonne inscription ---------- */
.formation-side-column {
  position: sticky;
  top: 108px;
}

.formation-enrollment-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(150,230,47,.13), transparent 16rem),
    linear-gradient(155deg, #101a13, #1b2920);
  box-shadow: 0 22px 58px rgba(14,29,17,.20);
  color: #fff;
}

.formation-enrollment-top {
  padding: 28px 26px 20px;
}

.formation-enrollment-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(150,230,47,.11);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #a9ed51;
}

.formation-enrollment-top h2 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
}

.formation-enrollment-top p {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: #aeb9b0;
}

.formation-enrollment-summary {
  display: grid;
  gap: 1px;
  margin: 0 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background: rgba(255,255,255,.07);
}

.formation-enrollment-summary > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 11px 14px;
  background: rgba(9,18,12,.34);
}

.formation-enrollment-summary > div > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(150,230,47,.1);
  color: #9be83d;
}

.formation-enrollment-summary small,
.formation-enrollment-summary strong {
  display: block;
}

.formation-enrollment-summary small {
  margin-bottom: 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #809084;
}

.formation-enrollment-summary strong {
  font-size: 12px;
  line-height: 1.4;
  color: #f2f6f1;
}

.formation-enrollment-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  margin: 18px;
  padding: 0 18px;
  border-radius: 15px;
  background: linear-gradient(135deg,#9be936,#70c000);
  box-shadow: 0 13px 30px rgba(107,190,0,.20);
  font-size: 13px;
  font-weight: 900;
  color: #12200e;
  transition: transform .22s ease, box-shadow .22s ease;
}

.formation-enrollment-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 38px rgba(107,190,0,.28);
}

.formation-like-form {
  margin: 0 18px;
}

.formation-like-btn {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  color: #eaf0e9;
}

.formation-like-btn:hover:not(:disabled) {
  border-color: rgba(150,230,47,.36);
  background: rgba(150,230,47,.09);
}

.formation-like-btn.is-liked {
  border-color: rgba(150,230,47,.30);
  background: rgba(150,230,47,.10);
  color: #b5ee69;
}

.formation-enrollment-note {
  display: flex;
  gap: 8px;
  margin: 14px 20px 0;
  font-size: 10px;
  line-height: 1.5;
  color: #8e9a90;
}

.formation-trust-list {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 18px 20px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.formation-trust-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: #aeb8b0;
}

.formation-trust-list i {
  width: 18px;
  text-align: center;
  color: #8edb2e;
}

/* ---------- CTA final ---------- */
.formation-final-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 28px;
  overflow: hidden;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid rgba(121,201,0,.22);
  border-radius: 27px;
  background:
    radial-gradient(circle at 90% 20%, rgba(121,201,0,.16), transparent 20rem),
    #edf6e5;
}

.formation-final-cta > div {
  max-width: 760px;
}

.formation-final-cta span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5f9c0d;
}

.formation-final-cta h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: #17221a;
}

.formation-final-cta p {
  margin: 12px 0 0;
  font-size: 13px;
  color: #667169;
}

.formation-final-cta > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 19px;
  border-radius: 14px;
  background: #17231a;
  font-size: 13px;
  font-weight: 850;
  color: #fff;
  box-shadow: 0 15px 30px rgba(23,35,26,.16);
}

.formation-final-cta > a:hover {
  color: #a7e94f;
  transform: translateY(-2px);
}

.formation-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding: 18px 4px 0;
}

/* ---------- Commentaires harmonisés avec la nouvelle fiche ---------- */
.formation-detail-page .comments-section {
  padding-top: 70px;
}

.formation-detail-page .comment-card,
.formation-detail-page .comment-form-box,
.formation-detail-page .comments-empty {
  border-color: #dde5d8;
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(25,41,25,.07);
}

.formation-detail-page .comment-form-box {
  top: 108px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .formation-premium-hero {
    grid-template-columns: 1fr 42%;
  }

  .formation-hero-copy {
    padding: 48px 38px;
  }

  .formation-quick-infos {
    grid-template-columns: 1fr;
  }

  .formation-premium-layout {
    grid-template-columns: minmax(0, 1fr) 315px;
  }
}

@media (max-width: 900px) {
  .formation-premium-hero {
    grid-template-columns: 1fr;
  }

  .formation-hero-visual,
  .formation-hero-visual > img,
  .formation-visual-placeholder {
    min-height: 410px;
    height: 410px;
  }

  .formation-visual-shade {
    background: linear-gradient(0deg, rgba(8,16,11,.55) 0%, transparent 45%);
  }

  .formation-premium-layout {
    grid-template-columns: 1fr;
  }

  .formation-side-column {
    position: static;
  }

  .formation-enrollment-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .formation-enrollment-top {
    grid-column: 1 / -1;
  }

  .formation-enrollment-summary {
    align-self: stretch;
    margin-bottom: 18px;
  }

  .formation-enrollment-button,
  .formation-like-form,
  .formation-enrollment-note,
  .formation-trust-list {
    grid-column: 2;
  }

  .formation-enrollment-button {
    margin-top: 0;
  }
}

@media (max-width: 680px) {
  .formation-detail-container {
    width: min(calc(100% - 20px), 1240px);
  }

  .formation-premium-hero {
    border-radius: 24px;
  }

  .formation-hero-copy {
    padding: 38px 24px;
  }

  .formation-hero-copy h1 {
    font-size: clamp(2.3rem, 12vw, 3.5rem);
  }

  .formation-hero-actions,
  .formation-primary-cta,
  .formation-secondary-cta {
    width: 100%;
  }

  .formation-primary-cta,
  .formation-secondary-cta {
    justify-content: space-between;
  }

  .formation-hero-visual,
  .formation-hero-visual > img,
  .formation-visual-placeholder {
    min-height: 310px;
    height: 310px;
  }

  .formation-visual-badge {
    left: 15px;
    bottom: 15px;
    max-width: calc(100% - 30px);
  }

  .formation-visual-rating {
    top: 15px;
    right: 15px;
  }

  .formation-section-card {
    padding: 25px 19px;
    border-radius: 21px;
  }

  .formation-section-heading {
    gap: 12px;
  }

  .formation-section-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .formation-rich-text {
    padding: 19px;
  }

  .formation-program-list li {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .formation-program-number {
    width: 44px;
    height: 44px;
  }

  .formation-program-list li > i {
    display: none;
  }

  .formation-prerequisite-list {
    grid-template-columns: 1fr;
  }

  .formation-enrollment-card {
    display: block;
  }

  .formation-enrollment-summary {
    margin-bottom: 18px;
  }

  .formation-enrollment-button {
    margin-top: 18px;
  }

  .formation-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .formation-final-cta > a {
    width: 100%;
    justify-content: space-between;
  }

  .formation-detail-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}