/* ==================================================================================================
   Refonte visuelle : la vitrine de l'application (chargée après site.css)
   ================================================================================================== */

.icon { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }

/* --- Héro plus grand, avec bandeau de preuves ---------------------------------------------------- */
.hero h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); letter-spacing: -0.02em; max-width: 14ch; }
.hero .lead { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 0.8rem; }
.hero .eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--brass-light); }
.hero__facts { background: rgb(20 23 28 / 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgb(201 173 126 / 0.4); }
.hero__facts ul { list-style: none; margin: 0 auto; padding: 0; display: grid; }
.hero__facts li { padding: var(--s2); display: grid; gap: 0.15rem; border-bottom: 1px solid rgb(246 243 236 / 0.12); }
.hero__facts li:last-child { border-bottom: 0; }
.hero__facts strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--paper); }
.hero__facts span { font-size: 0.875rem; color: #C9C4B8; }
@media (min-width: 48rem) {
    .hero__facts ul { grid-template-columns: repeat(3, 1fr); }
    .hero__facts li { border-bottom: 0; border-right: 1px solid rgb(246 243 236 / 0.12); padding: var(--s3); }
    .hero__facts li:first-child { padding-left: 0; }
    .hero__facts li:last-child { border-right: 0; }
}
.hero--tall { min-height: clamp(36rem, 92svh, 60rem); }

/* --- Rythme et finition générale ---------------------------------------------------------------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; }
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.7; }
h2 { letter-spacing: -0.015em; }
.card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--brass); box-shadow: 0 14px 30px -18px rgb(20 23 28 / 0.35); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
.section--app { background: radial-gradient(60rem 28rem at 85% 0%, rgb(156 124 78 / 0.22), transparent 70%), linear-gradient(180deg, #14171C 0%, #1B2027 100%); }
.section--app .lead { max-width: 44rem; }

/* --- Vitrine : deux espaces, six fonctions ------------------------------------------------------ */
.showcase { margin-top: var(--s4); }
.showcase__radio { position: absolute; opacity: 0; pointer-events: none; }
.showcase__tabs { display: inline-flex; padding: 0.3rem; margin-bottom: var(--s4); border: 1px solid rgb(201 173 126 / 0.45); border-radius: 999px; background: rgb(246 243 236 / 0.04); }
.showcase__tabs label { cursor: pointer; padding: 0.6rem 1.4rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: #D9D4C8; transition: background 0.25s, color 0.25s; }
.showcase__radio:nth-of-type(1):checked ~ .showcase__tabs label:nth-child(1),
.showcase__radio:nth-of-type(2):checked ~ .showcase__tabs label:nth-child(2) { background: #8A6B3F; color: #fff; }
.showcase__radio:focus-visible ~ .showcase__tabs { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--brass-light); }
.showcase__panel { display: none; gap: var(--s4); align-items: center; }
.showcase__radio:nth-of-type(1):checked ~ .showcase__panels .showcase__panel--seller,
.showcase__radio:nth-of-type(2):checked ~ .showcase__panels .showcase__panel--buyer { display: grid; }
@media (min-width: 56rem) { .showcase__panel { grid-template-columns: 0.8fr 1.2fr; gap: var(--s5); } }
.showcase__text h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--paper); }
.showcase__text p { color: #D9D4C8; }
.showcase__note { margin-top: var(--s2); color: #A5A9B1; text-align: center; }
.showcase__cta { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }

.features { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s5); } }
.features li { border-top: 1px solid rgb(201 173 126 / 0.4); padding-top: var(--s3); }
.features__icon { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-light); margin-bottom: var(--s2); }
.features h3 { font-size: 1.3rem; color: var(--paper); margin-bottom: 0.3rem; }
.features p { margin: 0; color: #C9C4B8; font-size: 0.975rem; }

/* --- Fenêtre d'application (aperçu fictif) -------------------------------------------------------- */
.appwin { margin: 0; border-radius: 10px; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -25px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(246 243 236 / 0.08); }
.appwin__bar { display: flex; align-items: center; gap: 6px; padding: 0.65rem 0.9rem; background: #E7E2D6; border-bottom: 1px solid var(--stone); }
.appwin__bar span { width: 10px; height: 10px; border-radius: 50%; background: #C9C3B4; }
.appwin__bar span:first-child { background: #C98B7E; }
.appwin__bar span:nth-child(2) { background: #D2B77C; }
.appwin__bar span:nth-child(3) { background: #9CB08F; }
.appwin__bar em { margin-left: 0.8rem; font-style: normal; font-size: 0.75rem; color: var(--muted); background: var(--paper); padding: 0.15rem 0.8rem; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appwin__body { padding: var(--s3); font-size: 0.9375rem; }
.appwin__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s2); }
.appwin__head h3 { margin: 0; font-size: 1.5rem; color: var(--ink); }
.appwin__kicker { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-dark); }
.appwin__title { font-family: var(--serif); font-size: 1.15rem; margin: var(--s2) 0 var(--s1); color: var(--ink); }
.badge { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.badge--ok { background: var(--success-bg); color: var(--success); }
.appwin__table { width: 100%; border-collapse: collapse; }
.appwin__table th { text-align: left; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.4rem 0; border-bottom: 1px solid var(--stone); }
.appwin__table th:last-child, .appwin__table td:last-child { text-align: right; }
.appwin__table td { padding: 0.6rem 0; border-bottom: 1px solid var(--sunk); vertical-align: middle; color: var(--ink); }
.pill { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.pill--1 { background: #EDE6D8; color: var(--brass-dark); }
.pill--2 { background: #D9CDB5; color: #5E4A2A; }
.pill--3 { background: var(--ink); color: var(--paper); }
.redact { display: inline-block; width: 3.2rem; height: 0.8em; margin-left: 0.4rem; border-radius: 2px; background: var(--ink); vertical-align: -0.05em; }
.appwin__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s2); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--stone); font-size: 0.8125rem; color: var(--slate); }
.appwin__foot > span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; }
.appwin__foot .icon { width: 1.1rem; height: 1.1rem; color: var(--brass-dark); }
.appwin__link { color: var(--brass-dark); font-weight: 500; }
.appwin__steps { list-style: none; margin: 0 0 var(--s1); padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.appwin__steps li { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.75rem; background: var(--sunk); color: var(--muted); }
.appwin__steps li .icon { width: 0.9rem; height: 0.9rem; }
.appwin__steps .is-done { background: var(--success-bg); color: var(--success); }
.appwin__steps .is-now { background: var(--ink); color: var(--paper); }
.appwin__list { list-style: none; margin: 0; padding: 0; display: grid; }
.appwin__list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 0.8rem 0; border-bottom: 1px solid var(--sunk); }
.appwin__list li > div { display: grid; gap: 0.1rem; min-width: 0; }
.appwin__list strong { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.appwin__list span { color: var(--slate); }
.appwin__list small { color: var(--muted); font-size: 0.78rem; }
.btn-mock { flex-shrink: 0; padding: 0.4rem 0.9rem; border: 1px solid var(--ink); border-radius: 2px; font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.btn-mock--brass { background: #8A6B3F; border-color: #8A6B3F; color: #fff; }
@media (max-width: 40rem) {
    .appwin__body { padding: var(--s2); }
    .appwin__list li { flex-direction: column; align-items: flex-start; }
    .appwin__bar em { display: none; }
}

/* Composition du héro : texte à gauche, sujet de la photo préservé */
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); max-width: 16ch; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(20 23 28 / 0.72) 0%, rgb(20 23 28 / 0.35) 45%, transparent 75%); }
@media (min-width: 56rem) { .hero .lead { max-width: 30rem; } }
@media (max-width: 55.99rem) { .hero::before { background: linear-gradient(180deg, transparent 20%, rgb(20 23 28 / 0.55) 100%); } }

/* Les aperçus d'application restent clairs, même posés sur une section sombre */
.section--dark .appwin p, .section--dark .appwin h3, .section--dark .appwin td, .section--dark .appwin li { color: var(--ink); }
.section--dark .appwin .appwin__kicker, .section--dark .appwin .appwin__link { color: var(--brass-dark); }
.section--dark .appwin .appwin__foot, .section--dark .appwin .appwin__foot span, .section--dark .appwin small, .section--dark .appwin .appwin__list span { color: var(--slate); }
.section--dark .appwin .appwin__table th { color: var(--muted); }
.section--dark .appwin .pill--1 { color: var(--brass-dark); }
.section--dark .appwin .pill--2 { color: #5E4A2A; }
.section--dark .appwin .pill--3, .section--dark .appwin .appwin__steps .is-now { color: var(--paper); }
.section--dark .appwin .appwin__steps li { color: var(--muted); }
.section--dark .appwin .appwin__steps .is-done { color: var(--success); }
.section--dark .appwin .btn-mock--brass { color: #fff; }
.section--dark .appwin .badge--ok { color: var(--success); }