/* ==========================================================================
   Sous-pages WordPress (site vitrine, e-commerce, thème unique, refonte)
   ========================================================================== */
.wpd-grid {
  position: relative; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.wpd-copy { min-width: 0; }
.wpd-eyebrow { display: flex; align-items: center; gap: 14px; }
.wpd-title {
  margin: 20px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 98, 'wght' 700;
  font-size: clamp(28px, 4.4vw, 64px); line-height: 1; letter-spacing: -.035em;
}
/* largeur volontairement supérieure à la colonne (comme dans la maquette), bornée à l'écran */
.wpd-title--wide { width: min(800px, calc(100vw - 2 * var(--gutter))); }
.wpd-title .muted, .wpd-method__title .muted { color: rgba(16, 16, 18, .3); }
.wpd-visual { position: relative; min-width: 0; }
/* Visuel présenté en carte à fond uni (sans fondu des bords), étiré sur toute la hauteur du texte voisin.
   Le fond reprend le gris des visuels fournis : l'image, contenue, se fond dans la carte. */
.wpd-card { overflow: hidden; width: 100%; align-self: stretch; border-radius: clamp(12px, 1.1vw, 16px); background: #d9d9d9; }
/* Visuel sur fond sombre (bloc « Notre engagement ») : halo lumineux et cadre aux bords fondus */
.wpd-shot__halo { position: absolute; left: 12%; right: 8%; top: 18%; bottom: 10%; border-radius: 999px; background: radial-gradient(circle, rgba(255, 238, 51, .14), transparent 65%); filter: blur(30px); }
.wpd-shot__frame { aspect-ratio: 535/350; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 70%, transparent 100%); }
/* Mockup détouré (fond transparent) : pas de fondu des bords */
.wpd-shot--mockup .wpd-shot__frame { -webkit-mask-image: none; mask-image: none; }

/* Héros : contenu centré horizontalement et verticalement, sans visuel.
   Le haut compense l'en-tête (≈ 96 px, superposé à la bannière) pour centrer dans l'espace visible. */
.wpd-hero {
  --hero-pad: clamp(56px, 9vh, 110px);
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(92vh, 880px); min-height: min(92svh, 880px);
  padding: calc(96px + var(--hero-pad)) var(--gutter) var(--hero-pad);
}
.wpd-hero__glow { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 40%, rgba(255, 238, 51, .09), transparent 60%); pointer-events: none; }
.wpd-hero__content { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wpd-hero__title {
  margin: 22px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 96, 'wght' 700;
  font-size: clamp(42px, 6vw, 92px); line-height: .95; letter-spacing: -.045em;
}
.wpd-hero__intro { margin: clamp(24px, 2.6vw, 34px) 0 0; max-width: 60ch; text-wrap: pretty; font: 400 clamp(13.5px, 1.15vw, 15.5px)/1.75 var(--f-body); color: rgba(244, 244, 242, .62); }
.wpd-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 2.4vw, 34px); margin-top: clamp(28px, 3vw, 40px); }

/* Pourquoi… (fond clair) */
.wpd-why {
  position: relative; background: var(--paper); color: var(--ink-text);
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  padding: clamp(80px, 10vw, 150px) var(--gutter);
}
.wpd-text { margin: clamp(22px, 2.4vw, 30px) 0 0; max-width: 52ch; font: 400 clamp(13.5px, 1.1vw, 15.5px)/1.75 var(--f-body); color: rgba(16, 16, 18, .62); }
.wpd-features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px); max-width: 520px; margin-top: clamp(40px, 4.4vw, 60px);
}
.wpd-feature { display: flex; flex-direction: column; gap: 10px; }
.wpd-feature svg { width: 26px; height: 26px; fill: none; stroke: var(--yellow-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wpd-feature h3 { margin: 6px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: 17px; letter-spacing: -.015em; }
.wpd-feature p { margin: 0; font: 400 13px/1.6 var(--f-body); color: rgba(16, 16, 18, .6); }
.wpd-why__visual { aspect-ratio: 395/250; }

/* Notre engagement */
.wpd-engage { position: relative; overflow: hidden; background: var(--ink); padding: clamp(80px, 10vw, 150px) var(--gutter); }
.wpd-engage[data-glow] { --mx: 30%; }
.wpd-engage .glow-follow { background: radial-gradient(circle, rgba(255, 238, 51, .1), transparent 62%); }
.wpd-engage__text { margin: clamp(22px, 2.4vw, 30px) 0 0; max-width: 50ch; font: 400 clamp(13.5px, 1.1vw, 15.5px)/1.8 var(--f-body); color: rgba(244, 244, 242, .62); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(28px, 3vw, 40px);
  padding: 16px 30px; border-radius: 999px; border: 1px solid rgba(244, 244, 242, .3); color: var(--text);
  font: 600 13.5px/1 var(--f-body); transition: border-color .25s, background .25s, color .25s;
}
.btn-outline:hover { border-color: var(--yellow); background: rgba(255, 238, 51, .08); color: var(--yellow); }

/* Notre méthode (4 étapes en ligne) */
.wpd-method { position: relative; background: var(--paper); color: var(--ink-text); padding: clamp(80px, 10vw, 140px) var(--gutter); }
.wpd-method__title {
  margin: 20px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 98, 'wght' 700;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance;
  width: min(800px, calc(100vw - 2 * var(--gutter)));
}
.wpd-method__intro {
  margin: clamp(20px, 2.2vw, 28px) 0 0; max-width: 90ch; font: 400 clamp(13.5px, 1.1vw, 15.5px)/1.75 var(--f-body); color: rgba(16, 16, 18, .62);
  width: min(900px, calc(100vw - 2 * var(--gutter)));
}
.wpd-steps {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(20px, 2.4vw, 36px); min-width: 0; margin-top: calc(35px - clamp(40px, 5vw, 80px));
}
.wpd-step {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px);
  border-left: 1px solid rgba(16, 16, 18, .12); border-radius: 0 18px 18px 0;
  transition: background .35s;
}
.wpd-step:hover { background: rgba(255, 238, 51, .14); }
.wpd-step__num { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--yellow-deep); font: 600 11px/1 var(--f-mono); color: var(--ink-text); }
.wpd-step h3 { margin: 8px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 102, 'wght' 700; font-size: 18px; line-height: 1.1; letter-spacing: -.01em; }
.wpd-step p { margin: 0; font: 400 13px/1.6 var(--f-body); color: rgba(16, 16, 18, .6); }
@media (hover: none) { .wpd-step:hover { background: transparent; } }

/* Appel final */
.wpd-cta { position: relative; overflow: hidden; background: var(--ink); padding: clamp(60px, 7vw, 100px) var(--gutter); }
.wpd-cta__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 238, 51, .5) 70%, transparent); }
.wpd-cta__star { position: absolute; right: clamp(20px, 6vw, 110px); top: 50%; width: 60px; height: 60px; margin-top: -30px; filter: drop-shadow(0 0 14px rgba(255, 238, 51, .8)); }
.wpd-cta__star svg { display: block; width: 60px; height: 60px; fill: var(--yellow); }
.wpd-cta__inner {
  position: relative; max-width: 1320px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 60px);
  padding-right: clamp(90px, calc(6vw + 90px), 200px);
}
.wpd-cta__copy { min-width: 0; }
.wpd-cta__title { margin: 18px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 98, 'wght' 700; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
.js .wpd-cta .btn[data-r] { transition: opacity var(--reveal-d) var(--ease), transform .3s, box-shadow .3s; }

@media (max-width: 560px) {
  .wpd-cta__inner { padding-right: 60px; }
  .wpd-cta__star { right: 14px; width: 44px; height: 44px; margin-top: -22px; }
  .wpd-cta__star svg { width: 44px; height: 44px; }
}