/* ==========================================================================
   DEVICES — every mockup of the home page drawn like the hero's:
   a laptop (screen in a dark bezel with its camera, Safari chrome, an aluminium base)
   and a phone (dark frame, metal rim, island, buttons, a glint on the glass).
   Applied by class: .dv-pc (the browser) with .dv-bar and .dv-pg inside, .dv-ph (phone wrapper), .dv-ph1 (single-block phone).
   ========================================================================== */
.dv-pc {
  --bz: 9px;
  overflow: visible !important; padding: var(--bz) var(--bz) calc(var(--bz) * 1.15) !important;
  border-radius: calc(var(--bz) * 1.7) calc(var(--bz) * 1.7) calc(var(--bz) * .7) calc(var(--bz) * .7) !important;
  background: radial-gradient(circle at 50% calc(var(--bz) * .5), #2C2A31 1.4px, #121014 2.2px, transparent 2.8px), #1B191C !important; color-scheme: light;
  box-shadow: inset 0 0 0 1.5px #4A454D, inset 0 0 0 3px #0E0D0F, 0 3px 6px rgba(20, 18, 21, .16), 0 26px 46px -12px rgba(20, 18, 21, .34), 0 60px 100px -36px rgba(20, 18, 21, .36) !important;
}
.dv-pc::before { content: ""; position: absolute; z-index: 7; inset: var(--bz) var(--bz) calc(var(--bz) * 1.15); pointer-events: none; border-radius: calc(var(--bz) * .6); background: linear-gradient(115deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 30%); }
.dv-pc::after {
  content: ""; position: absolute; z-index: 0; left: -7%; right: -7%; top: 100%; height: calc(var(--bz) * 1.7); pointer-events: none;
  border-radius: 3px 3px 40% 40% / 3px 3px 100% 100%;
  background: linear-gradient(#A9A39C, #A9A39C) 50% 0 / 15% 30% no-repeat, linear-gradient(#EFEBE5, #D3CDC5 55%, #9E978F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 20px -8px rgba(20, 18, 21, .45);
}
.dv-bar {
  position: relative; flex: none; border-radius: calc(var(--bz) * .6) calc(var(--bz) * .6) 0 0;
  background: linear-gradient(#F7F4EE, #ECE7DE) !important; border-bottom: 1px solid rgba(20, 18, 21, .1); color: #4a454c;
}
.dv-bar i { background: #FF5F57 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); opacity: 1 !important; }
.dv-bar i:nth-child(2) { background: #FEBC2E !important; } .dv-bar i:nth-child(3) { background: #28C840 !important; }
.dv-bar span { background: rgba(255, 255, 255, .9) !important; color: #4a454c !important; box-shadow: 0 0 0 1px rgba(20, 18, 21, .07), 0 1px 2px rgba(20, 18, 21, .06); opacity: 1 !important; }
.dv-pg { border-radius: 0 0 calc(var(--bz) * .6) calc(var(--bz) * .6); overflow: hidden; }

/* each laptop: its own size of bezel, and its page keeps the background it had */
.restyle.dv-pc { --bz: clamp(7px, .9vw, 12px); }
.restyle .rs-page { background: var(--rs-bg); transition: background-color .6s; }
.ld-site.dv-pc { --bz: 7px; position: relative; display: flex; flex-direction: column; }
.lds-pg { background: #FBF7F2; }
.mt-bw.dv-pc { --bz: 1.3cqw; }
.mt-bw.dv-pc::before { border-radius: .8cqw; }
.nu-site.dv-pc { --bz: 12px; }
.nus-scroll.dv-pg { background: var(--nu-bone); overflow-y: auto; }   /* the demo site scrolls: .dv-pg alone would lock it */
.cx-pc.dv-pc { --bz: 6px; }
.cx-view.dv-pg { background: #fff; }
.ad-map.dv-pc { --bz: 1.4cqw; display: flex; flex-direction: column; }
.adm-bar { display: flex; align-items: center; gap: .9cqw; height: 4.6cqw; padding: 0 2cqw; }
.adm-bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; }
.adm-bar span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .7cqw 4cqw; border-radius: .9cqw; font: 500 1.6cqw/1 var(--text); white-space: nowrap; }
.adm-pg { position: relative; flex: 1; background: #EAEFE8; }

/* phones: a wrapper with the screen inside (méthode) */
.dv-ph {
  position: absolute; background: #1B191C !important; padding: 3.2% !important; border-radius: 15% / 7.2% !important;
  box-shadow: inset 0 0 0 .3cqw #4A454D, inset 0 0 0 .55cqw #0E0D0F, 0 .4cqw .8cqw rgba(20, 18, 21, .2), 0 5cqw 9cqw -1cqw rgba(20, 18, 21, .42), 0 10cqw 18cqw -5cqw rgba(20, 18, 21, .38) !important;
}
.dv-ph > * { border-radius: 12% / 5.6% !important; }
.dv-ph::before { content: ""; position: absolute; z-index: 6; left: 50%; top: 5%; width: 30%; height: 3.6%; transform: translateX(-50%); border-radius: 99px; background: #0B0A0C; }
.dv-ph::after { content: ""; position: absolute; left: -1.6%; top: 18%; width: 1.6%; height: 26%; border-radius: 2px 0 0 2px; background: linear-gradient(#3A363C 0 30%, transparent 30% 42%, #3A363C 42% 100%); }
.dv-ph > *::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%); }

/* phones drawn in one block (services bands, the demo): the frame is a ring around the screen */
.dv-ph1 { --fr: 1.4cqw; }
.ad-phone.dv-ph1 { --fr: 1.8cqw; } .ld-phone.dv-ph1 { --fr: 1.15cqw; } .nu-app.dv-ph1 { --fr: 11px; }
.dv-ph1 {
  box-shadow: 0 0 0 var(--fr) #1B191C, 0 0 0 calc(var(--fr) + 1.5px) #4A454D, 0 0 0 calc(var(--fr) + 3px) #0E0D0F,
    0 6px 12px rgba(20, 18, 21, .2), 0 40px 70px -18px rgba(20, 18, 21, .5), 0 80px 120px -50px rgba(20, 18, 21, .45) !important;
}
.dv-ph1::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 36%); }

/* ==========================================================================
   v2 — the same devices as the hero, at the same scale and angle:
   a big landscape laptop at the back turned slightly left, a smaller phone in front turned right
   ========================================================================== */
/* a faint light rim so the devices stay drawn on the dark sections */
.dv-pc { box-shadow: inset 0 0 0 1.5px #4A454D, inset 0 0 0 3px #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .1), 0 3px 6px rgba(20, 18, 21, .16), 0 26px 46px -12px rgba(20, 18, 21, .34), 0 60px 100px -36px rgba(20, 18, 21, .36) !important; }
.dv-ph1 {
  box-shadow: 0 0 0 var(--fr) #1B191C, 0 0 0 calc(var(--fr) + 1px) #4A454D, 0 0 0 calc(var(--fr) + 2.5px) #0E0D0F, 0 0 0 calc(var(--fr) + 3.5px) rgba(255, 255, 255, .1),
    0 6px 12px rgba(20, 18, 21, .2), 0 40px 70px -18px rgba(20, 18, 21, .5), 0 80px 120px -50px rgba(20, 18, 21, .45) !important;
}

/* — Application web: the dispatch screen on the laptop, the technician's app on the phone — */
.appdemo { aspect-ratio: 1.2; }
.ad-map.dv-pc { left: auto; right: -2cqw; top: 3cqw; bottom: auto; width: 84cqw; aspect-ratio: 1.42; --bz: 1.25cqw; transform: perspective(2400px) rotateY(-13deg) rotateX(3deg); }
.ad-phone.dv-ph1 { --fr: .95cqw; left: 2cqw; top: 25cqw; width: 27cqw; height: auto; aspect-ratio: .49; padding: 5.5cqw 1.95cqw 0; border-radius: 4.3cqw; transform: perspective(2000px) rotateY(16deg) rotateX(2deg); }
.adm-pg { display: grid; grid-template-columns: 31% 1fr; font-family: 'Instrument Sans', var(--text); }
.adm-side { padding: 1.7cqw 1.5cqw; background: #fff; border-right: 1px solid #E3E7E3; }
.adm-logo { display: flex; align-items: center; gap: .7cqw; font-size: 1.35cqw; font-weight: 700; color: #0E6E6E; }
.adm-logo i { width: 1.6cqw; height: 1.6cqw; border-radius: .5cqw; background: #0E6E6E; }
.adm-sh { margin-top: 2cqw; font-size: 1.7cqw; font-weight: 700; letter-spacing: -.02em; }
.adm-sh small { display: block; margin-top: .3cqw; font-size: 1.05cqw; font-weight: 500; color: #8A9792; }
.adm-tech { display: grid; grid-template-columns: 2.8cqw 1fr; gap: 0 .9cqw; align-items: center; margin-top: 1.2cqw; padding: .9cqw; border-radius: 1cqw; background: #F6F7F5; }
.adm-tech b { grid-row: span 2; display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--c); color: #fff; font-size: 1cqw; }
.adm-tech span { font-size: .95cqw; color: #5A6B66; line-height: 1.3; } .adm-tech strong { display: block; font-size: 1.15cqw; color: #0F1F22; }
.adm-tech em { grid-column: 2; justify-self: start; margin-top: .4cqw; padding: .25cqw .7cqw; border-radius: 99px; background: #E7ECEA; font: 600 .85cqw/1.3 'Instrument Sans', sans-serif; font-style: normal; color: #5A6B66; }
.adm-tech em.go { background: #FFE9D6; color: #B4520E; } .adm-tech em.new { background: #DDEBFF; color: #1F3A8A; }
.adm-kpi { display: flex; gap: .6cqw; margin-top: 1.6cqw; }
.adm-kpi span { flex: 1; padding: .7cqw; border-radius: .9cqw; background: #F6F7F5; font-size: .85cqw; color: #5A6B66; }
.adm-kpi b { display: block; font-size: 1.4cqw; color: #0F1F22; }
.adm-area { position: relative; overflow: hidden; background: #EAEFE8; }
.adm-area svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.adm-route { fill: none; stroke: #0E6E6E; stroke-width: 2.6; stroke-dasharray: 5 5; stroke-linecap: round; }
.adm-route.r2 { stroke: #1F3A8A; }
.adm-area .adm-town { font-size: 1.15cqw; }
.adm-area .adm-pin { width: 3.4cqw; height: 3.4cqw; margin: -1.7cqw 0 0 -1.7cqw; border-width: .35cqw; font-size: 1.05cqw; }
.adm-area .adm-card { right: 1.4cqw; top: 1.4cqw; padding: 1cqw 1.4cqw; } .adm-area .adm-card b { font-size: 1.5cqw; } .adm-area .adm-card span { font-size: 1.05cqw; }
.adp-tabs svg { width: 6.9cqw; height: 6.9cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* — Site + application: the workshop's tool on the phone, its booking page on a laptop — */
.linkdemo { position: relative; display: block; aspect-ratio: 1.2; padding: 0; }
.ld-site.dv-pc { position: absolute; right: -2cqw; top: 3cqw; width: 84cqw; aspect-ratio: 1.42; --bz: 1.25cqw; transform: perspective(2400px) rotateY(-13deg) rotateX(3deg); }
.lds-bar.dv-bar { height: 4.2cqw; gap: 1cqw; padding: 0 2cqw; }
.lds-bar.dv-bar i { width: 1.2cqw; height: 1.2cqw; }
.lds-bar.dv-bar span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: .6cqw 5cqw; border-radius: .8cqw; font-size: 1.5cqw; }
.lds-pg { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 0; }
.lds-pg .lds-ph { aspect-ratio: auto; height: 100%; }
.lds-pg .lds-in { container-type: inline-size; align-self: center; padding: 0 4cqw; }
.ld-phone.dv-ph1 { --fr: .95cqw; position: absolute; left: 2cqw; top: 25cqw; width: 27cqw; aspect-ratio: .49; padding: 5.75cqw 1.9cqw 0; border-radius: 4.3cqw; transform: perspective(2000px) rotateY(16deg) rotateX(2deg); z-index: 2; }
.ld-path { position: absolute; z-index: 3; left: 24cqw; top: 66cqw; width: 26cqw; height: 12cqw; }

@media (max-width: 899px) {
  .appdemo, .linkdemo { aspect-ratio: .8; }
  .ad-map.dv-pc, .ld-site.dv-pc { right: -4cqw; top: 2cqw; width: 94cqw; }
  .ad-phone.dv-ph1, .ld-phone.dv-ph1 { --fr: 1.4cqw; left: 0; top: 36cqw; width: 40cqw; padding: 8.1cqw 2.9cqw 0; border-radius: 6.4cqw; }
  .ld-phone.dv-ph1 { padding: 8.5cqw 2.8cqw 0; }
  .ld-path { display: none; }
}

/* — Méthode: the laptops turned like the hero's; the phones show a status bar, the site fits the screen — */
.mt-s2 .mt-bw.dv-pc { transform: perspective(1800px) rotateY(-12deg) rotateX(3deg); }
.mt-s3 .mt-bw.dv-pc { transform: perspective(1800px) rotateY(-12deg) rotateX(3deg); }
.mt-s4 .mt-bw.dv-pc { transform: perspective(1800px) rotateY(-10deg) rotateX(3deg); }
.mt-s5 .mt-bw.dv-pc { transform: perspective(1800px) rotateY(-13deg) rotateX(3deg); }
.mt-s5 .mt-ph.dv-ph { transform: perspective(1600px) rotateY(16deg) rotateX(2deg); }
.mt-s6 .mt-ph.dv-ph { transform: perspective(1600px) rotateY(14deg) rotateX(2deg); }
.mt-s1 .mt-ph.dv-ph { transform: perspective(1600px) rotateY(-14deg) rotateX(2deg); }
.dv-ph .mt-scr:not(.mt-call) { background: #fff; padding-top: 11%; }
.dv-ph .mt-scr:not(.mt-call) > img { height: auto; object-fit: initial; }
.dv-ph .mt-scr:not(.mt-call)::before { content: "9:41"; position: absolute; z-index: 6; left: 11%; top: 4.6%; font: 600 1.25cqw/1 -apple-system, "Inter", sans-serif; color: #141215; }
.dv-ph { aspect-ratio: .49 !important; padding: 1cqw !important; }   /* cqw: a % padding would follow the stage, not the phone */
.dv-ph::before { top: 5.2%; height: 3.4%; width: 28%; }

/* services bands: the three demos a touch smaller, centred in their column */
@media (min-width: 900px) {
  .band-in > .restyle, .band-in > .appdemo, .band-in > .linkdemo { width: 86%; justify-self: center; }
}

/* ==========================================================================
   VOLUME, everywhere on the home page (as the hero): every laptop and phone gets a body — a dark edge offset behind
   it, like the thickness of the device seen at an angle — and a glare that sweeps its glass now and then.
   The groups that are not driven by script positions float gently (the services' demos, the projects).
   ========================================================================== */
.dv-pc { box-shadow: inset 0 0 0 1.5px #4A454D, inset 0 0 0 3px #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .1),
  .35cqw .3cqw 0 .05cqw #2a272d, .7cqw .55cqw 0 0 #121014, 0 3px 6px rgba(20, 18, 21, .16), 0 26px 46px -12px rgba(20, 18, 21, .34), 0 60px 100px -36px rgba(20, 18, 21, .36) !important; }
.dv-pc::before { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 60%) -200% 0 / 250% 100% no-repeat,
  linear-gradient(115deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 30%); animation: dv-sweep 9s ease-in-out infinite; }
.dv-pc:nth-of-type(2n)::before { animation-delay: -3s; }
@keyframes dv-sweep { 0%, 62% { background-position: -200% 0, 0 0; } 92%, 100% { background-position: 200% 0, 0 0; } }
.dv-ph, .dv-ph1 { filter: drop-shadow(-.45cqw .35cqw 0 #121014); }
@media (prefers-reduced-motion: no-preference) {
  .band-in > .restyle, .band-in > .appdemo, .band-in > .linkdemo { animation: dv-float 7s ease-in-out infinite; }
  .pjc .pjc-dev { animation: dv-float 7s ease-in-out infinite; }
  .pjc:nth-child(2) .pjc-dev { animation-delay: -2.3s; } .pjc:nth-child(3) .pjc-dev { animation-delay: -4.6s; }
}
@keyframes dv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .dv-pc::before { animation: none; } }
.cs-fr { filter: drop-shadow(-.4cqw .3cqw 0 #121014); }
/* « On en parle ? » floats too: the whole stage moves as one, so the ring, the devices and the link stay together */
@media (prefers-reduced-motion: no-preference) { .cta-stage { animation: dv-float 7s ease-in-out infinite; } }
/* « On en parle ? »: the stage's sway was too slight to be seen; each device floats on its own now, clearly,
   out of step (the rings and the link stay where the script puts them) */
@media (prefers-reduced-motion: no-preference) {
  .cta-stage { animation: none; }
  .cta-stage .cs-site, .cta-stage .cs-app, .cta-stage .cs-win { animation: dv-float2 6s ease-in-out infinite; }
  .cta-stage .cs-app { animation-delay: -2s; }
  .cta-stage .cs-win:nth-child(2) { animation-delay: -1.3s; } .cta-stage .cs-win:nth-child(3) { animation-delay: -3.1s; }
}
@keyframes dv-float2 { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -18px; rotate: .8deg; } }
/* thinner bodies: the edge is a hairline of depth, not a slab */
.dv-pc { box-shadow: inset 0 0 0 1.5px #4A454D, inset 0 0 0 3px #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .1),
  .14cqw .12cqw 0 0 #2a272d, .28cqw .22cqw 0 0 #141215, 0 3px 6px rgba(20, 18, 21, .16), 0 26px 46px -12px rgba(20, 18, 21, .34), 0 60px 100px -36px rgba(20, 18, 21, .36) !important; }
.dv-ph, .dv-ph1 { filter: drop-shadow(-.18cqw .14cqw 0 #141215); }
/* screens seen from the front have no visible side: no edge at all; only the tilted ones (the projects) keep a thin one */
.dv-pc { box-shadow: inset 0 0 0 1.5px #4A454D, inset 0 0 0 3px #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .1), 0 3px 6px rgba(20, 18, 21, .16), 0 26px 46px -12px rgba(20, 18, 21, .34), 0 60px 100px -36px rgba(20, 18, 21, .36) !important; }
.dv-ph, .dv-ph1 { filter: none; }
.pjc-dev .dv-pc { box-shadow: inset 0 0 0 1.5px #4A454D, inset 0 0 0 3px #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .1), .14cqw .12cqw 0 0 #2a272d, .28cqw .22cqw 0 0 #141215, 0 26px 46px -12px rgba(20, 18, 21, .34), 0 60px 100px -36px rgba(20, 18, 21, .36) !important; }
.pjc-dev .dv-ph { filter: drop-shadow(-.18cqw .14cqw 0 #141215); }

/* ==========================================================================
   MOBILE · the services bands: the demos keep the desktop composition (a laptop with the phone in front), smaller,
   and never wider than the band
   ========================================================================== */
@media (max-width: 899px) {
  .band-in > .appdemo, .band-in > .linkdemo { width: 100%; aspect-ratio: 1.3; margin: 4px 0 8px; overflow: visible; }
  .ad-map.dv-pc, .ld-site.dv-pc { left: auto; right: 2cqw; top: 3cqw; width: 78cqw; }
  .ad-phone.dv-ph1, .ld-phone.dv-ph1 { --fr: 1.1cqw; left: 2cqw; top: 22cqw; width: 27cqw; padding: 5.6cqw 1.95cqw 0; border-radius: 4.3cqw; }
  .ld-phone.dv-ph1 { padding: 5.8cqw 1.9cqw 0; }
  .band-in > .restyle { width: 100%; }
}