/* MyDevis — landing page styles.
   Implémentation stricte du handoff design_handoff_mydevis_landing (README = spec). */

:root {
  --ink: #0c4a6e;
  --strong: #0f172a;
  --body: #475569;
  --secondary: #64748b;
  --muted: #94a3b8;
  --nav: #334155;
  --primary: #0369a1;
  --primary-hover: #075985;
  --sky: #38bdf8;
  --bg-alt: #f8fafc;
  --wash: #f0f9ff;
  --wash-2: #e0f2fe;
  --border: #e2e8f0;
  --border-card-hover: #bae6fd;
  --amber-text: #b45309;
  --amber-burnt: #9a3412;
  --amber-bg: #fef3c7;
  --amber-wash: #fff7ed;
  --amber-border: #fed7aa;
  --green: #059669;
  --green-bg: #ecfdf5;
  --footer-text: #bae6fd;
  --footer-light: #7dd3fc;
  --shadow-card-hover: 0 10px 24px rgba(12, 74, 110, 0.10);
  --shadow-card-rest: 0 2px 10px rgba(12, 74, 110, 0.04);
  --shadow-cta: 0 8px 20px rgba(3, 105, 161, 0.22);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--strong);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

img { display: block; }

.wrap { max-width: 1120px; margin: 0 auto; }

/* ---------- Animations ---------- */

@keyframes mdFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes mdMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mdReveal {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: mdReveal linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 40%;
  }
}

/* ---------- Shared typographic pieces ---------- */

.eyebrow {
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow--amber { color: var(--amber-text); }
.eyebrow--green { color: var(--green); }
.eyebrow--sky { color: var(--sky); }

.section-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}

.section-head {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-title { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.card-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

.check-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--nav);
  font-weight: 500;
}
.check-list li { display: flex; align-items: center; gap: 10px; }
.check-list--top li { align-items: flex-start; }
.check { color: var(--green); font-weight: 700; }

/* ---------- Buttons ---------- */

.btn-primary {
  background: var(--primary);
  color: #ffffff;
  padding: 15px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--primary-hover); color: #ffffff; }

.btn-nav {
  background: var(--primary);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.btn-nav:hover { background: var(--primary-hover); color: #ffffff; }

.btn-banner {
  flex-shrink: 0;
  background: var(--primary);
  color: #ffffff;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-cta);
}
.btn-banner:hover { background: var(--primary-hover); color: #ffffff; }

.btn-white {
  background: #ffffff;
  color: var(--primary);
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 10px 26px rgba(12, 74, 110, 0.25);
  margin-top: 6px;
}
.btn-white:hover { background: var(--wash); color: var(--primary-hover); }

.btn-white--sm {
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: none;
  margin-top: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: 32px; height: 32px; }
.logo span { font-weight: 700; font-size: 21px; letter-spacing: -0.022em; color: var(--strong); }
.logo--footer span { color: #ffffff; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.site-nav a:not(.btn-nav) { color: var(--nav); }
.site-nav a:not(.btn-nav):hover { color: var(--primary); }

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 88%);
  padding: 72px 24px 40px;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 56px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.5vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--primary); }
.hero-sub {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--body);
  max-width: 480px;
  text-wrap: pretty;
}
.hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.hero-link { color: var(--primary); padding: 15px 12px; font-weight: 600; font-size: 16px; }
.hero-link:hover { color: var(--primary-hover); }
.hero-art { display: flex; align-items: center; justify-content: center; }
.hero-art img {
  width: 100%;
  max-width: 490px;
  height: auto;
  mix-blend-mode: multiply;
  animation: mdFloat 6s ease-in-out infinite;
}

/* ---------- Comment ça marche ---------- */

.how { background: var(--bg-alt); padding: 96px 24px; }
.how .wrap { display: flex; flex-direction: column; gap: 48px; }
.how-banner {
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: var(--wash-2);
  box-shadow: 0 12px 32px rgba(12, 74, 110, 0.08);
}
.how-banner img { width: 100%; max-width: 820px; height: auto; mix-blend-mode: multiply; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.step-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.25s ease;
}
.step-card:hover { box-shadow: var(--shadow-card-hover); }
.step-num {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--wash-2);
  padding: 5px 12px;
  border-radius: 999px;
}
.step-num--amber { color: var(--amber-text); background: var(--amber-bg); }
.step-num--green { color: var(--green); background: var(--green-bg); }
.step-card img { width: 100%; height: auto; margin-top: auto; }

/* ---------- Fonctionnalités ---------- */

.features { padding: 96px 24px; }
.features .wrap { display: flex; flex-direction: column; gap: 48px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
}
.feature-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card-rest);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-card-hover); }
.feature-card h3 { margin: 6px 0 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.feature-thumb {
  height: 165px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-thumb img { max-width: 92%; max-height: 88%; mix-blend-mode: multiply; }
.feature-thumb--blue { background: var(--wash); }
.feature-thumb--amber { background: var(--amber-wash); }
.feature-thumb--green { background: var(--green-bg); }
.feature-thumb--sky { background: var(--wash-2); }
.custom-banner {
  background: var(--wash);
  border: 1px dashed var(--footer-light);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.custom-banner div { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }

/* ---------- Cas d'usage ---------- */

.usecases { background: var(--bg-alt); padding: 96px 24px; }
.usecases .wrap { display: flex; flex-direction: column; gap: 48px; }
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
}
.usecase-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.25s ease;
}
.usecase-card:hover { box-shadow: var(--shadow-card-hover); }
.usecase-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.usecase-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.usecase-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.usecase-label--blue { color: var(--primary); }
.usecase-label--amber { color: var(--amber-text); }
.usecase-label--green { color: var(--green); }
.usecase-label--navy { color: var(--ink); }
.usecase-foot {
  margin-top: auto;
  padding-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--secondary);
}

/* ---------- Marque blanche / Pilotage ---------- */

.split { padding: 96px 24px; }
.split .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 56px;
  align-items: center;
}
.split--alt { background: var(--bg-alt); }
.split--alt .wrap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.split-copy { display: flex; flex-direction: column; gap: 16px; }
.split-copy > p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  max-width: 460px;
  text-wrap: pretty;
}
.split-art { display: flex; align-items: center; justify-content: center; }
.split-art img { width: 100%; height: auto; }
.split-art--form img { max-width: 540px; }
.split-art--dash img { max-width: 560px; }

/* ---------- Adaptabilité ---------- */

.adapt { background: #ffffff; padding: 0 24px 96px; }
.adapt-card {
  background: var(--ink);
  border-radius: 14px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.adapt-head { max-width: 680px; display: flex; flex-direction: column; gap: 12px; }
.adapt-head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #ffffff;
  text-wrap: balance;
}
.adapt-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 32px;
}
.adapt-col { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }
.adapt-col--blue { border-left: 2px solid rgba(56, 189, 248, 0.5); }
.adapt-col--amber { border-left: 2px solid rgba(251, 191, 36, 0.6); }
.adapt-col--green { border-left: 2px solid rgba(52, 211, 153, 0.6); }
.adapt-col h3 { margin: 0; font-size: 17px; font-weight: 700; color: #ffffff; }
.adapt-col p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--footer-text); text-wrap: pretty; }

/* ---------- Offres ---------- */

/* The two offers, without a price: since 2026-09-25 the price is set in the
   proposal the team sends back (CGV article 2). Each card ends on the line a
   quote document ends on, its total, which reads « sur proposition », and
   asks for that proposal. Same drawn-document grammar as the illustrations:
   blue paper stroke, dashed rule before the action, mono volumes. */
.offers { background: #ffffff; padding: 0 24px 40px; }
/* No top padding (the adapt section above carries it), so the #offres
   anchor needs its own room under the 68px sticky header. */
#offres { scroll-margin-top: 92px; }
.offers .wrap { display: flex; flex-direction: column; gap: 40px; }
.offers-note { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.offers-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.offers-art img { width: 100%; max-width: 340px; height: auto; mix-blend-mode: multiply; }
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px;
}
.offer-card {
  background: #ffffff;
  border: 1px solid var(--wash-2);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-card-rest);
  transition: box-shadow 0.25s ease;
}
.offer-card:hover { box-shadow: var(--shadow-card-hover); }
.offer-card--infra { background: var(--amber-wash); border-color: var(--amber-border); }
.offer-card--infra:hover { box-shadow: 0 10px 24px rgba(180, 83, 9, 0.12); }
.offer-head { display: flex; flex-direction: column; gap: 6px; }
.offer-head h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.offer-card--infra .offer-head h3 { color: var(--amber-burnt); }
.offer-head p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.offer-volume { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.offer-volume-label { font-size: 14px; color: var(--secondary); }
.offer-tiers { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.offer-tiers li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--wash-2);
  padding: 5px 12px;
  border-radius: 999px;
}
.offer-card--infra .offer-tiers li { color: var(--amber-text); background: var(--amber-bg); }
.offer-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.offer-price { font-size: 14.5px; font-weight: 600; color: var(--nav); }
.btn-offer {
  background: var(--primary);
  color: #ffffff;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14.5px;
}
.btn-offer:hover { background: var(--primary-hover); color: #ffffff; }
.btn-offer--infra { background: var(--amber-burnt); }
.btn-offer--infra:hover { background: #7c2d12; color: #ffffff; }
.offers-contact {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  text-align: center;
}
.offers-contact .sep { color: var(--muted); }

/* ---------- Dans le détail ---------- */

/* Everything MyDevis covers, in one card, right under the offers, whose note
   points to it (« détaillées ci-dessous »). */
.detail { background: #ffffff; padding: 0 24px 96px; }
.detail-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.detail-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.detail-head h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.detail-head span { font-size: 14px; color: var(--secondary); }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 28px;
}
.detail-col { display: flex; flex-direction: column; gap: 10px; }
.detail-col > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
}
.detail-col--amber > span { color: var(--amber-text); }
.detail-col--green > span { color: var(--green); }
.detail-col--navy > span { color: var(--ink); }
.detail-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--nav);
}

/* ---------- Avis clients ---------- */

.reviews { background: var(--bg-alt); padding: 96px 24px; }
.reviews .wrap { display: flex; flex-direction: column; gap: 48px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.review-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card-rest);
  transition: box-shadow 0.25s ease;
}
.review-card:hover { box-shadow: var(--shadow-card-hover); }
.review-mark { font-size: 30px; line-height: 0.6; font-weight: 800; }
.review-mark--sky { color: var(--sky); }
.review-mark--amber { color: #d97706; }
.review-mark--green { color: var(--green); }
.review-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--nav); text-wrap: pretty; }
.review-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.review-avatar--amber { background: var(--amber-bg); color: var(--amber-text); }
.review-avatar--green { background: var(--green-bg); color: var(--green); }
.review-avatar--blue { background: var(--wash-2); color: var(--primary); }
.review-name { font-weight: 700; font-size: 14px; color: var(--strong); }
.review-role { font-size: 13px; color: var(--secondary); }

/* ---------- Logos partenaires ---------- */

.trust { background: #ffffff; padding: 48px 0 72px; }
.trust .wrap { padding: 0 24px; display: flex; flex-direction: column; gap: 26px; }
.trust-label {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.marquee {
  overflow: hidden;
  position: relative;
  /* The fade is a fixed width, not a percentage: at 12% per side it ate 82px
     of a 343px phone strip, so every logo was permanently half-dissolved. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 88px;
  width: max-content;
  animation: mdMarquee 24s linear infinite;
}
.marquee-track img { width: auto; }
/* No mix-blend-mode on the logos: the three files are already transparent, so
   multiply changed nothing on this white section, but a blended child inside a
   masked box is the WebKit combination that renders as a dark slab on iOS. */
.logo-lacroix { height: 64px; }
.logo-savac { height: 38px; }
.logo-debras { height: 44px; }
.logo-viao { height: 34px; }

/* ---------- CTA final ---------- */

.cta-final { background: var(--ink); padding: 96px 24px; }
.cta-final .wrap {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cta-final h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #ffffff;
  text-wrap: balance;
}
.cta-final p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 520px;
  text-wrap: pretty;
}

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); padding: 64px 24px 32px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 48px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; }
.footer-brand p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--footer-light); text-wrap: pretty; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col--cta { gap: 14px; align-items: flex-start; }
.footer-col--cta p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--footer-text); }
.footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}
.footer-col a { color: var(--footer-text); font-size: 14.5px; }
.footer-col a:hover { color: #ffffff; }
.footer-col > span:not(.footer-heading) { color: var(--footer-text); font-size: 14.5px; }
.footer-col .btn-white--sm { color: var(--primary); }
.footer-col .btn-white--sm:hover { color: var(--primary-hover); }
.footer-bar {
  border-top: 1px solid rgba(186, 230, 253, 0.18);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(186, 230, 253, 0.75);
  flex-wrap: wrap;
}
.footer-legal a { color: rgba(186, 230, 253, 0.75); }
.footer-legal a:hover { color: #ffffff; }
.footer-legal .sep { color: rgba(186, 230, 253, 0.3); }

/* ================================================================
   Legal / document pages (mentions-legales, confidentialite, cgu-cgv)
   ================================================================ */

.doc { max-width: 760px; margin: 0 auto; padding: 64px 24px 88px; }
.doc-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.doc-back { font-size: 14px; color: var(--secondary); }
.doc-back:hover { color: var(--primary); }
.doc-head h1 {
  margin: 12px 0 0;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}
.doc-updated { margin: 0; font-size: 14px; color: var(--muted); }
.doc-lede { margin: 8px 0 0; font-size: 16px; line-height: 1.7; color: var(--body); text-wrap: pretty; }

.doc h2 {
  margin: 40px 0 14px;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.doc p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--nav); text-wrap: pretty; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.65; color: var(--nav); }

.doc h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--strong);
  letter-spacing: -0.005em;
}
.doc hr { margin: 40px 0; border: 0; border-top: 1px solid var(--border); }
.doc code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink);
}

/* The DPA is the first legal page with tables, and its retention and
   subprocessor annexes are the part a DSI actually reads. The wrapper
   scrolls on its own so a wide row never pushes the page sideways. */
.doc-table-wrap { overflow-x: auto; margin: 0 0 18px; }
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--nav);
}
.doc-table th,
.doc-table td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  background: var(--bg-alt);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.doc-table tbody tr:nth-child(even) { background: rgba(248, 250, 252, 0.6); }

.toc { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin: 0 0 8px; }
.toc-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary); }
.toc ol { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: var(--nav); }

/* ================================================================
   Commander page
   ================================================================ */

.commander { max-width: 1120px; margin: 0 auto; padding: 56px 24px 88px; }
.cmd-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.cmd-head-copy { display: flex; flex-direction: column; gap: 10px; }
.cmd-head-art img { width: 100%; max-width: 330px; height: auto; mix-blend-mode: multiply; }
.cmd-back { font-size: 14px; color: var(--secondary); }
.cmd-back:hover { color: var(--primary); }
.cmd-head h1 {
  margin: 6px 0 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}
.cmd-lede { margin: 4px 0 0; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 620px; text-wrap: pretty; }

/* Form on the left, the recap rail on the right. Everything stays inside the
   <form> so form.hidden on confirmation hides the rail too. */
.cmd-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  column-gap: 56px;
  row-gap: 44px;
  align-items: start;
}
.cmd-step { grid-column: 1; display: flex; flex-direction: column; gap: 18px; }
/* Stretched over the rows it spans: under the form's align-items: start the
   rail would be exactly as tall as its card, leaving the sticky card no room
   to follow the buyer down. One row per step: a step added or removed moves
   the span, or an empty row adds its gap under the form. */
.cmd-rail { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; }

/* Numbered steps hang on a dotted rail, the same dotted path the
   illustrations use. Each step draws its own segment, so hiding the payment
   step (on-prem offer) leaves no dangling line. */
.cmd-step--num { position: relative; padding-left: 48px; }
.cmd-step--num::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 6px;
  border-left: 2px dotted var(--footer-light);
  opacity: 0.55;
}
.cmd-step--num .cmd-num { position: absolute; left: 0; top: -1px; }
.cmd-step--bare { padding-left: 48px; }
.cmd-step-head { display: flex; align-items: center; gap: 12px; }
.cmd-step-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.cmd-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--wash-2);
}
.cmd-num--amber { color: var(--amber-text); background: var(--amber-bg); }
.cmd-num--navy { color: var(--ink); background: var(--wash-2); }

/* Offer radio cards: never three columns, or the fourth card sits alone on
   its row. A track of at least 40% leaves no room for a third; the 220px
   floor still stacks them in one column on phones. */
.cmd-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(220px, 40%), 1fr)); gap: 16px; }
.cmd-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 22px 20px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card-rest);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cmd-plan:has(input:checked) {
  background: var(--wash);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 10px 24px rgba(12, 74, 110, 0.10);
}
.cmd-plan input { position: absolute; opacity: 0; pointer-events: none; }
.cmd-plan input:focus-visible + .cmd-plan-name { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.cmd-plan-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.cmd-plan--infra .cmd-plan-name { color: var(--amber-burnt); }
.cmd-plan-sub { font-size: 13px; color: var(--secondary); }

/* Card wrapper (form + payment) */
.cmd-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 30px;
  box-shadow: var(--shadow-card-rest);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 34px; }
.cmd-fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cmd-legend { padding: 0; margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--primary); }
.cmd-label { display: flex; flex-direction: column; gap: 7px; }
.cmd-label-text { font-size: 13.5px; font-weight: 600; color: var(--nav); }
.req { color: #dc2626; }
.cmd-divider { height: 1px; background: #eef2f7; }

.cmd-field {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  color: var(--strong);
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.cmd-field:hover { border-color: #b6c4d6; }
.cmd-field:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.14); }
.cmd-field::placeholder { color: #9aa8bd; }
textarea.cmd-field { resize: vertical; }

/* Recap rail: the order summary presented as what MyDevis produces all day,
   a quote document. Brand-gradient letterhead strip, blue paper stroke,
   dashed rules. Sticky so the recap follows the buyer down the form. */
.cmd-rail-card {
  position: sticky;
  top: 92px;
  background: #ffffff;
  border: 1px solid var(--wash-2);
  border-radius: 14px;
  box-shadow: var(--shadow-card-rest);
  overflow: hidden;
}
.cmd-rail-card::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(135deg, #0369a1, #38bdf8);
}
.cmd-recap { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.cmd-rail-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmd-rail-brand img { width: 22px; height: 22px; }
.cmd-rail-title {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
}
.cmd-recap-top { display: flex; flex-direction: column; gap: 4px; }
.cmd-recap-name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.cmd-recap-rule { height: 1px; background: var(--wash-2); }
.cmd-recap-lines { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--body); }
.cmd-recap-row { display: flex; justify-content: space-between; gap: 16px; }
.cmd-recap-row strong { font-weight: 600; color: var(--nav); text-align: right; }
.cmd-recap-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--secondary); text-wrap: pretty; }

/* Order request error, with its mailto fallback */
.cmd-pay-error { margin: 0; font-size: 13px; line-height: 1.5; color: #dc2626; }
.cmd-pay-error.is-info { color: var(--secondary); }

/* CGV + submit */
.cmd-cgv { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--nav); cursor: pointer; }
.cmd-cgv input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary); }
.cmd-submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cmd-submit {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
}
.cmd-submit:hover { background: var(--primary-hover); }
.cmd-submit:disabled { background: var(--muted); box-shadow: none; cursor: not-allowed; }
.cmd-submit:disabled:hover { background: var(--muted); }
.cmd-helper { font-size: 13.5px; color: var(--secondary); max-width: 360px; text-wrap: pretty; }

/* Confirmation screen */
.cmd-confirm {
  background: var(--green-bg);
  border: 1px solid #a7f3d0;
  border-radius: 16px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cmd-confirm-check {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
}
.cmd-confirm h2 { margin: 0; font-size: 26px; font-weight: 800; color: #065f46; letter-spacing: -0.01em; }
.cmd-confirm h2:focus { outline: none; }
.cmd-confirm p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--nav); max-width: 560px; text-wrap: pretty; }
.cmd-confirm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cmd-confirm-home {
  background: var(--primary);
  color: #ffffff;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
}
.cmd-confirm-home:hover { background: var(--primary-hover); color: #ffffff; }
.cmd-confirm-demo { color: var(--primary); padding: 13px 12px; font-weight: 700; font-size: 15px; }
.cmd-confirm-demo:hover { color: var(--primary-hover); }

[hidden] { display: none !important; }

/* ---------- Two-up field rows (commander) ---------- */

.cmd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmd-duo--cp { grid-template-columns: 120px 1fr; }

/* ---------- Company autofill dropdown (commander) ---------- */

.cmd-autofill { position: relative; }
.cmd-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 6px 0 0;
  padding: 6px;
  max-height: 268px;
  overflow-y: auto;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-card-hover);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmd-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.cmd-suggest-item:hover,
.cmd-suggest-item.is-active { background: var(--wash); }
.cmd-suggest-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cmd-suggest-meta { font-size: 12.5px; color: var(--secondary); }

/* ================================================================
   Responsive — minimal, JS-free (tablet + phone)
   Most grids already use auto-fit + min(100%, …) and collapse on
   their own. This layer only fixes what actually breaks narrow
   viewports: fixed-min two-column grids overflow, the inline nav,
   and desktop-generous vertical rhythm / card padding.
   ================================================================ */

@media (max-width: 980px) {
  /* The header nav gives way link by link instead of wrapping its labels.
     Measured widths, logo and gutters included, with the longest button
     (« Demander une démo »): all six items need 960px, five need 855px,
     « Fonctionnalités », « Offres » and the button need 589px (with the
     legal pages' « Commander »: 904, 799, 533). Re-measured on 2026-09-27,
     when « Offres » joined the nav: the breakpoints keep their values, with
     21, 6 and 12px to spare at their edges. Login goes first here (the
     footer carries the same link), then .nav-extra at 860px, then every
     link but the button at 600px. A new nav item needs these numbers
     measured again. */
  .site-nav .nav-login { display: none; }

  /* The offers and commander art columns give way to the content. */
  .offers-head-row { grid-template-columns: 1fr; gap: 0; }
  .offers-art { display: none; }
  .cmd-head { grid-template-columns: 1fr; gap: 0; }
  .cmd-head-art { display: none; }

  /* Single column: the recap rail slots between the info and acceptance
     steps (DOM order), exactly where the buyer checks the offer. Stretch
     overrides the desktop grid's align-items: start, which in a flex column
     shrinks each step to its content (the offer cards to one 220px track). */
  .cmd-form { display: flex; flex-direction: column; align-items: stretch; gap: 40px; }
  .cmd-rail-card { position: static; }
}

@media (max-width: 860px) {
  /* Lowest value first: « Comment ça marche » and « Contact » give way
     before « Fonctionnalités » (on the landing, the hero links to the first
     and the demo button leads where the second does). */
  .site-nav .nav-extra { display: none; }

  /* These use a fixed px min (420/400) → a single column stays that
     wide and overflows the viewport. Force a real single column. */
  .hero .wrap,
  .split .wrap,
  .split--alt .wrap { grid-template-columns: 1fr; gap: 40px; }

  .hero { padding-top: 56px; }

  /* The offers' note fits one line from about 700px (653px of text plus the
     gutters). Below that the row would wrap with its dot dangling, so it
     stacks at this breakpoint instead of a new one. */
  .offers-contact { flex-direction: column; }
  .offers-contact .sep { display: none; }

  /* Trim the 96px section rhythm on smaller screens. */
  .how, .features, .usecases, .split, .reviews, .cta-final { padding-top: 64px; padding-bottom: 64px; }
  .adapt, .detail { padding-bottom: 64px; }
}

@media (max-width: 600px) {
  /* Collapse the inline nav to the primary CTA only — no hamburger,
     the sections are reachable by scrolling. */
  .site-nav a:not(.btn-nav) { display: none; }
  .site-header .wrap { padding: 0 16px; gap: 12px; }
  /* Alone next to the logo, the button fits on one line from 347px. On a
     320px phone, two lines beat overflowing the page. */
  .btn-nav { white-space: normal; }

  /* Tighten side gutters everywhere. */
  .hero, .how, .features, .usecases, .split, .reviews, .cta-final,
  .adapt, .offers, .detail, .site-footer { padding-left: 16px; padding-right: 16px; }
  .trust .wrap { padding-left: 16px; padding-right: 16px; }

  /* Roomy card interiors shrink so content keeps breathing room. */
  .adapt-card { padding: 28px 22px; }
  .offer-card { padding: 24px 22px; }
  .detail-card { padding: 24px; }
  .cmd-card { padding: 22px 18px; }
  .cmd-confirm { padding: 32px 22px; }

  /* Two-up field rows stack. */
  .cmd-duo,
  .cmd-duo--cp { grid-template-columns: 1fr; }

  /* The dotted step rail needs elbow room; on phones the pills go back
     inline above their titles. */
  .cmd-step--num, .cmd-step--bare { padding-left: 0; }
  .cmd-step--num::before { display: none; }
  .cmd-step--num .cmd-num { position: static; }

  /* Partner marquee: at desktop sizing barely one and a half logos fitted in
     the strip, so it read as a stream of cropped, half-faded fragments.
     Smaller logos, tighter gap, and a fade narrow enough to leave a clear
     middle — three logos now cross whole. */
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .marquee-track { gap: 36px; }
  .logo-lacroix { height: 42px; }
  .logo-savac { height: 26px; }
  .logo-debras { height: 30px; }
}