/* Accords & Saveurs (F-0028) — charte F-0007 : olive #4F5D2F, ocre #E2A54A, terracotta #B4532A, fond #FAF8F1. */
:root {
  --cv-olive: #4f5d2f;
  --cv-ink: #26301a;
  --cv-soft: #5b6350;
  --cv-ocre: #e2a54a;
  --cv-terra: #b4532a;
  --cv-bg: #faf8f1;
  --cv-field: #f3f4ec;
  --cv-line: #e7e9dd;
  --cv-title: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --cv-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
.cv-body {
  margin: 0; background: var(--cv-bg); color: var(--cv-ink); font-family: var(--cv-sans);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none;
}
.cv-body button, .cv-body a { font-family: inherit; touch-action: manipulation; }
.cv-app { display: flex; flex-direction: column; height: 100dvh; max-width: 1180px; margin: 0 auto; position: relative; }
.cv-main { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 8px 18px 112px; }
.cv-main::-webkit-scrollbar { display: none; }
.is-borne .cv-main { padding-bottom: 28px; }
.cv-in > * { animation: cv-up 300ms ease both; }
@keyframes cv-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cv-in > * { animation: none; } }

/* En-tête */
.cv-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 18px 10px; }
.cv-back { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(38, 48, 26, .14); font-size: 22px; color: var(--cv-ink); cursor: pointer; flex: none; }
.cv-back--ghost { visibility: hidden; }
.cv-brand { flex: 1; display: grid; line-height: 1.15; }
.cv-brand strong { font-family: var(--cv-title); font-weight: 800; font-size: 20px; }
.cv-brand span { font-size: 12px; color: var(--cv-soft); }
.cv-count { font-size: 13px; font-weight: 600; color: var(--cv-soft); }
.cv-restart { min-height: 56px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--cv-field); font-weight: 700; font-size: 16px; color: var(--cv-ink); cursor: pointer; }

/* Accueil */
.cv-hero { background: var(--cv-olive); color: #fff; border-radius: 28px; padding: 28px 24px; margin: 6px 0 16px; }
.cv-kicker { margin: 0 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #eef1e2; }
.cv-hero h1 { margin: 0 0 8px; font-family: var(--cv-title); font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -.02em; }
.cv-hero p:last-child { margin: 0; color: #eef1e2; }
.cv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cv-tile { display: grid; align-content: space-between; gap: 6px; min-height: 148px; padding: 18px; border: 0; border-radius: 24px; background: var(--tile, var(--cv-olive)); color: #fff; text-align: left; cursor: pointer; }
.cv-tile-ic { font-size: 34px; }
.cv-tile strong { font-family: var(--cv-title); font-size: 20px; }
.cv-tile small { font-size: 13px; opacity: .9; }

/* Étapes */
.cv-progress { height: 6px; border-radius: 3px; background: var(--cv-line); margin: 6px 0 14px; overflow: hidden; }
.cv-progress i { display: block; height: 100%; background: var(--cv-olive); transition: width 300ms; }
.cv-q { font-family: var(--cv-title); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 0 0 16px; letter-spacing: -.02em; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cv-card { display: grid; justify-items: start; gap: 4px; min-height: 96px; padding: 16px; background: #fff; border: 1px solid var(--cv-line); border-radius: 20px; color: var(--cv-ink); text-align: left; cursor: pointer; }
.cv-card:active, .cv-tile:active, .cv-result:active { transform: scale(.98); }
.cv-card-ic { font-size: 30px; }
.cv-card img { width: 100%; height: 96px; object-fit: cover; border-radius: 14px; }
.cv-card strong { font-size: 17px; }
.cv-card small { color: var(--cv-soft); font-size: 13px; }
.cv-empty, .cv-loading { color: var(--cv-soft); padding: 24px 4px; }

/* Résultats */
.cv-context { margin: 0 0 4px; color: var(--cv-terra); font-weight: 700; font-size: 14px; }
.cv-results { display: grid; gap: 12px; }
.cv-result { display: grid; grid-template-columns: 112px 1fr; gap: 14px; min-height: 96px; padding: 12px; background: #fff; border: 1px solid var(--cv-line); border-radius: 22px; text-align: left; color: var(--cv-ink); cursor: pointer; }
.cv-result-photo { display: grid; place-items: center; background: var(--cv-field); border-radius: 16px; overflow: hidden; aspect-ratio: 1; font-size: 38px; }
.cv-result-photo img, .cv-sheet-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-result-body { display: grid; align-content: start; gap: 3px; }
.cv-result-body small { color: var(--cv-olive); font-weight: 600; font-size: 12px; }
.cv-result-body strong { font-family: var(--cv-title); font-size: 18px; line-height: 1.15; }
.cv-why { color: #3e4632; font-size: 14px; line-height: 1.35; }
.cv-price { display: flex; justify-content: space-between; align-items: center; font-family: var(--cv-title); font-weight: 800; font-size: 18px; margin-top: 4px; }
.cv-price b { font-family: var(--cv-sans); font-size: 14px; color: var(--cv-terra); }
.cv-badge { justify-self: start; display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--cv-terra); color: #fff; font-size: 12px; font-weight: 700; }
.cv-total { margin: 14px 4px 0; font-size: 18px; }
.cv-notice { margin: 14px 4px 0; font-size: 12px; color: var(--cv-soft); }

/* Fiche produit */
.cv-sheet { display: grid; gap: 16px; }
.cv-sheet-photo { display: grid; place-items: center; background: var(--cv-field); border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; font-size: 72px; }
.cv-sheet-body { display: grid; gap: 10px; align-content: start; }
.cv-sheet-body h2 { margin: 0; font-family: var(--cv-title); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.cv-meta { margin: 0; color: var(--cv-soft); }
.cv-sheet-why { margin: 0; padding: 14px 16px; background: #eef1e2; border-radius: 18px; line-height: 1.4; }
.cv-maker { display: grid; gap: 2px; padding: 12px 16px; background: #f6e7cf; border-radius: 18px; }
.cv-maker span { color: #7a4a1e; font-size: 14px; }
.cv-sheet-price { margin: 0; font-family: var(--cv-title); font-weight: 800; font-size: 32px; }
.cv-actions { display: grid; gap: 10px; }
.cv-btn { min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--cv-olive); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; }
.cv-btn--ghost { background: var(--cv-ink); }
.cv-btn.is-done { background: var(--cv-ink); }
.cv-btn:disabled { opacity: .6; }
.cv-link { background: none; border: 0; padding: 8px; color: inherit; text-decoration: underline; cursor: pointer; font-size: inherit; }

/* Demander / QR */
.cv-ask { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px 6px; }
.cv-ask-ic { font-size: 56px; }
.cv-ask h2 { font-family: var(--cv-title); font-weight: 800; font-size: 28px; margin: 0; letter-spacing: -.02em; }
.cv-ask-card { display: grid; gap: 6px; width: 100%; max-width: 520px; padding: 20px; background: #fff; border: 2px solid var(--cv-olive); border-radius: 24px; }
.cv-ask-card strong { font-family: var(--cv-title); font-size: 22px; }
.cv-shelf { padding: 10px 14px; background: #f6e7cf; border-radius: 14px; font-weight: 700; }
.cv-qr { width: 260px; height: 260px; image-rendering: pixelated; background: #fff; padding: 12px; border-radius: 20px; }

/* Barre d'onglets, installation, inactivité */
.cv-tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; display: flex; gap: 4px; padding: 6px; border-radius: 26px; background: var(--cv-ink); box-shadow: 0 12px 30px rgba(38, 48, 26, .35); }
.cv-tab { flex: 1; display: grid; justify-items: center; gap: 1px; min-height: 52px; padding: 6px 0; border-radius: 20px; color: #c9cfb8; font-size: 11px; text-decoration: none; }
.cv-tab span { font-size: 18px; }
.cv-tab.is-on { background: var(--cv-olive); color: #fff; }
.cv-install { margin: 14px 0 0; padding: 12px 16px; background: #fff; border: 1px solid var(--cv-line); border-radius: 18px; font-size: 14px; color: var(--cv-soft); }
#cv-overlay:empty { display: none; }
.cv-idle { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(38, 48, 26, .9); color: #fff; text-align: center; font-size: 20px; }
.cv-idle strong { font-family: var(--cv-title); font-size: 36px; }

/* Tablette et borne : cibles plus grandes, mise en page en colonnes */
@media (min-width: 700px) {
  .cv-main { padding: 12px 40px 112px; }
  .is-borne .cv-main { padding-bottom: 40px; }
  .cv-hero { padding: 40px; }
  .cv-hero h1 { font-size: 52px; max-width: 14ch; }
  .cv-tiles { grid-template-columns: repeat(4, 1fr); }
  .cv-tile { min-height: 220px; }
  .cv-grid { grid-template-columns: repeat(3, 1fr); }
  .cv-card { min-height: 130px; }
  .cv-q { font-size: 40px; }
  .cv-results { grid-template-columns: repeat(3, 1fr); }
  .cv-result { grid-template-columns: 1fr; }
  .cv-result-photo { aspect-ratio: 4 / 3; }
  .cv-sheet { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cv-sheet-photo { aspect-ratio: 1; }
  .cv-sheet-body h2 { font-size: 40px; }
  .cv-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) { .cv-actions .cv-btn, .cv-restart { min-height: 48px; } }