/* ============================================================
   PAGE SERVICES (hub) — styles spécifiques (Page génénaral_SERVICES.jpg).
   Nécessite tokens.css + hero-home.css chargés avant.
   ============================================================ */

/* ---------- Hero ---------- */

.sv-hero {
  background: var(--beige);
  padding: calc(var(--header-height) + clamp(5rem, 16vh, 11rem)) var(--margin)
    clamp(5rem, 16vh, 11rem);
  min-height: calc(88svh - var(--header-height));
  display: flex;
  align-items: center;
}

.sv-hero__eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--teal-dark);
  margin: 0 0 1.25rem;
}

.sv-hero__title {
  /* Dérivé du token display-sm (48 → 64px), réduit de 10 % pour que
     chaque phrase tienne sur une seule grande ligne pleine largeur */
  font: var(--fw-semibold) var(--fs-display-sm) / var(--lh-title) var(--font-sans);
  font-size: calc(var(--fs-display-sm) * 0.9);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  margin: 0;
}

/* Évite les mots orphelins quand une phrase passe sur deux lignes */
.sv-hero__title .sv-line {
  text-wrap: balance;
}

/* Chaque phrase du titre apparaît l'une après l'autre (CSS pur) */
.sv-hero__eyebrow {
  animation: sv-fade-in 0.6s ease both;
}

.sv-hero__title .sv-line {
  display: block;
  animation: sv-line-in 0.7s var(--ease-out) both;
}

.sv-hero__title .sv-line:nth-child(1) {
  animation-delay: 0.1s;
}

.sv-hero__title .sv-line:nth-child(2) {
  animation-delay: 0.24s;
}

.sv-hero__title .sv-line:nth-child(3) {
  animation-delay: 0.38s;
}

.sv-hero__title .sv-line:nth-child(4) {
  animation-delay: 0.52s;
}

@keyframes sv-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sv-line-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mots-clés : soulignés en or et passés en vert au fil du scroll */
.sv-hl {
  position: relative;
  font-style: normal;
  transition: color var(--dur-med) ease;
}

/* Trait fin, le mot garde sa couleur */
.sv-hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.14em; /* collé sous les lettres, au niveau de la ligne de base */
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.sv-hl.is-on::after {
  transform: scaleX(1);
}

/* La phrase finale passe en jaune, sans soulignement */
.sv-hl--gold::after {
  display: none;
}

.sv-hl--gold.is-on {
  color: var(--gold);
}

/* ---------- Nos services (section épinglée) ---------- */

.sv-services {
  /* Fond vert uni : lisibilité maximale, textes clairs partout */
  background: var(--teal-dark);
  overflow: clip;
}

.sv-services__inner {
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 5vh, 3.5rem) var(--margin) clamp(2rem, 4vh, 3rem);
}

/* En-tête : titre à gauche, flèche « passer la section » à droite */
.sv-services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

.sv-skip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--white-faint);
  border-radius: var(--radius-full);
  background: none;
  color: var(--beige);
  font: var(--type-h5);
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.sv-skip:hover {
  background: var(--sky);
  color: var(--teal-dark);
  border-color: transparent;
  transform: translateY(3px);
}

.sv-services__label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  margin: 0 0 0.75rem;
}

.sv-services__label::before {
  content: "• ";
}

.sv-services__title {
  font: var(--type-h2);
  letter-spacing: var(--ls-title);
  color: var(--white);
  margin: 0;
}

/* Barres de progression : une par service, cliquables */
.sv-progress {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: 1.5rem;
}

.sv-progress__bar {
  height: 14px; /* zone cliquable confortable */
  padding: 6px 0;
  border: none;
  background: none;
  cursor: pointer;
}

.sv-progress__bar::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--white-faint);
  transition: background var(--dur-fast) ease;
}

.sv-progress__bar.is-active::before {
  background: var(--white);
}

/* ---------- Corps : panneaux + menu ---------- */

.sv-services__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 13.5rem);
  gap: clamp(2rem, 3.5vw, 3.5rem);
  align-items: stretch;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.sv-panels {
  position: relative;
  min-height: 24rem;
}

.sv-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity var(--dur-slow) ease,
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.sv-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--dur-slow) ease,
    transform var(--dur-slow) var(--ease-out),
    visibility 0s;
}

/* Numéro et titre sur la même ligne : gagne de la hauteur pour le contenu */
.sv-panel__num {
  font: var(--type-display-sm);
  color: var(--gold);
  display: inline-block;
  vertical-align: baseline;
  margin-right: 1.1rem;
}

.sv-panel__title {
  font: var(--type-h2);
  letter-spacing: var(--ls-title);
  color: var(--white);
  display: inline-block;
  margin: 0;
}

.sv-panel__cols {
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
}

.sv-panel__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.sv-panel__desc p {
  font: var(--fw-light) var(--fs-h4) / var(--lh-body) var(--font-sans);
  color: var(--white-muted);
  margin: 0;
  max-width: 46ch;
}

.sv-panel__desc p:last-child {
  margin-bottom: 0;
}

/* Pour qui c'est fait, en un coup d'œil */
.sv-panel__ideal {
  font: var(--fw-light) var(--fs-h4) / var(--lh-body) var(--font-sans);
  font-style: italic;
  color: var(--gold);
  margin: 1.2rem 0 1.6rem;
  max-width: 46ch;
}

.sv-panel__comprend {
  font: var(--type-h5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.9rem;
}

/* Les inclus en pastilles compactes */
.sv-panel__list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sv-panel__list li {
  font: var(--type-body);
  color: var(--white-muted);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-full);
  padding: 0.55rem 1.15rem;
}

/* Bouton « En savoir plus » : pill beige pleine, bien visible sur le vert */
.sv-panel__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: var(--type-h5);
  color: var(--teal-dark);
  text-decoration: none;
  background: var(--beige);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.9rem 1.9rem;
  box-shadow: var(--shadow-btn-drop);
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.sv-panel__more-arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.sv-panel__more:hover {
  background: var(--sky);
  color: var(--teal-dark);
  transform: translateY(-2px);
}

.sv-panel__more:hover .sv-panel__more-arrow {
  transform: rotate(-45deg);
}

/* Fiche pratique du service : délai, outils, livrables */
.sv-panel__facts {
  margin: 0;
  align-self: center;
  padding-left: clamp(0rem, 3vw, 3rem);
}

.sv-panel__facts > div {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline-on-dark);
}

.sv-panel__facts > div:first-child {
  padding-top: 0;
}

.sv-panel__facts > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sv-panel__facts dt {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  margin: 0 0 0.35rem;
}

.sv-panel__facts dd {
  font: var(--fw-light) var(--fs-h4) / 1.5 var(--font-sans);
  color: var(--white);
  margin: 0;
}

/* ---------- Menu des services (à droite) ---------- */

/* Sommaire : carte bleu ciel avec ombre intérieure */
.sv-menu {
  align-self: center;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 4px 14px color-mix(in srgb, var(--teal-dark) 25%, transparent);
  padding: 1.25rem 1.5rem;
}

.sv-menu__item {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--teal-dark) 15%, transparent);
  background: none;
  cursor: pointer;
  text-align: left;
  font: var(--type-body);
  color: color-mix(in srgb, var(--teal-dark) 65%, transparent);
  transition: color var(--dur-fast) ease;
}

.sv-menu__item:last-child {
  border-bottom: none;
}

.sv-menu__num {
  font: var(--type-eyebrow);
  color: var(--gold);
}

.sv-menu__item:hover {
  color: var(--teal-dark);
}

.sv-menu__item.is-active {
  color: var(--teal-dark);
  font-weight: var(--fw-medium);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .sv-hero {
    padding-top: calc(var(--header-height) + 2.5rem);
  }

  /* Pas d'épinglage : tous les services à la suite */
  .sv-services__inner {
    min-height: 0;
  }

  .sv-progress,
  .sv-menu {
    display: none;
  }

  .sv-services__body {
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }

  .sv-panels {
    min-height: 0;
  }

  .sv-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 2.25rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
  }

  .sv-panel:last-child {
    border-bottom: none;
  }

  .sv-panel__title {
    margin-bottom: 1.5rem;
  }

  .sv-panel__cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Pas d'épinglage sur mobile : la flèche n'a pas de sens */
  .sv-skip {
    display: none;
  }

  .sv-panel__facts {
    padding-left: 0;
  }
}