/* * FormationPro — Styles publics * * Les variables CSS --fp-* sont injectées dynamiquement dans * par FP_Design_Manager::inject_css_variables() (priorité 5). * * Ce fichier NE redéfinit PAS les variables :root — il les utilise seulement. * Les valeurs ci-dessous sont des fallbacks CSS natifs via var(--fp-x, fallback). */ /* ── Boutons ──────────────────────────────────────────────────────────── */ .fp-btn { display: inline-block; padding: 10px 22px; border-radius: var(--fp-btn-radius, 8px); font-weight: var(--fp-btn-font-weight, 600); font-size: var(--fp-btn-font-size, 15px); text-decoration: none; cursor: pointer; border: none; transition: background .15s, opacity .15s; line-height: 1.3; } .fp-btn--primary { background: var(--fp-color-primary, #1d4ed8); color: #fff; } .fp-btn--primary:hover { background: var(--fp-color-primary-hover, #1e40af); color: #fff; } .fp-btn--secondary { background: var(--fp-color-secondary, #f9fafb); color: var(--fp-color-text, #111827); border: 1px solid var(--fp-card-border-color, #e5e7eb); } .fp-btn--secondary:hover { opacity: .85; } .fp-btn--complete { background: var(--fp-color-badge-done, #16a34a); color: #fff; cursor: pointer; } /* ── Badges ───────────────────────────────────────────────────────────── */ .fp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; } .fp-badge--success { background: #dcfce7; color: var(--fp-color-badge-done, #16a34a); } .fp-badge--info { background: #dbeafe; color: var(--fp-color-badge-open, #1d4ed8); } .fp-badge--locked { background: #f3f4f6; color: var(--fp-color-badge-locked, #6b7280); } .fp-badge--warning { background: #fef9c3; color: #b45309; } .fp-badge--soon { background: #fef3c7; color: #92400e; } /* ── Barre de progression ─────────────────────────────────────────────── */ .fp-progress-bar { height: var(--fp-progress-height, 8px); background: var(--fp-color-progress-track, #e5e7eb); border-radius: 99px; overflow: hidden; width: 100%; } .fp-progress-bar__fill { height: 100%; background: var(--fp-color-progress-fill, #1d4ed8); border-radius: 99px; transition: width .4s ease; } .fp-progress-label { font-size: 12px; color: var(--fp-color-text-muted, #6b7280); margin-top: 4px; display: block; } /* ── Compte-à-rebours ─────────────────────────────────────────────────── */ .fp-countdown { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--fp-color-secondary, #f9fafb); border: 1px solid var(--fp-card-border-color, #e5e7eb); border-radius: var(--fp-btn-radius, 8px); color: var(--fp-color-text-muted, #6b7280); font-size: 13px; } /* ── Cartes ───────────────────────────────────────────────────────────── */ .fp-pack-card { border: 1px solid var(--fp-card-border-color, #e5e7eb); border-radius: var(--fp-card-radius, 12px); box-shadow: var(--fp-card-shadow, 0 4px 24px rgba(0,0,0,0.07)); overflow: hidden; margin-bottom: 24px; } .fp-pack-card__header { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--fp-color-secondary, #f9fafb); border-bottom: 1px solid var(--fp-card-border-color, #e5e7eb); } .fp-pack-card__thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: calc(var(--fp-card-radius, 12px) - 4px); } .fp-pack-card__title { margin: 0 0 10px; font-size: 17px; font-family: var(--fp-title-font-family, inherit); font-weight: var(--fp-title-font-weight, 700); color: var(--fp-title-color, #111827); } /* ── Modules list ─────────────────────────────────────────────────────── */ .fp-module-item { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--fp-card-border-color, #e5e7eb); transition: background .1s; } .fp-module-item:last-child { border-bottom: none; } .fp-module-item--open:hover { background: #eff6ff; } .fp-module-item--done { background: #f0fdf4; } .fp-module-item--locked { opacity: .8; } .fp-module-item__num { width: 28px; height: 28px; border-radius: 50%; background: var(--fp-color-secondary, #f3f4f6); color: var(--fp-color-text-muted, #6b7280); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fp-module-item--done .fp-module-item__num { background: #bbf7d0; color: var(--fp-color-badge-done, #16a34a); } .fp-module-item--open .fp-module-item__num { background: #bfdbfe; color: var(--fp-color-badge-open, #1d4ed8); } .fp-module-item__body { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fp-module-item__title { font-weight: 500; color: var(--fp-color-text, #111827); } a.fp-module-item__title { color: var(--fp-color-primary, #1d4ed8); text-decoration: none; } a.fp-module-item__title:hover { text-decoration: underline; } .fp-module-item__icon { margin-left: auto; color: var(--fp-color-text-muted, #6b7280); flex-shrink: 0; } .fp-module-item--done .fp-module-item__icon { color: var(--fp-color-badge-done, #16a34a); } .fp-module-item--open .fp-module-item__icon { color: var(--fp-color-badge-open, #1d4ed8); } /* ── Lecteur vidéo ────────────────────────────────────────────────────── */ .fp-video-player { margin: 20px 0; } .fp-video-player__embed iframe, .fp-video-player__embed video { width: 100%; border-radius: var(--fp-card-radius, 12px); display: block; } .fp-locked-video { padding: 40px 24px; text-align: center; background: var(--fp-color-secondary, #f9fafb); border: 2px dashed var(--fp-card-border-color, #e5e7eb); border-radius: var(--fp-card-radius, 12px); } /* ── Intervenant ──────────────────────────────────────────────────────── */ .fp-speaker { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--fp-color-secondary, #f9fafb); border-radius: var(--fp-card-radius, 12px); border: 1px solid var(--fp-card-border-color, #e5e7eb); } .fp-speaker__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #dbeafe; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--fp-color-primary, #1d4ed8); } .fp-speaker__avatar img { width: 100%; height: 100%; object-fit: cover; } .fp-speaker__name { font-weight: 600; font-size: 15px; color: var(--fp-color-text, #111827); margin-bottom: 4px; } .fp-speaker__bio { font-size: 13px; color: var(--fp-color-text-muted, #6b7280); line-height: 1.6; } /* ── Notice ───────────────────────────────────────────────────────────── */ .fp-notice { padding: 12px 16px; background: var(--fp-color-secondary, #f9fafb); border-left: 4px solid var(--fp-color-primary, #1d4ed8); border-radius: 0 var(--fp-btn-radius, 8px) var(--fp-btn-radius, 8px) 0; } .fp-prerequisite-notice { padding: 14px 18px; border-radius: var(--fp-btn-radius, 8px); background: #fffbeb; border: 1px solid #fde68a; color: #92400e; margin: 16px 0; } /* ── Mon Compte WooCommerce ───────────────────────────────────────────── */ .fp-account-formations { padding: 8px 0; } .fp-empty { padding: 32px; text-align: center; background: var(--fp-color-secondary, #f9fafb); border-radius: var(--fp-card-radius, 12px); color: var(--fp-color-text-muted, #6b7280); } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 640px) { .fp-pack-card__header { flex-direction: column; align-items: flex-start; } .fp-module-item { padding: 10px 14px; } }