/* Affinage mobile — couche d'override importée EN DERNIER (gagne par cascade).
   Le système n'avait aucun palier sous ~640px : ce fichier cible les vrais téléphones (≤480px)
   et corrige les débordements/densités identifiés sur la bande ≤720px. */

/* Garde anti-débordement horizontal. `clip` (et non `hidden`) pour ne pas casser position:sticky. */
html, body { overflow-x: clip; }

/* Gros titres : ne jamais déborder horizontalement quel que soit le contenu. */
.vehicle-command-main strong,
.decision-title-row strong,
.page-header h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}

@media (max-width: 760px) {
  /* Stats véhicule : 2 colonnes (au lieu d'1 qui gaspillait l'espace et faisait pire que la tablette). */
  .vehicle-command-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  /* Grille 2 colonnes générique qui ne s'effondrait jamais (cause d'un scroll horizontal sur /garage). */
  .showcase-two-col { grid-template-columns: 1fr; }

  /* Padding mobile des cartes de formulaire (jamais réduit sous 768px auparavant). */
  .garage-form { padding: 16px; }

  /* Onglets REMC C1..C4 : 2 colonnes au lieu de 4 (mots longs « Appréhender », « Maîtriser »). */
  .remc-tabs { grid-template-columns: repeat(2, 1fr); }
  .remc-tab { min-width: 0; border-radius: 12px; }
  .remc-tab strong { overflow-wrap: anywhere; hyphens: auto; }

  /* Rangée niveaux + bouton schéma : le schéma passe seul sur sa propre ligne, les 3 niveaux gardent leur place. */
  .remc-levels { flex-wrap: wrap; }
  .remc-schema-btn { flex: 1 0 100%; }

  /* Cibles tactiles ≥44px pour les actions rapides (problèmes / véhicules bloqués). */
  .mini-actions button { min-height: 44px; padding: 0 14px; }

  /* Documents employés : une colonne, cibles aérées. */
  .settings-doc-list li { flex-direction: column; align-items: stretch; }

  /* En-tête de la modale schéma : titre limité à 2 lignes pour préserver la zone de dessin. */
  .schema-canvas-head { align-items: flex-start; }
  .schema-canvas-head strong {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  /* Vrais téléphones : planchers de police plus bas + paddings resserrés. */
  .page-header h1 {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }
  .vehicle-command-main strong { font-size: clamp(2.4rem, 12vw, 4.6rem); }

  /* Boutons d'enregistrement/envoi : pleine largeur fiable (min-width 220px neutralisé). */
  .save-button { min-width: 0; width: 100%; }
  .form-actions { align-items: stretch; }

  /* Paddings de carte un cran plus serrés sur petit écran. */
  .focus-card, .card, .showcase-stat-card { padding: 16px; }
}

/* ── Barre de nav 1081–1500px : il y a trop d'éléments pour une seule rangée à ces largeurs,
   donc la rangée de boutons chevauchait les onglets véhicules (le diamant « Extensions » mordait
   sur « Engins »). On passe les boutons d'action sur une 2e ligne : onglets véhicules + avatar en
   haut, actions en dessous. Plus aucun chevauchement, tout reste visible. ── */
@media (min-width: 1081px) and (max-width: 1500px) {
  .app-shell .showcase-topbar { height: auto; }
  .app-shell .showcase-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding-bottom: 16px;
  }
  /* 3 rangées (comme le mobile) : logo + avatar en haut, onglets véhicules, puis actions.
     L'avatar reste ancré à droite de la 1re rangée (jamais orphelin entre deux rangées). */
  .app-shell .showcase-brand { order: 0; }
  .app-shell .showcase-topbar-inner > .account-menu { order: 1; margin-left: auto; }
}

/* Pilotage « Coûts de la flotte » : titre + pastilles de période (1 mois/3 mois/6 mois/1 an) sur UNE
   ligne (ils se repliaient de façon irrégulière alors qu'il y a la place). */
.cost-showcase-card .showcase-panel-title h2 { white-space: nowrap; }
.cost-showcase-card .period-tabs { flex-wrap: nowrap; }
@media (max-width: 520px) {
  .cost-showcase-card .showcase-panel-title h2 { white-space: normal; }
}

/* Titre de connexion (« Bienvenue », « Mon suivi ») : le letter-spacing global très négatif (~-0.12em sur 72px)
   collait les mots (« Mon suivi » → « Monsuivi »). On adoucit + word-spacing pour rétablir l'espace inter-mots.
   Et on PLAFONNE la police (le 72px global faisait revenir « Mon suivi » à la ligne dans la carte 380px). */
.login-title h1 { letter-spacing: -0.03em; word-spacing: 0.1em; font-size: clamp(2.4rem, 6vw, 3.2rem); }

/* Fiche véhicule ≤380px : « 1 923,08 € » est trop large pour une stat en 2 colonnes (le « € » dépassait).
   En dessous de 380px on repasse les stats en 1 colonne (chaque stat pleine largeur → le montant tient). */
@media (max-width: 380px) {
  .vehicle-command-stats { grid-template-columns: 1fr; }
}

/* Parc, 921–1180px : les panneaux famille sont déjà en 2 colonnes (Voitures | Motos), donc la grille
   INTERNE de cartes véhicules doit repasser à 1 colonne — sinon 2 panneaux × 2 colonnes = cartes trop
   étroites, badges (« Disponible », « N choses à faire ») coupés et chevauchant le nom. */
@media (min-width: 921px) and (max-width: 1180px) {
  .fleet-list.full { grid-template-columns: 1fr; }
}

/* Fiche véhicule — montants des stats (TOTAL/GARAGE) : « overflow-wrap: anywhere » cassait le nombre en
   plein milieu (« 1 923,0 » / « 8 € »). On interdit la coupure intra-mot (le nombre reste entier). */
.vehicle-command-stats .command-stat strong { overflow-wrap: normal; word-break: keep-all; }

/* Pilotage 1081–1280px : « Santé du parc » + 4 cartes KPI sur une rangée débordaient (~7px à 1180).
   On resserre la colonne santé et les gouttières pour que les 4 cartes tiennent. */
@media (min-width: 1081px) and (max-width: 1280px) {
  .dashboard-top { grid-template-columns: clamp(264px, 26vw, 460px) 1fr; gap: 18px; }
  .dashboard-top .showcase-stats { gap: 14px; }
}