/* ============================================================
   Groupe Verlaine — Landing Pages ITE — Shared stylesheet
   Brand: Manrope · navy + red · cream · soft pink
   ============================================================ */

:root {
  --v-blue: #1c3a8f;
  --v-blue-deep: #14266b;
  --v-blue-ink: #0d1c4d;
  --v-red: #e11d33;
  --v-red-deep: #b8132a;
  --v-pink: #ffd0d8;
  --v-cream: #f5f6f9;
  --v-light: #fafbfd;
  --v-white: #ffffff;
  --v-line: #e6e9ee;
  --star: #ffb800;
  --radius-card: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 24px 70px rgba(13,28,77,0.13), 0 2px 6px rgba(13,28,77,0.04);
  --shadow-soft: 0 4px 18px rgba(13,28,77,0.07);
  --maxw: 1280px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--v-blue-ink);
  background: var(--v-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
em { font-style: normal; color: var(--v-red); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.mono { font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 700; font-size: 16px;
  border: none; cursor: pointer; border-radius: var(--radius-pill);
  padding: 15px 28px; text-decoration: none;
  transition: transform .15s var(--ease), background .18s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary { background: var(--v-red); color: #fff; box-shadow: 0 10px 24px rgba(225,29,51,.26); }
.btn-primary:hover { background: var(--v-red-deep); transform: translateY(-2px); }
.btn-navy { background: var(--v-blue); color: #fff; }
.btn-navy:hover { background: var(--v-blue-deep); transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--v-blue-ink); box-shadow: inset 0 0 0 1.5px var(--v-line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--v-blue); transform: translateY(-2px); }
.btn-lg { padding: 18px 34px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--v-line);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; padding: 14px 96px; max-width: 1400px; margin: 0 auto; }
.hdr-logo img { height: 38px; }
.hdr-right { display: flex; align-items: center; gap: 18px; }
.hdr-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--v-blue-ink); background: rgba(28,58,143,.05); border: 1px solid var(--v-line); padding: 7px 13px; border-radius: var(--radius-pill); }
.hdr-badge svg { color: var(--v-red); flex: 0 0 15px; }
.hdr-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 4px rgba(34,160,107,.16); }
.hdr-phone { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; color: var(--v-blue-ink); text-decoration: none; }
.hdr-phone svg { color: var(--v-red); }
.hdr-rge { display: flex; align-items: center; }
.hdr-rge img { height: 42px; width: auto; display: block; }
@media (max-width: 760px){ .hdr-rge { display:none; } }
.hdr-phone small { display: block; font-size: 11px; font-weight: 600; color: rgba(13,28,77,.55); letter-spacing: .02em; }
@media (max-width: 720px){ .hdr-badge, .hdr-phone small { display:none; } }

/* ---------- Rating inline (Google + Trustpilot) ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 16px; height: 16px; }
.ratings-inline { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.rating-chip { display: flex; align-items: center; gap: 11px; }
.rating-chip .rc-logo { font-weight: 800; font-size: 15px; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; }
.rating-chip .rc-logo .g-b { color:#4285F4;} .rating-chip .rc-logo .g-r{color:#EA4335;} .rating-chip .rc-logo .g-y{color:#FBBC05;} .rating-chip .rc-logo .g-g{color:#34A853;}
.rating-chip .rc-tp { color:#00b67a; font-weight:800; display:flex; align-items:center; gap:5px; }
.rating-chip .rc-meta { line-height: 1.15; }
.rating-chip .rc-meta b { font-size: 15px; display:block; }
.rating-chip .rc-meta span { font-size: 12px; color: rgba(13,28,77,.6); font-weight: 600; }

/* ---------- HERO ---------- */
.hero { padding: 56px 0 70px; position: relative; overflow: hidden; }
.hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(1100px 520px at 78% -8%, #eaf0ff 0%, rgba(234,240,255,0) 60%),
              radial-gradient(900px 520px at -6% 8%, #fff3f5 0%, rgba(255,243,245,0) 55%);
  z-index:-1;
}

/* ---- Hero with photo background ---- */
.hero.hero-photo { padding: 72px 0 86px; }
.hero.hero-photo::before { display:none; }
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background: #0d1c4d url('/assets/img/ite-hero-bg.webp') center/cover no-repeat;
}
.hero-bg .photo-tag {
  position:absolute; left:24px; bottom:20px;
  font-family:'Roboto Mono',monospace; font-size:11px; letter-spacing:.02em;
  color:rgba(255,255,255,.55); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); padding:6px 11px; border-radius:8px;
}
.hero-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(13,28,77,.92) 0%, rgba(13,28,77,.8) 45%, rgba(13,28,77,.5) 100%);
}
.hero.hero-photo .wrap { position:relative; z-index:2; }
.hero.hero-photo .eyebrow { color:#fff; }
.hero.hero-photo .eyebrow .pip { background:#fff; }
.hero.hero-photo h1 { color:#fff; }
.hero.hero-photo h1 em { color:var(--v-pink); }
.hero.hero-photo .hero-lead { color:rgba(255,255,255,.82); }
.hero.hero-photo .hero-lead strong { color:#fff; }
.hero.hero-photo .hero-points li { color:#fff; }
.hero.hero-photo .hero-points .ck { background:rgba(255,255,255,.16); color:#fff; }
.hero.hero-photo .ratings-inline { gap:22px; }
.hero.hero-photo .rc-logo { color:#fff; }
.hero.hero-photo .rc-tp { color:#33d6a0; }
.hero.hero-photo .rc-meta b { color:#fff; }
.hero.hero-photo .rc-meta span { color:rgba(255,255,255,.65); }
@media (max-width: 1000px){
  .hero-overlay { background: linear-gradient(180deg, rgba(13,28,77,.9) 0%, rgba(13,28,77,.82) 100%); }
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; box-shadow: none; padding: 0; color: var(--v-red); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow .pip { width: 22px; height: 2px; border-radius: 2px; background: var(--v-red); }
.hero h1 { font-size: 58px; line-height: 1.04; letter-spacing: -.025em; font-weight: 800; margin: 22px 0 18px; }
.hero-lead { font-size: 19px; line-height: 1.55; color: rgba(13,28,77,.74); max-width: 30em; margin: 0 0 26px; }
.hero-lead strong { color: var(--v-blue-ink); font-weight: 800; }
.hero-points { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.hero-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15.5px; color: var(--v-blue-ink); }
.hero-points .ck { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: rgba(34,160,107,.12); color: #1f9d63; display: flex; align-items: center; justify-content: center; }
.hero-points .ck svg { width: 14px; height: 14px; }

/* ---------- Lead form card ---------- */
.form-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--v-line); overflow: hidden; }
.form-head { background: var(--v-blue-ink); color: #fff; padding: 22px 26px; position: relative; }
.form-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.form-head p { margin: 5px 0 0; font-size: 14px; color: rgba(255,255,255,.72); }
.form-head .free-tag { position: absolute; top: 18px; right: 22px; background: var(--v-pink); color: var(--v-blue-ink); font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill); }
.form-body { padding: 28px 26px 28px; }
.fieldrow { display: grid; gap: 14px; margin-bottom: 14px; }
.fieldrow.two { grid-template-columns: 1fr 1fr; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: rgba(13,28,77,.62); margin-bottom: 6px; letter-spacing: .01em; }
.field input, .field select { width: 100%; padding: 13px 14px; border: 1.5px solid var(--v-line); border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--v-blue-ink); background: #fcfcfe; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder { color: rgba(13,28,77,.4); }
.field input:focus, .field select:focus { outline: none; border-color: var(--v-blue); box-shadow: 0 0 0 4px rgba(28,58,143,.12); background:#fff; }
.seg { display: grid; grid-auto-flow: column; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; border: 1.5px solid var(--v-line); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--v-blue-ink); cursor: pointer; margin: 0; background: #fcfcfe; transition: all .15s var(--ease); text-align:center; }
.seg label:hover { border-color: #c7d0e6; }
.seg-ic { width: 16px; height: 16px; flex: 0 0 16px; }
.seg input:checked + label { border-color: var(--v-blue); background: rgba(28,58,143,.06); box-shadow: 0 0 0 3px rgba(28,58,143,.1); color: var(--v-blue-deep); }
.form-foot { margin-top: 4px; }
/* ---- Multi-step ---- */
.form-cap { text-align:center; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--v-red); margin-bottom:20px; }
.stepper { position:relative; display:flex; justify-content:space-between; margin:0 4px 26px; }
.stepper-line { position:absolute; top:17px; left:16.66%; right:16.66%; height:3px; background:var(--v-line); border-radius:2px; z-index:0; }
.stepper-line span { display:block; height:100%; width:0%; background:var(--v-red); border-radius:2px; transition:width .4s var(--ease); }
.stp { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; flex:1; }
.stp-dot { width:36px; height:36px; border-radius:50%; background:#fff; border:2px solid var(--v-line); color:rgba(13,28,77,.45); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease); }
.stp-lbl { font-size:12px; font-weight:700; color:rgba(13,28,77,.45); transition:color .25s var(--ease); }
.stp.active .stp-dot { background:var(--v-red); border-color:var(--v-red); color:#fff; box-shadow:0 6px 16px rgba(225,29,51,.28); transform:scale(1.06); }
.stp.active .stp-lbl, .stp.done .stp-lbl { color:var(--v-blue-ink); }
.stp.done .stp-dot { background:var(--v-blue); border-color:var(--v-blue); color:#fff; }
.fs-title { margin:0 0 5px; font-size:21px; font-weight:800; letter-spacing:-.015em; color:var(--v-blue-ink); }
.fs-sub { margin:0 0 18px; font-size:14px; line-height:1.5; color:rgba(13,28,77,.6); }
.form-step[hidden] { display:none; }
.form-step { animation: fadeStep .28s var(--ease); }
@media (prefers-reduced-motion: reduce){ .form-step { animation: none; } }
@keyframes fadeStep { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.form-nav { display:flex; gap:10px; align-items:stretch; margin-top:18px; }
.form-nav .btn-ghost { flex:0 0 auto; }
.field input.err { border-color:var(--v-red); box-shadow:0 0 0 4px rgba(225,29,51,.1); }
.seg-lg label { padding: 20px 10px; font-size: 15px; }
.seg-lg .seg-ic { width: 20px; height: 20px; }
.rgpd-text { font-size: 11.5px; line-height: 1.5; color: rgba(13,28,77,.5); margin: 16px 0 0; text-align: center; }
.form-submit { margin-top: 6px; }
.form-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: rgba(13,28,77,.55); margin-top: 14px; text-align: center; }
.form-note svg { width: 14px; height: 14px; color: #1f9d63; flex: 0 0 14px; }
.form-or { text-align: center; font-size: 13px; color: rgba(13,28,77,.5); margin: 16px 0 12px; position: relative; }
.form-success { display:none; padding: 40px 26px; text-align:center; }
.form-success.show { display:block; }
.form-success .tick { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: rgba(34,160,107,.12); color:#1f9d63; display:flex; align-items:center; justify-content:center; }
.form-success h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.form-success p { margin: 0; color: rgba(13,28,77,.7); font-size: 15px; }

/* ---------- Trust strip ---------- */
.trust { background: var(--v-blue-ink); color: #fff; padding: 26px 0; }
.trust-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.trust-item { display: flex; align-items: center; gap: 13px; }
.trust-item .ti-num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.trust-item .ti-lbl { font-size: 13px; color: rgba(255,255,255,.66); font-weight: 600; line-height: 1.25; }
.trust-item .ti-ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: var(--v-pink); flex: 0 0 42px; }
.trust-sep { width: 1px; height: 38px; background: rgba(255,255,255,.14); }
@media (max-width: 900px){ .trust-sep { display:none; } }

/* ---------- Section scaffolding ---------- */
.sec { padding: 84px 0; }
.sec.tight { padding: 64px 0; }
.sec-cream { background: var(--v-cream); }
.sec-light { background: var(--v-light); }
.sec-navy { background: var(--v-blue-ink); color:#fff; }
.kicker { display:inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--v-red); margin-bottom: 14px; }
.sec h2 { font-size: 42px; line-height: 1.08; letter-spacing: -.025em; font-weight: 800; margin: 0 0 16px; }
.sec-navy h2 { color: #fff; }
.sec-lead { font-size: 18px; color: rgba(13,28,77,.7); max-width: 46em; margin: 0; }
.sec-navy .sec-lead { color: rgba(255,255,255,.72); }
.sec-head { margin-bottom: 44px; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-lead { margin: 0 auto; }

/* ---------- Before / After slider ---------- */
.ba-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.ba { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); user-select: none; touch-action: pan-y; }
.ba-layer { position: absolute; inset: 0; }
.ba-after { z-index: 1; }
.ba-before { z-index: 2; width: 50%; overflow: hidden; border-right: 3px solid #fff; }
.ba-before .ba-img { width: var(--ba-w, 200%); height: 100%; }
.ba-img { width: 100%; height: 100%; }
.ba-tag { position: absolute; bottom: 16px; z-index: 4; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-pill); color:#fff; backdrop-filter: blur(4px); }
.ba-tag.is-before { left: 16px; background: rgba(13,28,77,.7); }
.ba-tag.is-after { right: 16px; background: rgba(225,29,51,.82); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; transform: translateX(-50%); z-index: 5; cursor: ew-resize; display: flex; align-items: center; justify-content: center; }
.ba-handle::before { content:''; position: absolute; top:0; bottom:0; width: 3px; background:#fff; box-shadow: 0 0 0 1px rgba(13,28,77,.08); }
.ba-knob { width: 44px; height: 44px; border-radius: 50%; background:#fff; box-shadow: 0 6px 18px rgba(13,28,77,.28); display:flex; align-items:center; justify-content:center; color: var(--v-blue); position: relative; z-index: 1; }
.ba-knob svg { width: 22px; height: 22px; }
.ba-side { display: grid; gap: 16px; }
.ba-stat { background:#fff; border: 1px solid var(--v-line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-soft); }
.ba-stat .v { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--v-blue-ink); line-height: 1; }
.ba-stat .v em { color: var(--v-red); }
.ba-stat .l { font-size: 14px; color: rgba(13,28,77,.66); font-weight: 600; margin-top: 7px; }

/* ---------- Placeholder imagery ---------- */
.ph { position: relative; background: repeating-linear-gradient(45deg, #e9edf6 0 14px, #eef2f9 14px 28px); display:flex; align-items:center; justify-content:center; }
.ph.warm { background: repeating-linear-gradient(45deg, #dbe7f4 0 14px, #e8f0f9 14px 28px); }
.ph.navy { background: repeating-linear-gradient(45deg, #16285a 0 14px, #1a2e64 14px 28px); }
.ph-lbl { font-family:'Roboto Mono', monospace; font-size: 12px; letter-spacing: .02em; color: rgba(13,28,77,.5); background: rgba(255,255,255,.78); padding: 7px 12px; border-radius: 8px; }
.ph.navy .ph-lbl { color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.ba .ph-lbl { display: none; }

/* ---------- Benefit / stat cards ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.benefit { background:#fff; border:1px solid var(--v-line); border-radius: var(--radius-card); padding: 30px; box-shadow: var(--shadow-soft); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.benefit .b-ico { width: 50px; height: 50px; border-radius: 14px; background: rgba(28,58,143,.08); color: var(--v-blue); display:flex; align-items:center; justify-content:center; margin-bottom: 18px; }
.benefit .b-ico svg { width: 26px; height: 26px; }
.benefit h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.benefit p { margin: 0; font-size: 15px; color: rgba(13,28,77,.68); line-height: 1.6; }
.benefit .b-big { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: var(--v-red); line-height: 1; margin-bottom: 6px; }

/* ---------- Reviews ---------- */
.rev-top { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; margin-bottom: 40px; }
.rev-score { flex: 1 1 240px; background:#fff; border:1px solid var(--v-line); border-radius: 18px; padding: 22px 24px; display:flex; align-items:center; gap: 18px; box-shadow: var(--shadow-soft); }
.rev-score .rs-num { font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.rev-score .rs-meta { line-height: 1.3; }
.rev-score .rs-brand { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.rev-score .rs-count { font-size: 13px; color: rgba(13,28,77,.6); font-weight: 600; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { background:#fff; border:1px solid var(--v-line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-soft); display:flex; flex-direction:column; gap: 12px; }
.review .r-head { display:flex; align-items:center; gap: 13px; }
.review .r-av { width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:17px; flex:0 0 44px; }
.review .r-name { font-weight: 800; font-size: 15.5px; }
.review .r-sub { font-size: 12.5px; color: rgba(13,28,77,.55); font-weight: 600; }
.review .r-text { font-size: 14.5px; line-height: 1.62; color: rgba(13,28,77,.82); margin: 0; }
.review .r-src { display:flex; align-items:center; gap: 7px; font-size: 12px; color: rgba(13,28,77,.5); font-weight: 700; margin-top: auto; padding-top: 6px; }

/* ---------- Steps / how ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; counter-reset: s; }
.step { position: relative; padding: 26px 22px; background:#fff; border:1px solid var(--v-line); border-radius: 18px; box-shadow: var(--shadow-soft); }
.step .s-n { width: 38px; height: 38px; border-radius: 50%; background: var(--v-pink); color: var(--v-blue-ink); font-weight: 800; font-size: 16px; display:flex; align-items:center; justify-content:center; margin-bottom: 16px; }
.step h3 { margin: 0 0 7px; font-size: 17px; font-weight: 800; }
.step p { margin: 0; font-size: 14px; color: rgba(13,28,77,.66); line-height: 1.55; }
.step .s-time { display:inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--v-red); background: rgba(225,29,51,.08); padding: 4px 10px; border-radius: var(--radius-pill); }

/* ---------- Price table (page 2) ---------- */
.price-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0; background:#fff; border:1px solid var(--v-line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); table-layout: fixed; }
.ptable th, .ptable td { padding: 16px 20px; text-align: left; font-size: 15px; word-wrap: break-word; }
@media (max-width: 640px) {
  .ptable th, .ptable td { padding: 12px 10px; font-size: 13px; }
  .ptable td.p-price { white-space: normal !important; }
}
.ptable thead th { background: var(--v-blue-ink); color:#fff; font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
.ptable tbody tr + tr td { border-top: 1px solid var(--v-line); }
.ptable td.p-tech { font-weight: 800; color: var(--v-blue-ink); }
.ptable td.p-price { font-weight: 800; color: var(--v-red); white-space: nowrap; }
.ptable tbody tr:hover td { background: #fafbff; }
.ptable .p-note { font-size: 12.5px; color: rgba(13,28,77,.55); font-weight: 600; }
.pcards { display: grid; gap: 14px; }
.pcard { background:#fff; border:1px solid var(--v-line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-soft); display:flex; align-items:center; justify-content: space-between; gap: 16px; }
.pcard .pc-surf { font-weight: 800; font-size: 17px; }
.pcard .pc-surf span { display:block; font-size: 12.5px; font-weight: 600; color: rgba(13,28,77,.55); margin-top: 3px; }
.pcard .pc-amt { text-align: right; }
.pcard .pc-amt b { font-size: 22px; font-weight: 800; color: var(--v-blue-ink); letter-spacing: -.01em; }
.pcard .pc-amt small { display:block; font-size: 12px; color: rgba(13,28,77,.55); font-weight: 600; margin-top: 2px; }

/* ---------- Pedagogy / explainer (page 3) ---------- */
.explain { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ecard { background:#fff; border:1px solid var(--v-line); border-radius: var(--radius-card); padding: 30px; box-shadow: var(--shadow-soft); }
.ecard .e-ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(225,29,51,.08); color: var(--v-red); display:flex; align-items:center; justify-content:center; margin-bottom: 16px; }
.ecard h3 { margin: 0 0 9px; font-size: 19px; font-weight: 800; }
.ecard p { margin: 0; font-size: 15px; line-height: 1.62; color: rgba(13,28,77,.7); }
.ecard p + p { margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
details.faq { background:#fff; border:1px solid var(--v-line); border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow-soft); }
details.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap: 16px; font-weight: 800; font-size: 16.5px; color: var(--v-blue-ink); }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary .pl { flex:0 0 26px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size: 24px; font-weight: 400; line-height:1; color: var(--v-blue); transition: transform .2s var(--ease); }
details.faq[open] summary .pl { transform: rotate(45deg); color: var(--v-red); }
details.faq p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: rgba(13,28,77,.74); }

/* ---------- Final CTA ---------- */
.cta-band { background: linear-gradient(135deg, #14266b 0%, #0d1c4d 60%, #1c3a8f 130%); color:#fff; border-radius: 28px; padding: 56px 56px; position: relative; overflow: hidden; }
.cta-band::after { content:''; position:absolute; right:-160px; bottom:-160px; width: 460px; height:460px; border-radius:50%; background: radial-gradient(circle, rgba(225,29,51,.22), transparent 65%); }
.cta-band .cta-in { position: relative; z-index: 2; display:flex; align-items:center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { font-size: 38px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 10px; color:#fff; }
.cta-band p { margin: 0; font-size: 17px; color: rgba(255,255,255,.78); max-width: 34em; }
.cta-actions { display:flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.ft { background: var(--v-blue-ink); color: #fff; padding: 60px 0 30px; }
.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ft-brand img { height: 40px; margin-bottom: 16px; }
.ft-brand p { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.6; max-width: 30em; margin: 0 0 16px; }
.ft-badges { display:flex; gap: 10px; flex-wrap: wrap; }
.ft-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color:#fff; }
.ft-chip svg { width: 14px; height: 14px; color: var(--v-pink); flex: 0 0 14px; }
.ft-col h4 { font-size: 14px; font-weight: 800; margin: 0 0 14px; }
.ft-col a { display:block; color: rgba(255,255,255,.62); font-size: 13.5px; text-decoration:none; margin-bottom: 10px; transition: color .15s; }
.ft-col a:hover { color: #fff; }
.ft-legal { padding-top: 24px; font-size: 12px; color: rgba(255,255,255,.46); line-height: 1.7; }
.ft-legal .ft-bottom { display:flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ft-legal a { color: rgba(255,255,255,.46); text-decoration: none; }
.ft-legal a:hover { color:#fff; }

/* ---------- Réalisations (avant/après gallery) ---------- */
.realis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.realis-card { background:#fff; border:1px solid var(--v-line); border-radius: var(--radius-card); overflow:hidden; box-shadow: var(--shadow-soft); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.realis-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.realis-imgs { display:grid; grid-template-columns: 1fr 1fr; }
.realis-imgs .ph { aspect-ratio: 1/1; position:relative; }
.realis-imgs .ph + .ph { border-left: 2px solid #fff; }
.realis-tag { position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border-radius: var(--radius-pill); color:#fff; }
.realis-tag.b { background: rgba(13,28,77,.74); }
.realis-tag.a { background: rgba(225,29,51,.85); }
.realis-meta { padding: 18px 20px 20px; }
.realis-meta h3 { margin:0 0 4px; font-size:16px; font-weight:800; }
.realis-meta .rm-sub { font-size:13px; color:rgba(13,28,77,.6); font-weight:600; }
.realis-meta .rm-gain { display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-size:12.5px; font-weight:800; color:var(--v-red); background:rgba(225,29,51,.08); padding:6px 12px; border-radius: var(--radius-pill); }
.realis-meta .rm-gain svg { width:14px; height:14px; }

/* ---------- Featured video testimonial ---------- */
.vtesti { display:grid; grid-template-columns: 1.05fr .95fr; background:#fff; border:1px solid var(--v-line); border-radius: var(--radius-card); overflow:hidden; box-shadow: var(--shadow-card); }
.vtesti-media { position:relative; min-height: 340px; background-size: cover; background-position: center; cursor: pointer; }
.vtesti-media .ph.navy { position:absolute; inset:0; }
.vtesti-media::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,28,77,.1), rgba(13,28,77,.45)); z-index:1; }
.vtesti-play { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#fff; font-weight:800; font-size:14px; cursor:pointer; z-index:3; }
.vtesti-play .pc { width:78px; height:78px; border-radius:999px; background:var(--v-red); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(225,29,51,.45); transition:transform .2s var(--ease); }
.vtesti-play:hover .pc { transform: scale(1.08); }
.vtesti-play .pc svg { margin-left: 4px; }
.vtesti-media iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; }
.vtesti-media.playing::after { display:none; }
.vtesti-media.playing .vtesti-play { display:none; }
.vtesti-body { padding: 44px; display:flex; flex-direction:column; justify-content:center; }
.vtesti-body .vt-quote-ico { color: var(--v-pink); margin-bottom: 14px; }
.vtesti-body blockquote { margin:0 0 24px; font-size:23px; line-height:1.42; font-weight:700; letter-spacing:-.015em; color:var(--v-blue-ink); }
.vtesti-body .vt-author { display:flex; align-items:center; gap:13px; }
.vtesti-body .vt-av { width:48px; height:48px; border-radius:999px; background:var(--v-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex:0 0 48px; }
.vtesti-body .vt-name { font-weight:800; font-size:16px; }
.vtesti-body .vt-sub { font-size:13px; color:rgba(13,28,77,.6); font-weight:600; }

/* ---------- SEO prose ---------- */
.seo-content { max-width: 880px; }
.seo-content h2 { font-size: 20px; font-weight: 800; margin: 0 0 18px; }
.seo-content h3 { font-size: 20px; font-weight: 800; margin: 30px 0 10px; color: var(--v-blue-ink); }
.seo-content p { font-size: 16px; line-height: 1.72; color: rgba(13,28,77,.78); margin: 0 0 14px; }
.seo-content p strong { color: var(--v-blue-ink); font-weight: 700; }
.seo-content ul { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.seo-content li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 16px; line-height: 1.6; color: rgba(13,28,77,.78); }
.seo-content li::before { content:''; position:absolute; left:0; top:7px; width:16px; height:16px; border-radius:50%; background: rgba(34,160,107,.14); }
.seo-content li::after { content:''; position:absolute; left:5px; top:11px; width:6px; height:3px; border-left:2px solid #1f9d63; border-bottom:2px solid #1f9d63; transform: rotate(-45deg); }

/* ---------- Press band ("ils parlent de nous") ---------- */
.press { padding: 28px 0; background:#fff; border-top:1px solid var(--v-line); border-bottom:1px solid var(--v-line); }
.press-title { text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(13,28,77,.42); margin-bottom:20px; }
.press-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 30px; }
.press-logo { font-weight:800; font-size:17px; color:#9aa3b5; letter-spacing:.03em; line-height:1; display:inline-flex; align-items:center; }
.press-logo.boxed { background:#9aa3b5; color:#fff; padding:6px 9px; border-radius:4px; font-size:14px; }
.press-logo.serif { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:20px; letter-spacing:0; color:#9aa3b5; }

/* ---------- Réassurance bar (RGE logo + notes) ---------- */
.reassure { padding: 24px 0; background: var(--v-light); }
.reassure-in { display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; }
.reassure-rge { display:flex; align-items:center; gap:14px; }
.reassure-rge img { height:56px; width:auto; display:block; }
.reassure-rge.noimg .reassure-rge-shield { display:flex; }
.reassure-rge-shield { display:none; width:50px; height:50px; border-radius:12px; background:rgba(28,58,143,.08); color:var(--v-blue); align-items:center; justify-content:center; }
.reassure-rge-txt b { display:block; font-size:15px; font-weight:800; color:var(--v-blue-ink); }
.reassure-rge-txt span { font-size:13px; color:rgba(13,28,77,.6); font-weight:600; }
.reassure-sep { width:1px; height:48px; background:var(--v-line); }
.reassure-rating { display:flex; align-items:center; gap:12px; }
.reassure-rating .rr-num { font-size:32px; font-weight:800; letter-spacing:-.02em; color:var(--v-blue-ink); line-height:1; }
.reassure-rating .rr-num span { font-size:15px; color:rgba(13,28,77,.42); }
.reassure-rating .rr-meta { display:flex; flex-direction:column; gap:3px; }
.reassure-rating .rr-meta .stars { font-size:14px; }
.reassure-rating .rr-src { font-size:12.5px; color:rgba(13,28,77,.6); font-weight:600; }
.reassure-rating .rr-src b { color:var(--v-blue-ink); font-weight:800; }
.reassure-points { display:flex; flex-direction:column; gap:9px; }
.reassure-points .rp { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--v-blue-ink); }
.reassure-points .rp svg { width:18px; height:18px; color:#1f9d63; flex:0 0 18px; }
@media (max-width: 920px){ .reassure-sep { display:none; } .reassure-in { gap:24px; } }

/* ---------- Refined RDV link (form alt) ---------- */
.form-alt { text-align:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--v-line); font-size:13.5px; color:rgba(13,28,77,.62); font-weight:600; }
.form-alt a { display:inline-flex; align-items:center; gap:6px; color:var(--v-blue); font-weight:800; text-decoration:none; }
.form-alt a svg { width:15px; height:15px; transition:transform .15s var(--ease); }
.form-alt a:hover { color:var(--v-blue-deep); }
.form-alt a:hover svg { transform:translateX(3px); }

/* ---------- Sticky mobile CTA ---------- */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background:#fff; border-top: 1px solid var(--v-line); padding: 12px 16px; display: none; gap: 10px; box-shadow: 0 -6px 24px rgba(13,28,77,.1); }
.mcta .btn { flex: 1; }

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  [data-reveal].in { opacity: 1; transform: none; }
  [data-reveal][data-d="1"] { transition-delay: .08s; }
  [data-reveal][data-d="2"] { transition-delay: .16s; }
  [data-reveal][data-d="3"] { transition-delay: .24s; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { font-size: 44px; }
  .benefits, .reviews-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .ba-grid, .price-grid, .explain { grid-template-columns: 1fr; }
  .realis-grid { grid-template-columns: 1fr 1fr; }
  .vtesti { grid-template-columns: 1fr; }
  .vtesti-media { min-height: 240px; }
  .vtesti-body { padding: 30px; }
  .vtesti-body blockquote { font-size: 20px; }
  .ft-top { grid-template-columns: 1fr 1fr; }
  .sec h2 { font-size: 34px; }
  .cta-band { padding: 40px 30px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .hdr-in { padding: 12px 20px; }
  .hero { padding: 36px 0 50px; }
  .hero h1 { font-size: 34px; }
  .sec { padding: 60px 0; }
  .benefits, .reviews-grid, .steps, .ft-top { grid-template-columns: 1fr; }
  .realis-grid { grid-template-columns: 1fr; }
  .seo-content h2 { font-size: 20px; }
  .fieldrow.two { grid-template-columns: 1fr; }
  .form-body { padding: 22px 18px 22px; }
  .stepper { margin: 0 0 22px; }
  .stp-lbl { font-size: 11px; }
  .stp-dot { width: 32px; height: 32px; font-size: 14px; }
  .stepper-line { top: 15px; }
  .fs-title { font-size: 19px; }
  .form-nav .btn-lg { padding: 15px 18px; font-size: 16px; }
  .form-card { border-radius: 20px; }
  .seg { grid-auto-flow: row; }
  .cta-band .cta-in { flex-direction: column; align-items: flex-start; }
  .mcta { display: flex; }
  body { padding-bottom: 70px; }
}

/* Press logos (images) */
.press-logo-img { height: 28px; max-width: 110px; object-fit: contain; opacity: .55; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; vertical-align: middle; }
.press-logo-img:hover { transform: scale(1.06); }
.press-row { display:flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { .press-logo-img { height: 22px; max-width: 80px; } .press-row { gap: 14px; } }



/* ===== Realisations : carte unique mise en avant ===== */
/* Quand on n'a qu'une carte visible, on la centre et on l'élargit. */
.realis-grid:has(.realis-card--featured) { display: flex; justify-content: center; }
.realis-card.realis-card--featured { max-width: 760px; width: 100%; }
.realis-card.realis-card--featured .realis-imgs { grid-template-columns: 1fr 1fr; gap: 8px; }
.realis-card.realis-card--featured .realis-img { aspect-ratio: 4/3; }
@media (max-width: 640px) {
  .realis-card.realis-card--featured .realis-imgs { grid-template-columns: 1fr 1fr; }
  .realis-card.realis-card--featured .realis-img { aspect-ratio: 1/1; }
}

/* ===== Press logos : carrousel infini ===== */
.press-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.press-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  animation: press-marquee 35s linear infinite;
  will-change: transform;
}
.press-marquee-track:hover { animation-play-state: paused; }
@keyframes press-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .press-marquee-track { animation: none; }
  .press-marquee { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 640px) {
  .press-marquee-track { gap: 36px; animation-duration: 25s; }
}



/* Drag handle (the vertical bar with arrows) */
.ba-handle {
  position: absolute;
  top: 0;
  left: 50%;       /* will be overridden by JS */
  transform: translateX(-50%);
  height: 100%;
  width: 3px;
  background: #fff;
  z-index: 3;
  cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.ba-handle::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(13,28,77,0.35);
}
.ba-handle svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  color: var(--v-blue-ink);
  z-index: 1;
  pointer-events: none;
}
.ba-handle:focus { outline: none; }
.ba-handle:focus::before { box-shadow: 0 8px 24px rgba(13,28,77,0.35), 0 0 0 4px rgba(225,29,51,0.25); }
.ba.dragging, .ba.dragging .ba-handle { cursor: grabbing; }

/* Tags Avant / Après - rester bien visibles */
.ba-tag { z-index: 4; }

/* Realisation cards (gardé du précédent) */
.realis-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.realis-img { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 18px; }
.realis-img img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============ BEFORE/AFTER SLIDER (clip-path, plus solid drag) ============ */
.ba {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 16/10;
  cursor: ew-resize;
  user-select: none;
  background: #0d1c4d;
  box-shadow: 0 24px 70px rgba(13,28,77,0.15);
}
.ba-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ba-layer.ba-after  { z-index: 1; }
.ba-layer.ba-before { z-index: 2; clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); transition: clip-path 0s; }
.ba.dragging .ba-layer.ba-before { transition: none; }
.ba-layer img.ba-img,
.ba-layer .ba-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, #fff 50%, rgba(255,255,255,0.8) 100%);
  z-index: 5;
  cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 2px 12px rgba(0,0,0,0.18);
}
.ba-handle::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 28px rgba(13,28,77,0.40), 0 0 0 1px rgba(13,28,77,0.06);
}
.ba-handle svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  color: var(--v-blue-ink);
  z-index: 1;
  pointer-events: none;
}
.ba-handle:focus { outline: none; }
.ba-handle:focus::before { box-shadow: 0 8px 28px rgba(13,28,77,0.40), 0 0 0 4px rgba(225,29,51,0.35); }
.ba.dragging, .ba.dragging .ba-handle { cursor: grabbing; }
.ba-tag { z-index: 4; }

/* Realisations */
.realis-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.realis-img { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 18px; box-shadow: 0 8px 24px rgba(13,28,77,0.10); }
.realis-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.realis-card:hover .realis-img img { transform: scale(1.03); }

/* Press logos (images) — un peu plus présents qu'avant */
.press-logo-img { height: 32px; max-width: 130px; object-fit: contain; opacity: 1; filter: none; transition: transform .25s ease, opacity .25s ease; }
.press-logo-img:hover { transform: scale(1.06); }
@media (max-width: 640px) { .press-logo-img { height: 24px; max-width: 90px; } }

/* Marquee track */
.press-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.press-marquee-track { display: inline-flex; align-items: center; gap: 70px; white-space: nowrap; animation: press-marquee 35s linear infinite; will-change: transform; }
.press-marquee-track:hover { animation-play-state: paused; }
@keyframes press-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .press-marquee-track { animation: none; } }
@media (max-width: 640px) { .press-marquee-track { gap: 40px; animation-duration: 25s; } }

/* Realisations featured */
.realis-grid:has(.realis-card--featured) { display: flex; justify-content: center; }
.realis-card.realis-card--featured { max-width: 780px; width: 100%; }
.realis-card.realis-card--featured .realis-imgs { grid-template-columns: 1fr 1fr; gap: 8px; }
.realis-card.realis-card--featured .realis-img { aspect-ratio: 4/3; }

/* Form card lift — plus de profondeur sur l'élément le plus important */
.form-card { box-shadow: 0 32px 80px rgba(13,28,77,0.20), 0 6px 16px rgba(13,28,77,0.06) !important; }

/* Benefits — plus marqués */
.benefit { background: #fff; border-radius: 24px; padding: 36px 32px; box-shadow: 0 18px 50px rgba(13,28,77,0.08), 0 1px 0 rgba(13,28,77,0.04); border: 1px solid var(--v-line); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.benefit:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(13,28,77,0.14); }


/* ============ Section Réalisations : plus grande + cards différenciées ============ */
/* Section padding plus généreux */
.sec:has(> .wrap > .realis-grid) { padding: 110px 0; }
@media (max-width: 1000px) { .sec:has(> .wrap > .realis-grid) { padding: 80px 0; } }

/* Grid : cards plus larges sur desktop */
.realis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1000px) { .realis-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .realis-grid { grid-template-columns: 1fr; gap: 20px; } }

/* Cards plus grandes + plus de respiration */
.realis-card { background: #fff; border-radius: 24px; padding: 18px 18px 26px; box-shadow: 0 24px 60px rgba(13,28,77,0.12); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.realis-card:hover { transform: translateY(-6px); box-shadow: 0 36px 80px rgba(13,28,77,0.18); }

/* Images plus hautes (passe de 4/3 à 3/2.5) → cards plus "présentes" */
.realis-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.realis-img { position: relative; aspect-ratio: 5/4; overflow: hidden; border-radius: 16px; }
.realis-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.realis-card:hover .realis-img img { transform: scale(1.04); }

/* Différenciation visuelle des cards via CSS filters + crop offset */
/* Card 1 : original */
.realis-card:nth-of-type(1) .realis-img img { object-position: center; }

/* Card 2 : aspect plus zoomé + légère saturation */
.realis-card:nth-of-type(2) .realis-img img { object-position: 30% center; filter: saturate(1.1) brightness(1.05); transform: scale(1.06); }
.realis-card:nth-of-type(2):hover .realis-img img { transform: scale(1.1); }

/* Card 3 : ton plus chaud + zoom différent */
.realis-card:nth-of-type(3) .realis-img img { object-position: 65% 30%; filter: saturate(0.92) hue-rotate(-8deg) brightness(0.98); transform: scale(1.04); }
.realis-card:nth-of-type(3):hover .realis-img img { transform: scale(1.08); }

/* Realis-meta : plus de souffle */
.realis-meta { padding: 18px 8px 0; }
.realis-meta h3 { font-size: 20px; }


/* ============ CP Autocomplete dropdown ============ */
.cp-suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1.5px solid var(--v-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(13,28,77,0.16); z-index: 30; overflow: hidden; max-height: 280px; overflow-y: auto; }
.field { position: relative; }
.cp-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--v-blue-ink); border-bottom: 1px solid #f3f4f8; }
.cp-item:hover { background: rgba(28,58,143,0.06); }
.cp-item:last-child { border-bottom: 0; }
.cp-code { font-weight: 800; font-family: 'Roboto Mono', monospace; font-size: 13px; color: var(--v-red); }
.cp-city { font-weight: 600; color: var(--v-blue-ink); }

/* ============ Réalisations : section vraiment plus grande ============ */
.sec:has(.realis-grid) { padding: 120px 0 !important; }
@media (max-width: 1000px) { .sec:has(.realis-grid) { padding: 80px 0 !important; } }

.realis-grid { gap: 32px !important; }
.realis-card { padding: 20px 20px 28px !important; }
.realis-imgs { gap: 10px !important; }
.realis-img { aspect-ratio: 4/3 !important; border-radius: 14px !important; }
.realis-meta { padding: 22px 8px 0 !important; }
.realis-meta h3 { font-size: 22px !important; }
.sec-head h2 { font-size: 46px !important; }
@media (max-width: 1000px) { .sec-head h2 { font-size: 36px !important; } }

/* Reset filtres et transforms des cards (photos différentes maintenant, plus besoin de tricher) */
.realis-card:nth-of-type(2) .realis-img img { filter: none !important; transform: none !important; object-position: center !important; }
.realis-card:nth-of-type(3) .realis-img img { filter: none !important; transform: none !important; object-position: center !important; }


/* =========================================================
   REALISATIONS : cards bien plus grandes + élégantes
   2 cards par ligne en desktop (plus de respiration),
   sur mobile 1 par ligne.
   ========================================================= */
.sec:has(.realis-grid) { padding: 130px 0 !important; }
@media (max-width: 1000px) { .sec:has(.realis-grid) { padding: 80px 0 !important; } }
@media (max-width: 640px)  { .sec:has(.realis-grid) { padding: 60px 0 !important; } }

.realis-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(330px, 1fr)) !important;
  gap: 36px !important;
}
@media (max-width: 1100px) { .realis-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 700px)  { .realis-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }

.realis-card {
  padding: 22px 22px 30px !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 30px 70px rgba(13,28,77,0.13), 0 2px 6px rgba(13,28,77,0.04) !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease) !important;
}
.realis-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 44px 90px rgba(13,28,77,0.18), 0 4px 10px rgba(13,28,77,0.05) !important;
}

.realis-imgs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}
.realis-img {
  position: relative !important;
  aspect-ratio: 3/4 !important;       /* portrait → cards beaucoup plus longues */
  overflow: hidden !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(13,28,77,0.10) !important;
}
.realis-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .6s var(--ease) !important;
}
.realis-card:hover .realis-img img { transform: scale(1.05) !important; }

.realis-meta { padding: 22px 8px 0 !important; }
.realis-meta h3 { font-size: 22px !important; margin: 0 0 6px !important; font-weight: 800 !important; }
.realis-meta .rm-sub { font-size: 14px !important; color: #5c6479 !important; margin-bottom: 16px !important; }

.sec-head h2 { font-size: 46px !important; line-height: 1.05 !important; }
@media (max-width: 1000px) { .sec-head h2 { font-size: 36px !important; } }
@media (max-width: 640px)  { .sec-head h2 { font-size: 28px !important; } }

/* Reset des filtres de la version précédente */
.realis-card .realis-img img { filter: none !important; }

/* =========================================================
   STEPS section : effet scroll + cards plus stylées
   ========================================================= */
.steps {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 24px !important;
  counter-reset: stp !important;
}
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px)  { .steps { grid-template-columns: 1fr !important; } }

.step {
  background: #fff !important;
  border-radius: 22px !important;
  padding: 32px 28px !important;
  box-shadow: 0 16px 40px rgba(13,28,77,0.08), inset 0 0 0 1px var(--v-line) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease) !important;
}
.step::before {
  /* gradient bar du haut → met de la couleur */
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 4px !important;
  background: linear-gradient(90deg, var(--v-blue) 0%, var(--v-red) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .6s var(--ease) !important;
}
.step.is-visible::before { transform: scaleX(1) !important; }
.step:hover {
  /* cartes "5 étapes" non interactives : pas d'effet de soulèvement (ne doivent pas paraître cliquables) */
  transform: none !important;
  box-shadow: 0 16px 40px rgba(13,28,77,0.08), inset 0 0 0 1px var(--v-line) !important;
}
.step .stp-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--v-blue) 0%, var(--v-blue-deep) 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 8px 20px rgba(28,58,143,0.30) !important;
}
.step h3 { font-size: 19px !important; font-weight: 800 !important; margin: 0 0 10px !important; color: var(--v-blue-ink) !important; }
.step p { font-size: 14px !important; color: #5c6479 !important; line-height: 1.55 !important; margin: 0 0 14px !important; }
.step .stp-time {
  display: inline-block !important;
  background: rgba(225,29,51,0.10) !important;
  color: var(--v-red) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

/* =========================================================
   MOBILE polish
   ========================================================= */
@media (max-width: 640px) {
  .hero h1 { font-size: 34px !important; line-height: 1.05 !important; }
  .form-card { border-radius: 22px !important; }
  .form-body { padding: 22px 18px !important; }
  .reassure-in { gap: 18px !important; flex-direction: column !important; }
  .reassure-sep { display: none !important; }
  .benefit { padding: 28px 22px !important; }
  .b-big { font-size: 38px !important; }
  .step { padding: 26px 22px !important; }
  .ba { aspect-ratio: 4/3 !important; }
}


/* 2 cards visibles (la 3e est cachée) — utiliser un flex centré pour bien les présenter */
.realis-grid:has(.realis-card[style*="display:none"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 36px !important;
}
.realis-grid:has(.realis-card[style*="display:none"]) > .realis-card:not([style*="display:none"]) {
  flex: 0 1 480px !important;
  max-width: 520px !important;
}
@media (max-width: 1000px) {
  .realis-grid:has(.realis-card[style*="display:none"]) > .realis-card:not([style*="display:none"]) {
    flex: 0 1 100% !important;
    max-width: 480px !important;
  }
}

/* === FIX v11.1 : photos landscape, cards plus larges === */
.realis-img { aspect-ratio: 4/3 !important; }

/* 2 cards centered → chacune VRAIMENT plus large */
.realis-grid:has(.realis-card[style*="display:none"]) > .realis-card:not([style*="display:none"]) {
  flex: 0 1 600px !important;
  max-width: 640px !important;
}
@media (max-width: 1100px) {
  .realis-grid:has(.realis-card[style*="display:none"]) > .realis-card:not([style*="display:none"]) {
    flex: 1 1 100% !important;
    max-width: 560px !important;
  }
}

/* Photos en landscape : object-position centered, transitions douces */
.realis-img img {
  object-fit: cover !important;
  object-position: center 60% !important; /* favorise le bas si la maison est en partie basse */
}

/* === FIX v13.1 : cards LONG + IMAGES BIG (stacked vertical layout) === */
/* Annule le flex centré, retour au grid */
.realis-grid:has(.realis-card[style*="display:none"]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  justify-content: stretch !important;
  gap: 40px !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}
.realis-grid:has(.realis-card[style*="display:none"]) > .realis-card:not([style*="display:none"]) {
  flex: none !important;
  max-width: none !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  .realis-grid:has(.realis-card[style*="display:none"]) {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
  }
}

/* Photos EMPILÉES VERTICALEMENT dans chaque card (avant en haut, après en bas) */
.realis-imgs {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 14px !important;
}
.realis-img {
  aspect-ratio: 16/10 !important;  /* photos panoramiques, mises en valeur */
  border-radius: 18px !important;
}

/* Plus de padding pour que la card respire bien */
.realis-card {
  padding: 26px 26px 32px !important;
}
.realis-meta {
  padding: 26px 4px 0 !important;
}
.realis-meta h3 { font-size: 24px !important; }

/* Mobile : tout reste vertical, max-width réduit */
@media (max-width: 640px) {
  .realis-card { padding: 20px 20px 26px !important; }
  .realis-img { aspect-ratio: 4/3 !important; }
  .realis-meta h3 { font-size: 20px !important; }
}



/* Override: la wrapper section qui contenait l'ancien CTA navy doit pas avoir de fond */
section:has(.cta-card) { background: transparent !important; padding: 60px 0 !important; }

/* Responsive : passe en stack vertical */
@media (max-width: 900px) {
  .cta-card { grid-template-columns: 1fr; border-radius: 24px; }
  .cta-card-media { min-height: 260px; }
  .cta-card-body { padding: 36px 28px; }
  .cta-card-body h2 { font-size: 30px; }
}
@media (max-width: 640px) {
  .cta-card-body { padding: 28px 22px; }
  .cta-card-body h2 { font-size: 26px; }
  .cta-card-body > p { font-size: 15px; }
  .cta-card-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* === MOBILE FIX v16 : header propre + barre du bas supprimée === */
@media (max-width: 740px) {
  /* Bar du bas (Appeler + Devis gratuit) → off : Devis est déjà dans le header */
  .mcta { display: none !important; }
  /* Pas de padding-bottom hack si le bottom bar n'est plus là */
  body { padding-bottom: 0 !important; }

  /* Header compact */
  .hdr-in {
    padding: 12px 14px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .hdr-logo img { height: 32px !important; width: auto !important; }

  /* Phone : afficher juste l'icône + le numéro EN LIGNE, sans le sous-titre */
  .hdr-phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--v-blue-ink) !important;
    flex-shrink: 0 !important;
  }
  .hdr-phone svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
  .hdr-phone span { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; line-height: 1 !important; }
  .hdr-phone small { display: none !important; }

  /* Bouton Devis : compact */
  .hdr-right .btn {
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  .hdr-right { gap: 10px !important; align-items: center !important; }
}

/* Sur les très petits écrans (<360px), cacher carrément le "39 99" et garder l'icone phone seule */
@media (max-width: 360px) {
  .hdr-phone span { display: none !important; }
}


/* ============ NEW CTA HERO (full-bleed photo + navy overlay, centered content) ============ */
.cta-hero {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  border-radius: 0;
}
.cta-hero-bg {
  position: absolute;
  inset: 0;
  background: #0d1c4d url('/assets/img/ite-morrin-apres.png') center/cover no-repeat;
  z-index: 1;
}
.cta-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,28,77,0.78) 0%, rgba(13,28,77,0.85) 50%, rgba(13,28,77,0.78) 100%);
  z-index: 2;
}
.cta-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 90px 24px 110px;
  color: #fff;
  max-width: 960px;
}
.cta-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 28px;
}
.cta-hero-pill svg { width: 16px; height: 16px; color: var(--v-red); }

.cta-hero-content h2 {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 22px;
}
.cta-hero-content h2 em {
  color: #fff;
  font-style: normal;
  position: relative;
}
.cta-hero-lead {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 760px;
  margin: 0 auto 36px;
}

.cta-hero-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 40px;
}
.cta-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.10);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cta-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cta-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 40px rgba(225,29,51,0.45), 0 0 0 1px rgba(225,29,51,0.3) !important;
}
.cta-btn-main svg { width: 18px; height: 18px; }

.btn-ghost-light {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  padding: 16px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: none !important;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.18) !important; }

.cta-hero-microcopy {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Section wrap autour de .cta-hero : pas de padding/bg interférant */
section:has(.cta-hero) { padding: 0 !important; background: transparent !important; }
section:has(.cta-hero) > .wrap { max-width: 100% !important; padding: 0 !important; }

/* Mobile */
@media (max-width: 900px) {
  .cta-hero-content h2 { font-size: 40px; }
  .cta-hero-content { padding: 70px 22px 80px; }
}
@media (max-width: 640px) {
  .cta-hero { min-height: 480px; }
  .cta-hero-content h2 { font-size: 30px; }
  .cta-hero-lead { font-size: 15px; }
  .cta-badge { font-size: 13px; padding: 9px 16px; }
  .cta-hero-actions { flex-direction: column; align-items: stretch; }
  .cta-hero-actions .btn { width: 100%; justify-content: center; }
  .cta-hero-content { padding: 50px 18px 60px; }
}



/* ============ Consent checkbox (v20 robust) ============ */
.consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  background: #fafbfd !important;
  border: 1.5px solid var(--v-line) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  margin: 16px 0 8px !important;
  transition: border-color .15s, background .15s !important;
  position: relative !important;
}
.consent:hover { border-color: rgba(28,58,143,0.35) !important; background: #f5f7fb !important; }

/* Native checkbox custom-styled (PAS de hack absolute, on garde le natif visible) */
.consent input[type="checkbox"] {
  position: relative !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  border: 2px solid #c0c4cf !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all .18s var(--ease) !important;
  display: inline-block !important;
}
.consent input[type="checkbox"]:hover { border-color: var(--v-red) !important; }
.consent input[type="checkbox"]:checked {
  background: var(--v-red) !important;
  border-color: var(--v-red) !important;
  box-shadow: 0 0 0 4px rgba(225,29,51,0.15) !important;
}
.consent input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 7px !important;
  top: 2px !important;
  width: 6px !important;
  height: 12px !important;
  border: solid #fff !important;
  border-width: 0 2.5px 2.5px 0 !important;
  transform: rotate(45deg) !important;
}
.consent input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(28,58,143,0.30) !important;
}

/* Cacher la fausse consent-mark si elle est dans le DOM (anti-doublon) */
.consent-mark { display: none !important; }

.consent-txt {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #475063 !important;
  font-weight: 500 !important;
}
.consent-txt sup { color: var(--v-red); margin-left: 1px; }

.consent-err {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 4px !important;
  padding: 10px 14px !important;
  background: rgba(225,29,51,0.10) !important;
  border-left: 3px solid var(--v-red) !important;
  border-radius: 8px !important;
  color: var(--v-red) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}



/* === KILL Jarvis cookie banner (jc-* classes + data attr) === */
[data-jarvis-consent],
.jc-root, .jc-banner, .jc-overlay, .jc-panel,
.jc-pad, .jc-title, .jc-body, .jc-actions, .jc-btn,
.jc-pos-bottom, .jc-pos-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Inline-styled consent : juste le :checked pseudo */
.consent input[type="checkbox"]:checked {
  background: #e11d33 !important;
  border-color: #e11d33 !important;
  box-shadow: 0 0 0 4px rgba(225,29,51,0.15) !important;
}
.consent input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  top: 2px !important;
  width: 6px !important;
  height: 12px !important;
  border: solid #fff !important;
  border-width: 0 2.5px 2.5px 0 !important;
  transform: rotate(45deg) !important;
}
.consent input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(28,58,143,0.30) !important;
}


/* === Hide Jarvis cookie banner — PRECISE selectors only (no false positives) === */
[data-jarvis-consent],
.jc-root, .jc-banner, .jc-overlay, .jc-panel,
.jc-pad, .jc-title, .jc-body, .jc-actions,
.jc-btn, .jc-pos-bottom, .jc-pos-top, .jc-logo,
.jc-cat, .jc-cat-txt, .jc-switch, .jc-track,
.jc-panel-actions, .jc-dark {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === Mobile fix v25 : pcards stack proprement === */
@media (max-width: 640px) {
  .pcard {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 18px !important;
    gap: 10px !important;
  }
  .pcard .pc-amt {
    text-align: left !important;
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px dashed var(--v-line) !important;
  }
  .pcard .pc-amt b {
    font-size: 19px !important;
    white-space: nowrap !important;
  }
  .pcard .pc-surf {
    font-size: 16px !important;
  }
  .pcard .pc-surf span {
    font-size: 12px !important;
  }
}

/* ============ Jessie mods : hero trust badges + ba-stat--text + mobile form up ============ */

/* Trust badges dans le hero (remplacent les chips Google/Trustpilot) */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.hero-badge svg {
  width: 16px;
  height: 16px;
  color: var(--v-pink, #ffd0d8);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .hero-badges { gap: 8px; margin-top: 18px; }
  .hero-badge { font-size: 12.5px; padding: 7px 13px; }
  .hero-badge svg { width: 14px; height: 14px; }
}

/* BA-stat avec texte long (Façade sublimée) */
.ba-stat.ba-stat--text .v {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--v-blue-ink, #0d1c4d);
  white-space: normal !important;
}
.ba-stat.ba-stat--text .l {
  font-size: 13px !important;
  line-height: 1.45;
}

/* ============ MOBILE : remonter le formulaire dans le hero ============ */
@media (max-width: 1000px) {
  .hero-grid {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 30px !important;
  }
  .hero-grid > .hero-copy {
    order: 2;
  }
  .hero-grid > .form-card {
    order: 1;
  }
}

@media (max-width: 640px) {
  /* Réduire les marges du hero pour voir le form plus tôt */
  .hero.hero-photo {
    padding: 40px 0 30px !important;
  }
  .hero-copy h1 {
    font-size: 28px !important;
    margin-bottom: 14px !important;
  }
  .hero-copy .hero-lead {
    font-size: 14.5px !important;
    margin-bottom: 16px !important;
  }
  .hero-points {
    margin-bottom: 14px !important;
  }
  .hero-points li {
    font-size: 13.5px !important;
  }
  .hero-badges {
    margin-top: 14px !important;
  }
}

/* ============ Bouton Calendly dans le form-success ============ */
.btn-calendly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 26px;
  background: var(--v-blue-ink, #0d1c4d);
  color: #fff !important;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(13,28,77,0.30);
  transition: transform .15s var(--ease), background .18s var(--ease), box-shadow .2s var(--ease);
}
.btn-calendly:hover {
  background: #0a1640;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(13,28,77,0.40);
}
.btn-calendly svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 640px) {
  .btn-calendly { padding: 12px 22px; font-size: 14px; }
}

/* form-success texte plus aéré */
.form-success p { line-height: 1.55; }
.form-success p strong { color: var(--v-blue-ink, #0d1c4d); }


/* Consent error : visible uniquement quand JS retire l'attribut hidden */
.consent-err:not([hidden]) { display: flex !important; }
.consent-err[hidden] { display: none !important; }

/* ============ Mobile alignment polish : badges + reassure section ============ */
@media (max-width: 760px) {

  

  /* ─── Section réassurance : stack vertical centré ─── */
  .reassure {
    padding: 28px 18px !important;
    background: var(--v-light);
  }
  .reassure-in {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
  }

  /* RGE Qualibat : centré, logo plus petit, texte centré */
  .reassure-rge {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 0 20px !important;
  }
  .reassure-rge img {
    height: 44px !important;
  }
  .reassure-rge-txt {
    text-align: center !important;
  }
  .reassure-rge-txt b {
    font-size: 15px !important;
    margin-bottom: 2px;
  }
  .reassure-rge-txt span {
    font-size: 12.5px !important;
  }

  /* Séparateur horizontal entre groupes */
  .reassure-rge {
    border-bottom: 1px solid var(--v-line);
  }
  .reassure-points {
    border-top: 1px solid var(--v-line);
    padding-top: 18px;
    margin-top: 18px;
  }

  /* Ratings : 2 côte à côte avec spacing serré, centrés */
  .reassure-rating {
    justify-content: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
  }
  .reassure-rating + .reassure-rating {
    padding-top: 4px !important;
    padding-bottom: 14px !important;
  }
  .reassure-rating .rr-num {
    font-size: 28px !important;
  }
  .reassure-rating .rr-num span {
    font-size: 13px !important;
  }
  .reassure-rating .rr-meta {
    align-items: flex-start;
  }
  .reassure-rating .rr-src {
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Points : centrés */
  .reassure-points {
    align-items: center !important;
    gap: 8px !important;
  }
  .reassure-points .rp {
    font-size: 13.5px !important;
    justify-content: center;
    text-align: center;
  }

  /* Cacher les séparateurs verticaux qu'on a maintenant les borders */
  .reassure-sep { display: none !important; }
}

/* ─── Très petits écrans : encore plus compact ─── */
@media (max-width: 380px) {
  .hero-badges--mobile .hero-badge {
    font-size: 11.5px !important;
    padding: 7px 12px !important;
  }
  .reassure-rating .rr-num {
    font-size: 26px !important;
  }
}

/* ============================================================
   FORM REDESIGN v35 : single-card simulator (mobile-first polish)
   ============================================================ */

/* Form-card wrapper : transparent shell (DISABLED — was for old qcard 2-button layout, now form-body holds the white card via .form-card { background:#fff } from line 148)
.form-card {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}
*/

/* The merged card itself */
.qcard.qcard--merged {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px 22px;
  box-shadow: 0 24px 60px rgba(13,28,77,0.15), 0 2px 8px rgba(13,28,77,0.06);
}

/* ─── Sections internes (slider et options) ─── */
.qcard-section { display: block; }
.qcard-section .qcard-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0d1c4d;
  line-height: 1.25;
}
.qcard-section .qcard-sub {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7690;
  font-weight: 500;
}

/* ─── Section slider ─── */
.slider-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, #f1f4fb 0%, #e7edf8 100%);
  border-radius: 14px;
  margin-bottom: 14px;
}
.slider-value {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0d1c4d;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.slider-unit {
  font-size: 32px;
  font-weight: 800;
  color: #0d1c4d;
  line-height: 1;
  margin-left: 4px;
}
.slider-per {
  font-size: 14px;
  font-weight: 700;
  color: rgba(13,28,77,0.55);
  margin-left: 4px;
}

/* Slider range input */
.slider-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, #2563eb 0%, #2563eb var(--slider-pct, 40.5%), #e2e8f0 var(--slider-pct, 40.5%), #e2e8f0 100%);
  outline: none;
  margin: 4px 0 0;
}
.slider-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e11d33;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.40), 0 0 0 1px rgba(37,99,235,0.20);
  cursor: pointer;
  transition: transform .12s ease;
}
.slider-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.slider-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e11d33;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.40);
  cursor: pointer;
}
.slider-bounds {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(13,28,77,0.48);
}

/* Primary CTA (red) */
.btn-cta-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  padding: 14px 22px;
  width: 100%;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  text-decoration: none !important;
  color: #fff;
  cursor: pointer;
  transition: transform .15s, background .18s, box-shadow .2s;
}
.btn-cta-v2--red {
  background: #e11d33;
  box-shadow: 0 14px 28px rgba(225,29,51,0.38);
}
.btn-cta-v2--red:hover {
  background: #c4172a;
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(225,29,51,0.48);
}
.btn-cta-v2 svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ─── Séparateur "OU" ─── */
.qcard-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
}
.qcard-or::before, .qcard-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e7eaf2;
}
.qcard-or span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(13,28,77,0.42);
}

/* ─── Section options (4 cards) ─── */
.opts-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* OPT-CARD : reset complet + style propre (override les défauts de <a>) */
.opts-grid .opt-card,
.qcard-section--options .opt-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 14px !important;
  background: #fafbfd !important;
  border: 1px solid #e7eaf2 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, transform .15s !important;
}
.opts-grid .opt-card:hover,
.qcard-section--options .opt-card:hover {
  background: #fff !important;
  border-color: #c7d3ee !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13,28,77,0.08);
}

.opt-ic {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(225,29,51,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e11d33;
}
.opt-ic svg { width: 20px; height: 20px; }

.opt-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opt-tx b {
  font-size: 14.5px;
  font-weight: 800;
  color: #0d1c4d;
  text-decoration: none !important;
}
.opt-tx span {
  font-size: 12.5px;
  color: #6b7690;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
}

.opt-arrow {
  flex-shrink: 0;
  color: rgba(13,28,77,0.35);
  display: flex;
  align-items: center;
  transition: transform .15s, color .15s;
}
.opt-arrow svg { width: 18px; height: 18px; }
.opt-card:hover .opt-arrow { color: #e11d33; transform: translateX(3px); }

/* ─── MOBILE polish ─── */
@media (max-width: 640px) {
  .qcard.qcard--merged { padding: 20px 16px; border-radius: 18px; }
  .qcard-section .qcard-title { font-size: 16.5px; }
  .qcard-section .qcard-sub { font-size: 12.5px; margin-bottom: 14px; }

  .slider-display { padding: 16px 12px 12px; margin-bottom: 12px; }
  .slider-value { font-size: 40px; }
  .slider-unit { font-size: 26px; }
  .slider-per { font-size: 13px; }
  .slider-bounds { font-size: 11px; }
  .btn-cta-v2 { padding: 13px 18px; font-size: 14.5px; }

  .qcard-or { margin: 18px 0 14px; gap: 10px; }
  .qcard-or span { font-size: 10.5px; letter-spacing: 0.15em; }

  .opts-grid .opt-card { padding: 11px 12px !important; gap: 11px !important; }
  .opt-ic { width: 36px; height: 36px; border-radius: 9px; }
  .opt-ic svg { width: 18px; height: 18px; }
  .opt-tx b { font-size: 14px; }
  .opt-tx span { font-size: 12px; line-height: 1.35; }
  .opt-arrow svg { width: 16px; height: 16px; }
}

@media (max-width: 380px) {
  .qcard.qcard--merged { padding: 18px 14px; }
  .slider-value { font-size: 36px; }
  .slider-unit { font-size: 22px; }
  .opt-tx b { font-size: 13.5px; }
  .opt-tx span { font-size: 11.5px; }
}


/* ============================================================
   v36 : Mobile badges CLEAN — single source of truth
   ============================================================ */

/* Desktop : show original badges in copy, hide mobile clone */
@media (min-width: 1001px) {
  .hero-badges--mobile { display: none !important; }
}

/* Mobile : show mobile clone, hide original in copy */
@media (max-width: 1000px) {
  .hero-copy > .hero-badges:not(.hero-badges--mobile) {
    display: none !important;
  }
  .hero-badges--mobile {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 360px !important;
    margin: 22px auto 0 !important;
    padding: 0 8px !important;
  }
  .hero-badges--mobile .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 16px !important;
    background: #ffffff !important;
    color: #0d1c4d !important;
    border: 1px solid rgba(13,28,77,0.08) !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(13,28,77,0.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-badges--mobile .hero-badge svg {
    width: 14px !important;
    height: 14px !important;
    color: #e11d33 !important;
    flex-shrink: 0;
  }
}

@media (max-width: 380px) {
  .hero-badges--mobile .hero-badge {
    font-size: 11.5px !important;
    padding: 8px 14px !important;
  }
}

/* ============================================================
   v36.1 : Mobile badges BRUTE-FORCE visible
   ============================================================ */
@media (max-width: 1000px) {
  .hero-badges--mobile {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 92% !important;
    max-width: 380px !important;
    margin: 22px auto 4px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    min-height: 40px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .hero-badges--mobile .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 16px !important;
    background: #ffffff !important;
    color: #0d1c4d !important;
    border: 1px solid rgba(13,28,77,0.10) !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    box-shadow: 0 4px 14px rgba(13,28,77,0.18) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .hero-badges--mobile .hero-badge svg {
    width: 14px !important;
    height: 14px !important;
    color: #e11d33 !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   v37 : Type logement (Maison / Appartement) — choice cards
   ============================================================ */
.log-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.log-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 18px 14px !important;
  background: #fafbfd !important;
  border: 1.5px solid #e7eaf2 !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, transform .15s !important;
}
.log-card:hover {
  background: #fff !important;
  border-color: #e11d33 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13,28,77,0.12);
}
.log-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(225,29,51,0.10);
  color: #e11d33;
  transition: background .15s, color .15s;
}
.log-icon svg { width: 24px; height: 24px; }
.log-card:hover .log-icon {
  background: #e11d33;
  color: #fff;
}
.log-label {
  font-size: 15px;
  font-weight: 800;
  color: #0d1c4d;
}

@media (max-width: 640px) {
  .log-card { padding: 16px 12px !important; }
  .log-icon { width: 40px; height: 40px; border-radius: 10px; }
  .log-icon svg { width: 20px; height: 20px; }
  .log-label { font-size: 14px; }
}

/* ============================================================
   v37.2 : Options en bleu (annule l'over-replace du v37.1)
   ============================================================ */
.opt-ic {
  background: rgba(37,99,235,0.10) !important;
  color: #2563eb !important;
}