/* 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); }
/* Carte formateur (templates/partials/instructor-card) : partagée par le bloc « Formateurs » et les gabarits.
   Sans variable des gabarits : le gabarit « Aucun » ne charge que cette feuille. */
:root { --cs-muted-ink: color-mix(in srgb, var(--gray-color, #767588) 72%, #000); }
.cs-people { display: grid; gap: 28px; background: #fff; border: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); border-radius: 24px; padding: 28px 32px; }
.cs-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px 28px; align-items: start; }
.cs-person + .cs-person { padding-top: 28px; border-top: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); }
.cs-person-photo { display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--theme-color) 16%, #fff); }
.cs-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sans photo : les initiales, plutôt que la silhouette grise par défaut qui fait profil abandonné */
.cs-person-initials { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: 'Laila', Georgia, serif; font-size: 34px; line-height: 1; color: color-mix(in srgb, var(--theme-color) 65%, #000); }
.cs-person-body { min-width: 0; }
/* (0,2,0) : bat la typographie générée du site, qui impose 21 px, capitales et or aux h3 */
.cs-person .cs-person-name { font-size: 24px; line-height: 1.2; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0 0 4px; color: var(--heading-color); }
.cs-person .cs-person-name a { color: inherit; text-decoration: none; }
.cs-person .cs-person-name a:hover, .cs-person .cs-person-name a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.cs-person-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--body-font-color); }
.cs-person-level { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: color-mix(in srgb, var(--theme-color) 65%, #000); background: color-mix(in srgb, var(--theme-color) 14%, #fff); }
/* Trois lignes de bio suffisent ici : la suite est sur le profil */
.cs-person-bio { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--body-font-color); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-person-facts { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 16px 0 0; padding: 0; font-size: 14px; color: var(--body-font-color); }
.cs-person-facts li { display: inline-flex; align-items: center; gap: 6px; }
.cs-person-facts b { font-weight: 600; color: var(--heading-color); }
.cs-person-facts .iconify { font-size: 17px; color: color-mix(in srgb, var(--theme-color) 70%, #000); }
.cs-person-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 600; color: var(--heading-color); text-decoration: none; }
.cs-person-link .iconify { color: inherit; transition: transform .2s ease-out; }
.cs-person-link:hover, .cs-person-link:focus-visible { color: color-mix(in srgb, var(--theme-color) 65%, #000); text-decoration: underline; text-underline-offset: 3px; }
.cs-person-link:hover .iconify, .cs-person-link:focus-visible .iconify { transform: translateX(3px); }
.cs-person-link:focus-visible { outline: 2px solid var(--custom-btn-color, var(--theme-color)); outline-offset: 2px; border-radius: 4px; }
/* Au doigt, le lien de profil passe à 44 px de haut */
@media (pointer: coarse) {
    .cs-person-link { min-height: 44px; }
}
@media (max-width: 575.98px) {
    .cs-person { grid-template-columns: 1fr; }
    .cs-person-photo { width: 72px; height: 72px; }
    .cs-person-initials { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-person-link .iconify { transition: none; }
}
@media (max-width: 575.98px) {
    .cs-section { padding: 32px 0; }
    .cs-section-title { font-size: 23px; }
}

/* Bloc d'avis (templates/partials/reviews) : moyenne, répartition par note, avis en cartes.
   Partagé par les volets des gabarits et par le bloc « Avis » posé depuis l'onglet « Page publique ». */
.cs-reviews-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px 64px; align-items: center; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); }
.cs-reviews-score { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cs-reviews-score b { font-family: 'Laila', Georgia, serif; font-weight: 400; font-size: clamp(44px, 4vw, 60px); line-height: 1; color: var(--heading-color); }
.cs-reviews-score small { font-size: 14px; color: var(--cs-muted-ink); }
.cs-reviews-stars { display: inline-flex; gap: 3px; font-size: 18px; color: var(--color-yellow, #FFC014); }
.cs-reviews-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.cs-reviews-bars li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: center; gap: 12px; font-size: 13px; color: var(--cs-muted-ink); }
.cs-reviews-bar-label { display: inline-flex; align-items: center; gap: 4px; color: var(--heading-color); }
.cs-reviews-bar-label .iconify { font-size: 12px; color: var(--color-yellow, #FFC014); }
.cs-reviews-bar { display: block; height: 8px; border-radius: 999px; background: var(--border-color2, rgba(0, 0, 0, .09)); overflow: hidden; }
/* --cs-bar est posé par le partial, note par note : la seule valeur qui varie */
.cs-reviews-bar span { display: block; height: 100%; width: var(--cs-bar, 0%); border-radius: inherit; background: var(--custom-btn-color, var(--theme-color)); }
.cs-reviews-bar-count { text-align: right; font-variant-numeric: tabular-nums; }
.cs-reviews-empty { margin: 0; font-size: 15px; color: var(--cs-muted-ink); }
/* Les avis rendus par le partial commun (et rechargés par « Charger plus ») deviennent des cartes en grille */
.cs-reviews-list #appendReviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.cs-reviews-list .customer-review-item { flex-direction: column; margin: 0; padding: 24px; background: var(--light-bg, #F9F8F6); border: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); border-radius: 16px; }
.cs-reviews-list .customer-review-item > .ms-3 { margin-left: 0 !important; margin-top: 16px; min-width: 0; }
.cs-reviews-list .customer-review-item-img-wrap, .cs-reviews-list .customer-review-item-img-wrap img { width: 48px; height: 48px; object-fit: cover; }
.cs-reviews-list .customer-review-item h6 { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0 0 2px; color: var(--heading-color); }
.cs-reviews-list .customer-review-item p { font-size: 13px; margin: 0; color: var(--cs-muted-ink); }
.cs-reviews-list .customer-review-item p:last-child { font-size: 15px; line-height: 1.6; color: var(--body-font-color); overflow-wrap: anywhere; }
.cs-reviews-list .customer-review-item .rating-list { margin: 8px 0 10px; }
/* Étoile vide : le gris du thème, que la couleur de texte des gabarits écrasait en noir */
.cs-reviews-list .customer-review-item .rating-list li { margin: 0 2px 0 0; font-size: 13px; color: rgba(0, 0, 0, .15); }
.cs-reviews-list .customer-review-load-more-btn { margin-top: 24px; text-align: center; }
.cs-reviews-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-color2, rgba(0, 0, 0, .09)); background: transparent; color: var(--heading-color); font-family: inherit; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: normal; transition: background .2s ease-out, border-color .2s ease-out; }
.cs-reviews-more .iconify { font-size: 18px; color: var(--custom-btn-color, var(--theme-color)); }
.cs-reviews-more:hover, .cs-reviews-more:focus-visible { background: var(--light-bg, #F9F8F6); border-color: var(--custom-btn-color, var(--theme-color)); }
.cs-reviews-more:focus-visible { outline: 2px solid var(--custom-btn-color, var(--theme-color)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cs-reviews-more { transition: none; } }
@media (max-width: 767.98px) {
    .cs-reviews-summary { grid-template-columns: 1fr; gap: 24px; }
}

/* Bouton d'inscription dans le bandeau : l'action principale doit être lisible sans défiler. */
.course-header-cta { margin-top: 6px; }
/* « Voir les tarifs » : bouton secondaire, l'action dominante de l'écran reste celle du bandeau */
.course-see-pricing { border: 1px solid var(--custom-btn-color, var(--theme-color)); color: var(--heading-color) !important; background: #fff; }
.course-see-pricing:hover, .course-see-pricing:focus-visible { background: color-mix(in srgb, var(--custom-btn-color, var(--theme-color)) 12%, #fff); }
/* Formation indisponible : le bandeau porte le même bouton discret que le panneau, clair sur le fond sombre */
.course-header-cta-off { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35); }
.course-header-cta-off:hover, .course-header-cta-off:focus-visible { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.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; }
.no-site-menu #cpt-buy { scroll-margin-top: 24px; }

/* Page de vente importée de WordPress : bord à bord ; elle porte ses propres espaces, seul reste l'écart avec ce qui la précède */
.cs-section-full { padding-bottom: 0; }
/* Sous une fiche, le bloc sort du conteneur du gabarit ; le corps du site coupe déjà tout débordement horizontal. */
.cpt-container .cs-section-full { width: 100vw; margin-inline: calc(50% - 50vw); }

/* 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; }
.cpt-aucun .cs-section-full:first-child { padding-top: 0; }
/* 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'ajoute pas de bande entre deux blocs, qui ont déjà leur espace ; il garde
   le sien du côté où le voisin n'en apporte pas (fiche d'un gabarit, haut ou bas de page). */
.cs-section-technical-sheet { padding: 32px 0; }
.cs-section + .cs-section-technical-sheet { padding-top: 0; }
.cs-section-technical-sheet:has(+ .cs-section) { padding-bottom: 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; }

/* 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; }
}