/* ══ « Quelle teinte pour votre voiture ? » — teinte-profil.js (19/10/2026) ══
   Préfixe .tp. Textes protégés de « section p { .95rem !important } ». */
.tp-section{ background:#fff; overflow:hidden; }
.tp{ --tp-nuit:var(--navy,#0C1B2E); --tp-or:var(--gold,#C9A84C); --tp-gris:var(--text-muted,#5b6572); max-width:1180px; margin:0 auto; }

/* Pourcentages */
.tp-pcts{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; max-width:860px; margin:0 auto; }
.tp-pct{ border:1.5px solid rgba(12,27,46,.14); background:#fff; color:var(--tp-nuit); border-radius:999px; padding:.7rem .3rem; font:inherit; font-weight:800;
  font-size:1rem; font-style:italic; letter-spacing:-.01em; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .15s; font-variant-numeric:tabular-nums; }
.tp-pct:hover{ border-color:var(--tp-or); }
.tp-pct:active{ transform:scale(.96); }
.tp-pct.on{ background:var(--tp-nuit); border-color:var(--tp-nuit); color:#fff; box-shadow:0 6px 18px rgba(12,27,46,.22); }
.tp-pct:focus-visible{ outline:2px solid var(--tp-or); outline-offset:2px; }

/* Voiture */
.tp-stage{ position:relative; aspect-ratio:1105 / 375; margin:1.2rem auto 0; max-width:1180px; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.tp-l{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .45s ease; }
.tp-l.on{ opacity:1; }

/* Infos */
.tp-info{ display:grid; gap:1.4rem; margin-top:1.2rem; }
.section .tp-k{ font-size:1.15rem !important; color:var(--tp-nuit); margin:0 0 .3rem; }
.tp-k strong{ font-weight:800; }
.section .tp-d{ font-size:.95rem !important; color:#3b4656; line-height:1.6; margin:0 0 .8rem; }
.tp-loi{ list-style:none; margin:0 0 .7rem; padding:0; display:grid; gap:.4rem; }
.tp-loi li{ font-size:.86rem; line-height:1.45; padding:.5rem .7rem .5rem 2rem; border-radius:10px; position:relative; }
.tp-loi li::before{ position:absolute; left:.7rem; top:.48rem; font-weight:800; }
.tp-loi .ok{ background:rgba(46,125,50,.08); color:#2e6b33; }
.tp-loi .ok::before{ content:"✓"; }
.tp-loi .non{ background:#fdf4e3; color:#8a5a00; }
.tp-loi .non::before{ content:"!"; }
.section .tp-note{ font-size:.78rem !important; color:var(--tp-gris); margin:0; line-height:1.5; }
.tp-side{ background:#f7f5ef; border-radius:16px; padding:1rem; }
.section .tp-gk{ font-size:.72rem !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dark,#a8862f); margin:0 0 .6rem; }
.tp-gammes{ list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.4rem; }
.tp-gammes[hidden], .tp-gk[hidden]{ display:none; }
.tp-gammes a{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 .6rem; padding:.55rem .75rem; border-radius:10px; background:#fff;
  border:1px solid rgba(12,27,46,.08); text-decoration:none; color:var(--tp-nuit); transition:border-color .2s; }
.tp-gammes a:hover{ border-color:var(--tp-or); }
.tp-gammes span{ font-weight:700; font-size:.9rem; }
.tp-gammes em{ font-style:normal; font-size:.66rem; font-weight:800; color:var(--gold-dark,#a8862f); text-transform:uppercase; letter-spacing:.04em; margin-left:.2rem; }
.tp-gammes strong{ grid-row:1 / 3; grid-column:2; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.tp-gammes small{ font-size:.72rem; color:var(--tp-gris); }
.tp-cta{ display:flex; width:100%; justify-content:center; text-align:center; }
.tp-lien{ display:block; text-align:center; margin-top:.6rem; font-size:.86rem; font-weight:600; color:var(--tp-nuit); text-underline-offset:3px; }

@media (min-width:900px){
  .tp-info{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:2rem; align-items:start; max-width:1000px; margin-left:auto; margin-right:auto; }
}
@media (max-width:600px){
  .tp-pcts{ gap:.3rem; }
  .tp-pct{ padding:.55rem 0; font-size:.82rem; }
  .tp-stage{ margin-left:-12px; margin-right:-12px; }
}
@media (prefers-reduced-motion:reduce){ .tp-l{ transition:none; } }