/* =========================================
   Formations – Premium cards (noir + accent rouge IS)
   Fichier : assets/css/formations.css
   ========================================= */

/* ---------------------------
   Variables
   --------------------------- */
:root {
    /* Main (noir premium) */
    --is-main: #0f172a; /* texte noir "premium" */
    --is-main-2: #000000; /* noir pur */
    /* Accent rouge IS */
    --is-accent: #b11217; /* rouge IS */
    --is-accent-dark: #8f0e12;
    /* Accents doux (rouge transparent) */
    --is-accent-soft: rgba(177,18,23,.12);
    --is-accent-soft-2: rgba(177,18,23,.18);
}

/* ---------------------------
   Card layout
   --------------------------- */
.formation-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(15,23,42,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    isolation: isolate;
}

    .formation-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(800px 300px at 20% -20%, var(--is-accent-soft), transparent 60%), radial-gradient(700px 280px at 110% 10%, rgba(0,0,0,.04), transparent 60%);
        z-index: -1;
    }

    .formation-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 50px rgba(15,23,42,.16);
        border-color: var(--is-accent-soft-2);
    }

    /* Couleurs de texte par défaut dans la card */
    .formation-card,
    .formation-card h4,
    .formation-card h5,
    .formation-card p,
    .formation-card li,
    .formation-card strong {
        color: var(--is-main);
    }

/* ---------------------------
   Checkbox
   --------------------------- */
.selection-checkbox {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3; /* au-dessus du header */
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 999px;
    padding: .25rem .40rem;
    backdrop-filter: blur(6px);
}

/* ---------------------------
   Header
   --------------------------- */
/* FIX BLANC EN HAUT :
   - on "peint" aussi les coins arrondis en noir
   - on recouvre la bordure avec margin:-1px
*/
.formation-header {
    position: relative;
    padding: 18px 18px 14px;
    background: #05070a !important; /* base noire */
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.10);
    /* IMPORTANT pour supprimer le "blanc" au-dessus */
    margin: -1px; /* recouvre la bordure/coin */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

    /* overlay de dégradé (sans "trouer" le noir) */
    .formation-header::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.00) 55%, rgba(0,0,0,.35) 100% );
    }

    /* contenu au-dessus de l'overlay */
    .formation-header > * {
        position: relative;
        z-index: 1;
    }

    /* titre blanc + lisibilité */
    .formation-header h4 {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,.65);
        margin-bottom: 0;
    }

    /* Font Awesome icon badge (icône blanche) */
    .formation-header i {
        display: inline-grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.22);
        color: #fff !important;
        box-shadow: 0 10px 22px rgba(0,0,0,.45);
    }

/* ---------------------------
   Body (flex colonne)
   --------------------------- */
.formation-body {
    flex: 1 1 auto;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column; /* nécessaire pour pousser les metas en bas */
}

    /* Audience badges */
    .formation-body .badge.text-bg-light.border {
        background: rgba(0,0,0,.03) !important;
        border-color: rgba(15,23,42,.12) !important;
        color: rgba(15,23,42,.80) !important;
        border-radius: 999px;
        padding: .32rem .55rem;
    }

    /* Contenu listes */
    .formation-body ul {
        padding-left: 1.1rem;
    }

/* Alerts */
.formation-card .alert {
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.08);
}

/* ---------------------------
   Badges durée / prix
   --------------------------- */
.duration-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(0,0,0,.02);
    font-size: .85rem;
    min-width: 160px; /* harmonise visuellement */
    color: var(--is-main);
}

    .duration-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--is-main-2); /* point noir */
        box-shadow: 0 0 0 4px var(--is-accent-soft);
    }

.pricing-badge {
    display: inline-flex;
    align-items: center;
    padding: .38rem .70rem;
    border-radius: 999px;
    border: 1px solid var(--is-accent-soft-2);
    background: var(--is-accent-soft);
    color: var(--is-accent-dark);
    font-size: .85rem;
    font-weight: 600;
}

/* Mandatory */
.mandatory-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .60rem;
    border-radius: 999px;
    font-size: .78rem;
    border: 1px solid var(--is-accent-soft-2);
    background: var(--is-accent-soft);
    color: var(--is-accent-dark);
    font-weight: 700;
}

/* Ribbon obligatoire */
.formation-card.has-mandatory::after {
    content: "Obligatoire";
    position: absolute;
    top: 14px;
    left: -46px;
    transform: rotate(-45deg);
    background: var(--is-accent); /* rouge */
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: .72rem;
    padding: .35rem 3.4rem;
    box-shadow: 0 10px 18px rgba(0,0,0,.25);
    z-index: 4; /* au-dessus du header */
}

/* ---------------------------
   ALIGNEMENT DES ZONES META
   (à condition d’avoir un wrapper .formation-meta-wrap dans le HTML)
   --------------------------- */
.formation-meta-wrap {
    margin-top: auto; /* pousse en bas du body, juste au-dessus du footer */
    padding-top: 12px;
}

/* Zone durée / prix */
.formation-meta.meta-primary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-bottom: 8px;
}

/* Zone tags */
.formation-meta.meta-tags {
    min-height: 36px;
    display: flex;
    align-items: center;
}

    /* Tags bien contenus */
    .formation-meta.meta-tags .badge {
        margin-right: 6px;
        margin-bottom: 0;
    }

    /* Si aucun tag -> garde l’espace mais invisible */
    .formation-meta.meta-tags:empty {
        visibility: hidden;
    }

/* ---------------------------
   Footer fixe (CTA alignés)
   --------------------------- */
.formation-footer {
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(15,23,42,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.85), #fff);
}

    .formation-footer .btn {
        border-radius: 999px;
        font-weight: 600;
        letter-spacing: .2px;
        background: var(--is-main-2); /* noir */
        border-color: var(--is-main-2);
        color: #fff;
        box-shadow: 0 10px 18px rgba(0,0,0,.18);
    }

        .formation-footer .btn:hover {
            background: #111;
            border-color: #111;
            box-shadow: 0 16px 26px rgba(0,0,0,.25);
        }

/* ---------------------------
   HERO (page-header) : dark + séparateur courbe
   --------------------------- */
.page-header {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(1200px 600px at 15% 20%, rgba(225,29,72,.25), transparent 55%), radial-gradient(900px 500px at 85% 30%, rgba(0,0,0,.55), transparent 55%), linear-gradient(180deg, #05070A, var(--brand));
    min-height: 400px;
    display: flex;
    align-items: flex-start;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

@media (min-width:992px) {
    .page-header {
        min-height: 400px;
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

@media (min-width:1200px) {
    .page-header {
        min-height: 400px;
    }
}

/* Breadcrumb sur hero */
.page-header .breadcrumb,
.page-header .breadcrumb a {
    color: rgba(255,255,255,.75);
}

    .page-header .breadcrumb a:hover {
        color: #fff;
    }

    .page-header .breadcrumb .active {
        color: #fff;
    }

.page-title {
    color: #fff;
}

.page-header .text-muted {
    color: rgba(255,255,255,.72) !important;
}

/* Boutons CTA dans le hero (accent rouge du site si défini) */
.page-header .btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

    .page-header .btn-primary:hover {
        background: var(--accent-2) !important;
        border-color: var(--accent-2) !important;
    }

/* Séparateur courbe (fond blanc) */
.page-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 80px;
    pointer-events: none;
    z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C240,80 480,80 720,48 C960,16 1200,16 1440,48 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}