/* Mijoh Studio — v6 · Services */

/* ---------- Héros ---------- */
.sv-hero { padding-top: calc(var(--header-h) + clamp(40px, 5vw, 80px)); padding-bottom: clamp(24px, 3vw, 48px); }
.sv-hero__eyebrow { display: flex; justify-content: space-between; gap: 16px; margin-bottom: clamp(10px, 1.4vw, 22px); }
.sv-hero { --hfs: clamp(76px, 19.6vw, 360px); }
.sv-hero__main { position: relative; }
.sv-hero__title { font-size: var(--hfs); line-height: .8; margin-left: -.03em; }
.sv-hero__l1, .sv-hero__l2 { display: block; }
.sv-hero__l2 { width: max-content; }
.sv-hero__aside { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 30px); }
.sv-hero__aside .lead { max-width: 40ch; }
.sv-hero__aside .lead em { font-style: italic; font-weight: 560; }
/* Grand écran : le texte se pose à côté de « fait », dans la même cellule que le titre —
   s'il s'allonge, la cellule grandit au lieu de déborder sur les bandeaux */
@media (min-width: 1200px) {
  .sv-hero__main { display: grid; grid-template-columns: minmax(0, 1fr) min(44%, 600px); }
  .sv-hero__title { grid-area: 1 / 1 / 2 / 3; }
  .sv-hero__aside { grid-area: 1 / 2 / 2 / 3; align-self: start; margin-top: calc(var(--hfs) * .8 + clamp(14px, 1.6vw, 28px)); }
}
.sv-hero__index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 3px solid var(--ink); }
.sv-hero__index li { border-bottom: 1px solid var(--line); }
.sv-hero__index a { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; font-weight: 620; font-size: 15px; transition: transform .5s var(--ease), color .3s; }
.sv-hero__index .idx { color: var(--mute); font-size: 12px; }
html.fine .sv-hero__index a:hover { transform: translateX(6px); }

/* ---------- Bandeaux croisés ---------- */
.sv-bands { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; height: clamp(190px, 21vw, 340px); overflow: clip; margin-block: clamp(10px, 2vw, 30px); }
.sv-band { grid-area: 1 / 1; width: 116%; margin-left: -8%; padding-block: clamp(12px, 1.3vw, 20px); }
.sv-band--ink { background: var(--ink); color: var(--paper); transform: rotate(-3deg); position: relative; z-index: 2; box-shadow: 0 30px 60px -30px rgba(13, 13, 14, .5); }
.sv-band--light { background: var(--paper-3); color: var(--ink); transform: rotate(2.4deg); }
.sv-band .marquee__item { font-weight: 880; font-stretch: 62%; text-transform: uppercase; font-size: var(--d-m); line-height: 1; letter-spacing: .005em; padding-top: .06em; }
.sv-band__dot { display: inline-block; width: .3em; height: .3em; border-radius: 50%; margin: 0 .55em; background: currentColor; flex: none; }

/* ---------- Accordéon (commun services + FAQ) ---------- */
.acc__item h3 { font: inherit; }
.acc__btn { width: 100%; text-align: left; color: inherit; }
.acc__panel { position: relative; }
.acc__icon {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; justify-self: end;
  box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .45s var(--ease), color .45s, box-shadow .45s, transform .7s var(--ease);
}
.acc__icon::before, .acc__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; }
.acc__icon::after { transform: rotate(90deg); }
.acc__item.is-open > h3 .acc__icon, .acc__item.is-open .acc__btn .acc__icon { background: var(--ink); color: var(--paper); box-shadow: none; transform: rotate(135deg); }
html.fine .acc__btn:hover .acc__icon { background: var(--ink); color: var(--paper); box-shadow: none; }

/* ---------- Six services ---------- */
.sv-acc { margin-top: clamp(12px, 2vw, 32px); }
.sv-item { border-bottom: 1px solid var(--line); }
.sv-item__btn {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 300px) 52px; align-items: center; column-gap: var(--gap);
  padding-block: clamp(18px, 2vw, 30px);
}
.sv-item__btn .idx { align-self: start; padding-top: .5em; color: var(--mute); }
.sv-item__name { position: relative; display: block; justify-self: start; font-size: clamp(32px, 4.6vw, 84px); line-height: .88; transition: transform .8s var(--ease); }
.sv-item__n { display: block; padding: .06em 0 .03em; }
/* Le nom repasse à l'encre au survol / à l'ouverture : calque en contenu généré (pas de texte en double dans le titre),
   texte alternatif vide pour que le lecteur d'écran ne le lise pas deux fois */
.sv-item__name::after {
  content: attr(data-g); content: attr(data-g) / "";
  position: absolute; inset: 0; display: block; padding: .06em 0 .03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  clip-path: inset(-10% 100% -10% 0); transition: clip-path .85s var(--ease);
}
.sv-item__sum { font-size: 15px; line-height: 1.4; color: var(--mute); max-width: 32ch; }
html.fine .sv-item__btn:hover .sv-item__name { transform: translateX(clamp(8px, 1.2vw, 20px)); }
html.fine .sv-item__btn:hover .sv-item__name::after, .sv-item__btn:focus-visible .sv-item__name::after, .sv-item.is-open .sv-item__name::after { clip-path: inset(-10% 0 -10% 0); }
.sv-item__btn:focus-visible { outline-offset: 4px; }

.sv-item__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.25fr); column-gap: clamp(24px, 3.4vw, 64px);
  align-items: start; padding: 6px 0 clamp(48px, 5vw, 84px) calc(72px + var(--gap));
}
.sv-inc h4, .sv-who h4 { margin-bottom: 12px; }
.sv-inc li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; }
.sv-inc li::before { content: ''; position: absolute; left: 0; top: 20px; width: 12px; height: 3px; border-radius: 2px; background: var(--grad); }
.sv-who p { font-size: 17px; line-height: 1.5; padding-top: 11px; border-top: 1px solid var(--line); }
.sv-who .btn { margin-top: 22px; }
.sv-who p + h4 { margin-top: 28px; }
.sv-who p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.sv-shot { --rot: -3deg; display: block; margin-top: 6px; }
.sv-item:nth-child(even) .sv-shot { --rot: 3deg; }
html.fine .sv-shot:hover .sv-shot__frame { rotate: 0deg; }
.sv-shot__frame {
  position: relative; display: block; rotate: var(--rot); transition: rotate .9s var(--ease); aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3);
  box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .4), 0 0 0 1px rgba(13, 13, 14, .06);
}
.sv-shot__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
html.fine .sv-shot:hover .sv-shot__frame img { transform: scale(1.04); }
.sv-shot__cap { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
/* Illustration d'interface (js/mocks.js) : droite, à pleine largeur de colonne */
.sv-vis { display: block; margin: 6px 0 0; }
.sv-vis__mock { display: block; }
.sv-vis .sv-shot__cap { margin-top: 18px; }
/* Sites & refontes : trois captures en cascade, Penumbra devant */
.sv-shot__deck { position: relative; display: block; aspect-ratio: 16 / 11.5; margin-top: 10px; }
.sv-shot--stack .sv-shot__frame { position: absolute; width: 86%; aspect-ratio: 16 / 10; transition: rotate .9s var(--ease), translate .9s var(--ease); }
.sv-shot__frame--front { right: 0; bottom: 0; }
.sv-shot__frame--b1 { left: 7%; top: 12.5%; rotate: calc(var(--rot) - 5deg); }
.sv-shot__frame--b2 { left: 0; top: 0; rotate: calc(var(--rot) - 10deg); }
html.fine .sv-shot--stack:hover .sv-shot__frame--b1 { rotate: calc(var(--rot) - 7deg); translate: -2% -4%; }
html.fine .sv-shot--stack:hover .sv-shot__frame--b2 { rotate: calc(var(--rot) - 14deg); translate: -4% -8%; }
.sv-shot__name { font-size: var(--d-s); }
.sv-shot__fact { font-size: 14px; line-height: 1.45; color: var(--mute); max-width: 44ch; }

/* ---------- Trois piliers ---------- */
.sv-pil { padding-block: clamp(64px, 8vw, 140px) clamp(80px, 10vw, 170px); }
.sv-pil .sec-head h2 em { font-style: italic; }
.sv-pil__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(36px, 4.4vw, 72px); }
.sv-pil__col { --draw: 1; position: relative; display: flex; flex-direction: column; padding: 0 clamp(20px, 2.6vw, 44px) 4px; }
.sv-pil__col:first-child { padding-left: 0; }
.sv-pil__col:last-child { padding-right: 0; }
/* Filet vertical entre les colonnes, qui se dessine du haut vers le bas */
.sv-pil__col + .sv-pil__col::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--ink);
  transform-origin: center top; transform: scaleY(var(--draw));
}
.sv-pil__n { display: block; overflow: hidden; font-size: clamp(110px, 12.5vw, 230px); line-height: .8; padding-top: .04em; margin-left: -.04em; transition: color .6s var(--ease); }
.sv-pil__ni { display: inline-block; }
.sv-pil__body { display: flex; flex-direction: column; flex: 1; }
.sv-pil__t { margin-top: clamp(20px, 2.2vw, 34px); font-size: var(--d-m); line-height: .9; }
.sv-pil__p { margin-top: 14px; font-size: 17px; line-height: 1.5; max-width: 32ch; }
.sv-pil__p em { font-style: italic; font-weight: 600; }
.sv-pil__svc { margin-top: auto; padding-top: clamp(24px, 2.6vw, 40px); }
.sv-pil__svc li { border-top: 1px solid var(--line); }
.sv-pil__svc li:last-child { border-bottom: 1px solid var(--line); }
.sv-pil__svc a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 0; font-size: 15px; font-weight: 620; transition: transform .5s var(--ease); }
.sv-pil__svc .idx { color: var(--mute); font-size: 12px; }
html.fine .sv-pil__svc a:hover { transform: translateX(6px); }
/* Survol : les deux autres colonnes passent au gris doux */
html.fine .sv-pil__list:hover .sv-pil__col:not(:hover) .sv-pil__n { color: var(--soft); }

/* ---------- Comment on travaille ---------- */
.sv-proc { position: relative; }
.sv-proc__in { padding-block: clamp(80px, 10vw, 160px); }
.sv-steps { position: relative; margin-top: clamp(36px, 4.4vw, 72px); }
.sv-steps__track { position: absolute; left: 0; right: 0; top: 9px; height: 3px; background: var(--line-d); border-radius: 3px; }
.sv-steps__fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: left center; }
.sv-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.sv-step { position: relative; padding-top: clamp(40px, 4vw, 60px); padding-right: 8px; }
.sv-step__dot {
  position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--mute-d); transition: box-shadow .5s var(--ease), transform .6s var(--ease);
}
.sv-step__dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--grad); opacity: 0; transition: opacity .5s var(--ease); }
.sv-step__n { position: relative; display: inline-block; font-size: clamp(56px, 7.4vw, 136px); line-height: .8; color: rgba(241, 239, 234, .16); transition: color .6s var(--ease); }
.sv-step__n::after {
  content: attr(data-n); position: absolute; inset: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; opacity: 0; transition: opacity .6s var(--ease);
}
.sv-step__t { margin-top: clamp(14px, 1.6vw, 24px); font-weight: 860; font-stretch: 62%; text-transform: uppercase; font-size: clamp(24px, 2.3vw, 38px); line-height: .94; }
.sv-step__p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--mute-d); max-width: 34ch; }
.sv-step__out { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-d); max-width: 34ch; }
.sv-step__out .muted { display: block; margin-bottom: 2px; }
/* États (seulement quand l'animation pilote) */
/* Avant d'être atteinte, l'étape est seulement décalée ; le titre est atténué mais reste lisible (≥ 3:1) */
html.motion .sv-step .sv-step__t, html.motion .sv-step .sv-step__p, html.motion .sv-step .sv-step__out {
  transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease);
}
html.motion .sv-step .sv-step__t { opacity: .62; }
html.motion .sv-step.is-on .sv-step__t, html.motion .sv-step.is-on .sv-step__p, html.motion .sv-step.is-on .sv-step__out { opacity: 1; transform: none; }
.sv-step.is-on .sv-step__n, html.reduce .sv-step__n { color: var(--paper); }
.sv-step.is-on .sv-step__dot, html.reduce .sv-step__dot { box-shadow: 0 0 0 6px rgba(241, 239, 234, .18); transform: scale(1.1); }
.sv-step.is-on .sv-step__dot::after, html.reduce .sv-step__dot::after { opacity: 1; }
.sv-step.is-current .sv-step__n::after { opacity: 1; }

@media (min-width: 900px) {
  .sv-proc__in { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--header-h) + 20px) 48px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .sv-proc .sec-head .display.d-l { font-size: clamp(40px, 4.6vw, 80px); }
  .sv-steps { margin-top: 32px; }
  .sv-step { padding-top: 36px; }
  .sv-step__n { font-size: clamp(48px, 6vw, 96px); }
  .sv-step__out { margin-top: 12px; }
}

/* ---------- FAQ ---------- */
.sv-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(28px, 3.4vw, 56px); }
.sv-faq__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sv-faq__mail { font-weight: 650; font-size: 17px; margin-top: 8px; }
.sv-faq__list { grid-column: 6 / -1; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq__btn { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(18px, 1.8vw, 26px) 0; }
.faq__q { font-size: clamp(18px, 1.5vw, 24px); font-weight: 640; line-height: 1.25; letter-spacing: -.005em; transition: transform .6s var(--ease); }
html.fine .faq__btn:hover .faq__q { transform: translateX(6px); }
.faq .acc__icon { width: 42px; height: 42px; }
.faq .acc__icon::before, .faq .acc__icon::after { width: 14px; margin-left: -7px; }
.faq__a { padding: 0 72px 28px 0; }
.faq__a p { font-size: 17px; line-height: 1.55; color: var(--mute); max-width: 62ch; }

/* ---------- CTA devis ---------- */
.sv-cta { padding-block: clamp(90px, 11vw, 180px); overflow: clip; }
.sv-cta__meta { display: flex; gap: 18px; align-items: baseline; margin-bottom: clamp(18px, 2vw, 28px); }
.sv-cta__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-top: clamp(20px, 2vw, 32px); }
.sv-cta__text { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.sv-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-fan { grid-column: 6 / -1; position: relative; height: clamp(300px, 28vw, 430px); }
.sv-fan__card {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: clamp(150px, 15.5vw, 236px); aspect-ratio: 3 / 4;
  border-radius: var(--r-lg); background: var(--ink); color: var(--paper); padding: clamp(14px, 1.3vw, 20px);
  display: flex; flex-direction: column; justify-content: space-between; transform-origin: 50% 150%;
  box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .45), 0 0 0 1px rgba(13, 13, 14, .05);
}
.sv-fan__card:nth-child(even) { background: var(--paper-3); color: var(--ink); }
.sv-fan__card--grad, .sv-fan__card--grad:nth-child(even) { background: var(--grad-v); color: #fff; }
.sv-fan__card .idx { opacity: .75; }
.sv-fan__q { font-size: clamp(20px, 1.9vw, 32px); line-height: .92; }
/* Cartes recouvertes : la question court sur la tranche gauche, seule partie visible */
.sv-fan__card:not(:last-child) .sv-fan__q {
  position: absolute; left: clamp(12px, 1.1vw, 18px); top: clamp(46px, 4vw, 60px);
  writing-mode: vertical-rl; white-space: nowrap; font-size: clamp(15px, 1.3vw, 21px); line-height: 1;
}
/* Éventail par défaut (sans JS / mouvement réduit) */
html:not(.motion) .sv-fan__card:nth-child(1), html.reduce .sv-fan__card:nth-child(1) { transform: rotate(-25deg); }
html:not(.motion) .sv-fan__card:nth-child(2), html.reduce .sv-fan__card:nth-child(2) { transform: rotate(-15deg); }
html:not(.motion) .sv-fan__card:nth-child(3), html.reduce .sv-fan__card:nth-child(3) { transform: rotate(-5deg); }
html:not(.motion) .sv-fan__card:nth-child(4), html.reduce .sv-fan__card:nth-child(4) { transform: rotate(5deg); }
html:not(.motion) .sv-fan__card:nth-child(5), html.reduce .sv-fan__card:nth-child(5) { transform: rotate(15deg); }
html:not(.motion) .sv-fan__card:nth-child(6), html.reduce .sv-fan__card:nth-child(6) { transform: rotate(25deg); }

/* ---------- Tablette / mobile ---------- */
@media (max-width: 1199px) {
  .sv-hero__aside { position: static; width: auto; margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
}
@media (max-width: 1100px) {
  .sv-item__btn { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 220px) 52px; }
  .sv-item__in { padding-left: calc(56px + var(--gap)); }
}
/* Tablette : trois colonnes, c'est trop étroit pour une illustration — le visuel prend la moitié droite */
@media (min-width: 900px) and (max-width: 1199px) {
  .sv-item__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "inc vis" "who vis"; row-gap: 36px; }
  .sv-inc { grid-area: inc; } .sv-who { grid-area: who; } .sv-item__in > .sv-vis, .sv-item__in > .sv-shot { grid-area: vis; }
  .sv-pil__col { padding-inline: clamp(16px, 2vw, 28px); }
}
@media (max-width: 899px) {
  .sv-hero__eyebrow .muted { display: none; }
  .sv-hero__title { font-size: clamp(76px, 24.5vw, 200px); }
  .sv-hero__aside { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 28px; }
  .sv-hero__index { grid-template-columns: minmax(0, 1fr); }

  .sv-item__btn { grid-template-columns: 40px minmax(0, 1fr) 44px; grid-template-areas: "idx name icon" ". sum icon"; row-gap: 8px; }
  .sv-item__btn .idx { grid-area: idx; padding-top: .3em; }
  .sv-item__name { grid-area: name; font-size: clamp(30px, 8.6vw, 60px); }
  .sv-item__sum { grid-area: sum; font-size: 14px; }
  .sv-item__btn .acc__icon { grid-area: icon; width: 44px; height: 44px; align-self: center; }
  .sv-item__in { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-left: 0; }
  .sv-shot { max-width: 520px; margin-inline: 6px; }
  .sv-vis { max-width: 560px; }
  .sv-shot--stack { margin-top: 18px; }

  .sv-pil__list { grid-template-columns: minmax(0, 1fr); }
  .sv-pil__col, .sv-pil__col:first-child, .sv-pil__col:last-child {
    display: grid; grid-template-columns: clamp(72px, 22vw, 130px) minmax(0, 1fr); column-gap: clamp(14px, 4vw, 28px);
    padding: 22px 0 30px;
  }
  .sv-pil__col::before, .sv-pil__col + .sv-pil__col::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1.5px; background: var(--ink);
    transform-origin: left center; transform: scaleX(var(--draw));
  }
  .sv-pil__n { font-size: clamp(92px, 28vw, 160px); }
  .sv-pil__t { margin-top: 2px; font-size: clamp(30px, 8.6vw, 52px); }
  .sv-pil__p { font-size: 16px; }
  .sv-pil__svc { padding-top: 20px; }

  .sv-steps { margin-top: 40px; }
  .sv-steps__track { left: 9px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; }
  .sv-steps__fill { transform-origin: center top; }
  .sv-steps__list { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .sv-step { padding: 0 0 0 48px; }
  .sv-step__n { font-size: clamp(52px, 15vw, 90px); }

  .sv-faq__aside { grid-column: 1 / -1; position: static; margin-bottom: 28px; }
  .sv-faq__list { grid-column: 1 / -1; }
  .faq__a { padding-right: 0; }

  .sv-cta__text { grid-column: 1 / -1; }
  .sv-fan { grid-column: 1 / -1; margin-top: 40px; height: clamp(260px, 72vw, 360px); }
  .sv-fan__card { width: clamp(120px, 34vw, 180px); }
}