/* ================================================================
   JC Formation WP — Templates CSS v2.3
   Body class: .jcf-tpl-grid-{classic|magazine|minimal}
   Body class: .jcf-tpl-single-{hero|light|centered}
   Shortcode wrapper: .jcf-tpl-shortcode-wrapper.jcf-tpl-grid-*
================================================================ */

/* ═══ GRILLE : Classic — défaut, rien à surcharger ══════════════ */

/* ═══ GRILLE : Magazine ══════════════════════════════════════════
   1re card héro pleine largeur, reste en 2 col
══════════════════════════════════════════════════════════════════ */
body.jcf-tpl-grid-magazine .jcf-grid,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 20px;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-media-link,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-media-link {
    height: 100%;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-media,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-media {
    height: 100%;
    min-height: 260px;
    border-radius: 20px 0 0 20px;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-body,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-body {
    padding: 32px;
    justify-content: center;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-title,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-title {
    font-size: 22px;
    margin-bottom: 10px;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-excerpt,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-excerpt {
    font-size: 15px;
    -webkit-line-clamp: 4;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-price,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-price {
    font-size: 24px;
}
body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:not(:first-child),
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:not(:first-child) {
    border-left: 4px solid var(--jcf-card-accent);
}
@media (max-width: 768px) {
    body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child,
    .jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child {
        grid-template-columns: 1fr;
        grid-column: 1;
    }
    body.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-media,
    .jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid .jcf-card:first-child .jcf-card-media {
        min-height: 200px;
        border-radius: 20px 20px 0 0;
    }
    body.jcf-tpl-grid-magazine .jcf-grid,
    .jcf-tpl-shortcode-wrapper.jcf-tpl-grid-magazine .jcf-grid { grid-template-columns: 1fr; }
}

/* ═══ GRILLE : Minimal List ══════════════════════════════════════
   Cards horizontales image gauche
══════════════════════════════════════════════════════════════════ */
body.jcf-tpl-grid-minimal .jcf-grid,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
}
body.jcf-tpl-grid-minimal .jcf-card,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card {
    flex-direction: row;
    border-radius: 12px;
    min-height: 110px;
}
body.jcf-tpl-grid-minimal .jcf-card::before,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card::before {
    width: 4px; height: 100%; top: 0; left: 0; right: auto;
}
body.jcf-tpl-grid-minimal .jcf-card-media-link,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-media-link {
    flex-shrink: 0; width: 160px;
}
body.jcf-tpl-grid-minimal .jcf-card-media,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-media {
    width: 160px; height: 100%; min-height: 110px;
    border-radius: 12px 0 0 12px;
}
body.jcf-tpl-grid-minimal .jcf-card-body,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-body {
    padding: 16px 20px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0;
}
body.jcf-tpl-grid-minimal .jcf-card-top-meta,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-top-meta { order:1;width:100%;margin-bottom:4px; }
body.jcf-tpl-grid-minimal .jcf-card-title,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-title { order:2;width:100%;font-size:15px;margin-bottom:4px; }
body.jcf-tpl-grid-minimal .jcf-card-excerpt,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-excerpt { order:3;width:100%;-webkit-line-clamp:1;font-size:13px; }
body.jcf-tpl-grid-minimal .jcf-card-meta,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-meta { order:4;flex:1;margin-top:8px; }
body.jcf-tpl-grid-minimal .jcf-card-footer,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-footer {
    order:5; border-top:none; padding-top:0; margin-top:8px; flex-shrink:0; gap:12px; align-self:center;
}
body.jcf-tpl-grid-minimal .jcf-card:hover,
.jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card:hover {
    transform: translateX(4px) translateY(-1px);
}
@media (max-width: 600px) {
    body.jcf-tpl-grid-minimal .jcf-card,
    .jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card { flex-direction: column; }
    body.jcf-tpl-grid-minimal .jcf-card-media-link,
    .jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-media-link { width: 100%; }
    body.jcf-tpl-grid-minimal .jcf-card-media,
    .jcf-tpl-shortcode-wrapper.jcf-tpl-grid-minimal .jcf-card-media {
        width:100%; border-radius:12px 12px 0 0; min-height:160px;
    }
}

/* ═══ SINGLE : Hero Dark — défaut, rien à surcharger ════════════ */

/* ═══ SINGLE : Light Clean ═══════════════════════════════════════
   Bandeau blanc, image plein hauteur à droite
══════════════════════════════════════════════════════════════════ */
body.jcf-tpl-single-light.jcf-formation-single,
body.jcf-tpl-single-light .jcf-formation-single { background: #f8fafc; }

body.jcf-tpl-single-light .jcf-hero {
    background: #fff;
    padding: 0;
    border-bottom: 1px solid #e2e8f0;
}
body.jcf-tpl-single-light .jcf-hero::before { display: none; }
body.jcf-tpl-single-light .jcf-hero-inner {
    grid-template-columns: 1fr 380px;
    gap: 0;
    padding: 0;
    align-items: stretch;
}
body.jcf-tpl-single-light .jcf-hero-content {
    color: #0f172a;
    padding: 44px 40px 44px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.jcf-tpl-single-light .jcf-hero-title    { color: #0f172a; font-size: clamp(22px, 2.5vw, 36px); }
body.jcf-tpl-single-light .jcf-hero-excerpt  { color: #475569; }
body.jcf-tpl-single-light .jcf-hero-meta     { border-top-color: #e2e8f0; }
body.jcf-tpl-single-light .jcf-hero-meta-item         { color: #475569; }
body.jcf-tpl-single-light .jcf-hero-meta-item strong  { color: #1e293b; }
body.jcf-tpl-single-light .jcf-badge-level {
    background: #f1f5f9; color: #475569; border-color: #e2e8f0;
}
body.jcf-tpl-single-light .jcf-hero-instructor { background: #f8fafc; border-color: #e2e8f0; }
body.jcf-tpl-single-light .jcf-instructor-name  { color: #1e293b; }
body.jcf-tpl-single-light .jcf-instructor-label { color: #94a3b8; }
body.jcf-tpl-single-light .jcf-hero-card {
    border-radius: 0;
    box-shadow: none;
    position: relative;
    top: 0;
    border-left: 1px solid #e2e8f0;
}
body.jcf-tpl-single-light .jcf-hero-card-thumb {
    height: 100%;
    min-height: 340px;
}
body.jcf-tpl-single-light .jcf-hero-card-thumb img {
    height: 100%;
    object-fit: cover;
}
body.jcf-tpl-single-light .jcf-hero-card-body { display: none; }
@media (max-width: 768px) {
    body.jcf-tpl-single-light .jcf-hero-inner { grid-template-columns: 1fr; }
    body.jcf-tpl-single-light .jcf-hero-card  { border-radius: 0; border-left: none; border-top: 1px solid #e2e8f0; }
    body.jcf-tpl-single-light .jcf-hero-card-body  { display: block; }
    body.jcf-tpl-single-light .jcf-hero-card-thumb { min-height: 220px; }
    body.jcf-tpl-single-light .jcf-hero-content    { padding: 28px 20px; }
}

/* ═══ SINGLE : Centered Focus ════════════════════════════════════
   Gradient coloré centré, pas de sidebar, modules plein écran
══════════════════════════════════════════════════════════════════ */
body.jcf-tpl-single-centered .jcf-hero {
    background: linear-gradient(135deg, var(--jcf-primary) 0%, var(--jcf-accent) 100%);
    padding: 64px 24px 48px;
    text-align: center;
}
body.jcf-tpl-single-centered .jcf-hero::before { display: none; }
body.jcf-tpl-single-centered .jcf-hero-inner {
    grid-template-columns: 1fr;
    max-width: 760px;
    gap: 0;
}
body.jcf-tpl-single-centered .jcf-hero-card      { display: none; }
body.jcf-tpl-single-centered .jcf-hero-badges     { justify-content: center; }
body.jcf-tpl-single-centered .jcf-hero-title      { font-size: clamp(26px, 3vw, 44px); text-align: center; }
body.jcf-tpl-single-centered .jcf-hero-excerpt    { text-align: center; color: rgba(255,255,255,.85); }
body.jcf-tpl-single-centered .jcf-hero-meta       { justify-content: center; border-top-color: rgba(255,255,255,.2); }
body.jcf-tpl-single-centered .jcf-hero-meta-item  { color: rgba(255,255,255,.75); }
body.jcf-tpl-single-centered .jcf-hero-meta-item strong { color: #fff; }
body.jcf-tpl-single-centered .jcf-hero-instructor {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    max-width: 340px;
    margin: 20px auto 0;
}
body.jcf-tpl-single-centered .jcf-instructor-name  { color: #fff; }
body.jcf-tpl-single-centered .jcf-instructor-label { color: rgba(255,255,255,.65); }
body.jcf-tpl-single-centered .jcf-single-main {
    grid-template-columns: 1fr;
    max-width: 900px;
}
body.jcf-tpl-single-centered .jcf-sidebar-area {
    position: relative;
    top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
/* CTA banner coloré pleine largeur */
body.jcf-tpl-single-centered .jcf-sidebar-box:first-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--jcf-primary), var(--jcf-accent));
    border: none;
    padding: 24px 32px;
}
body.jcf-tpl-single-centered .jcf-sidebar-box:first-child .jcf-sidebar-prices { justify-content: center; }
body.jcf-tpl-single-centered .jcf-sidebar-box:first-child .jcf-sidebar-price { color: #fff; }
body.jcf-tpl-single-centered .jcf-sidebar-box:first-child .jcf-sidebar-old-price { color: rgba(255,255,255,.6); }
body.jcf-tpl-single-centered .jcf-sidebar-box:first-child .jcf-btn {
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
}
body.jcf-tpl-single-centered .jcf-sidebar-box:first-child .jcf-btn:hover {
    background: #fff;
    color: var(--jcf-primary);
}
body.jcf-tpl-single-centered .jcf-sidebar-box:last-child { grid-column: 1 / -1; text-align: center; }
body.jcf-tpl-single-centered .jcf-sidebar-box:last-child .jcf-btn { max-width: 320px; }