/* =========================================================
   HERO PREMIUM (DARK) — uniquement cette page
   ========================================================= */

/* hero sombre comme index */
header.hero.hero-premium {
    position: relative;
    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, #0B0F14) !important;
    color: #fff !important;
    padding-top: 3.2rem;
    padding-bottom: 10rem;
}

    /* supprime tout overlay parasite éventuel */
    header.hero.hero-premium::before,
    header.hero.hero-premium::after {
        content: none !important;
    }

    /* textes du hero en blanc */
    header.hero.hero-premium .hero-title,
    header.hero.hero-premium .hero-kicker,
    header.hero.hero-premium .hero-copy,
    header.hero.hero-premium .hero-copy p {
        color: #fff !important;
    }

    /* breadcrumb en clair */
    header.hero.hero-premium .hero-breadcrumb a,
    header.hero.hero-premium .breadcrumb-item {
        color: rgba(255,255,255,.78) !important;
    }

        header.hero.hero-premium .breadcrumb-item.active {
            color: rgba(255,255,255,.60) !important;
        }

/* la règle globale de styles.css met .text-muted en blanc :
   -> OK pour le hero, MAIS on veut du gris dans le contenu.
   Donc on force seulement dans les sections (pas dans le hero). */
.is-page-section .text-muted {
    color: rgba(15,23,42,.70) !important;
}

/* courbe blanche visible en bas du hero */
header.hero.hero-premium .hero-wave {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 90px;
    pointer-events: none;
    z-index: 2;
}

    header.hero.hero-premium .hero-wave path {
        fill: #fff !important;
    }

/* évite le gros “trou blanc” entre hero et section suivante */
header.hero.hero-premium + .is-page-section {
    padding-top: 3.5rem; /* ajuste si tu veux +/– */
}



/* =========================================================
   CARDS PREMIUM — hover premium (comme tes autres pages)
   ========================================================= */
.card.card-premium{
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.card-premium:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  border-color: rgba(177, 18, 23, 0.35);
}
.card.card-premium .card-img-top,
.card.card-premium .is-card-img{
  transition: transform .25s ease;
}
.card.card-premium:hover .card-img-top,
.card.card-premium:hover .is-card-img{
  transform: scale(1.03);
}
/* =========================================================
   PREMIUM LOOK — Cards + Icons (page-only)
   Objectif: matcher card-service / need-card (autres pages)
   ========================================================= */

:root {
    --is-red: #b11217; /* ton rouge premium IS */
}

/* ---------- Cards premium (identique aux autres pages) ---------- */
.card.card-premium {
    border-radius: 18px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #fff !important;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(2,6,23,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .card.card-premium:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
        border-color: rgba(177, 18, 23, 0.35) !important;
    }

    /* Images de cartes: rendu premium + léger zoom */
    .card.card-premium .card-img-top,
    .card.card-premium .is-card-img {
        transition: transform .25s ease;
    }

    .card.card-premium:hover .card-img-top,
    .card.card-premium:hover .is-card-img {
        transform: scale(1.03);
    }

    /* Optionnel: un micro "accent" en haut des cards (comme certains designs premium) */
    .card.card-premium::before {
        content: "";
        display: block;
        height: 3px;
        background: transparent;
        transition: background .25s ease;
    }

    .card.card-premium:hover::before {
        background: rgba(177,18,23,.45);
    }

    /* ---------- Accordéons: enlever le look bootstrap “bleu” ---------- */
    .card.card-premium .accordion-button {
        background: transparent !important;
        color: rgba(15,23,42,.92) !important;
        font-weight: 700;
        box-shadow: none !important;
    }

        .card.card-premium .accordion-button:not(.collapsed) {
            color: rgba(15,23,42,.92) !important;
        }

        .card.card-premium .accordion-button::after {
            filter: grayscale(1);
            opacity: .7;
        }

    .card.card-premium .accordion-item {
        border: 0;
        border-top: 1px solid rgba(15,23,42,.08);
    }

    .card.card-premium .accordion-body {
        color: rgba(15,23,42,.78);
    }

/* =========================================================
   “Contenu des formations” — icônes + lignes (comme autres pages)
   ========================================================= */

/* La ligne entière */
.feature-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    box-shadow: 0 10px 26px rgba(2,6,23,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .feature-row:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(15,23,42,.08);
        border-color: rgba(177,18,23,.25);
    }

/* La “bulle” icône (c’est ça qui manque chez toi) */
.feature-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(177, 18, 23, 0.08);
    border: 1px solid rgba(177, 18, 23, 0.20);
    flex: 0 0 auto;
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

    /* Icône bootstrap à l’intérieur */
    .feature-ico i {
        font-size: 1.45rem;
        color: var(--is-red) !important;
        line-height: 1;
    }

/* micro animation comme sur les autres pages */
.feature-row:hover .feature-ico {
    transform: translateY(-2px);
    background: rgba(177, 18, 23, 0.12);
    border-color: rgba(177, 18, 23, 0.28);
}

/* Textes */
.feature-row .fw-semibold {
    color: rgba(15,23,42,.95);
}

.feature-row .text-muted,
.is-page-section .text-muted {
    color: rgba(15,23,42,.70) !important; /* annule le text-muted blanc global */
}
/* =========================================================
   IMAGES DE CARDS — HAUTEUR UNIFORME
   ========================================================= */

/* Toutes les images en haut des cards premium */
.card.card-premium .card-img-top,
.card.card-premium .is-card-img {
    height: 260px; /* ajuste si tu veux plus/moins */
    width: 100%;
    object-fit: cover; /* recadre sans déformer */
    object-position: center;
    display: block;
}

/* Empêche Bootstrap de réduire la hauteur */
.card.card-premium {
    overflow: hidden;
}
@media (max-width: 768px) {
    .card.card-premium .card-img-top,
    .card.card-premium .is-card-img {
        height: 200px;
    }
}
/* =========================================================
   IMAGES DES FORMATIONS (dans les accordéons)
   Hauteur uniforme + rendu premium
   ========================================================= */

/* Toutes les images dans les accordéons de formations */
.card.card-premium .accordion-body img {
    width: 100%;
    height: 220px; /* hauteur uniforme */
    object-fit: cover; /* recadrage propre */
    object-position: center;
    border-radius: 14px; /* cohérent avec le design */
    display: block;
}

/* Espacement propre autour des images */
.card.card-premium .accordion-body .row.g-2 > div {
    display: flex;
}

.card.card-premium .accordion-body .row.g-2 img {
    flex: 1;
}

/* Mobile : un peu moins haut */
@media (max-width: 768px) {
    .card.card-premium .accordion-body img {
        height: 180px;
    }
}