/*
 * ============================================================
 *  NVE — Règles de dimensions d'images par emplacement
 *  Chaque bloc impose les proportions exactes du gabarit.
 *  L'image remplit toujours le cadre (object-fit: cover)
 *  sans déformation, quelle que soit sa taille originale.
 * ============================================================
 */

/* ──────────────────────────────────────────────
   PRINCIPE GLOBAL
   Tout img à l'intérieur d'un slot doit remplir
   son conteneur proprement.
   ────────────────────────────────────────────── */
[class*="-thumb"] img,
[class*="-thumb-"] img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

/* ──────────────────────────────────────────────
   ABOUT  (448 × 536 px  →  ratio 56/67)
   ────────────────────────────────────────────── */
.about-thumb-1 {
  max-width: 448px;
  overflow: hidden;
  border-radius: 20px;
  flex-shrink: 0;
  align-self: flex-start;
}
.about-thumb-1 img {
  aspect-ratio: 448 / 536;   /* 0.836 */
  width: 100%;
  height: auto;
  min-height: unset;
}

/* ──────────────────────────────────────────────
   ABOUT-2  (336 × 357 px  →  quasi carré)
   ────────────────────────────────────────────── */
.about-thumb-2 {
  max-width: 336px;
  overflow: hidden;
  border-radius: 20px;
  flex-shrink: 0;
  align-self: flex-start;
}
.about-thumb-2 img {
  aspect-ratio: 336 / 357;   /* 0.941 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   HISTORY-1  (422 × 587 px  →  portrait 2/3)
   ────────────────────────────────────────────── */
.history-thumb-1 {
  overflow: hidden;
  max-width: 422px;
  max-height: 520px;
  align-self: flex-start;
  border-radius: 20px;
  flex-shrink: 0;
}
.history-thumb-1 img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  aspect-ratio: unset;         /* neutralise .about-thumb-1 img */
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ──────────────────────────────────────────────
   HISTORY-2  (646 × 449 px  →  paysage 3/2)
   Surcharge max-width de .about-thumb-2 (336px)
   ────────────────────────────────────────────── */
.history-thumb-2 {
  overflow: hidden;
  max-width: 500px !important; /* surcharge about-thumb-2 336px */
  max-height: 380px;
  align-self: flex-start;
  border-radius: 20px;
  flex-shrink: 0;
}
.history-thumb-2 img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  aspect-ratio: unset;         /* neutralise .about-thumb-2 img */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ──────────────────────────────────────────────
   SERVICE  (424 × 238 px  →  paysage 16/9)
   ────────────────────────────────────────────── */
.service-thumb {
  overflow: hidden;
  max-width: 220px;
  width: 220px;
  flex-shrink: 0;
  border-radius: 14px;
}
.service-thumb img {
  aspect-ratio: 424 / 238;   /* ~16/9 */
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ──────────────────────────────────────────────
   TEAM  (424 × 520 px  →  portrait 4/5)
   ────────────────────────────────────────────── */
.team-thumb {
  overflow: hidden;
  border-radius: 16px;
}
.team-thumb img {
  aspect-ratio: 424 / 520;   /* 0.815 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   TEAM THREE  (330 × 600 px  →  portrait 11/20)
   ────────────────────────────────────────────── */
.team-three-thumb img {
  aspect-ratio: 330 / 600;   /* 0.55 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   TEAM FOUR  (300 × 400 px  →  portrait 3/4)
   ────────────────────────────────────────────── */
.team-four-thumb img {
  aspect-ratio: 300 / 400;   /* 0.75 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   TEAM TWO  (312 × 201 px  →  paysage)
   ────────────────────────────────────────────── */
.team-two-thumb img {
  aspect-ratio: 312 / 201;   /* 1.552 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   COMMUNITY  (370 × 500 px  →  portrait 3/4)
   ────────────────────────────────────────────── */
.community-thumb {
  overflow: hidden;
  border-radius: 16px;
}
.community-thumb img {
  aspect-ratio: 370 / 500;   /* 0.74 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   BLOG  (312 × 345 px  →  portrait)
   ────────────────────────────────────────────── */
.blog-thumb {
  overflow: hidden;
  border-radius: 16px;
}
.blog-thumb img {
  aspect-ratio: 312 / 345;   /* 0.904 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   BLOG TWO  (364 × 250 px  →  paysage)
   ────────────────────────────────────────────── */
.blog-two-thumb img {
  aspect-ratio: 364 / 250;   /* 1.456 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   BLOG THREE  (404 × 260 px  →  paysage)
   ────────────────────────────────────────────── */
.blog-three-thumb img {
  aspect-ratio: 404 / 260;   /* 1.554 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   BLOG FOUR  (523 × 550 px  →  quasi carré)
   ────────────────────────────────────────────── */
.blog-four-thumb img {
  aspect-ratio: 523 / 550;   /* 0.951 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   EVENT TWO  (648 × 400 px  →  paysage 16/10)
   ────────────────────────────────────────────── */
.event-two-thumb {
  overflow: hidden;
  border-radius: 16px;
}
.event-two-thumb img {
  aspect-ratio: 648 / 400;   /* 1.62 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   CHOOSE-US / SERVICE ACTIVITES
   (345 × 375 px  →  portrait)
   ────────────────────────────────────────────── */
.choose-us-thumb img {
  aspect-ratio: 345 / 375;   /* 0.92 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   COMPASSION THREE  (424 × 580 px  →  portrait)
   ────────────────────────────────────────────── */
.compassion-three-thumb img {
  aspect-ratio: 424 / 580;   /* 0.731 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   PROJECT THREE  (424 × 490 px  →  portrait)
   ────────────────────────────────────────────── */
.project-three-thumb img {
  aspect-ratio: 424 / 490;   /* 0.865 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   PROJECT FOUR  (392 × 647 px  →  portrait)
   ────────────────────────────────────────────── */
.project-four-thumb img {
  aspect-ratio: 392 / 647;   /* 0.606 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   CONTACT THUMB  (594 × 653 px  →  portrait)
   ────────────────────────────────────────────── */
.contact-thumb {
  overflow: hidden;
  border-radius: 20px;
}
.contact-thumb img {
  aspect-ratio: 594 / 653;   /* 0.91 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   SERVICE THREE / TWO  (648×400 / 404×250)
   ────────────────────────────────────────────── */
.service-three-thumb img {
  aspect-ratio: 648 / 400;   /* 1.62 */
  width: 100%;
  height: auto;
}
.service-two-thumb img {
  aspect-ratio: 404 / 250;   /* 1.616 */
  width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────
   TESTIMONIAL  (163 × 156 px  →  quasi carré)
   ────────────────────────────────────────────── */
.testimonial-three-thumb img {
  aspect-ratio: 163 / 156;   /* 1.045 */
  width: 100%;
  height: auto;
  border-radius: 50%;
}

/* ──────────────────────────────────────────────
   COMMENTAIRES / AUTEURS  (80 × 80 px  →  carré)
   ────────────────────────────────────────────── */
.comment-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.recend-post-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────
   BREADCRUMB BACKGROUND  (1908 × 550 px)
   Section bannière de titre de page
   ────────────────────────────────────────────── */
.breadcrumb-area {
  background-size: cover;
  background-position: center center;
}

/* ──────────────────────────────────────────────
   RESPONSIVE — en dessous de 768 px,
   toutes les images reprennent leur fluidité
   ────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  [class*="-thumb"] img,
  [class*="-thumb-"] img {
    aspect-ratio: unset;
    height: auto;
  }
}