/* ============================================================
   KMF CONSULTING INTERNATIONAL
   PAGE NOS SERVICES
   DESIGN PREMIUM / INSTITUTIONNEL
   ============================================================ */


/* ============================================================
   VARIABLES LOCALES
   ============================================================ */

.kmf-services-page {

    --kmf-navy: #e3e6eb;
    --kmf-navy-dark: #e9edf1;
    --kmf-blue: #d2d9e0;

    --kmf-gold: #d4af37;
    --kmf-gold-light: #e4c65a;

    --kmf-white: #ffffff;
    --kmf-text: #1e293b;
    --kmf-muted: #64748b;

    --kmf-section: #f8fafc;
    --kmf-card: #ffffff;

    --kmf-border: rgb(236, 17, 72);

    width: 100%;

    overflow: hidden;

    color: var(--text-main);

    background: var(--bg-body);
}




/* ============================================================
   EXPERTISE / HERO / BANNIÈRE
   ============================================================ */

.kmf-services-hero {

    position: relative;

    min-height: 400px; /*470px*/

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 130px 25px 90px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #040549 0%,
            #050838 48%,
            #042696 100%
        );
}
/* Image / lumière en arrière-plan */

.kmf-services-hero::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

    top: -380px;

    right: -150px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.18) 0%,
            rgba(212,175,55,.06) 35%,
            transparent 70%
        );

    animation:
        kmfHeroLight 10s ease-in-out infinite alternate;

    pointer-events: none;
}


@keyframes kmfHeroLight {

    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(-80px,70px) scale(1.15);
    }
}


/* Deuxième halo */

.kmf-services-hero::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    bottom: -280px;

    left: -120px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.05),
            transparent 70%
        );

    animation:
        kmfHeroLightTwo 12s ease-in-out infinite alternate;

    pointer-events: none;
}


@keyframes kmfHeroLightTwo {

    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(70px,-50px);
    }
}


/* Overlay */

.kmf-services-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,24,44,.35),
            rgba(10,31,56,.05),
            rgba(7,24,44,.30)
        );

    z-index: 1;

    pointer-events: none;
}


/* Contenu */

.kmf-services-hero-content {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    animation:
        kmfHeroContent .9s ease forwards;
}


@keyframes kmfHeroContent {

    from {

        opacity: 0;

        transform: translateY(35px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}
/* ============================================================
   HERO EYEBROW
   ============================================================ */

.kmf-services-eyebrow {

    display: inline-block;

    color: var(--kmf-gold);

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: 3.5px;

    margin-bottom: 15px;

    animation:
        kmfEyebrow .9s ease .15s both;
}


@keyframes kmfEyebrow {

    from {

        opacity: 0;

        letter-spacing: 8px;
    }

    to {

        opacity: 1;

        letter-spacing: 3.5px;
    }
}


/* Ligne dorée */

.kmf-services-line {

    width: 55px;

    height: 3px;

    background: var(--kmf-gold);

    margin: 0 auto 20px;

    border-radius: 10px;

    animation:
        kmfLineReveal .8s ease .25s both;
}


@keyframes kmfLineReveal {

    from {

        width: 0;

        opacity: 0;
    }

    to {

        width: 55px;

        opacity: 1;
    }
}


/* ============================================================
   HERO TITRE
   ============================================================ */

.kmf-services-hero h1 {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(2.5rem, 5vw, 4.2rem);

    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -1px;

    animation:
        kmfTitleReveal 1s ease .3s both;
}


@keyframes kmfTitleReveal {

    from {

        opacity: 0;

        transform: translateY(20px);

        filter: blur(5px);
    }

    to {

        opacity: 1;

        transform: translateY(0);

        filter: blur(0);
    }
}


/* Description */

.kmf-services-hero p {

    max-width: 700px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,.82);

    font-size: 1.05rem;

    line-height: 1.8;

    animation:
        kmfHeroText .9s ease .5s both;
}


@keyframes kmfHeroText {

    from {

        opacity: 0;

        transform: translateY(15px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}




















/* ============================================================
   KMF CONSULTANTS INTERNATIONAL
   SECTION NOS DOMAINES D'EXPERTISE
   ============================================================ */


/* ============================================================
   GRILLE
   ============================================================ */

.expertises-kmf {
    padding: 60px 0;
}

.expertises-kmf .row {
    align-items: stretch;
}


/* ============================================================
   CARTE EXPERTISE
   ============================================================ */

.expertises-kmf .expertise-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}


/* Effet au survol */

.expertises-kmf .expertise-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
}


/* ============================================================
   IMAGE
   ============================================================ */

.expertises-kmf .expertise-image {
    width: 100%;
    height: 210px;
    overflow: hidden;
}

.expertises-kmf .expertise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}


/* Zoom de l'image */

.expertises-kmf .expertise-card:hover .expertise-image img {
    transform: scale(1.06);
}


/* ============================================================
   CONTENU
   ============================================================ */

.expertises-kmf .expertise-content {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}


/* ============================================================
   TITRE
   ============================================================ */

.expertises-kmf .expertise-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 13px 0;
    line-height: 1.3;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.expertises-kmf .expertise-content > p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 18px;
}


/* ============================================================
   DETAILS - DROITS HUMAINS
   ============================================================ */

.expertises-kmf .expertise-details {
    margin-bottom: 18px;
    font-size: 13px;
}

.expertises-kmf .expertise-details summary {
    cursor: pointer;
    font-weight: 600;
    padding: 8px 0;
}

.expertises-kmf .expertise-details ul {
    margin: 10px 0 0 0;
    padding-left: 18px;
}

.expertises-kmf .expertise-details li {
    margin-bottom: 6px;
    line-height: 1.5;
}


/* ============================================================
   ENGAGEMENT
   ============================================================ */

.expertises-kmf .expertise-commitment {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-left: 3px solid currentColor;
    background: rgba(0, 0, 0, 0.025);
}

.expertises-kmf .expertise-commitment p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}


/* ============================================================
   BOUTON CONSULTER
   ============================================================ */

.expertises-kmf .expertise-btn {
    margin-top: auto;
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 17px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: all 0.3s ease;
}


/* Icône */

.expertises-kmf .expertise-btn i {
    transition: transform 0.3s ease;
}


/* Survol */

.expertises-kmf .expertise-btn:hover i {
    transform: translateX(5px);
}


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 991px) {

    .expertises-kmf {
        padding: 50px 0;
    }

    .expertises-kmf .expertise-image {
        height: 200px;
    }

    .expertises-kmf .expertise-content {
        padding: 20px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .expertises-kmf {
        padding: 40px 0;
    }

    .expertises-kmf .expertise-image {
        height: 220px;
    }

    .expertises-kmf .expertise-content {
        padding: 20px;
    }

    .expertises-kmf .expertise-content h3 {
        font-size: 19px;
    }

    .expertises-kmf .expertise-content > p {
        font-size: 14px;
    }

}


/* ============================================================
   PETIT MOBILE
   ============================================================ */

@media (max-width: 575px) {

    .expertises-kmf .expertise-image {
        height: 200px;
    }

    .expertises-kmf .expertise-content {
        padding: 18px;
    }

}



/* =====================================================
   CRÉDITS PHOTOS — VERSION TRÈS DISCRÈTE
===================================================== */


.photo-credits {
    margin-top: 8px;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    color: #aaa;
    font-style: italic;
}

.photo-credits em {
    font-style: italic;
    font-weight: 400;
}



































































/* ============================================================
   DOMAINES D'EXPERTISE - KMF CONSULTING INTERNATIONAL
   1 article par ligne + alternance gauche/droite
   ============================================================ 

.service-item-b {
  display: flex;
  width: 100%;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 50px;

  background: var(--surface-color);
  border-radius: 12px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-item-b:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
}


/* ============================================================
   IMAGE
   ============================================================ 

.service-img-b {
  flex: 0 0 45%;
  max-width: 45%;
  overflow: hidden;
}

.service-img-b img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.service-item-b:hover .service-img img {
  transform: scale(1.05);
}


/* ============================================================
   CONTENU
   ============================================================ 

.service-content-b {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 40px 45px;
}

.service-content-b h3 {
  position: relative;

  margin: 0 0 20px;

  padding-bottom: 14px;

  color: var(--heading-color);

  font-size: 28px;
  font-weight: 700;
}


/* Petite ligne dorée sous le titre 

.service-content-b h3::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 55px;
  height: 3px;

  background: var(--accent-color);

  border-radius: 3px;
}


.service-content-b p {
  margin-bottom: 18px;

  color: var(--default-color);

  font-size: 16px;
  line-height: 1.8;
}


/* ============================================================
   ALTERNANCE DES ARTICLES
   ============================================================ 

/* 1 - image gauche / texte droite */
/* 2 - texte gauche / image droite */
/* 3 - image gauche / texte droite */
/* etc. 

.row > article:nth-child(even) .service-item {
  flex-direction: row-reverse;
}


/* ============================================================
   BOUTON "CONTACTEZ-NOUS"
   ============================================================ 

.service-content-b .readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  align-self: flex-start;

  margin-top: 8px;

  color: var(--accent-color);

  font-size: 15px;
  font-weight: 600;

  text-decoration: none;

  transition: all 0.3s ease;
}

.service-content-b .readmore i {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.service-content-b .readmore:hover {
  color: var(--heading-color);
}

.service-content-b .readmore:hover i {
  transform: translateX(5px);
}


/* ============================================================
   DROITS HUMAINS - DETAILS
   ============================================================ 

.service-details {
  margin: 10px 0 20px;
}

.service-details summary {
  cursor: pointer;

  color: var(--accent-color);

  font-weight: 600;

  padding: 10px 0;

  transition: color 0.3s ease;
}

.service-details summary:hover {
  color: var(--heading-color);
}

.service-checklist {
  margin: 10px 0 20px;
  padding-left: 20px;
}

.service-checklist li {
  margin-bottom: 8px;

  color: var(--default-color);

  line-height: 1.6;
}


/* ============================================================
   ENGAGEMENT
   ============================================================ 

.service-commitment {
  margin-top: 5px;
  padding: 15px 18px;

  border-left: 3px solid var(--accent-color);

  background: color-mix(
    in srgb,
    var(--accent-color),
    transparent 92%
  );
}

.service-commitment p {
  margin: 0;

  font-size: 15px;
  line-height: 1.7;
}


/* ============================================================
   TABLETTE
   ============================================================ 

@media (max-width: 991px) {

  .service-img {
    flex: 0 0 42%;
    max-width: 42%;
  }

  .service-content {
    padding: 30px;
  }

  .service-content h3 {
    font-size: 24px;
  }

  .service-content p {
    font-size: 15px;
    line-height: 1.7;
  }

}


/* ============================================================
   MOBILE
   ============================================================ 

@media (max-width: 767px) {

  .service-item,
  .row > article:nth-child(even) .service-item {
    flex-direction: column;
  }

  .service-img {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .service-img img {
    width: 100%;
    height: 240px;
    min-height: 240px;
  }

  .service-content {
    padding: 28px 25px;
  }

  .service-content h3 {
    font-size: 22px;
    margin-bottom: 17px;
  }

  .service-content p {
    font-size: 15px;
  }

}


/* ============================================================
   PETITS ÉCRANS
   ============================================================ 

@media (max-width: 480px) {

  .service-item {
    margin-bottom: 35px;
    border-radius: 10px;
  }

  .service-img img {
    height: 210px;
    min-height: 210px;
  }

  .service-content {
    padding: 25px 20px;
  }

  .service-content h3 {
    font-size: 20px;
  }

}