/*
 * Page « Nos partenaires » — styles.
 *
 * Repris de la maquette (partenaires.html), chargés UNIQUEMENT sur le gabarit
 * template-partenaires.php (voir inc/enqueue.php). Tout est scopé sous
 * « .partenaires-page » : plusieurs classes (.wrap, .eyebrow, .reveal) sont
 * partagées avec d'autres gabarits et ne doivent pas fuir vers l'en-tête, le pied de
 * page ou les autres pages. La police « Anton » est fournie globalement par style.css
 * (@font-face) → non redéclarée ici.
 *
 * Écarts assumés par rapport à la maquette (rendu identique, markup plus propre) :
 *   • la maquette portait des styles en ligne issus de son outil de design ; les
 *     valeurs typographiques (sur-titre 18 px, remerciement 18 px, bouton 16 px)
 *     sont reprises ici, les hauteurs mesurées (height: …px) sont remplacées par la
 *     hauteur naturelle du contenu — sauf la ligne du sur-titre du bandeau, dont la
 *     hauteur fixe est ce qui glisse la pastille orange au-dessus du titre ;
 *   • la couleur d'un groupe de partenaires arrive par la variable CSS --pt-accent
 *     posée sur la section (au lieu d'un style en ligne sur chaque titre) ;
 *   • la maquette intercalait un bloc vide de 40 px entre les groupes et le bloc de
 *     fin : il est remplacé par le padding bas de .pt-main, resserré à la demande du
 *     client (l'écart maquette laissait trop de blanc sous la dernière grille) ;
 *   • même resserrage sous la carte bleue : le pied de page apporte déjà sa propre
 *     marge haute de 42 px (style.css), le padding bas de .pt-outro s'ajoutait à elle ;
 *   • le remerciement garde une taille fluide (clamp) plafonnée à la valeur de la
 *     maquette : identique en desktop, lisible en mobile.
 *
 * @package medecins-du-monde
 */

/* ============================================================================
 * Base
 * ========================================================================= */

.partenaires-page,
.partenaires-page *,
.partenaires-page *::before,
.partenaires-page *::after {
  box-sizing: border-box;
}
.partenaires-page {
  --pt-gutter: 26px;
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.partenaires-page h1,
.partenaires-page h2 {
  margin: 0;
  font-weight: 400;
}
.partenaires-page p {
  margin: 0;
}
.partenaires-page a {
  text-decoration: none;
  color: inherit;
}
.partenaires-page button {
  font-family: inherit;
  cursor: pointer;
}
.partenaires-page .wrap {
  padding: 0 var(--pt-gutter);
}

/* Barre de progression de lecture (pilotée par assets/js/partenaires.js). */
.partenaires-page .pt-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #e9511c;
  z-index: 3000;
}

/* ============================================================================
 * Animations d'apparition
 *
 * .hr  = à l'arrivée sur la page (bandeau) ;
 * .reveal = au défilement, la classe « in » étant ajoutée par partenaires.js.
 * ========================================================================= */

@keyframes pt-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.partenaires-page .hr {
  animation: pt-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}
.partenaires-page .hr2 {
  animation-delay: .12s;
}
.partenaires-page .hr3 {
  animation-delay: .22s;
}
.partenaires-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.partenaires-page .reveal.in {
  opacity: 1;
  transform: none;
}
/* Sans JavaScript, personne n'ajoute « in » : on révèle tout d'office. */
@media (scripting: none) {
  .partenaires-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
 * Bandeau
 * ========================================================================= */

.partenaires-page .pt-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 70px;
  text-align: center;
  background: #055da8;
  color: #fff;
}
.partenaires-page .pt-hero .wrap {
  position: relative;
  z-index: 1;
}
.partenaires-page .pt-hero-head {
  position: relative;
  margin-top: 40px;
}
.partenaires-page .pt-hero-eyebrow {
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  z-index: 2;
}
.partenaires-page .eyebrow {
  display: inline-block;
  padding: 8px 16px;
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  line-height: normal;
  white-space: nowrap;
  text-transform: uppercase;
  color: #fff;
  background: #e9511c;
  border-radius: 5px;
  transform: rotate(-4.14deg);
}
.partenaires-page .pt-hero h1 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.partenaires-page .pt-lead {
  max-width: 600px;
  margin: 26px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: #dbe8f5;
}
.partenaires-page .pt-lead strong {
  color: #fff;
}

/* ============================================================================
 * Groupes de partenaires
 * ========================================================================= */

.partenaires-page .pt-main {
  padding: 20px 0 16px;
}
.partenaires-page .pt-group {
  padding: 52px 0;
  border-bottom: 1px solid #eaeef6;
}
.partenaires-page .pt-group:last-of-type {
  border-bottom: none;
}
.partenaires-page .pt-ghead {
  margin-bottom: 40px;
  text-align: center;
}
.partenaires-page .pt-gtitle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--pt-accent, #1d1a55);
}
.partenaires-page .pt-gtitle::before,
.partenaires-page .pt-gtitle::after {
  content: '';
  width: 40px;
  height: 3px;
  border-radius: 50px;
  background: currentColor;
  opacity: .25;
}
.partenaires-page .logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.partenaires-page .logo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.partenaires-page .logo-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 14px;
  overflow: hidden;
  background: #f5f8fb;
  border-radius: 16px;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .35s, background-color .3s;
}
.partenaires-page .logo-cell:hover .logo-ph {
  transform: translateY(-6px);
  background: #fff;
}
.partenaires-page .logo-ph img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/*
 * Logo pas encore fourni : réserve visuelle de la maquette (cadre pointillé,
 * pictogramme et nom du partenaire). Dès qu'une image est choisie dans le
 * back-office, elle remplace ce bloc.
 */
.partenaires-page .logo-ph-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: center;
  background: rgba(0, 0, 0, .04);
  border: 1px dashed rgba(0, 0, 0, .25);
}
.partenaires-page .logo-ph-empty svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #9aa1a8;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.partenaires-page .logo-ph-empty span {
  font-size: 13px;
  line-height: 1.35;
  color: #63666b;
}

/* ============================================================================
 * Bloc de fin : carte bleue (bandeau « merci », remerciement, invitation)
 * ========================================================================= */

.partenaires-page .pt-outro {
  padding: 8px 0 0;
}
.partenaires-page .note-card {
  position: relative;
  overflow: hidden;
  background: #055da8;
  border-radius: 22px;
}

/* Bandeau défilant : la liste des mots est rendue deux fois, le défilement de
   -50 % boucle donc sans saut. */
.partenaires-page .merci-marquee {
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.partenaires-page .merci-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: pt-merci 26s linear infinite;
}
.partenaires-page .merci-track span {
  font-family: 'Anton', sans-serif;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .32);
}
.partenaires-page .merci-track span.solid {
  color: #fff;
}
.partenaires-page .merci-track .dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #e9511c;
}
@keyframes pt-merci {
  to {
    transform: translateX(-50%);
  }
}

.partenaires-page .note-thanks {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 48px 8px;
  text-align: center;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: #dbe8f5;
}

.partenaires-page .pt-invite {
  position: relative;
  overflow: hidden;
  margin-top: 36px;
  padding: 44px 40px 35px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.partenaires-page .pt-invite .k {
  margin-bottom: 26px;
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #bddfec;
}
.partenaires-page .pt-motif {
  width: 120px;
  height: 120px;
  margin: 0 auto 30px;
  background: url('../svgs/partenaires/bird.svg') no-repeat center / contain;
  filter: brightness(0) invert(1);
  animation: pt-motif 3s ease-in-out infinite;
}
@keyframes pt-motif {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(.9);
    opacity: .8;
  }
}
.partenaires-page .pt-invite h2 {
  margin-bottom: 24px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
.partenaires-page .pt-invite h2 .hl {
  color: #bddfec;
}
.partenaires-page .pt-invite-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.partenaires-page .btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  background: #e9511c;
  border: 1px solid #e9511c;
  border-radius: 5px;
  transition: background-color .3s;
}
.partenaires-page .btn-orange:hover {
  background: #d1440f;
}
.partenaires-page .btn-orange img {
  width: 14px;
  transition: transform .3s;
}
.partenaires-page .btn-orange:hover img {
  transform: translateX(4px);
}


/* ============================================================================
 * Offset de l'en-tête
 *
 * Le thème rend le <header> du site en position:fixed (overlay). Sur ce gabarit —
 * comme sur Notre équipe / Contact / la Politique de confidentialité — on le remet
 * dans le flux (sticky) pour que le bandeau bleu s'affiche SOUS lui.
 * ========================================================================= */

body.page-template-template-partenaires header {
  position: sticky;
}

/* ============================================================================
 * Adaptations
 * ========================================================================= */

@media (min-width: 1500px) {
  .partenaires-page .logo-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1279px) {
  .partenaires-page {
    --pt-gutter: 10px;
  }
  .partenaires-page .eyebrow {
    font-size: 18px;
    line-height: 27px;
  }
  .partenaires-page .pt-hero-eyebrow {
    top: -33px;
  }
}

@media (max-width: 767px) {
  .partenaires-page .eyebrow {
    font-size: 14px;
    line-height: 21px;
  }
  .partenaires-page .pt-hero-eyebrow {
    top: -30px;
  }
}

@media (max-width: 1040px) {
  .partenaires-page .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .partenaires-page .pt-hero {
    padding: 58px 0 50px;
  }
  .partenaires-page .pt-group {
    padding: 40px 0;
  }
  .partenaires-page .logo-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .partenaires-page .note-thanks {
    padding: 36px 22px 8px;
  }
  .partenaires-page .pt-invite {
    padding: 56px 22px 50px;
  }
  .partenaires-page .pt-motif {
    width: 104px;
    height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partenaires-page .hr,
  .partenaires-page .reveal,
  .partenaires-page .reveal.in {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .partenaires-page .merci-track,
  .partenaires-page .pt-motif {
    animation: none;
  }
}

@media (min-width: 1700px) {
  .partenaires-page {
    --pt-gutter: 1.8057vw;
  }
  .partenaires-page .pt-progress {
    height: 0.2778vw;
  }
  .partenaires-page .reveal {
    transform: translateY(1.5279vw);
  }
  .partenaires-page .pt-hero {
    padding: 5.8337vw 0 4.8614vw;
  }
  .partenaires-page .pt-hero-head {
    margin-top: 2.7779vw;
  }
  .partenaires-page .pt-hero-eyebrow {
    top: -3.3335vw;
  }
  .partenaires-page .eyebrow {
    padding: 0.5556vw 1.1112vw;
    font-size: 1.9446vw;
    border-radius: 0.3472vw;
  }
  .partenaires-page .pt-hero h1 {
    font-size: clamp(3.0557vw, 7vw, 7.2227vw);
  }
  .partenaires-page .pt-lead {
    max-width: 41.6692vw;
    margin: 1.8057vw auto 0;
    font-size: 1.1112vw;
  }
  .partenaires-page .pt-main {
    padding: 1.389vw 0 1.1112vw;
  }
  .partenaires-page .pt-group {
    padding: 3.6113vw 0;
    border-bottom: 0.0694vw solid #eaeef6;
  }
  .partenaires-page .pt-ghead {
    margin-bottom: 2.7779vw;
  }
  .partenaires-page .pt-gtitle {
    gap: 0.9723vw;
    font-size: clamp(1.2501vw, 2.2vw, 1.9446vw);
  }
  .partenaires-page .pt-gtitle::before,
  .partenaires-page .pt-gtitle::after {
    width: 2.7779vw;
    height: 0.2083vw;
    border-radius: 3.4724vw;
  }
  .partenaires-page .logo-grid {
    gap: 1.5279vw;
  }
  .partenaires-page .logo-ph {
    padding: 0.9723vw;
    border-radius: 1.1112vw;
  }
  .partenaires-page .logo-cell:hover .logo-ph {
    transform: translateY(-0.4167vw);
  }
  .partenaires-page .logo-ph-empty {
    gap: 0.8334vw;
    padding: 0.6945vw;
    border: 0.0694vw dashed rgba(0, 0, 0, .25);
  }
  .partenaires-page .logo-ph-empty svg {
    width: 1.6668vw;
    height: 1.6668vw;
  }
  .partenaires-page .logo-ph-empty span {
    font-size: 0.9028vw;
  }
  .partenaires-page .pt-outro {
    padding: 0.5556vw 0 0;
  }
  .partenaires-page .note-card {
    border-radius: 1.5279vw;
  }
  .partenaires-page .merci-marquee {
    padding: 1.389vw 0;
    border-bottom: 0.0694vw solid rgba(255, 255, 255, .22);
  }
  .partenaires-page .merci-track {
    gap: 2.7779vw;
  }
  .partenaires-page .merci-track span {
    font-size: clamp(1.8057vw, 3.4vw, 3.1946vw);
  }
  .partenaires-page .merci-track .dot {
    width: 0.8334vw;
    height: 0.8334vw;
  }
  .partenaires-page .note-thanks {
    max-width: 56.9479vw;
    padding: 2.7779vw 3.3335vw 0.5556vw;
    font-size: clamp(1.0417vw, 1.6vw, 1.2501vw);
  }
  .partenaires-page .pt-invite {
    margin-top: 2.5002vw;
    padding: 3.0557vw 2.7779vw 2.4307vw;
    border-top: 0.0694vw solid rgba(255, 255, 255, .16);
  }
  .partenaires-page .pt-invite .k {
    margin-bottom: 1.8057vw;
    font-size: 0.9723vw;
  }
  .partenaires-page .pt-motif {
    width: 8.3338vw;
    height: 8.3338vw;
    margin: 0 auto 2.0835vw;
  }
  .partenaires-page .pt-invite h2 {
    margin-bottom: 1.6668vw;
    font-size: clamp(2.7779vw, 6.4vw, 6.3893vw);
  }
  .partenaires-page .pt-invite-cta {
    gap: 0.8334vw;
  }
  .partenaires-page .btn-orange {
    gap: 0.8334vw;
    padding: 1.0417vw 2.0835vw;
    font-size: 1.1112vw;
    border: 0.0694vw solid #e9511c;
    border-radius: 0.3472vw;
  }
  .partenaires-page .btn-orange img {
    width: 0.9723vw;
  }
  .partenaires-page .btn-orange:hover img {
    transform: translateX(0.2778vw);
  }
}