/* DYVOX7 - 3 : pages Services. Noir, blanc, gris neutres purs et jaune #facc15 uniquement.
   Réutilise les variables de styles.css (--bg, --surface, --ink, --mute, --line, --y). */

/* ---------------------------------------------------------------- transitions inter-documents */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(svc-sites-web),
  ::view-transition-group(svc-applications),
  ::view-transition-group(svc-conseil-strategie),
  ::view-transition-group(svc-marketing-digital),
  ::view-transition-group(svc-intelligence-artificielle),
  ::view-transition-group(svc-studio-creatif) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
}
/* le titre du hero reste lisible pendant la transition : pas de révélation mot à mot */
.js:not(.norv) .svc-h1[data-split]:not(.in) .wi { transform: none; }
.svc-h1 { width: fit-content; max-width: 100%; }

/* ---------------------------------------------------------------- actions de hero */
.svc-acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.svc-phero .lede { max-width: 58ch; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.svc-tags .mono { padding: .3rem .75rem; border-radius: 99px; border: 1px solid var(--line2); color: var(--mute); }

/* ---------------------------------------------------------------- pictogramme rond (noir sur jaune) */
.svc-ico { flex: none; display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--y); color: var(--on-y); transition: transform .5s var(--ease); }
.svc-ico .ic { width: 28px; height: 28px; stroke-width: 1.7; }
.svc-ico.lg { width: 76px; height: 76px; }
.svc-ico.lg .ic { width: 38px; height: 38px; }

/* ---------------------------------------------------------------- grille des 7 cartes : 4 + 3 centrées, 2 en tablette, 1 en mobile */
.svc-sec { padding-top: clamp(1.5rem, 4vw, 3rem); }
.svc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.svc-li { flex: 0 0 100%; min-width: 0; display: flex; }
@media (min-width: 700px) { .svc-li { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1180px) { .svc-li { flex-basis: calc((100% - 48px) / 4); } }
.svc-card { position: relative; display: flex; flex-direction: column; gap: 1rem; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(1.3rem, 2vw, 1.7rem); overflow: hidden; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.svc-card:hover, .svc-card:focus-visible { transform: translateY(-5px); border-color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
[data-theme="dark"] .svc-card:hover, [data-theme="dark"] .svc-card:focus-visible { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.svc-card:hover .svc-ico { transform: rotate(-8deg) scale(1.06); }
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.svc-n { color: var(--mute); }
.svc-t { font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.02; letter-spacing: -.01em; }
.svc-d { color: var(--mute); font-size: .98rem; line-height: 1.5; }
.svc-ticks { gap: .45rem; }
.svc-ticks li { font-size: .92rem; }
.svc-from { margin-top: auto; padding: .9rem 1rem; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); display: grid; gap: .15rem; }
.svc-from .mono { color: var(--mute); font-size: .68rem; }
.svc-from b { font-family: var(--f-d); font-weight: 900; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.1; letter-spacing: -.01em; font-style: italic; text-transform: uppercase; background: linear-gradient(var(--y), var(--y)) no-repeat 0 100% / 100% 4px; padding-bottom: 2px; width: fit-content; max-width: 100%; }
.svc-from .eq { color: var(--mute); font-weight: 600; font-size: .92rem; }
.svc-from .reg { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line2); font-size: .82rem; color: var(--ink); font-weight: 600; }
.svc-go { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; padding-top: .2rem; }
.svc-go .ic { transition: transform .35s var(--ease); }
.svc-card:hover .svc-go .ic { transform: translateX(5px); }
.svc-note { margin-top: 2rem; color: var(--mute); max-width: 70ch; }
.svc-note a { text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: .14em; text-underline-offset: .2em; color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- estimateur */
.est { background: var(--bg2); border-block: 1px solid var(--line); }
.est-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 980px) { .est-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .est-out { position: sticky; top: calc(var(--hdr) + 18px); } }
.est-form { display: grid; gap: 1.2rem; min-width: 0; }
.est-fs { border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.1rem, 2vw, 1.5rem); background: var(--surface); margin: 0; min-width: 0; }
.est-fs legend { font-family: var(--f-m); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--mute); padding-inline: .5rem; }
.est-fs legend b { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; margin-right: .5rem; border-radius: 99px; background: var(--y); color: var(--on-y); font-weight: 500; }
.est-opts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.est-o { position: relative; cursor: pointer; }
.est-o input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.est-o > span { display: grid; gap: .1rem; padding: .7rem 1rem; border: 1.5px solid var(--line2); border-radius: 16px; font-weight: 700; transition: background-color .25s, border-color .25s; }
.est-o small { font-weight: 500; color: var(--mute); font-size: .82rem; }
.est-o:hover > span { border-color: var(--ink); }
.est-o input:checked + span { background: var(--y); border-color: var(--y); color: var(--on-y); }
.est-o input:checked + span small { color: #262626; }
.est-o input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.est-lv .est-o > span { min-width: 12rem; }
.est-grp + .est-grp { margin-top: 1.1rem; }
.est-grp h4 { font-family: var(--f-m); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 500; font-style: normal; }
.est-hint { margin-top: .8rem; color: var(--mute); font-size: .9rem; }
.est-out { background: var(--k); color: var(--w); border-radius: 28px; padding: clamp(1.3rem, 2.4vw, 2rem); display: grid; gap: .9rem; border: 1px solid var(--k); }
[data-theme="dark"] .est-out { background: var(--surface); color: var(--ink); border-color: var(--line2); }
.est-out .mono { color: #a3a3a3; }
.est-big { font-family: var(--f-d); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.01em; background: linear-gradient(var(--y), var(--y)) no-repeat 0 100% / 100% 5px; padding-bottom: 4px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.est-eq { color: #d4d4d4; font-weight: 600; margin-top: .2rem; }
[data-theme="dark"] .est-eq { color: var(--mute); }
.est-list { display: grid; gap: .35rem; font-size: .92rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .2); }
[data-theme="dark"] .est-list { border-top-color: var(--line2); }
.est-list li { display: flex; justify-content: space-between; gap: 1rem; }
.est-list li span:last-child { font-family: var(--f-m); font-size: .8rem; white-space: nowrap; }
.est-delay { padding: .8rem 1rem; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, .4); font-size: .92rem; }
[data-theme="dark"] .est-delay { border-color: var(--line2); }
.est-delay b { color: var(--acc-t); }
.est-fine { font-size: .82rem; color: #a3a3a3; line-height: 1.45; }
.est-fine a { text-decoration: underline; text-decoration-color: var(--y); text-underline-offset: .2em; }
.est-out .btn { justify-self: start; }
.est-out .btn:hover { color: var(--w); }
[data-theme="dark"] .est-out .btn:hover { color: var(--w); }

/* ---------------------------------------------------------------- pages de détail */
.svc-two { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
@media (min-width: 900px) { .svc-two { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.svc-two .lede { margin-top: 1rem; }
.svc-inc { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(1.3rem, 2.6vw, 2.2rem); }
.svc-inc .ticks { gap: .75rem; }
.svc-cur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.svc-cur p { color: var(--mute); font-size: .95rem; }
.svc-ranges { display: grid; gap: 14px; margin-top: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.svc-range { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.3rem; display: grid; gap: .4rem; align-content: start; }
.svc-range h4 { font-size: 1.1rem; }
.svc-range b { font-family: var(--f-m); font-size: .85rem; font-weight: 500; background: var(--y); color: var(--on-y); border-radius: 99px; padding: .2rem .7rem; width: fit-content; }
.svc-range p { color: var(--mute); font-size: .95rem; }
.svc-quote { background: var(--surface); border: 1px dashed var(--line2); border-radius: 28px; padding: clamp(1.4rem, 2.6vw, 2.2rem); display: grid; gap: .8rem; justify-items: start; }
.svc-quote h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.svc-quote p { color: var(--mute); max-width: 62ch; }
.svc-also { margin-top: 1.4rem; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.svc-also article { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.2rem 1.3rem; display: grid; gap: .4rem; }
.svc-also h4 { font-size: 1.05rem; }
.svc-also p { color: var(--mute); font-size: .95rem; }
.svc-also .pr { font-family: var(--f-m); font-size: .8rem; color: var(--ink); }
.svc-steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: s; }
.svc-step { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 1.5rem; display: grid; gap: .7rem; align-content: start; }
.svc-step .n { font-family: var(--f-d); font-weight: 900; font-style: italic; font-size: 3.6rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.6px var(--ink); letter-spacing: 0; }
.svc-step:hover .n { -webkit-text-stroke-color: var(--y); }
.svc-step h3 { font-size: 1.4rem; }
.svc-step p { color: var(--mute); }
.svc-step .get { margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--line2); }
.svc-step .get .mono { color: var(--mute); display: block; margin-bottom: .2rem; }
.svc-step .get p { color: var(--ink); font-size: .95rem; }
.svc-ref { display: grid; gap: 1rem; background: var(--k); color: var(--w); border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.4rem); }
[data-theme="dark"] .svc-ref { background: var(--surface); color: var(--ink); border: 1px solid var(--line2); }
.svc-ref .mono { color: #a3a3a3; }
[data-theme="dark"] .svc-ref .mono { color: var(--mute); }
.svc-ref h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.svc-ref p { color: #d4d4d4; max-width: 66ch; }
[data-theme="dark"] .svc-ref p { color: var(--mute); }
.svc-ref .link-a { color: inherit; margin-top: .3rem; width: fit-content; }
.svc-read { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.svc-read a { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.2rem 1.3rem; display: grid; gap: .5rem; transition: border-color .3s, transform .4s var(--ease); }
.svc-read a:hover { border-color: var(--ink); transform: translateY(-3px); }
.svc-read .mono { color: var(--mute); }
.svc-read b { font-family: var(--f-d); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.05rem; line-height: 1.15; }
.svc-sx { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.svc-sx a { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 1.2rem 1.4rem; transition: border-color .3s, transform .4s var(--ease); }
.svc-sx a:hover { border-color: var(--ink); transform: translateY(-3px); }
.svc-sx a:hover .svc-ico { transform: rotate(-8deg) scale(1.06); }
.svc-sx b { display: block; font-family: var(--f-d); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.2rem; line-height: 1.1; }
.svc-sx span.d { color: var(--mute); font-size: .92rem; }
.svc-sx .ic.go { margin-left: auto; transition: transform .35s var(--ease); }
.svc-sx a:hover .ic.go { transform: translateX(5px); }
.svc-sim { background: var(--surface); border: 1.5px dashed var(--line2); border-radius: 28px; padding: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: .6rem; }
.svc-sim h2 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.svc-sim p { color: var(--mute); max-width: 62ch; }
.svc-faq .faq-grid { gap: 1.5rem; }
.sec.tight { padding-block: clamp(2.5rem, 5vw, 5rem); }

/* ---------------------------------------------------------------- design system vivant (Studio créatif) */
.dsv { background: var(--bg2); border-block: 1px solid var(--line); }
.dsv-grid { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 1000px) { .dsv-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } .dsv-ctl { position: sticky; top: calc(var(--hdr) + 18px); } }
.dsv-ctl { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 1.4rem; display: grid; gap: 1.2rem; min-width: 0; }
.dsv-f { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.dsv-f > label, .dsv-f > legend { font-family: var(--f-m); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 500; display: flex; justify-content: space-between; gap: 1rem; padding: 0; width: 100%; }
.dsv-f output { color: var(--ink); }
.dsv-f input[type="range"] { width: 100%; accent-color: var(--acc); height: 28px; cursor: pointer; background: transparent; }
.dsv-f input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line2); }
.dsv-f input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line2); }
.dsv-f input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--acc); border: 2px solid var(--ink); }
.dsv-f input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 2px solid var(--ink); }
.dsv-f input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.dsv-n { color: var(--mute); font-size: .85rem; line-height: 1.45; margin-top: -.5rem; }
.dsv-sw { display: flex; flex-wrap: wrap; gap: .5rem; }
.dsv-sw label { position: relative; cursor: pointer; }
.dsv-sw input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dsv-sw span { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem; border-radius: 99px; border: 1.5px solid var(--line2); font-weight: 700; font-size: .9rem; transition: border-color .25s, background-color .25s; }
.dsv-sw input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dsv-sw input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.dsv-code { margin: 0; padding: 1rem; border-radius: 16px; background: var(--k); color: #f5f5f5; font-family: var(--f-m); font-size: .74rem; line-height: 1.55; overflow-x: auto; white-space: pre; max-width: 100%; }
[data-theme="dark"] .dsv-code { background: #0a0a0a; border: 1px solid var(--line2); }
.dsv-code b { font-weight: 400; color: var(--acc-t); }
.dsv-copy { justify-self: start; }

/* aperçu : le bloc possède ses propres variables, indépendantes du thème du site */
.dsv-pre { --p-r: 12px; --p-d: 1; --p-acc: var(--acc); --p-acc-ink: var(--on-y); --p-bg: #f5f5f5; --p-surface: #ffffff; --p-ink: #0a0a0a; --p-mute: #595959; --p-line: rgba(0, 0, 0, .22);
  background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--line2); border-radius: calc(var(--p-r) + 12px); padding: calc(1.6rem * var(--p-d)); display: grid; gap: calc(1.3rem * var(--p-d)); min-width: 0; transition: background-color .3s, color .3s, border-radius .25s; font-family: var(--f-t); }
.dsv-pre[data-pt="dark"] { --p-bg: #0a0a0a; --p-surface: #171717; --p-ink: #f5f5f5; --p-mute: #a3a3a3; --p-line: rgba(255, 255, 255, .26); }
.dsv-pre h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.dsv-pre .p-m { color: var(--p-mute); }
.dsv-pre .p-row { display: flex; flex-wrap: wrap; gap: calc(.7rem * var(--p-d)); align-items: center; }
.dsv-pre .p-btn { display: inline-flex; align-items: center; justify-content: center; padding: calc(.8rem * var(--p-d)) calc(1.4rem * var(--p-d)); border-radius: var(--p-r); font-weight: 700; border: 1.5px solid var(--p-line); background: var(--p-acc); color: var(--p-acc-ink); cursor: default; transition: border-radius .25s, padding .25s; }
.dsv-pre .p-btn.o { background: transparent; color: var(--p-ink); border-color: var(--p-ink); }
.dsv-pre .p-card { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: calc(var(--p-r) * 1.6); padding: calc(1.3rem * var(--p-d)); display: grid; gap: calc(.7rem * var(--p-d)); transition: border-radius .25s, padding .25s; }
.dsv-pre .p-card h4 { font-size: 1.15rem; }
.dsv-pre .p-in { display: grid; gap: .3rem; }
.dsv-pre .p-in span { font-family: var(--f-m); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--p-mute); }
.dsv-pre .p-in div { padding: calc(.75rem * var(--p-d)) calc(1rem * var(--p-d)); border-radius: var(--p-r); border: 1.5px solid var(--p-line); background: var(--p-bg); color: var(--p-mute); transition: border-radius .25s, padding .25s; }
.dsv-pre .p-bd { display: inline-block; padding: calc(.25rem * var(--p-d)) calc(.7rem * var(--p-d)); border-radius: calc(var(--p-r) * 5); background: var(--p-acc); color: var(--p-acc-ink); border: 1.5px solid var(--p-line); font-family: var(--f-m); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.dsv-pre .p-bar { height: calc(12px * var(--p-d)); border-radius: calc(var(--p-r) * 5); background: var(--p-line); overflow: hidden; }
.dsv-pre .p-bar i { display: block; height: 100%; width: 62%; background: var(--p-acc); border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--p-line); }
.dsv-pre .p-tg { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.dsv-pre .p-tg i { width: 46px; height: 26px; border-radius: calc(var(--p-r) * 5); background: var(--p-acc); border: 1.5px solid var(--p-line); position: relative; }
.dsv-pre .p-tg i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--p-acc-ink); }
.dsv-pre button.p-tg { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.dsv-pre button.p-tg:focus-visible { outline: 3px solid var(--p-ink); outline-offset: 4px; border-radius: 99px; }
.dsv-pre .p-tg i { transition: background-color .25s; }
.dsv-pre .p-tg i::after { transition: right .25s, left .25s, background-color .25s; }
.dsv-pre .p-tg[aria-checked="false"] i { background: var(--p-line); }
.dsv-pre .p-tg[aria-checked="false"] i::after { right: auto; left: 3px; background: var(--p-ink); }
.dsv-pre .p-img { aspect-ratio: 16 / 9; border-radius: calc(var(--p-r) * 1.1); background: linear-gradient(135deg, var(--p-acc), color-mix(in srgb, var(--p-acc) 30%, var(--p-surface))); border: 1px solid var(--p-line); display: grid; place-items: center; transition: border-radius .25s; }
.dsv-pre .p-img svg { width: 22%; fill: var(--p-acc-ink); opacity: .9; }
.dsv-pre .p-card .p-row .p-btn { padding-block: calc(.55rem * var(--p-d)); }
.dsv-pre .p-tk { display: grid; gap: calc(.5rem * var(--p-d)); }
.dsv-pre .p-tk li { display: flex; gap: .6rem; align-items: center; }
.dsv-pre .p-tk li::before { content: ""; width: .8rem; height: .8rem; border-radius: calc(var(--p-r) * .5); background: var(--p-acc); border: 1.5px solid var(--p-line); flex: none; }
.dsv-pre .p-two { display: grid; gap: calc(1rem * var(--p-d)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

@media (max-width: 480px) { .svc-from b { font-size: 1.15rem; } .est-lv .est-o > span { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .svc-card, .svc-ico, .svc-sx a, .svc-read a { transition: none; } .svc-card:hover { transform: none; } }

/* lien souligné de jaune dans les textes courants */
.u2 { text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: .14em; text-underline-offset: .2em; font-weight: 600; color: var(--ink); }

/* note sous le prix d'une offre (ex. « Sur devis » + délai de devis) */
.offer-note { color: var(--mute); font-size: .92rem; line-height: 1.45; margin-block: .5rem 1rem; }
.offer-price + .offer-note { margin-top: .4rem; }

/* titres des cartes services : taille fluide en unités de conteneur, pour qu'un mot long (« APPLICATIONS ») tienne toujours dans la carte */
.svc-card { container-type: inline-size; }
html[data-type="dyvox7"] .svc-card .svc-t { font-size: clamp(1.05rem, 8.6cqw, 2rem); line-height: 1.1; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }

/* prix en Inter 900 italique : l'espace des milliers paraissait absente (« 1499 ») ; on l'élargit légèrement */
.svc-from b { word-spacing: .14em; }