/* DynoTec — monte complète (module dynotecmontage).
   Registre de la DA : Outfit, noir et graphite, jaune RÉSERVÉ aux actions et à
   la sélection, cartes blanches arrondies. La carte d'achat reste blanche
   (Julien a refusé une carte d'achat noire, 10/10/2026) : seuls l'en-tête du
   bloc et le récapitulatif sont noirs. Tout est préfixé #dtm. */

#dtm {
  --dtm-noir: #0E0E10;
  --dtm-graphite: #1A1B1E;
  --dtm-graphite-2: #24262A;
  --dtm-trait: #2E3035;
  --dtm-gris: #5E6068;
  --dtm-gris-clair: #A9ABB2;
  --dtm-bord: #E4E5E8;
  --dtm-fond: #F5F5F6;
  --dtm-jaune: #EEF02B;
  --dtm-jaune-vif: #F6F86A;
  --dtm-vert: #1F9D55;
  --dtm-rouge: #C8102E;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--dtm-noir);
  background: #FFFFFF;
  border: 1px solid var(--dtm-bord);
  border-radius: 24px;
  overflow: hidden;
  margin: 18px 0 22px;
  container-type: inline-size;
  container-name: dtm;
  -webkit-font-smoothing: antialiased;
}
#dtm[hidden] { display: none !important; }
#dtm *, #dtm *::before, #dtm *::after { box-sizing: border-box; }
#dtm :is(h2, h3, p, ul) { margin: 0; font-family: inherit; }
#dtm ul { padding: 0; list-style: none; }
#dtm button, #dtm select, #dtm input { font-family: inherit; }
#dtm button { cursor: pointer; }
#dtm button:disabled { cursor: default; }
#dtm svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#dtm :is(button, select, input):focus-visible { outline: 3px solid #8C8E00; outline-offset: 2px; }

/* ---- En-tête noir */
#dtm .dtm-tete {
  background: var(--dtm-noir); color: #FFFFFF; padding: 26px 26px 22px;
  display: flex; flex-direction: column; gap: 10px;
  background-image: radial-gradient(120% 140% at 100% 0%, #26282D 0%, var(--dtm-noir) 55%);
}
#dtm .dtm-surtitre { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dtm-jaune); }
#dtm .dtm-titre { font-size: clamp(21px, 2.1vw, 26px); font-weight: 300; line-height: 1.15; color: #FFFFFF; letter-spacing: -0.005em; }
#dtm .dtm-intro { font-size: 14px; line-height: 1.55; color: #C4C6CC; }
#dtm .dtm-atouts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
#dtm .dtm-atouts li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #E9EAEC; }
#dtm .dtm-atouts svg { color: var(--dtm-jaune); width: 17px; height: 17px; }

/* ---- Étapes */
#dtm .dtm-corps { padding: 6px 22px 8px; }
#dtm .dtm-etape { padding: 20px 0 22px; border-bottom: 1px solid var(--dtm-bord); display: flex; flex-direction: column; gap: 14px; }
#dtm .dtm-etape:last-child { border-bottom: 0; }
#dtm .dtm-etape.is-inactif .dtm-montage-lignes { opacity: 0.45; }
#dtm .dtm-etape__tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#dtm .dtm-etape__tete h3 { font-size: 17px; font-weight: 500; color: var(--dtm-noir); }
#dtm .dtm-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--dtm-noir); color: var(--dtm-jaune);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
#dtm .dtm-cote {
  margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; padding: 5px 11px;
  border-radius: 999px; background: var(--dtm-fond); color: var(--dtm-noir); font-variant-numeric: tabular-nums;
}
#dtm .dtm-aide { font-size: 13px; line-height: 1.5; color: var(--dtm-gris); }
#dtm .dtm-vide { font-size: 14px; color: var(--dtm-gris); padding: 14px 16px; background: var(--dtm-fond); border-radius: 14px; }

/* ---- Puces, onglets, filtres */
#dtm .dtm-tailles, #dtm .dtm-question__choix { display: flex; flex-wrap: wrap; gap: 8px; }
#dtm .dtm-puce {
  border: 1px solid var(--dtm-bord); background: #FFFFFF; color: var(--dtm-noir); border-radius: 999px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 500; transition: border-color .15s, background .15s;
}
#dtm .dtm-puce:hover { border-color: var(--dtm-noir); }
#dtm .dtm-puce.is-actif { background: var(--dtm-noir); color: #FFFFFF; border-color: var(--dtm-noir); }

#dtm .dtm-onglets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--dtm-fond); padding: 5px; border-radius: 16px; }
#dtm .dtm-onglet {
  display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; white-space: nowrap;
  border-radius: 12px; padding: 10px 4px; font-size: 14px; font-weight: 500; color: var(--dtm-gris); transition: background .15s, color .15s;
}
#dtm .dtm-onglet small { font-size: 11px; font-weight: 600; color: var(--dtm-gris-clair); }
#dtm .dtm-onglet:not(:disabled):hover { color: var(--dtm-noir); }
#dtm .dtm-onglet.is-actif { background: #FFFFFF; color: var(--dtm-noir); box-shadow: 0 1px 3px rgba(14,14,16,.12); }
#dtm .dtm-onglet.is-actif small { color: var(--dtm-noir); }
#dtm .dtm-onglet:disabled { opacity: .4; }

#dtm .dtm-filtres { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#dtm .dtm-gammes { display: flex; flex-wrap: wrap; gap: 4px; }
#dtm .dtm-filtre {
  border: 0; background: transparent; padding: 6px 10px; border-radius: 999px; font-size: 13px; color: var(--dtm-gris);
}
#dtm .dtm-filtre:hover { color: var(--dtm-noir); }
#dtm .dtm-filtre.is-actif { background: var(--dtm-fond); color: var(--dtm-noir); font-weight: 500; }
#dtm .dtm-tri { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--dtm-gris); font-weight: 400; }
#dtm .dtm-tri select {
  border: 1px solid var(--dtm-bord); border-radius: 10px; height: 34px; padding: 0 28px 0 10px; font-size: 13px;
  background: #FFFFFF; color: var(--dtm-noir);
}

/* ---- Cartes pneus */
#dtm .dtm-pneus { display: grid; gap: 8px; grid-template-columns: 1fr; }
#dtm .dtm-pneu {
  position: relative; width: 100%; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px;
  text-align: left; background: #FFFFFF; border: 1.5px solid var(--dtm-bord); border-radius: 18px; padding: 12px 14px 12px 12px;
  color: var(--dtm-noir); transition: border-color .15s, box-shadow .15s, transform .15s;
}
#dtm .dtm-pneu:hover { border-color: #C9CBD0; box-shadow: 0 6px 18px rgba(14,14,16,.06); }
#dtm .dtm-pneu.is-choisi { border-color: var(--dtm-noir); box-shadow: 0 0 0 3px var(--dtm-jaune); }
#dtm .dtm-pneu__photo {
  width: 64px; height: 64px; border-radius: 14px; background: var(--dtm-fond); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#dtm .dtm-pneu__photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
#dtm .dtm-pneu__photo svg { width: 40px; height: 40px; color: #B9BBC1; stroke-width: 1.3; }
#dtm .dtm-pneu__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#dtm .dtm-pneu__marque { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dtm-gris); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
#dtm .dtm-gamme { font-style: normal; font-size: 10px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--dtm-fond); color: var(--dtm-gris); font-weight: 500; }
#dtm .dtm-gamme--premium { background: var(--dtm-noir); color: var(--dtm-jaune); }
#dtm .dtm-pneu__modele { font-size: 15.5px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dtm .dtm-pneu__cote { font-size: 12.5px; color: var(--dtm-gris); font-variant-numeric: tabular-nums; }
#dtm .dtm-pneu__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
#dtm .dtm-badge { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
#dtm .dtm-badge--tesla { background: #FFFFFF; border: 1px solid var(--dtm-noir); color: var(--dtm-noir); }
#dtm .dtm-eu {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 7px 2px 5px;
  border-radius: 999px; color: #FFFFFF; background: var(--dtm-gris);
}
#dtm .dtm-eu svg { width: 12px; height: 12px; stroke-width: 2; }
#dtm .dtm-eu--a { background: #00A651; }
#dtm .dtm-eu--b { background: #50B848; }
#dtm .dtm-eu--c { background: #C9D200; color: var(--dtm-noir); }
#dtm .dtm-eu--d { background: #FDB913; color: var(--dtm-noir); }
#dtm .dtm-eu--e { background: #ED1C24; }
#dtm .dtm-eu--bruit { background: var(--dtm-fond); color: var(--dtm-noir); }
#dtm .dtm-pneu__prix { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
#dtm .dtm-pneu__prix strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dtm .dtm-pneu__prix small { font-size: 11.5px; color: var(--dtm-gris); }
#dtm .dtm-pneu__lot { font-size: 12px; color: var(--dtm-noir); font-weight: 500; white-space: nowrap; margin-top: 2px; }
#dtm .dtm-stock { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--dtm-vert); font-weight: 500; margin-top: 4px; }
#dtm .dtm-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dtm-vert); box-shadow: 0 0 0 3px rgba(31,157,85,.15); }
#dtm .dtm-pneu__coche {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--dtm-jaune);
  color: var(--dtm-noir); display: none; align-items: center; justify-content: center; border: 2px solid #FFFFFF;
}
#dtm .dtm-pneu__coche svg { width: 14px; height: 14px; stroke-width: 2.6; }
#dtm .dtm-pneu.is-choisi .dtm-pneu__coche { display: flex; }

#dtm .dtm-plus, #dtm .dtm-sans {
  border: 0; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--dtm-noir); padding: 6px 2px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #C9CBD0; align-self: flex-start;
}
#dtm .dtm-plus:hover, #dtm .dtm-sans:hover { text-decoration-color: var(--dtm-noir); }
#dtm .dtm-sans { color: var(--dtm-gris); font-weight: 400; }
#dtm .dtm-sans.is-actif { color: var(--dtm-noir); font-weight: 500; text-decoration: none; }

#dtm .dtm-demande { background: var(--dtm-fond); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
#dtm .dtm-lien { font-weight: 500; color: var(--dtm-noir); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Capteurs */
#dtm .dtm-date { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#dtm .dtm-date__lib { grid-column: 1 / -1; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dtm-gris); }
#dtm .dtm-date select, #dtm .dtm-vin input {
  width: 100%; height: 48px; border: 1px solid var(--dtm-bord); border-radius: 14px; padding: 0 14px; font-size: 15px;
  background-color: #FFFFFF; color: var(--dtm-noir);
}
#dtm .dtm-attente, #dtm .dtm-verdict, #dtm .dtm-note {
  display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5;
}
#dtm .dtm-attente { color: var(--dtm-gris); }
#dtm .dtm-verdict { background: var(--dtm-fond); border-radius: 14px; padding: 12px 14px; color: var(--dtm-noir); }
#dtm .dtm-verdict svg { margin-top: 2px; }
#dtm .dtm-note { font-size: 13px; color: #8A5A00; background: #FFF7D6; border-radius: 12px; padding: 10px 12px; }
#dtm .dtm-note svg { width: 16px; height: 16px; margin-top: 2px; }
#dtm .dtm-question { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
#dtm .dtm-options { display: flex; flex-direction: column; gap: 8px; }
#dtm .dtm-option {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1.5px solid var(--dtm-bord); background: #FFFFFF; border-radius: 16px; padding: 12px 14px; color: var(--dtm-noir);
  transition: border-color .15s, box-shadow .15s;
}
#dtm .dtm-option:hover { border-color: #C9CBD0; }
#dtm .dtm-option.is-choisi { border-color: var(--dtm-noir); box-shadow: 0 0 0 3px var(--dtm-jaune); }
#dtm .dtm-option__rond { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B9BBC1; position: relative; }
#dtm .dtm-option.is-choisi .dtm-option__rond { border-color: var(--dtm-noir); }
#dtm .dtm-option.is-choisi .dtm-option__rond::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--dtm-noir); }
#dtm .dtm-option__txt { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
#dtm .dtm-option__txt strong { font-weight: 500; }
#dtm .dtm-option__txt small { font-size: 12.5px; color: var(--dtm-gris); line-height: 1.4; }
#dtm .dtm-option__prix { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#dtm .dtm-vin { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12.5px; color: var(--dtm-gris); font-weight: 400; }
#dtm .dtm-vin input { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
#dtm .dtm-vin input::placeholder { font-family: "Outfit", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--dtm-gris-clair); }
#dtm .dtm-vin.is-requis span { color: var(--dtm-noir); font-weight: 500; }
#dtm .dtm-vin.is-requis input { border-color: var(--dtm-noir); }

/* ---- Montage */
#dtm .dtm-interrupteur {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1.5px solid var(--dtm-bord); background: #FFFFFF; border-radius: 16px; padding: 14px; color: var(--dtm-noir);
}
#dtm .dtm-interrupteur.is-actif { border-color: var(--dtm-noir); box-shadow: 0 0 0 3px var(--dtm-jaune); }
#dtm .dtm-interrupteur:disabled { opacity: .5; }
#dtm .dtm-interrupteur__piste { width: 44px; height: 26px; border-radius: 999px; background: #D5D6DA; position: relative; transition: background .15s; }
#dtm .dtm-interrupteur__piste span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#dtm .dtm-interrupteur.is-actif .dtm-interrupteur__piste { background: var(--dtm-noir); }
#dtm .dtm-interrupteur.is-actif .dtm-interrupteur__piste span { transform: translateX(18px); background: var(--dtm-jaune); }
#dtm .dtm-interrupteur__txt { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
#dtm .dtm-interrupteur__txt strong { font-weight: 500; }
#dtm .dtm-interrupteur__txt small { font-size: 12.5px; color: var(--dtm-gris); line-height: 1.4; }
#dtm .dtm-montage-lignes { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
#dtm .dtm-montage-lignes li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--dtm-gris); }
#dtm .dtm-montage-lignes li span:last-child { font-variant-numeric: tabular-nums; }

/* ---- Récapitulatif noir + CTA jaune */
#dtm .dtm-recap { background: var(--dtm-noir); color: #FFFFFF; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
#dtm .dtm-recap ul { display: flex; flex-direction: column; gap: 6px; }
#dtm .dtm-recap li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #C4C6CC; }
#dtm .dtm-recap li span:last-child { color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dtm .dtm-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--dtm-trait); padding-top: 12px; }
#dtm .dtm-total span { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dtm-gris-clair); }
#dtm .dtm-total strong { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
#dtm .dtm-cta {
  width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--dtm-jaune); color: var(--dtm-noir);
  font-size: 16px; font-weight: 600; letter-spacing: 0.01em; transition: background .15s, transform .1s;
}
#dtm .dtm-cta:hover:not(:disabled) { background: var(--dtm-jaune-vif); }
#dtm .dtm-cta:active:not(:disabled) { transform: scale(.99); }
#dtm .dtm-cta:disabled { opacity: .7; }
#dtm .dtm-retour { font-size: 13.5px; text-align: center; }
#dtm .dtm-retour--ok { color: var(--dtm-jaune); }
#dtm .dtm-retour--erreur { color: #FFB4B4; }
#dtm .dtm-maj { font-size: 11.5px; color: var(--dtm-gris); text-align: center; }

/* ---- Chargement */
#dtm .dtm-chargement { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dtm-gris); padding: 20px 0 8px; }
#dtm .dtm-chargement__roue svg { width: 26px; height: 26px; animation: dtm-tour 1.1s linear infinite; color: var(--dtm-noir); }
#dtm .dtm-squelette { height: 76px; border-radius: 18px; margin: 8px 0; background: linear-gradient(90deg, #F1F1F3 0%, #F8F8F9 50%, #F1F1F3 100%); background-size: 200% 100%; animation: dtm-reflet 1.2s ease-in-out infinite; }
#dtm .dtm-squelette:last-child { margin-bottom: 20px; }
@keyframes dtm-tour { to { transform: rotate(360deg); } }
@keyframes dtm-reflet { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  #dtm .dtm-chargement__roue svg, #dtm .dtm-squelette { animation: none; }
}

/* ---- Bouton « Ajouter au panier » du thème quand des options sont choisies */
.dtm-avec-options { box-shadow: 0 0 0 3px #0E0E10 inset; }

/* ---- Bloc pleine largeur (position « entre les photos et la description ») */
@container dtm (min-width: 760px) {
  #dtm .dtm-tete { padding: 34px 40px 28px; }
  #dtm .dtm-corps { padding: 6px 40px 10px; display: grid; grid-template-columns: 1.6fr 1fr; column-gap: 40px; }
  #dtm .dtm-corps > .dtm-etape:first-child { grid-row: span 2; border-bottom: 0; }
  #dtm .dtm-pneus { grid-template-columns: 1fr 1fr; }
  #dtm .dtm-recap { padding: 22px 40px; display: grid; grid-template-columns: 1.6fr 1fr; column-gap: 40px; align-items: end; }
  #dtm .dtm-recap ul { grid-row: span 3; }
}

/* ---- Petits écrans */
@media (max-width: 575px) {
  #dtm { margin-left: -10px; margin-right: -10px; border-radius: 20px; }
}
@container dtm (max-width: 420px) {
  #dtm .dtm-pneu__modele { white-space: normal; }
  #dtm .dtm-onglet small { display: none; }
  #dtm .dtm-tete { padding: 22px 18px 18px; }
  #dtm .dtm-corps { padding: 2px 16px 6px; }
  #dtm .dtm-recap { padding: 18px 16px 16px; }
  #dtm .dtm-pneu { grid-template-columns: 52px 1fr; gap: 12px; }
  #dtm .dtm-pneu__photo { width: 52px; height: 52px; }
  #dtm .dtm-pneu__prix { grid-column: 2; flex-direction: row; align-items: baseline; flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; text-align: left; }
  #dtm .dtm-onglet span { font-size: 13px; }
  #dtm .dtm-onglet svg { display: none; }
  #dtm .dtm-cote { margin-left: 0; }
}