/* =========================================================================
   WEPROTEC SERVICE — Design System
   Sécurité électronique · Île-de-France
   Palette : Navy #0B1B3A · Blue #2563EB · Cyan #22D3EE · Alert #DC2626
   Typo : Space Grotesk (display) · Inter (body) · Inter (chiffres)
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Couleurs marque */
  --navy-950: #060f24;
  --navy-900: #0B1B3A;
  --navy-800: #0f2147;
  --navy-700: #16306a;
  --blue-600: #2563EB;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --cyan-400: #22D3EE;
  --cyan-300: #67e8f9;
  --cyan-500: #0891b2;

  --alert: #DC2626;
  --success: #16a34a;

  /* Neutres */
  --ink: #0b1220;
  --ink-soft: #2b3650;
  --slate: #5b677e;
  --slate-light: #8a94a8;
  --line: #e6e9f0;
  --line-dark: rgba(255,255,255,.10);
  --paper: #ffffff;
  --paper-2: #f6f8fc;
  --paper-3: #eef2f9;

  /* Sur fond sombre */
  --on-dark: #eaf0ff;
  --on-dark-soft: #a7b4d4;

  /* Effets */
  --glow-cyan: 0 18px 50px -12px rgba(34,211,238,.45);
  --glow-blue: 0 18px 50px -12px rgba(37,99,235,.5);
  --shadow-card: 0 1px 2px rgba(11,27,58,.04), 0 12px 32px -12px rgba(11,27,58,.14);
  --shadow-soft: 0 8px 30px -16px rgba(11,27,58,.25);

  /* Rayons */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 100px;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type scale (clamp dramatique) */
  --fs-display: clamp(2.3rem, 5vw, 4.2rem);
  --fs-h1: clamp(2rem, 4vw, 3.3rem);
  --fs-h2: clamp(1.65rem, 2.6vw, 2.3rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body: 1.0625rem;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'Inter Tight', sans-serif;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--navy-900);
}
h1 { font-weight: 800; }
.mono { font-family: 'Inter', sans-serif; font-feature-settings: "tnum"; }

/* ---------- 3. LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.section-sm { padding-block: clamp(48px, 6vw, 80px); }
.dark { background: var(--navy-900); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p { color: var(--on-dark-soft); }

/* ---------- Sections empilées (chevauchement premium, uniforme) ---------- */
:root { --stack-r: clamp(26px, 4vw, 46px); --stack-lift: clamp(24px, 3vw, 40px); }
/* Chaque section de contenu chevauche la précédente (coins arrondis + remontée) */
.section:not(.hero), .svc2-rows-sec {
  position: relative;
  border-top-left-radius: var(--stack-r); border-top-right-radius: var(--stack-r);
  margin-top: calc(var(--stack-lift) * -1);
}
/* Fond opaque sur les sections claires pour que le chevauchement couvre bien
   (le fond inline var(--paper-2) des sections « marques » l'emporte). */
.section:not(.hero):not(.dark) { background: var(--paper); }
/* Les sections sombres clippent leur contenu aux coins arrondis. */
.section.dark:not(.hero) { overflow: hidden; }

/* Eyebrow / kicker */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Inter', sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--blue-600);
  padding: .45rem .85rem; border-radius: var(--r-pill);
  background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.16);
}
.dark .eyebrow { color: var(--cyan-300); background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.22); }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--cyan-400); box-shadow: 0 0 0 4px rgba(34,211,238,.2); }

.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin-top: 1rem; white-space: nowrap; }
.section-head h1 { font-size: var(--fs-h2); margin-top: 1rem; font-weight: 800; white-space: normal; }
.section-head p { font-size: var(--fs-lead); color: var(--slate); margin-top: 1.1rem; max-width: 680px; }
.section-head.center p { margin-inline: auto; }
.dark .section-head p { color: var(--on-dark-soft); }

.text-grad {
  background: linear-gradient(105deg, var(--blue-500) 0%, var(--cyan-400) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.6rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: .98rem; letter-spacing: -.01em;
  border: 1px solid transparent; transition: all .35s var(--ease); white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  box-shadow: var(--glow-blue);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 55px -14px rgba(37,99,235,.6); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--navy-900); }
.btn-ghost:hover { border-color: var(--blue-600); color: var(--blue-600); transform: translateY(-2px); }
.dark .btn-ghost { border-color: rgba(255,255,255,.22); color: #fff; }
.dark .btn-ghost:hover { border-color: var(--cyan-400); color: var(--cyan-300); }
.btn-white { background:#fff; color: var(--navy-900); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(0,0,0,.4); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- 5. CARDS ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.35); box-shadow: var(--shadow-card); }
.glass {
  background: rgba(255,255,255,.06); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg);
}

/* Camera placeholders — live feed animation */
.cam-ph::after { content:""; position:absolute; left:0; right:0; top:0; height:45%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(34,211,238,.14) 70%, rgba(34,211,238,.22));
  animation: camScan 4.4s cubic-bezier(.55,0,.45,1) infinite; }
.cam-ph::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:rgba(120,170,255,.05); animation: camFlicker 7s steps(1) infinite; }
.cam-ph:nth-child(1)::after { animation-delay:0s; }
.cam-ph:nth-child(2)::after { animation-delay:1.1s; }
.cam-ph:nth-child(3)::after { animation-delay:2.2s; }
.cam-ph:nth-child(4)::after { animation-delay:3.3s; }
@keyframes camScan { 0%{transform:translateY(-100%)} 100%{transform:translateY(320%)} }
@keyframes camFlicker { 0%,96%{opacity:0} 97%{opacity:.5} 98%{opacity:0} 99%{opacity:.35} 100%{opacity:0} }
.cam-motion { animation: camDrift 5.5s ease-in-out infinite; }
@keyframes camDrift { 0%,100%{transform:translateX(0)} 50%{transform:translateX(40px)} }
.cam-sweep { transform-origin:50px 38px; animation: camRadar 3.4s linear infinite; }
@keyframes camRadar { to{ transform:rotate(360deg); } }
.cam-pulse { animation: camPulse 2s ease-in-out infinite; }
@keyframes camPulse { 0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.28)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,.05)} }
.cam-liveblink { animation: camBlink 1.6s steps(1) infinite; }
@keyframes camBlink { 0%,60%{opacity:1} 61%,80%{opacity:.35} 81%,100%{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .cam-ph::after,.cam-ph::before,.cam-motion,.cam-sweep,.cam-pulse,.cam-liveblink{ animation:none; }
}

/* Hairline divider gradient */
.hairline { height:1px; border:0; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.dark .hairline { background: linear-gradient(90deg, transparent, rgba(34,211,238,.3), transparent); }

/* ---------- 6. DECORATIVE LAYERS ---------- */
/* Grain noise overlay (fixed, global) */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Mesh gradient blobs */
.mesh { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.mesh span { position:absolute; border-radius:50%; filter: blur(90px); opacity:.5; will-change: transform; }
.mesh .b1 { width:42vw; height:42vw; background: radial-gradient(circle, var(--blue-600), transparent 65%); top:-12%; left:-8%; }
.mesh .b2 { width:38vw; height:38vw; background: radial-gradient(circle, var(--cyan-500), transparent 65%); bottom:-15%; right:-5%; }
.mesh .b3 { width:26vw; height:26vw; background: radial-gradient(circle, var(--blue-400), transparent 60%); top:30%; right:20%; opacity:.3; }
/* Glow accent */
.glow { position:absolute; border-radius:50%; filter: blur(60px); pointer-events:none; z-index:0; }
/* Spotlight cursor (desktop) */
.spotlight {
  position: fixed; width: 460px; height: 460px; border-radius:50%; pointer-events:none; z-index:1;
  background: radial-gradient(circle, rgba(34,211,238,.10), transparent 60%);
  transform: translate(-50%,-50%); transition: opacity .3s; opacity:0; mix-blend-mode: screen;
}
/* grid pattern */
.gridlines::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* ---------- 7. HEADER / NAV (barre flottante « pilule ») ---------- */
.nav {
  position: fixed; inset: 16px 0 auto 0; z-index: 1000;
  transition: transform .4s var(--ease);
}
.nav .wrap { display: flex; justify-content: center; }
.nav-inner {
  display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.4rem); justify-content: space-between;
  width: 100%; max-width: 1200px; height: 66px; padding: 0 .5rem 0 1.1rem;
  background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.65); border-radius: var(--r-pill);
  box-shadow: 0 12px 40px -14px rgba(11,27,58,.28), 0 2px 6px rgba(11,27,58,.05);
  transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled .nav-inner {
  background: rgba(255,255,255,.95);
  box-shadow: 0 16px 48px -14px rgba(11,27,58,.38), 0 2px 6px rgba(11,27,58,.06);
}
.brand { display:flex; align-items:center; flex:none; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:1.1rem; letter-spacing:-.02em; color: var(--navy-900); white-space:nowrap; }
.brand-mark {
  height:40px; width:auto; display:inline-flex; align-items:center; color:#fff; flex:none; margin-right:.6rem;
}
.brand-mark img { height:100%; width:auto; display:block; }
.footer-brand-col .brand-mark { height:52px; }
.brand b { color: var(--blue-600); }
.nav-links { display:flex; flex:1; align-items:center; justify-content:center; gap:.1rem; }
.nav-links a { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; padding:.5rem .72rem; border-radius: var(--r-pill); font-size:.9rem; font-weight:500; color: var(--ink-soft); transition: color .25s var(--ease), background .25s var(--ease); }
.nav-links a:hover { color: var(--blue-600); background: rgba(37,99,235,.07); }
.nav-links a svg { flex:none; }
.nav-cta { display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-cta .btn-primary { padding:.7rem 1.1rem; font-size:.9rem; white-space:nowrap; }
.nav-phone { display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; font-weight:600; font-size:.9rem; color: var(--navy-900); padding-left:.4rem; }
.nav-phone svg { width:16px; height:16px; color: var(--blue-600); flex:none; }
/* dropdown services */
.has-drop { position: relative; }
.drop {
  position:absolute; top:calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--line); border-radius: var(--r); padding:.6rem; min-width: 280px;
  box-shadow: var(--shadow-card); opacity:0; visibility:hidden; transition: all .3s var(--ease);
}
.has-drop:hover .drop { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.drop a { display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius: var(--r-sm); font-size:.92rem; }
.drop a:hover { background: var(--paper-2); }
.drop a svg { width:18px; height:18px; color: var(--blue-600); flex:none; }
.burger { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; flex-direction:column; gap:5px; align-items:center; justify-content:center; cursor:pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.burger span { width:18px; height:2px; background: var(--navy-900); border-radius:2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }
body.menu-open .burger { background: var(--navy-900); border-color: var(--navy-900); }
body.menu-open .burger span { background:#fff; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity:0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- mega menu mobile ---------- */
.mobile-menu { display:none; }
.mm-inner { max-width: 640px; margin-inline:auto; }
.mm-label { display:block; font-family:'Space Grotesk'; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--blue-600); margin: .2rem 0 .9rem; }
.mm-label + .mm-label, .mm-nav ~ .mm-label { margin-top: 1.8rem; }
.mm-services { display:grid; grid-template-columns: 1fr; gap:.7rem; }
@media (min-width: 540px) { .mm-services { grid-template-columns: 1fr 1fr; gap:.8rem; } }
.mm-card {
  display:flex; align-items:center; gap:.85rem; padding:.95rem 1rem; border-radius:18px; min-width:0;
  background: rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 24px -14px rgba(11,27,58,.22), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.mm-card:active { transform: scale(.97); }
.mm-card .mm-ic { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color: var(--blue-600);
  background: rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.12); }
.mm-card .mm-ic svg { width:21px; height:21px; }
.mm-card .mm-tx { display:flex; flex-direction:column; min-width:0; }
.mm-card .mm-tx b { font-size:.95rem; font-weight:650; color: var(--navy-900); line-height:1.2; letter-spacing:-.01em; overflow-wrap:anywhere; }
.mm-card .mm-tx small { font-size:.76rem; color: var(--slate); margin-top:.18rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width: 540px) { .mm-card .mm-tx b { font-size:.9rem; } .mm-card .mm-tx small { font-size:.72rem; } }
.mm-nav { display:flex; flex-direction:column; }
.mm-nav a { display:flex; align-items:center; justify-content:space-between; padding:.95rem .3rem; font-size:1.05rem; font-weight:600; color: var(--navy-900); border-bottom:1px solid var(--line); }
.mm-nav a svg { width:18px; height:18px; color: var(--ink-soft); flex:none; }
.mm-nav a:active { color: var(--blue-600); }
.mm-foot { margin-top: 1.6rem; display:flex; flex-direction:column; gap:1rem; padding-bottom: 2rem; }
.mm-phone { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:700; font-size:1.1rem; color: var(--navy-900); }
.mm-phone svg { width:20px; height:20px; color: var(--blue-600); flex:none; }
.mm-foot .btn-block { justify-content:center; gap:.5rem; }

/* ---------- 8. FOOTER ---------- */
.footer { background: linear-gradient(180deg, var(--paper-2) 0%, #eef2f9 100%); color: var(--slate); position:relative; overflow:hidden; }
.footer-accent { position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg, transparent, var(--blue-600) 30%, var(--cyan-400) 70%, transparent); opacity:.85; }

.footer-top { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: clamp(28px,4vw,56px); padding-block: clamp(48px,6vw,80px); position:relative; }
.footer-brand-col .brand { font-size:1.25rem; }
.footer-claim { font-family:'Plus Jakarta Sans'; font-weight:700; font-size: clamp(1.5rem,2.5vw,2rem); color:var(--navy-900); line-height:1.12; letter-spacing:-.025em; margin: 1.2rem 0 0; }
.footer-stat { display:flex; gap:1.6rem; margin-top:1.6rem; }
.footer-stat b { font-family:'Plus Jakarta Sans'; font-weight:800; color: var(--blue-600); font-size:1.4rem; display:block; letter-spacing:-.02em; }
.footer-stat span { font-size:.78rem; color:var(--slate); }
.footer-social { display:flex; gap:.6rem; margin-top:1.8rem; }
.social-btn { width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); box-shadow:0 6px 16px -10px rgba(11,27,58,.4);
  color:var(--ink-soft); transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.social-btn svg { width:18px; height:18px; }
.social-btn:hover { transform:translateY(-3px); border-color:rgba(34,211,238,.4); box-shadow:0 12px 24px -12px rgba(37,99,235,.4); }

.footer h4, .footer .footer-col-title { color:var(--navy-900); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.2rem; font-family:'Inter'; font-weight:600; }
.footer-links a { position:relative; display:inline-block; padding:.42rem 0; font-size:.94rem; color:var(--ink-soft); transition: color .25s var(--ease); }
.footer-links a::after { content:""; position:absolute; left:0; bottom:.28rem; width:100%; height:1px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--blue-600),var(--cyan-400)); transition:transform .35s var(--ease); }
.footer-links a:hover { color: var(--blue-600); }
.footer-links a:hover::after { transform:scaleX(1); }

/* Contact avec icônes */
.footer-contact-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.footer-contact-list li { line-height:1.45; }
.footer-contact-list a, .footer-contact-list .fc-static { display:flex; align-items:flex-start; gap:.7rem; font-size:.94rem; color:var(--ink-soft); transition:color .25s var(--ease); }
.footer-contact-list a:hover { color:var(--blue-600); }
.footer-contact-list svg { width:17px; height:17px; flex:none; margin-top:2px; color:var(--blue-600); }
.footer-contact-list .fc-static { color:var(--slate); }

.footer-bottom { position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-block: 1.7rem; border-top:1px solid var(--line); font-size:.85rem; }
.footer-legal { display:flex; gap:1.4rem; }
.footer-bottom a { color:var(--slate); transition:color .25s var(--ease); }
.footer-bottom a:hover { color: var(--blue-600); }
.made { color: var(--slate-light); }
.made b { color: var(--blue-600); font-weight:600; }

/* Wordmark filigrane */
.footer-watermark { position:absolute; left:50%; bottom:-.18em; transform:translateX(-50%); z-index:0; pointer-events:none;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-.04em; white-space:nowrap;
  font-size:clamp(5rem,20vw,17rem); line-height:.8;
  background:linear-gradient(180deg, rgba(11,27,58,.06), rgba(11,27,58,0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- 9. ANIMATIONS (reveal) ---------- */
[data-reveal] { opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity:1; transform: none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

/* float anim for floating cards */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.floaty { animation: float 6s var(--ease) infinite; }

/* marquee */
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display:flex; gap: 3.5rem; width:max-content; animation: scrollx 32s linear infinite; align-items:center; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- 10. UTILITIES ---------- */
.pill { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-radius:var(--r-pill); font-size:.82rem; font-weight:600; }
.pill-cyan { background: rgba(34,211,238,.12); color: var(--cyan-500); }
.pill-alert { background: rgba(220,38,38,.1); color: var(--alert); }
.pill-ok { background: rgba(22,163,74,.1); color: var(--success); }
.stars { display:inline-flex; gap:2px; color:#f5b301; }
.stars svg { width:15px; height:15px; }
.icon-box { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none; }
.icon-blue { background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(34,211,238,.14)); color: var(--blue-600); }
.dark .icon-blue { background: rgba(34,211,238,.12); color: var(--cyan-300); }

/* breadcrumb */
.crumb { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color: var(--slate); padding-top: 96px; }
.crumb a:hover { color: var(--blue-600); }
.crumb span { color: var(--slate-light); }

/* ---------- 10b. SECTION GRIDS ---------- */
/* Bento services */
.bento { display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(14px, 1.6vw, 20px); }
.bento .bento-lg { grid-row: span 2; display:flex; flex-direction:column; justify-content:flex-end; min-height: 320px; }
.bento a.card { color: inherit; }

/* Comparison */
.compare { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.5vw,28px); max-width: 920px; margin-inline:auto; }
.compare-col { border-radius: var(--r-lg); padding: clamp(24px,3vw,38px); position:relative; }
.compare-them { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.compare-us { background: linear-gradient(160deg, rgba(34,211,238,.1), rgba(37,99,235,.06)); border:1px solid rgba(34,211,238,.3); box-shadow: var(--glow-cyan); }
.compare-col h3 { margin-bottom: 1.4rem; font-size: 1.3rem; }
.compare-col ul li { display:flex; gap:.7rem; align-items:flex-start; padding:.6rem 0; font-size:.96rem; color: var(--on-dark-soft); border-top:1px solid rgba(255,255,255,.06); }
.compare-col ul li:first-child { border-top:0; }
.compare-us ul li { color: var(--on-dark); }
.compare-col svg { width:20px; height:20px; flex:none; margin-top:2px; }

/* Stats — KPI strip (light editorial) */
.kpi-strip { display:grid; grid-template-columns:repeat(5,1fr); margin-top:clamp(2.6rem,4vw,3.6rem);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-card); overflow:hidden; }
.kpi { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.55rem;
  padding:clamp(1.7rem,2.4vw,2.4rem) clamp(1rem,1.5vw,1.5rem); text-align:center; }
.kpi + .kpi::before { content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--line); }
.kpi-num { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(2.4rem,3.6vw,3.2rem); line-height:1; letter-spacing:-.025em;
  background:linear-gradient(120deg,var(--blue-600),var(--cyan-400)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-flex; align-items:baseline; }
.kpi-num small { font-size:.42em; font-weight:700; -webkit-text-fill-color:initial; color:var(--slate); margin-left:.1em; }
.kpi-label { font-size:.86rem; line-height:1.4; color:var(--slate); max-width:18ch; }

/* Réalisations */
.reals { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.real-img { aspect-ratio: 16/11; position:relative; }
.real { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.real:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
/* Réalisations sur fond sombre : cartes glass */
.dark .real { background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border-color:rgba(255,255,255,.1); }
.dark .real h3 { color:#fff; }
.dark .real p { color:var(--on-dark-soft); }
.dark .real:hover { border-color:rgba(34,211,238,.32); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 2.4rem; }
.filters button { padding:.6rem 1.1rem; border-radius: var(--r-pill); border:1px solid var(--line); background:#fff; font-weight:600; font-size:.9rem; color: var(--ink-soft); transition: all .25s var(--ease); }
.filters button.active, .filters button:hover { background: var(--navy-900); color:#fff; border-color: var(--navy-900); }

/* Chantiers — cartes réalisations (data-driven) */
.real-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,26px); }
.real-card {
  position:relative; display:flex; flex-direction:column;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg);
  overflow:hidden; cursor:pointer; text-align:left;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.real-card:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -30px rgba(11,27,58,.45); border-color: rgba(34,211,238,.5); }
.real-card:focus-visible { outline:2px solid var(--cyan-400); outline-offset:3px; }
.real-card-media { position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--navy-900); }
.real-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .7s var(--ease); }
.real-card:hover .real-card-media img { transform: scale(1.06); }
.real-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,15,36,0) 40%,rgba(6,15,36,.55) 100%); pointer-events:none; }
.real-card-type {
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.72rem; font-weight:700; letter-spacing:.02em; color:#fff;
  padding:.4rem .7rem; border-radius: var(--r-pill);
  background: rgba(11,27,58,.62); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.16);
}
.real-card-count {
  position:absolute; bottom:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:700; color:#fff;
  padding:.35rem .6rem; border-radius: var(--r-pill);
  background: rgba(6,15,36,.5); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.14);
}
.real-card-body { padding: clamp(16px,1.6vw,20px); display:flex; flex-direction:column; gap:.7rem; flex:1; }
.real-card-brands { display:flex; align-items:center; gap:16px; min-height:36px; }
.real-brand { height:28px; width:auto; max-width:40%; min-width:0; object-fit:contain; object-position:left center; opacity:.95; }
.real-brand:only-child { max-width:60%; }
@media (max-width: 640px) {
  .real-card-brands { gap:12px; min-height:32px; }
  .real-brand { height:24px; }
}
/* Logos partenaires (carte À propos, fond sombre) */
.plogo { height:24px; width:auto; max-width:78%; margin:0 auto; display:block; object-fit:contain; filter:brightness(0) invert(1); opacity:.88; }
@media (max-width: 640px) { .plogo { height:20px; } }

.real-card-body h3 { font-size:1.05rem; line-height:1.3; color: var(--ink); margin:0; }
.real-card-meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.4rem; border-top:1px solid var(--line); }
.real-loc { display:inline-flex; align-items:center; gap:.35rem; font-size:.84rem; font-weight:600; color: var(--ink-soft); }
.real-loc svg { color: var(--cyan-500); flex:0 0 auto; }
.real-date { font-size:.8rem; font-weight:600; color: var(--slate); white-space:nowrap; }

/* Cartes sur fond sombre (accueil) */
.dark .real-card { background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); border-color:rgba(255,255,255,.1); }
.dark .real-card:hover { border-color:rgba(34,211,238,.4); box-shadow:0 34px 60px -30px rgba(0,0,0,.65); }
.dark .real-card-body h3 { color:#fff; }
.dark .real-loc { color: var(--on-dark-soft); }
.dark .real-date { color: var(--on-dark-soft); }
.dark .real-card-meta { border-top-color: rgba(255,255,255,.12); }
.dark .real-brand { filter: brightness(0) invert(1); opacity:.92; }

/* Barre de filtres (page réalisations) */
.filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: clamp(2rem,3vw,2.8rem); }
.filter-btn { padding:.6rem 1.15rem; border-radius: var(--r-pill); border:1px solid var(--line); background:#fff; font-family:inherit; font-weight:600; font-size:.9rem; color: var(--ink-soft); cursor:pointer; transition: all .25s var(--ease); }
.filter-btn:hover { border-color: var(--navy-900); color: var(--navy-900); }
.filter-btn.active { background: var(--navy-900); color:#fff; border-color: var(--navy-900); }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
body.lb-open { overflow:hidden; }
.lb-backdrop { position:absolute; inset:0; background: rgba(4,9,22,.9); backdrop-filter: blur(6px); animation: lbFade .3s var(--ease); }
@keyframes lbFade { from { opacity:0; } to { opacity:1; } }
.lb-stage { position:relative; z-index:2; margin:0; max-width: min(92vw, 1100px); max-height: 88vh; display:flex; flex-direction:column; align-items:center; animation: lbPop .4s var(--ease); }
@keyframes lbPop { from { opacity:0; transform: scale(.96); } to { opacity:1; transform: scale(1); } }
.lb-stage img { max-width:100%; max-height: 80vh; object-fit:contain; border-radius: 14px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); background:#0b1220; }
.lb-cap { z-index:2; margin-top: .9rem; color:#fff; font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:.9rem; }
.lb-cap span { font-size:.82rem; font-weight:700; color: var(--navy-900); background: var(--cyan-400); padding:.2rem .6rem; border-radius: var(--r-pill); }
.lb-close { position:absolute; top:22px; right:26px; z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; transition: all .25s var(--ease); }
.lb-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }
.lb-nav { position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color:#fff; font-size:2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all .25s var(--ease); }
.lb-nav:hover { background: var(--cyan-400); color: var(--navy-900); border-color: var(--cyan-400); }
.lb-prev { left: clamp(10px,3vw,40px); }
.lb-next { right: clamp(10px,3vw,40px); }
@media (max-width:640px) {
  .lb-nav { width:44px; height:44px; font-size:1.6rem; }
  .lb-prev { left:8px; } .lb-next { right:8px; }
  .lb-close { top:14px; right:14px; }
}

/* ============ MARQUES PARTENAIRES ============ */
.brand-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,26px); }
.brand-grid-4 { grid-template-columns: repeat(4,1fr); }  /* desktop ; les breakpoints .brand-grid (≤1024→2col, ≤820→1col) prennent le relais */
.wrap-wide { max-width: 1560px; }  /* section marques : cards plus larges */
.brand-grid-2 { grid-template-columns: repeat(2,1fr); max-width: 780px; margin-inline: auto; }  /* 2 marques côte à côte (les breakpoints ≤820→1col prennent le relais) */
.brand-card {
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem,2.4vw,2.2rem);
  box-shadow: var(--shadow-card);
  overflow:hidden; isolation:isolate;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.brand-card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg,var(--blue-600),var(--cyan-400));
  transform: scaleX(0); transform-origin:left; transition: transform .6s var(--ease);
}
.brand-card:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.45); box-shadow: 0 24px 50px -22px rgba(11,27,58,.28); }
.brand-card:hover::before { transform: scaleX(1); }
.brand-logo-wrap {
  height:54px; display:flex; align-items:center; justify-content:flex-start; gap:20px;
  margin-bottom:1.3rem;
}
.brand-logo-wrap img { max-height:32px; max-width:180px; width:auto; object-fit:contain; }
.brand-logo-wrap img[src*="dahua"] { max-height:42px; }
.brand-logo-wrap img[src*="paxton"] { max-height:48px; }
.brand-logo-wrap img[src*="intratone"] { max-height:42px; }
.brand-logo-wrap img[src*="castel"] { max-height:48px; }
.brand-logo-wrap img[src*="vauban"] { max-height:44px; }
.brand-logo-wrap img[src*="haxo"] { max-height:46px; }
/* Carte à 2 logos (Vanderbilt + Aritech) : on plafonne la largeur pour qu'ils tiennent tous les deux */
.brand-logo-wrap img[src*="vanderbilt"] { max-width:130px; }
.brand-logo-wrap img[src*="aritech"] { max-width:108px; }
/* Logos plus compacts sur téléphone (cards pleine largeur) */
@media (max-width: 640px) {
  .brand-logo-wrap { height:44px; gap:16px; margin-bottom:1.1rem; }
  .brand-logo-wrap img { max-height:28px; max-width:150px; }
  .brand-logo-wrap img[src*="dahua"] { max-height:36px; }
  .brand-logo-wrap img[src*="paxton"] { max-height:40px; }
  .brand-logo-wrap img[src*="intratone"] { max-height:36px; }
  .brand-logo-wrap img[src*="castel"] { max-height:40px; }
  .brand-logo-wrap img[src*="vauban"] { max-height:38px; }
  .brand-logo-wrap img[src*="haxo"] { max-height:40px; }
  .brand-logo-wrap img[src*="vanderbilt"] { max-width:120px; }
  .brand-logo-wrap img[src*="aritech"] { max-width:100px; }
}
.brand-badge {
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color: var(--blue-600); background: rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.16); border-radius: var(--r-pill);
  padding:.4rem .8rem; margin-bottom:1rem;
}
.brand-badge.gold { color:#B8860B; background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.28); }
.brand-quote {
  font-family:'Plus Jakarta Sans',sans-serif; font-style:italic; font-weight:500;
  font-size:1.05rem; line-height:1.45;
  color: var(--navy-900); margin-bottom:1rem; padding-left:1rem;
  border-left:3px solid var(--cyan-400);
}
.brand-desc { color: var(--slate); font-size:.96rem; line-height:1.6; margin-bottom:1.3rem; flex:1; }
.brand-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; }
.brand-tag {
  font-size:.78rem; font-weight:600; color: var(--ink-soft);
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--r-pill);
  padding:.35rem .75rem;
}
/* Bandeau logos défilant / grille compacte */
.brand-strip {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: clamp(28px,5vw,64px); margin-top: clamp(2rem,3vw,3rem);
  padding: clamp(1.6rem,2.5vw,2.4rem);
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--r-lg);
}
.brand-strip img { max-height:22px; width:auto; max-width:160px; object-fit:contain; filter: grayscale(1); opacity:.6; transition: filter .4s var(--ease), opacity .4s var(--ease); }
.brand-strip img:hover { filter:none; opacity:1; }
/* Dark variants */
.dark .brand-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); box-shadow:none; }
.dark .brand-card:hover { border-color: rgba(34,211,238,.5); background: rgba(255,255,255,.06); }
.dark .brand-logo-wrap img { filter: brightness(0) invert(1); }
.dark .brand-quote { color:#fff; }
.dark .brand-desc { color: var(--on-dark-soft); }
.dark .brand-tag { color: var(--on-dark-soft); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.dark .brand-strip { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
.dark .brand-strip img { filter: brightness(0) invert(1) grayscale(1); opacity:.5; }
.dark .brand-strip img:hover { filter: brightness(0) invert(1); opacity:1; }
/* Bloc conformité (détection incendie) */
.norme-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,22px); }
.norme-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem,2.4vw,2.2rem); box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.norme-card:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.45); }
.norme-card .norme-ico { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:14px; background: linear-gradient(135deg,var(--blue-600),var(--cyan-400)); color:#fff; margin-bottom:1.1rem; }
.norme-card .norme-ico svg { width:26px; height:26px; }
.norme-card h3 { font-size:1.15rem; margin-bottom:.5rem; color: var(--navy-900); }
.norme-card p { color: var(--slate); font-size:.95rem; line-height:1.6; }

/* Testimonials */
.testi-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(16px,2vw,24px); align-items:start; }
.testi.feat { grid-row: span 1; }

/* FAQ */
.faq { max-width: 820px; margin-inline:auto; }
.faq-item { border:1px solid var(--line); border-radius: var(--r); margin-bottom:.8rem; overflow:hidden; transition: border-color .3s; background:#fff; }
.faq-item.open { border-color: rgba(37,99,235,.35); }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem 1.4rem; background:none; border:0; text-align:left; font-weight:600; font-size:1.05rem; color: var(--navy-900); font-family:'Plus Jakarta Sans'; }
.faq-q svg { width:22px; height:22px; flex:none; transition: transform .3s var(--ease); color: var(--blue-600); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-item.open .faq-a { max-height: 360px; }
.faq-a p { padding: 0 1.4rem 1.3rem; color: var(--slate); font-size:.98rem; }

/* Service page hero split */
.svc-hero { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,64px); align-items:center; }
.feature-row { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,48px); align-items:center; }
.check-list li { display:flex; gap:.7rem; align-items:flex-start; padding:.55rem 0; }
.check-list svg { width:22px; height:22px; flex:none; color: var(--blue-600); }
.dark .check-list svg { color: var(--cyan-300); }

/* Process steps */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,1.6vw,22px); counter-reset: step; }
.step { position:relative; padding-top: 1rem; }
.step-n { font-family:'Inter'; font-size:.8rem; color: var(--blue-600); font-weight:600; }
.step h3 { font-size:1.15rem; margin:.6rem 0 .4rem; }
.step p { font-size:.92rem; color: var(--slate); }
.step::before { content:""; position:absolute; top:0; left:0; width:40px; height:3px; border-radius:3px; background: linear-gradient(90deg,var(--blue-600),var(--cyan-400)); }

/* Zone / departments grid */
.dept-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,1.5vw,18px); }
.dept { padding:1.3rem; border:1px solid var(--line); border-radius: var(--r); background:#fff; transition: all .3s var(--ease); }
.dept:hover { border-color: rgba(37,99,235,.35); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.dept b { font-family:'Inter'; color: var(--blue-600); font-size:1.6rem; display:block; }

/* Contact layout */
.contact-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,4vw,56px); align-items:start; }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-size:.85rem; font-weight:600; color: var(--ink-soft); margin-bottom:.4rem; }
.field input, .field select, .field textarea {
  width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius: var(--r-sm);
  font:inherit; font-size:.96rem; background: var(--paper); transition: border-color .25s, box-shadow .25s; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:0; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.consent { display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; line-height:1.65; color: var(--slate); margin-top:.5rem; }
.consent input { width:18px; height:18px; flex:0 0 auto; margin-top:.15rem; accent-color:var(--blue-600); cursor:pointer; }
.consent span { flex:1; }
.form-success { display:none; background: rgba(22,163,74,.1); color: var(--success); padding:1rem; border-radius: var(--r-sm); margin-bottom:1rem; font-weight:600; }
.form-error { display:none; background: rgba(220,38,38,.09); color:#dc2626; padding:1rem; border-radius: var(--r-sm); margin-bottom:1rem; font-weight:600; }

/* ── Pop-up devis (modal) ─────────────────────────────────────────── */
body.devis-open { overflow:hidden; }
.devis-modal { position:fixed; inset:0; z-index:1100; display:none; }
.devis-modal.open { display:flex; align-items:flex-start; justify-content:center; padding:clamp(1rem,4vh,3rem) 1rem; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.devis-modal-overlay { position:fixed; inset:0; background:rgba(9,14,28,.55); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease; }
.devis-modal.open .devis-modal-overlay { opacity:1; }
.devis-modal-box {
  position:relative; z-index:1; margin:auto; width:min(640px,100%);
  padding:clamp(1.4rem,2.4vw,2rem); opacity:0; transform:translateY(14px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.devis-modal.open .devis-modal-box { opacity:1; transform:translateY(0); }
.devis-modal-close {
  position:absolute; top:.9rem; right:.9rem; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--slate); cursor:pointer; transition:background .2s, color .2s, border-color .2s; z-index:2;
}
.devis-modal-close:hover { background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.devis-modal-close svg { width:18px; height:18px; }
.devis-modal-head { margin-bottom:1.3rem; padding-right:2.5rem; }
.devis-modal-head h3 { font-size:clamp(1.3rem,2.4vw,1.6rem); margin:0 0 .3rem; }
.devis-modal-head p { margin:0; font-size:.9rem; color:var(--slate); }
@media (max-width:640px) {
  .devis-modal.open { padding:1rem .85rem; align-items:flex-start; }
  .devis-modal-box { width:100%; }
}

.info-card { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem; border-radius: var(--r); border:1px solid var(--line); margin-bottom:1rem; background:#fff; }
.info-card svg { width:24px; height:24px; color: var(--blue-600); flex:none; }

/* Legal / prose pages */
.prose { max-width: 760px; margin-inline:auto; }
.prose h2 { font-size: var(--fs-h3); margin: 2.2rem 0 .8rem; }
.prose p, .prose li { color: var(--ink-soft); margin-bottom: .8rem; }
.prose ul { list-style: disc; padding-left: 1.3rem; }

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero .wrap { grid-template-columns: 1fr !important; }
  .hero-visual { max-width: 460px; margin-inline:auto; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .bento-lg { grid-row: auto; grid-column: span 2; min-height:auto; }
  .kpi-strip { grid-template-columns: repeat(3,1fr); }
  .kpi:nth-child(4)::before { display:none; }
  .reals, .gallery, .real-grid, .testi-grid, .dept-grid, .brand-grid, .norme-grid { grid-template-columns: 1fr 1fr; }
  .testi.feat { grid-column: span 2; }
  .steps { grid-template-columns: 1fr 1fr; }
  .svc-hero, .feature-row, .contact-grid, .compare { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .nav-links, .nav-phone span { display:none; }
  .nav-cta { margin-left:auto; }
  .burger { display:flex; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .mobile-menu {
    display:block; position:fixed; inset:0; z-index:999;
    padding: calc(env(safe-area-inset-top) + 104px) clamp(20px,6vw,32px) calc(env(safe-area-inset-bottom) + 28px);
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #f4f7fc 100%);
    -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transform: translateY(-10px);
    transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
  }
  .mobile-menu.open { opacity:1; visibility:visible; transform:none; transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s; }
  .mobile-menu .mm-label, .mobile-menu .mm-card, .mobile-menu .mm-nav a, .mobile-menu .mm-foot {
    opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .mobile-menu.open .mm-label, .mobile-menu.open .mm-card, .mobile-menu.open .mm-nav a, .mobile-menu.open .mm-foot {
    opacity:1; transform:none; transition-delay: calc(.05s * var(--i, 0) + .1s);
  }
  body.menu-open { overflow:hidden; }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu.open .mm-label, .mobile-menu.open .mm-card, .mobile-menu.open .mm-nav a, .mobile-menu.open .mm-foot { transition:none; }
  .mobile-menu .mm-label, .mobile-menu .mm-card, .mobile-menu .mm-nav a, .mobile-menu .mm-foot { opacity:1; transform:none; }
}
/* Barre de nav épurée sur téléphone : logo + tel + burger (Devis passe dans le menu) */
@media (max-width: 600px) {
  .nav { inset: 12px 14px auto 14px; }
  .nav .wrap.nav-inner { height: 64px; padding: 0 .7rem 0 1.5rem; gap: .5rem; }
  .brand { font-size: 1.05rem; }
  .brand-mark { width: auto; height: 34px; margin-right: .6rem; }
  .nav-cta { gap: .45rem; }
  .nav-cta .btn-primary { display: none; }
  .nav-phone { width: 44px; height: 44px; padding: 0; justify-content: center; border: 1px solid var(--line);
    border-radius: 12px; background: #fff; color: var(--blue-600); }
  .nav-phone svg { width: 18px; height: 18px; }
  .mobile-menu { padding-top: calc(env(safe-area-inset-top) + 84px); }
}
@media (max-width: 820px) {
  /* en dessous, les titres H2 reviennent sur plusieurs lignes (sinon débordement) */
  .section-head h2 { white-space: normal; }
}
@media (max-width: 640px) {
  .bento, .reals, .gallery, .real-grid, .testi-grid, .dept-grid, .steps, .field-row, .brand-grid, .norme-grid { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(2,1fr); }
  .kpi:nth-child(odd)::before { display:none; }
  .bento .bento-lg, .testi.feat { grid-column: auto; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-stat { flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; }
}

/* =========================================================================
   12. HOMEPAGE v2 — architecture inspirée éditoriale (dark/light alternés)
   ========================================================================= */

/* --- Hero centré --- */
.hero-c { text-align: center; }
.hero-c .eyebrow { margin-inline: auto; }
.hero-c h1 { font-size: var(--fs-display); margin: 1.6rem auto; max-width: 17ch; }
.hero-c .lead { font-size: var(--fs-lead); color: var(--on-dark-soft); max-width: 56ch; margin-inline: auto; }

/* Champ inline (code postal → devis) */
.hero-field {
  display: flex; gap: .5rem; max-width: 500px; margin: 2.2rem auto 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill); padding: .4rem .4rem .4rem 1.3rem; backdrop-filter: blur(12px);
}
.hero-field input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: inherit; font-size: .98rem; outline: none; }
.hero-field input::placeholder { color: var(--on-dark-soft); }
.hero-field .btn { padding: .85rem 1.35rem; }

/* Social proof avatars */
.proof {
  display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.7rem;
  padding: .7rem 1.1rem .7rem .8rem; border-radius: 999px; text-decoration: none;
  background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.09);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.proof:hover {
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.4);
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  box-shadow: 0 24px 54px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12);
}
.proof:hover .proof-arrow { transform: translate(2px,-2px); color: var(--cyan-400); }
.proof:hover .proof-link { color: var(--cyan-400); }
.avatars { display: flex; flex: none; }
.avatars span {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--navy-900);
  margin-left: -12px; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.5);
}
.avatars span:first-child { margin-left: 0; }
.proof-body { display: flex; flex-direction: column; gap: .18rem; text-align: left; }
.proof-top { display: inline-flex; align-items: center; gap: .5rem; }
.proof-g { width: 17px; height: 17px; flex: none; }
.proof-score { font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.proof-stars { display: inline-flex; gap: 1px; }
.proof-stars svg { width: 13px; height: 13px; fill: #FBBF24; }
.proof-sub { font-size: .8rem; color: var(--on-dark-soft); line-height: 1.25; }
.proof-link { color: #fff; font-weight: 600; transition: color .3s var(--ease); }
.proof-arrow { width: 16px; height: 16px; flex: none; color: var(--on-dark-soft); transition: transform .35s var(--ease), color .35s var(--ease); }

/* Hero media card (large, sous le texte) */
.hero-media { position: relative; max-width: 940px; margin: clamp(44px,6vw,76px) auto 0; }
.hero-media .glass { padding: 16px; border-radius: var(--r-xl); position: relative; z-index: 2; }

/* Indicateurs clés — rangée propre sous le tableau (remplace les pastilles flottantes) */
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.5vw,18px); max-width: 940px; margin: clamp(16px,2vw,22px) auto 0; }
.hero-stat { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; text-align: left; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: border-color .35s var(--ease), background .35s var(--ease); }
.hero-stat:hover { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.05); }
.hero-stat .icon-box { width: 44px; height: 44px; border-radius: 12px; }
.hero-stat .mono { color: #fff; font-size: 1.45rem; line-height: 1; display: block; }
.hero-stat small { color: var(--on-dark-soft); font-size: .76rem; display: block; margin-top: .15rem; }

/* Annotation manuscrite */
.note { font-family: 'Caveat', 'Plus Jakarta Sans', cursive; font-size: 1.6rem; color: var(--cyan-500); line-height: 1; display: inline-flex; align-items: center; gap: .35rem; transform: rotate(-4deg); }
.dark .note { color: var(--cyan-300); }
.note svg { width: 36px; height: 36px; flex: none; }

/* --- Pain grid --- */
.pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.8vw,22px); }
.pain { display: flex; gap: 1rem; align-items: flex-start; padding: clamp(18px,2.2vw,28px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.pain:hover { border-color: rgba(220,38,38,.3); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.pain .icon-box { width: 44px; height: 44px; border-radius: 12px; background: rgba(220,38,38,.08); color: var(--alert); }
.pain h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.pain p { font-size: .92rem; color: var(--slate); }

/* --- Méthode asymétrique --- */
.method-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(18px,2.5vw,32px); align-items: stretch; }
.method-card { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(28px,3.5vw,46px); background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); border: 1px solid var(--navy-700); display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; }
.method-card h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: .7rem; }
.method-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.method-features { display: flex; flex-direction: column; gap: clamp(12px,1.5vw,18px); }
.method-feature { display: flex; gap: 1.1rem; align-items: flex-start; padding: clamp(20px,2.4vw,28px); border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .35s var(--ease), border-color .35s var(--ease); }
.method-feature:hover { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.05); }
.method-feature h3 { color: #fff; font-size: 1.16rem; margin-bottom: .3rem; }
.method-feature p { font-size: .93rem; }

/* Citation large — carte glass premium */
.quote-lg {
  position: relative; margin: clamp(36px,4vw,52px) 0 0;
  padding: clamp(26px,3.2vw,40px) clamp(30px,4vw,56px);
  text-align: center;
  border: 1px solid rgba(34,211,238,.18); border-radius: clamp(18px,2.2vw,24px);
  background: linear-gradient(158deg, rgba(255,255,255,.065), rgba(255,255,255,.014));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.quote-lg::before {
  content: ""; position: absolute; z-index: 0; top: -50%; left: 50%; transform: translateX(-50%);
  width: 55%; height: 150%;
  background: radial-gradient(ellipse at center, rgba(34,211,238,.15), transparent 62%);
  pointer-events: none;
}
.quote-lg > * { position: relative; z-index: 1; }
.quote-glyph {
  width: clamp(30px,3.4vw,40px); height: auto; display: block; margin: 0 auto clamp(10px,1.2vw,14px);
  color: var(--cyan-400); opacity: .82;
  filter: drop-shadow(0 6px 18px rgba(34,211,238,.35));
}
.quote-stars {
  display: inline-flex; gap: .28rem; margin-bottom: clamp(12px,1.4vw,16px);
}
.quote-stars svg { width: 16px; height: 16px; fill: #FBBF24; }
.quote-lg blockquote {
  margin: 0 auto; max-width: 780px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.05rem,1.6vw,1.32rem); line-height: 1.5; letter-spacing: -.005em;
  color: #fff; font-weight: 500;
}
.quote-author {
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: clamp(18px,2.2vw,26px); padding-top: clamp(16px,1.8vw,22px);
  border-top: 1px solid rgba(255,255,255,.09);
}
.quote-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  color: #fff; box-shadow: 0 10px 22px -12px rgba(34,211,238,.7);
}
.quote-avatar svg { width: 20px; height: 20px; }
.quote-meta { display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.quote-meta b { color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .92rem; }
.quote-meta span { color: var(--on-dark-soft); font-size: .8rem; }
.quote-source {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: .4rem;
  padding: .4rem .78rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  font-family: 'Inter', sans-serif; font-size: .76rem; font-weight: 600; color: var(--on-dark);
  text-decoration: none; transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.quote-source:hover { border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); color: #fff; }
.quote-source svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .quote-author { flex-wrap: wrap; justify-content: center; gap: .7rem; }
  .quote-source { margin-left: 0; }
}

/* --- How-to : timeline verticale + card sticky --- */
.howto-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px,3.5vw,52px); align-items: start; }
.timeline { list-style:none; margin:0; padding:.2rem 0 0; }
.tl-step { position:relative; display:grid; grid-template-columns:clamp(42px,4.8vw,48px) 1fr; gap:clamp(.9rem,1.4vw,1.3rem); align-items:start; padding-bottom:clamp(1.4rem,2.4vw,2.1rem); }
.tl-step:last-child { padding-bottom:0; }
.tl-step::before { content:""; position:absolute; left:calc(clamp(42px,4.8vw,48px) / 2); top:clamp(42px,4.8vw,48px); bottom:-2px; width:2px; transform:translateX(-50%);
  background:linear-gradient(var(--blue-400) 0%,rgba(37,99,235,.15) 70%,transparent 100%); }
.tl-step:last-child::before { display:none; }
.tl-node { position:relative; z-index:1; width:clamp(42px,4.8vw,48px); height:clamp(42px,4.8vw,48px); border-radius:50%;
  display:grid; place-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.92rem;
  background:var(--paper); border:1.5px solid var(--line); color:var(--slate); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s, background .35s; }
.tl-step:first-child .tl-node { background:linear-gradient(135deg,var(--blue-600),var(--cyan-500)); border-color:transparent; color:#fff; box-shadow:0 12px 26px -12px rgba(37,99,235,.6); }
.tl-step:hover .tl-node { border-color:var(--blue-400); transform:translateY(-3px); box-shadow:0 14px 28px -14px rgba(37,99,235,.45); }
.tl-step:first-child:hover .tl-node { transform:translateY(-3px); }
.tl-body { padding-top:.4rem; }
.tl-body h3 { font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.12rem; letter-spacing:-.02em; color:var(--navy-900); margin:0 0 .35rem; }
.tl-body p { color:var(--slate); font-size:.96rem; line-height:1.55; margin:0; }
.enroll-card { position: sticky; top: 100px; background: var(--navy-900); color: #fff; border-radius: var(--r-lg); padding: clamp(24px,3vw,36px); overflow: hidden; }
.enroll-card h3 { color: #fff; font-size: var(--fs-h3); }
.enroll-card .check-list { margin: 1.4rem 0; }
.enroll-card .check-list li { color: var(--on-dark); font-size: .95rem; }
.enroll-card .check-list svg { color: var(--cyan-300); }

/* Partners strip */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px,2.4vw,40px); margin-top: clamp(40px,4.5vw,60px); opacity: .82; }
.partners span { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: clamp(1.1rem,1.8vw,1.5rem); color: var(--navy-800); }
.partners .brand-logo { height: clamp(22px,2.4vw,34px); width: auto; max-width: 15%; min-width: 0; object-fit: contain; flex: 1 1 0; }
.partners small { display: block; text-align: center; width: 100%; font-family: 'Inter'; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 1.6rem; opacity: .8; }
@media (max-width: 640px) { .partners { flex-wrap: wrap; justify-content: center; gap: clamp(20px,6vw,32px); } .partners .brand-logo { flex: 0 1 auto; max-width: 40%; } }

/* --- Témoignage vidéo --- */
.testi-video { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/8; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); display: grid; place-items: center; margin-bottom: clamp(20px,2.5vw,34px); }
.testi-video .glow { width: 60%; height: 80%; background: radial-gradient(circle, rgba(34,211,238,.25), transparent 65%); top: 10%; left: 20%; }
.play-btn { position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: var(--glow-cyan); transition: transform .35s var(--ease); border: 0; }
.testi-video:hover .play-btn { transform: scale(1.08); }
.play-btn svg { width: 28px; height: 28px; color: var(--navy-900); margin-left: 4px; }
.testi-video .float-name { position: absolute; bottom: 16px; right: 16px; z-index: 3; }

@media (max-width: 1024px) {
  .method-grid, .howto-grid { grid-template-columns: 1fr; }
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .enroll-card { position: static; }
  .method-card { min-height: 320px; }
}
@media (max-width: 640px) {
  .pain-grid, .hero-stats { grid-template-columns: 1fr; }
  .hero-field { flex-direction: column; border-radius: var(--r-lg); padding: .8rem; }
  .hero-field input { padding: .6rem .6rem 0; }
  .hero-field .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   13. PAGES SERVICES — langage éditorial asymétrique en couches (svc2-)
   ========================================================================= */
.svc2-hero{position:relative;overflow:hidden;padding:clamp(140px,18vh,210px) 0 clamp(84px,11vw,140px);isolation:isolate;
  background:
    radial-gradient(70% 60% at 88% 16%,rgba(34,211,238,.18),transparent 62%),
    radial-gradient(66% 66% at 4% 98%,rgba(37,99,235,.16),transparent 60%),
    var(--navy-900)}
.svc2-hero .g1,.svc2-hero .g2{display:none}
.svc2-radar{position:absolute;top:50%;right:-4%;width:min(58vw,760px);transform:translateY(-50%);opacity:.6;z-index:1;pointer-events:none}
.svc2-hero-inner{position:relative;z-index:2}
.svc2-crumb{display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:var(--on-dark-soft);margin-bottom:2.6rem}
.svc2-crumb a{color:var(--on-dark-soft)}.svc2-crumb a:hover{color:var(--cyan-300)}.svc2-crumb span{opacity:.45}
.svc2-head{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.svc2-index{font-family:'Plus Jakarta Sans';font-weight:800;font-size:.95rem;color:var(--cyan-300);letter-spacing:.04em}
.svc2-kicker{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);font-weight:600;display:inline-flex;align-items:center;gap:.8rem}
.svc2-kicker::before{content:"";width:34px;height:1px;background:rgba(255,255,255,.28)}
.svc2-title{font-family:'Plus Jakarta Sans';font-weight:800;color:#fff;font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.06;letter-spacing:-.03em;max-width:16ch;margin:0}
.svc2-title em{font-style:normal;background:linear-gradient(100deg,var(--cyan-400),var(--blue-400));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.svc2-lead{margin:2.2rem 0 0;max-width:46ch;font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--on-dark-soft);line-height:1.68}
.svc2-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.8rem}
.svc2-kpis{display:flex;flex-wrap:wrap;margin-top:clamp(3.4rem,6vw,5.2rem);padding-top:.4rem;border-top:1px solid rgba(255,255,255,.12)}
.svc2-kpi{flex:1;min-width:150px;padding:1.6rem 1.8rem 0 0;display:flex;flex-direction:column;gap:.4rem}
.svc2-kpi+.svc2-kpi{border-left:1px solid rgba(255,255,255,.10);padding-left:1.8rem}
.svc2-kpi b{font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(1.7rem,2.6vw,2.4rem);color:#fff;line-height:1;letter-spacing:-.02em}
.svc2-kpi b i{font-style:normal;color:var(--cyan-300)}
.svc2-kpi span{font-size:.8rem;color:var(--on-dark-soft);max-width:20ch;line-height:1.4}
.svc2-rows-sec{padding:clamp(70px,9vw,128px) 0;background:var(--paper)}
.svc2-split{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2.4rem,5vw,6rem);align-items:start}
.svc2-aside{position:sticky;top:118px}
.svc2-aside .svc2-index{color:var(--blue-600)}
.svc2-aside .svc2-head{margin-bottom:1.2rem}
.svc2-aside .svc2-kicker{color:var(--slate)}
.svc2-aside .svc2-kicker::before{background:var(--line)}
.svc2-aside h2{font-family:'Plus Jakarta Sans';font-weight:800;font-size:clamp(1.35rem,1.8vw,1.7rem);letter-spacing:-.02em;line-height:1.16;color:var(--navy-900);margin:0 0 1rem}
.svc2-aside h2 em{font-style:normal;color:var(--blue-600)}
.svc2-aside p{color:var(--slate);font-size:1.02rem;line-height:1.65;margin:0 0 1.6rem;max-width:34ch}
.svc2-rows{display:flex;flex-direction:column}
.svc2-row{display:grid;grid-template-columns:2.4rem 1fr 1.4rem;gap:1.3rem;align-items:start;padding:1.7rem .2rem;border-top:1px solid var(--line);position:relative;transition:padding-left .4s var(--ease)}
.svc2-row:last-child{border-bottom:1px solid var(--line)}
.svc2-row::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;background:linear-gradient(var(--blue-600),var(--cyan-400));transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.svc2-row:hover{padding-left:1.4rem}
.svc2-row:hover::before{transform:scaleY(1)}
.svc2-row-n{font-family:'Plus Jakarta Sans';font-weight:800;font-size:1rem;color:var(--blue-600);padding-top:.15rem}
.svc2-row h3{font-family:'Plus Jakarta Sans';font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:var(--navy-900);margin:0 0 .35rem}
.svc2-row p{color:var(--slate);font-size:.97rem;line-height:1.6;margin:0;max-width:52ch}
.svc2-row-arrow{color:var(--blue-600);opacity:0;transform:translateX(-6px);transition:.4s var(--ease);align-self:center}
.svc2-row:hover .svc2-row-arrow{opacity:1;transform:none}
@media(max-width:860px){
  .svc2-split{grid-template-columns:1fr;gap:2.4rem}
  .svc2-aside{position:static}
  .svc2-radar{opacity:.2;right:-32%;width:95vw}
  .svc2-title{max-width:18ch}
  .svc2-kpis{gap:0 1.6rem}
  .svc2-kpi{flex:1 1 44%;min-width:130px;border-top:1px solid rgba(255,255,255,.10);padding:1.2rem 0 0}
  .svc2-kpi+.svc2-kpi{border-left:0;padding-left:0}
}

/* ============================================================
   14. HOMEPAGE — TRUST · SERVICES BENTO · COMPARISON · AVIS
   ============================================================ */

/* --- 14.1 Bande confiance (Paxton Argent + marques) --- */
.trust { padding: clamp(34px,4.5vw,56px) 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-inner { display:flex; align-items:center; justify-content:center; gap:clamp(1.4rem,4vw,3.4rem); flex-wrap:wrap; }
.trust-badge { display:inline-flex; align-items:center; gap:.75rem; padding:.7rem 1.15rem; border-radius:var(--r-pill); background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(34,211,238,.08)); border:1px solid var(--line); white-space:nowrap; }
.trust-badge svg { width:32px; height:32px; flex:none; }
.trust-badge b { display:block; font-family:'Plus Jakarta Sans'; font-weight:800; color:var(--navy-900); font-size:.98rem; line-height:1.15; letter-spacing:-.01em; }
.trust-badge small { display:block; font-size:.76rem; color:var(--slate); }
.trust-eyebrow { text-align:center; font-family:'Inter',sans-serif; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-light); margin:clamp(1.6rem,2.6vw,2.2rem) 0 clamp(1.1rem,2vw,1.6rem); }
.trust-marquee .marquee-track { gap:clamp(2.6rem,5.5vw,4.6rem); animation-duration:42s; }
.brand-logo { height:clamp(30px,3.2vw,42px); width:auto; flex:none; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .35s var(--ease), opacity .35s var(--ease); }
.brand-logo:hover { filter:none; opacity:1; }
@media (max-width: 640px) {
  .trust-marquee .marquee-track { gap:2rem; }
  .brand-logo { height:30px; }
}
.trust-marquee:hover .marquee-track { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce){ .trust-marquee .marquee-track{ animation:none; } }

/* --- 14.2 Services en bento asymétrique (Alarme = phare) --- */
.svc-bento { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.7rem,1vw,.95rem); margin-top:clamp(2.4rem,4vw,3.4rem);
  position:relative; left:50%; transform:translateX(-50%); width:min(1240px, calc(100vw - 2 * var(--gutter))); max-width:none; }
.svc-tile { position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--paper); padding:clamp(1.25rem,1.6vw,1.6rem); text-decoration:none; color:inherit; display:flex; flex-direction:column; min-height:0; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s; }
.svc-tile:hover { transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:var(--blue-400); }
.svc-tile > * { position:relative; z-index:1; }
.svc-tile .icon-box { margin-bottom:auto; }
.svc-tile h3 { font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.1rem; letter-spacing:-.02em; margin:.95rem 0 .35rem; color:var(--navy-900); }
.svc-tile p { color:var(--slate); font-size:.91rem; line-height:1.55; margin:0; }
.svc-go { display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; font-weight:600; color:var(--blue-600); font-size:.88rem; }
.svc-go svg { width:16px; height:16px; transition:transform .4s var(--ease); }
.svc-tile:hover .svc-go svg { transform:translateX(4px); }
/* Hero (Alarme) — span 6 × 2 rows, radar/signal rings deco */
.svc-feat { grid-column:span 6; grid-row:span 2; background:linear-gradient(150deg,var(--navy-900),var(--navy-700)); border:0; color:#fff; min-height:0; padding:clamp(1.6rem,2.1vw,2.1rem); justify-content:flex-end; }
.svc-feat .icon-box { margin-bottom:0; position:absolute; top:clamp(1.7rem,2.4vw,2.3rem); left:clamp(1.7rem,2.4vw,2.3rem); }
.svc-feat::after { content:""; position:absolute; width:60%; height:60%; right:-12%; bottom:-15%; background:radial-gradient(circle,rgba(34,211,238,.22),transparent 62%); pointer-events:none; z-index:0; }
.svc-feat::before { content:""; position:absolute; right:-90px; top:42%; transform:translateY(-50%); width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle, transparent 0 37%, rgba(34,211,238,.16) 37% 37.6%, transparent 38%),
    radial-gradient(circle, transparent 0 56%, rgba(34,211,238,.11) 56% 56.5%, transparent 57%),
    radial-gradient(circle, transparent 0 77%, rgba(34,211,238,.07) 77% 77.4%, transparent 78%); }
.svc-feat h3 { color:#fff; font-size:clamp(1.45rem,2.3vw,1.95rem); }
.svc-feat p { color:var(--on-dark-soft); font-size:.98rem; max-width:34ch; }
.svc-feat .svc-go { color:var(--cyan-300); }
.svc-feat .icon-box { background:rgba(34,211,238,.14); color:var(--cyan-300); border-color:rgba(34,211,238,.22); }
.svc-3,.svc-5 { grid-column:span 3; }
.svc-2,.svc-6,.svc-7 { grid-column:span 6; }
.svc-links { display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1rem; }
.svc-links .svc-go { margin-top:0; }
.svc-links .svc-go:hover { color:var(--cyan-500); }
@media(max-width:980px){
  .svc-bento { grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .svc-feat { grid-column:span 2; grid-row:auto; min-height:230px; }
  .svc-feat .icon-box { position:static; }
  .svc-feat { justify-content:flex-start; }
  .svc-feat .icon-box { margin-bottom:auto; }
  .svc-feat::before { right:-120px; opacity:.7; }
  .svc-2,.svc-3,.svc-4,.svc-5,.svc-6,.svc-7 { grid-column:span 1; }
}
@media(max-width:560px){
  .svc-bento { grid-template-columns:1fr; }
  .svc-feat,.svc-2,.svc-3,.svc-4,.svc-5,.svc-6,.svc-7 { grid-column:span 1; }
  .svc-tile { min-height:0; }
}

/* --- 14.3 Comparaison dark glossy premium (lambda vs WeProtec) --- */
.vs-cmp { display:grid; grid-template-columns:0.5fr 1fr 1.1fr; align-items:stretch;
  max-width:920px; margin:clamp(2.6rem,4vw,3.6rem) auto 0; position:relative; overflow:hidden;
  border-radius:clamp(20px,2.6vw,30px); border:1px solid rgba(34,211,238,.16);
  background:linear-gradient(158deg,var(--navy-900) 0%,var(--navy-800) 70%,#0d2147 100%);
  box-shadow:0 44px 100px -50px rgba(11,27,58,.85); }
.vs-cmp::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 70% at 100% -5%,rgba(34,211,238,.18),transparent 58%); }
.vs-cell { position:relative; z-index:1; display:flex; align-items:center; gap:.7rem;
  padding:clamp(.72rem,1vw,.95rem) clamp(1.1rem,1.7vw,1.7rem);
  border-top:1px solid rgba(255,255,255,.07); }
/* Respiration en bas de la dernière ligne */
.vs-cmp .vs-cell:nth-last-child(-n+3) { padding-bottom:clamp(1.5rem,2.4vw,2.2rem); }

/* header row */
.vs-h { border-top:0; flex-direction:column; align-items:flex-start; gap:.2rem; justify-content:flex-end;
  padding-top:clamp(1.1rem,1.5vw,1.4rem); padding-bottom:clamp(.95rem,1.3vw,1.15rem); }
.vs-h strong { font-family:'Plus Jakarta Sans'; font-weight:800; font-size:clamp(1rem,1.5vw,1.18rem); letter-spacing:-.02em; }
.vs-h small { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.vs-them-h strong { color:var(--on-dark-soft); }
.vs-them-h small { color:rgba(255,255,255,.34); }
.vs-us-h strong { color:#fff; }
.vs-us-h small { color:rgba(34,211,238,.62); }
.vs-badge { font-family:'Inter'; font-weight:700; font-size:.63rem; text-transform:uppercase; letter-spacing:.07em;
  padding:.3rem .62rem; border-radius:999px; background:linear-gradient(135deg,var(--blue-600),var(--cyan-500));
  color:#fff; margin-bottom:.55rem; box-shadow:0 6px 18px -6px rgba(34,211,238,.5); }

/* criterion column */
.vs-crit { align-items:center; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:.92rem; color:#fff; }
.vs-crit svg { width:17px; height:17px; flex:none; color:var(--cyan-300); }

/* them column (muted, accent rouge) */
.vs-them span { color:rgba(255,255,255,.52); font-size:.92rem; line-height:1.5; }
.vs-them svg { width:18px; height:18px; flex:none; margin-top:1px; color:rgba(239,68,68,.7); }

/* us column — lane cyan spotlight, continue */
.vs-us, .vs-us-h { background:rgba(34,211,238,.055); border-left:1px solid rgba(34,211,238,.22); }
.vs-us span { color:rgba(255,255,255,.96); font-size:.92rem; line-height:1.5; font-weight:500; }
.vs-us svg { width:18px; height:18px; flex:none; margin-top:1px; color:var(--cyan-300); }

@media(max-width:760px){
  .vs-cmp { display:block; background:transparent; border:0; box-shadow:none; overflow:visible; }
  .vs-cmp::before { display:none; }
  .vs-h { display:none; }
  .vs-cell { border-top:0; padding:0; }
  .vs-crit { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--navy-900); font-size:1rem; }
  .vs-crit svg { color:var(--cyan-500); }
  .vs-them { margin-top:.7rem; }
  .vs-them span { color:var(--slate); }
  .vs-them svg { color:#dc2626; }
  .vs-us { margin-top:.6rem; padding:.95rem 1.1rem; border-radius:14px; border:1px solid rgba(34,211,238,.3); }
  .vs-us span { color:var(--navy-900); }
  .vs-us svg { color:var(--cyan-500); }
}

/* --- 14.4 Avis Google (note agrégée + cartes) --- */
.gr-score { display:inline-flex; align-items:center; gap:1.2rem; padding:1.1rem 1.6rem; border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-soft); margin:0 auto clamp(2rem,3.4vw,3rem); }
.gr-score .gr-num { font-family:'Plus Jakarta Sans'; font-weight:800; font-size:2.6rem; line-height:1; color:var(--navy-900); }
.gr-score .gr-meta { text-align:left; }
.gr-stars { display:inline-flex; gap:2px; color:#fbbc04; }
.gr-stars svg { width:18px; height:18px; }
.gr-score .gr-meta small { display:block; color:var(--slate); font-size:.84rem; margin-top:.25rem; }
.gr-glogo { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--slate); font-size:.86rem; }
.gr-glogo svg { width:20px; height:20px; }
.testi .gr-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }


/* ---- Link cards (maillage pages ville SEO) ---- */
.link-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);color:var(--navy-900);font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;text-decoration:none;box-shadow:var(--shadow-card);transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.link-card svg{width:20px;height:20px;flex-shrink:0;color:var(--blue-600);transition:transform .4s var(--ease)}
.link-card:hover{transform:translateY(-3px);border-color:var(--blue-400);box-shadow:var(--shadow-soft)}
.link-card:hover svg{transform:translateX(4px)}

/* ── Footer centré sur toutes les pages (variantes riche + simple) ── */
.footer-top { justify-items:center; text-align:center; }
.footer-top > div,
.footer-brand-col,
.footer-col { display:flex; flex-direction:column; align-items:center; }
.footer .brand { justify-content:center; }
.footer-claim { text-align:center; white-space:nowrap; font-size:clamp(1.05rem,5vw,2rem); }
.footer-stat { justify-content:center; }
.footer-social { justify-content:center; }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-contact-list { align-items:center; }
.footer-contact-list a,
.footer-contact-list .fc-static { justify-content:center; }
.footer-bottom { justify-content:center; text-align:center; }
.footer-legal { justify-content:center; }