/* HDA Solutions — "Luminous" edition (26 Oct 2026).
   Keeps the original immersive, modern style (glass, glow, gradients) but lifts it from near-black
   to luminous indigo/teal mid-tones, with brighter text. Adds: display type, product hero scene,
   service icons, audience band, coloured step discs. Loaded last, after the original styles. */

@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --ink:#f5f7ff;--muted:#d3dcf0;--soft:#aebde0;
  --teal:#2dd4bf;--aqua:#67e8f9;--coral:#fb8a72;--amber:#fbbf24;--violet:#a5b4fc;
  --display:"Bricolage Grotesque",Arial,Helvetica,sans-serif;
}

/* Page base: luminous indigo → teal instead of near-black */
body{color:var(--ink);background:
  radial-gradient(60% 40% at 100% 18%,#3b4fb855,transparent 70%),
  radial-gradient(50% 35% at 0% 55%,#0e8a9455,transparent 70%),
  radial-gradient(60% 40% at 100% 90%,#7c3aed40,transparent 70%),
  linear-gradient(180deg,#141d45 0%,#1a2a5c 35%,#173f63 70%,#1a2e5e 100%)}
header{background:#141d45e6;border-color:#ffffff1a;backdrop-filter:blur(10px)}

h1,h2,h3,h4,.brand,.p-title{font-family:var(--display)}
h1{font-weight:800;letter-spacing:-2.4px;line-height:1.02}
h2{font-weight:700;letter-spacing:-1.2px}
h3{font-weight:700;letter-spacing:-.4px}
.eyebrow{text-transform:none;letter-spacing:.2px;font-size:14px;font-weight:700;color:var(--aqua)}
.sectionhead p,.card p,.creative p,.creds-note,.dark p,.case ul,.intro{color:var(--muted)}
.ribbon{color:var(--soft);border-color:#ffffff22;background:transparent}
.textlink{color:#e0e8ff}

/* Buttons: coral, warm and visible on the cool background */
.button{background:linear-gradient(110deg,#fb8a72,#f9736a);color:#fff;border:0;border-radius:12px;box-shadow:0 10px 30px #f9736244}
.button:hover{filter:brightness(1.07)}

/* Hero: original city image, a little brighter */
.hero:before{background:linear-gradient(0deg,#141d45 0%,transparent 24%),url('/media/hero-city-layer.svg') right top/auto 100% no-repeat,url('/media/hero-city-right.webp') right top/auto 100% no-repeat,linear-gradient(90deg,#141d45e6 0%,#141d45b3 45%,#141d4599 100%),url('/media/hero-city.webp') left 12%/cover no-repeat!important}
@media(prefers-reduced-motion:reduce){.hero:before{background:linear-gradient(0deg,#141d45 0%,transparent 24%),url('/media/hero-city-layer-static.svg') right top/auto 100% no-repeat,url('/media/hero-city-right.webp') right top/auto 100% no-repeat,linear-gradient(90deg,#141d45e6 0%,#141d45b3 45%,#141d4599 100%),url('/media/hero-city.webp') left 12%/cover no-repeat!important}}
.hero{grid-template-columns:1fr 1.05fr!important;align-items:center}
h1 em{background:linear-gradient(100deg,#86e8ff,#a69bff,#efb3ec);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Product scene */
.scene{position:relative;min-height:440px;width:100%;max-width:600px;justify-self:end}
.scene-blob{display:none}
.browser{position:relative;z-index:1;margin-top:22px;width:92%;background:#0b1330;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px #000a,0 0 0 1px #86e8ff40;transform:rotate(-2.5deg)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#141d3d}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#f97362}
.browser-bar i:nth-child(2){background:#f59e0b}.browser-bar i:nth-child(3){background:#22c55e}
.browser-bar span{margin-left:10px;font-size:11px;color:#a5b4cf;background:#0b1330;padding:3px 10px;border-radius:6px}
.browser img{display:block;width:100%;height:auto}
.chat-card{position:absolute;z-index:2;right:-4%;bottom:-6px;width:min(320px,74%);background:#fff;color:#0b1330;border-radius:16px;padding:14px 16px 12px;box-shadow:0 24px 70px #0009}
.chat-head{display:flex;align-items:center;gap:8px;font:700 13px/1.2 var(--display);color:#0b1330;margin-bottom:10px}
.chat-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #22c55e30}
.chat-q{margin:0 0 8px auto;width:fit-content;max-width:90%;background:#0e7c86;color:#fff;font-size:13px;padding:8px 11px;border-radius:12px 12px 3px 12px}
.chat-a{margin:0 0 8px;background:#f1f5f9;color:#0b1330;font-size:13px;padding:8px 11px;border-radius:12px 12px 12px 3px}
.chat-a b{color:#e5484d}
.chat-src{margin:0;font-size:11.5px;color:#92400e;background:#fff4e5;border-left:3px solid #f59e0b;padding:5px 8px;border-radius:4px}
.scene-chip{position:absolute;z-index:3;left:2%;top:0;background:var(--amber);color:#3b2600;font:700 13px/1 var(--display);padding:9px 14px;border-radius:999px;box-shadow:0 10px 24px #f59e0b55;transform:rotate(-4deg)}

/* Cards: frosted glass, one accent colour each */
.card{background:linear-gradient(145deg,#ffffff1c,#ffffff0a);border:1px solid #ffffff2a;backdrop-filter:blur(8px);box-shadow:0 20px 50px #0a102a40}
.card:before{display:none}
.card:hover{border-color:#ffffff55}
.icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:18px;color:#fff;box-shadow:0 10px 24px #0005}
.icon svg{width:26px;height:26px}
.ic-teal{background:linear-gradient(135deg,#2dd4bf,#0e7c86)}
.ic-amber{background:linear-gradient(135deg,#fcd34d,#f59e0b)}
.ic-coral{background:linear-gradient(135deg,#fdba74,#f97362)}
#solutions .grid .card{border-top:3px solid var(--teal)}
#solutions .grid .card:nth-child(2){border-top-color:var(--amber)}
#solutions .grid .card:nth-child(3){border-top-color:var(--coral)}
.number{display:block;font-size:13px;color:var(--aqua)}
.tag{border-color:#ffffff33;color:var(--muted);background:#ffffff0d}

/* CoproSens band: violet → teal glow instead of near-black */
.dark{background:
  radial-gradient(45% 60% at 0% 0%,#2dd4bf30,transparent 70%),
  radial-gradient(40% 60% at 100% 100%,#fb8a7230,transparent 70%),
  linear-gradient(140deg,#24306e,#2a2470 55%,#165067);border-color:#ffffff14;color:var(--ink)}
.case{background:linear-gradient(145deg,#ffffff18,#ffffff08);border:1px solid #ffffff26;border-radius:22px;backdrop-filter:blur(8px)}
.case figcaption,.case .demo-cta span[style]{color:var(--soft)!important}

/* Audience band */
.audience{margin-top:36px}
.audience-title{font-size:26px;margin:0 0 16px}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.aud{background:linear-gradient(145deg,#ffffff1f,#ffffff0b);border:1px solid #ffffff26;border-left:5px solid;border-radius:16px;padding:22px 22px 18px}
.aud h4{margin:0 0 6px;font-size:20px}
.aud p{margin:0;color:var(--muted)}
.aud-teal{border-left-color:var(--teal)}.aud-teal h4{color:var(--teal)}
.aud-amber{border-left-color:var(--amber)}.aud-amber h4{color:var(--amber)}
.aud-coral{border-left-color:var(--coral)}.aud-coral h4{color:var(--coral)}

/* Steps: a real sequence, coloured discs */
.steps .card{background:linear-gradient(145deg,#ffffff1c,#ffffff0a)}
.steps .number{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#0b1330;font:800 16px/1 var(--display);background:var(--teal);margin-bottom:6px}
.steps .card:nth-child(2) .number{background:var(--amber)}
.steps .card:nth-child(3) .number{background:var(--coral)}

/* Contact: bright teal → indigo glow */
.contact{position:relative;overflow:hidden;background:radial-gradient(ellipse at 100% 0,#fb8a7266,transparent 60%),linear-gradient(115deg,#0e8a94,#2b4bc4 70%,#5b3fd0);border:1px solid #ffffff30;color:#fff}
.contact p{color:#eaf2ff}
.contact .eyebrow,.contact .textlink,.contact a:not(.button){color:#fff}

footer{background:#121a3f;border-color:#ffffff1a;color:var(--soft)}
footer a{color:#fff}
.legal{color:var(--soft)}
.demo-thumb{background:#141d45;border-color:#86e8ff60}

/* Project form page */
.p-form{background:linear-gradient(145deg,#ffffff1c,#ffffff0a);border:1px solid #ffffff2a;backdrop-filter:blur(8px)}
.p-form label{color:#f0f4ff}
.p-form input,.p-form select,.p-form textarea{background-color:#101a44;border-color:#4b5a92;color:#f5f7ff}
.p-hint,.p-steps,.p-privacy{color:var(--muted)}

/* Assistant button */
.hda-chat-btn{background:linear-gradient(135deg,#0e8a94,#2dd4bf);border-color:transparent;color:#fff;box-shadow:0 10px 30px #0e8a9455}

@media(max-width:800px){
 .hero{grid-template-columns:1fr!important}
 .hero:before{background:linear-gradient(180deg,#141d45c4 0%,#141d4599 50%,#141d45 100%),url('/media/hero-city-layer-static.svg') 72% center/cover no-repeat,url('/media/hero-city.webp') 72% center/cover no-repeat!important}
 .scene{min-height:0;justify-self:stretch;max-width:none;padding-bottom:150px}
 .browser{width:100%;transform:none}
 .chat-card{right:0;bottom:0;width:86%}
 .audience-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.browser,.scene-chip{transform:none}}

/* Hero chat card: frosted glass instead of pure white (26 Oct) */
.chat-card{background:linear-gradient(150deg,#26346ecc,#1a2556d9);color:#f5f7ff;border:1px solid #86e8ff55;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 70px #0008,0 0 40px #2dd4bf22}
.chat-head{color:#f5f7ff}
.chat-q{background:linear-gradient(110deg,#0e8a94,#14b8a6)}
.chat-a{background:#ffffff14;color:#f5f7ff;border:1px solid #ffffff1f}
.chat-a b{color:#fb8a72}
.chat-src{background:#fbbf2420;color:#fde68a;border-left-color:#fbbf24}

/* Readable light buttons: dark text on cyan */
.button.light{background:#86e8ff;color:#0b1330;font-weight:800}
.button.light:hover{background:#a5efff}

/* Readable coral buttons: dark text */
.button:not(.light){color:#0b1330;font-weight:800}

/* Price estimator links */
.button.price{background:linear-gradient(110deg,#fbbf24,#f59e0b);color:#0b1330;font-weight:800}
nav .links a.nav-price{background:#fbbf24;color:#0b1330;font-weight:800;padding:8px 14px;border-radius:999px}
nav .links a.nav-price:hover{background:#fcd34d}

/* Secondary CTA buttons (dashboard, tools) */
.button.alt{display:flex;width:fit-content;max-width:100%;background:#ffffff;color:#0b1330;border:2px solid #67e8f9;font-weight:800;box-shadow:0 8px 22px #67e8f933}
.button.alt:hover{background:#e0fbff}

/* CoproSens action grid: compact rainbow-flag tiles, AA-contrast text */
#applications .cases.single .case>.actions-grid,#applications .cases.single .case>.actions-note{grid-column:1/-1}
.actions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
.act{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;text-decoration:none;color:#0b1330;box-shadow:0 8px 18px #0005;transition:transform .15s ease,box-shadow .15s ease;min-height:0}
.act:hover,.act:focus-visible{transform:translateY(-2px);box-shadow:0 12px 24px #0007}
.act>strong{font:800 15.5px/1.2 var(--display);color:inherit}
.act>small{display:none}
.act-txt{display:flex;flex-direction:column;gap:2px}
.act-ic{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#ffffffb3;color:#0b1330}
.act-ic svg{width:21px;height:21px}
.act-pilot{background:#E40303}.act-price{background:#FF8C00}.act-contact{background:#FFED00}
.act-dash{background:#008026}.act-demo{background:#24408E}.act-tools{background:#732982}
.act-pilot,.act-dash,.act-demo,.act-tools{color:#fff}
.act-pilot .act-ic,.act-dash .act-ic,.act-demo .act-ic,.act-tools .act-ic{background:#ffffff2e;color:#fff}
.actions-note{text-align:center;font-size:13px;color:var(--soft);margin:12px 0 0}
@media(max-width:1000px){.actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.actions-grid{grid-template-columns:1fr}}

/* Tighter "Ce que nous développons" cards and section spacing */
.section{padding:52px 0}
#solutions .sectionhead{margin-bottom:22px}
#solutions .grid{gap:16px}
#solutions .grid .card{padding:20px 22px}
#solutions .icon{width:40px;height:40px;border-radius:11px;margin-bottom:10px}
#solutions .icon svg{width:21px;height:21px}
#solutions .card h3{font-size:19px;margin:6px 0 8px}
#solutions .card p{font-size:15px;line-height:1.5;margin:0 0 12px}
#solutions .tag{font-size:11.5px;padding:3px 8px}
.dark.section{padding:52px 0}

/* Smooth colour morph between sections (no hard band edges) */
.dark{background:none!important;border-top:0!important;border-bottom:0!important;position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:-120px 0;z-index:-1;pointer-events:none;background:radial-gradient(45% 60% at 0% 0%, rgba(45, 212, 191, 0.19), rgba(0, 0, 0, 0) 70%), radial-gradient(40% 60% at 100% 100%, rgba(251, 138, 114, 0.19), rgba(0, 0, 0, 0) 70%), linear-gradient(140deg, rgb(36, 48, 110), rgb(42, 36, 112) 55%, rgb(22, 80, 103));-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 220px,#000 calc(100% - 220px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 220px,#000 calc(100% - 220px),transparent 100%)}
/* Tighter "Comment démarrer" step cards */
.steps .card{padding:20px 22px}
.steps .card h3{font-size:19px;margin:10px 0 6px}
.steps .card p{font-size:15px;line-height:1.5;margin:0}
/* Tiles sized to their text, centred */
.actions-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px}
.act{flex:0 0 auto;padding:9px 16px 9px 10px}
@media(max-width:520px){.act{flex:1 1 100%}}
/* Even tighter joins between the case-study band and its neighbours */
.dark.section{padding:44px 0 36px}
.dark.section+.wrap>.section:first-child{padding-top:36px}
/* Solution cards: icon beside the number to save a row */
#solutions .grid .card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:18px 20px}
#solutions .grid .card>*{grid-column:1/-1}
#solutions .grid .card>.icon{grid-column:1;width:34px;height:34px;border-radius:10px;margin:0}
#solutions .grid .card>.icon svg{width:18px;height:18px}
#solutions .grid .card>.number{grid-column:2;margin:0}
#solutions .card h3{font-size:18px;margin:10px 0 6px}
#solutions .card p{font-size:14.5px;line-height:1.45;margin:0 0 10px}
#solutions .grid .card{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
#solutions .grid .card>h3,#solutions .grid .card>p{flex:1 1 100%}
#solutions .grid .card>.tag{flex:0 0 auto;margin:0 6px 0 0}
#solutions .grid .card>.tag+.tag{margin-left:-6px}
/* Button palette drawn from the hero's water reflections (all AA contrast) */
.act-pilot{background:linear-gradient(180deg,#f8b27a,#e8743f)}
.act-price{background:linear-gradient(180deg,#7ee8bf,#22c58b)}
.act-contact{background:linear-gradient(180deg,#9adcfd,#38a3f0)}
.act-dash{background:linear-gradient(180deg,#4f6ee8,#2f47c2)}
.act-demo{background:linear-gradient(180deg,#8466f2,#6340d6)}
.act-tools{background:linear-gradient(180deg,#b544d1,#9d34c4)}
.act-pilot,.act-price,.act-contact{color:#0b1330}
.act-pilot .act-ic,.act-price .act-ic,.act-contact .act-ic{background:#ffffff99;color:#0b1330}
.act-dash,.act-demo,.act-tools{color:#fff}
.act-dash .act-ic,.act-demo .act-ic,.act-tools .act-ic{background:#ffffff2e;color:#fff}
.act{border:1px solid #ffffff40}
.button:not(.light):not(.price):not(.alt){background:linear-gradient(180deg,#f8b27a,#e8743f);color:#0b1330;box-shadow:0 10px 26px #e8743f40}
.button.light{background:linear-gradient(180deg,#9adcfd,#38a3f0);color:#0b1330}
nav .links a.nav-price{background:linear-gradient(180deg,#7ee8bf,#22c58b);color:#0b1330}
/* Step cards: number beside title, compact */
.steps .card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:16px 20px}
.steps .card>*{grid-column:1/-1}
.steps .card>.number{grid-column:1;width:34px;height:34px;font-size:13px;margin:0}
.steps .card>h3{grid-column:2;margin:0;font-size:18px}
.steps .card>p{margin:8px 0 0;font-size:14.5px;line-height:1.45}
/* Contact band: smaller, single-line button */
.contact{padding:30px 40px!important;margin-bottom:48px}
.contact h2{font-size:clamp(26px,3vw,36px);margin:6px 0 10px}
.contact p{margin:0}
.contact .button{white-space:nowrap;padding:12px 20px}
.creds{padding-bottom:12px}
.steps .card{align-content:start}
.contact{margin-top:28px}

/* Reflection aesthetic: dark glass tiles lit by a coloured glow, like city lights on water */
.act-pilot{background:linear-gradient(180deg,rgba(232,116,63,.78) 0%,rgba(232,116,63,.42) 55%,rgba(18,22,64,.85) 100%),#141a44;border:1px solid rgba(232,116,63,.75);box-shadow:0 0 22px rgba(232,116,63,.35),0 10px 24px #0007;color:#fff}
.act-pilot .act-ic{background:rgba(232,116,63,.35);color:#fff}
.act-price{background:linear-gradient(180deg,rgba(34,197,139,.78) 0%,rgba(34,197,139,.42) 55%,rgba(18,22,64,.85) 100%),#141a44;border:1px solid rgba(34,197,139,.75);box-shadow:0 0 22px rgba(34,197,139,.35),0 10px 24px #0007;color:#fff}
.act-price .act-ic{background:rgba(34,197,139,.35);color:#fff}
.act-contact{background:linear-gradient(180deg,rgba(56,163,240,.78) 0%,rgba(56,163,240,.42) 55%,rgba(18,22,64,.85) 100%),#141a44;border:1px solid rgba(56,163,240,.75);box-shadow:0 0 22px rgba(56,163,240,.35),0 10px 24px #0007;color:#fff}
.act-contact .act-ic{background:rgba(56,163,240,.35);color:#fff}
.act-dash{background:linear-gradient(180deg,rgba(79,110,232,.78) 0%,rgba(79,110,232,.42) 55%,rgba(18,22,64,.85) 100%),#141a44;border:1px solid rgba(79,110,232,.75);box-shadow:0 0 22px rgba(79,110,232,.35),0 10px 24px #0007;color:#fff}
.act-dash .act-ic{background:rgba(79,110,232,.35);color:#fff}
.act-demo{background:linear-gradient(180deg,rgba(132,102,242,.78) 0%,rgba(132,102,242,.42) 55%,rgba(18,22,64,.85) 100%),#141a44;border:1px solid rgba(132,102,242,.75);box-shadow:0 0 22px rgba(132,102,242,.35),0 10px 24px #0007;color:#fff}
.act-demo .act-ic{background:rgba(132,102,242,.35);color:#fff}
.act-tools{background:linear-gradient(180deg,rgba(181,68,209,.78) 0%,rgba(181,68,209,.42) 55%,rgba(18,22,64,.85) 100%),#141a44;border:1px solid rgba(181,68,209,.75);box-shadow:0 0 22px rgba(181,68,209,.35),0 10px 24px #0007;color:#fff}
.act-tools .act-ic{background:rgba(181,68,209,.35);color:#fff}
.act strong{color:#fff;text-shadow:0 1px 2px #0008}
.act:hover{filter:brightness(1.12)}
nav .links a.nav-price{background:linear-gradient(180deg,rgba(34,197,139,.8),rgba(34,197,139,.4)),#141a44;border:1px solid rgba(34,197,139,.8);box-shadow:0 0 16px rgba(34,197,139,.4);color:#fff}
.button:not(.light):not(.price):not(.alt){background:linear-gradient(180deg,rgba(232,116,63,.95),rgba(232,116,63,.55)),#141a44;border:1px solid rgba(232,116,63,.9);box-shadow:0 0 24px rgba(232,116,63,.45);color:#fff;text-shadow:0 1px 2px #0008}
.button.light{background:linear-gradient(180deg,rgba(56,163,240,.85),rgba(56,163,240,.45)),#141a44;border:1px solid rgba(56,163,240,.9);box-shadow:0 0 22px rgba(56,163,240,.4);color:#fff;text-shadow:0 1px 2px #0008}
/* Main CTA buttons: same reflection recipe as the tiles */
.button:not(.light):not(.price):not(.alt){background:linear-gradient(180deg,rgba(232,116,63,.85) 0%,rgba(232,116,63,.45) 55%,rgba(18,22,64,.85) 100%),#141a44;border:1px solid rgba(232,116,63,.85);box-shadow:0 0 22px rgba(232,116,63,.4),0 10px 24px #0007}
.button.light{background:linear-gradient(180deg,rgba(56,163,240,.8) 0%,rgba(56,163,240,.42) 55%,rgba(18,22,64,.85) 100%),#141a44}
/* Liquid feel: soft water ripples drifting across every button, glossy surface highlight */
.act,.button,nav .links a.nav-price{position:relative;overflow:hidden;isolation:isolate}
.act::after,.button::after,nav .links a.nav-price::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 background:
  radial-gradient(120% 60% at 50% -10%,#ffffff40,transparent 60%),
  repeating-linear-gradient(180deg,transparent 0 5px,#ffffff14 5px 6px,transparent 6px 11px),
  repeating-linear-gradient(176deg,transparent 0 9px,#ffffff10 9px 10px,transparent 10px 17px);
 background-size:100% 100%,100% 22px,140% 34px;
 animation:ripple 6s linear infinite;opacity:.9}
.act>*,.button>*{position:relative}
@keyframes ripple{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 22px,-60px 34px}}
.act:hover::after,.button:hover::after,nav .links a.nav-price:hover::after{animation-duration:2.5s}
@media(prefers-reduced-motion:reduce){.act::after,.button::after,nav .links a.nav-price::after{animation:none}}
/* Resplendence: a light sheen glides across each button, glow breathes softly */
.act::before,.button::before,nav .links a.nav-price::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
 background:linear-gradient(100deg,transparent,#ffffff38 45%,#ffffff55 50%,#ffffff38 55%,transparent);transform:skewX(-18deg);animation:sheen 5.5s ease-in-out infinite}
.actions-grid .act:nth-child(2)::before{animation-delay:.5s}.actions-grid .act:nth-child(3)::before{animation-delay:1s}
.actions-grid .act:nth-child(4)::before{animation-delay:1.5s}.actions-grid .act:nth-child(5)::before{animation-delay:2s}.actions-grid .act:nth-child(6)::before{animation-delay:2.5s}
@keyframes sheen{0%,55%{left:-60%}85%,100%{left:130%}}
.act,.button{animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12) saturate(1.1)}}
.act:hover,.button:hover{filter:brightness(1.18) saturate(1.15)}
@media(prefers-reduced-motion:reduce){.act::before,.button::before,nav .links a.nav-price::before,.act,.button{animation:none}}
/* Refined cyberpunk: neon edges and glows echoing the city at night, text kept calm and readable */
:root{--neon-c:#38bdf8;--neon-v:#8466f2;--neon-m:#d946ef;--neon-o:#f59e5b}
.eyebrow{color:#7dd3fc;text-shadow:0 0 12px #38bdf866}
h2{text-shadow:0 0 28px #8466f240}
.ribbon{border-image:linear-gradient(90deg,transparent,var(--neon-c),var(--neon-v),var(--neon-m),transparent) 1;border-top:1px solid;border-bottom:1px solid}
.card,.case,.audience-grid>*,.creds .ribbon{position:relative}
.card,.case,.audience-grid>*{background:linear-gradient(160deg,#ffffff14,#ffffff05 60%),#121845cc!important;box-shadow:0 0 0 1px #8466f233,0 0 26px #38bdf81a,0 18px 40px #05081f80!important}
.card::after,.case::after,.audience-grid>*::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(120deg,var(--neon-c),transparent 30%,transparent 70%,var(--neon-m));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
.card:hover::after,.audience-grid>*:hover::after{opacity:.9}
.contact{box-shadow:0 0 0 1px #d946ef55,0 0 40px #8466f240,0 20px 50px #05081f99!important}
.steps .card>.number,#solutions .icon{box-shadow:0 0 14px currentColor}
footer{border-top:1px solid;border-image:linear-gradient(90deg,transparent,var(--neon-v),var(--neon-c),transparent) 1}
/* "Comment démarrer" steps: each whole card is a link to its next action */
.steps .step-link{text-decoration:none;color:inherit;cursor:pointer;grid-template-rows:auto auto 1fr}
.steps .step-link .step-cta{grid-column:1/-1;align-self:end;margin-top:12px;font:700 14.5px/1.3 var(--display);color:var(--teal)}
.steps .step-link:nth-child(2) .step-cta{color:var(--amber)}.steps .step-link:nth-child(3) .step-cta{color:var(--coral)}
.steps .step-link .step-cta i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .2s ease}
.steps .step-link:hover,.steps .step-link:focus-visible{transform:translateY(-4px);border-color:#86e8ffaa;box-shadow:0 0 26px #86e8ff33,0 14px 30px #0006}
.steps .step-link:hover .step-cta i,.steps .step-link:focus-visible .step-cta i{transform:translateX(5px)}
.steps .step-link:focus-visible{outline:3px solid #86e8ff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.steps .step-link:hover,.steps .step-link .step-cta i{transform:none}}
nav .links a,nav .links .button{white-space:nowrap}
/* Audience boxes: each opens the tool that audience uses */
.aud-link{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.aud-link .aud-cta{margin-top:auto;padding-top:14px;font:700 14.5px/1.3 var(--display)}
.aud-teal .aud-cta{color:var(--teal)}.aud-amber .aud-cta{color:var(--amber)}.aud-coral .aud-cta{color:var(--coral)}
.aud-link .aud-cta i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .2s ease}
.aud-link:hover,.aud-link:focus-visible{transform:translateY(-4px);box-shadow:0 0 26px #86e8ff33,0 14px 30px #0006}
.aud-link:hover .aud-cta i,.aud-link:focus-visible .aud-cta i{transform:translateX(4px)}
.aud-link:focus-visible{outline:3px solid #86e8ff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.aud-link:hover,.aud-link .aud-cta i{transform:none}}
/* CoproSens role page (/coprosens/) */
.roles{padding-bottom:40px}
.roles-hero{padding:56px 0 18px;max-width:820px}
.roles-hero h1{font-size:clamp(34px,4.4vw,54px);letter-spacing:-1.6px;margin:10px 0 14px}
.roles-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.roles-jump a{padding:9px 16px;border-radius:999px;text-decoration:none;font:700 14.5px/1 var(--display);border:1px solid #ffffff2e;background:#ffffff0d}
.jump-teal{color:var(--teal)}.jump-amber{color:var(--amber)}.jump-coral{color:var(--coral)}
.roles-jump a:hover,.roles-jump a:focus-visible{background:#ffffff1f}
.role{scroll-margin-top:24px;margin:26px 0;padding:26px 28px;border-radius:18px;background:linear-gradient(145deg,#ffffff16,#ffffff08);border:1px solid #ffffff22;border-left:5px solid}
.role-teal{border-left-color:var(--teal)}.role-amber{border-left-color:var(--amber)}.role-coral{border-left-color:var(--coral)}
.role h2{margin:0 0 14px;font-size:28px}.role-teal h2{color:var(--teal)}.role-amber h2{color:var(--amber)}.role-coral h2{color:var(--coral)}
.role h3{font-size:16px;margin:0 0 8px;color:#e8ecfb}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:16px}
.role ul{margin:0;padding-left:20px;color:#c9d2e8;line-height:1.55}.role li{margin:4px 0}
.role-q{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px!important}
.role-q li{margin:0;padding:8px 13px;border-radius:12px;background:#0b123099;border:1px solid #ffffff1f;font-size:14.5px;color:#e6ebfa}
.role-q li:before{content:"« ";opacity:.6}.role-q li:after{content:" »";opacity:.6}
.role-cta{display:flex;flex-wrap:wrap;gap:10px}
.role-end{margin:34px 0 14px;padding:30px 28px;border-radius:18px;text-align:center;background:linear-gradient(120deg,#173a54cc,#242649cc);border:1px solid #91b8ed40}
.role-end h2{margin:0 0 8px}.role-end p{color:#d0d9eb;margin:0 0 16px}
@media(max-width:800px){.role-grid{grid-template-columns:1fr}.role{padding:20px}}
html[lang="en"] .role-q li:before,html[lang="pt-BR"] .role-q li:before{content:"“"}
html[lang="en"] .role-q li:after,html[lang="pt-BR"] .role-q li:after{content:"”"}
.roles-jump{justify-content:flex-start!important;padding:0!important}
/* Step 02: two actions in one card */
.steps .step-card{grid-template-rows:auto auto 1fr}
.steps .step-ctas{grid-column:1/-1;align-self:end;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.steps .step-ctas .step-cta{font:700 14.5px/1.3 var(--display);color:var(--amber);text-decoration:none;width:max-content}
.steps .step-ctas .step-cta i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .2s ease}
.steps .step-ctas .step-cta:hover,.steps .step-ctas .step-cta:focus-visible{text-decoration:underline;text-underline-offset:4px}
.steps .step-ctas .step-cta:hover i{transform:translateX(4px)}
/* Microsoft platform band under the service cards */
.platform{margin-top:22px;padding:20px 22px;border-radius:18px;background:linear-gradient(145deg,#ffffff12,#ffffff06);border:1px solid #ffffff20}
.platform-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-bottom:14px}
.platform-head h3{margin:0;font-size:19px}.platform-head p{margin:0;color:var(--muted);font-size:14.5px;max-width:640px}
.platform-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pf{padding:12px 14px;border-radius:12px;background:#0b123080;border:1px solid #ffffff14}
.pf h4{margin:0 0 4px;font-size:14.5px;color:#86e8ff}.pf p{margin:0;font-size:13.5px;line-height:1.45;color:#c9d2e8}
@media(max-width:1000px){.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.platform-grid{grid-template-columns:1fr}}
#applications + .wrap > .section:first-child{padding-top:40px}#applications{padding-bottom:44px}
#applications + .wrap > .section:first-child{padding-top:14px}#applications{padding-bottom:28px}
#solutions{padding-bottom:24px}#applications{padding-top:18px}#solutions{padding-top:42px}
#solutions .grid .card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto;column-gap:12px;align-items:center}#solutions .grid .card>h3,#solutions .grid .card>p,#solutions .grid .card>.tags{grid-column:1/-1}#solutions .grid .card>p{align-self:start}#solutions .grid .card>.tags{display:flex;flex-wrap:wrap;gap:6px;align-self:end}#solutions .grid .card .tags>.tag{margin:0}
/* 29 Oct — keeps the original two-card hero (large screens unchanged); fits it on laptops and phones */
.chat-a b{color:#5eead4}
nav .links a.button:not(.light):not(.price):not(.alt){background:transparent;border:1.5px solid rgba(232,116,63,.9);box-shadow:none;padding:8px 15px;font-size:14px;font-weight:700;border-radius:10px;animation:none;text-shadow:none}
nav .links a.button:not(.light):not(.price):not(.alt)::before,nav .links a.button:not(.light):not(.price):not(.alt)::after{display:none}
nav .links a.button:not(.light):not(.price):not(.alt):hover{background:rgba(232,116,63,.18);filter:none}
.hda-chat-btn.is-compact{padding:13px;gap:0}
.hda-chat-btn.is-compact span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hda-chat-btn.is-compact svg{width:22px;height:22px;flex-basis:22px}
@media(min-width:801px){.hero .intro{max-width:480px}}
/* Laptops: same composition, scaled down and moved left so the towers stay visible */
@media(min-width:801px){
 .hero h1{font-size:clamp(40px,3.6vw,54px);letter-spacing:-2px}
 .hero .scene{transform:scale(.84);transform-origin:left center;justify-self:start;margin-left:-40px}
 .browser{transform:rotate(-1.5deg)}
 .scene-chip{font-size:12px;padding:7px 12px;background:#efcf7a;transform:rotate(-2.5deg)}
}
@media(min-width:1245px){.hero .scene{margin-left:-64px}}
@media(min-width:801px) and (max-width:1300px){.hero .scene{transform:scale(.76);margin-left:-30px}}
/* Short landscape screens (phones turned sideways) */
@media(min-width:801px) and (max-height:520px){
 nav{padding:8px 0}.brand-mark{width:34px;height:34px}.brand{font-size:20px}
 nav .links>a:not(.button):not(.nav-price){display:none}
 .hero{min-height:0;padding:18px 0 26px}
 .hero h1{font-size:34px;letter-spacing:-1.2px;margin:6px 0 10px}
 .hero .intro{font-size:16px;max-width:420px}.hero .actions{margin-top:14px}
 .hero{align-items:start}
 .hero .scene{transform:scale(.6);transform-origin:left top;margin-top:4px;height:270px;min-height:0}
}
/* Phones (portrait): compact one-row header, text higher */
@media(max-width:800px){
 nav{padding:10px 0;gap:12px;flex-wrap:nowrap}
 .brand{font-size:20px}.brand-mark{width:36px;height:36px}
 nav .links{gap:8px}
 .hero{padding:26px 0 40px;gap:28px}
 .hero h1{font-size:clamp(36px,10vw,46px);margin:10px 0 14px}
 .hero .intro{font-size:17px}
 .scene-chip{font-size:12px;padding:7px 12px;background:#efcf7a}
}
@media(min-width:801px) and (max-width:1599px){.hero .scene{transform:scale(.76)}}
@media(min-width:801px) and (max-width:1300px){.hero .scene{transform:scale(.72)}}
/* Intro paragraph never wider than the headline (any language) */
@media(min-width:801px){.hero>div:first-child{width:fit-content;max-width:650px}.hero .intro,.hero .actions{width:0;min-width:100%;max-width:none}}
/* Cards follow the text column at a fixed gap, whatever the language or screen */
@media(min-width:801px){.hero{grid-template-columns:auto 1fr!important;column-gap:56px}.hero .scene{margin-left:0!important}}
@media(min-width:801px) and (max-width:1300px){.hero{column-gap:44px}}
@media(min-width:801px){.hero .actions{flex-wrap:nowrap}.hero .actions .textlink{white-space:nowrap}}
/* Phones: text on clear night sky; the city gets its own band between the buttons and the cards */
@media(max-width:800px){
 .hero:before{background:linear-gradient(180deg,#141d45 0%,#1d2160 60%,#141d45 100%)!important}
 .hero .scene{margin-top:210px}
 .hero .scene::before{content:"";position:absolute;left:-22px;right:-22px;top:-250px;height:300px;z-index:0;pointer-events:none;
  background:url('/media/hero-city-layer.svg') 80% 100%/cover no-repeat,url('/media/hero-city-right.webp') 80% 100%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 75%,transparent 100%)}
}
@media(min-width:801px){.hero .actions .button{white-space:nowrap;flex-shrink:0}}
@media(min-width:801px){.hero .actions{width:auto;min-width:0;max-width:none}}
@media(max-width:800px) and (prefers-reduced-motion:reduce){.hero .scene::before{background:url('/media/hero-city-layer-static.svg') 80% 100%/cover no-repeat,url('/media/hero-city-right.webp') 80% 100%/cover no-repeat}}
/* Laptops: cards a tad further left and tighter, so the first tower on the right stays clear */
@media(min-width:801px) and (max-width:1599px){.hero{column-gap:24px}.hero .scene{transform:scale(.73)}.hero .chat-card{right:11%}}
@media(min-width:801px) and (max-width:1300px){.hero{column-gap:24px}.hero .scene{transform:scale(.7)}}