/* Gabarits de la fiche publique d'une formation (onglet « Page publique » : Classique, Cinéma, Bento, Chemin, Preuve sociale, Aperçu).
   Tout est préfixé .cpt. Aucune couleur en dur : tout vient des variables du thème paramétrées dans les réglages.

   Socle commun aux gabarits :
   - une échelle d'espacement (--cpt-s1 à --cpt-s7) et trois rayons, pour que tous partagent le même rythme ;
   - une seule police d'affichage, celle du site (Laila), au lieu d'une par gabarit ;
   - .cpt-container ne règle que la largeur (padding-inline) et .cpt-section que le rythme vertical (padding-block) :
     les deux classes peuvent se poser sur le même bloc sans que l'une écrase l'autre ;
   - .cpt-lead : le premier bloc mord sur le bandeau du site (--cpt-overlap), comme le panneau de la page classique,
     ce qui remplace la bande vide que le bandeau laisse sous son texte. Annulé (.cpt-has-above) dès qu'une section
     s'intercale entre le bandeau et la fiche. */

.cpt {
    --cpt-accent: var(--theme-color);
    --cpt-cta: var(--custom-btn-color, var(--theme-color));
    --cpt-ink: var(--heading-color);
    --cpt-text: var(--body-font-color);
    --cpt-muted: var(--gray-color, #767588);
    /* Le gris du thème tombe à 4,2:1 sur le fond sable : assombri pour les petits textes qui portent une information (date d'un avis, compte d'une note) */
    --cpt-muted-ink: color-mix(in srgb, var(--gray-color, #767588) 72%, #000);
    --cpt-line: var(--border-color2, rgba(0, 0, 0, .09));
    --cpt-soft: var(--light-bg, #F9F8F6);
    --cpt-dark: var(--navbar-bg-color, #030060);
    --cpt-on-dark: #FFFFFF;
    --cpt-on-dark-soft: rgba(255, 255, 255, .78);
    --cpt-on-dark-line: rgba(255, 255, 255, .12);
    --cpt-s1: 8px;
    --cpt-s2: 16px;
    --cpt-s3: 24px;
    --cpt-s4: 32px;
    --cpt-s5: 48px;
    --cpt-s6: 64px;
    --cpt-s7: 96px;
    --cpt-gutter: 20px;
    --cpt-r-sm: 10px;
    --cpt-r-md: 16px;
    --cpt-r-lg: 24px;
    --cpt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
    --cpt-shadow-md: 0 24px 60px rgba(0, 0, 0, .12);
    --cpt-display: 'Laila', Georgia, 'Times New Roman', serif;
    --cpt-dur: .22s;
    --cpt-ease: cubic-bezier(.2, .7, .2, 1);
    --cpt-overlap: 72px;
    --cpt-max: 1280px;
    background: var(--page-bg, #F8F6F0);
}
/* Grands écrans : la fiche s'élargit par paliers au lieu de rester un couloir centré (lisibilité : 60 à 75 caractères par ligne de texte) */
@media (min-width: 1800px) { .cpt { --cpt-max: 1440px; } }
@media (min-width: 2000px) { .cpt-bento { --cpt-max: 1600px; } }
.cpt, .cpt p, .cpt li { color: var(--cpt-text); }
.cpt p { line-height: 1.65; }
/* Le thème pose 110 px sous chaque <section> : c'était l'origine des grands vides. Ici, seul le rythme du socle compte.
   :where() garde la règle à faible poids : les retraits que le socle pose lui-même (.cpt-pane, .cpt-section, héros) la battent. */
.cpt section:where(:not(.cs-section)) { padding-bottom: 0; }
/* Avis du vieux rendu (Bento, page classique) : le thème sépare deux avis par 30 px de marge et 50 px de retrait ;
   ramené à l'échelle du socle. Les avis en cartes du bloc partagé sont exclus : en grille, la marge décalerait une carte sur deux. */
.cpt .customer-review-item:not(.cs-reviews-list .customer-review-item) { margin-top: var(--cpt-s3); padding-top: var(--cpt-s3); }
.cpt .customer-review-item:first-child { margin-top: 0; padding-top: 0; }

/* ---- Rythme et largeur : deux classes, deux rôles ---- */
.cpt .cpt-container { max-width: var(--cpt-max); margin-inline: auto; padding-inline: var(--cpt-s3); }
.cpt .cpt-section { padding-block: var(--cpt-s5); }
.cpt .cpt-section + .cpt-section { padding-block-start: 0; }
/* Pas de z-index ici : il enfermerait les fenêtres des aperçus de leçons sous le voile de Bootstrap */
.cpt .cpt-lead { position: relative; margin-top: calc(-1 * var(--cpt-overlap)); }
/* La section qui commence par le bloc de tête n'a pas de retrait haut : c'est le chevauchement qui règle la distance au bandeau */
.cpt .cpt-section:has(.cpt-lead) { padding-block-start: 0; }
.cpt.cpt-has-above .cpt-lead { margin-top: 0; }
.cpt.cpt-has-above { padding-top: var(--cpt-s4); }

/* ---- Typographie ---- */
.cpt .cpt-serif, .cpt .cpt-display { font-family: var(--cpt-display); font-weight: 400; }
.cpt h2.cpt-h2 { font-family: var(--cpt-display); font-size: clamp(26px, 2.3vw, 32px); line-height: 1.2; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0 0 var(--cpt-s3); color: var(--cpt-ink); }
.cpt .cpt-muted { color: var(--cpt-muted); }
/* L'or du thème sur fond clair ne tient pas le contraste 4,5:1 en petit texte : assombri d'un tiers pour les surtitres */
.cpt .cpt-tag { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--cpt-accent) 70%, #000); }
.cpt .cpt-label { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--cpt-muted); }
.cpt .cpt-promise { font-family: var(--cpt-display); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.35; font-weight: 400; color: var(--cpt-ink); }
.cpt .cpt-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--cpt-line); font-size: 13px; color: var(--cpt-ink); background: #fff; }
.cpt .cpt-chip-cta { border-color: var(--cpt-cta); color: var(--cpt-cta); }
.cpt .cpt-chips { display: flex; flex-wrap: wrap; gap: var(--cpt-s1); }
.cpt .cpt-btn-ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cpt-line); color: var(--cpt-ink); background: transparent; font-weight: 500; font-size: 15px; text-decoration: none; transition: background var(--cpt-dur) var(--cpt-ease), border-color var(--cpt-dur) var(--cpt-ease); }
.cpt .cpt-btn-ghost .iconify { font-size: 20px; color: var(--cpt-cta); }
.cpt .cpt-btn-ghost:hover, .cpt .cpt-btn-ghost:focus-visible { background: var(--cpt-soft); border-color: var(--cpt-accent); color: var(--cpt-ink); }
.cpt .cpt-btn-ghost:focus-visible { outline: 2px solid var(--cpt-cta); outline-offset: 2px; }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-btn-ghost { border-color: var(--cpt-on-dark-line); color: var(--cpt-on-dark); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-btn-ghost:hover, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-btn-ghost:focus-visible { background: rgba(255, 255, 255, .08); border-color: var(--cpt-cta); color: var(--cpt-on-dark); }

/* ---- Volets : les onglets Formateur et Avis de la page classique, réutilisés comme cartes visibles ---- */
.cpt .cpt-pane { background: #fff; border-radius: var(--cpt-r-lg); padding: var(--cpt-s4); margin-top: var(--cpt-s5); }
.cpt .cpt-section + .cpt-pane { margin-top: 0; }
.cpt .cpt-pane + .cpt-pane { margin-top: var(--cpt-s3); }
.cpt .cpt-pane .tab-pane { display: block; opacity: 1; padding: 0; }
.cpt .cpt-pane .tab-pane.fade:not(.show) { opacity: 1; }

/* Dans un volet de gabarit, la carte formateur n'a pas de cadre à elle : le volet est le cadre */
.cpt .cpt-pane .cs-people { background: transparent; border: 0; padding: 0; }
/* Le bloc d'avis vit dans course-public-page.css, avec les jetons du thème : il sert aussi le bloc « Avis »
   posé en section, y compris sur le gabarit « Aucun » qui ne charge pas cette feuille-ci.
   Ne restent ici que les ajustements propres à un gabarit. */
.cpt .cs-reviews-summary { gap: var(--cpt-s4) var(--cpt-s6); padding-bottom: var(--cpt-s4); margin-bottom: var(--cpt-s4); }
.cpt .cs-reviews-list #appendReviews { gap: var(--cpt-s3); }
.cpt .cs-reviews-list .customer-review-item { padding: var(--cpt-s3); }

/* ---- Cartes ---- */
.cpt .cpt-card { background: #fff; border-radius: var(--cpt-r-lg); padding: var(--cpt-s4); box-shadow: var(--cpt-shadow-sm); min-width: 0; }

/* ---- Visuel + bouton de lecture ---- */
.cpt .cpt-media { position: relative; border-radius: var(--cpt-r-lg); overflow: hidden; background: var(--cpt-soft); aspect-ratio: 4 / 3; }
.cpt .cpt-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpt .cpt-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: #fff; color: var(--cpt-ink); font-size: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--cpt-shadow-md); transition: transform var(--cpt-dur) var(--cpt-ease); }
.cpt .cpt-play:hover, .cpt .cpt-play:focus-visible { transform: scale(1.06); }
.cpt .cpt-play:focus-visible { outline: 3px solid var(--cpt-cta); outline-offset: 3px; }

/* ---- Points clés et « inclus » ---- */
.cpt .cpt-keypoints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--cpt-s4); }
.cpt .cpt-keypoints li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--cpt-ink); }
.cpt .cpt-keypoints .iconify { color: var(--cpt-accent); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.cpt .cpt-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--cpt-ink); }
.cpt .cpt-includes li { display: flex; align-items: center; gap: 10px; }
.cpt .cpt-includes .iconify { font-size: 18px; color: var(--cpt-accent); flex-shrink: 0; }

/* ---- Faits chiffrés ---- */
.cpt .cpt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cpt-line); border-bottom: 1px solid var(--cpt-line); }
.cpt .cpt-fact { padding: var(--cpt-s3) var(--cpt-s3); display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--cpt-line); min-width: 0; }
.cpt .cpt-fact:last-child { border-right: 0; }
.cpt .cpt-fact-value { font-family: var(--cpt-display); font-size: clamp(24px, 2vw, 30px); line-height: 1.15; color: var(--cpt-ink); overflow-wrap: anywhere; }
.cpt .cpt-fact-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cpt-muted); }
/* En carte : le trait extérieur disparaît, la carte fait le cadre */
.cpt .cpt-card .cpt-facts, .cpt .cpt-facts-card .cpt-facts { border: 0; }

/* ---- Ligne formateur ---- */
.cpt .cpt-instructor-line img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cpt .cpt-instructor-line .cpt-instructor-level { font-size: 13px; color: var(--cpt-muted); }

/* ---- Programme ---- */
.cpt .cpt-program { display: flex; flex-direction: column; gap: 10px; }
.cpt .cpt-program-section { border: 1px solid var(--cpt-line); border-radius: var(--cpt-r-md); background: #fff; overflow: hidden; }
.cpt .cpt-program-head { display: flex; align-items: center; gap: var(--cpt-s2); padding: 16px 20px; width: 100%; text-align: left; background: none; border: 0; }
.cpt .cpt-program-toggle { cursor: pointer; transition: background var(--cpt-dur) var(--cpt-ease); text-transform: none; letter-spacing: normal; font-family: inherit; line-height: inherit; }
.cpt .cpt-program-toggle:hover, .cpt .cpt-program-toggle:focus-visible { background: var(--cpt-soft); }
.cpt .cpt-program-toggle:focus-visible { outline: 2px solid var(--cpt-accent); outline-offset: -2px; }
.cpt .cpt-program-num { font-family: var(--cpt-display); font-size: 22px; color: var(--cpt-accent); min-width: 36px; line-height: 1; }
.cpt .cpt-program-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cpt .cpt-program-title strong { font-size: 16px; font-weight: 500; color: var(--cpt-ink); }
.cpt .cpt-program-meta { font-size: 13px; color: var(--cpt-muted); }
.cpt .cpt-program-chevron { font-size: 22px; color: var(--cpt-muted); transition: transform var(--cpt-dur) var(--cpt-ease); flex-shrink: 0; }
.cpt .cpt-program-toggle[aria-expanded="true"] .cpt-program-chevron { transform: rotate(180deg); }
.cpt .cpt-program-lectures { padding: 0 20px 14px 72px; }
.cpt .cpt-program-lectures .play-list-item { padding: 10px 0; border-top: 1px solid var(--cpt-line); gap: 8px 12px; }
.cpt .cpt-program-lectures .play-list-item img { width: 18px; margin-right: 10px; flex-shrink: 0; }
.cpt .cpt-program-lectures .play-list-left { min-width: 0; }
.cpt .cpt-program-lectures .play-list-left p { font-size: 15px; line-height: 1.4; }
.cpt .cpt-program-lectures .play-list-right, .cpt .cpt-program-lectures .video-time-count { flex-shrink: 0; white-space: nowrap; font-size: 13px; color: var(--cpt-muted); }
.cpt .cpt-program-lectures .edit-lecture-preview-show { margin: 8px 0 !important; gap: 8px 12px; }
.cpt .cpt-program-lectures .edit-lecture-preview-show .lecture-edit-title { font-size: 15px !important; line-height: 1.4; }
.cpt .cpt-program-lectures .edit-lecture-preview-show .upload-course-video-6-text { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cpt .cpt-program-lectures .see-preview-video { font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cpt-cta); }
/* Colonne étroite (page classique à deux colonnes) : la durée passe sous le titre au lieu de l'écraser */
.cpt-classic .cpt-twin .play-list-item, .cpt-classic .cpt-twin .edit-lecture-preview-show { flex-wrap: wrap; }
.cpt-classic .cpt-twin .play-list-right, .cpt-classic .cpt-twin .upload-course-video-6-text { flex-basis: 100%; padding-left: 28px; }
.cpt .cpt-program-lectures .video-time-count .iconify { margin-right: 8px !important; }

/* ---- Panneau d'achat repris de la page classique, en carte ---- */
.cpt .cpt-purchase .course-info-box { background: #fff; border-radius: var(--cpt-r-lg); padding: var(--cpt-s3); box-shadow: var(--cpt-shadow-md); }
.cpt .cpt-purchase.cpt-sticky { position: sticky; top: 150px; }
/* Lien publicitaire : pas de menu du site au-dessus, ce qui colle en défilant monte en haut de l'écran. */
.no-site-menu .cpt .cpt-purchase.cpt-sticky { top: var(--cpt-s3); }
.cpt .cpt-purchase .video-area-left img { border-radius: var(--cpt-r-md); }
/* La carte reste claire dans les gabarits sombres : ses textes gardent la couleur d'encre, quoi que dise la règle « sur fond sombre » */
.cpt .cpt-purchase .course-info-box, .cpt .cpt-purchase .course-info-box p, .cpt .cpt-purchase .course-info-box li, .cpt .cpt-purchase .course-info-box h4, .cpt .cpt-purchase .course-info-box h6, .cpt .cpt-purchase .course-info-box span { color: var(--cpt-ink); }
.cpt .cpt-purchase .course-info-box .color-gray { color: var(--cpt-muted); }

/* ---- Tarifs (grille partagée avec la page classique) ---- */
.cpt .cpt-pricing .cpt-h2 { margin-bottom: var(--cpt-s3); }
.cpt .pricing-plans-content > .row { margin-top: 0; }
/* Encart d'indisponibilité, panier, déjà inscrit : une note posée, pas une alerte système */
.cpt .pricing-plans-content > .alert { margin: 0; padding: var(--cpt-s3) var(--cpt-s4); border: 1px solid var(--cpt-line); border-left: 4px solid var(--cpt-cta); border-radius: var(--cpt-r-md); background: #fff; color: var(--cpt-ink); font-size: 15px; line-height: 1.55; box-shadow: var(--cpt-shadow-sm); }
.cpt .pricing-plans-content > .alert .theme-btn { flex-shrink: 0; }

/* Bouton « Indisponible » du panneau : le jaune système de Bootstrap tranchait avec le thème */
.course-info-box .theme-btn.bg-warning { background: color-mix(in srgb, var(--custom-btn-color, var(--theme-color)) 14%, #fff) !important; color: var(--heading-color) !important; border: 1px solid color-mix(in srgb, var(--custom-btn-color, var(--theme-color)) 40%, transparent); }

/* ---- Bandeau final : dégradé du thème, comme le bandeau du haut ---- */
.cpt .cpt-final { margin-top: var(--cpt-s5); border-radius: var(--cpt-r-lg); padding: var(--cpt-s4) var(--cpt-s5); display: flex; align-items: center; justify-content: space-between; gap: var(--cpt-s3); color: var(--cpt-on-dark); }
/* Queue de page : le dernier bloc garde sa distance au pied de page dans le fond du gabarit, pas en marge qui s'échappe */
.cpt .cpt-tail { padding-block-end: var(--cpt-s5); }
.cpt .cpt-section + .cpt-final, .cpt .course-marketing-block + .cpt-final { margin-top: 0; }
.cpt .cpt-final h3 { font-family: var(--cpt-display); color: var(--cpt-on-dark); margin: 0; font-size: 26px; font-weight: 400; text-transform: none; }
.cpt .cpt-final p { color: var(--cpt-on-dark-soft); margin: 6px 0 0; }
.cpt .cpt-final .theme-btn { white-space: nowrap; }

/* ---- Sections sombres (fond de barre du thème) : texte clair. La classe cpt-on-dark peut être sur la racine .cpt
   (Cinéma, Aperçu) ou sur une carte à l'intérieur (Bento) : le sélecteur couvre les deux cas. ---- */
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark), :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) p, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) li, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-promise, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-fact-value, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-keypoints li, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-includes li, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-title strong, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) h2.cpt-h2 { color: var(--cpt-on-dark); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-fact-label, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-meta, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-muted, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-chevron, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-instructor-level, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-label { color: var(--cpt-on-dark-soft); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-tag { color: var(--cpt-cta); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-chip { background: transparent; border-color: var(--cpt-on-dark-line); color: var(--cpt-on-dark); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-facts, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-fact { border-color: var(--cpt-on-dark-line); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-section { background: rgba(255, 255, 255, .04); border-color: var(--cpt-on-dark-line); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-toggle:hover, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-toggle:focus-visible { background: rgba(255, 255, 255, .06); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-num { color: var(--cpt-cta); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-lectures .play-list-item { border-color: var(--cpt-on-dark-line); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-lectures .play-list-item p, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-lectures .video-time-count, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-program-lectures .edit-lecture-preview-show, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-instructor-line { color: var(--cpt-on-dark) !important; }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-keypoints .iconify, :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-includes .iconify { color: var(--cpt-cta); }
:is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-pricing .cpt-h2 { color: var(--cpt-on-dark); }

/* ============================== Classique (page par défaut) ============================== */
/* Bandeau du site, puis une carte claire qui mord sur le bandeau : vue d'ensemble et programme côte à côte,
   tarifs, formateur, avis, tout visible en défilant. Une barre d'ancres remplace les onglets. */
.cpt-classic .cpt-main { background: #fff; border-radius: var(--cpt-r-lg); box-shadow: var(--cpt-shadow-sm); padding: 0 var(--cpt-s5) var(--cpt-s5); }
.cpt-classic .cpt-anchors { position: sticky; top: 130px; z-index: 3; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--cpt-s5)) var(--cpt-s3); padding: var(--cpt-s2) var(--cpt-s5); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--cpt-line); border-radius: var(--cpt-r-lg) var(--cpt-r-lg) 0 0; }
.cpt-classic .cpt-anchors::-webkit-scrollbar { display: none; }
.cpt-classic .cpt-anchors a { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--cpt-text); text-decoration: none; transition: background var(--cpt-dur) var(--cpt-ease), color var(--cpt-dur) var(--cpt-ease); }
.cpt-classic .cpt-anchors a:hover, .cpt-classic .cpt-anchors a:focus-visible { background: var(--cpt-soft); color: var(--cpt-ink); }
.cpt-classic .cpt-anchors a.is-active { background: var(--cpt-ink); color: #fff; }
.cpt-classic [id^="cpt-"] { scroll-margin-top: 200px; }
.no-site-menu .cpt-classic .cpt-anchors { top: 0; }
.no-site-menu .cpt-classic [id^="cpt-"] { scroll-margin-top: 90px; }
.cpt-classic .cpt-block + .cpt-block { margin-top: var(--cpt-s4); padding-top: var(--cpt-s4); border-top: 1px solid var(--cpt-line); }
.cpt-classic .cpt-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cpt-s3); }
.cpt-classic .cpt-twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cpt-s4); align-items: start; }

.cpt-classic .cpt-twin .cpt-keypoints { grid-template-columns: 1fr; }
.cpt-classic .cpt-program-lectures { padding-left: 20px; }
/* Formateur et avis sont des blocs de la carte, pas des cartes dans la carte */
.cpt-classic .cpt-pane { padding: 0; background: transparent; border-radius: 0; }
.cpt-classic .cpt-purchase .course-info-box { box-shadow: var(--cpt-shadow-sm); }

/* ============================== Cinéma ============================== */
.cpt-cinema { background: var(--cpt-dark); }
.cpt-cinema .cpt-hero { padding-block: var(--cpt-s5) var(--cpt-s6); }
.cpt-cinema .cpt-hero .cpt-promise { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25; }
.cpt-cinema .cpt-media { box-shadow: 0 40px 120px rgba(0, 0, 0, .5); aspect-ratio: 16 / 10; }
.cpt-cinema .cpt-facts { margin-bottom: var(--cpt-s5); }
.cpt-cinema .cpt-fact-value { font-size: clamp(28px, 2.4vw, 36px); }
/* Blocs de la page de présentation posés dans un gabarit sombre : titres clairs, cartes blanches inchangées */
.cpt.cpt-on-dark .cs-section-title { color: var(--cpt-on-dark); }
.cpt.cpt-on-dark .cs-section { padding-block: var(--cpt-s5); }
/* Titres des blocs : ceux du gabarit, pas les 45 px que la typographie du site impose aux h2. La page classique garde les siens. */
.cpt:not(.cpt-classic) h2.cs-section-title { font-family: var(--cpt-display); font-size: clamp(26px, 2.3vw, 32px); font-weight: 400; line-height: 1.2; text-transform: none; letter-spacing: 0; margin-bottom: var(--cpt-s3); }
/* Blocs posés au-dessus : dans la scène sombre, entre le bandeau et le héros, plutôt qu'en bande claire entre deux aplats sombres */
.cpt-cinema .cpt-above { padding-top: var(--cpt-s2); }
.cpt-cinema .cpt-above + .cpt-hero { padding-top: 0; }
/* Gabarits sombres (Cinéma, Aperçu) : volets, carte formateur et bloc d'avis en verre sombre plutôt qu'en îlots blancs,
   pour que la scène reste sombre jusqu'au bout et que le panneau d'achat soit la seule carte claire.
   Portées par .cpt-on-dark et non par un nom de gabarit : le bloc d'avis peut aussi être posé en section, hors volet. */
.cpt.cpt-on-dark .cpt-pane { background: rgba(255, 255, 255, .05); border: 1px solid var(--cpt-on-dark-line); }
.cpt.cpt-on-dark .cpt-pane h2.cpt-h2, .cpt.cpt-on-dark .cpt-pane p, .cpt.cpt-on-dark .cpt-pane li, .cpt.cpt-on-dark .cpt-pane h6 { color: var(--cpt-on-dark); }
.cpt.cpt-on-dark .cs-person .cs-person-name, .cpt.cpt-on-dark .cs-person-facts b, .cpt.cpt-on-dark .cs-person-link, .cpt.cpt-on-dark .cs-reviews-score b, .cpt.cpt-on-dark .cs-reviews-bar-label { color: var(--cpt-on-dark); }
.cpt.cpt-on-dark .cs-person-title, .cpt.cpt-on-dark .cs-person-bio, .cpt.cpt-on-dark .cs-person-facts, .cpt.cpt-on-dark .cs-reviews-score small, .cpt.cpt-on-dark .cs-reviews-bars li, .cpt.cpt-on-dark .customer-review-item p { color: var(--cpt-on-dark-soft); }
.cpt.cpt-on-dark .cs-reviews-list .customer-review-item h6 { color: var(--cpt-on-dark); }
.cpt.cpt-on-dark .cs-person-link:hover, .cpt.cpt-on-dark .cs-person-link:focus-visible { color: var(--cpt-cta); }
.cpt.cpt-on-dark .cs-person-facts .iconify, .cpt.cpt-on-dark .cs-person-initials { color: var(--cpt-cta); }
.cpt.cpt-on-dark .cs-person-photo { background: rgba(255, 255, 255, .1); }
/* Sur fond sombre, l'or ne tient que 3,2:1 en petit texte : le niveau s'écrit en clair, l'or reste en liseré */
.cpt.cpt-on-dark .cs-person-level { color: var(--cpt-on-dark); background: rgba(255, 255, 255, .1); border: 1px solid color-mix(in srgb, var(--cpt-cta) 55%, transparent); }
.cpt.cpt-on-dark .cs-person + .cs-person, .cpt.cpt-on-dark .cs-reviews-summary { border-color: var(--cpt-on-dark-line); }
.cpt.cpt-on-dark .cs-reviews-bar { background: rgba(255, 255, 255, .14); }
.cpt.cpt-on-dark .customer-review-item { background: rgba(255, 255, 255, .06); border-color: var(--cpt-on-dark-line); }
.cpt.cpt-on-dark .customer-review-item p:last-child { color: var(--cpt-on-dark); }
.cpt.cpt-on-dark .rating-list li { color: rgba(255, 255, 255, .25); }
.cpt.cpt-on-dark .cs-reviews-more { color: var(--cpt-on-dark); border-color: var(--cpt-on-dark-line); }
.cpt.cpt-on-dark .cs-reviews-more:hover, .cpt.cpt-on-dark .cs-reviews-more:focus-visible { background: rgba(255, 255, 255, .08); border-color: var(--cpt-cta); }
/* Blocs posés sous la fiche : la carte formateur prend le même verre, et les blocs libres les mêmes coins que les volets */
.cpt.cpt-on-dark .cs-section .cs-people { background: rgba(255, 255, 255, .05); border: 1px solid var(--cpt-on-dark-line); }
.cpt.cpt-on-dark .cs-section-free-block iframe { border-radius: var(--cpt-r-lg); }
/* Les blocs suivent la largeur du gabarit : au-dessus, leur conteneur Bootstrap s'aligne sur .cpt-container ; en dessous, ils y sont déjà */
.cpt-cinema .cpt-above .cs-section > .container { max-width: var(--cpt-max); padding-inline: var(--cpt-s3); }
.cpt-cinema .cpt-container .cs-section > .container { max-width: none; padding-inline: 0; }

/* ============================== Bento ============================== */
.cpt-bento { background: var(--cpt-soft); }
.cpt-bento .cpt-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cpt-gutter); }
.cpt-bento .cpt-card { display: flex; flex-direction: column; gap: 10px; }
/* Les cartes qui portent gradient-bg gardent le dégradé du thème malgré le fond blanc des cartes */
.cpt-bento .cpt-card.gradient-bg { background: var(--gradient-banner-bg); background-blend-mode: overlay, normal, overlay, color-burn, screen, overlay, difference, difference, normal; }
.cpt-bento .cpt-card-hero { grid-column: span 8; padding: var(--cpt-s5); justify-content: space-between; min-height: 300px; border: 1px solid rgba(255, 255, 255, .14); }
.cpt-bento .cpt-card-hero .cpt-promise { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; }
.cpt-bento .cpt-card-buy { grid-column: span 4; padding: 0; box-shadow: none; background: transparent; }
.cpt-bento .cpt-card-buy .video-area-left, .cpt-bento .cpt-card-buy .course-includes-box:not(.course-includes-box-top) { display: none !important; }
.cpt-bento .cpt-card-buy .course-info-box { height: 100%; box-shadow: var(--cpt-shadow-sm); }
/* --cpt-span est posé par le gabarit selon le nombre de tuiles renseignées (4 → 3 colonnes, 3 → 4, 2 → 6) */
.cpt-bento .cpt-card-stat { grid-column: span var(--cpt-span, 3); padding: var(--cpt-s3) var(--cpt-s4); justify-content: center; }
.cpt-bento .cpt-card-media { grid-column: span 5; padding: 0; overflow: hidden; min-height: 280px; }
.cpt-bento .cpt-card-media .cpt-media { border-radius: 0; height: 100%; aspect-ratio: auto; }
.cpt-bento .cpt-card-program { grid-column: span 7; }
.cpt-bento .cpt-card-learn { grid-column: span 6; }
.cpt-bento .cpt-card-dark { grid-column: span 6; }
.cpt-bento .cpt-card-wide { grid-column: span 12; padding: var(--cpt-s5); gap: var(--cpt-s5); }
.cpt-bento .cpt-card-wide .cpt-pane { padding: 0; margin: 0; border-radius: 0; }
.cpt-bento .cpt-big { font-family: var(--cpt-display); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; color: var(--cpt-ink); overflow-wrap: anywhere; }
/* Programme en puces : une puce par section, la section choisie montre ses leçons ; pas d'accordéon ici, le Bento a son propre geste */
.cpt-bento .cpt-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--cpt-s2); padding: 0; list-style: none; }
.cpt-bento .cpt-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cpt-line); background: #fff; color: var(--cpt-ink); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: normal; line-height: 1.2; cursor: pointer; transition: background var(--cpt-dur) var(--cpt-ease), border-color var(--cpt-dur) var(--cpt-ease); }
.cpt-bento .cpt-pill .cpt-pill-num { font-family: var(--cpt-display); color: var(--cpt-accent); }
.cpt-bento .cpt-pill:hover, .cpt-bento .cpt-pill:focus-visible { border-color: var(--cpt-accent); background: var(--cpt-soft); }
.cpt-bento .cpt-pill:focus-visible { outline: 2px solid var(--cpt-cta); outline-offset: 2px; }
.cpt-bento .cpt-pill.active { background: var(--cpt-ink); border-color: var(--cpt-ink); color: #fff; }
.cpt-bento .cpt-pill.active .cpt-pill-num { color: var(--cpt-cta); }
.cpt-bento .cpt-pill-pane { background: var(--cpt-soft); border-radius: var(--cpt-r-md); padding: var(--cpt-s2) var(--cpt-s3); }
.cpt-bento .cpt-pill-pane .cpt-program-title strong { font-size: 17px; }
.cpt-bento .cpt-pill-pane .cpt-program-meta { display: block; margin-top: 2px; }
.cpt-bento .cpt-pill-pane .cpt-program-lectures { padding: 4px 0 0; }
.cpt-bento .cpt-pill-pane .play-list-item:first-child { border-top: 0; }
.cpt-bento .cpt-pill-pane .cpt-empty { margin: 0; color: var(--cpt-muted); font-size: 14px; }
.cpt-bento .cpt-pricing { margin-top: var(--cpt-s6); }

/* ============================== Chemin ============================== */
/* Une seule colonne centrée, comme un récit : carte d'introduction qui mord sur le bandeau, texte, points clés,
   itinéraire, puis le bloc d'arrivée qui porte le panneau d'achat. Pas de colonne latérale : c'est ce qui le distingue. */
.cpt-chemin .cpt-intro, .cpt-chemin .cpt-narrative { max-width: 920px; margin-inline: auto; }
.cpt-chemin .cpt-intro { text-align: center; }
.cpt-chemin .cpt-intro .cpt-card { padding: var(--cpt-s4) var(--cpt-s4) var(--cpt-s2); }
.cpt-chemin .cpt-intro .cpt-promise { max-width: 720px; margin: var(--cpt-s2) auto var(--cpt-s4); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; }
.cpt-chemin .cpt-intro .cpt-facts { margin: 0 calc(-1 * var(--cpt-s4)); border-bottom: 0; }
.cpt-chemin .cpt-intro .cpt-fact { align-items: center; }
.cpt-chemin .cpt-narrative { padding-top: var(--cpt-s5); }
.cpt-chemin .cpt-overview { max-width: 720px; margin: 0 auto var(--cpt-s5); text-align: center; }
.cpt-chemin .cpt-overview p { font-size: 17px; }
.cpt-chemin .cpt-learn { margin-bottom: var(--cpt-s5); }
.cpt-chemin .cpt-timeline { position: relative; display: flex; flex-direction: column; gap: var(--cpt-s3); }
.cpt-chemin .cpt-timeline::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--cpt-accent), var(--cpt-cta)); }
.cpt-chemin .cpt-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--cpt-s3); position: relative; }
.cpt-chemin .cpt-step-dot { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--cpt-accent); display: flex; align-items: center; justify-content: center; font-family: var(--cpt-display); font-size: 18px; color: var(--cpt-accent); z-index: 1; }
.cpt-chemin .cpt-step:last-child .cpt-step-dot { border-color: var(--cpt-cta); color: var(--cpt-cta); }
.cpt-chemin .cpt-step-box { background: #fff; border: 1px solid var(--cpt-line); border-radius: var(--cpt-r-md); padding: var(--cpt-s3) var(--cpt-s4); }
.cpt-chemin .cpt-step:last-child .cpt-step-box { border-color: var(--cpt-cta); }
.cpt-chemin .cpt-step-box h3 { font-family: var(--cpt-display); font-size: 21px; font-weight: 400; line-height: 1.3; text-transform: none; letter-spacing: 0; margin: 6px 0 4px; color: var(--cpt-ink); }
.cpt-chemin .cpt-step-box .cpt-program-lectures { padding: 8px 0 0; }
.cpt-chemin .cpt-step-toggle { text-transform: none; letter-spacing: normal; font-family: inherit; line-height: inherit; display: flex; align-items: center; justify-content: space-between; gap: var(--cpt-s3); width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.cpt-chemin .cpt-step-toggle:focus-visible { outline: 2px solid var(--cpt-accent); outline-offset: 6px; border-radius: 8px; }
.cpt-chemin .cpt-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpt-chemin .cpt-step-count { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--cpt-soft); border: 1px solid var(--cpt-line); color: var(--cpt-ink); font-size: 14px; white-space: nowrap; flex-shrink: 0; transition: background var(--cpt-dur) var(--cpt-ease), border-color var(--cpt-dur) var(--cpt-ease); }
.cpt-chemin .cpt-step-count-num { font-weight: 700; font-size: 17px; color: var(--cpt-accent); }
.cpt-chemin .cpt-step-count .iconify { font-size: 18px; color: var(--cpt-muted); transition: transform var(--cpt-dur) var(--cpt-ease); }
.cpt-chemin .cpt-step-toggle[aria-expanded="true"] .cpt-step-count .iconify { transform: rotate(180deg); }
.cpt-chemin .cpt-step-toggle:hover .cpt-step-count { border-color: var(--cpt-accent); background: #fff; }
/* Invitation à ouvrir : trois battements à l'arrivée, puis immobile ; rien sous prefers-reduced-motion */
.cpt-chemin .cpt-invite { animation: cpt-invite 1.6s ease-in-out 3; animation-delay: .6s; }
@keyframes cpt-invite {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    50%      { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
}
.cpt-chemin .cpt-step-toggle[aria-expanded="true"] .cpt-invite { animation: none; }
/* Arrivée : le dégradé du thème à gauche, le panneau d'achat à droite, un seul bloc au bout du chemin */
.cpt-chemin .cpt-arrival { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--cpt-s4); align-items: center; margin-top: var(--cpt-s5); padding: var(--cpt-s4); border-radius: var(--cpt-r-lg); color: var(--cpt-on-dark); }
.cpt-chemin .cpt-arrival h3 { font-family: var(--cpt-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; text-transform: none; color: var(--cpt-on-dark); margin: 0 0 var(--cpt-s2); }
.cpt-chemin .cpt-arrival p { color: var(--cpt-on-dark-soft); margin: 0; }
.cpt-chemin .cpt-arrival .cpt-arrival-lead { font-size: 17px; line-height: 1.55; margin-bottom: var(--cpt-s3); }
.cpt-chemin .cpt-arrival .cpt-includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--cpt-s3); margin-bottom: var(--cpt-s3); }
.cpt-chemin .cpt-arrival .cpt-instructor-line { padding-top: var(--cpt-s3); border-top: 1px solid var(--cpt-on-dark-line); }
.cpt-chemin .cpt-arrival .cpt-purchase .course-info-box { box-shadow: none; }
.cpt-chemin .cpt-arrival .cpt-purchase .video-area-left, .cpt-chemin .cpt-arrival .cpt-purchase .course-includes-box:not(.course-includes-box-top) { display: none !important; }
.cpt-chemin .cpt-pane { margin-top: var(--cpt-s5); }

/* ============================== Preuve sociale ============================== */
.cpt-preuve { background: #fff; }
.cpt-preuve .cpt-trust { background: #fff; border: 1px solid var(--cpt-line); border-radius: 999px; box-shadow: var(--cpt-shadow-sm); padding: 14px var(--cpt-s4); }
.cpt-preuve .cpt-trust-list { display: flex; justify-content: center; align-items: center; gap: var(--cpt-s4); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.cpt-preuve .cpt-trust-list li { display: inline-flex; align-items: center; gap: 6px; color: var(--cpt-ink); }
.cpt-preuve .cpt-trust-list .iconify { color: var(--cpt-accent); font-size: 18px; }
.cpt-preuve .cpt-trust-list .cpt-star { color: var(--color-yellow, #FFC014); }
.cpt-preuve .cpt-hero { padding-block: var(--cpt-s5) 0; }
.cpt-preuve .cpt-hero .cpt-promise { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; }
.cpt-preuve .cpt-stars { display: flex; gap: 3px; color: var(--color-yellow, #FFC014); font-size: 20px; align-items: center; }
.cpt-preuve .cpt-avatars { display: flex; }
.cpt-preuve .cpt-avatars span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; background: var(--cpt-accent); display: inline-block; }
.cpt-preuve .cpt-avatars span:first-child { margin-left: 0; }
.cpt-preuve .cpt-avatars span:nth-child(2) { background: var(--cpt-cta); }
.cpt-preuve .cpt-avatars span:nth-child(3) { background: var(--cpt-dark); }
.cpt-preuve .cpt-kpis { margin-top: var(--cpt-s6); padding: var(--cpt-s3) var(--cpt-s4); border: 1px solid var(--cpt-line); border-radius: var(--cpt-r-md); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--cpt-s3); }
.cpt-preuve .cpt-kpi b { display: block; font-family: var(--cpt-display); font-size: clamp(26px, 2.2vw, 32px); font-weight: 400; line-height: 1.1; color: var(--cpt-ink); }
.cpt-preuve .cpt-kpi span { font-size: 13px; color: var(--cpt-muted); }
.cpt-preuve .cpt-media { aspect-ratio: 5 / 4; }
.cpt-preuve .cpt-pane { background: var(--cpt-soft); }
/* Sur le volet sable, les cartes d'avis restent blanches */
.cpt-preuve .cs-reviews-list .customer-review-item { background: #fff; }

/* ============================== Aperçu ============================== */
.cpt-apercu { background: var(--cpt-dark); --cpt-overlap: 0px; }
.cpt-apercu .cpt-stage { display: grid; grid-template-columns: minmax(0, 1fr) 400px; border-bottom: 1px solid var(--cpt-on-dark-line); }
.cpt-apercu .cpt-stage-main { padding: 0 var(--cpt-s4) var(--cpt-s4) 0; }
.cpt-apercu .cpt-media { aspect-ratio: 16 / 9; border-radius: var(--cpt-r-md); }
.cpt-apercu .cpt-stage-side { border-left: 1px solid var(--cpt-on-dark-line); display: flex; flex-direction: column; }
.cpt-apercu .cpt-side-head { padding: 20px 16px; border-bottom: 1px solid var(--cpt-on-dark-line); display: flex; justify-content: space-between; align-items: center; }
.cpt-apercu .cpt-side-list { padding: 8px; overflow-y: auto; max-height: 640px; }
.cpt-apercu .cpt-program-section { background: transparent; border: 0; }
.cpt-apercu .cpt-program-head { padding: 14px 12px 6px; }
.cpt-apercu .cpt-program-num { display: none; }
.cpt-apercu .cpt-program-title strong { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.cpt-apercu .cpt-program-lectures { padding: 0 8px; }
.cpt-apercu .cpt-program-lectures .play-list-item { border: 0; border-radius: var(--cpt-r-sm); padding: 12px; }
.cpt-apercu .cpt-program-lectures .edit-lecture-preview-show { background: rgba(255, 255, 255, .08); border: 1px solid var(--cpt-cta); border-radius: var(--cpt-r-sm); padding: 12px; }
/* Pied de colonne : le prix et les boutons posés sur le fond sombre, sans carte blanche autour (une carte pour un seul bouton faisait un grand vide) */
.cpt-apercu .cpt-side-foot { margin-top: auto; padding: var(--cpt-s3) 16px; border-top: 1px solid var(--cpt-on-dark-line); }
/* !important : le partial porte bg-white (utilitaire Bootstrap) et le thème force padding-bottom: 50px */
.cpt-apercu .cpt-side-foot .course-info-box { padding: 0 !important; background-color: transparent !important; box-shadow: none; border-radius: 0; }
.cpt-apercu .cpt-side-foot .video-area-left, .cpt-apercu .cpt-side-foot .course-includes-box-top, .cpt-apercu .cpt-side-foot .course-includes-box { display: none !important; }
.cpt-apercu .cpt-side-foot .course-price-box { margin-top: 0 !important; }
.cpt-apercu .cpt-side-foot .course-info-box, .cpt-apercu .cpt-side-foot .course-info-box h4, .cpt-apercu .cpt-side-foot .course-info-box span { color: var(--cpt-on-dark); }
.cpt-apercu .cpt-side-foot .course-info-box .color-gray { color: var(--cpt-on-dark-soft); }
.cpt-apercu .cpt-side-foot .course-info-box-wishlist-btns { margin-bottom: 0 !important; }
.cpt-apercu .cpt-side-foot .course-info-box-wishlist-btns .theme-btn { border-color: var(--cpt-on-dark-line); color: var(--cpt-on-dark) !important; background: transparent; }
.cpt-apercu .cpt-side-foot .course-info-box-wishlist-btns .theme-btn:hover { background: rgba(255, 255, 255, .08); }
.cpt-apercu .cpt-side-foot .course-see-pricing { background: transparent; color: var(--cpt-on-dark) !important; border-color: var(--cpt-cta); }
.cpt-apercu .cpt-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cpt-s5); }
.cpt-apercu .cpt-pane { padding: var(--cpt-s4); }
.cpt-cinema.cpt-has-above, .cpt-apercu.cpt-has-above { padding-top: 0; }

/* ============================== Responsive ============================== */
@media (max-width: 1199px) {
    .cpt-bento .cpt-card-hero, .cpt-bento .cpt-card-buy, .cpt-bento .cpt-card-media, .cpt-bento .cpt-card-program, .cpt-bento .cpt-card-learn, .cpt-bento .cpt-card-dark { grid-column: span 12; }
    .cpt-bento .cpt-card-stat { grid-column: span 6; }
    .cpt-apercu .cpt-stage { grid-template-columns: 1fr; }
    .cpt-apercu .cpt-stage-main { padding: var(--cpt-s3) 0; }
    .cpt-apercu .cpt-stage-side { border-left: 0; border-top: 1px solid var(--cpt-on-dark-line); }
}
@media (max-width: 991px) {
    .cpt { --cpt-overlap: 48px; }
    .cpt .cpt-section { padding-block: var(--cpt-s4); }
    .cpt .cpt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cpt .cpt-fact:nth-child(2) { border-right: 0; }
    .cpt .cpt-fact:nth-child(-n+2) { border-bottom: 1px solid var(--cpt-line); }
    .cpt .cpt-keypoints { grid-template-columns: 1fr; }
    .cpt .cpt-purchase.cpt-sticky { position: static; }
    .cpt .cpt-final { flex-direction: column; align-items: flex-start; padding: var(--cpt-s4); }
    .cpt-classic .cpt-anchors { top: 72px; }
    .cpt-classic .cpt-twin { grid-template-columns: 1fr; }
    .cpt-classic .cpt-main { padding: 0 var(--cpt-s3) var(--cpt-s4); }
    .cpt-classic .cpt-anchors { margin: 0 calc(-1 * var(--cpt-s3)) var(--cpt-s3); padding: var(--cpt-s2) var(--cpt-s3); }
    .cpt-chemin .cpt-intro .cpt-facts { margin: 0; }
    .cpt-chemin .cpt-arrival { grid-template-columns: 1fr; }
    .cpt-chemin .cpt-arrival .cpt-includes { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
}
@media (max-width: 575px) {
    .cpt { --cpt-overlap: 40px; --cpt-gutter: 12px; }
    /* Les rangées Bootstrap débordent du conteneur quand leur gouttière dépasse son retrait : gouttière ramenée au retrait */
    .cpt .row { --bs-gutter-x: var(--cpt-s3); }
    .cpt .cpt-section { padding-block: var(--cpt-s4); }
    .cpt .cpt-card { padding: var(--cpt-s3); border-radius: var(--cpt-r-md); }
    .cpt .cpt-program-lectures { padding-left: 20px; }
    .cpt .cpt-purchase .course-info-box { padding: var(--cpt-s2); }
    .cpt .pricing-plans-content > .alert { padding: var(--cpt-s2) var(--cpt-s3); }
    .cpt .cpt-final { padding: var(--cpt-s3); }
    .cpt-cinema .cpt-hero { padding-block: var(--cpt-s4) var(--cpt-s5); }
    .cpt-chemin .cpt-step { grid-template-columns: 40px minmax(0, 1fr); gap: var(--cpt-s2); }
    .cpt-chemin .cpt-step-dot { width: 40px; height: 40px; font-size: 16px; }
    .cpt-chemin .cpt-timeline::before { left: 19px; }
    .cpt-chemin .cpt-step-box { padding: var(--cpt-s2) var(--cpt-s3); }
    .cpt-chemin .cpt-step-toggle { flex-wrap: wrap; }
    .cpt-bento .cpt-card-hero { padding: var(--cpt-s3); min-height: 0; }
    /* Deux tuiles par rangée : valeurs plus petites pour qu'« Intermédiaire » tienne sans se couper */
    .cpt-bento .cpt-card-stat { padding: var(--cpt-s2); }
    .cpt-bento .cpt-big, .cpt .cpt-fact-value { font-size: 20px; }
    .cpt .cpt-fact { padding: var(--cpt-s2); }
    .cpt-classic .cpt-anchors { mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); }
    .cpt-bento .cpt-card-wide { padding: var(--cpt-s3); }
    .cpt-preuve .cpt-trust { border-radius: var(--cpt-r-md); padding: 12px var(--cpt-s2); }
    .cpt-preuve .cpt-trust-list { gap: 10px var(--cpt-s2); }
    :is(.cpt.cpt-on-dark, .cpt .cpt-on-dark) .cpt-pane { padding: var(--cpt-s3); }
}
@media (prefers-reduced-motion: reduce) {
    .cpt .cpt-play, .cpt .cpt-program-chevron, .cpt .cpt-program-toggle, .cpt-chemin .cpt-step-count, .cpt-classic .cpt-anchors a { transition: none; }
    .cpt-chemin .cpt-invite { animation: none; }
}