:root {
  --ivory: #fbfaf7;
  --white: #fff;
  --navy: #0b2545;
  --navy-2: #102f55;
  --red: #dc2626;
  --red-dark: #b91c1c;
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --green: #059669;
  --radius: 16px;
  --shadow: 0 24px 60px -34px rgba(11, 37, 69, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--ivory);
  color: var(--slate-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.dark-page { background: var(--slate-950); color: var(--slate-100); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.font-display { font-family: 'Fraunces', Georgia, serif; }
.container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.container-sm { width: min(860px, calc(100% - 32px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; padding: 16px 0; transition: .3s ease; }
.site-header.light { background: linear-gradient(to bottom, rgba(251,250,247,.97), rgba(251,250,247,.68)); backdrop-filter: blur(10px); }
.site-header.dark { background: rgba(2,6,23,.92); border-bottom: 1px solid rgba(51,65,85,.55); backdrop-filter: blur(10px); }
.site-header.scrolled { padding: 11px 0; box-shadow: 0 12px 32px -22px rgba(11,37,69,.35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 5px 14px rgba(11,37,69,.12); }
.light .brand-mark { background: #fff; border: 1px solid var(--slate-200); }
.dark .brand-mark { background: var(--slate-800); border: 1px solid var(--slate-700); }
.brand-mark svg { width: 20px; height: 20px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-main { font-size: 14px; font-weight: 800; letter-spacing: .16em; }
.light .brand-main { color: var(--navy); }
.dark .brand-main { color: #fff; }
.brand-sub { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .28em; color: var(--red); }
.desktop-nav { display: flex; align-items: center; gap: 2px; }
.desktop-nav a { padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; transition: .2s; }
.light .desktop-nav a { color: var(--slate-600); }
.light .desktop-nav a:hover, .light .desktop-nav a.active { color: var(--red-dark); background: #fef2f2; }
.dark .desktop-nav a { color: var(--slate-300); }
.dark .desktop-nav a:hover, .dark .desktop-nav a.active { color: #fff; background: var(--slate-800); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-toggle { display: none; border: 0; background: transparent; padding: 8px; border-radius: 8px; }
.light .mobile-toggle { color: var(--navy); }
.dark .mobile-toggle { color: #fff; }
.mobile-toggle svg { width: 24px; height: 24px; }
.mobile-drawer { position: fixed; inset: 0; z-index: 70; display: none; }
.mobile-drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(11,37,69,.62); backdrop-filter: blur(5px); }
.drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(86%, 370px); padding: 78px 24px 24px; background: var(--ivory); box-shadow: -20px 0 60px rgba(11,37,69,.22); overflow: auto; }
.drawer-close { position: absolute; top: 20px; right: 20px; background: transparent; border: 0; color: var(--navy); }
.drawer-nav { display: grid; gap: 4px; margin-top: 24px; }
.drawer-nav a { padding: 12px 14px; border-radius: 9px; color: var(--slate-600); font-size: 14px; font-weight: 600; }
.drawer-nav a.active { background: #fef2f2; color: var(--red-dark); border-left: 4px solid var(--red); }
.drawer-cta { margin-top: 24px; display: grid; gap: 10px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 700; transition: .22s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 14px 30px -16px rgba(220,38,38,.75); }
.btn-red:hover { background: var(--red-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-white { background: #fff; color: var(--navy); border-color: var(--slate-300); }
.btn-dark { background: var(--slate-800); color: #fff; border-color: var(--slate-700); border-radius: 11px; }
.btn-wa { background: #047857; color: #fff; border-color: #10b981; }
.btn svg { width: 17px; height: 17px; }
.wa-glyph { display: inline-flex; flex-shrink: 0; width: 17px; height: 17px; }
.wa-glyph svg { width: 100%; height: 100%; }
.footer-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; }
.floating-wa .wa-glyph { width: 20px; height: 20px; }

/* Home */
.hero { position: relative; overflow: hidden; padding: 116px 0 66px; background: linear-gradient(to bottom, #f2f6fb, var(--ivory) 58%); }
.hero:before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#0b2545 .7px, transparent .7px); background-size: 26px 26px; opacity: .045; }
.hero-inner { position: relative; }
.journey-desktop { width: 100%; }
.journey-mobile { display: none; width: min(100%, 320px); margin: 40px auto 0; }
.hero-copy { max-width: 780px; margin: 20px auto 0; text-align: center; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--navy); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 800; }
.eyebrow:before, .eyebrow:after { content: ''; width: 26px; height: 1px; background: var(--red); }
.hero h1 { margin: 18px 0 0; color: var(--navy); font-family: 'Fraunces', Georgia, serif; font-size: clamp(42px, 6vw, 66px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
.hero h1 em { color: var(--red); font-weight: 600; }
.hero-sub { max-width: 620px; margin: 24px auto 0; color: var(--slate-600); font-size: 17px; }
.hero-actions { margin-top: 30px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.trust-row { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; color: var(--slate-500); font-size: 12px; }
.trust-row span { display: flex; align-items: center; gap: 6px; }
.trust-dot { width: 15px; height: 15px; color: var(--green); }
.journey-divider { height: 48px; overflow: hidden; background: var(--ivory); }
.journey-divider svg { width: 100%; height: 48px; }
.home-section { padding: 86px 0; }
.home-section.white { background: #fff; }
.home-section.soft { background: #f4f5f7; }
.section-intro { max-width: 690px; margin-bottom: 44px; }
.section-intro.center { text-align: center; margin-inline: auto; }
.section-intro h2, .editorial-quote, .cta-title { margin: 0; font-family: 'Fraunces', Georgia, serif; color: var(--navy); font-size: clamp(34px, 5vw, 50px); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; }
.section-intro p { margin: 13px 0 0; color: var(--slate-600); }
.journey-tick { display: block; width: 100px; margin-bottom: 14px; }
.section-intro.center .journey-tick { margin-inline: auto; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps:before { content: ''; position: absolute; top: 25px; left: 11%; right: 11%; border-top: 3px dashed #fecaca; }
.step { position: relative; text-align: center; }
.step-number { position: relative; z-index: 2; width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; background: #fff; border: 3px solid var(--red); border-radius: 50%; color: var(--red); font-family: 'Fraunces', serif; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(220,38,38,.5); }
.step h3 { margin: 17px 0 0; color: var(--navy); font-size: 17px; }
.step p { margin: 7px auto 0; max-width: 230px; color: var(--slate-600); font-size: 13px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { min-height: 278px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: #fff; transition: .25s; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.service-card.featured { color: #fff; background: var(--navy); border-color: var(--navy); }
.service-card.tint { background: #fff1f2; border-color: #fecdd3; }
.icon-box { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(11,37,69,.06); color: var(--navy); }
.icon-box svg { width: 26px; height: 26px; flex-shrink: 0; }
.featured .icon-box { background: rgba(255,255,255,.12); color: #f87171; }
.icon-box.c-blue { background: #dbeafe; color: #2563eb; }
.icon-box.c-amber { background: #fef3c7; color: #b45309; }
.icon-box.c-green { background: #dcfce7; color: #16a34a; }
.icon-box.c-teal { background: #ccfbf1; color: #0f766e; }
.icon-box.c-rose { background: #ffe4e6; color: #e11d48; }
.service-card h3 { margin: 18px 0 0; color: var(--navy); font-size: 17px; }
.featured h3 { color: #fff; }
.service-card p { margin: 8px 0 0; color: var(--slate-600); font-size: 13px; }
.featured p { color: var(--slate-300); }
.card-link { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--slate-100); color: var(--red-dark); font-size: 12px; font-weight: 800; }
.featured .card-link { color: #fff; border-color: rgba(255,255,255,.12); }
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
.editorial-quote em { color: var(--red); }
.editorial-list { display: grid; gap: 16px; margin-top: 30px; }
.editorial-list div { display: flex; gap: 12px; color: var(--slate-600); font-size: 14px; }
.editorial-list b { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fef2f2; color: var(--red); }
.photo-scene { position: relative; min-height: 500px; }
.photo { position: absolute; overflow: hidden; border: 4px solid #fff; border-radius: 18px; box-shadow: 0 22px 44px -24px rgba(11,37,69,.45); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.one { left: 0; top: 36px; width: 72%; height: 280px; transform: rotate(-2deg); }
.photo.two { right: 0; top: 0; width: 53%; height: 190px; transform: rotate(3deg); }
.photo.three { right: 20px; bottom: 0; width: 58%; height: 195px; transform: rotate(-1.5deg); }
/* Pourquoi nous choisir */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why-card { padding: 34px 26px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: #fff; transition: .25s; }
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.why-icon { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 22px; margin-bottom: 20px; box-shadow: 0 8px 20px -10px rgba(11,37,69,.25); }
.why-icon svg { width: 42px; height: 42px; stroke-width: 1.9; }
.why-icon.c-red { background: linear-gradient(155deg,#fee2e2,#fecaca); color: #dc2626; }
.why-icon.c-amber { background: linear-gradient(155deg,#fef3c7,#fde68a); color: #b45309; }
.why-icon.c-gold { background: linear-gradient(155deg,#fef9c3,#fef08a); color: #a16207; }
.why-icon.c-blue { background: linear-gradient(155deg,#dbeafe,#bfdbfe); color: #2563eb; }
.why-card h3 { margin: 0 0 10px; color: var(--navy); font-size: 18px; font-weight: 700; }
.why-card p { margin: 0; color: var(--slate-600); font-size: 14px; line-height: 1.7; }

/* Zone d'intervention */
.geo-strip { position: relative; overflow: hidden; padding: 64px 0; background: var(--navy); color: #fff; text-align: center; }
.geo-strip .section-intro h2 { color: #fff; }
.geo-strip .section-intro p { color: var(--slate-300); }
.geo-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.geo-badge { display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-weight: 700; font-size: 14px; }
.geo-badge .flag { font-size: 19px; line-height: 1; }

/* Témoignages */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { position: relative; overflow: hidden; padding: 32px 28px; border-radius: 20px; background: var(--navy); border: 1px solid rgba(255,255,255,.08); color: #fff; transition: .25s; }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -16px rgba(11,37,69,.5); }
.testimonial-card::after { content: "\201D"; position: absolute; top: -30px; right: 20px; font-family: "Fraunces", serif; font-size: 130px; line-height: 1; color: rgba(255,255,255,.06); pointer-events: none; }
.testimonial-quote-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(245,158,11,.18); color: #FBBF24; margin-bottom: 16px; }
.testimonial-stars { color: #FBBF24; font-size: 18px; letter-spacing: 4px; margin-bottom: 16px; }
.testimonial-quote { margin: 0; color: #fff; font-size: 15px; line-height: 1.8; font-style: italic; position: relative; z-index: 1; }
.testimonial-author { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); color: #FBBF24; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; position: relative; z-index: 1; }

.cta-light { padding: 70px 0; text-align: center; background: linear-gradient(to bottom, var(--ivory), #fbefec); }
.cta-light p, .final-cta p { max-width: 620px; margin: 15px auto 0; }
.final-cta { position: relative; overflow: hidden; padding: 82px 0; text-align: center; color: #fff; background: var(--navy); }
.final-cta .cta-title { color: #fff; }
.final-cta p { color: var(--slate-300); }

/* Dark internal pages */
.page { min-height: 100vh; padding: 122px 0 82px; background: var(--slate-950); color: var(--slate-100); }
.page-head { max-width: 790px; margin: 0 auto 52px; text-align: center; }
.page-kicker { display: inline-flex; padding: 6px 12px; border: 1px solid var(--slate-800); border-radius: 999px; background: var(--slate-900); color: #f87171; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page h1 { margin: 18px 0 0; color: #fff; font-size: clamp(34px, 5vw, 52px); line-height: 1.1; letter-spacing: -.03em; }
.page-head p { margin: 16px auto 0; color: var(--slate-300); font-size: 16px; }
.dark-card { border: 1px solid var(--slate-800); border-radius: var(--radius); background: var(--slate-900); box-shadow: 0 25px 60px -38px rgba(0,0,0,.8); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dark-card.pad { padding: 26px; }
.dark-card h2, .dark-card h3 { color: #fff; }
.dark-card p { color: var(--slate-300); font-size: 14px; }
.list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; color: var(--slate-300); font-size: 13px; }
.list li { display: flex; gap: 9px; }
.list li:before { content: '✓'; color: #34d399; font-weight: 800; }
.price { font-size: 36px; font-weight: 800; color: #fff; }
.price small { font-size: 14px; color: #f87171; }
.notice { padding: 15px; border: 1px solid var(--slate-800); border-radius: 11px; background: var(--slate-950); color: var(--slate-400); font-size: 12px; }
.success-badge { width: 68px; height: 68px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(16,185,129,.12); border: 2px solid var(--green); color: var(--green); }

/* Forms */
.form-card { width: min(780px, 100%); margin: 0 auto; padding: 28px; }
.progress-head { display: flex; justify-content: space-between; gap: 12px; color: var(--slate-400); font-size: 12px; font-weight: 700; }
.progress-title { color: #f87171; }
.progress-track { height: 8px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: var(--slate-800); }
.progress-bar { height: 100%; background: linear-gradient(to right, var(--red), #ef4444); transition: width .3s; }
.step-tabs { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; }
.step-tab { border: 0; border-radius: 6px; padding: 5px 7px; background: transparent; color: var(--slate-500); font-size: 11px; font-weight: 700; }
.step-tab.active { color: #fff; background: var(--slate-800); }
.step-tab.done { color: #34d399; }
.form-step { display: none; margin-top: 28px; }
.form-step.active { display: block; }
.form-step-title { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--slate-800); color: #fff; font-size: 14px; font-weight: 800; }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.field { margin-bottom: 15px; }
.field label { display: block; margin-bottom: 5px; color: var(--slate-300); font-size: 12px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--slate-700); border-radius: 9px; outline: none; background: rgba(30,41,59,.8); color: #fff; font-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.field textarea { resize: vertical; }
.file-input { padding: 8px !important; background: var(--slate-950) !important; }
.field-hint { margin: 6px 0 0; color: var(--slate-400); font-size: 11px; }
.error-box { display: none; margin: 20px 0; padding: 14px; border: 1px solid #991b1b; border-radius: 10px; background: rgba(69,10,10,.8); color: #fecaca; font-size: 12px; }
.error-box.show { display: block; }
.error-box strong { display: block; margin-bottom: 4px; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--slate-800); }
.payment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.payment-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--slate-800); border-radius: 12px; background: var(--slate-950); color: var(--slate-300); transition: .2s; }
.payment-card:hover { border-color: var(--slate-600); background: rgba(30,41,59,.7); }
.payment-card.selected { border-color: #ef4444; background: rgba(69,10,10,.7); color: #fff; }
.payment-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--slate-700); border-radius: 9px; background: var(--slate-900); overflow: hidden; white-space: nowrap; }
.payment-card span { font-size: 13px; font-weight: 700; }
.dossier-input.valid { border-color: #10b981 !important; box-shadow: 0 0 0 1px #10b981 !important; }
.dossier-input.invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 1px #ef4444 !important; }
.dossier-feedback { display: none; margin-top: 8px; padding: 10px; border-radius: 8px; font-size: 12px; }
.dossier-feedback.error { display: block; color: #fecaca; border: 1px solid #991b1b; background: rgba(69,10,10,.8); }
.dossier-feedback.success { display: block; padding: 0; color: #34d399; background: transparent; }
.summary { padding: 16px; border: 1px solid var(--slate-700); border-radius: 12px; background: rgba(30,41,59,.6); }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.summary-item { padding-bottom: 10px; border-bottom: 1px solid var(--slate-700); }
.summary-item small { display: block; color: var(--slate-400); }
.summary-item b { color: #fff; font-size: 13px; }
.consent { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--slate-700); border-radius: 10px; color: var(--slate-300); font-size: 12px; background: rgba(30,41,59,.4); }

/* FAQ */
.faq-list { display: grid; gap: 11px; }
.faq-item { border: 1px solid var(--slate-800); border-radius: 12px; overflow: hidden; background: rgba(15,23,42,.75); }
.faq-question { width: 100%; display: flex; justify-content: space-between; gap: 16px; padding: 18px; border: 0; background: transparent; color: #fff; text-align: left; font-weight: 700; }
.faq-answer { display: none; padding: 0 18px 18px; color: var(--slate-300); font-size: 14px; }
.faq-item.open { border-color: rgba(239,68,68,.5); }
.faq-item.open .faq-answer { display: block; }

/* Footer */
.site-footer { position: relative; overflow: hidden; padding: 56px 0 24px; background: var(--navy); color: var(--slate-300); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: 40px; }
.footer-title { margin: 0 0 14px; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.footer-text, .footer-links { color: var(--slate-300); font-size: 12px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.footer-links a:hover { color: #fff; }
.legal { margin-top: 34px; padding: 20px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); border-radius: 10px; color: rgba(203,213,225,.82); font-size: 11px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: var(--slate-400); font-size: 11px; }
.floating-wa { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid #34d399; border-radius: 999px; background: #047857; color: #fff; box-shadow: 0 18px 36px -15px rgba(4,120,87,.65); font-size: 12px; font-weight: 800; }

@keyframes routeFlow { to { stroke-dashoffset: -140; } }
.route-flow { animation: routeFlow 7s linear infinite; }
@keyframes floatY { 50% { transform: translateY(-8px); } }
.float { animation: floatY 6s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s ease both; }
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .mobile-toggle { display: block; }
  .header-actions .btn-wa { display: none; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .container, .container-sm { width: min(100% - 28px, 1180px); }
  .header-actions { display: none; }
  .journey-desktop { display: none; }
  .journey-mobile { display: block; }
  .hero { padding-top: 112px; }
  .hero-copy { margin-top: 0; }
  .hero h1 { font-size: 42px; }
  .hero-actions .btn { width: 100%; }
  .steps { display: grid; grid-template-columns: 1fr; gap: 28px; padding-left: 34px; }
  .steps:before { top: 8px; bottom: 8px; left: 14px; right: auto; border-top: 0; border-left: 3px dashed #fecaca; }
  .step { text-align: left; }
  .step-number { position: absolute; left: -34px; top: 0; width: 30px; height: 30px; font-size: 11px; }
  .step h3 { margin: 3px 0 0; }
  .step p { margin: 5px 0 0; }
  .service-grid, .grid-2, .grid-3, .editorial, .field-grid, .field-grid.three, .payment-grid, .why-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .why-grid { gap: 22px; }
  .why-card { padding: 32px 24px; }
  .testimonial-grid { gap: 26px; }
  .testimonial-card { padding: 36px 28px; min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
  .testimonial-stars { font-size: 20px; }
  .testimonial-quote { font-size: 16px; line-height: 1.85; }
  .geo-badges { gap: 12px; }
  .geo-badge { padding: 12px 20px; font-size: 13px; }
  .photo-scene { min-height: 420px; }
  .photo.one { height: 225px; }
  .photo.two, .photo.three { height: 160px; }
  .page { padding-top: 112px; }
  .page-head { margin-bottom: 36px; }
  .form-card { padding: 20px; }
  .step-tabs { overflow-x: auto; justify-content: flex-start; }
  .step-tab { white-space: nowrap; }
  .form-actions { align-items: stretch; }
  .form-actions .btn { padding-inline: 14px; }
  .summary-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .floating-wa span { display: none; }
  .floating-wa { width: 50px; height: 50px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Avenir Canada — refined service & trust illustrations */
.icon-box.illustration { width: 72px; height: 72px; border-radius: 22px; background: #fff; box-shadow: 0 14px 30px -18px rgba(11,37,69,.38); }
.icon-box.illustration svg { width: 64px; height: 64px; }
.service-card:hover .icon-box.illustration { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 18px 34px -18px rgba(11,37,69,.42); }
.service-card.featured .icon-box.illustration { background: rgba(255,255,255,.96); }
.why-icon.illustration { width: 92px; height: 92px; padding: 0; border-radius: 28px; background: #fff; box-shadow: 0 16px 34px -18px rgba(11,37,69,.3); }
.why-icon.illustration svg { width: 92px; height: 92px; stroke-width: initial; }
.why-card:hover .why-icon.illustration { transform: translateY(-3px) rotate(1deg); }
.evaluation-fee { display: inline-block; margin-left: 4px; color: #f87171; }
.footer-address, .contact-address { display: grid; gap: 3px; margin-top: 14px; color: var(--slate-300); font-size: 12px; line-height: 1.55; }
.footer-address strong, .contact-address strong { color: #fff; font-size: 13px; }
.footer-address-label, .contact-address-label { color: #f87171; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-address { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--slate-800); border-radius: 14px; background: rgba(255,255,255,.025); }
@media (max-width: 640px) { .evaluation-fee { display: block; margin: 7px 0 0; } .icon-box.illustration { width: 66px; height: 66px; } .icon-box.illustration svg { width: 59px; height: 59px; } .why-icon.illustration, .why-icon.illustration svg { width: 82px; height: 82px; } }


/* Avenir Canada — service/trust emoji icons inspired by the reference layout.
   Keep the existing Avenir Canada red/white/navy design; only the icon treatment changes. */
.icon-box.emoji-icon,
.why-icon.emoji-icon {
  background: #f5efe5 !important;
  border: 0;
  box-shadow: none;
  color: initial;
  display: grid;
  place-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  line-height: 1;
  transform: none;
}
.icon-box.emoji-icon { width: 72px; height: 72px; border-radius: 18px; font-size: 37px; }
.why-icon.emoji-icon { width: 80px; height: 80px; border-radius: 20px; margin-bottom: 20px; font-size: 40px; }
.service-card:hover .icon-box.emoji-icon,
.why-card:hover .why-icon.emoji-icon { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(11,37,69,.28); }
.service-card.featured .icon-box.emoji-icon { background: #f5efe5 !important; }
@media (max-width: 640px) {
  .icon-box.emoji-icon { width: 66px; height: 66px; border-radius: 17px; font-size: 34px; }
  .why-icon.emoji-icon { width: 72px; height: 72px; border-radius: 18px; font-size: 36px; }
}

/* ===== v19 — Palette et placement des couleurs de Cames-Humanity =====
   Clair par défaut (blanc / crème) + bandes marine, rouge pour l'action, or pour les détails. */
:root{
  --red:#D52B1E; --red-dark:#B51E13; --red-l:#E8342A;
  --navy:#0A2342; --navy-d:#061629; --navy-m:#0D2D56;
  --gold:#C8A96E; --gold-l:#DFC28A;
  --off:#F7F5F0; --light:#EEECE8; --gray:#8A8275; --text:#2A2520; --wa:#25D366;
  --ink-soft:rgba(42,37,32,.78);
  --ivory:#F7F5F0;
  --shadow:0 24px 60px rgba(10,35,66,.18);
  --sh-sm:0 2px 12px rgba(10,35,66,.07); --sh-md:0 8px 32px rgba(10,35,66,.13);
}
html,body{overflow-x:clip}
body{background:var(--off);color:var(--text)}

/* ---------- En-tête (marine foncé, logo rouge + or, lien actif souligné or) ---------- */
.site-header{height:72px;padding:0!important;display:flex;align-items:center;background:rgba(6,22,41,.9)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.06)!important;box-shadow:none}
.site-header.scrolled{height:62px;background:rgba(6,22,41,.96)!important;box-shadow:0 4px 28px rgba(0,0,0,.25)}
.site-header:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(200,169,110,.7),transparent);opacity:0;transition:opacity .3s}
.site-header.scrolled:after{opacity:1}
.site-header .header-inner{width:min(1180px,calc(100% - 32px))}
.brand-mark{background:var(--red)!important;border:0!important;border-radius:50%!important;color:#fff;box-shadow:0 4px 14px rgba(213,43,30,.35)}
.brand-mark svg{fill:#fff;stroke:rgba(255,255,255,.5)}
.brand-mark svg path:nth-child(2){display:none}
.brand-main{color:#fff!important}
.brand-sub{color:var(--gold)}
.site-header .desktop-nav a{position:relative;background:none!important;color:rgba(255,255,255,.75)!important;border-radius:0}
.site-header .desktop-nav a:after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-header .desktop-nav a:hover,.site-header .desktop-nav a.active{color:#fff!important}
.site-header .desktop-nav a:hover:after,.site-header .desktop-nav a.active:after{transform:scaleX(1)}
.header-cta-mobile{display:none}
.mobile-toggle{color:#fff!important}
/* Menu mobile */
.drawer-backdrop{background:rgba(6,22,41,.7)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.drawer-panel{display:flex;flex-direction:column;width:min(88%,380px)!important;padding:calc(22px + env(safe-area-inset-top,0px)) 24px calc(26px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,var(--navy),var(--navy-d) 78%)!important;border-left:1px solid rgba(255,255,255,.08)}
.mobile-drawer.open .drawer-panel{animation:drawerIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes drawerIn{from{transform:translateX(28px);opacity:0}}
.drawer-close{top:calc(18px + env(safe-area-inset-top,0px));right:18px;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff}
.drawer-panel .brand-main{color:#fff}
.drawer-nav{counter-reset:n;gap:0;margin-top:30px}
.drawer-nav a{counter-increment:n;display:flex;align-items:center;gap:14px;padding:15px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font:600 19px 'Fraunces',Georgia,serif}
.drawer-nav a:before{content:'0' counter(n);width:22px;color:var(--gold);font:800 10px 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em}
.drawer-nav a:after{content:'→';margin-left:auto;color:rgba(255,255,255,.35);font:400 16px 'Plus Jakarta Sans',sans-serif}
.drawer-nav a.active{background:none;border-left:0;color:#fff}
.drawer-nav a.active:after{color:var(--gold)}
.drawer-cta{margin-top:auto;padding-top:26px}
@media(max-width:1050px){
  .mobile-toggle{display:grid!important;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.18)!important;border-radius:14px;background:rgba(255,255,255,.05)!important}
}
@media(max-width:720px){
  .site-header{height:64px}.site-header.scrolled{height:58px}
  .header-cta-mobile{display:inline-flex;min-height:40px;margin-left:auto;padding:8px 18px;font-size:12.5px}
  .brand-mark{width:34px;height:34px}
  .field input,.field select,.field textarea{font-size:16px}
}

/* ---------- Boutons ---------- */
.btn{border-radius:10px}
.btn-red{background:var(--red);box-shadow:0 4px 16px rgba(213,43,30,.3)}
.btn-red:hover{background:var(--red-dark);box-shadow:0 8px 24px rgba(213,43,30,.4)}
.btn-navy,.btn-dark{background:var(--navy);color:#fff;border-color:var(--navy);border-radius:10px}
.btn-navy:hover,.btn-dark:hover{background:var(--navy-m);box-shadow:var(--sh-md)}
.btn-white{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-white:hover{background:var(--navy);color:#fff}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa);box-shadow:0 4px 16px rgba(37,211,102,.3)}
.btn-wa:hover{background:#1FBA58}
.floating-wa{background:var(--wa);border-color:var(--wa);box-shadow:0 6px 22px rgba(37,211,102,.4)}
.drawer-cta .btn-navy{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.hero .btn-white,.final-cta .btn-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.hero .btn-white:hover,.final-cta .btn-white:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.final-cta .btn-red{background:var(--navy);box-shadow:none}
.final-cta .btn-red:hover{background:var(--navy-m)}

/* ---------- ACCUEIL ---------- */
/* Hero : marine très foncé, or sur l'accroche, blanc sur le titre */
.hero{background:radial-gradient(ellipse 70% 60% at 60% 35%,rgba(213,43,30,.10),transparent),var(--navy-d)}
.hero:before{background-image:radial-gradient(#fff .7px,transparent .7px);opacity:.05}
.eyebrow{color:var(--gold)}
.eyebrow:before,.eyebrow:after{background:var(--gold)}
.hero h1{color:#fff}
.hero h1 em{color:var(--gold-l)}
.hero-sub{color:rgba(255,255,255,.65)}
.trust-row{color:rgba(255,255,255,.65)}
.trust-row .tk{color:var(--gold);font-weight:800}
.journey-desktop text[fill="#0F172A"],.journey-mobile text[fill="#0F172A"],.journey-desktop text[fill="#0B2545"],.journey-mobile text[fill="#0B2545"]{fill:#fff}
.journey-desktop text[fill="#64748B"],.journey-mobile text[fill="#64748B"]{fill:rgba(255,255,255,.5)}
.journey-desktop text[fill="#DC2626"],.journey-mobile text[fill="#DC2626"]{fill:var(--gold)}
.journey-desktop path[fill="#E8EEF6"]{fill:rgba(255,255,255,.04)}
.journey-desktop path[stroke="#FEE2E2"],.journey-mobile path[stroke="#FEE2E2"]{stroke:rgba(213,43,30,.22)}
.journey-desktop circle[fill="white"],.journey-mobile circle[fill="white"]{fill:var(--navy-d)}
[stroke="#DC2626"]{stroke:var(--red)} circle[fill="#DC2626"]{fill:var(--red)}
.journey-divider{background:linear-gradient(var(--navy-d) 0 50%,var(--off) 50% 100%)}

/* Bandes de sections : crème / blanc / marine en alternance */
.home-section.sec-cream{background:var(--off)}
.home-section.sec-white{background:#fff}
.home-section.sec-navy{background:var(--navy-d);position:relative;overflow:hidden}
.home-section.sec-navy:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 60% 50%,rgba(213,43,30,.08),transparent);pointer-events:none}
.home-section.sec-navy .container{position:relative}
.section-intro h2,.editorial-quote,.cta-title{color:var(--navy)}
.section-intro p{color:var(--gray)}

/* Parcours en 4 étapes (crème) : cercles contour rouge */
.steps:before{border-top:3px dashed rgba(213,43,30,.3)}
.step-number{background:#fff;border:2px solid var(--red);color:var(--red)}
.step h3{color:var(--navy)}
.step p{color:var(--ink-soft)}

/* Services (blanc) : cartes blanches, bordure gris clair, lien rouge */
.service-card,.why-card{background:#fff;border:1px solid var(--light);box-shadow:var(--sh-sm)}
.service-card:hover,.why-card:hover{box-shadow:var(--shadow)}
.service-card h3,.why-card h3{color:var(--navy)}
.service-card p,.why-card p{color:var(--ink-soft)}
.service-card.tint{background:var(--off);border-color:var(--light)}
.service-card.featured{background:linear-gradient(135deg,var(--navy-d),var(--navy-m));border-color:rgba(213,43,30,.25)}
.service-card.featured h3{color:#fff}
.service-card.featured p{color:rgba(255,255,255,.65)}
.card-link{color:var(--red);border-top:1px solid var(--light)}
.service-card.featured .card-link{color:var(--gold);border-top-color:rgba(255,255,255,.12)}

/* Section éditoriale (marine) : texte blanc, accent or, pastilles rouges */
.sec-navy .editorial-quote{color:#fff}
.sec-navy .editorial-quote em{color:var(--gold-l)}
.editorial-list div{color:rgba(255,255,255,.65)}
.editorial-list b{background:var(--red);color:#fff}
.photo{border:4px solid rgba(255,255,255,.14)}

/* Pourquoi nous (crème) : pastilles rouge translucide */
.why-icon.emoji-icon,.icon-box.emoji-icon{background:rgba(213,43,30,.09)!important}
.why-card{border-radius:14px}

/* Zone d'intervention (marine) : pastilles or */
.geo-strip{background:var(--navy)}
.geo-strip .section-intro p{color:rgba(255,255,255,.6)}
.geo-badge{background:rgba(255,255,255,.06);border:1px solid rgba(200,169,110,.3)}

/* Témoignages (blanc) : cartes crème, étoiles or, avatar marine */
.testimonial-card{background:var(--off);color:var(--text);border:1px solid transparent;box-shadow:none}
.testimonial-card:hover{border-color:rgba(213,43,30,.15);box-shadow:var(--sh-md)}
.testimonial-card::after{color:rgba(10,35,66,.06)}
.testimonial-quote-icon{background:rgba(200,169,110,.2);color:var(--gold)}
.testimonial-stars{color:var(--gold)}
.testimonial-quote{color:var(--text)}
.testimonial-author{color:var(--navy);border-top:1px solid var(--light)}

/* Appels à l'action : crème puis bandeau rouge plein */
.cta-light{background:var(--off)}
.cta-light p{color:var(--gray)}
.final-cta{background:var(--red);color:#fff}
.final-cta:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.15),transparent);pointer-events:none}
.final-cta .container-sm{position:relative}
.final-cta .cta-title{color:#fff}
.final-cta p{color:rgba(255,255,255,.85)}

/* ---------- PAGES INTÉRIEURES : bandeau marine + fond crème + cartes blanches ---------- */
.page{background:var(--off);color:var(--text);padding-top:0;min-height:0}
.page-head{position:relative;isolation:isolate;max-width:790px;margin:0 auto 52px;padding:128px 0 60px}
.page-head:before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(to right,rgba(6,22,41,.97) 50%,var(--navy-m)),var(--navy-d)}
.page-kicker{background:rgba(200,169,110,.14);border:1px solid rgba(200,169,110,.3);color:var(--gold);border-radius:40px}
.page h1{color:#fff}
.page-head p{color:rgba(255,255,255,.65)}
.page-head .evaluation-fee,.evaluation-fee{color:var(--gold-l)}
.dark-card{background:#fff;border:1px solid var(--light);border-radius:14px;box-shadow:var(--sh-sm)}
.dark-card:hover{box-shadow:var(--sh-md)}
.dark-card h2,.dark-card h3{color:var(--navy)}
.dark-card p{color:var(--ink-soft)}
.dark-card strong{color:var(--navy)}
.grid-2 .dark-card.has-photo:hover,.dark-card.has-photo:hover{border-color:rgba(213,43,30,.25);box-shadow:var(--shadow)}
.list{color:var(--ink-soft)}
.list li:before{color:var(--red)}
.price{color:var(--navy)}
.price small{color:var(--red)}
.notice{background:var(--off);border:1px solid var(--light);color:var(--gray);border-radius:10px}
.success-badge{background:rgba(37,211,102,.12);border-color:var(--wa);color:var(--wa)}
.contact-address{background:#fff;border:1px solid var(--light);color:var(--ink-soft)}
.contact-address strong{color:var(--navy)}
.contact-address-label{color:var(--red)}
.dark-card a[href^="mailto"],.dark-card p a{color:var(--red)}

/* FAQ */
.faq-item{background:#fff;border:1px solid var(--light);border-radius:10px}
.faq-question{color:var(--navy)}
.faq-question span{color:var(--red)}
.faq-answer{color:var(--ink-soft)}
.faq-item.open{border-color:rgba(213,43,30,.25);box-shadow:var(--sh-sm)}

/* ---------- FORMULAIRES (page Évaluation & Contact) ---------- */
.form-card{background:#fff;box-shadow:var(--shadow)}
.progress-head{color:var(--gray)}
.progress-title{color:var(--red)}
.progress-track{background:var(--light)}
.progress-bar{background:linear-gradient(to right,var(--red),var(--red-l))}
.step-tabs{gap:0;border:1px solid var(--light);border-radius:8px;overflow:hidden}
.step-tab{flex:1;border-radius:0;background:var(--off);color:var(--gray);border-right:1px solid var(--light);padding:8px 6px}
.step-tab:last-child{border-right:0}
.step-tab.active{background:var(--navy);color:#fff}
.step-tab.done{background:rgba(37,211,102,.1);color:#1FBA58}
.form-step-title{color:var(--navy);border-bottom:1px solid var(--light)}
.field label{color:var(--navy)}
.field input,.field select,.field textarea{background-color:var(--off);border:1.5px solid rgba(10,35,66,.12);color:var(--text);border-radius:8px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,35,66,.06);background-color:#fff}
.field ::placeholder{color:rgba(138,130,117,.75);opacity:1}
.field select:has(option[value=""]:checked){color:rgba(138,130,117,.9)}
.field select option{background:#fff;color:var(--text)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.file-input{background:var(--off)!important}
.field-hint{color:var(--gray)}
.error-box{background:rgba(213,43,30,.06);border:1px solid rgba(213,43,30,.3);color:var(--red-dark)}
.form-actions{border-top:1px solid var(--light)}
.payment-card{background:#fff;border:2px solid var(--light);color:var(--text);border-radius:8px}
.payment-card:hover{border-color:rgba(213,43,30,.4);background:rgba(213,43,30,.02)}
.payment-card.selected{border-color:var(--red);background:rgba(213,43,30,.04);color:var(--navy)}
.payment-icon{background:var(--off);border:1px solid var(--light)}
.dossier-input.valid{border-color:#1FBA58!important;box-shadow:0 0 0 3px rgba(31,186,88,.1)!important}
.dossier-input.invalid{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(213,43,30,.07)!important}
.dossier-feedback.error{color:var(--red-dark);border:1px solid rgba(213,43,30,.3);background:rgba(213,43,30,.06)}
.dossier-feedback.success{color:#1FBA58}
.summary{background:var(--off);border:1px solid var(--light)}
.summary-item{border-bottom:1px solid var(--light)}
.summary-item small{color:var(--gray)}
.summary-item b{color:var(--navy)}
.consent{background:var(--off);border:1px solid var(--light);color:var(--ink-soft)}
.phone-field{display:flex;gap:8px}
.phone-field select{flex:0 0 122px;width:122px;padding-inline:10px 30px;background-position:right 10px center}
.phone-field input{flex:1;min-width:0}
.field select{-webkit-appearance:none;appearance:none;padding-right:38px;background-repeat:no-repeat;background-position:right 13px center}

/* ---------- Pied de page (presque noir bleuté, titres or) ---------- */
.site-footer{background:#050F1C}
.footer-title{color:var(--gold)}
.footer-text,.footer-links{color:rgba(255,255,255,.45)}
.footer-links a:hover,.footer-text a:hover{color:#fff}
.footer-address{color:rgba(255,255,255,.5)}
.footer-address-label{color:var(--gold)}
.footer-address strong{color:#fff}
.legal{background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.3)}
@media(max-width:720px){
  .page-head{padding:108px 0 44px;margin-bottom:36px}
  .step-tabs{overflow-x:auto}
  .step-tab{flex:0 0 auto;padding:8px 12px}
}

.phone-field select{padding-right:30px;background-position:right 10px center}

/* ===== v20 — En-tête blanc + performance ===== */
.site-header{background:rgba(255,255,255,.97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--light)!important}
.site-header.scrolled{background:#fff!important;box-shadow:0 4px 24px rgba(10,35,66,.10)}
.site-header:after{background:linear-gradient(90deg,transparent,rgba(213,43,30,.55),transparent)}
.site-header .brand-main{color:var(--navy)!important}
.site-header .brand-sub{color:var(--red)}
.site-header .desktop-nav a{color:rgba(10,35,66,.78)!important}
.site-header .desktop-nav a:hover,.site-header .desktop-nav a.active{color:var(--red)!important}
.site-header .desktop-nav a:after{background:var(--red)}
.site-header .mobile-toggle{color:var(--navy)!important;background:var(--off)!important;border:1px solid rgba(10,35,66,.16)!important}
.drawer-backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(6,22,41,.78)!important}
/* Fluidité : plus d'animations permanentes ni de flou coûteux */
.route-flow,.float,.photo-scene .photo{animation:none!important}
.photo-scene .photo,.photo{will-change:auto!important}
.reveal{transition:opacity .45s ease,transform .45s ease;transform:translateY(16px)}
.service-media .service-photo{filter:none!important}
.service-media{background:#e9e6df}
.service-photo{content-visibility:auto}
/* Les sections hors écran ne sont calculées qu'à l'approche */
.home-section,.geo-strip,.cta-light,.final-cta,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 640px}
#site-header{min-height:72px}
@media(max-width:720px){#site-header{min-height:64px}.reveal{transform:translateY(10px)}}
@media(hover:none){.service-card:hover,.why-card:hover,.testimonial-card:hover,.dark-card.has-photo:hover,.service-card.has-photo:hover{transform:none}}

/* ===== v22 — Schéma de la procédure en demi-cercles (zigzag) ===== */
.journey-desktop{display:block;max-width:1000px;margin-inline:auto;overflow:visible}
.journey-mobile{width:min(100%,360px);margin-top:34px;overflow:visible}
.hero-actions{margin-bottom:6px}

/* ===== v23 — Hero de l'accueil : même fond blanc que l'en-tête ===== */
.hero{background:#fff}
.hero .eyebrow{color:var(--navy)}
.hero .eyebrow:before,.hero .eyebrow:after{background:var(--red)}
.hero h1{color:var(--navy)}
.hero h1 em{color:var(--red)}
.hero .hero-sub{color:var(--slate-600)}
.hero .btn-white{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.hero .btn-white:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.journey-desktop text[fill="#0F172A"],.journey-mobile text[fill="#0F172A"]{fill:#0F172A}
.journey-desktop text[fill="#0B2545"],.journey-mobile text[fill="#0B2545"]{fill:#0B2545}
.journey-desktop text[fill="#64748B"],.journey-mobile text[fill="#64748B"]{fill:#64748B}
.journey-desktop text[fill="#DC2626"],.journey-mobile text[fill="#DC2626"]{fill:#DC2626}
.journey-desktop path[fill="#E8EEF6"]{fill:#E8EEF6}
.journey-desktop path[stroke="#FEE2E2"],.journey-mobile path[stroke="#FEE2E2"]{stroke:#FEE2E2}
.journey-desktop circle[fill="white"],.journey-mobile circle[fill="white"]{fill:#fff}
.journey-divider{background:linear-gradient(#fff 0 50%,var(--off) 50% 100%)}

/* ===== v24 — Pointillés animés sur le schéma de la procédure ===== */
@keyframes journeyDotsDesktop{to{stroke-dashoffset:-15}}
@keyframes journeyDotsMobile{to{stroke-dashoffset:-14}}
.journey-desktop .route-flow{animation:journeyDotsDesktop .8s linear infinite!important}
.journey-mobile .route-flow{animation:journeyDotsMobile .75s linear infinite!important}
@media (prefers-reduced-motion:reduce){.journey-desktop .route-flow,.journey-mobile .route-flow{animation:none!important}}

/* ===== v27 — Nouveau logo, bloc CONTACT du pied de page, icônes de paiement ===== */
.brand-mark{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:auto!important;height:auto!important;display:inline-flex;align-items:center;padding:0}
.brand-mark img{display:block;height:46px;width:auto}
@media (max-width:640px){.brand-mark img{height:40px}}
.site-footer .brand-mark,.drawer-panel .brand-mark{background:#fff!important;border-radius:12px!important;padding:5px 9px}
.site-footer .brand-mark img,.drawer-panel .brand-mark img{height:38px}

.footer-contact{margin-top:20px}
.footer-contact .footer-title{margin:0 0 14px}
.footer-contact-item{display:grid;gap:2px;margin-bottom:14px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}
.footer-contact-item strong{color:#fff;font-size:13px;font-weight:700}
.footer-contact-item a{color:rgba(255,255,255,.85)}
.footer-contact-item a:hover{color:#fff}
.fc-emoji{margin-right:6px}

.payment-icon svg{display:block}
.payment-icon svg[viewBox="0 0 40 40"]{width:100%;height:100%}

/* ===== v27 — Garantie de remboursement + état de l'envoi du formulaire ===== */
.guarantee{display:flex;gap:14px;align-items:flex-start;width:min(780px,100%);margin:0 auto 22px;padding:16px 18px;background:#fff;border:1px solid var(--light);border-left:4px solid var(--red);border-radius:12px;box-shadow:var(--shadow)}
.guarantee-icon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(220,38,38,.08);color:var(--red)}
.guarantee p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.guarantee strong{color:var(--navy)}
.submit-status{display:none;margin-top:16px;padding:14px 16px;border-radius:10px;font-size:13px;line-height:1.55}
.submit-status.show{display:block}
.submit-status strong{display:block;margin-bottom:4px}
.submit-status.sending{background:var(--off);border:1px solid var(--light);color:var(--ink-soft)}
.submit-status.success{background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.35);color:#047857}
.submit-status.error{background:rgba(213,43,30,.06);border:1px solid rgba(213,43,30,.3);color:var(--red-dark)}
.submit-status .status-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.spinner{display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== v28 — Photo « drapeau du Canada » du collage : garder le drapeau et la tour CN dans le cadre ===== */
.photo.two img{object-position:30% 22%}

/* ===== v29 — Boutons masqués vraiment masqués + bouton « Envoyer » ===== */
[hidden]{display:none!important}
.form-actions{flex-wrap:wrap}
.form-actions .btn-send{flex:1 1 auto;min-width:200px}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}