/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Elevora CRM — téléphone et tablette
   ═══════════════════════════════════════════════════════════════════════════════════════════
   Écrit le 20/09/2026, demande de Célian : « rien n'est fait pour que ce soit visible sur
   téléphone, c'est comme si on avait réduit ce qu'on avait sur PC ». C'était exactement ça.

   Mesuré dans le harnais, à 375 px de large, avant ce fichier :
     • 34 champs avec un texte sous 16 px — iOS zoome tout seul dès qu'on tape dedans, et ne
       dézoome jamais : c'est le « zoom affreux » ;
     • 267 cibles tactiles sous 44 px, dont 130 sur la seule page Banque ;
     • 4 pages plus larges que l'écran : Calendrier 513 px, Comptabilité 438, Équipe 423,
       Fiscalité 391 — donc un défilement horizontal permanent.

   Trois principes ici :
     1. on ne rétrécit pas le bureau, on empile ;
     2. tout ce qui se touche fait au moins 44 px ;
     3. rien ne dépasse de l'écran, jamais — ce qui ne tient pas défile dans SA zone.

   Chargé APRÈS elevora.css : ces règles corrigent, elles ne redéfinissent pas la charte.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════════
   1. TÉLÉPHONE ET TABLETTE PORTRAIT — jusqu'à 900 px
   ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── 1.1 Le tiroir de navigation, jusqu'à la tablette portrait ────────────────
     Jusqu'ici la barre latérale réapparaissait dès 769 px : sur un iPad en portrait
     (768 à 834 px), elle mangeait 220 px et le contenu travaillait dans 550 px. */
  .sidebar{display:none;position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);z-index:300;
    transform:translateX(-100%);transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom,0)}
  .sidebar.mob-open{display:flex;transform:translateX(0)}
  .mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;backdrop-filter:blur(2px)}
  .mob-overlay.open{display:block}
  .burger-btn{display:flex!important}
  .main{margin-left:0}

  /* ── 1.2 Ce qui se touche fait 44 px ──────────────────────────────────────────
     Recommandation Apple et Android, et critère WCAG 2.5.8 (24 px minimum, 44 px
     conseillé). Les valeurs du bureau (26 à 32 px de haut) se ratent au doigt. */
  .btn,.btn-p,.btn-sm,.btn-d,.btn-g,.pf-btn,.pf-btn-sm,.qk-btn,.qk-btn-white,.qk-hbtn,
  .eq-tab,.pt-cat,.compta-chip,.compta-subnav-tab,.ptab,.proj-tab,.mf-btn,.mf-clear,
  .notif-filter-btn,.tb-btn,.li-del,.drem,.gen-close,.nav-i,.nav-group-header{
    min-height:44px;
  }
  .btn,.btn-p,.btn-sm,.btn-d,.btn-g,.qk-btn,.qk-btn-white{padding-top:10px;padding-bottom:10px}
  /* Boutons à icône seule : carrés de 44, quelle que soit la taille de l'icône. */
  .tb-btn,.gen-close,.li-del,.drem,.burger-btn,.qk-iconbtn,.nt-close,.nt-snooze{
    min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Cases à cocher : 24 px (minimum exigé par WCAG 2.5.8), et la zone touchable passe
     par leur étiquette. Le `!important` est nécessaire : plusieurs écrans posent la
     taille en style en ligne (les cases des tâches faisaient 18 px). */
  input[type=checkbox],input[type=radio]{width:24px!important;height:24px!important}
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}

  /* Le filet, pour tout ce qui n'a pas de classe connue : beaucoup de boutons sont
     écrits avec un style en ligne au fil des écrans. Sur un téléphone, ils doivent
     tous se toucher. Exceptions plus bas : ce qui vit À L'INTÉRIEUR d'un champ ou
     d'une cellule dense, où forcer 44 px casserait la mise en page. */
  .content button,.content [role="button"],.content [data-a11y-clic],
  .topbar button,.topbar a[href]{min-height:44px}
  /* Un élément EN LIGNE ignore la hauteur et laisse ses marges internes déborder : agrandi tel
     quel, il passe par-dessus ses voisins au lieu de les pousser. C'est ce qui faisait
     s'entrecroiser les boutons sur téléphone (constaté le 20/09/2026). On ne l'agrandit donc
     qu'en lui donnant une boîte — et jamais sur une ligne ou une cellule de tableau, où cela
     casserait la structure. */
  .content span[role="button"],.content a[role="button"],
  .content span[data-a11y-clic],.content a[data-a11y-clic],
  .content a.btn,.content a.btn-p,.content a.btn-sm,.topbar a[href]{
    display:inline-flex;align-items:center;justify-content:center}
  .content tr[data-a11y-clic],.content td[data-a11y-clic],.content th[data-a11y-clic]{display:revert;min-height:0}
  .content button:not(:has(span)):not(.btn):not(.btn-p):not(.btn-sm),
  .content [role="button"]:empty{min-width:44px}
  /* Exceptions : l'œil d'un mot de passe, les puces d'une ligne de tableau, les
     boutons d'un en-tête de colonne — ils sont dans un flux dense et déjà doublés
     par une action plus grande. */
  .content .eye,.content .th-tri,.content .qk-cb,.content .li-del,
  .content td button,.content th button{min-height:0}
  /* Dans un tableau dense (mouvements bancaires : catégorie, justificatif, statut,
     sélection — quatre cibles par ligne), 44 px casseraient la lecture. 36 px se
     touchent sans viser, et restent au-dessus du minimum exigé (24 px, WCAG 2.5.8). */
  .content td button,.content td .qk-pill,.content td [role="button"]{
    min-height:36px;padding-top:6px;padding-bottom:6px}
  /* Dans une cellule, un lien reste en ligne : on lui donne une boîte plutôt que des marges
     internes, sinon il recouvre la ligne du dessous. */
  .content td a[href]{display:inline-flex;align-items:center;min-height:32px}
  .content td input[type=checkbox],.content .qk-check{width:24px;height:24px}
  .content .eye,.content .th-tri{min-height:32px;min-width:32px}

  /* ── 1.3 Le zoom qui ne se dézoome pas ────────────────────────────────────────
     iOS agrandit la page dès qu'un champ a moins de 16 px de texte, et ne revient
     pas en arrière. C'est LA raison pour laquelle le CRM « saute » sur iPhone. */
  input,select,textarea,.fi,.fsel,.fta,.fs,.li-inp,.cl-input,.qk-search input,
  .compta-search input,.tb-search input,.qk-pop-search input{
    font-size:16px!important;
  }
  .fi,.fsel,.fta,.li-inp,input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=date],input[type=password],input[type=search],select,textarea{
    min-height:44px;padding:10px 12px}
  textarea,.fta{min-height:96px}

  /* ── 1.4 La barre du haut, sur deux lignes ───────────────────────────────────
     Le titre et le menu d'abord, la recherche en pleine largeur ensuite : plus rien
     n'est poussé hors de l'écran. */
  .topbar{position:static;height:auto;min-height:0;flex-wrap:wrap;align-items:center;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0)/4);row-gap:10px;column-gap:8px}
  .tb-title,#page-title{flex:1 1 auto;min-width:0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-search{flex:1 1 100%;order:10;width:auto;min-width:0}
  .tb-search input{width:100%}
  .period-filter{flex:1 1 100%;order:11;display:flex;overflow-x:auto;gap:6px;height:auto;padding-bottom:2px;
    scrollbar-width:none}
  .period-filter::-webkit-scrollbar{display:none}
  .period-filter .pf-btn{flex:0 0 auto}

  /* ── 1.5 Les rangées d'onglets et de filtres défilent au doigt ───────────────
     Elles s'empilaient sur trois lignes ou sortaient de l'écran.
     La barre d'onglets des projets n'est PAS dans cette liste : elle s'appelle .proj-tabs-bar,
     elle passe déjà à la ligne toute seule, et lui imposer une seule ligne la faisait déborder
     de la page (c'est ce qui est arrivé à .ptabs). Le sélecteur .proj-tabs, qui ne désignait
     rien, a été retiré pour ne pas laisser croire qu'elle est traitée ici. */
  .compta-subnav,.eq-tabs,.ptabs,.pt-cats,.qk-fchips,.compta-chips,.mf-row,.notif-filters{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .compta-subnav::-webkit-scrollbar,.eq-tabs::-webkit-scrollbar,.ptabs::-webkit-scrollbar,
  .pt-cats::-webkit-scrollbar,.qk-fchips::-webkit-scrollbar,
  .compta-chips::-webkit-scrollbar,.mf-row::-webkit-scrollbar,.notif-filters::-webkit-scrollbar{display:none}
  .compta-subnav > *,.eq-tabs > *,.ptabs > *,.pt-cats > *,.qk-fchips > *,
  .compta-chips > *,.mf-row > *,.notif-filters > *{flex:0 0 auto;scroll-snap-align:start}
  /* Mêmes rangées, écrites en style en ligne au fil des écrans (sélecteurs de période des
     rapports, par exemple) : sans classe à viser, on les reconnaît à leur contenu. Le dernier
     bouton sortait de la carte de 25 px. */
  div:has(> .pf-btn),div:has(> .pf-btn-sm),div:has(> .compta-chip){
    max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  div:has(> .pf-btn)::-webkit-scrollbar,div:has(> .pf-btn-sm)::-webkit-scrollbar{display:none}
  div:has(> .pf-btn) > *,div:has(> .pf-btn-sm) > *,div:has(> .compta-chip) > *{flex:0 0 auto}

  /* ── 1.6 Tout ce qui est en colonnes passe en une seule ──────────────────────── */
  .cr,.dg,.fg,.det-grid,.mg,.bento,.kpi-grid,.kpi-grid2,.vd-cols,.vd-band,.qk-kpis,
  .compta-kpis,.gen-body,.eq-grid,.pb-board,.stats-grid,.hp-grid{
    grid-template-columns:1fr!important}
  .vd-band{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vd-main,.vd-side,.gen-form-side,.gen-preview-side{min-width:0;width:auto}
  .content{padding:12px}
  .vd-card,.card,.qk-card,.compta-card{padding:14px}

  /* ── 1.7 Les tableaux défilent dans leur cadre, jamais la page ────────────────
     Avec une ombre à droite tant qu'il reste quelque chose à voir : sinon on ne
     devine pas qu'il y a des colonnes au-delà du bord. */
  .tc,.qk-table-wrap,.vd-flush,.compta-table-wrap{
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,var(--bg2) 30%,rgba(0,0,0,0)),
               linear-gradient(to left,var(--bg2) 30%,rgba(0,0,0,0)) 100% 0,
               linear-gradient(to right,rgba(0,0,0,.18),rgba(0,0,0,0) 12px),
               linear-gradient(to left,rgba(0,0,0,.18),rgba(0,0,0,0) 12px) 100% 0;
    background-repeat:no-repeat;background-size:28px 100%,28px 100%,12px 100%,12px 100%;
    background-attachment:local,local,scroll,scroll}
  .tc table,.qk-table{min-width:520px}
  .tc th,.tc td,.qk-table th,.qk-table td{padding:10px 12px;white-space:nowrap}
  /* Un cadre à `overflow-x:auto` ne retient rien s'il peut lui-même s'élargir : placé
     dans une grille ou un flex, il prend la largeur de son tableau et c'est la PAGE
     qui défile. Il faut le borner, lui et chacun de ses parents (la Vue d'ensemble
     partait ainsi à 434 px de large pour un écran de 375). */
  .sec,.content > *,.vd-card,.card,.qk-card,.compta-card,.vd-main,.vd-side,
  .vd-card > *,.card > *,.qk-card > *{min-width:0;max-width:100%}
  .tc,.qk-table-wrap,.vd-flush,.compta-table-wrap{max-width:100%}
  /* Les cadres de graphiques gardaient la largeur calculée pour un grand écran : à 320 px,
     le canevas dépassait de 17 px de sa carte. */
  .cc,.cc canvas,canvas{max-width:100%!important}

  /* ── 1.8 Les fenêtres prennent tout l'écran ──────────────────────────────────
     Une fenêtre centrée de 520 px dans un écran de 375 donnait des marges de 8 px,
     un pied de page hors champ et des boutons inaccessibles. */
  .ov.open,.gen-ov.open,.send-ov.open{padding:0;align-items:stretch;justify-content:stretch}
  .modal,.gen-modal,.send-modal,.elv-modal-card,.qk-panel{
    width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;
    border-radius:0!important;margin:0!important;display:flex;flex-direction:column}
  .modal > *,.gen-modal > *,.send-modal > *{min-width:0}
  .modal-body,.gen-body,.send-body,#elv-modal-body,
  .modal > .step-content.active,.modal > form,.gen-modal > .gen-cols{
    flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
  /* Les étiquettes rapides (VIP, Urgent…) : 24 px suffisent à la règle, 32 au doigt. */
  .tag[onclick],button.tag{min-height:32px;padding:6px 12px}
  .modal-foot,.gen-foot,.send-foot,.qk-panel-foot{position:sticky;bottom:0;z-index:2;
    background:var(--bg3);border-top:1px solid var(--border);
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0))}
  .modal-foot .btn,.gen-foot .btn,.send-foot .btn,.modal-foot .btn-p,.gen-foot .btn-p,.send-foot .btn-p{flex:1 1 auto}
  /* Le panneau latéral d'un mouvement devient une feuille qui monte du bas. */
  .qk-panel{top:auto!important;bottom:0;height:92dvh;border-top-left-radius:16px!important;border-top-right-radius:16px!important}

  /* ── 1.9 Bandeaux, toasts et notifications : au-dessus de la barre système ──── */
  .toasts{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0));align-items:stretch}
  .toast{width:100%}
  #notif-toasts{left:12px;right:12px;max-width:none}
  #notif-panel{position:fixed!important;left:8px!important;right:8px!important;top:8px!important;
    width:auto!important;max-height:80dvh;overflow-y:auto}

  /* ── 1.10 Aperçus de documents : à l'échelle de l'écran ──────────────────────
     Un devis fait 210 mm de large. Sur un téléphone, on le regarde en entier, pas
     à travers une fenêtre de la taille d'un timbre. */
  .gen-preview-side,.doc-preview,.prev-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
  .gen-preview-side iframe,.doc-preview iframe{width:100%;min-height:60dvh}
}

/* ════════════════════════════════════════════════════════════════════════════════
   2. TÉLÉPHONE — jusqu'à 560 px
   ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .vd-band{grid-template-columns:1fr!important}
  .content{padding:10px}
  .vd-card,.card,.qk-card,.compta-card{padding:12px;border-radius:12px}
  /* Le bouton principal de la barre du haut passe en pleine largeur : c'est l'action
     la plus fréquente, et elle était coupée au bord de l'écran. */
  .topbar .btn-p{flex:1 1 100%;order:12;justify-content:center}
  /* Chiffres : la taille du bureau (34 à 52 px) déborde de la carte. */
  .vd-fig-v,.kpi-v,.mc-v,.qk-kpi-v{font-size:clamp(22px,7vw,30px);word-break:break-word}
  h1,.tb-title,#page-title{font-size:17px}
  h2,.vd-title,.card-tl{font-size:15px}
}

/* ════════════════════════════════════════════════════════════════════════════════
   3. CALENDRIER — la grille du mois sur un écran étroit
   ════════════════════════════════════════════════════════════════════════════════
   Les sept colonnes étaient dimensionnées par leur contenu : lundi prenait 90 px,
   dimanche 35, et la grille sortait de l'écran (513 px pour 375). Colonnes égales,
   hauteur réduite, pastilles tronquées — et la liste sous la grille reste la vraie
   lecture au doigt. */
@media (max-width: 900px) {
  /* La grille est écrite en style en ligne par js/30-calendrier.js : `repeat(7, 1fr)`.
     Or `1fr` ne descend jamais sous la largeur minimale du contenu — et une pastille
     d'événement en `nowrap` impose 90 px. Sept colonnes plus tard, la grille faisait
     499 px pour un écran de 375. `minmax(0, 1fr)` autorise enfin les colonnes à
     rétrécir, et les cellules coupent ce qui dépasse. */
  #cal-grid > div,.cal-grid,.gcal-month,.calendar-grid{
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
    width:100%;max-width:100%;gap:4px!important}
  #cal-grid > div > div,.cal-grid > *,.gcal-month > *,.calendar-grid > *{min-width:0;overflow:hidden}
  #cal-grid > div > div > *{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .cal-day,.gcal-day{min-height:56px;padding:4px 2px;font-size:11px}
  .cal-day .cal-ev,.gcal-day .gcal-ev,.cal-ev,#cal-grid [onclick]{
    font-size:10px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
    min-width:24px;min-height:24px}
  .cal-head,.gcal-head{font-size:10px;letter-spacing:.02em}
  .cal-legend{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11px}

  /* Rangées de la comptabilité et de l'équipe : elles alignaient trois blocs de
     110 à 400 px côte à côte, sans autorisation de passer à la ligne. */
  #equipe-content > div,#equipe-content > div > div{flex-wrap:wrap;min-width:0}
  #equipe-content > div > div > *{min-width:0;max-width:100%}

  /* Lignes d'échéances et de factures : une grille à quatre colonnes taillée pour un
     bureau. Sur un téléphone, la colonne du libellé tombait à 0 px — le texte
     disparaissait — et celle des actions à 28 px, où deux boutons de 34 px alignés à
     droite débordaient de 81 px VERS LA GAUCHE, par-dessus la pastille d'état. C'est
     le chevauchement signalé le 20/09/2026. Une ligne qui passe à la ligne règle les
     deux : chaque bloc garde sa largeur naturelle. */
  .qk-inv-row{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 10px;
    grid-template-columns:none!important}
  .qk-inv-row > *{min-width:0;max-width:100%}
  /* Les pastilles d'état tiennent sur une ligne par défaut : « 15 entrées non rattachées »
     dépassait de 56 px. Elles passent à la ligne, et leur rangée aussi. */
  summary,summary > div{flex-wrap:wrap;gap:6px}
  .qk-pill,.elv-badge,.compta-pill{max-width:100%;white-space:normal}
  .qk-inv-row > *:first-child{flex:1 1 100%}          /* le libellé prend sa ligne */
  .qk-inv-row > div[style*="flex-end"],.qk-inv-row > div:last-child{margin-left:auto}
}

/* ════════════════════════════════════════════════════════════════════════════════
   4. TABLETTE PAYSAGE — 901 à 1180 px
   ════════════════════════════════════════════════════════════════════════════════
   La barre latérale revient, mais le contenu garde de l'air : deux colonnes au lieu
   de trois, et des cibles encore confortables au doigt (un iPad se touche aussi). */
@media (min-width: 901px) and (max-width: 1180px) {
  .btn,.btn-p,.btn-sm,.pf-btn,.compta-subnav-tab,.eq-tab,.ptab{min-height:38px}
  .vd-cols{grid-template-columns:minmax(0,1fr)}
  .mg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ════════════════════════════════════════════════════════════════════════════════
   5. APPAREIL TACTILE, quelle que soit la largeur
   ════════════════════════════════════════════════════════════════════════════════
   Un survol n'existe pas au doigt : ce qui n'apparaissait qu'au survol doit rester
   visible. Sinon, sur téléphone, le bouton « supprimer » d'un dossier est invisible
   et celui d'une notification inatteignable. */
@media (hover: none) {
  .doc-folder .drem,#notifs-list [data-notif-id] > button,.qk-cb{opacity:1!important}
  .di-actions,.liv-actions,.qk-row-actions{opacity:1!important;visibility:visible!important}
}

/* ── Agenda V2 (21/09/2026) : sur tablette et téléphone, le rail devient un tiroir, comme dans
   l'application Google Agenda — le bouton ☰ de la barre l'ouvre et le referme. ── */
@media (max-width: 900px) {
  .ag{grid-template-columns:minmax(0,1fr);border-radius:0;border-left:0;border-right:0;min-height:calc(100dvh - 120px)}
  .ag-rail{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);max-height:none;z-index:900;background:var(--bg2);box-shadow:8px 0 30px rgba(0,0,0,.4);transform:translateX(-105%);transition:transform .2s ease;padding-top:16px}
  .ag-rail.ouvert{transform:none}
  .ag-rail-btn{display:inline-flex}
  .ag-recherche-barre{display:none}
  .ag-titre{font-size:18px}
  .ag-defil{max-height:calc(100dvh - 250px)}
}
@media (max-width: 560px) {
  .ag-barre{padding:8px 8px;gap:2px}
  .ag-auj-btn{padding:7px 12px;font-size:12.5px;margin-right:0}
  .ag-titre{font-size:16px;margin:0 4px}
  .ag-semaine{display:none}
  .ag-vue-btn{padding:7px 10px 7px 12px;font-size:12.5px}
  .ag-mois{grid-template-rows:repeat(var(--ag-lignes),minmax(84px,1fr))}
  .ag-mois-sem{grid-template-columns:0 repeat(var(--ag-cols),minmax(0,1fr))}
  .ag-num-sem{visibility:hidden}
  .ag-puce{font-size:10.5px;padding:1px 3px;gap:3px}
  /* La règle générale du téléphone porte chaque bouton à 44 px : sur une puce de la vue Mois,
     une case de trois rendez-vous montait à 200 px. 24 px est le minimum AA (2.5.8), et le
     clic sur le numéro du jour ouvre la journée entière en grand. */
  .ag-mois .ag-puce,.ag-mois .ag-autres,.ag-mois .ag-mois-num{min-height:24px!important;min-width:0!important}
  .ag-puce-h{display:none}
  .ag-grille-tete,.ag-grille-jour,.ag-grille-corps{grid-template-columns:42px repeat(var(--ag-n),minmax(0,1fr))}
  .ag-plan-jour{grid-template-columns:78px 1fr;padding:8px}
  .ag-plan-evt{grid-template-columns:10px 1fr;grid-template-rows:auto auto}
  .ag-plan-h{grid-column:2}
  .ag-plan-t{grid-column:2;white-space:normal}
  .ag-deux,.ag-trois{grid-template-columns:1fr}
  .ag-fenetre,.ag-carte{border-radius:14px}
  .ag-ov{padding:8px;align-items:flex-end}
  .ag-annee{grid-template-columns:1fr 1fr;gap:12px;padding:12px}
}