/* Fiche publique d'une formation : compléments communs à la page classique et aux gabarits.
   Chargé par frontend/course/partial/partial-details-assets.blade.php. */

/* Leçon verrouillée : un titre, pas un lien */
.play-list-item-locked { cursor: default; }
.play-list-item-locked p { margin: 0; }
.curriculum-static-header { cursor: default; box-shadow: none; }
.curriculum-static-header::after { display: none; }
.curriculum-lesson-meta { white-space: nowrap; }

/* Bouton principal : pulsation légère, même sans survol (demande Bao, priorité 4).
   Bornée à 8 cycles (~22 s) puis immobile : attirer l'œil à l'arrivée, sans le solliciter en boucle. */
.course-cta-pulse { animation: course-cta-pulse 2.8s ease-in-out 8; }
@keyframes course-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    45%      { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.07); }
}
.course-cta-pulse:hover,
.course-cta-pulse:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .course-cta-pulse { animation: none; }
}

/* Bloc marketing GrapesJS sous la fiche */
.course-marketing-block { clear: both; }

/* Paiement en un clic, plans d'abonnement, onglets de mode de paiement, en-tête de la modale panier.
   Déplacés depuis course-details.blade.php pour servir aussi les gabarits. */
/* ---- One-click payment ---- */
.one-click-payment-section { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.saved-card-display { display: flex; align-items: center; padding: 16px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #dee2e6; border-radius: 10px; margin-bottom: 16px; }
.card-brand-icon { width: 55px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; color: white; font-weight: bold; font-size: 13px; margin-right: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.card-brand-icon.visa { background: linear-gradient(135deg, #1a1f71 0%, #0d47a1 100%); }
.card-brand-icon.mastercard { background: linear-gradient(135deg, #eb001b 0%, #f79e1b 100%); }
.card-brand-icon.amex { background: linear-gradient(135deg, #006fcf 0%, #00a3e0 100%); }
.card-details { flex: 1; }
.card-number { font-size: 16px; font-weight: 600; color: #2c3e50; letter-spacing: 1px; margin-bottom: 4px; }
.card-expiry { font-size: 13px; color: #6c757d; display: flex; align-items: center; gap: 4px; }
.fast-payment-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #7c5d00; padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-left: 8px; }
.one-click-btn { display: flex !important; align-items: center; justify-content: center; gap: 10px; }
.one-click-btn.loading { pointer-events: none; opacity: 0.7; }
.one-click-btn.loading::after { content: ''; width: 16px; height: 16px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spinner 0.6s linear infinite; margin-left: 10px; }
@keyframes spinner { to { transform: rotate(360deg); } }

/* ---- Subscription plans ---- */
.subscription-plan-item { transition: border-color 0.2s, background 0.2s; }
.subscription-plan-item:hover { border-color: #7c4dff !important; }

.modal-header-custom {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color) 100%);
    padding: 16px 20px;
    border-radius: 8px 8px 0 0;
}

/* ---- Payment mode tabs (paid_or_subscription) ---- */
.payment-mode-tabs .nav-link {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--theme-color);
    background: #f5f5f5;
    padding: 10px 14px;
    border: 1px solid #e8e8e8;
    transition: all 0.15s;
}
.payment-mode-tabs .nav-link.active {
    background: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color);
}

/* Bandeau d'en-tête de la fiche (image de fond ou dégradé du thème), déplacé depuis course-details.blade.php :
   il sert désormais la page classique et les gabarits. */
/* ---- Header background ---- */
.course-single-page-header { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 400px; }
.main-menu-area { position: relative; z-index: 100; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,40,30,0.7) 50%, rgba(0,0,0,0.6) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.course-single-banner-content { position: relative; z-index: 2; }
/* L'ombre décolle le texte d'une photo ; sur un aplat de dégradé elle ne fait que le troubler. */
.course-single-page-header.has-background-image .course-single-banner-content { text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
@media (max-width: 768px) {
    .course-single-page-header { background-attachment: scroll; min-height: 300px; }
    .main-menu-area { background: rgba(0,0,0,0.9); }
}

/* Sans photo, le bandeau n'a que le titre à montrer : 630 px de haut (style.css) laissent un grand vide,
   visible sur la capture du gabarit Chemin diffusée par Sébastien. On le resserre, sans toucher au
   retrait haut qui dégage le menu fixe. */
.course-single-page-header:not(.has-background-image) .section-overlay {
    min-height: 480px;
    padding-bottom: 80px;
}


/* Le titre de la fiche passe en h1 : la page n'en avait aucun alors qu'elle sert de page de vente.
   La classe .banner-title la sort du bloc de typographie du campus, qui bridait les h3 à 21 px ;
   on lui rend la casse que ce bloc appliquait, pour ne changer que le niveau et la taille. */
h1.page-banner-heading { text-transform: uppercase; }

/* Blocs de la page de présentation d'une formation, posés au-dessus et en dessous de la fiche.
   Préfixe .cs pour ne rien croiser avec les gabarits (.cpt) ni la page classique. */
.cs-section { padding: 48px 0; }
.cs-section-title { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 28px; color: var(--heading-color); }
.cs-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cs-testimonial { background: #fff; border: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); border-radius: 16px; padding: 22px 24px; margin: 0; }
.cs-testimonial blockquote { margin: 12px 0 14px; font-size: 15px; line-height: 1.55; color: var(--body-font-color); }
.cs-testimonial figcaption { font-weight: 600; font-size: 14px; color: var(--heading-color); }
.cs-stars { display: flex; gap: 3px; color: rgba(0, 0, 0, .18); font-size: 14px; }
.cs-stars .cs-star-on { color: var(--color-yellow, #f0b429); }
.cs-instructors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cs-instructor { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); border-radius: 16px; padding: 18px 20px; }
.cs-instructor img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cs-instructor-name { font-weight: 600; font-size: 15.5px; color: var(--heading-color); }
.cs-instructor-title { margin: 2px 0 0; font-size: 13px; color: var(--body-font-color); }
@media (max-width: 575.98px) {
    .cs-section { padding: 32px 0; }
    .cs-section-title { font-size: 23px; }
}

/* Bouton d'inscription dans le bandeau : l'action principale doit être lisible sans défiler. */
.course-header-cta { margin-top: 6px; }
.course-single-banner-content .course-rating { margin-top: 22px; }
/* Le menu du haut est fixe : sans ce décalage, l'ancre du bouton cale le panneau d'achat dessous. */
#cpt-buy { scroll-margin-top: 120px; }

/* Gabarit « Aucun » : le trait qui remplace la fiche ne se voit pas et ne prend pas de place */
.cs-none-rule { border: 0; height: 0; margin: 0; opacity: 0; }
.cpt-aucun .cs-section:first-child { padding-top: 32px; }
/* Sans fiche, plus de bandeau pour dégager les deux barres fixes : la page reprend leur hauteur */
.cpt-aucun-menu { padding-top: 130px; }
@media (max-width: 991.98px) {
    /* #subNav est masqué à ce palier : seul #mainNav reste fixe. */
    .cpt-aucun-menu { padding-top: 72px; }
}

/* Bloc « Fiche technique » : un bouton seul dans la page, la fiche en tuiles dans la fenêtre */
/* Un bouton seul n'est pas une section de contenu : aucune bande à lui, il se contente
   de l'espace que ses voisines lui laissent déjà. */
.cs-section-technical-sheet { padding: 0; }
.cs-tech { text-align: center; }
.cs-tech-btn { transition: transform .2s, box-shadow .2s; }
.cs-tech-btn:hover, .cs-tech-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .1); }
.cs-tech-modal .modal-dialog { max-width: 640px; }
.cs-tech-modal .modal-content { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); overflow: hidden; }
.cs-tech-modal .modal-header { align-items: flex-start; gap: 16px; padding: 24px 24px 20px; border-bottom: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); }
.cs-tech-cover { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: var(--page-bg, #F8F6F0); }
.cs-tech-heading { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cs-tech-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-color); }
.cs-tech-title { font-size: 24px; line-height: 1.25; margin: 4px 0 6px; }
.cs-tech-by { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--body-font-color); }
.cs-tech-by .iconify { font-size: 16px; }
/* Croix de fermeture : zone de 44 px, ronde, sans la marge négative de Bootstrap qui la collait au bord */
.cs-tech-modal .btn-close { width: 44px; height: 44px; margin: -8px -8px 0 0; padding: 0; border-radius: 50%; background-size: 14px; opacity: .6;
    transition: background-color .2s, opacity .2s; flex-shrink: 0; }
.cs-tech-modal .btn-close:hover, .cs-tech-modal .btn-close:focus-visible { opacity: 1; background-color: rgba(0, 0, 0, .06); }
.cs-tech-modal .modal-body { padding: 20px 24px 24px; background: #fff; }
/* Tuiles en flux plutôt qu'en grille : une rangée incomplète s'étire sur toute la largeur au lieu de laisser un trou */
.cs-tech-grid { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.cs-tech-tile { flex: 1 1 150px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--page-bg, #F8F6F0);
    border: 1px solid var(--border-color, rgba(0, 0, 0, .07)); }
.cs-tech-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #fff;
    color: var(--theme-color); font-size: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.cs-tech-value { font-size: 22px; line-height: 1.15; font-weight: 700; color: var(--heading-color); overflow-wrap: anywhere; margin-top: 4px; }
.cs-tech-label { font-size: 12.5px; color: var(--body-font-color); }
.cs-tech-lines { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; }
.cs-tech-line { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px;
    background: color-mix(in srgb, var(--theme-color) 7%, #fff); color: var(--heading-color); }
.cs-tech-line > .iconify { font-size: 24px; color: var(--theme-color); flex-shrink: 0; }
.cs-tech-line > span { display: flex; flex-direction: column; }
.cs-tech-line small { font-size: 12.5px; color: var(--body-font-color); }
.cs-tech-line strong { font-size: 15px; font-weight: 600; }
@media (max-width: 575.98px) {
    .cs-tech-modal .modal-dialog { margin: 12px; }
    .cs-tech-modal .modal-header { padding: 20px 18px 16px; }
    .cs-tech-modal .modal-body { padding: 16px 18px 20px; }
    .cs-tech-grid { gap: 10px; }
    .cs-tech-tile { flex-basis: calc(50% - 5px); }
    .cs-tech-title { font-size: 19px; }
    .cs-tech-value { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-tech-btn, .cs-tech-btn:hover { transition: none; transform: none; }
}

/* Bandeau des gabarits sombres : même aplat que leur corps, sinon le dégradé s'arrête net dessus */
.course-single-page-header.header-flat-dark { background: var(--navbar-bg-color, #030060); }

/* Bandeau de l'aperçu visiteur : posé en bas pour ne pas se battre avec les deux barres fixes du haut */
.course-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center;
    justify-content: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; font-size: 14px; font-weight: 600;
    color: #1c1c1c; background: var(--color-jaune-energie, #cda800); box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); }
.course-preview-bar a { color: #1c1c1c; font-weight: 400; text-decoration: underline; }

/* Sans bloc prix (formation gratuite ou par abonnement), la liste des faits collait à l'image :
   l'espacement était porté par les marges du bloc prix, qui ne s'affiche pas toujours. */
.course-info-box .video-area-left + .course-includes-box-top { margin-top: 30px; }

/* Le panneau d'achat remonte de 300 px pour chevaucher le bandeau du site. Avec une section
   posée au-dessus de la fiche, il chevauchait cette section : le rappel n'a plus lieu d'être. */
.course-single-details-area.has-sections-above .course-single-details-right-content,
.course-single-details-area.has-sections-above .course-single-details-left-content { margin-top: 0; }

/* Bouton de connexion flottant du gabarit « Aucun » sans entête : couleur du bouton « Se connecter » du menu,
   mais en contour, pour laisser au bouton d'inscription de la page le seul aplat plein. Posé en haut à droite,
   sous les fenêtres de Bootstrap (1050). */
.course-float-signin { position: fixed; top: 16px; right: 16px; z-index: 1040; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1;
    color: var(--heading-color); background: #fff; border: 2px solid var(--custom-btn-color, var(--theme-color));
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12); transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
/* Texte en couleur de titre : l'or du site sur blanc ne tient pas le contraste, il reste sur l'icône et le bord */
.course-float-signin .iconify { font-size: 22px; color: var(--custom-btn-color, var(--theme-color)); transition: color .2s; }
.course-float-signin:hover .iconify, .course-float-signin:focus-visible .iconify { color: #fff; }
.course-float-signin:hover, .course-float-signin:focus-visible { color: #fff; background: var(--custom-btn-color, var(--theme-color));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.course-float-signin:focus-visible { outline: 3px solid rgba(0, 0, 0, .35); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .course-float-signin { transition: none; }
    .course-float-signin:hover { transform: none; }
}
/* Sur petit écran, le bouton flottant passerait sur le titre de la première section : elle descend */
@media (max-width: 767.98px) {
    .has-float-signin .cpt-aucun .cs-section:first-child { padding-top: 84px; }
}