/*
  The five services (simple page, 29.10.2026). One block per service, on alternating grounds (Réseaux black, Pub white,
  Google black, Site white, Identité black), joined by a straight edge: the hero's ruler comes back as a hairline with its
  graduations, the block's number standing on it over the piece's corner.
  Default = the final state: the lit piece without its tag. services.js adds .is-off (the unlit piece with the hero's red
  gap tag) only when motion is allowed and the piece is still below the screen, then removes it once, in view.
  The grounds come from base.css (.on-black, .on-white): --fg, --muted, --line, --acc.
*/

.svc {
  --x: max(16px, env(safe-area-inset-left, 0px));      /* content edge, where the ruler's number stands */
  position: relative; overflow-x: clip;
  padding: 0 0 48px;
}
.svc-in { max-width: 80rem; margin-inline: auto; padding-inline: var(--x); }

/* ---------- The ruler: a hairline, major ticks every 40 px, minor every 8, the block's major tick ---------- */
.svc-rule {
  position: relative; height: 14px;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--fg) 0 1px, transparent 1px 40px) var(--x) 1px / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 8px) var(--x) 1px / 100% 4px no-repeat;
}
.svc-rule::before { content: ""; position: absolute; left: var(--x); top: 0; width: 2px; height: 22px; background: var(--fg); }

/* ---------- Head: the number and its label over the piece's empty corner, the text under it ---------- */
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr); }
.svc-step, .svc-piece { grid-area: 1 / 1; }
.svc-step { position: relative; z-index: 3; align-self: start; display: flex; align-items: center; gap: 12px; margin: 14px 0 0 10px; }
.svc-num {
  font-family: var(--f-display); font-variation-settings: "wdth" 62, "wght" 820; font-weight: normal;
  font-size: 3rem; line-height: 1; color: var(--fg); letter-spacing: -.02em;
}

.svc-piece { position: relative; margin: 14px calc(-1 * var(--x)) 0; }
.svc-piece > img { display: block; width: 100%; height: auto; }
.svc-off { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-big) .12s; }
.svc-gap {
  position: absolute; z-index: 2;
  font-size: .75rem; padding: .24rem .5rem; line-height: 1.15; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: scale(.92);
  transition: opacity var(--dur-ui-1) var(--ease-ui), transform var(--dur-ui-1) var(--ease-ui), visibility 0s linear var(--dur-ui-1);
}
.svc-piece.is-off .svc-off { opacity: 1; transition: none; }
.svc-piece.is-off .svc-gap { opacity: 1; visibility: visible; transform: none; transition: none; }

.svc-txt { position: relative; display: grid; gap: 12px; }
.svc-h { max-width: 20ch; }
.svc-p { margin: 0; max-width: 40ch; font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.svc-l { list-style: none; margin: 4px 0 0; padding: 0 0 0 20px; display: grid; gap: 6px; position: relative; }
.svc-l::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 7px; width: 1px; background: var(--line); }
.svc-l li { position: relative; max-width: 36ch; font-size: .9375rem; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.svc-l li::before { content: ""; position: absolute; left: -20px; top: calc(.7em - 1px); width: 11px; height: 2px; background: var(--acc); }

/* ---------- Each piece: where its tag sits (as in the locked sections) and how close the text comes ---------- */
.svc-rs .svc-piece { margin-top: 2px; }
.svc-rs .svc-gap { left: var(--x); top: 36%; transform-origin: 0 50%; }
.svc-rs .svc-txt { margin-top: -18px; }

.svc-pb .svc-piece { margin-top: 22px; }
.svc-pb .svc-gap { right: var(--x); top: 15%; white-space: normal; max-width: 7.2em; transform-origin: 100% 50%; }
.svc-pb .svc-txt { margin-top: 0; }

.svc-gg .svc-gap { left: var(--x); top: 33%; transform-origin: 0 50%; }
.svc-gg .svc-txt { margin-top: -8px; }

.svc-sw .svc-gap { right: var(--x); top: 13%; white-space: normal; max-width: 7.2em; transform-origin: 100% 50%; }
.svc-sw .svc-txt { margin-top: -6px; }

/* ---------- Identité: the shop at the end of the ruler, its sign carrying Atelier Nacre's identity once lit ---------- */
.svc-id {
  --an-deep: #4B1D3F;          /* Atelier Nacre's plum: the client's colour, only on its sign */
  --an-deep-hi: #6A2E5A;
  --an-pearl: #F2EAE2;         /* its pearl */
}
.svc-id .svc-piece { container-type: inline-size; overflow: hidden; }
.svc-id .svc-txt { margin-top: 6px; }
.sg, .sg-end { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sg-off { opacity: 0; transition: opacity .6s var(--ease-big) .12s; }
.sg-old {                                                /* the sign maker's lettering, painted on the plaster */
  font-family: var(--f-display); font-variation-settings: "wdth" 50, "wght" 900; font-weight: normal;
  font-size: 60px; letter-spacing: .02em; fill: #1B1B1B;
}
.sg-on { transition: opacity .6s var(--ease-big) .12s; }
.sg-s1 { stop-color: var(--an-deep-hi); }
.sg-s2 { stop-color: var(--an-deep); }
.sg-s3 { stop-color: color-mix(in srgb, var(--an-deep) 78%, #000); }
.sg-panel { fill: url(#sg-grad); stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.sg-glow { fill: none; stroke: var(--an-pearl); stroke-width: 8; opacity: .22; stroke-linejoin: round; }
.sg-edge { fill: none; stroke: var(--an-pearl); stroke-width: 2.6; stroke-linejoin: round; }
.sg-ink { fill: none; stroke: var(--an-pearl); stroke-linejoin: round; }
.svc-piece.is-off .sg-off { opacity: 1; transition: none; }
.svc-piece.is-off .sg-on { opacity: 0; transition: none; }

.sg-end .st-1 { stop-color: var(--c-white); }
.sg-end .st-2 { stop-color: var(--c-line-p); }
.sg-end .st-3 { stop-color: color-mix(in srgb, var(--c-line-p) 65%, var(--c-muted-p)); }
.sg-end .gl-1 { stop-color: var(--c-white); }
.sg-end .gl-2 { stop-color: var(--c-menthe-hi); }
.sg-end .gl-3 { stop-color: var(--c-menthe); }
.sg-end .gl-4 { stop-color: var(--c-nuit-hi); }
.er-t { fill: url(#id-steel); stroke: var(--c-paper); stroke-width: 1.2; stroke-linejoin: round; }
.er-tk { stroke: var(--c-nuit); stroke-width: 1.6; fill: none; opacity: .62; }
.er-g1 { stroke: color-mix(in srgb, var(--c-line-p) 30%, var(--c-muted-p)); stroke-width: 2.6; }
.er-g2 { stroke: var(--c-white); stroke-width: 2; opacity: .9; }
.er-sh { fill: var(--c-black); opacity: .3; }
.er-hi { fill: var(--c-white); }

/* « Chez vous » on the roof, as in the hero; « exemple fictif » on the pavement */
.sg-home {
  position: absolute; left: 50%; top: 12.6%; z-index: 1; translate: -50% -50%;
  background: var(--c-line-p); color: var(--c-nuit); box-shadow: var(--shadow-float);
  font-size: .75rem; padding: .24rem .55rem; white-space: nowrap;
}
.sg-ex {                                                 /* on its own black chip: it sits on the lit pavement */
  position: absolute; right: var(--x); bottom: 5%; z-index: 1;
  font-size: .6875rem; padding: .16rem .5rem; border-width: 1px; color: var(--c-muted-k); background: var(--c-black);
}
.svc-id .svc-gap { left: 19%; top: 31.5%; transform-origin: 0 50%; }

/* ---------- Tablet: the phone layout, held to a readable width ---------- */
@media (min-width: 600px) and (max-width: 959.98px) {
  .svc-piece { max-width: 640px; margin-inline: calc(-1 * var(--x)) 0; }
  .svc-pb .svc-gap, .svc-sw .svc-gap { right: auto; left: 72%; }
}

/* ---------- Desktop: piece and text side by side, sides alternating ---------- */
@media (min-width: 960px) {
  .svc { --x: clamp(16px, 3.4vw, 64px); --cg: clamp(32px, 5vw, 96px); padding-bottom: 56px; }
  .svc-in { max-width: none; }
  .svc-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cg); align-items: center;
  }
  .svc-step { margin: 18px 0 0 12px; gap: 16px; }
  .svc-num { font-size: 4.5rem; }
  .svc-step, .svc-piece { grid-column: 1; }
  .svc-piece { margin: 22px 0 0; }
  .svc-gap { font-size: .875rem; padding: .28rem .55rem; }
  .svc-txt { grid-column: 2; grid-row: 1; margin: 0 !important; gap: 20px; padding-block: 24px; }
  .svc-h { font-size: var(--t-h1); max-width: 18ch; }
  .svc-p { font-size: var(--t-lead); line-height: 1.45; max-width: 30ch; }
  .svc-l { gap: 8px; }
  .svc-l li { font-size: 1.125rem; max-width: 40ch; }
  .svc-l li::before { top: calc(.7em - 1px); }

  /* Pub and Site: the piece on the right, the ruler's major tick moves over to its number */
  .svc-flip .svc-step, .svc-flip .svc-piece { grid-column: 2; }
  .svc-flip .svc-txt { grid-column: 1; }
  .svc-flip .svc-rule::before { left: calc(var(--x) + (100% - 2 * var(--x) - var(--cg)) / 2 + var(--cg)); }

  .svc-rs .svc-gap { left: 2%; top: 38%; }
  .svc-pb .svc-gap { right: 3%; top: 16%; }
  .svc-gg .svc-gap { left: 2%; top: 34%; }
  .svc-sw .svc-gap { right: 4%; top: 14%; }
  .sg-home { font-size: .9375rem; padding: .36rem .8rem; }
  .sg-ex { right: 3%; font-size: .8125rem; padding: .16rem .55rem; }
}