/* ==========================================================================
   Création WordPress — les 4 expertises
   ========================================================================== */
.wp-list {
  position: relative; overflow: hidden;
  padding: clamp(130px, 14vw, 210px) 40px clamp(90px, 9vw, 140px);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 26%);
}
/* faisceau jaune piloté par le scroll */
.wp-list__beam {
  position: absolute; right: calc(-1 * min(34vw, 300px)); top: -126px;
  width: 1069px; height: 1006px; margin-top: calc(min(110vw, 820px) / -2); border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 238, 51, .3) 0%, rgba(255, 238, 51, .14) 30%, rgba(255, 238, 51, .05) 52%, transparent 70%);
  filter: blur(36px); pointer-events: none; will-change: transform;
}
.wp-list__fade { position: absolute; left: 0; right: 0; top: 0; height: clamp(120px, 14vw, 200px); background: linear-gradient(180deg, var(--ink), rgba(10, 10, 11, 0)); pointer-events: none; }
.wp-list__inner { max-width: 1180px; margin: 0 auto; }
.wp-list__head { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.wp-list__head .title-xl { text-wrap: balance; }

.wp-item { position: relative; margin-top: clamp(84px, 9vw, 132px); scroll-margin-top: 90px; }
.wp-item__halo {
  position: absolute; inset: -14% -8%; pointer-events: none;
  background: radial-gradient(60% 55% at 18% 8%, rgba(255, 238, 51, .16), transparent 70%), radial-gradient(55% 50% at 88% 92%, rgba(255, 238, 51, .10), transparent 72%);
  filter: blur(40px); transition: opacity .25s linear;
}
.wp-item__card {
  position: relative; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(158deg, #23262e 0%, #191c23 48%, #15171d 100%);
  padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 46px) clamp(32px, 3.4vw, 48px);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .55);
}
.wp-item__deco { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; pointer-events: none; }
.wp-item__deco::before { content: ''; position: absolute; left: -10%; bottom: -40%; width: 52%; height: 150%; background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 66%); }
.wp-item__deco::after { content: ''; position: absolute; left: 8%; top: -40%; width: 56%; height: 180%; background: radial-gradient(circle, rgba(255, 238, 51, .08), transparent 62%); }
.wp-item--flip .wp-item__deco::after { left: auto; right: 8%; }
.wp-item__row { position: relative; display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 54px); align-items: center; }
.wp-item__row--top { align-items: flex-start; }
.wp-item__media { flex: 1 1 320px; min-width: min(260px, 100%); margin-top: clamp(-112px, -8vw, -56px); }
.wp-item--flip .wp-item__media { order: 2; }
.wp-item__frame {
  position: relative; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(165deg, #15161a, #0c0d0f); padding: clamp(14px, 1.4vw, 20px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}
.wp-item__zoom {
  position: relative; display: block; width: 100%; aspect-ratio: 1/1; padding: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(127, 127, 127, .08); cursor: zoom-in;
}
.wp-item__star { position: absolute; top: -16px; width: 32px; height: 32px; }
.wp-item__star--left { left: -16px; }
.wp-item__star--right { right: -16px; }
.wp-item__star svg { width: 100%; height: 100%; display: block; fill: var(--yellow); filter: drop-shadow(0 0 18px rgba(255, 238, 51, .7)); }
.wp-item__copy { flex: 1 1 340px; min-width: min(260px, 100%); display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); padding-top: 6px; }
.wp-item--flip .wp-item__copy { order: 1; }
.wp-item__title {
  margin: 0; font-family: Archivo; font-variation-settings: 'wdth' 118, 'wght' 700;
  font-size: clamp(24px, 2.9vw, 25px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; font-weight: 500;
}
.wp-item__title--fixed { font-size: 24px; }
.wp-item__body { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.wp-item__texts { flex: none; min-width: min(220px, 100%); display: flex; flex-direction: column; gap: 14px; }
.wp-item__lead { margin: 0; max-width: 48ch; font: 400 clamp(14px, 1.2vw, 16.5px)/1.75 var(--f-body); color: rgba(242, 242, 240, .72); }
.wp-item__text { margin: 0; max-width: 48ch; font: 400 clamp(13.5px, 1.1vw, 15.5px)/1.75 var(--f-body); color: rgba(242, 242, 240, .72); }
.btn-olive {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: 999px;
  background-color: rgba(162, 155, 75, .5); color: var(--yellow);
  font: 600 13px/1 var(--f-body); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: box-shadow .3s, transform .3s;
}
.btn-olive:hover { box-shadow: 0 0 38px rgba(255, 238, 51, .45); transform: translateY(-2px); color: var(--yellow); }

/* Une fois empilée, l'image passe toujours au-dessus du texte : elle déborde du haut de la carte
   comme sur les blocs non inversés, au lieu de recouvrir le bouton. */
/* En-tête fixe : la marge d'ancre s'ajoute à celle de l'en-tête ; on ne garde que le dépassement
   de l'image au-dessus de la carte, pour que l'image arrive juste sous l'en-tête */
html.header-fixed .wp-item { scroll-margin-top: clamp(34px, 4.8vw, 68px); }
@media (max-width: 840px) {
  .wp-item--flip .wp-item__media { order: 0; }
  .wp-item--flip .wp-item__copy { order: 1; }
}
@media (max-width: 600px) {
  .wp-list { padding-left: 20px; padding-right: 20px; }
}
/* Smartphones : les reflets lumineux intérieurs des cartes sont retirés (sur une carte étroite et haute,
   leur dégradé était coupé net et laissait apparaître un bord vertical) */
@media (max-width: 640px) {
  .wp-item__deco { display: none; }
}

/* --------------------------------------------------------------------------
   Visionneuse d'image (agrandissement au clic)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 72px);
  visibility: hidden; pointer-events: none;
}
.lightbox__bg {
  position: absolute; inset: 0; background: rgba(6, 6, 8, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .45s var(--ease); cursor: zoom-out;
}
.lightbox__img {
  position: relative; display: block; max-width: min(92vw, 1400px); max-height: 86vh; width: auto; height: auto;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 238, 51, .08);
  transform-origin: 0 0; will-change: transform, opacity;
}
.lightbox__close {
  position: absolute; top: clamp(14px, 2.4vw, 28px); right: clamp(14px, 2.4vw, 28px);
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255, 238, 51, .5); background: rgba(16, 16, 18, .8); color: var(--yellow);
  font: 300 26px/1 var(--f-body); cursor: pointer; opacity: 0; transform: scale(.8);
  transition: opacity .35s, transform .35s var(--ease), background .25s, color .25s;
}
.lightbox__close:hover { background: var(--yellow); color: var(--ink); }