/* ============================================================
   DESSIGNE — pages service
   ------------------------------------------------------------
   La maquette stylait ces pages presque entierement en ligne, et
   ciblait le responsive via des selecteurs d'attribut fragiles
   (section[style*="background-color: #262421"], [style*="flex:0 0 55%"],
   body[data-hero] > div[style*="height:520px"]...). Ces selecteurs
   dependaient de l'espacement exact des styles en ligne et du fait
   que le bloc soit enfant direct de <body> — deux choses que
   WordPress ne garantit pas. On repose de vraies classes, memes valeurs.
   ============================================================ */

/* ---------- 1 · BANDEAU PHOTO (page Services) ---------- */
.svc-band {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: var(--ink);
}
.svc-band__media { position: absolute; inset: 0; }
.svc-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 18, 16, .88) 0%,
    rgba(20, 18, 16, .20) 60%,
    rgba(20, 18, 16, .05) 100%);
  pointer-events: none;
}
.svc-band__title {
  position: absolute;
  bottom: 40px;
  left: 56px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1;
  text-align: left;
}
.svc-band__monogram {
  position: absolute;
  bottom: 40px;
  right: 56px;
  width: 90px;
  height: auto;
  display: block;
}

/* ---------- 2 · HERO des pages service ---------- */
.svc-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  display: block;
}
.svc-hero__label {
  position: absolute;
  bottom: 40px;
  left: 56px;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1;
  text-align: left;
}
.svc-hero__monogram {
  position: absolute;
  bottom: 40px;
  right: 56px;
  z-index: 1;
  width: 90px;
  height: auto;
  display: block;
}

/* ---------- 3 · BANDEAUX « PUNCH » ---------- */
.punch-band {
  padding: 50px 56px;
  text-align: center;
  background-color: var(--cream);
}
.punch-band__text {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  max-width: 1040px;
  margin: 0 auto;
  text-wrap: pretty;
}
.svc-punch {
  padding: 60px 56px;
  text-align: center;
  background-color: var(--ink);
}
.svc-punch--tight { padding: 50px 56px; }
.svc-punch__text {
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.15;
  margin: 0 auto;
  max-width: 1040px;
  text-wrap: pretty;
}

/* ---------- 4 · CARROUSELS EN FONDU ---------- */
.phase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(.4, 0, .2, 1);
}
.phase-slide.is-active { opacity: 1; }
.phase-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vignette dont le sujet touche le bas du cadre : on ancre le recadrage
   vers le bas pour que le fauteuil reste entier. Le cadre 16/9 plafonne a
   760px de haut, il rogne donc une image plus carree en haut ET en bas ;
   90% rend le bas au sujet. Sans effet sous 860px, ou le cadre 4/5 rogne
   sur les cotes et non en hauteur. */
.svc-carousel-top .phase-slide img.phase-slide__img--bas { object-position: 50% 90%; }

.svc-carousel-top {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 760px;
  background: var(--p2);
}
.svc-carousel-full {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 900px;
  height: 900px;
  background: var(--p2);
}

/* ---------- 5 · « Nos projets a 360 » + deroule ---------- */
.svc-360 { background: var(--p2); padding: 50px 56px; }
.svc-360__inner { max-width: 1280px; margin: 0 auto; }
.svc-360 .display {
  font-size: 50px;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 1210px;
  font-weight: 500;
}
.svc-360__lede {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.7;
  max-width: 826px;
  text-align: justify;
}

.svc-phases { background: var(--paper); padding: 88px 56px; }
.svc-phases__inner { max-width: 1280px; margin: 0 auto; }
.svc-phase-row {
  display: flex;
  align-items: stretch;
  gap: 48px;
  margin-bottom: 40px;
}
.svc-phase-row:last-child { margin-bottom: 0; }
.svc-phase-media {
  flex: 0 0 55%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--p2);
}
.svc-phase-text {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-phase-row--reverse .svc-phase-media { order: 2; }
.svc-phase-text h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
}
.svc-phase-text p {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(38, 36, 33, .62);
  line-height: 1.7;
}

/* ---------- 6 · TIMELINE ---------- */
.svc-timeline-section { background: var(--cream); padding: 50px 56px; }
.timeline { max-width: 1280px; margin: 0 auto; }
.timeline__head { text-align: center; margin-bottom: 56px; }
.timeline__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.timeline__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.timeline__rail {
  position: absolute;
  top: 24px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 1px;
  background: var(--gold);
  opacity: .35;
  z-index: 0;
}
.timeline__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--paper);
  border-radius: 10px;
  padding: 0 28px 34px;
  /* meme elevation au survol que les etiquettes d'offre (.mission-card) */
  box-shadow: 0 2px 8px rgba(38, 36, 33, .09), 0 1px 3px rgba(38, 36, 33, .06);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s cubic-bezier(.16, 1, .3, 1);
}
.timeline__step:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 40px rgba(38, 36, 33, .14), 0 4px 12px rgba(38, 36, 33, .09);
}
.timeline__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #4E2924;
  opacity: .9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -24px auto 24px;
  box-shadow: 0 6px 16px rgba(38, 36, 33, .16);
}
.timeline__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cream);
  stroke-width: 1.5;
  fill: none;
}
.timeline__action {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.3;
}
.timeline__desc {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  opacity: .62;
  max-width: 210px;
}

/* ---------- 7 · BOUTONS ET CTA ---------- */
.svc-cta-mid { text-align: center; margin: 0; padding: 64px 0; }
.svc-btn {
  display: inline-block;
  background: var(--rouge);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 44px;
  margin: 0;
  /* meme adoucissement que les .btn du reste du site */
  border-radius: var(--btn-radius);
  transition: all .25s ease;
}
.svc-cta-end {
  padding: 50px 56px;
  text-align: center;
  background-color: var(--burg);
}
.svc-cta-end .display {
  font-size: 60px;
  color: var(--cream);
  margin-bottom: 32px;
  font-weight: 400;
}
.svc-cta-end__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.svc-btn--ghost {
  background: transparent;
  border: 1px solid rgba(230, 223, 209, .5);
  font-size: 12px;
}
.svc-cta-end .svc-btn { font-size: 12px; }

/* survols alignes sur la regle generale du site */
.dessigne-page .svc-btn:hover,
.dessigne-page .svc-btn:focus-visible {
  background: var(--rouge-fonce);
  border-color: var(--rouge-fonce);
  color: #FFFFFF;
}
.dessigne-page .svc-btn--ghost:hover,
.dessigne-page .svc-btn--ghost:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: #000000;
}

/* ---------- 8 · MOBILE ---------- */
@media (max-width: 860px) {

  .svc-band { height: 380px; }
  .svc-band__title { left: 24px; bottom: 28px; }
  .svc-band__monogram { right: 24px; bottom: 28px; width: 64px; }

  .svc-hero { min-height: 0 !important; height: 380px !important; }
  .svc-hero__inner { padding: 0 24px !important; }
  .svc-hero__label { font-size: 34px; left: 24px; bottom: 28px; }
  .svc-hero__monogram { right: 24px; bottom: 28px; width: 64px; }

  .punch-band { padding: 48px 22px; }
  .punch-band__text { font-size: 28px; }
  .svc-punch { padding: 44px 22px; }
  /* Bandeaux de transition : +3px, le texte s'y perdait sur telephone. */
  .svc-punch__text { font-size: 31px; line-height: 1.2; }

  .mission-intro__title { font-size: 34px !important; }
  .mission-card { padding: 32px 26px 40px !important; }
  .mission-card__desc { line-height: 1.5 !important; margin-bottom: 24px !important; }
  .mission-card__list { gap: 8px !important; margin-bottom: 28px !important; }
  .mission-card__list li { line-height: 1.35 !important; }
  .mission-card__note { line-height: 1.4 !important; }

  .svc-cta-mid { padding: 44px 22px !important; }

  .svc-360 { padding: 40px 22px !important; }
  .svc-360 .display { font-size: 32px !important; text-align: left !important; margin-bottom: 12px !important; }
  .svc-360__lede { font-size: 14px !important; line-height: 1.6 !important; text-align: left !important; }

  .svc-phases { padding: 56px 22px !important; }
  .svc-phase-row { flex-direction: column !important; gap: 20px !important; margin-bottom: 40px !important; }
  .svc-phase-media,
  .svc-phase-text { flex: none !important; width: 100% !important; }
  .svc-phase-text { order: 1 !important; }
  .svc-phase-media { order: 2 !important; }
  .svc-phase-row--reverse .svc-phase-media { order: 2 !important; }
  .svc-phase-text h3 { font-size: 23px !important; margin-bottom: 10px !important; }
  .svc-phase-text p { font-size: 14.5px !important; line-height: 1.6 !important; }

  .svc-carousel-top { aspect-ratio: 4 / 5 !important; max-height: none !important; }
  .svc-carousel-full { height: auto !important; max-height: none !important; aspect-ratio: 3 / 4 !important; }

  .svc-timeline-section { padding: 48px 22px !important; }
  .timeline__grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .timeline__rail { display: none !important; }
  /* le filet suffit a detacher la carte : pas d'ombre en plus sur mobile */
  .timeline__step { min-width: 0; border: 1px solid rgba(38, 36, 33, .14); padding: 0 10px 16px !important; box-shadow: none; }
  .timeline__icon { width: 36px !important; height: 36px !important; margin: -18px auto 12px !important; }
  .timeline__icon svg { width: 15px !important; height: 15px !important; }
  .timeline__action { font-size: 11.5px !important; letter-spacing: .02em; margin-bottom: 7px !important; line-height: 1.25 !important; overflow-wrap: break-word; }
  .timeline__desc { font-size: 11.5px !important; line-height: 1.45 !important; max-width: 100% !important; }
  .timeline__head .display { font-size: 33px !important; padding-bottom: 14px !important; text-wrap: balance; }
  .timeline__head { margin-bottom: 28px !important; }

  .svc-cta-end { padding: 40px 22px !important; }
  /* Titre du CTA de fin ramene au corps de celui des pages projet
     (« Parlons de votre projet »), calcule sur la largeur reelle de
     l'ecran pour tenir sur une ligne partout. */
  .svc-cta-end .display { font-size: min(calc((100vw - 56px) / 9.5), 38px) !important; white-space: nowrap !important; margin-bottom: 22px !important; }

  /* Les deux boutons occupaient toute la largeur : meme gabarit, plus
     etroit, centre. Le plus long (« Realisons votre projet ») mesure
     175px de texte, 240px laissent la marge necessaire. */
  .svc-cta-end__actions { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .svc-cta-end .svc-btn { padding: 15px 22px !important; font-size: 11px !important; width: 100% !important; max-width: 240px !important; }
}