/* « Choisissez votre Tesla » de /accessoires-tesla/ (tlab-choix-tesla.php), d'après la maquette validée le 01/11/2026.
   Téléphone d'abord : une rangée de cartes à faire glisser, deux visibles, Model 3 · Y · S · X au-dessus pour s'y repérer.
   Puis 3 cartes par ligne, puis 5 (Model 3 et Model Y en haut, Model S et Model X centrés dessous).
   ⚠️ Requêtes média, pas de requêtes de conteneur ni de :is() : le CSS utilisé de WP Rocket (RUCSS) jette les sélecteurs
   qui commencent par :is( (cf. optimisation-css-rocket-tlab). Bornes : 680 px ≈ 640 px de section (marges de 20 px du
   téléphone), 1000 px ≈ 960 px. --tlab-ct-bord = la marge latérale de la section au téléphone (padding_mobile de #1000009). */
.tlab-ct { --tlab-ct-bord: 20px; --tlab-ct-carte: #F3F3F5; color: #2A2A2E; }
.tlab-ct__tete { text-align: center; margin: 0 0 20px; }
.tlab-ct .tlab-ct__tete h2 {
  margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; color: #0E0E10; letter-spacing: -.01em; text-wrap: balance;
}
.tlab-ct .tlab-ct__tete p { margin: 8px auto 0; max-width: 52ch; font-size: 14px; line-height: 1.55; color: #6B6B73; text-wrap: balance; }
.tlab-ct__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* — modèles au-dessus de la rangée (boutons remis à plat : le thème habille tous les boutons) — */
.tlab-ct__nav { display: flex; justify-content: center; gap: 4px; margin: 0 -6px 12px; }
.tlab-ct .tlab-ct__nav button,
.tlab-ct .tlab-ct__nav button:hover,
.tlab-ct .tlab-ct__nav button:focus {
  min-height: 0; height: auto; margin: 0; padding: 10px 8px 9px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; box-shadow: none; color: #6B6B73; font-family: inherit; font-size: 14px; line-height: 1; font-weight: 600;
  text-transform: none; letter-spacing: normal; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tlab-ct .tlab-ct__nav button[aria-current="true"] { color: #0E0E10; border-bottom-color: #E11B22; }
.tlab-ct .tlab-ct__nav button:focus-visible { outline: 2px solid #E11B22; outline-offset: 2px; border-radius: 2px; }

/* — la rangée : deux cartes entières, et le bord de la troisième qui invite à glisser — */
.tlab-ct .tlab-ct__liste {
  position: relative; list-style: none; margin: 0 calc(-1 * var(--tlab-ct-bord)); padding: 0 var(--tlab-ct-bord) 4px;
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--tlab-ct-bord);
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tlab-ct__liste::-webkit-scrollbar { display: none; }
.tlab-ct .tlab-ct__liste > li {
  flex: 0 0 calc((100% - 12px - 24px) / 2); scroll-snap-align: start; display: flex; margin: 0; padding: 0; list-style: none;
}

.tlab-ct .tlab-ct__carte {
  position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  background: var(--tlab-ct-carte); border: 1px solid transparent; border-radius: 14px; overflow: hidden;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color .18s ease;
}
.tlab-ct__img { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.tlab-ct .tlab-ct__img img {
  display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; border-radius: 0; transition: transform .35s ease;
}
.tlab-ct__txt { min-width: 0; padding: 0 12px 14px; }
.tlab-ct .tlab-ct__nom { display: block; font-size: 14px; line-height: 1.3; font-weight: 700; color: #0E0E10; }
/* carte étroite : la génération passe sous le modèle, jamais coupée au trait d'union */
.tlab-ct__gen { display: block; white-space: nowrap; }
.tlab-ct__fl { display: none; width: 18px; height: 18px; margin: 2px 14px 0 0; color: #0E0E10; transition: transform .18s ease, color .18s ease; }

.tlab-ct a.tlab-ct__carte:hover { border-color: #0E0E10; color: inherit; }
.tlab-ct a.tlab-ct__carte:hover .tlab-ct__fl { color: #E11B22; transform: translateX(2px); }
.tlab-ct a.tlab-ct__carte:active { border-color: #E11B22; }
.tlab-ct a.tlab-ct__carte:focus-visible { outline: 2px solid #E11B22; outline-offset: 2px; }

/* 0 produit pour la génération : pas de lien, voiture grisée, « Bientôt » en texte simple en haut à droite */
.tlab-ct__etat { position: absolute; right: 12px; top: 12px; z-index: 1; font-size: 12px; line-height: 1; font-weight: 700; color: #0E0E10; }
.tlab-ct .tlab-ct__carte--bientot .tlab-ct__img img { filter: grayscale(1); opacity: .55; }
.tlab-ct .tlab-ct__carte--bientot .tlab-ct__nom { color: #2A2A2E; }

/* — 3 cartes par ligne, plus rien à faire glisser — */
@media (min-width: 680px) {
  .tlab-ct__tete { margin-bottom: 30px; }
  .tlab-ct .tlab-ct__tete h2 { font-size: 32px; }
  .tlab-ct .tlab-ct__tete p { margin-top: 10px; font-size: 15px; }
  .tlab-ct__nav { display: none; }
  .tlab-ct .tlab-ct__liste { margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; gap: 20px 16px; overflow: visible; }
  .tlab-ct .tlab-ct__liste > li { flex: 0 0 calc((100% - 2 * 16px) / 3); }
  .tlab-ct__txt { padding: 0 4px 16px 16px; }
  .tlab-ct .tlab-ct__nom { font-size: 16px; line-height: 1.25; }
  .tlab-ct__gen { display: inline; }
  .tlab-ct__fl { display: block; }
  .tlab-ct__etat { right: 16px; top: 14px; font-size: 13px; }
}

/* — 5 par ligne : Model 3 et Model Y en haut, Model S et Model X centrés dessous — */
@media (min-width: 1000px) {
  .tlab-ct__tete { margin-bottom: 34px; }
  .tlab-ct .tlab-ct__liste { gap: 16px; }
  .tlab-ct .tlab-ct__liste > li { flex-basis: calc((100% - 4 * 16px) / 5); }
  .tlab-ct .tlab-ct__nom { font-size: 15px; }
  .tlab-ct__fl { opacity: 0; transform: translateX(-4px); }
  .tlab-ct a.tlab-ct__carte:hover .tlab-ct__fl,
  .tlab-ct a.tlab-ct__carte:focus-visible .tlab-ct__fl { opacity: 1; transform: translateX(0); }
  .tlab-ct a.tlab-ct__carte:hover .tlab-ct__img img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .tlab-ct .tlab-ct__carte, .tlab-ct .tlab-ct__img img, .tlab-ct__fl { transition: none; }
}