/* =========================================================
   E'POTTO, Questionnaire complet (wizard) + classement
   Layout app : sidebar de progression (gauche) + question (droite)
   S'appuie sur les variables --s-* de styles.css
   ========================================================= */
.qz-body { min-height: 100dvh; background: #f7f6f8; color: var(--ink); overflow-x: hidden; }

/* décor pastel discret, teinté saison */
.qz-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 40% at 12% 8%, var(--s-g1a), transparent 70%),
    radial-gradient(42% 38% at 90% 6%, var(--s-g2a), transparent 72%),
    radial-gradient(50% 45% at 88% 100%, var(--s-g3b), transparent 72%),
    linear-gradient(180deg, #fbfafc, #f4f3f6);
  opacity: .9; transition: background .5s ease;
}

.glass {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 26px 56px -26px rgba(40,30,50,.3), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ============ GRILLE APP ============ */
.qz {
  max-width: 1120px; margin: 0 auto; min-height: 100dvh;
  display: grid; grid-template-columns: 300px 1fr; gap: 26px;
  padding: 26px 24px 40px; align-items: start;
}
.qz[hidden] { display: none; }

/* ============ SIDEBAR ============ */
.qz-side {
  position: sticky; top: 26px;
  border-radius: 24px; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.qz-side-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qz-back { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); transition: color .15s ease; }
.qz-back svg { width: 15px; height: 15px; }
.qz-back:hover { color: var(--ink); }
.qz-season { display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.6); }
.ts-btn { width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; background: transparent; padding: 2px; display: inline-flex; opacity: .5; transition: opacity .15s ease, box-shadow .15s ease, transform .15s ease; }
.ts-btn img { width: 100%; height: 100%; object-fit: contain; }
.ts-btn:hover { opacity: .85; transform: scale(1.1); }
.ts-btn[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--s-accent); }

.qz-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; color: var(--s-accent); transition: color .35s ease; }

.qz-progress { display: flex; flex-direction: column; gap: 7px; }
.qz-progress-bar { height: 7px; border-radius: 999px; background: var(--s-accent-soft); overflow: hidden; }
.qz-progress-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s-accent); width: 0; transition: width .4s cubic-bezier(.2,.7,.3,1); }
.qz-progress-meta { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.qz-progress-meta b { color: var(--s-accent-deep); font-family: var(--font-display); }

/* stepper des 8 sections */
.qz-steps { display: flex; flex-direction: column; gap: 2px; }
.qz-step { display: flex; align-items: flex-start; gap: 11px; padding: 9px 9px; border-radius: 12px; transition: background .15s ease; }
.qz-step.is-current { background: var(--s-soft); }
.qz-step-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7); color: var(--muted); border: 1px solid rgba(40,30,50,.07);
  transition: background .2s ease, color .2s ease;
}
.qz-step-ico svg { width: 16px; height: 16px; }
.qz-step.is-current .qz-step-ico { background: var(--s-accent); color: #fff; border-color: transparent; }
.qz-step.is-done .qz-step-ico { background: var(--s-accent-soft); color: var(--s-accent-deep); border-color: transparent; }
.qz-step-txt { min-width: 0; padding-top: 1px; }
.qz-step-name { font-family: var(--font-display); font-weight: 600; font-size: .86rem; color: var(--ink); line-height: 1.2; }
.qz-step.is-upcoming .qz-step-name { color: var(--muted); }
.qz-step-desc { font-size: .72rem; color: var(--muted); line-height: 1.3; margin-top: 2px; display: none; }
.qz-step.is-current .qz-step-desc { display: block; }
.qz-side-note { margin-top: auto; font-size: .74rem; color: var(--muted); text-align: center; padding-top: 6px; }

/* ============ ZONE QUESTION ============ */
.qz-main { display: flex; flex-direction: column; min-height: calc(100dvh - 66px); }
.qz-card { border-radius: 24px; padding: 30px 30px 24px; display: flex; flex-direction: column; }
.qz-sec { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-accent-deep); }
.qz-sec svg { width: 15px; height: 15px; }
.qz-q-title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 1.95rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.qz-q-sub { margin-top: 9px; color: var(--muted); font-size: .96rem; line-height: 1.5; text-wrap: pretty; }
.qz-field { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }

/* options (radio / choix / multi) */
.opt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 16px; border-radius: 15px; cursor: pointer;
  background: rgba(255,255,255,.7); border: 1.5px solid rgba(40,30,50,.1);
  font-family: var(--font-text); color: var(--ink);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.opt:hover { border-color: var(--s-accent); background: #fff; }
.opt:active { transform: scale(.995); }
.opt:focus-visible { outline: none; border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-accent-soft); }
.opt.sel { border-color: var(--s-accent); background: var(--s-soft); box-shadow: 0 0 0 3px var(--s-accent-soft); }
.opt-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(40,30,50,.2); display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, background .15s ease; }
.opt.multi .opt-mark { border-radius: 7px; }
.opt-mark svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; }
.opt.sel .opt-mark { border-color: var(--s-accent); background: var(--s-accent); }
.opt.sel .opt-mark svg { opacity: 1; transform: none; }
.opt-body { flex: 1; min-width: 0; }
.opt-label { font-weight: 600; font-size: .96rem; }
.opt-desc { display: block; font-size: .82rem; color: var(--muted); line-height: 1.4; margin-top: 3px; }

/* slider */
.range-wrap { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px; }
.range-val { text-align: center; }
.range-val b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 2.8rem); color: var(--s-accent-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.range-val span { display: block; color: var(--muted); margin-top: 4px; font-size: .9rem; }
.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; cursor: pointer;
  background: var(--s-accent-soft); outline: none;
}
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--s-accent); border: 3px solid #fff; box-shadow: 0 3px 10px -2px var(--s-shadow); cursor: pointer; }
.range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--s-accent); border: 3px solid #fff; box-shadow: 0 3px 10px -2px var(--s-shadow); cursor: pointer; }
.range:focus-visible { box-shadow: 0 0 0 3px var(--s-accent-soft); }
.range-ends { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); }

/* texte */
.qz-input, .qz-textarea {
  width: 100%; font-family: var(--font-text); font-size: .96rem; color: var(--ink);
  padding: 13px 15px; border-radius: 13px; background: rgba(255,255,255,.85); border: 1.5px solid rgba(40,30,50,.1);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qz-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.qz-input:focus, .qz-textarea:focus { outline: none; border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-accent-soft); }
.qz-input::placeholder, .qz-textarea::placeholder { color: var(--muted); }
.qz-skip-note { font-size: .8rem; color: var(--muted); }

/* navigation */
.qz-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.qz-prev {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: var(--ink); padding: 13px 18px; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,.6); border: 1px solid rgba(40,30,50,.1); transition: background .15s ease, opacity .15s ease;
}
.qz-prev svg { width: 16px; height: 16px; }
.qz-prev:hover { background: #fff; }
.qz-prev[disabled] { opacity: 0; pointer-events: none; }
.qz-next {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: #fff;
  padding: 14px 26px; border-radius: 13px; cursor: pointer; border: none; background: var(--s-accent);
  box-shadow: 0 14px 28px -12px var(--s-shadow); transition: background .16s ease, transform .12s ease, box-shadow .16s ease, opacity .16s ease;
}
.qz-next svg { width: 18px; height: 18px; }
.qz-next:hover { background: var(--s-accent-deep); transform: translateY(-1px); }
.qz-next:active { transform: translateY(0) scale(.99); }
.qz-next[disabled] { opacity: .4; pointer-events: none; box-shadow: none; }
.qz-next:focus-visible, .qz-prev:focus-visible { outline: 3px solid var(--s-accent-soft); outline-offset: 2px; }

/* animation d'entrée de la carte (transform/opacity) */
.qz-card.swap { animation: qzIn .26s var(--ease-out) both; }
@keyframes qzIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ CHARGEMENT ============ */
.qz-loader { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.qz-loader[hidden] { display: none; }
.qz-loader-mark { width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--s-accent-soft); border-top-color: var(--s-accent); animation: cbSpin .9s linear infinite; }
.qz-loader p { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.qz-loader small { color: var(--muted); }
@keyframes cbSpin { to { transform: rotate(360deg); } }

/* ============ RÉSULTATS ============ */
.results { max-width: 920px; margin: 0 auto; padding: 26px 22px 80px; display: flex; flex-direction: column; gap: 18px; }
.results[hidden] { display: none; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-radius: 20px; padding: 18px 22px; }
.results-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem,3.5vw,1.85rem); letter-spacing: -.02em; }
.recap { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.recap span { font-size: .8rem; font-weight: 600; color: var(--s-accent-deep); padding: 5px 11px; border-radius: 999px; background: var(--s-soft); border: 1px solid var(--s-accent-soft); }
.btn-ghost { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); padding: 11px 16px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.7); border: 1px solid rgba(40,30,50,.1); transition: background .16s ease, border-color .16s ease; }
.btn-ghost svg { width: 17px; height: 17px; }
.btn-ghost:hover { background: #fff; border-color: var(--s-accent); }
.btn-ghost:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 1px; }

.hero-card { border-radius: 24px; padding: 26px; position: relative; }
.hero-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rank-badge { font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: .03em; color: #fff; background: var(--s-accent); padding: 5px 12px; border-radius: 999px; text-transform: uppercase; }
.score-ring { position: relative; flex: none; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--s-accent) calc(var(--val) * 1%), var(--s-accent-soft) 0); }
.score-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.score-ring b { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--s-accent-deep); }
.score-ring b small { font-size: .7rem; }
.score-cap { font-size: .74rem; color: var(--muted); text-align: center; margin-top: 3px; }
.hero-id { flex: 1; min-width: 190px; }
.hero-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem,3.4vw,1.9rem); letter-spacing: -.02em; margin-top: 10px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font-size: .78rem; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.75); border: 1px solid rgba(40,30,50,.08); padding: 4px 10px; border-radius: 999px; }
.hero-price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); margin-top: 12px; }
.hero-price small { font-weight: 600; font-size: .8rem; color: var(--muted); }
.spec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.spec { background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.6); border-radius: 14px; padding: 12px 10px; text-align: center; }
.spec b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.spec span { font-size: .72rem; color: var(--muted); }
.hero-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.block-h { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.block-h svg { width: 18px; height: 18px; color: var(--s-accent); }
.forts { display: flex; flex-direction: column; gap: 9px; }
.forts li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.forts li svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--s-accent); }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.bar-line .lbl { font-size: .82rem; color: var(--muted); }
.bar-line .val { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; }
.bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--s-accent-soft); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s-accent); transform-origin: left; transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.is-shown .bar > i { transform: scaleX(var(--v)); }
.vigilance { margin-top: 4px; font-size: .86rem; line-height: 1.45; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.vigilance svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #c2705f; }

.rank-h { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 6px 2px 10px; }
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-item { border-radius: 16px; overflow: hidden; }
.rank-row { width: 100%; display: grid; grid-template-columns: 34px 1fr 150px 20px; align-items: center; gap: 12px; padding: 14px 16px; border: none; cursor: pointer; text-align: left; background: rgba(255,255,255,.6); transition: background .16s ease; }
.rank-row:hover { background: rgba(255,255,255,.85); }
.rank-row:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -2px; }
.rank-pos { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--s-accent-deep); text-align: center; font-variant-numeric: tabular-nums; }
.rank-id strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .96rem; color: var(--ink); }
.rank-id em { font-style: normal; font-size: .78rem; color: var(--muted); }
.rank-score { display: flex; align-items: center; gap: 9px; }
.rank-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--s-accent-soft); overflow: hidden; }
.rank-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s-accent); transform-origin: left; transform: scaleX(var(--v)); }
.rank-score b { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; }
.rank-caret { width: 20px; height: 20px; color: var(--muted); transition: transform .2s ease; }
.rank-row[aria-expanded="true"] .rank-caret { transform: rotate(180deg); }
.rank-detail { padding: 4px 16px 18px; background: rgba(255,255,255,.42); }
.rank-detail[hidden] { display: none; }
.rank-detail .inner { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.rank-detail.in .inner { opacity: 1; transform: none; }
.rank-detail .spec-row { grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.rank-detail .hero-cols { margin-top: 18px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .qz { grid-template-columns: 1fr; gap: 16px; padding: 16px 16px 32px; }
  .qz-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; }
  .qz-brand { order: -1; }
  .qz-progress { flex: 1; min-width: 160px; order: 3; }
  .qz-steps { display: none; }                 /* on garde la barre + le compteur en mobile */
  .qz-side-note { display: none; }
  .qz-side-top { order: -2; width: 100%; }
  .qz-main { min-height: 0; }
  .hero-cols { grid-template-columns: 1fr; gap: 18px; }
  .spec-row { grid-template-columns: repeat(2, 1fr); }
  .rank-detail .spec-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .qz-card { padding: 24px 18px 20px; }
  .hero-card { padding: 20px; }
  .rank-row { grid-template-columns: 28px 1fr 86px 18px; gap: 9px; padding: 13px; }
  .rank-score .rank-bar { display: none; }
  .qz-next { padding: 13px 20px; }
}

/* ============ ACCESSIBILITÉ ============ */
@media (prefers-reduced-motion: reduce) {
  .qz-bg, .qz-progress-bar > i, .bar > i, .rank-caret, .rank-detail .inner,
  .qz-next, .qz-prev, .ts-btn, .qz-back, .opt, .qz-card.swap { transition: none; animation: none; }
  .qz-loader-mark { animation: none; }
}

/* =========================================================
   FUSION MOTEUR : autocomplétion + résultats enrichis
   ========================================================= */
#resultBody { display: flex; flex-direction: column; gap: 18px; }
.results-meta { font-size: .85rem; color: var(--muted); margin: 2px 2px -4px; font-variant-numeric: tabular-nums; }

/* autocomplétion */
.ac-wrap { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; background: #fff; border: 1px solid rgba(40,30,50,.12); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(40,30,50,.4); overflow: hidden auto; max-height: 280px; }
.ac-list:empty { display: none; }
.ac-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 11px 14px; border: none; background: transparent; cursor: pointer; font-size: .92rem; color: var(--ink); }
.ac-item:hover { background: var(--s-soft); }
.ac-item span { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ac-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--s-accent-deep); background: var(--s-soft); border: 1px solid var(--s-accent-soft); padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.ac-chip b { font-weight: 700; opacity: .7; }
.ac-chip:hover { border-color: var(--s-accent); }

/* carte voiture : compléments */
.hero-version { font-size: .9rem; color: var(--muted); margin-top: 3px; }
.why-just { font-size: .9rem; line-height: 1.55; color: var(--muted); margin-top: 10px; }
.forts.vig li svg { color: #c2705f; }

.fiab { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 13px 16px; border-radius: 14px; background: var(--s-soft); }
.fiab-score { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; }
.fiab-score small { font-size: .7rem; font-weight: 700; }
.fiab b { font-family: var(--font-display); font-size: .92rem; color: var(--ink); display: block; }
.fiab span { font-size: .82rem; color: var(--muted); }

.ressenti { margin-top: 20px; }
.ressenti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ress { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6); border-radius: 12px; padding: 11px 13px; }
.ress b { display: block; font-family: var(--font-display); font-size: .82rem; color: var(--s-accent-deep); margin-bottom: 3px; }
.ress span { font-size: .85rem; line-height: 1.45; color: var(--ink); }

.tco { margin-top: 20px; }
.tco-rows { display: flex; flex-direction: column; gap: 1px; background: rgba(40,30,50,.06); border-radius: 12px; overflow: hidden; }
.tco-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: rgba(255,255,255,.72); font-size: .9rem; color: var(--ink); }
.tco-row b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.tco-total { background: var(--s-soft); }
.tco-total b { color: var(--s-accent-deep); font-size: 1.05rem; }
.tco-aides { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.tco-note { font-size: .78rem; color: var(--muted); margin-top: 8px; }

.fiche { margin-top: 16px; border-top: 1px solid rgba(40,30,50,.08); padding-top: 12px; }
.fiche summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--s-accent-deep); list-style: none; }
.fiche summary::-webkit-details-marker { display: none; }
.fiche summary::before { content: '+ '; font-weight: 700; }
.fiche[open] summary::before { content: '\2013 '; }
.fiche-grid { display: flex; flex-direction: column; margin-top: 12px; }
.fiche-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(40,30,50,.06); font-size: .88rem; }
.fiche-row span { color: var(--muted); }
.fiche-row b { font-weight: 600; color: var(--ink); }

/* panneaux carburant / bornes / aides / priorités */
.panel { border-radius: 20px; padding: 22px; }
.st-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.st { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.6); }
.st-id b { font-family: var(--font-display); font-size: .9rem; color: var(--ink); }
.st-id span { display: block; font-size: .78rem; color: var(--muted); }
.st-prices { display: flex; flex-wrap: wrap; gap: 6px; }
.fp { font-size: .78rem; color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid rgba(40,30,50,.08); border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }
.fp b { color: var(--s-accent-deep); font-weight: 700; }
.muted-count { font-weight: 400; font-size: .8rem; color: var(--muted); }
.aids { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.aid { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.6); }
.aid b { font-family: var(--font-display); font-size: .9rem; color: var(--ink); display: block; }
.aid span { font-size: .84rem; color: var(--muted); }

@media (max-width: 620px) {
  .ressenti-grid { grid-template-columns: 1fr; }
  .fiche-row { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   RÉSULTATS V2 (maquette : hero + onglets + colonnes + carte)
   ========================================================= */
.results { max-width: 1060px; }
#resultBody { display: flex; flex-direction: column; gap: 16px; }
.card { border-radius: 20px; padding: 22px; }
.results-foot { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.recap span svg { width: 13px; height: 13px; vertical-align: -2px; }
.recap-pin { color: var(--s-accent-deep) !important; }

/* HERO */
.hero2 { display: flex; align-items: center; gap: 22px; border-radius: 24px; padding: 24px 26px; }
.hero2-left { flex: none; text-align: center; }
.hero2-info { flex: 1; min-width: 0; }
.hero2-info .hero-name { margin-top: 6px; }
.hero2-price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--ink); margin-top: 12px; font-variant-numeric: tabular-nums; }
.hero2-price small { font-size: .85rem; font-weight: 600; color: var(--muted); }
.hero2-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn-accent { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; background: var(--s-accent); border: none; border-radius: 12px; padding: 12px 18px; cursor: pointer; box-shadow: 0 12px 24px -12px var(--s-shadow); transition: background .16s ease, transform .12s ease; }
.btn-accent:hover { background: var(--s-accent-deep); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0) scale(.99); }
.btn-ghost2 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid rgba(40,30,50,.12); border-radius: 12px; padding: 12px 18px; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.btn-ghost2:hover { border-color: var(--s-accent); background: #fff; }
.hero2-photo { flex: none; width: 300px; max-width: 38%; border-radius: 18px; background: linear-gradient(150deg, var(--s-soft), #fff); display: flex; align-items: center; justify-content: center; padding: 16px; align-self: stretch; }
.car-illu { width: 100%; }
.car-illu svg { width: 100%; height: auto; display: block; }

/* PODIUM (onglets) */
.podium { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pod { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; padding: 13px 14px; border-radius: 16px; cursor: pointer; background: rgba(255,255,255,.62); border: 1.5px solid rgba(40,30,50,.08); transition: border-color .16s ease, transform .12s ease, background .16s ease; }
.pod:hover { border-color: var(--s-accent); transform: translateY(-2px); }
.pod-on { border-color: var(--s-accent); background: var(--s-soft); box-shadow: 0 12px 26px -16px var(--s-shadow); }
.pod-n { font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: #fff; background: var(--s-accent); width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.pod-id b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink); line-height: 1.2; }
.pod-id span { font-size: .76rem; color: var(--muted); }
.pod-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--s-accent-soft); overflow: hidden; margin-top: 2px; }
.pod-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s-accent); transform-origin: left; transform: scaleX(var(--v)); }
.pod-pc { font-family: var(--font-display); font-weight: 800; font-size: .85rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; }

/* GRILLES */
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dt-wrap { display: flex; flex-direction: column; gap: 18px; }

/* comparatif */
.cmp-wrap { overflow-x: auto; margin-top: 6px; }
.cmp { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cmp th, .cmp td { padding: 9px 10px; text-align: center; border-bottom: 1px solid rgba(40,30,50,.07); }
.cmp td:first-child, .cmp th:first-child { text-align: left; color: var(--muted); font-weight: 600; }
.cmp th { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.cmp th span { display: block; font-weight: 500; font-size: .76rem; color: var(--muted); }
.cmp td { color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp .cmp-on { background: var(--s-soft); }
.cmp th.cmp-on { border-radius: 10px 10px 0 0; color: var(--s-accent-deep); }

/* priorités */
.prio { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; }
.prio li { display: grid; grid-template-columns: 26px 1fr 90px auto; align-items: center; gap: 10px; }
.prio-n { font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: var(--s-accent-deep); background: var(--s-soft); width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.prio-l { font-size: .9rem; color: var(--ink); }
.prio-bar { height: 7px; border-radius: 999px; background: var(--s-accent-soft); overflow: hidden; }
.prio-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s-accent); transform-origin: left; transform: scaleX(var(--v)); }
.prio li b { font-family: var(--font-display); font-weight: 800; font-size: .85rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; }

/* mobilité + carte */
.mob-sub { font-size: .9rem; color: var(--muted); margin: 2px 0 14px; }
.map-toolbar { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid rgba(40,30,50,.1); margin-bottom: 12px; }
.mt { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--muted); background: transparent; border: none; border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background .16s ease, color .16s ease; }
.mt svg { width: 14px; height: 14px; }
.mt.on { background: var(--s-accent); color: #fff; }
.mapbox { height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(40,30,50,.1); background: #e8ecef; }
.mapbox .leaflet-container { height: 100%; font: inherit; }
.mob-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
.mob-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink); margin-bottom: 10px; }
.mob-h svg { width: 17px; height: 17px; color: var(--s-accent); }
.mob-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.6); margin-bottom: 8px; }
.mob-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-soft); color: var(--s-accent-deep); }
.mob-ico svg { width: 18px; height: 18px; }
.mob-id { flex: 1; min-width: 0; }
.mob-id b { font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-id span { font-size: .76rem; color: var(--muted); }
.mob-val { flex: none; text-align: right; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; }
.mob-val small { display: block; font-family: var(--font-text); font-weight: 500; font-size: .68rem; color: var(--muted); }

@media (max-width: 880px) {
  .grid3 { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr 1fr; }
  .mob-cols { grid-template-columns: 1fr; gap: 14px; }
  .hero2 { flex-wrap: wrap; }
  .hero2-photo { width: 100%; max-width: none; order: -1; height: 150px; }
}
@media (max-width: 480px) {
  .podium { grid-template-columns: 1fr; }
  .hero2-left { display: flex; align-items: center; gap: 12px; text-align: left; }
}

/* =========================================================
   V3 : navbar + en-tête résumé + harmonisation + presse + fiche
   ========================================================= */
.qz { padding-top: 16px; }
.qz-side { top: 84px; }

/* en-tête résultats : ouvert, pas dans un bloc */
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 8px 6px 2px; }
.rh-text { flex: 1; min-width: 260px; }
.rh-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.rh-sum { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 780px; text-wrap: pretty; }
.result-head .recap { margin-top: 14px; }
.needs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.need { font-size: .78rem; color: var(--s-accent-deep); background: rgba(255,255,255,.55); border: 1px dashed var(--s-accent-soft); border-radius: 999px; padding: 4px 11px; }

/* cartes de même hauteur (harmonisation) */
.grid3, .grid2 { align-items: stretch; }
.grid3 > .card, .grid2 > .card { height: 100%; }

/* points de vigilance dans "pourquoi" */
.vig-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(40,30,50,.08); }
.vig-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: #c2705f; margin-bottom: 8px; }
.vig-h svg { width: 16px; height: 16px; }
.forts.vig li svg { color: #c2705f; }

/* presse spécialisée */
.press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.press-card { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6); border-radius: 14px; padding: 14px 15px; }
.press-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--s-accent-deep); margin-bottom: 6px; }
.press-h svg { width: 16px; height: 16px; }
.press-card p { font-size: .88rem; line-height: 1.5; color: var(--ink); }
.press-note { font-size: .95rem; line-height: 1.55; color: var(--ink); margin-top: 6px; }

/* fiche technique en menu déroulant */
.fiche-d { padding: 0; overflow: hidden; }
.fiche-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 20px 22px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.fiche-d > summary::-webkit-details-marker { display: none; }
.ft-sum > svg:first-child { width: 20px; height: 20px; color: var(--s-accent); flex: none; }
.ft-sum > span { flex: 1; }
.ft-chev { width: 20px; height: 20px; color: var(--muted); margin-left: auto; transition: transform .2s ease; }
.fiche-d[open] .ft-chev { transform: rotate(180deg); }
.ft-body { padding: 0 22px 22px; }
.ft-grp { margin-top: 16px; }
.ft-grp h4 { font-family: var(--font-display); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--s-accent-deep); margin-bottom: 8px; }
.ft-row { display: grid; grid-template-columns: minmax(170px, 38%) 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(40,30,50,.06); align-items: start; }
.ft-l { font-size: .9rem; color: var(--ink); font-weight: 600; }
.ft-l em { display: block; font-style: normal; font-weight: 400; font-size: .78rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.ft-row b { font-size: .9rem; color: var(--ink); font-weight: 600; text-align: right; }

/* logo réseau de recharge (superposé sur l'icône, fallback si erreur) */
.mob-ico { position: relative; }
.mob-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; border-radius: inherit; }

@media (max-width: 720px) {
  .press-grid { grid-template-columns: 1fr; }
  .ft-row { grid-template-columns: 1fr; gap: 3px; }
  .ft-row b { text-align: left; }
  .result-head { flex-direction: column; }
}

/* =========================================================
   V4 : mobilité en listes (carburants par type + rayon, bornes)
   ========================================================= */
.mob-panel + .mob-panel { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(40,30,50,.08); }
.mob-panel { margin-top: 16px; }
.mob-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.mob-ptitle b { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.mob-ptitle b svg { width: 18px; height: 18px; color: var(--s-accent); }
.mob-ptitle span { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; margin-left: 26px; }
.fuel-tabs { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(40,30,50,.1); }
.ftab { font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--muted); background: transparent; border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background .16s ease, color .16s ease; }
.ftab.on { background: var(--s-accent); color: #fff; }
.ftab[disabled] { opacity: .35; cursor: not-allowed; }
.mob-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ctrl-lbl { font-size: .82rem; color: var(--muted); font-weight: 600; }
.radius { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(40,30,50,.1); }
.rad { font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--muted); background: transparent; border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background .16s ease, color .16s ease; }
.rad.on { background: var(--s-accent); color: #fff; }
.mob-coords { margin-left: auto; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.geo-btn { font: inherit; font-size: .78rem; color: var(--s-accent-deep); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.st2-list { display: flex; flex-direction: column; gap: 8px; }
.st2-item { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.6); }
.st2-n { width: 28px; height: 28px; border-radius: 9px; background: var(--s-accent); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.st2-ico { position: relative; width: 30px; height: 30px; border-radius: 9px; background: var(--s-soft); color: var(--s-accent-deep); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.st2-ico svg { width: 17px; height: 17px; }
.st2-id { min-width: 0; }
.st2-id b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st2-id span { font-size: .78rem; color: var(--muted); }
.st2-price { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.st2-price small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.st2-go { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--s-accent-deep); background: rgba(255,255,255,.85); border: 1px solid var(--s-accent-soft); transition: background .16s ease, color .16s ease, transform .12s ease; }
.st2-go svg { width: 16px; height: 16px; }
.st2-go:hover { background: var(--s-accent); color: #fff; transform: translateY(-1px); }
.st2-go:focus-visible { outline: 3px solid var(--s-accent-soft); outline-offset: 2px; }

@media (max-width: 600px) {
  .st2-item { grid-template-columns: 26px 1fr auto auto; gap: 9px; padding: 11px 12px; }
  .st2-price { font-size: .95rem; }
  .st2-go { width: 34px; height: 34px; }
  .mob-coords { margin-left: 0; width: 100%; }
  .mob-phead, .mob-ctrl { gap: 8px; }
}

/* =========================================================
   V5 : navbar fixe (espace) + hero N°1 agrandi + mobilité aérée
   ========================================================= */
/* la navbar est position:fixed -> on dégage le contenu dessous + un peu plus d'air */
.qz { padding-top: 96px; }
.results { padding-top: 92px; }
.qz-loader { padding-top: 80px; }
.qz-side { top: 100px; }
.qz-body .nav { padding: 18px 0; }

/* plus d'air entre les sections de résultats */
#resultBody { gap: 22px; }

/* HERO N°1 plus grand / dominant */
.hero2 { padding: 34px; gap: 30px; }
.hero2-left .score-ring { width: 112px; height: 112px; }
.hero2-left .score-ring::before { inset: 8px; }
.hero2-left .score-ring b { font-size: 1.75rem; }
.hero2 .hero-name { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.hero2 .hero-version { font-size: 1.02rem; margin-top: 4px; }
.hero2 .hero2-price { font-size: 2rem; margin-top: 14px; }
.hero2 .rank-badge { font-size: .8rem; padding: 6px 13px; }
.hero2-photo { width: 340px; max-width: 40%; }

/* ============ MOBILITÉ : intro (gauche) + contenu (droite), 2 blocs séparés ============ */
.mob-sec { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.mob-intro { padding: 10px 4px; position: sticky; top: 104px; }
.mob-num { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--s-accent-deep); background: var(--s-soft); padding: 5px 11px; border-radius: 999px; }
.mob-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 10px; text-wrap: balance; }
.mob-desc { font-size: .92rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.mob-pos { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 16px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mob-pos svg { width: 14px; height: 14px; color: var(--s-accent); flex: none; }
.mob-content { border-radius: 20px; padding: 22px; }
.mob-content .results-foot { margin-top: 12px; }

@media (max-width: 880px) {
  .mob-sec { grid-template-columns: 1fr; gap: 14px; }
  .mob-intro { position: static; padding: 0 2px; }
}
@media (max-width: 600px) {
  .qz { padding-top: 86px; }
  .results { padding-top: 84px; }
  .qz-side { top: 16px; }
  .hero2-photo { width: 100%; max-width: none; }
}

/* =========================================================
   V6 : double prix (catalogue + /mois) + sections claires + top 5/10
   ========================================================= */
.hero2-prices { display: flex; align-items: stretch; flex-wrap: wrap; margin-top: 16px; }
.hp { padding-right: 22px; }
.hp + .hp { padding-left: 22px; padding-right: 0; border-left: 1px solid rgba(40,30,50,.12); }
.hp b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp span { display: block; font-size: .78rem; color: var(--muted); margin-top: 5px; }
.hp-alt b { color: var(--s-accent-deep); font-size: 1.55rem; }

/* têtes de section numérotées */
.res-sec-h { display: flex; align-items: center; gap: 14px; margin: 16px 4px 0; }
.res-sec-num { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--s-accent-deep); background: var(--s-soft); border: 1px solid var(--s-accent-soft); font-variant-numeric: tabular-nums; }
.res-sec-h h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; }
.res-sec-h > div span { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; }

.ctrl-push { margin-left: auto; }

@media (max-width: 480px) {
  .hp { padding-right: 16px; }
  .hp + .hp { padding-left: 16px; }
  .hp b { font-size: 1.6rem; }
  .hp-alt b { font-size: 1.3rem; }
  .ctrl-push { margin-left: 0; }
}

/* =========================================================
   FEEL POLISH (Emil Kowalski) : easing fort, feedback :active,
   hovers à transformation neutralisés sur écrans tactiles
   ========================================================= */
.pod, .ftab, .rad, .st2-go, .btn-ghost, .btn-ghost2, .qz-prev, .opt { transition-timing-function: var(--ease-out); }
.opt:active { transform: scale(.98); }
.pod:active, .ftab:active, .rad:active, .st2-go:active, .btn-ghost:active, .btn-ghost2:active, .qz-prev:active { transform: scale(.97); }
@media (hover: none) {
  .opt:hover, .pod:hover, .st2-go:hover, .qz-next:hover, .qz-prev:hover, .btn-accent:hover,
  .btn-ghost2:hover, .btn-ghost:hover, .quiz-submit:hover, .ftab:hover, .rad:hover, .ts-btn:hover { transform: none; }
}

/* =========================================================
   V7 : résultats en sections 2 colonnes (titre+explication / cadres)
   ========================================================= */
#resultBody { gap: 38px; }

/* en-tête minimal : juste les mots-clés + Refaire */
.result-head { align-items: center; }
.res-top-l { display: flex; flex-direction: column; gap: 9px; }
.res-top-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* section 2 colonnes */
.res-sec { display: grid; grid-template-columns: 290px 1fr; gap: 30px; align-items: start; }
.res-aside { position: sticky; top: 100px; padding: 4px 4px 0; }
.res-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--s-accent-deep); background: var(--s-soft); border: 1px solid var(--s-accent-soft); font-variant-numeric: tabular-nums; }
.res-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 10px; text-wrap: balance; }
.res-desc { font-size: .92rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.res-meta { font-size: .78rem; color: var(--muted); margin-top: 14px; font-variant-numeric: tabular-nums; }
.res-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.res-aside .mob-pos { margin-top: 16px; }

@media (max-width: 900px) {
  #resultBody { gap: 26px; }
  .res-sec { grid-template-columns: 1fr; gap: 14px; }
  .res-aside { position: static; padding: 0 2px; }
  .res-title { margin: 10px 0 8px; }
}

/* =========================================================
   V8 : asides non-sticky, header en bande, coût en avant,
        presse riche, fiche propre (fiabilité + sous-listes)
   ========================================================= */
.res-aside { position: static; }

/* en-tête : bande claire pleine largeur, critères lisibles */
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 18px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6); }
.res-top-l { gap: 11px; }
.res-top-eyebrow { font-size: .72rem; }
.recap { gap: 9px; }
.recap span { font-size: .92rem; padding: 8px 15px; }
.recap span svg { width: 15px; height: 15px; }

/* coût mensuel : carte mise en avant */
.cost-card { background: linear-gradient(160deg, var(--s-soft), rgba(255,255,255,.7)); border-color: var(--s-accent-soft); }
.cost-card .tco-rows { background: rgba(40,30,50,.05); }
.cost-card .tco-total { background: var(--s-accent); }
.cost-card .tco-total span { color: rgba(255,255,255,.92); }
.cost-card .tco-total b { color: #fff; font-size: 1.35rem; }

/* presse : phrase d'accroche + cartes */
.press-lead { font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin-bottom: 16px; text-wrap: pretty; }
.press-grid { gap: 14px; }
.press-card { padding: 16px 17px; }
.press-card p { font-size: .9rem; }

/* fiche : groupe fiabilité + sous-listes propres */
.ft-fiab .ft-fiab-v { font-size: .92rem; color: var(--ink); font-weight: 600; text-align: right; }
.ft-fiab .ft-fiab-v b { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--s-accent-deep); }
.ft-fiab .ft-fiab-v small { font-size: .72rem; font-weight: 700; color: var(--muted); }
.ft-grp:first-child { margin-top: 0; }
.ft-sub { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; text-align: right; }
.ft-sub li { font-size: .86rem; color: var(--ink); font-weight: 600; line-height: 1.35; }

@media (max-width: 720px) {
  .ft-sub { text-align: left; }
  .ft-fiab .ft-fiab-v { text-align: left; }
}

/* =========================================================
   V9 : page résultats facon dashboard (maquette adaptée)
        sections numérotées pleine largeur + grilles équilibrées
   ========================================================= */

/* --- en-tete de section numérotée --- */
.rs { display: flex; flex-direction: column; gap: 13px; }
.rs-h { display: flex; align-items: center; gap: 13px; padding: 2px 2px 0; }
.rs-n { flex: none; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: #fff; background: linear-gradient(145deg, var(--s-accent), var(--s-accent-deep)); box-shadow: 0 10px 20px -10px var(--s-shadow); font-variant-numeric: tabular-nums; }
.rs-t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.12rem, 2.2vw, 1.32rem); letter-spacing: -.01em; color: var(--ink); }
.rs-sub { margin-left: auto; font-size: .82rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* --- grilles 2 et 3 colonnes, hauteurs égales --- */
.rs-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.rs-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.rs-g2 > .rs, .rs-g3 > .rs { height: 100%; min-width: 0; }
.rs-g2 > .rs > .card, .rs-g3 > .rs > .card { flex: 1; min-width: 0; }

/* --- 01 hero recommandation --- */
.hero3 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; padding: 30px 34px; border-radius: 24px; align-items: center; }
.hero3-l { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-width: 0; }
.rank-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .02em; text-transform: uppercase; color: var(--s-accent-deep); background: var(--s-soft); border: 1px solid var(--s-accent-soft); padding: 7px 13px; border-radius: 999px; }
.rank-badge svg { width: 14px; height: 14px; }
.hero3-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.55rem); letter-spacing: -.025em; line-height: 1.05; color: var(--ink); }
.hero3-ver { font-size: .96rem; color: var(--muted); margin-top: -4px; }
.hero3-desc { font-size: 1rem; line-height: 1.6; color: var(--ink); max-width: 50ch; text-wrap: pretty; }
.hero3-specs { display: flex; flex-wrap: wrap; gap: 9px; }
.hero3-specs span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--ink); background: rgba(255,255,255,.6); border: 1px solid rgba(40,30,50,.08); padding: 7px 12px; border-radius: 10px; }
.hero3-specs svg { width: 16px; height: 16px; color: var(--s-accent-deep); }
.hero3-pricerow { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; margin-top: 4px; }
.hero3-price { display: flex; flex-direction: column; line-height: 1; }
.hero3-price b { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; letter-spacing: -.02em; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; }
.hero3-price small { font-size: .82rem; font-weight: 600; color: var(--muted); margin-top: 5px; }
.hero3-price-alt b { font-size: 1.3rem; color: var(--ink); }
.hero3-price-alt span { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.hero3-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.hero3-r { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero3-photo { position: relative; width: 100%; max-width: 340px; }
.hero3-photo .car-illu { filter: drop-shadow(0 22px 30px -16px var(--s-shadow)); }
.score-ring2 { position: absolute; top: -8px; right: -2px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--s-accent) calc(var(--val) * 1%), var(--s-accent-soft) 0); box-shadow: 0 14px 28px -14px var(--s-shadow); }
.sr-in { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.sr-in b { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; line-height: 1; }
.sr-in b small { font-size: .68rem; }
.sr-cap { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--muted); text-align: center; }
.hero3-pills { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; margin-top: 4px; }
.hpill { display: flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 500; color: var(--ink); background: rgba(255,255,255,.6); border: 1px solid rgba(40,30,50,.08); padding: 9px 13px; border-radius: 12px; }
.hpill svg { flex: none; width: 16px; height: 16px; color: var(--s-accent-deep); }

/* --- 02 alternatives (4 cartes cliquables) --- */
.alts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.alt { display: flex; flex-direction: column; gap: 11px; text-align: left; padding: 16px; border-radius: 18px; cursor: pointer; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); transition: transform .18s var(--ease-out), border-color .18s ease, box-shadow .18s ease; }
.alt:hover { transform: translateY(-3px); border-color: var(--s-accent-soft); box-shadow: 0 20px 36px -22px var(--s-shadow); }
.alt:active { transform: translateY(-1px) scale(.99); }
.alt-on { border-color: var(--s-accent); box-shadow: 0 18px 34px -20px var(--s-shadow); background: linear-gradient(160deg, var(--s-soft), rgba(255,255,255,.7)); }
.alt-top { display: flex; align-items: center; gap: 10px; }
.alt-n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--s-soft); color: var(--s-accent-deep); font-family: var(--font-display); font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.alt-on .alt-n { background: var(--s-accent); color: #fff; }
.alt-id { min-width: 0; display: flex; flex-direction: column; }
.alt-id b { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt-id span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt-photo { padding: 2px 6px; }
.alt-photo .car-illu-sm svg { width: 100%; height: auto; display: block; }
.alt-sc { display: flex; align-items: center; gap: 9px; }
.alt-pc { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; min-width: 38px; }
.alt-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--s-accent-soft); overflow: hidden; }
.alt-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s-accent); transform-origin: left; transform: scaleX(var(--v)); }
.alt-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(40,30,50,.08); }
.alt-price b { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.alt-price span { font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* --- 03 pourquoi --- */
.why-box { margin-top: 13px; font-size: .92rem; line-height: 1.6; color: var(--ink); background: var(--s-soft); border: 1px solid var(--s-accent-soft); border-radius: 14px; padding: 14px 16px; text-wrap: pretty; }

/* --- 04 cout de possession --- */
.cost-card { background: linear-gradient(160deg, var(--s-soft), rgba(255,255,255,.72)); border-color: var(--s-accent-soft); }
.cost-rows { display: flex; flex-direction: column; gap: 2px; }
.cost-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid rgba(40,30,50,.07); }
.cost-row span { font-size: .9rem; color: var(--ink); }
.cost-row b { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cost-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--s-accent); }
.cost-total span { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.92); }
.cost-total b { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: #fff; font-variant-numeric: tabular-nums; }

/* --- 05 comparatif (surlignages) --- */
.cmp .cmp-tag { display: block; font-family: var(--font-text); font-weight: 700; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--s-accent); border-radius: 999px; padding: 2px 8px; margin: 6px auto 0; width: max-content; font-style: normal; }
.cmp td.cmp-on { background: var(--s-soft); color: var(--s-accent-deep); font-weight: 700; }
.cmp td.cmp-cheap { color: #1f9e5a; font-weight: 800; }
.cmp td.cmp-on.cmp-cheap { color: #1f8f55; }
.cmp tr.cmp-costrow td, .cmp .cmp-costrow td { border-top: 1px solid rgba(40,30,50,.12); font-family: var(--font-display); font-weight: 700; }

/* --- 06 priorités (sur 5) --- */
.prio li { grid-template-columns: 1fr 110px 64px; }
.prio-l { font-weight: 600; }

/* --- 07 presse par catégorie --- */
.pressc { display: flex; flex-direction: column; gap: 4px; }
.pressc-row { padding: 12px 0; border-bottom: 1px solid rgba(40,30,50,.07); }
.pressc-row:last-child { border-bottom: none; }
.pressc-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--s-accent-deep); margin-bottom: 6px; }
.pressc-h svg { width: 16px; height: 16px; }
.pressc-row p { font-size: .88rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }

/* --- 08 a savoir --- */
.know { display: flex; flex-direction: column; gap: 12px; }
.know li { display: flex; align-items: flex-start; gap: 10px; font-size: .89rem; line-height: 1.5; color: var(--ink); }
.know li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--s-accent-deep); }

/* --- 09 fiche technique (groupes en grille) --- */
.ft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ft-grid .ft-grp { margin-top: 0; padding: 16px 16px 6px; border-radius: 16px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); }
.ft-grid .ft-grp h4 { margin-bottom: 10px; }
.ft-grid .ft-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
.ft-grid .ft-row > span { font-size: .76rem; color: var(--muted); font-weight: 500; }
.ft-grid .ft-row > b { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.ft-grid .ft-row .ft-sub { text-align: left; }
.ft-grid .ft-row .ft-sub li { font-size: .86rem; }
.ft-hi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(40,30,50,.08); }
.ft-hi-item { display: flex; align-items: flex-start; gap: 11px; }
.ft-hi-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--s-soft); color: var(--s-accent-deep); display: inline-flex; align-items: center; justify-content: center; }
.ft-hi-ic svg { width: 19px; height: 19px; }
.ft-hi-item > div { display: flex; flex-direction: column; min-width: 0; }
.ft-hi-item b { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--ink); }
.ft-hi-item span { font-size: .78rem; color: var(--muted); line-height: 1.4; }

/* --- 10 pres de chez vous (liste + carte) --- */
.mob-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; align-items: stretch; }
.mob-list { display: flex; flex-direction: column; }
.mob-block { margin-top: 16px; }
.mob-block:first-of-type { margin-top: 10px; }
.mob-block + .mob-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(40,30,50,.08); }
.mob-bh { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 12px; }
.mob-bh svg { width: 18px; height: 18px; color: var(--s-accent); }
.mob-mapwrap { padding: 14px; display: flex; }
.mob-mapwrap .mapbox { height: 100%; min-height: 360px; width: 100%; }

/* --- responsive --- */
@media (max-width: 1000px) {
  .alts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero3 { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .hero3-r { order: -1; }
  .hero3-photo { max-width: 300px; }
  .rs-g2, .rs-g3 { grid-template-columns: 1fr; }
  .mob-grid { grid-template-columns: 1fr; }
  .mob-mapwrap .mapbox { min-height: 300px; }
}
@media (max-width: 560px) {
  .alts { grid-template-columns: 1fr; }
  .hero3-pricerow { gap: 18px; }
  .rs-sub { display: none; }
  .ft-grid { grid-template-columns: 1fr; }
}

/* --- accessibilité mouvement --- */
@media (prefers-reduced-motion: reduce) {
  .alt { transition: none; }
  .alt:hover, .alt:active { transform: none; }
}

/* =========================================================
   V10 : header (bande critères + hero 01) calé sur la maquette
        bande transparente, chips outline a icones,
        hero = [texte | anneau central | photo + pills]
   ========================================================= */

/* --- bande "Vos critères" : transparente, sur le fond de page --- */
.result-head { background: none; border: none; padding: 6px 4px 2px; align-items: center; }
.res-top-l { gap: 10px; }
.res-top-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.recap { gap: 9px; }
.recap span { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.55); border: 1px solid var(--s-accent-soft); color: var(--s-accent-deep); font-family: var(--font-text); font-weight: 600; font-size: .85rem; padding: 8px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.recap span svg { width: 15px; height: 15px; color: var(--s-accent); flex: none; vertical-align: 0; }
.recap span > span { color: var(--s-accent-deep); }
.recap-pin { color: var(--s-accent-deep); }

/* --- carte 01 : entete "01 Votre recommandation" a l'interieur --- */
.rs-hero { display: block; }
.hero3 { display: flex; flex-direction: column; gap: 22px; padding: 24px 28px 26px; align-items: stretch; border-radius: 24px; }
.hero3-head { display: flex; align-items: center; gap: 12px; }
.hero3-head .rs-n { width: 34px; height: 34px; border-radius: 10px; background: var(--s-soft); color: var(--s-accent-deep); border: 1px solid var(--s-accent-soft); box-shadow: none; font-size: .9rem; }
.hero3-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink); }
.hero3-meta { margin-left: auto; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* --- corps du hero : grille 3 zones --- */
.hero3-body { display: grid; grid-template-columns: minmax(0, 0.95fr) 108px minmax(0, 1.12fr); gap: 24px; align-items: stretch; }
.hero3-l { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }

/* badge plein accent */
.rank-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--s-accent); color: #fff; border: none; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; box-shadow: 0 10px 20px -12px var(--s-shadow); }

.hero3-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -.025em; line-height: 1.04; color: var(--ink); }
.hero3-ver { font-size: .96rem; color: var(--muted); margin-top: -3px; }
.hero3-desc { font-size: .95rem; line-height: 1.55; color: var(--muted); max-width: 42ch; text-wrap: pretty; }

/* specs en ligne, sans cadre */
.hero3-specs { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2px; }
.hero3-specs span { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; font-family: var(--font-text); font-weight: 600; font-size: .88rem; color: var(--ink); }
.hero3-specs svg { width: 17px; height: 17px; color: var(--s-accent-deep); flex: none; }

/* prix + boutons, colle en bas a gauche */
.hero3-buy { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.hero3-price { display: flex; flex-direction: column; gap: 5px; }
.hp-month { display: flex; align-items: baseline; gap: 6px; }
.hp-month b { font-family: var(--font-display); font-weight: 800; font-size: 2.05rem; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.hp-month small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.hp-cash { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero3-cta { display: flex; flex-direction: column; gap: 9px; width: 210px; max-width: 100%; }
.hero3-cta .btn-accent, .hero3-cta .btn-ghost2 { width: 100%; justify-content: center; }

/* anneau de score : colonne centrale, aligne en haut */
.hero3-score { grid-column: 2; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 4px; }
.score-ring2 { position: static; top: auto; right: auto; width: 98px; height: 98px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--s-accent) calc(var(--val) * 1%), var(--s-accent-soft) 0); box-shadow: none; }
.sr-in { position: relative; width: 82px; height: 82px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.sr-in b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--s-accent-deep); font-variant-numeric: tabular-nums; line-height: 1; }
.sr-in b small { font-size: .68rem; font-weight: 700; }
.sr-cap { font-family: var(--font-text); font-weight: 500; font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.3; max-width: 100px; }

/* zone droite : photo (blob saisonnier) + pills horizontales en bas */
.hero3-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-items: stretch; }
.hero3-photo { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 210px; padding: 20px 24px; border-radius: 22px; background: radial-gradient(120% 130% at 70% 25%, var(--s-soft) 0%, rgba(255,255,255,.35) 70%); border: 1px solid rgba(255,255,255,.6); overflow: hidden; }
.hero3-photo .car-illu { width: 100%; max-width: 380px; filter: drop-shadow(0 20px 26px -16px var(--s-shadow)); }
.hero3-pills { margin-top: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 9px; }
.hpill { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font-family: var(--font-text); font-size: .84rem; font-weight: 500; color: var(--ink); background: rgba(255,255,255,.6); border: 1px solid rgba(40,30,50,.08); padding: 9px 13px; border-radius: 12px; white-space: nowrap; }
.hpill svg { flex: none; width: 16px; height: 16px; color: var(--s-accent-deep); }

/* --- responsive --- */
@media (max-width: 880px) {
  .hero3-body { grid-template-columns: 1fr; gap: 22px; }
  .hero3-score, .hero3-r { grid-column: auto; }
  .hero3-score { order: -1; align-self: stretch; flex-direction: row; justify-content: flex-start; gap: 14px; }
  .sr-cap { text-align: left; max-width: none; }
  .hero3-photo { min-height: 180px; }
  .hero3-buy { padding-top: 14px; }
}
@media (max-width: 520px) {
  .hero3 { padding: 20px 18px 22px; }
  .hero3-buy { gap: 16px; }
  .hero3-cta { width: 100%; }
  .hpill { flex: 1 1 100%; }
  .hero3-meta { display: none; }
}

/* =========================================================
   V11 : section 02 "Meilleures alternatives" calee sur la maquette
        numero en cercle plein, % au-dessus d'une barre pleine
        largeur, bloc prix sur 2 lignes (prix neuf + energie/mois)
   ========================================================= */
.alt { gap: 12px; padding: 18px; }
.alt-top { align-items: center; gap: 11px; }
.alt-n { width: 30px; height: 30px; border-radius: 50%; background: var(--s-accent); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .92rem; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 16px -10px var(--s-shadow); }
.alt-on .alt-n { background: var(--s-accent-deep); }
.alt-id b { font-size: .98rem; }
.alt-id em { display: block; font-style: normal; font-size: .74rem; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.alt-photo { padding: 6px 4px; display: flex; align-items: center; justify-content: center; }
.alt-photo .car-illu-sm { width: 100%; max-width: 220px; }

/* % au-dessus, barre pleine largeur ; le bloc colle en bas */
.alt-sc { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.alt-pc { min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.alt-bar { width: 100%; height: 7px; }

/* bloc prix : 2 lignes, sans separateur */
.alt-price { display: block; border-top: none; padding-top: 12px; }
.ap-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ap-main b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-main span { font-size: .76rem; color: var(--muted); }
.ap-fuel { font-size: .76rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* =========================================================
   V12 : sections 03 (pourquoi) + 04 (cout) calees sur la maquette
        + harmonisation des en-tetes de section
        (numero en cercle accent, titre en petites majuscules)
   ========================================================= */

/* --- en-tetes de section harmonises --- */
.rs-h .rs-n { width: 30px; height: 30px; border-radius: 50%; background: var(--s-accent); color: #fff; box-shadow: 0 8px 16px -10px var(--s-shadow); font-size: .85rem; }
.rs-h .rs-t { font-family: var(--font-display); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.hero3-head .rs-n { background: var(--s-accent); color: #fff; border: none; border-radius: 50%; box-shadow: 0 8px 16px -10px var(--s-shadow); }

/* --- 03 : pourquoi (badges check ronds + boite resumee en bas) --- */
#rWhy, #rCost { display: flex; flex-direction: column; }
.why-forts { gap: 12px; }
.why-forts li { gap: 11px; align-items: flex-start; line-height: 1.45; }
.why-forts li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--s-accent); color: #fff; box-sizing: border-box; flex: none; margin-top: 1px; stroke-width: 2.4; }
.why-box { margin-top: auto; margin-bottom: 0; background: var(--s-soft); border: 1px solid var(--s-accent-soft); border-radius: 14px; padding: 14px 16px; font-size: .9rem; line-height: 1.55; color: var(--ink); }

/* --- 04 : cout de possession (lignes propres, total en bas) --- */
.cost-rows { gap: 0; }
.cost-row { padding: 11px 2px; }
.cost-row:last-child { border-bottom: none; }
.cost-total { margin-top: auto; }
.cost-card .tco-note { margin-top: 10px; }

/* =========================================================
   V13 : section 05 "Comparatif detaille" calee sur la maquette
        colonne recommandee = carte bordee arrondie continue,
        trophee, valeurs reco en accent, moins cher en vert
   ========================================================= */
.cmp { border-collapse: separate; border-spacing: 0; min-width: 660px; font-size: .87rem; }
.cmp th, .cmp td { padding: 11px 12px; border-bottom: 1px solid rgba(40,30,50,.07); }
.cmp th { padding-top: 14px; padding-bottom: 14px; vertical-align: bottom; }

/* colonne label (gauche) */
.cmp .cmp-rowlbl { text-align: left; color: var(--muted); font-weight: 600; }

/* en-tetes voitures */
.cmp th .cmp-mk { display: block; font-family: var(--font-display); font-weight: 800; font-size: .96rem; color: var(--ink); line-height: 1.15; }
.cmp th .cmp-md { display: block; font-weight: 600; font-size: .85rem; color: var(--ink); line-height: 1.2; }
.cmp th .cmp-vr { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); margin-top: 2px; }

/* pastille Recommande + trophee */
.cmp .cmp-tag { display: inline-flex; align-items: center; gap: 5px; margin: 9px auto 0; width: max-content; font-family: var(--font-text); font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--s-accent); border-radius: 999px; padding: 3px 10px; font-style: normal; }
.cmp .cmp-tag svg { width: 12px; height: 12px; }

/* colonne recommandee : carte bordee arrondie continue */
.cmp td.cmp-on { background: var(--s-soft); color: var(--s-accent-deep); font-weight: 700; border-left: 1.5px solid var(--s-accent); border-right: 1.5px solid var(--s-accent); }
.cmp th.cmp-on { background: var(--s-soft); border-top: 1.5px solid var(--s-accent); border-left: 1.5px solid var(--s-accent); border-right: 1.5px solid var(--s-accent); border-radius: 16px 16px 0 0; }
.cmp tbody tr:last-child td.cmp-on { border-bottom: 1.5px solid var(--s-accent); border-radius: 0 0 16px 16px; }

/* compatibilite : valeur reco accent + trophee */
.cmp .cmp-compat-on { font-weight: 800; font-size: 1.02rem; }
.cmp-trophy { display: inline-flex; vertical-align: -3px; margin-right: 5px; }
.cmp-trophy svg { width: 15px; height: 15px; color: var(--s-accent); }

/* placeholder valeur absente */
.cmp-na { color: var(--muted); opacity: .6; font-weight: 500; }

/* ligne cout mensuel : reco en accent, moins cher (hors reco) en vert */
.cmp .cmp-costrow td { font-family: var(--font-display); font-weight: 800; font-size: .96rem; border-top: 1px solid rgba(40,30,50,.12); border-bottom: none; }
.cmp .cmp-costrow td.cmp-on { font-size: 1.1rem; color: var(--s-accent-deep); }
.cmp .cmp-costrow td.cmp-cheap { color: #1f9e5a; }

/* =========================================================
   V14 : sections 06 + 07 (À savoir retiree)
        ligne 2 colonnes equilibree, presse en cartes
        (citation + etoiles), priorites avec icones
   ========================================================= */

/* --- ligne 06 (etroite) + 07 (large), hauteurs egales --- */
.rs-row67 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px; align-items: stretch; }
.rs-row67 > .rs { height: 100%; min-width: 0; }
.rs-row67 > .rs > .card { flex: 1; min-width: 0; }

/* --- 06 : priorites avec icone --- */
.prio-icons li { grid-template-columns: 24px 1fr 1fr 58px; gap: 11px; }
.prio-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.prio-ic svg { width: 18px; height: 18px; color: var(--s-accent-deep); }

/* --- 07 : cartes presse --- */
.pressx { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; align-items: stretch; }
.presscard { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: 16px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); }
.pc-src { display: flex; align-items: center; gap: 8px; }
.pc-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--s-soft); color: var(--s-accent-deep); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pc-ic svg { width: 16px; height: 16px; }
.pc-src b { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--ink); line-height: 1.2; }
.pc-quote { font-size: .86rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.pc-quote::before { content: '\00AB\00A0'; color: var(--s-accent); }
.pc-quote::after { content: '\00A0\00BB'; color: var(--s-accent); }
.pc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.pc-stars { position: relative; display: inline-block; font-size: 1rem; letter-spacing: 1.5px; color: rgba(40,30,50,.16); line-height: 1; }
.pc-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--s-accent); }
.pc-rate { font-family: var(--font-display); font-weight: 700; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.press-note { font-size: .76rem; color: var(--muted); margin-top: 12px; text-align: center; }

@media (max-width: 860px) {
  .rs-row67 { grid-template-columns: 1fr; }
}

/* =========================================================
   V15 : section "Pres de chez vous" calee sur la maquette
        lignes = logo operateur + nom/adresse + badge DC/AC
        + valeur + distance, ligne entiere cliquable (Maps)
   ========================================================= */
.st2-item { display: grid; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.6); text-decoration: none; color: inherit; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s var(--ease-out); }
.st2-item:hover { background: #fff; border-color: var(--s-accent-soft); transform: translateY(-1px); }
.st2-item:active { transform: translateY(0) scale(.995); }
.st2-fuel { grid-template-columns: 38px minmax(0, 1fr) auto auto 22px; }
.st2-charge { grid-template-columns: 38px minmax(0, 1fr) auto auto auto 22px; }

/* logo operateur (ou icone de repli) */
.st2-logo { width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid rgba(40,30,50,.08); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.st2-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.st2-logo svg { width: 18px; height: 18px; color: var(--s-accent-deep); display: none; }
.st2-logo.noimg { background: var(--s-soft); border-color: var(--s-accent-soft); }
.st2-logo.noimg svg { display: block; }

/* identite */
.st2-id { min-width: 0; }
.st2-id b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st2-id span { display: block; font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* badge DC / AC */
.st2-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: .72rem; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.st2-badge svg { width: 12px; height: 12px; }
.st2-dc { background: var(--s-soft); color: var(--s-accent-deep); }
.st2-ac { background: rgba(40,30,50,.05); color: var(--muted); }

/* valeur (puissance / prix) + distance */
.st2-price { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.st2-price small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.st2-val { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.st2-val small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.st2-dist { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* fleche (affordance Maps) */
.st2-arrow { display: inline-flex; align-items: center; justify-content: center; color: var(--s-accent-deep); opacity: .45; transition: opacity .15s ease, transform .15s var(--ease-out); }
.st2-arrow svg { width: 16px; height: 16px; }
.st2-item:hover .st2-arrow { opacity: 1; transform: translateX(2px); }

/* bouton voir plus sur la carte */
.mob-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 14px; padding: 10px; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--s-accent-deep); border-radius: 10px; transition: background .16s ease; }
.mob-more svg { width: 15px; height: 15px; transition: transform .15s var(--ease-out); }
.mob-more:hover { background: var(--s-soft); }
.mob-more:hover svg { transform: translateX(3px); }

@media (hover: none) {
  .st2-item:hover { transform: none; }
  .st2-arrow { opacity: 1; }
}

/* =========================================================
   V16 : largeur pleine page + placeholders carres propres
        (fini les silhouettes) + fiche technique 5 colonnes
        avec icones d'en-tete
   ========================================================= */

/* pleine largeur, alignee sur la navbar (1240px) */
.results { max-width: 1240px; }

/* --- placeholder photo : carre propre + glyphe image --- */
.car-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; color: var(--s-accent-deep); }
.car-ph-ic { width: 54px; height: 54px; opacity: .5; }
.car-ph-tag { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--muted); text-align: center; }

/* hero : la photo garde le fond saisonnier, glyphe centre */
.hero3-photo { min-height: 230px; }
.hero3-photo .car-ph-ic { width: 60px; height: 60px; }

/* alternatives : vraie case photo (pas d'icone moche) */
.alt-photo { padding: 0; min-height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(150deg, var(--s-soft), rgba(255,255,255,.4)); border: 1px solid rgba(255,255,255,.6); }
.car-ph-sm { color: var(--s-accent-deep); }
.car-ph-sm .car-ph-ic { width: 34px; height: 34px; opacity: .5; }

/* --- fiche technique : 5 colonnes + icone d'en-tete de groupe --- */
.ft-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ft-grp h4 { display: flex; align-items: center; gap: 7px; }
.ft-grp h4 svg { width: 15px; height: 15px; color: var(--s-accent); flex: none; }

/* =========================================================
   V17 : mobilite en blocs separes (PHEV = stations + bornes,
        chacun avec sa propre liste ET sa propre carte)
   ========================================================= */
.mob-wrap { display: flex; flex-direction: column; gap: 16px; }
.mob-wrap > .mob-pos { margin-top: 0; padding: 0 2px; }
.mob-wrap > .results-foot { margin-top: 0; }
.mob-wrap > .mob-grid { margin: 0; }

/* =========================================================
   V18 : fiche technique reparee = lignes label gauche /
        valeur droite (style bloc orange), essentiel only
   ========================================================= */
.ft-grid .ft-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(40,30,50,.06); }
.ft-grid .ft-grp .ft-row:last-child { border-bottom: none; }
.ft-grid .ft-row > span { font-size: .8rem; color: var(--muted); font-weight: 500; flex: 0 0 auto; }
.ft-grid .ft-row > b { font-size: .88rem; color: var(--ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }

/* =========================================================
   V19 : hero - pills (autonomie/recharge/0-100) sur UNE ligne
        colonne photo elargie + suppression de la contrainte
        de largeur des pills
   ========================================================= */
.hero3-body { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }
.hero3-pills { max-width: none; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hpill { flex: 0 1 auto; font-size: .8rem; padding: 8px 11px; gap: 7px; white-space: nowrap; }
.hpill svg { width: 15px; height: 15px; }

@media (max-width: 880px) {
  .hpill { flex: 1 1 auto; }
}

/* =========================================================
   V20 : ajustements finaux
   - header : la photo remplit toute la colonne (vers la droite)
   - section 02 : % et barre plus petits
   - section 03 : alignement checks/texte + espace avant la boite
   ========================================================= */

/* header : placeholder photo pleine largeur de sa colonne */
.hero3-photo { max-width: none; }

/* section 02 : pourcentage + barre plus discrets */
.alt-pc { font-size: .92rem; min-width: 32px; }
.alt-bar { flex: none; width: 100%; height: 5px; }

/* section 03 : checks bien alignes au texte + espace avant la boite bleue */
.why-forts { gap: 13px; }
.why-forts li { align-items: flex-start; gap: 10px; }
.why-forts li svg { width: 20px; height: 20px; margin-top: 1px; }
.why-forts li span { line-height: 1.5; }
.why-box { margin-top: 18px; }

@media (max-width: 880px) {
  .hero3-photo { max-width: none; }
}

/* =========================================================
   V21 : section 09 "Options & équipements"
        gauche = équipements de série (données réelles)
        droite = options courantes (prix indicatifs) + total
   ========================================================= */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.opt-grid > .opt-col { display: flex; flex-direction: column; min-width: 0; }
.opt-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 14px; }
.opt-h svg { width: 18px; height: 18px; color: var(--s-accent); flex: none; }

/* équipements de série : liste avec badge check */
.eq-list { display: flex; flex-direction: column; gap: 11px; }
.eq-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .89rem; color: var(--ink); line-height: 1.4; }
.eq-list li svg { flex: none; width: 19px; height: 19px; padding: 4px; box-sizing: border-box; color: #fff; background: var(--s-accent); border-radius: 50%; margin-top: 1px; stroke-width: 2.6; }

/* options : ligne cliquable (label englobe la case) */
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6); cursor: pointer; transition: background .16s ease, border-color .16s ease; }
.opt-row:hover { background: #fff; border-color: var(--s-accent-soft); }
.opt-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--s-soft); color: var(--s-accent-deep); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.opt-ic svg { width: 18px; height: 18px; }
.opt-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.opt-id b { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); }
.opt-tag { font-family: var(--font-text); font-weight: 700; font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; font-style: normal; white-space: nowrap; }
.opt-tag-reco { background: var(--s-accent); color: #fff; }
.opt-tag-confort { background: var(--s-soft); color: var(--s-accent-deep); }
.opt-tag-hiver { background: rgba(59,130,246,.14); color: #2563eb; }
.opt-tag-style { background: rgba(168,85,247,.14); color: #9333ea; }
.opt-tag-pratique { background: rgba(40,30,50,.07); color: var(--muted); }
.opt-price { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-cb { width: 18px; height: 18px; accent-color: var(--s-accent); cursor: pointer; margin: 0; }

.opt-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--s-accent); }
.opt-total span { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: rgba(255,255,255,.92); }
.opt-total b { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: #fff; font-variant-numeric: tabular-nums; }
.opt-col .tco-note { margin-top: 10px; }

@media (max-width: 860px) {
  .opt-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   V22 : retours test — score retiré, hero 2 colonnes,
        alternatives sans %/barre, espace énergies/rayon
   ========================================================= */

/* hero sans anneau de compatibilité → 2 colonnes (texte | photo) */
.hero3-body { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }

/* alternatives : sans % ni barre, le prix se cale en bas (cartes alignées) */
.alt-price { margin-top: auto; }

/* stations : un peu d'air entre les onglets carburant et le rayon */
.fuel-tabs { margin-bottom: 12px; }

@media (max-width: 880px) {
  .hero3-body { grid-template-columns: 1fr; }
}