/* ==========================================================================
   Pages expertises : Refonte de site, UI/UX Design, SEO / GEO
   ========================================================================== */

/* Ligne du titre allongée (page SEO) */
.svc-hero__title .tall { height: 165px; }
@media (max-width: 1199px) { .svc-hero__title .tall { height: 1.1em; } }

/* « Pourquoi … » : introduction sur fond clair */
.svc-intro {
  position: relative; margin-top: -1px; overflow: hidden;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background: var(--paper); color: var(--ink-text);
  padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(70px, 9vw, 130px);
}
.svc-intro__inner { max-width: 1320px; margin: 0 auto; }
.svc-intro__eyebrow { display: block; text-align: center; color: rgba(16, 16, 18, .45); }
.svc-intro__title {
  margin: clamp(22px, 3vw, 38px) auto 0; max-width: 30ch;
  font-family: var(--f-display); font-variation-settings: 'wdth' 98, 'wght' 700;
  font-size: clamp(28px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -.035em; text-align: center; text-wrap: balance;
}
.svc-intro__title .muted { color: rgba(16, 16, 18, .3); }
.svc-intro__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(30px, 4vw, 64px); align-items: stretch; margin-top: clamp(44px, 6vw, 86px);
}
.svc-intro__media { position: relative; display: flex; flex-direction: column; }
.svc-intro__photo {
  position: relative; flex: 1; min-height: 290px; border-radius: 26px; overflow: hidden;
  background: #e7e5df; filter: saturate(.82) contrast(.96);
}
.svc-intro__copy { display: flex; flex-direction: column; gap: clamp(30px, 3.6vw, 52px); }
.svc-intro__lead { margin: 0; max-width: 52ch; font: 400 clamp(14px, 1.2vw, 16.5px)/1.8 var(--f-body); color: rgba(16, 16, 18, .66); }
.svc-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(26px, 3vw, 44px); }
.svc-benefit { display: flex; flex-direction: column; gap: 10px; }
.svc-benefit svg { width: 26px; height: 26px; fill: none; stroke: var(--yellow-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.svc-benefit h3 { margin: 6px 0 0; font-family: var(--f-display); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: 17px; letter-spacing: -.015em; }
.svc-benefit p { margin: 0; font: 400 13px/1.7 var(--f-body); color: rgba(16, 16, 18, .55); }
.svc-benefit .narrow { width: 300px; max-width: calc(100vw - 2 * var(--gutter)); }

/* hauteurs de la maquette, conservées en minimum sur grand écran */
@media (min-width: 1024px) {
  .svc-intro { min-height: 1000px; }
  .svc-method { min-height: 900px; }
}