/* 2026-06-03 - Perfection tablette : iPad / Android 768-1180px */

@media (min-width: 768px) and (max-width: 1180px) {
  :root {
    --tablet-gap: 18px;
    --tablet-pad: clamp(22px, 3vw, 34px);
    --tablet-radius: 30px;
  }

  html {
    scroll-padding-top: 104px;
  }

  body {
    background-size: 52px 52px;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(22px);
  }

  .topbar-inner {
    min-height: 92px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 18px;
  }

  .top-brand {
    min-height: 62px;
    min-width: 70px;
    padding: 0 11px;
    border-radius: 999px;
  }

  .top-brand strong {
    display: none;
  }

  .top-brand span {
    width: 42px;
    height: 42px;
  }

  .top-role {
    display: none !important;
  }

  .top-nav {
    grid-column: auto !important;
    order: initial !important;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding: 6px 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .top-link {
    min-height: 58px;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0 15px;
    border-radius: 999px;
    scroll-snap-align: start;
    font-size: 0.98rem;
    white-space: nowrap;
  }

  .top-link span {
    font-size: 0.98rem;
  }

  .top-link svg {
    width: 20px;
    height: 20px;
  }

  .logout-button {
    grid-column: auto !important;
    min-height: 58px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 0.98rem;
  }

  .app-shell .stage,
  .stage {
    width: 100%;
    max-width: none;
    padding: 24px 22px 46px;
  }

  .card,
  .focus-card,
  .notification-card,
  .ds-card {
    border-radius: var(--tablet-radius);
  }

  .card,
  .focus-card,
  .pilotage-card,
  .settings-card,
  .employee-form-card,
  .employee-list-card,
  .garage-form,
  .wash-submit-card {
    padding: var(--tablet-pad);
  }

  .big-button,
  .primary-button,
  .danger-button,
  .ds-button,
  .small-link,
  .vehicle-action,
  .icon-button {
    min-height: 58px;
    touch-action: manipulation;
  }

  .simple-card-head strong,
  .section-title h2,
  .decision-section-head strong {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  }

  .pilotage-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tablet-gap);
  }

  .metric-card {
    min-height: 168px;
    border-radius: 14px;
  }

  .metric-card span {
    font-size: 0.9rem;
  }

  .metric-card strong {
    font-size: clamp(2.8rem, 7vw, 4.8rem);
  }

  .pilotage-grid {
    grid-template-columns: 1fr !important;
    gap: var(--tablet-gap);
  }

  .pilotage-four-blocks {
    grid-template-columns: 1fr !important;
  }

  .today-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .today-action {
    min-height: 148px;
    border-radius: 14px;
  }

  .cost-bar-row {
    grid-template-columns: minmax(170px, 0.8fr) minmax(240px, 1.4fr) auto;
    min-height: 72px;
    padding: 14px 16px;
  }

  .pilotage-row {
    min-height: 74px;
    padding: 18px;
    border-radius: 24px;
  }

  .monitor-home {
    min-height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tablet-gap);
  }

  .monitor-action {
    min-height: 300px;
    border-radius: 14px;
  }

  .monitor-action strong {
    font-size: clamp(3.4rem, 9vw, 5.8rem);
  }

  .monitor-action small {
    font-size: 1.2rem;
  }

  .deposit-panel {
    scroll-margin-top: 110px;
  }

  .wash-submit-grid,
  .fuel-submit-grid,
  .problem-submit-grid,
  .form-grid,
  .simple-form-grid,
  .employee-form-grid,
  .channel-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px;
  }

  .notes-field,
  .vehicle-notes-field,
  .employee-doc-notes,
  .form-actions,
  .employee-form-actions,
  .garage-lines,
  .garage-line-form {
    grid-column: 1 / -1;
  }

  .app-shell label {
    font-size: 1rem;
  }

  .app-shell input:not([type="file"]),
  .app-shell select,
  .app-shell textarea {
    min-height: 62px;
    font-size: 1.06rem;
    border-radius: 22px;
  }

  .decision-layout {
    grid-template-columns: 1fr !important;
  }

  .decision-history {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
  }

  .decision-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
  }

  .fleet-toolbar {
    justify-content: flex-end;
    margin-bottom: 18px;
  }

  .vehicle-search-card {
    padding: 18px;
    border-radius: 14px;
  }

  .vehicle-search-input {
    min-height: 64px;
    font-size: 1.14rem;
  }

  .fleet-category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tablet-gap);
  }

  .fleet-category-card {
    min-width: 0;
    padding: 22px;
    border-radius: 14px;
  }

  .fleet-category-head {
    align-items: center;
  }

  .fleet-category-head h2 {
    font-size: clamp(1.45rem, 3.2vw, 2rem);
  }

  .fleet-category-head i {
    width: 54px;
    height: 54px;
  }

  .asset-line {
    min-height: 72px;
    padding: 16px;
    border-radius: 22px;
  }

  .asset-line strong {
    font-size: 1.08rem;
  }

  .simple-status {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 0.88rem;
  }

  .vehicle-command-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px;
    padding: 24px;
    border-radius: 14px;
  }

  .vehicle-command-main strong {
    max-width: none;
    font-size: clamp(4.2rem, 10vw, 6.8rem);
  }

  .vehicle-command-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .vehicle-command-stats .command-stat {
    min-height: 128px;
    padding: 16px;
    border-radius: 24px;
  }

  .vehicle-command-stats .command-stat strong {
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
  }

  .vehicle-command-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    display: grid;
    gap: 10px;
  }

  .vehicle-action {
    min-height: 62px;
    padding: 0 10px;
  }

  .garage-layout,
  .garage-layout-simple,
  .employees-layout,
  .settings-board,
  .data-tools-grid {
    grid-template-columns: 1fr !important;
    gap: var(--tablet-gap);
  }

  .employee-overview,
  .garage-simple-stats,
  .wash-proof-metrics,
  .fuel-proof-metrics,
  .compact-metrics,
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .wash-history-list,
  .fuel-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .task-board,
  .action-task-board {
    grid-template-columns: 1fr !important;
  }

  .alert-row {
    min-height: 74px;
    padding: 18px;
  }
}

@media (min-width: 980px) and (max-width: 1180px) {
  .pilotage-grid.pilotage-four-blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pilotage-grid.pilotage-four-blocks .today-card,
  .pilotage-grid.pilotage-four-blocks .smart-chart-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) and (max-width: 920px) {
  .top-link {
    min-height: 56px;
    padding-inline: 13px;
  }

  .logout-button {
    min-width: 56px;
    padding: 0 14px;
    font-size: 0;
  }

  .logout-button::after {
    content: "Sortir";
    font-size: 0.95rem;
  }

  .pilotage-hero,
  .today-actions,
  .fleet-category-list,
  .wash-history-list,
  .fuel-history-list,
  .employee-overview,
  .garage-simple-stats,
  .wash-proof-metrics,
  .fuel-proof-metrics,
  .compact-metrics,
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  .decision-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .decision-history {
    grid-template-columns: 1fr !important;
  }

  .vehicle-command-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vehicle-command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}