/* ============================================================
   Section Expertises — Nos solutions (grid 2 colonnes)
   ============================================================ */

/* ── Variables ── */
.expertises-section {
  --exp-bg:           #f2f7f5;
  --exp-color-dark:   #003c3d;
  --exp-color-primary:#025253;
  --exp-color-accent: #21b593;
  --exp-card-border:  #e7efe9;
  --exp-card-radius:  9px;
  --exp-card-shadow:  0px 2px 8px 0px rgba(0, 0, 0, 0.05);
}

/* ── Wrapper principal ── */
.expertises-section {
  background-color: var(--exp-bg);
  padding: 170px 0;
}

/* ── Conteneur centré ── */
.expertises-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* ============================================================
   En-tête de section
   ============================================================ */

.expertises-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.expertises-section__header-left {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1;
  min-width: 0;
}

/* Label "Nos solutions" */
.expertises-section__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  line-height: 1;
  letter-spacing: 0;
  color: var(--exp-color-accent);
  text-transform: uppercase;
  margin: 0;
}

/* Titre H2 */
.expertises-section__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.8125rem; /* 45px */
  line-height: 1.1;
  color: var(--exp-color-dark);
  margin: 0;
  max-width: 750px;
}

/* ============================================================
   Bouton CTA (desktop header + mobile footer)
   ============================================================ */

.expertises-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--exp-color-primary);
  color: #fefefe;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.1875rem; /* 19px */
  letter-spacing: -0.2px;
  text-decoration: none;
  border-radius: 40px;
  padding: 0 35px;
  height: 55px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.expertises-btn:hover {
  background-color: #013e3f;
  color: #fefefe;
}

.expertises-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #d4f7a5;
  transition: color 0.25s ease;
}

.expertises-btn:hover .expertises-btn__icon {
  color: #21b593;
}

/* Mobile CTA — caché en desktop */
.expertises-section__mobile-cta {
  display: none;
}

/* ============================================================
   Description de section
   ============================================================ */

.expertises-section__header-wrap {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.expertises-section__description,
.expertises-section__description p {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.331; /* ~25.3px */
  color: var(--exp-color-dark);
  margin: 0;
}

.expertises-section__description strong,
.expertises-section__description b {
  font-weight: 600;
}

/* ============================================================
   Grille de cards
   ============================================================ */

.expertises-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  max-width: 1332px;
}

/* ============================================================
   Card expertise
   ============================================================ */

.expertise-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--exp-card-border);
  border-radius: var(--exp-card-radius);
  box-shadow: var(--exp-card-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.expertise-card:hover {
  box-shadow: none;
  border-color: var(--exp-color-accent);
}

/* ── Image ── */
.expertise-card__img-wrap {
  width: 100%;
  height: 203px;
  overflow: hidden;
  flex-shrink: 0;
}

.expertise-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* ── Corps ── */
.expertise-card__body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 40px 50px;
  flex: 1;
}

/* Titre de la card */
.expertise-card__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.4375rem; /* 23px */
  line-height: 1.391; /* ~32px */
  color: var(--exp-color-primary);
  margin: 0;
}

/* Description */
.expertise-card__desc {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.406; /* ~22.5px */
  color: var(--exp-color-dark);
  margin: 0;
}

/* ── Lien "En savoir plus →" ── */
.expertise-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.0625rem; /* 17px */
  letter-spacing: -0.2px;
  color: var(--exp-color-primary);
  text-decoration: none;
  margin-top: auto;
  transition: color 0.25s ease, gap 0.25s ease;
}

.expertise-card__more-label {
  transition: letter-spacing 0.25s ease, text-decoration 0.25s ease;
}

.expertise-card__more-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.expertise-card__more-arrow svg {
  display: block;
  color: currentColor;
}

/* Hover sur la card → effets sur le lien */
.expertise-card:hover .expertise-card__more {
  color: var(--exp-color-accent);
  gap: 4px;
}

.expertise-card:hover .expertise-card__more-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── ≤ 1280px ── */
@media (max-width: 1280px) {
  .expertises-section {
    padding: 120px 0;
  }

  .expertises-section__inner {
    gap: 80px;
  }

  .expertises-section__title {
    font-size: 2.25rem; /* 36px */
  }

  .expertises-section__description,
  .expertises-section__description p {
    font-size: 1.0625rem; /* 17px */
  }
}

/* ── ≤ 1100px ── */
@media (max-width: 1100px) {
  .expertises-section__grid {
    gap: 30px;
  }

  .expertise-card__body {
    padding: 30px 35px;
  }
}

/* ── Mobile (≤ 991px) ── */
@media (max-width: 991px) {
  .expertises-section {
    padding: 60px 0;
  }

  .expertises-section__inner {
    gap: 40px;
  }

  .expertises-section__description,
  .expertises-section__description p {
    font-size: 0.875rem; /* 14px */
    line-height: normal;
  }

  .expertises-section__header-wrap {
    gap: 20px;
  }

  /* En-tête : empilé, bouton desktop masqué */
  .expertises-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .expertises-btn--header {
    display: none;
  }

  .expertises-section__label {
    font-size: 1rem; /* 16px */
  }

  .expertises-section__title {
    font-size: 1.5rem; /* 24px */
    max-width: 100%;
  }

  /* Grille : 1 colonne */
  .expertises-section__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Cards : corps condensé */
  .expertise-card__body {
    padding: 24px 24px 28px;
    gap: 12px;
  }

  .expertise-card__title {
    font-size: 1.1875rem; /* 19px */
  }

  .expertise-card__desc {
    font-size: 0.9375rem; /* 15px */
  }

  .expertise-card__more {
    font-size: 0.9375rem; /* 15px */
  }

  /* Image mobile : un peu moins haute */
  .expertise-card__img-wrap {
    height: 200px;
  }

  /* CTA mobile : visible, pleine largeur */
  .expertises-section__mobile-cta {
    display: flex;
    justify-content: center;
  }

  .expertises-btn--mobile {
    width: 100%;
    justify-content: center;
    font-size: 1rem; /* 16px */
  }
}

/* ── Petit mobile (≤ 575px) ── */
@media (max-width: 575px) {
  .expertises-section {
    padding: 50px 0;
  }

  .expertise-card__img-wrap {
    height: 180px;
  }
}