/* ───────── Téléphone : chargé après style.css, ne s'applique que sous 760 px ───────── */
.tabbar, .plus-sheet, .plus-voile, .bandeau .moi-mobile { display: none; }

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  a:hover { text-decoration: none; }

  /* En tête compact : titre de l'app et jeton, la navigation passe en bas */
  .bandeau { box-shadow: 0 2px 12px rgba(30,34,38,.18); }
  .bandeau::after { height: 2px; }
  .bandeau .in { height: auto; flex-wrap: nowrap; gap: 12px;
                 padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .bandeau .marque img { height: 24px; }
  .bandeau .appli { font-size: 17px; }
  .bandeau .appli small { font-size: 10px; margin-top: 2px; }
  .bandeau .sep, .bandeau nav, .bandeau .identite { display: none; }
  .bandeau .moi-mobile { display: flex; margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
                         background: var(--rouge); color: #fff; font-family: var(--titre); font-weight: 700;
                         font-size: 14px; letter-spacing: .05em; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer;
                         box-shadow: 0 0 0 2px rgba(255,255,255,.18); }

  main { padding: 16px 14px calc(92px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }
  h2 { font-size: 15px; margin-bottom: 10px; }
  .head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 14px; }
  .head > * { min-width: 0; max-width: 100%; }
  details.bloc { overflow-x: auto; }
  .head > .row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .head > .row::-webkit-scrollbar { display: none; }

  .card { padding: 16px; border-radius: 16px; margin-bottom: 12px; overflow-x: auto; }
  .grid { gap: 12px; }
  .g2, .g3, .g21 { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .kpi { padding: 13px 14px; border-radius: 16px; }
  .kpi .l { font-size: 11px; letter-spacing: .07em; }
  .kpi .v { font-size: 23px; }
  .kpi .s { font-size: 11.5px; }
  .kpi.dark { grid-column: 1 / -1; }
  .kpi.dark .v { font-size: 32px; }

  /* Tableaux : défilement horizontal dans leur carte plutôt que la page entière */
  table { min-width: 100%; }
  th, td { padding: 9px 8px; white-space: nowrap; }
  tr:hover td { background: none; }

  /* Boutons et champs : cibles de 44 px, 16 px pour éviter le zoom de Safari */
  .btn { min-height: 44px; padding: 10px 16px; border-radius: 12px; justify-content: center; }
  .btn.sm { min-height: 38px; padding: 8px 13px; }
  .btn:active, .choix:active, .tab:active { transform: scale(.97); }
  input, select, textarea { font-size: 16px; padding: 11px 12px; border-radius: 12px; min-height: 44px; }
  .fields { grid-template-columns: 1fr; gap: 12px; }
  .totals { width: 100%; }

  /* Fenêtres : feuille qui monte du bas */
  .modal { align-items: flex-end; padding: 0; }
  .modal .box { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0;
                padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); animation: monte .25s ease; }

  /* Connexion */
  .connexion { margin: 28px auto 0; }
  .choix { padding: 14px; border-radius: 16px; }
  .choix .jeton { width: 42px; height: 42px; font-size: 14px; }

  /* Budget */
  .bud-hero { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .tuiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tuile .v { font-size: 22px; }
  .barre-cat { grid-template-columns: 96px 1fr 76px; gap: 8px; }
  .barre-cat .nom { font-size: 12px; }
  .ech-ligne { grid-template-columns: 44px 1fr; gap: 10px; padding: 12px; }
  .ech-ligne > :nth-child(n+3) { grid-column: 2; }
  .ech-montant { text-align: left; }
  details.bloc { padding: 0 16px; border-radius: 16px; }

  /* Barre d'onglets */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
            z-index: 55; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(180%) blur(18px);
            backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid rgba(0,0,0,.07);
            padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; border: 0;
         background: none; color: #8a9099; font-family: var(--titre); font-weight: 700; font-size: 11px;
         letter-spacing: .05em; text-transform: uppercase; transition: color .15s, transform .1s; cursor: pointer; }
  .tab svg { width: 24px; height: 24px; }
  .tab.on { color: var(--rouge); }

  .plus-voile { display: block; position: fixed; inset: 0; background: rgba(20,22,25,.4); z-index: 70;
                opacity: 0; pointer-events: none; transition: opacity .2s; }
  .plus-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: #fff;
                border-radius: 22px 22px 0 0; padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
                transform: translateY(105%); visibility: hidden;
                transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; }
  .plus-ouvert .plus-voile { opacity: 1; pointer-events: auto; }
  .plus-ouvert .plus-sheet { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .plus-sheet .poignee { width: 38px; height: 5px; border-radius: 3px; background: #d6d9de; margin: 4px auto 12px; }
  .plus-sheet .moi { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid var(--trait); }
  .plus-sheet .moi .jeton { width: 44px; height: 44px; border-radius: 50%; background: var(--rouge); color: #fff;
                            font-family: var(--titre); font-weight: 700; display: grid; place-items: center; }
  .plus-sheet .moi strong { font-family: var(--titre); font-size: 17px; display: block; color: var(--marine); }
  .plus-sheet a.l { display: flex; align-items: center; gap: 14px; padding: 15px 8px; color: var(--texte);
                    font-size: 16px; border-bottom: 1px solid #f2f3f5; }
  .plus-sheet a.l svg { width: 22px; height: 22px; color: var(--acier); }
  .plus-sheet a.l.on { color: var(--rouge); } .plus-sheet a.l.on svg { color: var(--rouge); }
  .plus-sheet a.l.sortie { color: var(--rouge); border-bottom: 0; }
  .plus-sheet a.l.sortie svg { color: var(--rouge); }
}

@keyframes monte { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ───────── Ordinateur moyen : le bandeau se resserre au lieu de déborder ───────── */
@media (min-width: 761px) and (max-width: 1500px) {
  .bandeau .identite .tva, .bandeau .identite .qui { display: none; }
  .bandeau .identite { padding: 5px 6px; gap: 8px; }
}
@media (min-width: 761px) and (max-width: 1320px) {
  .bandeau .in { gap: 12px; padding: 0 18px; }
  .bandeau .sep { display: none; }
  .bandeau nav a { font-size: 14px; padding: 7px 8px; letter-spacing: .05em; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .bandeau .appli small { display: none; }
  .bandeau nav a { font-size: 13px; padding: 6px 6px; letter-spacing: .03em; }
  .bandeau .identite .sortie { display: none; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .bandeau .in { height: auto; flex-wrap: wrap; padding: 10px 16px; row-gap: 6px; }
  .bandeau nav { order: 3; width: 100%; flex-wrap: wrap; }
  .bandeau .identite { margin-left: auto; display: flex; }
  .bandeau .identite .sortie { display: inline; }
}