/**
 * Page « Combats politiques » — styles repris de la maquette, chargés UNIQUEMENT sur le
 * gabarit template-combats.php (voir inc/enqueue.php). Tout est scopé sous
 * « .combats-page » : les classes partagées (.wrap, .eyebrow, .reveal, .hr, .sec-title,
 * .hl) sont redéfinies ici pour rester isolées des autres pages. La police « Anton »
 * vient de style.css (@font-face, globale).
 *
 * @package medecins-du-monde
 */

.combats-page {
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.combats-page h1,
.combats-page h2 {
  margin: 0;
  font-weight: 400;
}
.combats-page p {
  margin: 0;
}
.combats-page a {
  text-decoration: none;
  color: inherit;
}
.combats-page .wrap {
  padding: 0 26px;
}

/* Étiquette inclinée + animations d'apparition (repris du système du site). */
.combats-page .eyebrow {
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 22px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
  background: #e9511c;
  border-radius: 5px;
  transform: rotate(-4.14deg);
}
@keyframes cb-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.combats-page .hr {
  animation: cb-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.combats-page .hr2 { animation-delay: 0.12s; }
.combats-page .hr3 { animation-delay: 0.22s; }
.combats-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.combats-page .reveal.in {
  opacity: 1;
  transform: none;
}
.combats-page .sec-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #1d1a55;
}
.combats-page .hl {
  color: #1d1a55;
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 60%;
  background-position: 0 62%;
}
.combats-page .btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #e9511c;
  color: #fff;
  border: 1px solid #e9511c;
  border-radius: 5px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.combats-page .btn-orange:hover { background: #d1440f; }
.combats-page .btn-orange img { width: 14px; filter: brightness(0) invert(1); transition: transform 0.3s ease; }
.combats-page .btn-orange:hover img { transform: translateX(4px); }

/* ===== HERO ===== */
.combats-page .cp-hero {
  position: relative;
  overflow: hidden;
  padding: 213px 0 70px; /* dégage l'en-tête fixe desktop (146px) + ~67px au-dessus du sur-titre, comme la maquette */
  text-align: left;
  background: #055da8;
  color: #fff;
}
.combats-page .cp-hero .wrap { position: relative; z-index: 1; }
/* Le sur-titre « Nos combats » se pose sur le titre : il sort du flux et se cale sur le
   haut du titre, comme les étiquettes de section de l'accueil. La hauteur qu'il occupait
   dans le flux (27px) est rendue au titre par la marge de .cp-hero-head. */
.combats-page .cp-hero-head { position: relative; margin-top: 27px; }
.combats-page .cp-eyebrow-hr {
  position: absolute;
  top: -46px;
  left: 0;
  z-index: 2;
}
.combats-page .cp-hero .eyebrow { margin-bottom: 0; }
.combats-page .cp-hero h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.combats-page .cp-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.combats-page .cp-lead {
  font-size: 16px;
  line-height: 1.7;
  color: #dbe8f5;
  max-width: 660px;
  margin: 0;
  flex: 1 1 0;
  min-width: 320px;
}
.combats-page .cp-lead strong { color: #fff; }
.combats-page .cp-ctas { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* ===== MAIN ===== */
.combats-page .cp-main { padding: 76px 0 84px; }
.combats-page .cp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}

/* Combats politiques : 4 tuiles colorées. */
.combats-page .cp-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.combats-page .cp-col {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 44px 40px;
  border-radius: 20px;
  min-height: 360px;
  color: #fff;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}
.combats-page .cp-col:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(29, 26, 85, 0.2); }
.combats-page .cp-col.k1 { background: #1d1a55; }
.combats-page .cp-col.k2 { background: #e9511c; }
.combats-page .cp-col.k3 { background: #00af9c; }
.combats-page .cp-col.k4 { background: #055da8; }
.combats-page .cp-col.k5 { background: #bddfec; }
.combats-page .cp-col.k6 { background: #141544; }
/* Fond clair / foncé : le texte blanc par défaut ne passe pas, on l'ajuste. */
.combats-page .cp-col.k5 .cp-col-title,
.combats-page .cp-col.k5 .cp-col-desc { color: #e9511c; }
.combats-page .cp-col.k6 .cp-col-title,
.combats-page .cp-col.k6 .cp-col-desc { color: #ffe000; }
.combats-page .cp-col-title {
  display: block;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
}
.combats-page .cp-col-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-end;
  justify-content: flex-end; /* description + bouton collés en bas de la tuile */
  flex: 1 1 0;
  margin-top: auto;
}
.combats-page .cp-col-desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
}
.combats-page .cp-col-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 6px;
  padding: 12px 22px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  width: fit-content;
  align-self: flex-end;
  transition: gap 0.3s ease;
}
.combats-page .cp-col.k1 .cp-col-cta { color: #1d1a55; }
.combats-page .cp-col.k2 .cp-col-cta { color: #e9511c; }
.combats-page .cp-col.k3 .cp-col-cta { color: #00857a; }
.combats-page .cp-col.k4 .cp-col-cta { color: #055da8; }
.combats-page .cp-col.k5 .cp-col-cta { color: #e9511c; }
.combats-page .cp-col.k6 .cp-col-cta { color: #141544; background: #ffe000; }
.combats-page .cp-col:hover .cp-col-cta { gap: 16px; }
.combats-page .cp-col-cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* Combats transversaux : 2 cartes. */
.combats-page .trans-head {
  margin: 16px 0 0;
}
.combats-page .trans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.combats-page .trans-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 38px 36px;
  border-radius: 18px;
  min-height: 360px;
  justify-content: space-between;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.combats-page .trans-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(29, 26, 85, 0.11); }
.combats-page .trans-card.patterned { background: #bddfec; }
.combats-page .trans-card.dark { background: #141544; }
.combats-page .combat-title {
  display: flex;
  flex-direction: column;
  gap: 52px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
}
.combats-page .trans-card.patterned .combat-title,
.combats-page .trans-card.patterned .combat-desc { color: #e9511c; }
.combats-page .trans-card.dark .combat-title,
.combats-page .trans-card.dark .combat-desc { color: #ffe000; }
.combats-page .combat-desc { font-size: 15px; line-height: 1.7; text-align: right; margin-top: auto; }
.combats-page .combat-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 22px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  width: fit-content;
  align-self: flex-end;
  white-space: nowrap;
  transition: gap 0.3s ease;
}
.combats-page .trans-card.patterned .combat-cta { color: #e9511c; }
.combats-page .trans-card.dark .combat-cta { color: #141544; background: #ffe000; }
.combats-page .trans-card:hover .combat-cta { gap: 16px; }
.combats-page .combat-cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* ===== RESPONSIVE ===== */
/* Sous 1279px l'en-tête fixe mesure 101px (contre 146px au-delà) : on réduit le
   dégagement pour garder ~67px au-dessus du sur-titre, comme la maquette. */
@media (max-width: 1279px) {
  .combats-page .cp-hero { padding-top: 140px; } /* en-tête 101px + ~39px de respiration sur tablette/mobile */
  .combats-page .eyebrow { font-size: 18px; line-height: 27px; }
  .combats-page .cp-eyebrow-hr { top: -33px; }
}
@media (max-width: 940px) {
  .combats-page .cp-columns,
  .combats-page .trans-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    margin: 0 -26px;
    padding: 0 26px 8px;
    scrollbar-width: none;
  }
  .combats-page .cp-columns::-webkit-scrollbar,
  .combats-page .trans-grid::-webkit-scrollbar { display: none; }
  .combats-page .cp-col,
  .combats-page .trans-card { flex: 0 0 84%; scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .combats-page .eyebrow { font-size: 14px; line-height: 21px; }
  .combats-page .cp-eyebrow-hr { top: -29px; }
}
@media (max-width: 640px) {
  .combats-page .cp-hero { padding-bottom: 50px; }
  .combats-page .cp-main { padding: 52px 0 60px; }
  .combats-page .wrap { padding: 0 20px; }
  .combats-page .cp-columns,
  .combats-page .trans-grid { margin: 0 -20px; padding: 0 20px 8px; }
  .combats-page .cp-col,
  .combats-page .trans-card { flex: 0 0 86%; }
  .combats-page .cp-col { padding: 32px 26px; min-height: 0; }
  .combats-page .trans-card { padding: 30px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .combats-page .hr,
  .combats-page .reveal { animation: none; opacity: 1; transform: none; transition: none; }
}

@media (min-width: 1700px) {
  .combats-page .wrap {
    padding: 0 1.8057vw;
  }
  .combats-page .eyebrow {
    padding: 0.5556vw 1.1112vw;
    margin-bottom: 1.5279vw;
    font-size: 1.9446vw;
    border-radius: 0.3472vw;
  }
  .combats-page .reveal {
    transform: translateY(1.5279vw);
  }
  .combats-page .sec-title {
    font-size: clamp(1.9446vw, 3.6vw, 3.1946vw);
  }
  .combats-page .btn-orange {
    gap: 0.8334vw;
    border: 0.0694vw solid #e9511c;
    border-radius: 0.3472vw;
    padding: 0.9723vw 1.8057vw;
    font-size: 1.1112vw;
  }
  .combats-page .btn-orange img {
    width: 0.9723vw;
  }
  .combats-page .btn-orange:hover img {
    transform: translateX(0.2778vw);
  }
  .combats-page .cp-hero {
    padding: 14.7926vw 0 4.8614vw;
  }
  .combats-page .cp-hero-head {
    margin-top: 1.8751vw;
  }
  .combats-page .cp-eyebrow-hr {
    top: -3.1946vw;
  }
  .combats-page .cp-hero h1 {
    font-size: clamp(3.0557vw, 7vw, 7.2227vw);
  }
  .combats-page .cp-hero-row {
    gap: 3.0557vw;
    margin-top: 1.8057vw;
  }
  .combats-page .cp-lead {
    font-size: 1.1112vw;
    max-width: 45.8361vw;
    min-width: 22.2236vw;
  }
  .combats-page .cp-ctas {
    gap: 0.8334vw;
  }
  .combats-page .cp-main {
    padding: 5.2781vw 0 5.8337vw;
  }
  .combats-page .cp-head {
    gap: 2.2224vw;
    margin-bottom: 2.639vw;
  }
  .combats-page .cp-columns {
    gap: 1.1112vw;
  }
  .combats-page .cp-col {
    gap: 1.2501vw;
    padding: 3.0557vw 2.7779vw;
    border-radius: 1.389vw;
    min-height: 25.0015vw;
  }
  .combats-page .cp-col:hover {
    transform: translateY(-0.4167vw);
    box-shadow: 0 1.8057vw 3.7502vw rgba(29, 26, 85, 0.2);
  }
  .combats-page .cp-col-title {
    font-size: clamp(1.8057vw, 3vw, 2.9168vw);
  }
  .combats-page .cp-col-right {
    gap: 1.5279vw;
  }
  .combats-page .cp-col-desc {
    font-size: 1.0765vw;
  }
  .combats-page .cp-col-cta {
    gap: 0.6945vw;
    border-radius: 0.4167vw;
    padding: 0.8334vw 1.5279vw;
    font-size: 0.9723vw;
  }
  .combats-page .cp-col:hover .cp-col-cta {
    gap: 1.1112vw;
  }
  .combats-page .cp-col-cta svg {
    width: 0.9723vw;
    height: 0.9723vw;
  }
  .combats-page .trans-head {
    margin: 1.1112vw 0 0;
  }
  .combats-page .trans-grid {
    gap: 1.1112vw;
  }
  .combats-page .trans-card {
    gap: 0.9723vw;
    padding: 2.639vw 2.5002vw;
    border-radius: 1.2501vw;
    min-height: 25.0015vw;
  }
  .combats-page .trans-card:hover {
    transform: translateY(-0.4167vw);
    box-shadow: 0 1.5279vw 3.1946vw rgba(29, 26, 85, 0.11);
  }
  .combats-page .combat-title {
    gap: 3.6113vw;
    font-size: clamp(1.8057vw, 3vw, 2.9168vw);
  }
  .combats-page .combat-desc {
    font-size: 1.0417vw;
  }
  .combats-page .combat-cta {
    gap: 0.6945vw;
    border-radius: 0.4167vw;
    padding: 0.8334vw 1.5279vw;
    font-size: 0.9723vw;
  }
  .combats-page .trans-card:hover .combat-cta {
    gap: 1.1112vw;
  }
  .combats-page .combat-cta svg {
    width: 0.9723vw;
    height: 0.9723vw;
  }
}