/* ==========================================================================
   plateforme-marque.css — étape 0.5 « marque de l'appareil » (LOT 3, spec 01).
   Chargé UNIQUEMENT par plateforme/reservation_marque.html (block pf_head). Ne
   touche ni plateforme.css ni tokens.css : nouvel asset, zéro bump. Réutilise
   les tokens --pf-* de plateforme.css. Mobile-first, cibles >= 44px, AAA.
   Sélection = radios masquées + label-chip (pattern .pf-auth-tabs). Le champ
   « autre marque » apparaît via :has() quand l'option Autre est cochée.
========================================================================== */

.pf-marque-intro {
  margin: 4px 0 14px;
  color: var(--pf-text-2);
  font-size: 15px;
}

/* Grille de chips de marques (le client choisit SON appareil). */
.pf-marque-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

/* La vraie radio est masquée (accessible : focus visible reporté sur le chip). */
.pf-marque-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.pf-marque-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--pf-r-input);
  border: 1px solid var(--pf-border-strong);
  background: var(--pf-surface);
  color: var(--pf-text-2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease,
    box-shadow .14s ease, transform .14s ease;
}

/* Bug CEO : ces chips sont VRAIMENT cliquables (choix de la marque) mais leur
   survol ne changeait qu'un liseré → trop discret. On renforce l'affordance :
   liseré marqué + léger relief + micro-lift, cohérent avec les CTA. */
.pf-marque-chip:hover {
  border-color: var(--pf-pin-500);
  background: var(--pf-brand-soft);
  color: var(--pf-pin-700);
  box-shadow: var(--pf-shadow-1);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .pf-marque-chip { transition: background .14s ease, border-color .14s ease, color .14s ease; }
  .pf-marque-chip:hover { transform: none; }
}

.pf-marque-radio:checked + .pf-marque-chip {
  background: var(--pf-brand-soft);
  border-color: var(--pf-pin-500);
  color: var(--pf-pin-700);
}

/* Focus clavier visible (la radio masquée reporte son focus sur le chip). */
.pf-marque-radio:focus-visible + .pf-marque-chip {
  outline: 3px solid var(--pf-pin-500);
  outline-offset: 2px;
}

/* Champ texte « autre marque » : masqué tant que l'option Autre n'est pas cochée. */
.pf-marque-autre-field {
  display: none;
  margin-bottom: 18px;
}

.pf-marque-form:has(#pf-marque-autre:checked) .pf-marque-autre-field {
  display: block;
}

/* Bloc « marque non réparée » : titre des confrères proposés. */
.pf-marque-confreres-title {
  margin: 22px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--pf-text);
}