/* =========================================================
   SERVICES.HTML — HERO DARK + SEPARATEUR, puis alternance clair
   (header + navbar restent identiques à index)
   ========================================================= */

:root {
    --brand: #0B0F14;
    --accent: #DC2626;
    --accent-2: #991B1B;
    --ink: #0B0F14;
    --muted: #6B7280;
    --soft: #f5f6f8;
    --radius: 14px;
}

/* On garde le fond global clair comme index */
body.page-bg {
    background: #fff;
    color: var(--ink);
}

/* On s’assure que page-content ne recouvre rien */
.page-content {
    background: transparent;
}

/* Lien hover navbar (même comportement que index) */
.navbar .nav-link:hover {
    color: var(--accent) !important;
}

/* =========================================================
   1) HERO DARK (page-header) + séparateur courbe comme index
   ========================================================= */

.page-header {
    position: relative;
    overflow: hidden;
    padding: 3rem 0 3.25rem; /* + bas pour laisser place à la courbe */
    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));
}

    /* Titre et texte */
    .page-header .page-title {
        color: #fff;
    }

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

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

    /* Boutons dans le hero (si btn-primary existe déjà, ça reste cohérent) */
    .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 (comme hero index) */
    .page-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 80px;
        pointer-events: none;
        z-index: 2;
        /* on dessine une courbe en SVG (fond blanc) */
        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%;
    }

/* =========================================================
   2) SECTIONS SUIVANTES : alternance blanc / soft (comme index)
   ========================================================= */

/* Ta section principale actuelle = on la force en blanc (pas dark) */
.page-content > .section {
    background: #fff;
    padding: 4rem 0;
}

/* Alternance : on met la section services en blanc,
   et le panel CTA du bas sur un fond "soft" propre */
.page-content > .section {
    position: relative;
}

    /* Option: donner un fond soft derrière la zone CTA en bas */
    .page-content > .section .panel {
        background: #fff;
        border: 1px solid rgba(15,23,42,.10);
        border-radius: var(--radius);
        padding: 1.25rem;
        box-shadow: 0 10px 26px rgba(2,6,23,.06);
    }

/* Cartes services : style clair (identique index) */
.card-service {
    border-radius: var(--radius);
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    box-shadow: 0 10px 26px rgba(2,6,23,.06);
}

.icon-bubble {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(220,38,38,.10);
    border: 1px solid rgba(220,38,38,.20);
    font-size: 1.2rem;
}

/* Kicker + listes (clair) */
.service-kicker {
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ink);
}

.service-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .service-list i {
        color: var(--accent);
        margin-top: .1rem;
    }

/* Les text-muted redeviennent “clairs” dans les sections blanches */
.page-content > .section .text-muted {
    color: var(--muted) !important;
}

/* Boutons dans la section (clair) */
.page-content > .section .btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

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

/* Outline primary : reste Bootstrap bleu par défaut.
   Si tu veux le rouge (cohérent), décommente :
*/
/*
.page-content > .section .btn-outline-primary{
  color: var(--accent) !important;
  border-color: rgba(220,38,38,.55) !important;
}
.page-content > .section .btn-outline-primary:hover{
  background: rgba(220,38,38,.08) !important;
  border-color: rgba(220,38,38,.75) !important;
}
*/

/* =========================================================
   3) Footer (laisse ton footer actuel — si styles.css le gère)
   ========================================================= */


/* =========================================================
   HERO SERVICES — même hauteur que le hero index
   ========================================================= */

/* Hauteur équivalente au hero de index */
.page-header {
    min-height: 400px;
    display: flex;
    align-items: flex-start; /* ⬅️ clé du changement */
    /*padding-top: 4.5rem;*/
    padding-bottom: 4.5rem;
}
    .page-header > .container {
        margin-top: 1.5rem;
    }

/* Sur grands écrans, on augmente légèrement (comme index) */
@media (min-width: 992px) {
    .page-header {
        min-height: 400px;
       /* padding-top: 5.5rem;*/
        padding-bottom: 5.5rem;
    }
}


/* Sur très grands écrans (optionnel, ultra clean) */
@media (min-width: 1200px) {
    .page-header {
        min-height: 400px;
    }
}

@media (min-width: 992px) {
    .page-header > .container {
        margin-top: 2rem;
    }
}