/* ============================================
   Section Services — accordéon horizontal
   Figma : 1:3298 (desktop 1920) / 1:4482 (mobile 390)
   Accordéon 1272×519.7 · ouvert 747px · fermés 95px
   gap 10 · radius panneau 25 · média 20 · pad 24
   ============================================ */

.services {
  padding-block: 100px;
  background: var(--c-white);
}

/* En-tête (badge 19.6 + gap 16 + H2 88 + gap 16 + sub 44.8, pb 64) */
.services__head { margin-bottom: 64px; }

/* Figma : icône du badge 17px sur cette section (composant global : 20px) */
.services .badge__icon { width: 17px; height: 17px; }

/* --- Accordéon horizontal --- */
.svc-accordion {
  display: flex;
  gap: 10px;
  aspect-ratio: 1272 / 519.7;
  margin-bottom: 64px;
}

.svc-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 95px;
  min-width: 0;
  padding: 24px;
  border-radius: 25px;
  background: var(--c-lilac);
  overflow: hidden;
  cursor: pointer;
  transition:
    flex-grow 0.5s cubic-bezier(0.44, 0, 0.16, 1),
    flex-basis 0.5s cubic-bezier(0.44, 0, 0.16, 1);
}

.svc-panel.is-open {
  flex: 1 1 0%;
  cursor: default;
}

/* Zone média (panneau ouvert) / texte pivoté (panneau fermé) */
.svc-panel__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 20px;
  overflow: hidden;
}

.svc-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.svc-panel__img--restoration { object-position: 58% 74.2%; }

/* Dégradé bas (technique du site : gradient masqué, opacité 0.48) */
.svc-panel__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(84, 84, 84, 0) 0%, rgb(0, 0, 0) 100%);
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 87%);
  mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 87%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.svc-panel__desc {
  position: relative;
  max-width: 500px;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-white);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Texte pivoté 90° — se lit de bas en haut (site réel : rotate -90°) */
.svc-panel__vtext {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--f-heading);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-black);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Rangée icône + titre */
.svc-panel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: none;
}
.svc-panel.is-open .svc-panel__foot {
  justify-content: flex-start;
  gap: 10px;
}

.svc-icon {
  flex: none;
  width: 27px;
  height: 27px;
  background-color: var(--c-black);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.svc-icon--kitchen     { -webkit-mask-image: url("../../assets/img/services-icon-kitchen.svg");     mask-image: url("../../assets/img/services-icon-kitchen.svg"); }
.svc-icon--bathroom    { -webkit-mask-image: url("../../assets/img/services-icon-bathroom.svg");    mask-image: url("../../assets/img/services-icon-bathroom.svg"); }
.svc-icon--loft        { -webkit-mask-image: url("../../assets/img/services-icon-loft.svg");        mask-image: url("../../assets/img/services-icon-loft.svg"); }
.svc-icon--extension   { -webkit-mask-image: url("../../assets/img/services-icon-extension.svg");   mask-image: url("../../assets/img/services-icon-extension.svg"); }
.svc-icon--restoration { -webkit-mask-image: url("../../assets/img/services-icon-restoration.svg"); mask-image: url("../../assets/img/services-icon-restoration.svg"); }
.svc-icon--external    { -webkit-mask-image: url("../../assets/img/services-icon-external.svg");    mask-image: url("../../assets/img/services-icon-external.svg"); }

.svc-panel__title {
  font-family: var(--f-heading);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-black);
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width 0.5s cubic-bezier(0.44, 0, 0.16, 1),
    opacity 0.4s ease;
}
.svc-panel.is-open .svc-panel__title {
  max-width: 320px;
  opacity: 1;
}

/* États ouverts */
.svc-panel.is-open .svc-panel__img { opacity: 1; }
.svc-panel.is-open .svc-panel__shade { opacity: 0.48; }
.svc-panel.is-open .svc-panel__desc { opacity: 1; transition: opacity 0.4s ease 0.15s; }
.svc-panel.is-open .svc-panel__vtext { opacity: 0; }

.svc-panel:focus-visible {
  outline: 2px solid var(--c-black);
  outline-offset: 2px;
}

/* ============ Tablette 810–1199 (réf. site réel : adaptation) ============ */
@media (max-width: 1199px) {
  .services { padding-block: 80px; }
  .svc-accordion { aspect-ratio: auto; height: 440px; }
  .svc-panel { flex-basis: 76px; padding: 16px; border-radius: 20px; }
  .svc-panel__body { margin-bottom: 16px; padding: 16px; border-radius: 16px; }
  .svc-panel__vtext,
  .svc-panel__title { font-size: 20px; }
}

/* ============ Mobile ≤ 809 (Figma 1:4482) ============ */
@media (max-width: 809px) {
  .services { padding-block: 64px; }

  /* En-tête aligné à gauche, H2 30/33 */
  .services__head { margin-bottom: 48px; align-items: flex-start; text-align: left; }
  .services .section-head__title { font-size: 30px; line-height: 33px; }

  /* Empilement vertical : panneau ouvert = carte image, fermés = barres 59px */
  .svc-accordion {
    flex-direction: column;
    height: auto;
    aspect-ratio: auto;
    gap: 10px;
    margin-bottom: 48px;
  }

  .svc-panel,
  .svc-panel.is-open {
    flex: none;
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }

  /* Média : hauteur 234.3 @390 (Figma : 326×234.31), repliée à 0 quand fermé */
  .svc-panel__body {
    flex: none;
    height: calc((100vw - 64px) * 0.7187);
    max-height: 384px; /* garde-fou grandes largeurs mobiles */
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 16px;
    transition:
      height 0.5s cubic-bezier(0.44, 0, 0.16, 1),
      margin-bottom 0.5s cubic-bezier(0.44, 0, 0.16, 1);
  }
  .svc-panel:not(.is-open) .svc-panel__body {
    height: 0;
    margin-bottom: 0;
  }

  .svc-panel__vtext { display: none; }

  /* Titre toujours visible, horizontal (icône 27 + gap 10 + titre 20/24) */
  .svc-panel__foot,
  .svc-panel.is-open .svc-panel__foot {
    justify-content: flex-start;
    gap: 10px;
  }
  .svc-panel__title,
  .svc-panel.is-open .svc-panel__title {
    max-width: none;
    opacity: 1;
    font-size: 20px;
    line-height: 24px;
  }
}