/* =============================================================================
   CarKeeper — correctifs-v31.css (25 octobre 2026)
   Correctifs d'affichage de la charte citron. Chargée en dernier : ne change
   que l'apparence. Chaque bloc indique le défaut corrigé.
   ============================================================================= */

/* 1. Polices : fonts.css (Inter, Playfair, Archivo Black en base64, 167 Ko)
   était bloquée par la CSP (font-src 'self') et n'est plus chargée. Les titres
   « accent » retombaient sur Times New Roman (titre de l'écran d'accueil,
   écran d'achat, états vides) : tout passe sur Archivo. */
:root {
  --font-accent: var(--font-display);
}
.welcome__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}
.welcome__logo {
  box-shadow: 0 6px 20px rgba(33, 41, 28, 0.18);
}
.empty-state h2 {
  font-style: normal;
  color: var(--color-text);
}
.rp-page,
.rp-tf {
  font-family: var(--font-family);
}

/* 2. Photos des véhicules : format 16:10 partout (celui du recadrage).
   Avant : hauteur fixe 160 px (liste) et 260 px max (fiche) avec recadrage
   automatique au centre, d'où des véhicules coupés, surtout sur ordinateur
   (bandeau de 900 × 260) et pour les photos prises en portrait. */
.vehicle-card__photo,
.detail-photo,
.field__photo-preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
.vehicle-card__photo--placeholder {
  aspect-ratio: auto;
  height: 72px;
}
.detail-photo {
  border-radius: 14px;
}
.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.photo-actions[hidden] {
  display: none;
}
@media (min-width: 720px) {
  .detail-photo {
    max-width: 640px;
  }
  /* Liste des véhicules sur ordinateur : photo à gauche, infos à droite. */
  .vehicle-card-list .vehicle-card {
    flex-direction: row;
    align-items: stretch;
  }
  .vehicle-card-list .vehicle-card__media {
    flex: 0 0 240px;
    width: 240px;
  }
  .vehicle-card-list .vehicle-card__photo {
    height: 100%;
    min-height: 150px;
  }
  .vehicle-card-list .vehicle-card__photo--placeholder {
    height: 100%;
    min-height: 120px;
  }
  .vehicle-card-list .vehicle-card__body {
    flex: 1;
    min-width: 0;
  }
}

/* Fenêtre de cadrage */
.cadrage-modal {
  width: min(560px, calc(100vw - 24px));
}
.cadrage-body {
  display: grid;
  gap: 12px;
}
.cadrage-aide {
  margin: 0;
}
.cadrage-cadre {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #11160e;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cadrage-cadre:active {
  cursor: grabbing;
}
.cadrage-cadre:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.cadrage-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}
.cadrage-zoom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.9rem;
}
.cadrage-zoom input {
  width: 100%;
  accent-color: var(--color-primary);
}

/* 3. Fiche véhicule sur mobile : la 3e vignette (« Interventions »,
   « Ce mois-ci ») sortait de l'écran (débordement de ~80 px). Sur téléphone :
   deux colonnes, la dernière vignette seule prend toute la largeur. */
.detail-stats-grid .stat-card {
  min-width: 0;
}
@media (max-width: 520px) {
  .detail-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .detail-stats-grid .stat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .detail-stats-grid .stat-card {
    padding: 12px 12px;
  }
  .detail-stats-grid .stat-card__value {
    font-size: clamp(1.1rem, 5.6vw, 1.45rem);
    white-space: nowrap;
  }
}

/* 4. Fenêtres (ajout de véhicule, entretien…) : le corps avait sa propre
   bordure arrondie, d'où un double cadre à l'intérieur de la fenêtre. */
.modal .modal__body {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* 5. Thème sombre : coût mensuel invisible (vert sombre sur fond sombre). */
.ownership-total {
  color: var(--color-text);
}

/* 6. Bloc « Dossier de vente » et écran d'achat : restes de l'ancienne charte
   bleue (#12356b), illisibles en thème sombre. */
.report-promo {
  border-top-color: var(--color-border);
}
.report-promo__title,
.report-promo__price strong,
.achat-modal h2,
.achat-prix__ligne strong,
.achat-card__title,
.achat-paiement strong {
  color: var(--color-text);
}
.report-promo__text,
.report-promo__price,
.achat-veh,
.achat-prix__taxe,
.achat-note,
.achat-facts > div span:first-child {
  color: var(--color-text-muted);
}
.achat-card,
.achat-check {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.achat-inclus li {
  color: var(--color-text);
}
.achat-inclus li::before {
  color: var(--color-accent);
}
.achat-cta {
  background: var(--color-primary);
}

/* 7. Navigation mobile : « Plus » était écrit plus gros que les autres
   onglets (font: inherit reprenait la taille du texte courant). */
.nav-link--plus {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: inherit;
}

/* 8. Contraste des échéances « Bientôt » (orange #e08a1e sur crème : 2,4:1,
   minimum WCAG 4,5:1). Thème clair uniquement : le sombre est lisible. */
:root:not([data-theme="dark"]) {
  --color-warning: #9a5a00;
  --color-text-muted: #63675a; /* 4,46:1 -> 5,1:1 sur le fond #f3f4ef */
}

/* 9. Graphiques : avec un seul mois de données, la barre occupait toute la
   largeur (gros bloc noir) ; les listes à barres avaient un cadre dans le
   cadre (classe .chart traitée comme une carte). */
.vbar {
  flex: 1 0 44px;
  max-width: 64px;
}
.vbars {
  justify-content: flex-start;
}
.detail-card .chart {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* 10. Photo du véhicule : le sélecteur de fichier du navigateur (« Choisir un
   fichier », souvent en anglais) est remplacé par deux boutons. Le champ reste
   présent, invisible, pour le scan de carte grise et le formulaire. */
.file-input-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}
.field--file {
  position: relative;
}

/* Rappels : actions secondaires repliées derrière « ⋯ ». */
.reminder-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.reminder-card__more {
  min-width: 44px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.reminder-card__extra {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reminder-card__extra[hidden] {
  display: none;
}
.photo-actions .button {
  flex: 0 1 auto;
  width: auto;
}