/* =============================================================================
   SECTION PRÉSENTATION SOUS-CATÉGORIES  (sous-categorie.css)
   - Bloc 1 : image à gauche / texte à droite  -> .sc-bloc--reverse
   - Bloc 2 & 3 : texte à gauche / image à droite
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. SECTION WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */
.sc-section {
  background-color: #ffffff
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. BLOC (une rangée = une paire texte + image)
   - Par défaut : texte à gauche / image à droite
   - Texte légèrement plus étroit (-50px) et image plus large (+50px)
   ───────────────────────────────────────────────────────────────────────────── */
.sc-bloc {
  display: grid;

  /* ✅ Texte un peu plus petit (-50px) / Image un peu plus grande (+50px) */
  grid-template-columns: calc(40% - 50px) calc(60% + 50px);

  /* ✅ Zones (plus propre que direction: rtl) */
  grid-template-areas: "text img";

  min-height: 480px;
  position: relative;
}

/* ✅ Bloc inversé : image à gauche, texte à droite (+50px côté image / -50px côté texte) */
.sc-bloc--reverse {
  grid-template-columns: calc(60% + 50px) calc(40% - 50px);
  grid-template-areas: "img text";
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. COLONNE TEXTE
   ───────────────────────────────────────────────────────────────────────────── */
.sc-bloc__col--text {
  grid-area: text;
  position: relative;

  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 60px 64px 60px 80px;
}

/* Quand le bloc est inversé : le texte est à droite */
.sc-bloc--reverse .sc-bloc__col--text {
  padding: 60px 80px 60px 64px;
}

.sc-bloc__text-inner {
  max-width: 420px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. TITRE DU BLOC
   ───────────────────────────────────────────────────────────────────────────── */
.sc-bloc__titre {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  line-height: 1.25;
  margin: 0 0 32px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. LISTE DES SOUS-CATÉGORIES
   ───────────────────────────────────────────────────────────────────────────── */
.sc-bloc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-bloc__list-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sc-bloc__list-dash {
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: #b8923a;
  flex-shrink: 0;
}

.sc-bloc__list-link {
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.sc-bloc__list-link:hover,
.sc-bloc__list-link:focus {
  color: #b8923a;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. COLONNE IMAGE
   - Blocs 2 & 3 (normal) : image à droite + espace côté texte à gauche (50px)
   - Bloc 1 (.sc-bloc--reverse) : image à gauche + espace côté texte à droite (50px)
   ───────────────────────────────────────────────────────────────────────────── */
.sc-bloc__col--img {
  grid-area: img;

  background-color: #e8e5e0;
  display: flex;
  align-items: center;

  /* ✅ Par défaut (image à droite) : collée au bord droit */
  justify-content: flex-end;

  /* ✅ Espace côté texte : à gauche de l'image (blocs 2 & 3) */
  padding-left: 50px;
  padding-right: 0;

  overflow: hidden;
  position: relative;
}

/* ✅ Bloc 1 (reverse) : image collée à gauche + espace côté texte à droite */
.sc-bloc--reverse .sc-bloc__col--img {
  justify-content: flex-start;

  padding-left: 0;
  padding-right: 50px;
}

.sc-bloc__img {
  display: block;

  /* ✅ Image plus grande */
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 600px;

  object-fit: contain;

  /* ✅ Image droite */
  transform: none;

  filter: drop-shadow(8px 16px 24px rgba(0, 0, 0, 0.14));
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. ORNEMENT (losange hachuré)
   ───────────────────────────────────────────────────────────────────────────── */
.sc-bloc__col--text::before {
  content: '';
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(184, 146, 58, 0.25) 0px,
      rgba(184, 146, 58, 0.25) 1px,
      transparent 1px,
      transparent 6px
    );
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  opacity: 0.7;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* 1 colonne : image au-dessus, texte dessous */
  .sc-bloc {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "text";
    min-height: unset;
  }

  .sc-bloc--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "text";
  }

  /* ✅ Sur mobile on annule l'espace 50px */
  .sc-bloc__col--img {
    padding-left: 0;
    padding-right: 0;

    /* Base mobile (bloc 1 inclus) */
    justify-content: center;
    min-height: 300px;
  }

  .sc-bloc__img {
    width: 100%;
    max-width: 90%;
    max-height: 280px;
  }

  /* ✅ IMPORTANT : Blocs 2 & 3 (non reverse) → image collée à droite */
  .sc-bloc:not(.sc-bloc--reverse) .sc-bloc__col--img {
    justify-content: flex-end;
  }

  .sc-bloc:not(.sc-bloc--reverse) .sc-bloc__img {
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
  }

  .sc-bloc__col--text,
  .sc-bloc--reverse .sc-bloc__col--text {
    padding: 40px 32px;
  }

  .sc-bloc__text-inner {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .sc-bloc__titre {
    font-size: 1.2rem;
  }

  .sc-bloc__img {
    max-width: 95%;
    max-height: 220px;
  }

  .sc-bloc__col--text,
  .sc-bloc--reverse .sc-bloc__col--text {
    padding: 32px 20px;
  }
    /* ✅ Blocs 2 & 3 (non reverse) → image collée à droite même en 480px */
  .sc-bloc:not(.sc-bloc--reverse) .sc-bloc__img {
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
  }
}