/* Site vitrine Limo — reprend les jetons de la landing de l'application
   (src/styles/theme-public.css, tailwind.config.ts) et la police de la marque, Excon. */
@font-face {
  font-family: "Excon";
  src: url("/fonts/Excon-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: hsl(222 47% 10%);        /* --background du thème public : le hero et le CTA final */
  --blue-950: hsl(222 70% 20%);    /* texte et bandeau de confiance */
  --blue-900: hsl(222 70% 25%);
  --blue-800: hsl(222 70% 30%);
  --blue-600: #2563eb;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-200: #bfdbfe;
  --blue-100: #dbeafe;
  --blue-50: #eff6ff;
  --beige: hsl(38 90% 93%);
  --off-white: hsl(38 90% 98%);
  --green-400: #4ade80;
  --red-500: #ef4444;
  --white: #ffffff;
  --font: "Excon", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--blue-950);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: min(var(--container), 100% - 2rem); margin-inline: auto; }
@media (min-width: 640px) { .container { width: min(var(--container), 100% - 3rem); } }
@media (min-width: 1024px) { .container { width: min(var(--container), 100% - 4rem); } }

.section { padding-block: 5rem; }
@media (min-width: 640px) { .section { padding-block: 6rem; } }
.section--beige { background: var(--beige); }
.section--off { background: var(--off-white); }
.section-head { text-align: center; margin-bottom: 4rem; }
.section-head h2 { font-size: clamp(2.25rem, 4vw, 3rem); color: var(--blue-950); }
.section-head p { max-width: 42rem; margin: 1rem auto 0; font-size: 1.125rem; color: rgba(15, 36, 87, .7); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 3rem; padding: 0 2rem; border-radius: 9999px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: background .15s, color .15s; }
.btn--white { background: var(--white); color: #000; }
.btn--white:hover { background: #e5e7eb; }
.btn--outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--outline-white:hover { background: rgba(255,255,255,.1); }
.btn--blue { background: var(--blue-600); color: var(--white); border-radius: .5rem; font-weight: 700; }
.btn--blue:hover { background: #3b82f6; }
.btn--outline-blue { background: var(--white); color: var(--blue-600); border: 1px solid var(--blue-600); border-radius: .5rem; font-weight: 700; }
.btn--outline-blue:hover { background: #f3f4f6; }
.btn-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .btn-row { flex-direction: row; } }

/* ---------- En-tête ---------- */
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 2.25rem; width: auto; }
.nav { display: none; gap: 1.75rem; }
.nav a { color: var(--blue-100); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav a:hover { color: var(--white); }
.header-note { display: none; font-size: .85rem; color: var(--blue-200); border: 1px solid rgba(255,255,255,.25); border-radius: 9999px; padding: .35rem .9rem; }
@media (min-width: 900px) { .nav, .header-note { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero { background: var(--navy); color: var(--white); padding: 8rem 0 5rem; }
.hero .container { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .hero .container { grid-template-columns: 1fr 1fr; } }
.hero-copy { text-align: center; }
@media (min-width: 768px) { .hero-copy { text-align: left; } }
.pill { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background: rgba(255,255,255,.1); padding: .25rem .75rem; font-size: .875rem; font-weight: 500; color: var(--blue-100); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1.5rem; }
.hero .lead { font-size: clamp(1.125rem, 2vw, 1.25rem); color: var(--blue-100); max-width: 32rem; margin: 0 auto 2rem; }
@media (min-width: 768px) { .hero .lead { margin-inline: 0; } }
.hero .btn-row { justify-content: center; }
@media (min-width: 768px) { .hero .btn-row { justify-content: flex-start; } }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; margin-top: 1.5rem; font-size: .875rem; color: var(--blue-100); }
@media (min-width: 768px) { .checks { justify-content: flex-start; } }
.checks li::before { content: "✓"; color: var(--green-400); margin-right: .4rem; font-weight: 700; }
.hero-note { margin-top: 1.5rem; font-size: .9rem; color: var(--blue-300); }
.hero-note strong { color: var(--beige); }

/* Aperçu du tableau de bord : même maquette CSS que LandlordDashboardPreview */
.device { position: relative; max-width: 28rem; margin: 0 auto; }
.device::before { content: ""; position: absolute; inset: 0; background: rgba(37,99,235,.3); border-radius: 9999px; filter: blur(48px); }
.device-frame { position: relative; background: #1f2937; border: 2px solid #374151; border-radius: 1rem; padding: .375rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.device-screen { background: var(--blue-950); border-radius: .75rem; overflow: hidden; color: var(--white); font-family: system-ui, sans-serif; }
.ds-head { display: flex; justify-content: space-between; padding: 1rem 1.5rem .5rem; font-size: .875rem; color: var(--blue-300); }
.ds-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .5rem 1.5rem; text-align: center; }
.ds-kpi { background: rgba(15,36,87,.5); border-radius: .5rem; padding: .5rem; }
.ds-kpi small { display: block; font-size: .75rem; color: var(--blue-300); }
.ds-kpi b { font-size: 1.125rem; }
.ds-kpi b.green { color: var(--green-400); }
.ds-chart-label { padding: 1rem 1.5rem .25rem; font-size: .75rem; color: var(--blue-300); }
.ds-chart { margin: 0 1.5rem .5rem; height: 4rem; background: rgba(15,36,87,.5); border-radius: .5rem; padding: .5rem; display: flex; gap: .25rem; align-items: flex-end; }
.ds-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; }
.ds-bar i { display: block; border-radius: .125rem .125rem 0 0; }
.ds-bar .r { background: rgba(239,68,68,.7); }
.ds-bar .g { background: rgba(34,197,94,.7); }
.ds-foot { background: rgba(15,36,87,.8); border-top: 1px solid var(--blue-800); padding: .75rem; font-size: .75rem; }
.ds-foot p { font-weight: 600; padding: 0 .25rem .5rem; }
.ds-row { display: flex; justify-content: space-between; background: rgba(30,64,175,.5); padding: .5rem; border-radius: .5rem; margin-top: .4rem; }
.ds-row .ok { color: var(--green-400); font-weight: 600; }
.ds-row .ko { color: #f87171; font-weight: 600; }

/* ---------- Bandeau de confiance ---------- */
.trust { background: var(--blue-950); border-block: 1px solid rgba(255,255,255,.1); }
.trust .container { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-block: 1.5rem; }
@media (min-width: 1024px) { .trust .container { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; align-items: center; gap: .75rem; justify-content: center; }
@media (min-width: 1024px) { .trust-item { justify-content: flex-start; } }
.trust-item svg { width: 1.5rem; height: 1.5rem; color: var(--blue-300); flex-shrink: 0; }
.trust-item b { display: block; color: var(--white); line-height: 1.2; }
.trust-item small { color: var(--blue-300); font-size: .75rem; }

/* ---------- Solutions ---------- */
.cat-label { margin-bottom: 1.5rem; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-600); }
.cat + .cat { margin-top: 3rem; }
.sol-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sol-grid { grid-template-columns: repeat(3, 1fr); } }
.sol { display: flex; align-items: flex-start; gap: 1rem; background: rgba(255,255,255,.8); border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sol-icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .5rem; background: var(--blue-50); color: var(--blue-600); display: grid; place-items: center; }
.sol-icon svg { width: 1.5rem; height: 1.5rem; }
.sol h4 { font-size: 1rem; }
.sol p { font-size: .875rem; color: rgba(15,36,87,.7); margin-top: .125rem; }
.soon { display: inline-block; margin-left: .5rem; font-size: .7rem; font-weight: 600; color: var(--blue-600); background: var(--blue-50); border-radius: 9999px; padding: .1rem .5rem; vertical-align: middle; }

/* ---------- Cartes de fonctionnalités ---------- */
.feat-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } .feat-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.feat { position: relative; height: 20rem; border-radius: .75rem; overflow: hidden; color: var(--white); box-shadow: 0 20px 25px -5px rgba(0,0,0,.2); background-color: var(--blue-950); background-size: cover; background-position: center; }
.feat::before { content: ""; position: absolute; inset: 0; background: rgba(15,36,87,.7); }
.feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.25) 50%, transparent); }
.feat-body { position: relative; z-index: 1; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; }
.feat svg { width: 2rem; height: 2rem; margin-bottom: .5rem; opacity: .9; }
.feat h3 { font-size: 1.25rem; }
.feat p { margin-top: .25rem; font-size: .875rem; color: rgba(255,255,255,.9); }
.feat--ai { box-shadow: 0 0 0 2px #a78bfa, 0 20px 25px -5px rgba(0,0,0,.2); }

/* ---------- Comparatif ---------- */
.compare { max-width: 56rem; margin: 0 auto; overflow-x: auto; }
.compare table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(255,255,255,.8); border-radius: .75rem; overflow: hidden; }
.compare th, .compare td { padding: 1rem 1.25rem; text-align: center; border-bottom: 1px solid #e5e7eb; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare th { font-size: 1rem; }
.compare th.limo { color: var(--blue-600); }
.compare tr:last-child td { border-bottom: none; }
.compare .yes { color: #16a34a; font-weight: 700; }
.compare .no { color: #9ca3af; }

/* ---------- Tarifs ---------- */
.plans { display: grid; gap: 1rem; max-width: 64rem; margin: 0 auto; grid-template-columns: 1fr; }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { border: 1px solid rgba(15,36,87,.1); background: rgba(255,255,255,.6); border-radius: .75rem; padding: 1.5rem; text-align: center; }
.plan--hl { border-color: var(--blue-600); background: var(--white); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.plan .name { font-size: 1.125rem; font-weight: 700; }
.plan .range { font-size: .875rem; color: rgba(15,36,87,.6); }
.plan .amount { font-size: 1.875rem; font-weight: 700; margin-top: 1rem; }
.plan .unit { font-size: .75rem; color: rgba(15,36,87,.6); margin-top: .25rem; }
.plans-note { text-align: center; font-size: .875rem; color: rgba(15,36,87,.6); margin-top: 1.5rem; }
.plans .btn-row { justify-content: center; margin-top: 2.5rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid #e5e7eb; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 0; font-size: 1.125rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "⌄"; font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--blue-600); }
.faq details > p { padding-bottom: 1rem; color: rgba(15,36,87,.7); }

/* ---------- CTA final ---------- */
.final { background: var(--navy); color: var(--white); }
.final-card { position: relative; overflow: hidden; border-radius: 1.5rem; background: var(--blue-950); padding: 4rem 1.5rem; text-align: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); }
@media (min-width: 640px) { .final-card { padding: 4rem; } }
.final-card::before { content: ""; position: absolute; top: -6rem; left: 50%; transform: translateX(-50%); width: 16rem; height: 16rem; border-radius: 9999px; background: rgba(37,99,235,.3); filter: blur(48px); }
.final-card > * { position: relative; }
.final-card h2 { font-size: clamp(1.875rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.final-card p { max-width: 36rem; margin: 0 auto 2rem; color: var(--blue-100); font-size: 1.125rem; }
.final-card .btn-row { justify-content: center; }
.final-card .small { margin-top: 1.5rem; margin-bottom: 0; font-size: .875rem; color: var(--blue-200); }

/* ---------- Pied de page ---------- */
.footer { background: var(--blue-950); color: rgba(191,219,254,.7); padding-block: 3rem 2rem; font-size: .9rem; }
.footer .cols { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h4 { color: var(--white); font-size: .95rem; margin-bottom: .75rem; }
.footer li { margin-bottom: .4rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer .brand img { height: 2rem; margin-bottom: 1rem; }
.footer .legal { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; font-size: .8rem; }
.footer .legal p + p { margin-top: .5rem; }

/* ---------- Pages juridiques ---------- */
.doc { background: var(--off-white); padding: 8rem 0 5rem; }
.doc .container { max-width: 48rem; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: .5rem; }
.doc .version { color: rgba(15,36,87,.6); font-size: .9rem; margin-bottom: 2rem; }
.doc h2 { font-size: 1.35rem; margin: 2.25rem 0 .75rem; }
.doc p, .doc li { margin-bottom: .75rem; }
.doc ul { padding-left: 1.25rem; list-style: disc; }
.doc a { color: var(--blue-600); }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1rem 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid #e5e7eb; }
.doc th { background: var(--beige); }
.doc .header-dark { background: var(--navy); position: static; }
.doc .header-dark .container { height: 5rem; }

/* ---------- Navigation entre les textes juridiques ---------- */
.doc-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.doc-nav a { text-decoration: none; font-size: .9rem; font-weight: 600; padding: .4rem .9rem; border-radius: 9999px; border: 1px solid rgba(15,36,87,.15); color: var(--blue-950); }
.doc-nav a[aria-current="page"] { background: var(--blue-950); color: var(--white); border-color: var(--blue-950); }
.doc .version { margin-bottom: 2rem; }

/* ---------- Colonne Limo du comparatif : liseré dégradé animé, comme dans l'application ---------- */
/* Chaque cellule de la colonne porte le même dégradé horizontal (même largeur, même animation) :
   le liseré paraît d'un seul tenant. Un fond intérieur (::before) recouvre la cellule entière,
   moins 3 px sur les côtés, quelle que soit la hauteur de la ligne. */
.compare th.limo, .compare td.limo-col {
  position: relative; z-index: 0;
  background: linear-gradient(to right, #8b5cf6, #eab308, #f97316, #eab308, #8b5cf6);
  background-size: 200% 100%;
  animation: gradient-animation 6s ease infinite;
  border-bottom: none;
}
.compare th.limo::before, .compare td.limo-col::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 3px; right: 3px;
  background: #eef2ff; border-bottom: 1px solid #e5e7eb;
}
.compare th.limo { color: var(--white); font-weight: 700; border-radius: .75rem .75rem 0 0; }
.compare th.limo::before {
  top: 3px; background: var(--blue-950); border-bottom: none;
  border-radius: calc(.75rem - 3px) calc(.75rem - 3px) 0 0;
}
.compare td.limo-col strong { white-space: nowrap; }
.compare tr:last-child td.limo-col { border-radius: 0 0 .75rem .75rem; }
.compare tr:last-child td.limo-col::before {
  bottom: 3px; border-bottom: none;
  border-radius: 0 0 calc(.75rem - 3px) calc(.75rem - 3px);
}
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .compare th.limo, .compare td.limo-col { animation: none; }
}
.compare .cell-note { display: block; font-size: .75rem; font-weight: 600; color: rgba(15,36,87,.7); margin-top: .15rem; white-space: nowrap; }

/* ---------- Rappel tarifaire de l'accueil : cartes cliquables vers /tarifs ---------- */
a.plan { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
a.plan:hover { border-color: var(--blue-400); }

.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; }

/* ======================================================================
   Page /tarifs — reprise de src/app/(public)/tarifs/page.tsx et de
   pricing-section, pricing-plans, pricing-simulator (application)
   ====================================================================== */
.ic { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.tarifs-hero { background: var(--navy); color: var(--white); padding: 8rem 0 5rem; text-align: center; }
.tarifs-hero .container { max-width: 48rem; }
.tarifs-hero h1 { font-size: clamp(2.25rem, 5vw, 3rem); margin-bottom: 1.5rem; }
.tarifs-hero p { font-size: 1.125rem; color: var(--blue-100); }
.tarifs-hero .tarifs-hero-note { margin-top: 1.25rem; font-size: .95rem; color: var(--beige); }

/* Interrupteur mensuel / annuel */
.billing-wrap { display: flex; justify-content: center; margin-bottom: 3rem; }
.billing { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 9999px; background: rgba(15,36,87,.1); padding: .25rem; }
.billing-pill { position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); border-radius: 9999px; background: var(--blue-600); box-shadow: 0 1px 2px rgba(0,0,0,.1); transition: transform .3s ease-out; pointer-events: none; }
.billing.is-annual .billing-pill { transform: translateX(100%); }
.billing button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; border: 0; background: none; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; padding: .625rem 1.5rem; border-radius: 9999px; color: rgba(15,36,87,.7); transition: color .15s; }
.billing button[aria-pressed="true"] { color: var(--white); }
.billing-tag { border-radius: 9999px; padding: .125rem .5rem; font-size: .75rem; font-weight: 700; background: rgba(37,99,235,.1); color: #1d4ed8; transition: background .15s, color .15s; }
.billing.is-annual .billing-tag { background: rgba(255,255,255,.2); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .billing-pill { transition: none; } }

/* Cartes de plan */
.pc-grid { display: grid; gap: 1.5rem; align-items: start; max-width: 72rem; margin: 0 auto; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .pc-grid { grid-template-columns: repeat(4, 1fr); } }
.pc { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: .5rem; background: rgba(255,255,255,.8); border: 1px solid #e5e7eb; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); color: var(--blue-950); transition: border-color .15s; }
.pc:hover { border-color: var(--blue-400); }
.pc--dark { background: var(--navy); color: var(--white); border-color: #1e40af; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); transform: translateY(-1rem); transition: transform .15s; }
.pc--dark:hover { border-color: #1e40af; transform: translateY(-1rem) scale(1.02); }
.pc-badge { position: absolute; top: 0; right: 0; background: var(--blue-600); color: var(--white); font-size: .75rem; font-weight: 700; padding: .25rem .75rem; border-radius: 0 .5rem 0 .5rem; }
.pc-head { text-align: center; padding: 1.5rem 1.5rem 0; }
.pc-head h3 { font-size: 1.5rem; }
.pc--dark .pc-head h3 { font-size: 1.875rem; }
.pc-range { margin-top: .375rem; font-size: .875rem; color: rgba(15,36,87,.7); }
.pc--dark .pc-range { color: var(--blue-300); }
.pc-body { flex-grow: 1; padding: 1.5rem; }
.pc-amount { text-align: center; font-weight: 700; font-size: 2.25rem; line-height: 1.1; margin-bottom: .5rem; }
.pc--dark .pc-amount { font-size: 3rem; }
.pc-unit { text-align: center; font-size: .875rem; color: rgba(15,36,87,.7); }
.pc--dark .pc-unit { color: var(--blue-300); }
.pc-detail { text-align: center; font-size: .75rem; margin-top: .5rem; min-height: 1rem; color: rgba(15,36,87,.5); }
.pc--dark .pc-detail { color: rgba(147,197,253,.7); }
.pc-list { margin-top: 1.5rem; font-size: .875rem; display: grid; gap: .75rem; }
.pc-intro { font-weight: 600; }
.pc-item { display: flex; align-items: flex-start; gap: .5rem; }
.pc-item .ic { margin-top: .125rem; color: #16a34a; }
.pc--dark .pc-item .ic { color: var(--blue-400); }
.pc-more { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--blue-600); text-decoration: none; }
.pc-more:hover { text-decoration: underline; }
.pc-more .ic { width: 1rem; height: 1rem; }
.pc-body .pc-more { display: flex; width: 100%; margin-top: 1rem; padding: .5rem 0; }
.pc--dark .pc-more { color: var(--blue-300); }
.pc-foot { padding: 0 1.5rem 1.5rem; }
.btn-plan { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.5rem; padding: 0 1rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; text-decoration: none; background: var(--white); color: var(--blue-600); border: 1px solid var(--blue-600); transition: background .15s; }
.btn-plan:hover { background: #f3f4f6; }
.btn-plan--fill { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); }
.btn-plan--fill:hover { background: #3b82f6; }

/* Foncière et Entreprise */
.wide-card { max-width: 64rem; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; border-radius: .5rem; background: rgba(255,255,255,.8); border: 1px solid #e5e7eb; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
@media (min-width: 640px) { .wide-card { padding: 2rem; } }
@media (min-width: 768px) { .wide-card { flex-direction: row; align-items: center; } }
.wide-card + .wide-card { margin-top: 1.5rem; }
.wide-copy { flex: 1; }
.wide-copy h3 { font-size: 1.5rem; }
.wide-copy p { margin-top: .5rem; color: rgba(15,36,87,.7); }
.wide-actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
@media (min-width: 640px) { .wide-actions { flex-direction: row; align-items: center; } }
.wide-actions .btn-plan { width: auto; }
.wide-price { font-size: 1.5rem; font-weight: 700; text-align: center; }
@media (min-width: 640px) { .wide-price { margin-right: 1rem; } }
/* Ocre #99682d : blanc plein (4,80:1, AA), jamais de transparence sur ce fond */
.wide-card--ocre { background: #99682d; border-color: #99682d; color: var(--white); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.wide-card--ocre .wide-copy p { color: var(--white); }
.wide-card--ocre .wide-audience { margin: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.wide-card--ocre h3 { margin-top: .25rem; }
.btn-ocre { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; border-radius: .375rem; background: var(--white); color: #99682d; font-size: .875rem; font-weight: 700; text-decoration: none; }
.btn-ocre:hover { background: #fffbeb; }
.btn-ocre .ic { width: 1rem; height: 1rem; }

/* Actes à l'usage et engagement */
.terms { max-width: 64rem; margin: 2.5rem auto 0; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .terms { grid-template-columns: 1fr 1fr; } }
.terms-box { border-radius: .75rem; border: 1px solid rgba(15,36,87,.1); background: rgba(255,255,255,.6); padding: 1.5rem; }
.terms-box h3 { font-size: 1rem; margin-bottom: .75rem; }
.terms-box > p { font-size: .875rem; color: rgba(15,36,87,.8); }
.terms-box .terms-small { font-size: .75rem; color: rgba(15,36,87,.6); margin-top: .75rem; }
.acts { display: grid; gap: .75rem; font-size: .875rem; color: rgba(15,36,87,.8); }
.act-row { display: flex; justify-content: space-between; gap: 1rem; }
.act-price { font-weight: 600; white-space: nowrap; }
.act-detail { font-size: .75rem; color: rgba(15,36,87,.6); margin-top: .25rem; }

/* Simulateur */
.sim { max-width: 48rem; margin: 5rem auto 0; }
.sim-head { text-align: center; margin-bottom: 2rem; }
.sim-chip { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background: rgba(37,99,235,.1); padding: .25rem .75rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1d4ed8; }
.sim-chip .ic { width: 1rem; height: 1rem; }
.sim-head h2 { margin-top: 1rem; font-size: clamp(1.875rem, 4vw, 2.25rem); }
.sim-head p { margin-top: .75rem; color: rgba(15,36,87,.7); }
.sim-card { overflow: hidden; border-radius: 1.5rem; background: var(--white); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1), 0 0 0 1px rgba(15,36,87,.1); }
.sim-controls { background: linear-gradient(to bottom, rgba(239,246,255,.7), var(--white)); padding: 1.5rem; }
@media (min-width: 640px) { .sim-controls, .sim-results { padding: 2rem; } }
.sim-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .5rem; }
.sim-title .ic { color: var(--blue-600); }
.sim-sub { font-size: .875rem; color: rgba(15,36,87,.6); margin-bottom: 2rem; }
.sim-bubble-track { position: relative; height: 2.25rem; margin: 0 .75rem; }
.sim-bubble { position: absolute; transform: translateX(-50%); white-space: nowrap; border-radius: 9999px; background: var(--blue-600); padding: .375rem .75rem; font-size: .875rem; font-weight: 700; color: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
#sim-range { --pos: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; background: transparent; cursor: pointer; margin: 0; }
#sim-range::-webkit-slider-runnable-track { height: .625rem; border-radius: 9999px; background: linear-gradient(to right, #3b82f6, var(--blue-600)) 0 0 / var(--pos) 100% no-repeat, rgba(15,36,87,.1); }
#sim-range::-moz-range-track { height: .625rem; border-radius: 9999px; background: rgba(15,36,87,.1); }
#sim-range::-moz-range-progress { height: .625rem; border-radius: 9999px; background: linear-gradient(to right, #3b82f6, var(--blue-600)); }
#sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -.4375rem; border-radius: 9999px; background: var(--white); border: 2px solid var(--blue-600); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
#sim-range::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: var(--white); border: 2px solid var(--blue-600); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.sim-ticks { margin-top: .75rem; display: flex; justify-content: space-between; font-size: .75rem; color: rgba(15,36,87,.5); }
.sim-shortcuts { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.sim-shortcuts button { border: 0; cursor: pointer; font: inherit; border-radius: 9999px; padding: .375rem .75rem; font-size: .75rem; font-weight: 600; background: rgba(15,36,87,.05); color: rgba(15,36,87,.7); transition: background .15s; }
.sim-shortcuts button:hover { background: rgba(15,36,87,.1); }
.sim-shortcuts button[aria-pressed="true"] { background: var(--blue-600); color: var(--white); }
.sim-hint { margin-top: 1.5rem; display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: rgba(15,36,87,.7); }
.sim-hint .ic { width: 1rem; height: 1rem; margin-top: .125rem; color: var(--blue-600); }
.sim-results { border-top: 1px solid rgba(15,36,87,.1); background: rgba(239,246,255,.3); padding: 1.5rem; }
.sim-quotes { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sim-quotes.two { grid-template-columns: 1fr 1fr; } }
.qc { display: flex; flex-direction: column; border-radius: 1rem; background: var(--white); padding: 1.25rem; box-shadow: 0 0 0 1px rgba(15,36,87,.1); transition: box-shadow .15s; }
.qc:hover { box-shadow: 0 0 0 1px rgba(15,36,87,.1), 0 4px 6px -1px rgba(0,0,0,.1); }
.qc-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.qc-name { border-radius: 9999px; background: var(--blue-600); padding: .25rem .75rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--white); }
.qc-tag { border-radius: 9999px; background: rgba(15,36,87,.05); padding: .25rem .625rem; font-size: .75rem; font-weight: 600; color: rgba(15,36,87,.7); }
.qc-tagline { font-size: .875rem; color: rgba(15,36,87,.7); }
.qc-price { margin-top: .75rem; display: flex; align-items: baseline; gap: .5rem; }
.qc-amount { font-size: 2.25rem; font-weight: 700; color: var(--blue-600); font-variant-numeric: tabular-nums; }
.qc-per { font-size: .875rem; color: rgba(15,36,87,.6); }
.qc-breakdown { margin-top: .75rem; border-top: 1px dashed rgba(15,36,87,.15); padding-top: .75rem; font-size: .75rem; color: rgba(15,36,87,.7); }
.qc-saving { margin-top: .25rem; font-size: .75rem; font-weight: 600; color: #15803d; }
.qc-caveat { margin-top: .5rem; flex-grow: 1; font-size: .75rem; color: rgba(15,36,87,.6); }
.qc .qc-link { justify-content: flex-start; margin-top: .75rem; }
.sim-foot { margin-top: 1.5rem; font-size: .75rem; color: rgba(15,36,87,.6); }

/* Ce que couvre chaque plan */
.rights { max-width: 64rem; margin: 0 auto; overflow-x: auto; border-radius: .75rem; border: 1px solid rgba(15,36,87,.1); background: rgba(255,255,255,.6); }
.rights table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .875rem; }
.rights thead tr { border-bottom: 1px solid rgba(15,36,87,.1); }
.rights tbody tr { border-bottom: 1px solid rgba(15,36,87,.05); }
.rights tbody tr:last-child { border-bottom: 0; }
.rights th, .rights td { padding: 1rem; text-align: center; }
.rights thead th { font-weight: 600; }
.rights thead th:first-child { text-align: left; width: 33%; }
.rights tbody th { text-align: left; font-weight: 400; color: rgba(15,36,87,.8); }
.rights tbody th.em { font-weight: 600; color: var(--blue-950); }
.rights td { color: rgba(15,36,87,.7); }
.rights .ic { margin: 0 auto; display: block; }
.rights .ic-yes { color: #16a34a; }
.rights .ic-no { color: rgba(15,36,87,.25); }

/* CTA final */
.tarifs-cta { background: var(--navy); color: var(--white); padding: 5rem 0; text-align: center; }
@media (min-width: 640px) { .tarifs-cta { padding: 6rem 0; } }
.tarifs-cta .container { max-width: 48rem; }
.tarifs-cta h2 { font-size: clamp(1.875rem, 4vw, 2.25rem); margin-bottom: 1rem; }
.tarifs-cta p { color: var(--blue-100); font-size: 1.125rem; margin-bottom: 2rem; }
.tarifs-cta .btn-row { justify-content: center; }
.tarifs-cta .btn { border-radius: .5rem; font-weight: 700; }
.tarifs-cta .btn--outline-white { border-color: var(--white); }