/* ═══════════════════════════════════════════════════════════════════════════════════════════
   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) {
  :root{--cmd-h:44px} /* 02/10/2026 (point 14) : au doigt, toutes les commandes d'un groupe font 44 px. */

  /* ── 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. */
  /* [AM] 03/10/2026 (chantier v11) : « quand on clique sur le menu burger, ça s'affiche
     instantanément, il n'y a pas d'animation » (Célian). Le tiroir passait de display:none à flex :
     une transition ne part jamais d'un élément qui n'est pas rendu. Il reste rendu, hors de l'écran,
     et visibility:hidden le retire du clavier et des lecteurs d'écran comme le faisait display:none
     (visibility bascule après le glissement à la fermeture, avant à l'ouverture). Le voile
     s'assombrit et s'éclaircit en même temps. Mouvement réduit : la règle commune (css/elevora.css)
     ramène ces durées à zéro. */
  .sidebar{display:flex;position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);z-index:300;
    transform:translateX(-100%);visibility:hidden;box-shadow:none;
    transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s ease,visibility 0s linear .22s;
    padding-bottom:env(safe-area-inset-bottom,0)}
  .sidebar.mob-open{display:flex;transform:translateX(0);visibility:visible;box-shadow:8px 0 32px rgba(0,0,0,.28);
    transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,visibility 0s linear 0s}
  .mob-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
  .mob-overlay.open{display:block;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease,visibility 0s linear 0s}
  .nav-s{overscroll-behavior:contain}
  body.tiroir-ouvert{overflow:hidden}
  .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;height:44px}
  .tb-search input{width:100%}
  /* Barre refaite le 25/09/2026 : ses trois zones ne tiennent pas sur un téléphone. La zone des
     outils s'efface (display:contents) et ses commandes redeviennent des éléments de la barre,
     comme avant : la recherche passe dessous, et sous 560 px « Nouveau client » prend sa ligne
     (section 2). Le groupe du menu et le filet se retirent : le titre garde la place.
     (Le filtre de période qui passait ici sur sa propre ligne a quitté la barre ce jour-là.) */
  .tb-titre{flex:1 1 auto;min-width:0}
  .tb-actions{display:contents}
  .tb-contexte,.tb-sep{display:none}
  .tb-icone{width:44px;height:44px}
  .theme-toggle{height:44px}

  /* ── 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,.qk-kpis,
  .compta-kpis,.gen-body,.eq-grid,.pb-board,.stats-grid,.hp-grid{
    grid-template-columns:1fr!important}
  /* [P1] 02/10/2026 (point 3) : les bandeaux de chiffres (.vd-band et les autres) ne sont plus
     forcés ici à 2 puis 1 colonne : le style partagé .chiffres (css/elevora.css) se replie seul. */
  .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) {
  .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. */
  .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) {
  :root{--cmd-h:38px} /* 02/10/2026 (point 14) : la hauteur commune suit celle des boutons ici. */
  .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:none;transform:translateX(-105%);padding-top:16px;
    /* [AM] 03/10/2026 : fermé, le tiroir laissait son ombre (8 px, 30 px de flou) sur le bord gauche du
       calendrier, et ses boutons restaient atteignables au clavier. Fermé : sans ombre, retiré du rendu
       (visibility) une fois sorti ; ouvert : l'ombre et la visibilité arrivent avec le glissement. */
    visibility:hidden;transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s ease,visibility 0s linear .22s}
  .ag-rail.ouvert{transform:none;visibility:visible;box-shadow:8px 0 30px rgba(0,0,0,.4);transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,visibility 0s linear 0s}
  .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}
  /* [AM] 03/10 : deux colonnes de mois dans 318 px — février, avril… sortaient de l'écran (jours de 44 px). Un mois par ligne. */
  .ag-annee{grid-template-columns:minmax(0,1fr);gap:16px;padding:12px}
}

/* ════════════════════════════════════════════════════════════════════════════════
   6. [AM] 03/10/2026 — CHANTIER V11 : AUDIT MOBILE, INTERFACE SIMPLIFIÉE, FLUIDITÉ
   ════════════════════════════════════════════════════════════════════════════════
   Demande de Célian (03/10) : « fais un audit visuel sur le responsive mobile, je sais qu'il y a
   des bugs ; améliore l'interface sur mobile, qui est assez complexe vu le nombre d'informations ;
   et un peu plus de fluidité […] pas des animations de fou ». Audit : dev/v11-mobile-navigateur.js
   (Chrome sans écran, 360, 375 et 390 px, clair et sombre). Le JavaScript qui va avec : js/71-mobile.js.
   Rien n'est retiré : ce qui est replié s'ouvre d'un geste, et le bureau (> 900 px) ne change pas. */

/* ── 6.1 La barre du haut : une ligne, collée en haut ─────────────────────────────
   Défaut relevé : sur toute page au titre un peu long (« Prospects / Clients », le nom d'une fiche),
   la cloche partait seule sur une deuxième ligne — dans une rangée qui passe à la ligne, le titre
   comptait pour sa largeur entière avant de céder. Base 0 : il prend la place qui reste et se coupe
   en points de suspension. La barre faisait aussi 170 px (titre, recherche, « Nouveau client » en
   pleine largeur) et partait avec la page : elle reste maintenant en haut, sur une ligne au
   téléphone ; la recherche s'ouvre à la loupe, « Nouveau client » et « Nouveau rendez-vous » sont
   dans « Créer » (6.2). Les raccourcis n et r restent. */
.tb-recherche-btn{display:none}
@media (max-width: 900px) {
  .topbar{position:sticky;top:0;z-index:40}
  .tb-titre{flex:1 1 0}
  /* La rangée d'onglets de la fiche prospect se collait sous une barre de 64 px : elle suit la
     hauteur réelle de la barre (--tb-h, posée par js/71-mobile.js). */
  .ep .ep-nav{top:var(--tb-h,64px)}
}
@media (max-width: 560px) {
  .topbar{flex-wrap:wrap;column-gap:4px;row-gap:8px;padding:6px 10px;min-height:56px}
  .tb-recherche-btn{display:inline-flex}
  .topbar .tb-search{display:none}
  .topbar.recherche-ouverte .tb-search{display:flex}
  .topbar .tb-nouveau,.topbar #rdv-tb-btn{display:none!important}
  .tb-recherche-btn.tb-recherche-active{color:var(--accent)}
  .tb-recherche-btn[aria-expanded="true"]{background:var(--bg3);color:var(--text)}
}

/* ── 6.2 « Créer », au pouce ─────────────────────────────────────────────────────
   En bas à droite, là où tombe le pouce : la liste des créations (js/71-mobile.js). Il se retire
   quand une barre du bas occupe la place (sélection de clients, « Enregistrer » d'une fiche
   prospect) et pendant une saisie, pour ne jamais couvrir le champ où l'on tape. La page garde
   de la marge en bas : le dernier élément d'une liste ne passe pas dessous. */
.mob-creer{display:none}
@media (max-width: 560px) {
  .mob-creer{display:block;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0));z-index:60}
  .mob-creer-btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px 0 16px;border:0;border-radius:26px;
    background:var(--accent-fill);color:var(--on-fill);font:600 15px var(--font);cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.28)}
  .mob-creer-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
  .mob-creer-btn[aria-expanded="true"]{background:var(--bg2);color:var(--text);box-shadow:0 0 0 1px var(--border2),0 6px 20px rgba(0,0,0,.28)}
  .mob-creer-btn svg{transition:transform .2s cubic-bezier(.2,.8,.3,1)}
  .mob-creer-btn[aria-expanded="true"] svg{transform:rotate(45deg)}
  .mob-creer-menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:230px;padding:6px;background:var(--bg2);
    border:1px solid var(--border2);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.32)}
  .mob-creer-menu[hidden]{display:none}
  .mob-creer-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:10px;
    background:none;color:var(--text);font:500 15px var(--font);text-align:left;cursor:pointer}
  .mob-creer-item svg{color:var(--text2);flex-shrink:0}
  .mob-creer-item:hover,.mob-creer-item:focus-visible{background:var(--glow);outline:none}
  .mob-creer-item:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
  body:has(#selection-bar) .mob-creer,body:has(.ep-barre-enr:not([hidden])) .mob-creer,
  body:has(.content :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select):focus) .mob-creer,
  body.tiroir-ouvert .mob-creer{display:none}
  .content{padding-bottom:calc(84px + env(safe-area-inset-bottom,0))}
  /* Les messages passent au-dessus du bouton. */
  .toasts{bottom:calc(80px + env(safe-area-inset-bottom,0))}
}

/* ── 6.3 Les tableaux deviennent des cartes ──────────────────────────────────────
   Défaut relevé : à 375 px, la Banque montrait le nom d'un mouvement mais pas son MONTANT, les
   Factures le numéro mais ni le montant ni l'état, la liste des clients deux colonnes sur huit : le
   reste était derrière un défilement de côté que rien n'annonçait. Chaque ligne devient une carte :
   le nom en tête, le montant en face, puis « intitulé : valeur » ligne à ligne ; les cellules
   vides (« — ») s'effacent. Les intitulés viennent de l'en-tête (data-label, js/71-mobile.js) ;
   les tris et la case « tout sélectionner » de l'en-tête restent, en pastilles. .content devant
   chaque règle : « .content tr[data-a11y-clic]{display:revert} » (1.2) l'emportait sur les lignes
   qui ouvrent une fiche. */
@media (max-width: 560px) {
  .content table.tab-cartes{display:block;width:100%!important;min-width:0!important;max-width:100%;border-collapse:separate;border-spacing:0}
  .content table.tab-cartes>thead{display:block}
  .content table.tab-cartes>thead>tr{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border)}
  .content table.tab-cartes>thead>tr:not(:last-child){display:none}
  .content table.tab-cartes>thead>tr:not(:has(button,input,select)){display:none}
  .content table.tab-cartes>thead th{display:none}
  .content table.tab-cartes>thead th:has(button,input,select){display:inline-flex;align-items:center;padding:0!important;border:0!important;width:auto!important;min-width:0;background:none}
  /* Les tris de colonnes deviennent des pastilles : « Trier par » se lit à leur forme. */
  .content table.tab-cartes>thead th button{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 12px;border:1px solid var(--border2);
    border-radius:18px;background:var(--bg2);color:var(--text2);font:500 12.5px var(--font);text-transform:none;letter-spacing:0}
  .content table.tab-cartes>tbody,.content table.tab-cartes>tfoot{display:block}
  .content table.tab-cartes>tbody>tr,.content table.tab-cartes>tfoot>tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 12px;
    position:relative;padding:12px 14px;border-bottom:1px solid var(--border);height:auto!important}
  .content table.tab-cartes>tbody>tr:last-child{border-bottom:0}
  .content table.tab-cartes>tbody>tr>:is(td,th),.content table.tab-cartes>tfoot>tr>:is(td,th){display:block;position:relative;grid-column:1/-1;
    min-width:0!important;max-width:100%!important;width:auto!important;height:auto!important;padding:0!important;border:0!important;background:none;
    white-space:normal!important;text-align:left!important;font-size:13.5px;color:var(--text2);overflow-wrap:anywhere}
  /* L'intitulé dans une colonne de 38 % à gauche, la valeur à droite, quelle que soit sa forme (texte,
     pastilles, boutons). L'intitulé occupe la colonne 1 sur toutes les rangées : chaque morceau de la
     valeur se range seul dans la colonne 2, l'un sous l'autre, et un intitulé sur deux lignes
     (« Case du formulaire ») agrandit la ligne au lieu de chevaucher la suivante. */
  .content table.tab-cartes>tbody>tr>[data-label],.content table.tab-cartes>tfoot>tr>[data-label]{display:grid;grid-template-columns:38% minmax(0,1fr);
    column-gap:10px;row-gap:0;align-items:start;justify-items:start}
  .content table.tab-cartes>tbody>tr>[data-label]::before,.content table.tab-cartes>tfoot>tr>[data-label]::before{content:attr(data-label);
    grid-column:1;grid-row:span 30;font:500 12px/1.4 var(--font);letter-spacing:.02em;color:var(--text3);overflow-wrap:break-word;margin-top:1px}
  .content table.tab-cartes>tbody>tr>[data-label]>*{max-width:100%}
  .content table.tab-cartes>tbody>tr>[data-label]>*+*{margin-top:3px}
  .content table.tab-cartes>tbody>tr>.carte-titre{grid-column:1;grid-row:1;display:block;font-size:14.5px;font-weight:600;color:var(--text)}
  .content table.tab-cartes>tbody>tr>.carte-titre::before{display:none}
  .content table.tab-cartes>tbody>tr>.carte-montant{grid-column:2;grid-row:1;display:block;text-align:right!important;white-space:nowrap!important;
    font-size:14.5px;font-weight:600;color:var(--text)}
  .content table.tab-cartes>tbody>tr>.carte-montant::before{display:none}
  .content table.tab-cartes>tbody>tr>:is(.carte-titre,.carte-montant){display:block}
  .content table.tab-cartes>tbody>tr>.carte-vide{display:none}
  /* Un bouton de cellule (catégorie d'un mouvement : « Remboursement de compte courant d'associé ») ne
     sort plus de la carte : il se coupe en points de suspension. */
  .content table.tab-cartes>tbody>tr>:is(td,th)>*{min-width:0;max-width:100%}
  .content table.tab-cartes .qk-catbtn{max-width:100%;min-width:0}
  /* Une cellule qui contient un bloc (liste dépliable du récapitulatif de TVA) : l'intitulé passe
     au-dessus, le bloc prend toute la largeur (il tombait à 62 px, ses liens à 10 px). */
  .content table.tab-cartes>tbody>tr>:is(td,th):has(details,ul,ol,table,.qk-recap-list){display:block;justify-items:stretch}
  .content table.tab-cartes>tbody>tr>:is(td,th):has(details,ul,ol,table,.qk-recap-list)::before{display:block;margin-bottom:4px}
  .content table.tab-cartes .qk-catbtn>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .content table.tab-cartes>tbody>tr>.carte-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:4px}
  .content table.tab-cartes>tbody>tr>.carte-actions::before{display:none}
  .content table.tab-cartes>tbody>tr:has(>.carte-case){padding-left:52px}
  /* grid-column:auto : un enfant positionné d'une grille qui a une place dans la grille prend sa
     zone comme repère, et la case tombait sur l'avatar. */
  .content table.tab-cartes>tbody>tr>.carte-case{position:absolute;left:14px;top:12px;width:auto!important;grid-column:auto;grid-row:auto}
  .content table.tab-cartes>tbody>tr>.carte-case::before{display:none}
  .content table.tab-cartes>tbody>tr.carte-groupe{display:block;padding:10px 14px;background:var(--bg3)}
  .content table.tab-cartes>tbody>tr.carte-groupe>*{display:block;font-weight:600;color:var(--text)}
  .content table.tab-cartes>tbody>tr.carte-groupe>*::before{display:none}
  /* Le cadre ne défile plus de côté : ses ombres de défilement n'ont plus lieu d'être. */
  :is(.tc,.qk-table-wrap,.vd-flush,.compta-table-wrap):has(> table.tab-cartes,> .tc table.tab-cartes){background:none;overflow-x:visible!important}
  .content table.tab-cartes .qk-recap-list .qk-recap-item{min-width:0;grid-template-columns:minmax(0,1fr) auto}
  .content table.tab-cartes .qk-recap-list .qk-recap-item>:nth-child(2),.content table.tab-cartes .qk-recap-list .qk-recap-item>:nth-child(3){display:none}
}

/* ── 6.4 Filtres, graphiques, étapes, commandes : repliés ou rangés ──────────────
   Tâches : 450 px de commandes avant la première tâche ; Pipeline : 650 px avant la première
   carte. Les pastilles de filtre passent derrière « Filtres (n) » ; les deux graphiques de la Vue
   d'ensemble derrière « Afficher le graphique », pour que « À traiter » remonte. */
.mob-filtres-btn,.mob-graph-btn{display:none}
@media (max-width: 560px) {
  .mob-filtres-btn,.mob-graph-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin:0 0 8px;
    border:1px solid var(--border2);border-radius:var(--r);background:var(--bg2);color:var(--text2);font:500 14px var(--font);cursor:pointer}
  .mob-filtres-btn[aria-expanded="true"],.mob-graph-btn[aria-expanded="true"]{color:var(--text);border-color:var(--accent)}
  .mob-filtres-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
    background:var(--accent-fill);color:var(--on-fill);font:700 12px/1 var(--font)}
  .mob-replie{display:none!important}
  #sec-dashboard .vd-graph:not(.mob-graph-ouvert){display:none}
  .mob-graph-btn{margin:4px 0 0}
  /* « Et maintenant ? » : le titre d'une action était coupé à 15 caractères par ses deux boutons.
     Le texte prend sa ligne, les boutons passent dessous, à droite. */
  #et-maintenant .vd-row{flex-wrap:wrap;row-gap:8px}
  #et-maintenant .vd-row-c{flex:1 1 calc(100% - 52px)}
  #et-maintenant .vd-row-n,#et-maintenant .vd-row-s{white-space:normal}
  #et-maintenant .vd-act{flex:1 1 100%;justify-content:flex-end}
  /* Fiche prospect : la barre des huit étapes occupait quatre rangées (210 px). Une seule rangée
     qui défile au doigt ; l'étape actuelle est amenée en vue (js/71-mobile.js). */
  .ep-etapes-liste{display:flex!important;overflow-x:auto;gap:6px;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ep-etapes-liste::-webkit-scrollbar{display:none}
  .ep-etapes-liste>.ep-etape{flex:0 0 auto;max-width:220px;scroll-snap-align:center}
  .ep-etapes-liste .ep-etape-b{min-height:48px;white-space:nowrap}
  /* Fiche client : cinq commandes en trois rangées inégales ; deux colonnes égales. */
  .fc-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .fc-actions>*{min-width:0}
  .fc-actions>.btn,.fc-actions>.fc-menu>button{width:100%;justify-content:center;white-space:normal;text-align:center}
  /* Même hauteur sur une même rangée (règle des boutons côte à côte) : la case s'étire, le bouton aussi. */
  .fc-actions>*{align-self:stretch}
  .fc-actions>.btn,.fc-actions>.fc-menu,.fc-actions>.fc-menu>button{height:100%!important;min-height:44px}
}

/* ── 6.4 bis Bandeaux de chiffres en rangée, filtres sur une ligne, synchronisation en une ligne ──
   Défaut relevé : la Banque empilait cinq cartes de chiffres (560 px) avant la première ligne, le
   Pipeline et la Prospection cinq cartes sur trois rangées (265 à 376 px). Un bandeau de quatre
   chiffres ou plus devient une rangée qui défile au doigt, une carte entière (52 % de la largeur, 172 px au
   moins : à 150 px, les phrases sous les chiffres tenaient dans 120 px) et le bord de la suivante en vue
   (le bord dit qu'il y en a d'autres) ; en dessous de quatre, la grille reste. */
@media (max-width: 560px) {
  :is(.compta-hero,.pc-bd,.pr-bd,.agt-kpis):has(> :nth-child(4)){display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    scroll-snap-type:x proximity;scroll-padding-inline:6px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  :is(.compta-hero,.pc-bd,.pr-bd,.agt-kpis):has(> :nth-child(4))::-webkit-scrollbar{display:none}
  :is(.compta-hero,.pc-bd,.pr-bd,.agt-kpis):has(> :nth-child(4)) > *{flex:0 0 max(172px,52%);min-width:0;scroll-snap-align:start}
  .compta-hero{margin-bottom:12px}
  .compta-hero .compta-kpi{padding:14px 14px}
  /* Les filtres de la Banque (Date, Justificatif, Montant, Ajouter…) : une rangée qui défile, pas deux. */
  .content .qk-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .content .qk-filters::-webkit-scrollbar{display:none}
  .content .qk-filters > *{flex:0 0 auto;scroll-snap-align:start}
  /* Accueil des Paramètres : la liste des catégories était centrée dans la hauteur de l'écran, avec 90 px
     de vide au-dessus d'elle ; au téléphone elle commence en haut. */
  .content .param-accueil{justify-content:flex-start;min-height:0;padding:4px 0 16px}
  /* Fiche client : les deux groupes d'onglets (Suivi : 4, Documents : 6) s'étalaient sur trois rangées
     (245 px) avant le contenu ; une rangée par groupe, qui défile au doigt. */
  .content .fc-groupe-onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .content .fc-groupe-onglets::-webkit-scrollbar{display:none}
  .content .fc-groupe-onglets > *{flex:0 0 auto;scroll-snap-align:start}
  .content .fc-creer:has(.mob-filtres-btn){padding-top:12px;padding-bottom:12px}
  .content .fc-creer .mob-filtres-btn{margin:0}
  /* Filtres des listes de l'espace prospects (Rechercher, Source, Responsable…) : deux colonnes au lieu
     d'une pile de six champs (400 px) ; la recherche et les cases à cocher prennent toute la rangée. */
  .content .ea-filtres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-items:end}
  .content .ea-filtres .ag-champ{max-width:none;flex:none}
  .content .ea-filtres .ag-champ:first-child,.content .ea-filtres .ag-champ-coche{grid-column:1/-1}
  .content .ea-filtres .ag-champ-coche{align-items:flex-start;min-height:44px}
  /* « À jour · dernière synchronisation à 13:13 » : la ligne d'état suffit tant que tout va bien ; les
     chiffres sont derrière « Détails ». Une erreur ou un mouvement ignoré reste affiché en clair. */
  .cb-sync-ok .cb-sync-txt > span:not(.cb-sync-err):not(.cb-sync-alerte){display:none}
}

/* ── 6.5 Cibles et lisibilité relevées par l'audit ───────────────────────────────
   Cibles sous 24 px (WCAG 2.5.8) : nom d'un agent dans sa liste (19 px), lieux de la carte
   (France, Belgique, Suisse : 15 px), « Détail » de l'Aperçu (18 px), éléments du récapitulatif de
   TVA (19 px), curseur d'avancement (6 px de haut), adresses e-mail de la fiche (18 à 21 px),
   numéros de jour de l'agenda en vue Mois (19 px de large). Textes à 10,5 px : pastilles d'état,
   intitulés de chiffres, en-têtes de colonnes — 11,5 px au téléphone. */
@media (max-width: 900px) {
  .content .agt-nom,.content th[scope=row] button{min-height:32px}
  .pr-lien{min-height:32px!important;display:inline-flex!important;align-items:center}
  .content details>summary{min-height:32px;padding-top:4px;padding-bottom:4px}
  input[type=range].pct-range{height:32px;background:transparent;background-image:linear-gradient(var(--bg4),var(--bg4));
    background-size:100% 6px;background-position:center;background-repeat:no-repeat}
  input[type=range].pct-range::-webkit-slider-thumb{width:26px;height:26px}
  input[type=range].pct-range::-moz-range-thumb{width:24px;height:24px}
  .fc-tete a[href^="mailto:"],.fc-tete a[href^="tel:"],a.fc-lien{display:inline-flex;align-items:center;min-height:32px}
  .ag-mois .ag-mois-num{min-width:24px!important}
  /* Boutons des pages à 36 à 42 px (« Rapprocher », « Synchroniser Qonto », « Nouvelle tâche », l'en-tête
     de la fiche prospect, « Devis » / « Contrat » de la fiche client) : des feuilles chargées après
     celle-ci leur reposaient une hauteur de bureau. 44 px au doigt, hors des cellules de tableau
     (où 36 px restent la règle, 1.2). */
  .content :is(.btn,.btn-p,.btn-sm,.btn-d):not(td *):not(th *){min-height:44px!important}
  .pb-move:not(:focus){min-height:0!important}
}
/* Fenêtres « Nouveau client » et « Échéance » : css/formulaires.css les met à 100vw - 16 px sous
   640 px, mais leur voile n'a pas de marge sur téléphone (1.8) : elles se calaient à gauche, avec
   16 px vides à droite et en bas. Pleine page, comme les autres fenêtres (body : la règle de
   formulaires.css, chargée après, a la même force). */
@media (max-width: 900px) {
  body :is(#form-ov,#echeance-ov)>.modal{width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;border-radius:0!important}
}
@media (max-width: 560px) {
  /* Commandes encore à 32 ou 33 px au second passage de l'audit (liste des cibles sous 44 px, hors
     cellules de tableau) : sélecteurs de période des rapports et de la santé, « Retour au pipeline »,
     liens « Factures > » de la Vue d'ensemble, télécharger / ouvrir d'un document, « Ouvrir dans Qonto »,
     titres de blocs repliables (groupes de l'activité d'une fiche client, « Détail »). Restent à 24 px,
     parce que le numéro d'un jour ouvre la journée entière : les numéros et les puces du mois. */
  .content :is(.pf-btn,.pf-btn-sm,.back-btn,.vd-lien,.di-action,.qk-linkbtn):not(td *):not(th *){min-height:44px!important}
  .content details>summary{min-height:44px;padding-top:12px;padding-bottom:12px;box-sizing:border-box}
  .content .qk-balance .eye{min-height:44px;min-width:44px}
  /* !important : les feuilles chargées après celle-ci (fiche client, compta) et les styles en ligne
     posent ces petites tailles avec la même force. */
  .elv-badge,.vd-groupe,.content dt,.content th,.content .qk-tag,.content .qk-pill,.agw-kicker,.rp-etiquette,
  .content [style*="font-size:10px"],.content [style*="font-size:10.5px"],.content [style*="font-size: 10px"]{font-size:11.5px!important}
  .qk-panel{animation-name:elv-feuille-monte}
}
@keyframes elv-feuille-monte{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}

/* ── 6.6 Fluidité : des transitions courtes, jamais de spectacle ─────────────────
   Accord de Célian du 03/10 pour ce périmètre (téléphone et tablette) : menus déroulants,
   panneau de la cloche, onglets, fenêtres, éléments qui s'ouvrent — 0,15 à 0,22 s, en fondu et
   d'un léger glissement. @starting-style donne l'état de départ d'un élément qui apparaît (sorti
   de display:none ou ajouté à la page) : aucune ligne de JavaScript. Un navigateur qui ne le
   connaît pas affiche comme avant, sans transition. Mouvement réduit : rien ne bouge (bloc
   ci-dessous, en plus de la règle commune de css/elevora.css). */
@media (max-width: 900px) {
  :is(.ep-menu-liste,.fc-menu-liste,.ag-menu,#client-ctx-menu,#project-ctx-menu,#notif-panel){
    transition:opacity .16s ease,transform .16s cubic-bezier(.2,.8,.3,1)}
  .mob-creer-menu{transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.3,1);transform-origin:bottom right}
  :is(.pl-panneau,.ep-panneau,#pcl-panel-prospects,#pcl-panel-clients,#equipe-content,#points-content,#av-panneau):not([hidden]){
    animation:elv-onglet .18s cubic-bezier(.2,.8,.3,1)}
  .topbar.recherche-ouverte .tb-search,.mob-filtres-btn[aria-expanded="true"]+*,#sec-dashboard .vd-graph.mob-graph-ouvert{animation:elv-onglet .18s cubic-bezier(.2,.8,.3,1)}
  /* Les deux fenêtres « .ov » (fiche client, échéance) se ferment aussi en fondu : le voile
     s'éclaircit au lieu de disparaître d'un coup. */
  .ov{opacity:0;transition:opacity .2s ease,display .2s allow-discrete}
  .ov.open{opacity:1}
  .ov:not(.open){pointer-events:none}
}
@keyframes elv-onglet{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Un message ou un bandeau qui s'en va (elvRetirerDoux, js/71) : fondu et léger glissement. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .elv-sortie{opacity:0!important;transform:translateY(6px)!important;transition:opacity .18s ease,transform .18s ease!important;pointer-events:none}
}
@media (max-width: 900px) {
  @starting-style{
    :is(.ep-menu-liste,.fc-menu-liste,.ag-menu,#client-ctx-menu,#project-ctx-menu,#notif-panel){opacity:0;transform:translateY(-4px)}
    .mob-creer-menu{opacity:0;transform:translateY(6px) scale(.98)}
    .ov.open{opacity:0}
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar,.sidebar.mob-open,.mob-overlay,.mob-overlay.open,.ag-rail,.ag-rail.ouvert,.ov,.mob-creer-menu,.mob-creer-btn svg,
  :is(.ep-menu-liste,.fc-menu-liste,.ag-menu,#client-ctx-menu,#project-ctx-menu,#notif-panel){transition:none!important}
  :is(.pl-panneau,.ep-panneau,#pcl-panel-prospects,#pcl-panel-clients,#equipe-content,#points-content,#av-panneau),
  .topbar.recherche-ouverte .tb-search,.mob-filtres-btn+*,#sec-dashboard .vd-graph,.qk-panel{animation:none!important}
}

/* ════════════════════════════════════════════════════════════════════════════════
   6.7 [AM] 03/10/2026 — DEUXIÈME PASSE : titres entiers, fiches plus courtes, textes d'aide repliés
   ════════════════════════════════════════════════════════════════════════════════
   Relevé de l'audit à 360, 375 et 390 px (clair et sombre) une fois la première passe faite : plus
   aucun débordement, mais (1) des titres de page coupés en points de suspension (« Prospects / Cli… »,
   « Maximus Coac… », « Propositions commer… ») parce que le curseur du thème prenait 56 px dans la
   barre ; (2) la fiche d'un client, 640 px d'en-tête avant le premier onglet — il fallait faire
   défiler pour voir que le clic sur un onglet avait changé quelque chose ; (3) des textes d'aide de
   cinq à huit lignes avant le contenu de la page ; (4) des fenêtres coupées, des listes de filtres
   qui sortaient de l'écran, des rangées de commandes encore à 32 px.
   Rien n'est retiré : le thème est dans le tiroir, deux actions de la fiche sont dans « Plus », les
   textes d'aide s'ouvrent d'un geste (« Lire la suite »). Le bureau (> 560 px) ne change pas.
   Mouvement : seulement des fondus et des glissements de 0,16 à 0,2 s, tous coupés en mouvement réduit
   (dernier bloc de cette section). */

/* Ce que js/71-mobile.js ajoute à la page : invisible tant qu'on n'est pas sur un téléphone. */
.mob-theme,.mob-fermer,.mob-intro-btn{display:none}
.fc-menu-liste .mob-fc-item,.fc-menu-liste .mob-fc-sep{display:none}

/* Tablette et téléphone : générateurs de facture (et de devis). Le formulaire et l'aperçu avaient chacun
   leur défilement, répartis dans la hauteur de la fenêtre — le formulaire se retrouvait dans une lucarne
   de 250 px au-dessus de l'aperçu. Un seul défilement, celui de la fenêtre : le formulaire, puis l'aperçu. */
@media (max-width: 900px) {
  .gen-body>.gen-form-side,.gen-body>.gen-preview-side{overflow-y:visible;overflow-x:clip;flex-shrink:0;max-height:none}
  .gen-body{align-content:start}
  /* Fenêtres de confirmation (« Supprimer ce client ? », « Archiver… ») : la règle des fenêtres pleine page leur
     donnait aussi 100 % de la hauteur — une carte blanche de 700 px avec deux lignes de texte en haut. Elles
     reprennent la hauteur de leur contenu, au centre de l'écran, comme au bureau. */
  body #elv-modal-ov .elv-modal-card{height:auto;max-height:calc(100dvh - 40px);max-width:480px!important;border-radius:16px!important;margin:auto!important}
}

@media (max-width: 560px) {
  /* ── Barre du haut : le thème passe dans le tiroir, le titre peut prendre deux lignes ── */
  .topbar .theme-toggle{display:none}
  .topbar .tb-title,.topbar #page-title{white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:16px;line-height:1.15}
  .mob-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin-top:10px;padding:0 12px;
    border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--text);font:500 13px var(--font);cursor:pointer}
  .mob-theme:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .mob-theme-piste{position:relative;flex:0 0 40px;height:24px;border-radius:12px;background:var(--bg4);border:1px solid var(--border2);transition:background .2s ease,border-color .2s ease}
  .mob-theme-piste::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text2);transition:transform .2s cubic-bezier(.2,.8,.3,1),background .2s ease}
  .mob-theme[aria-checked="true"] .mob-theme-piste{background:var(--accent-fill);border-color:transparent}
  .mob-theme[aria-checked="true"] .mob-theme-piste::after{transform:translateX(16px);background:var(--on-fill)}

  /* ── Panneau de la cloche : un bouton pour le fermer (il couvre la cloche elle-même) ── */
  .mob-fermer{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin:-6px -4px -6px 0;
    border:0;border-radius:10px;background:none;color:var(--text2);cursor:pointer}
  .mob-fermer:hover,.mob-fermer:focus-visible{background:var(--bg3);color:var(--text)}
  .mob-fermer:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* Notifications : les trois actions (lue, reporter, archiver) en rangée sous le texte, pas en colonne à
     droite (132 px de haut par notification, dont la moitié vide). */
  .nf-ligne{flex-wrap:wrap}
  .nf-ligne>.nf-corps{flex:1 1 calc(100% - 22px)}
  .nf-ligne>.nf-actions{flex:1 1 100%;flex-direction:row;justify-content:flex-end;gap:4px;margin:0}
  li.nf-ligne,.nf-cloche li.nf-ligne{row-gap:0;padding-bottom:4px}

  /* ── Fiche client : trois commandes sur une ligne (Préparer un RDV, Modifier, Plus) ── */
  .fiche-client .fc-actions{grid-template-columns:minmax(0,1fr) auto 48px}
  .fiche-client .fc-actions>.mob-dans-menu{display:none!important}
  .fiche-client .fc-actions>.fc-menu{width:48px}
  .fiche-client .fc-plus{position:relative;padding:0;gap:0}
  .fiche-client .fc-plus>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .fiche-client .fc-menu-liste{left:auto;right:0;width:min(280px,calc(100vw - 32px))}
  .fiche-client .fc-menu-item{min-height:48px}
  .fc-menu-liste .mob-fc-item{display:flex}
  .fc-menu-liste .mob-fc-sep{display:block}
  .fiche-client .fc-btn{padding:8px 10px}
  /* En-tête resserré : nom, e-mail et téléphone sur deux lignes au lieu de trois, marges réduites. */
  .fiche-client .fc-tete-haut{gap:12px;padding-bottom:12px}
  .fiche-client .fiche-contact{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
  .fiche-client .fiche-contact>*{overflow-wrap:anywhere;min-width:0}
  .fiche-client .fiche-chiffres{padding-top:10px;padding-bottom:10px;gap:10px 24px}
  .fiche-client .fc-creer{padding-top:10px;padding-bottom:10px}
  /* Les onglets de la fiche (Informations, Échanges, Activité… Devis, Contrats, Factures) passent avant le
     bloc d'avancement du projet : ils étaient à 916 px sur un écran de 760, donc sous le pli — on cliquait
     sur un onglet sans voir que le contenu changeait. */
  #current-project-area{display:flex;flex-direction:column}
  #current-project-area>.fiche-nav{order:-1}
  #current-project-area>.fiche-projet{order:0}

  /* ── Cartes de tableau : les valeurs courtes deux par rangée (carte-2, js/71-mobile.js), intitulé au-dessus.
     Six colonnes : le titre en prend quatre et le montant deux (le nom d'un mouvement ou d'un client se
     coupait à 80 px quand les deux se partageaient la rangée à moitié), les valeurs courtes trois chacune. ── */
  .content table.tab-cartes>tbody>tr.carte-2{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 12px}
  .content table.tab-cartes>tbody>tr.carte-2>.carte-titre{grid-column:1/5}
  .content table.tab-cartes>tbody>tr.carte-2>.carte-montant{grid-column:5/7}
  .content table.tab-cartes>tbody>tr.carte-2>.carte-simple{grid-column:span 3;display:block}
  .content table.tab-cartes>tbody>tr.carte-2>.carte-simple::before{display:block;margin:0 0 1px;font-size:11.5px;line-height:1.3}
  .content table.tab-cartes>tbody>tr.carte-2>.carte-simple>*+*{margin-top:2px}

  /* ── Rapports : la période sur une seule rangée qui défile, pas sur trois ── */
  .rp-barre{gap:8px}
  .rp-barre .rp-seg{display:flex;flex-wrap:nowrap;flex:1 1 100%;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .rp-barre .rp-seg::-webkit-scrollbar{display:none}
  .rp-barre .rp-seg .pf-btn{flex:0 0 auto;scroll-snap-align:start;min-height:44px!important;white-space:nowrap}
  .rp-barre .rp-nav-btn{width:44px;height:44px}
  .rp-objectif-champ input{min-height:44px!important}

  /* ── Vue d'ensemble : les quatre catégories en une rangée, à la taille du doigt ── */
  .vd-sommaire a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}

  /* ── Banque : soldes en rangée, liens d'en-tête sur une ligne ── */
  .content .qk-topbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
  .content .qk-topbar-actions .qk-btn-white{flex:0 0 auto}
  .content .qk-balances{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;scroll-padding-inline:6px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .content .qk-balances::-webkit-scrollbar{display:none}
  .content .qk-balances>*{flex:0 0 max(210px,64%);min-width:0;scroll-snap-align:start}
  /* Soldes des comptes en tête des onglets À matcher, Récurrences, Règles : 405 px en grille, 160 px en rangée. */
  .content .cb-comptes{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-bottom:12px;scroll-snap-type:x proximity;scroll-padding-inline:6px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .content .cb-comptes::-webkit-scrollbar{display:none}
  .content .cb-comptes>li{flex:0 0 max(210px,64%);min-width:0;scroll-snap-align:start}
  /* La phrase sur la synchronisation automatique (toutes les 20 minutes…) est repliée avec les chiffres ;
     elle revient quand « Détails » est ouvert, au lieu de n'être lisible nulle part. */
  .cb-sync-ok:has(.cb-sync-det[open]) .cb-sync-txt > span:not(.cb-sync-err):not(.cb-sync-alerte){display:block}

  /* ── Textes d'aide : deux lignes, le reste derrière « Lire la suite » (js/71-mobile.js) ── */
  .mob-intro-court{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .mob-intro-btn{display:inline-flex;align-items:center;min-height:44px;margin:0 0 4px;padding:0;border:0;background:none;color:var(--accent);
    font:600 13px var(--font);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .mob-intro-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .mob-intro-btn[hidden]{display:none}

  /* Le point d'équipe : la date (180 px) et son explication côte à côte laissaient 90 px de large au texte. */
  #points-content :is(div[style*="grid-template-columns:180px 1fr"],div[style*="grid-template-columns: 180px 1fr"]){grid-template-columns:minmax(0,1fr)!important}

  /* ── Cibles et petits textes relevés au troisième passage ── */
  .content .pr-lien{min-height:44px!important}
  input[type=range].pct-range{height:44px;background-size:100% 6px}
  .content .di-status-badge,.content label.gen-l{font-size:11.5px!important}   /* 9,5 px et 10 px avant */
  .ag-mois .ag-puce{font-size:11px}                                            /* 10,5 px avant */

  /* ── Barre de sélection des clients : centrée à 18 px de marge, elle dépassait l'écran (de -3 à 363 px sur
     360), son texte passait sur deux lignes et ses boutons faisaient 24 à 29 px. Pleine largeur, le
     décompte au-dessus, trois commandes de 44 px dessous. ── */
  #selection-bar{left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom,0))!important;transform:none!important;
    flex-wrap:wrap!important;gap:4px 8px!important;padding:10px 8px 8px 14px!important;border-radius:16px!important}
  #selection-bar>span{flex:1 1 100%}
  #selection-bar>div[style*="width: 1px"]{display:none}
  #selection-bar>button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;font-size:14px!important}
  #selection-bar>button:nth-of-type(1){flex:1 1 0}
  #selection-bar>button:nth-of-type(2){flex:1 1 0}

  /* ── Écran de connexion : « Mot de passe oublié ? », le lien agent et la case « Rester connecté » (16 px,
     dans un libellé de 24 px) au doigt. ── */
  #admin-login-wrap :is(.pr-lien,.ea-porte-bascule){min-height:44px!important}
  #admin-login-wrap label[for="admin-lmem"]{min-height:44px!important;gap:12px!important}
  #admin-login-wrap #admin-lmem{width:22px!important;height:22px!important;flex:0 0 22px}

  /* ── Fenêtres composées en JavaScript avec un style en ligne (Ajouter un membre, échéances, déclarations,
     contrat, rapports…) : « position: fixed; inset: 0; display: flex; align-items: center ». Centrée
     ainsi, une fenêtre plus haute que l'écran (clavier ouvert, petit téléphone) est coupée en haut ET
     en bas, sans défilement possible : ses premiers champs et ses boutons sont inatteignables. Alignée
     en haut, défilante, et centrée seulement tant qu'elle tient (marges automatiques). ── */
  body>div[style*="position: fixed"][style*="inset: 0px"][style*="align-items: center"]{align-items:flex-start!important;overflow-y:auto!important;overscroll-behavior:contain}
  body>div[style*="position: fixed"][style*="inset: 0px"][style*="align-items: center"]>*{margin-top:auto;margin-bottom:auto;flex-shrink:0}
  /* Devis : formulaires.css la laissait à 100vw - 16 px, calée à gauche (16 px vides à droite et en bas) ;
     elle prend la page entière, comme « Nouveau client ». */
  body #devis-ov>.gen-modal{width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;border-radius:0!important}
  /* Les listes des filtres de la Banque (Date, Justificatif, Montant, Compte, Catégorie) s'ouvraient sous le
     bouton et dépassaient du bas de l'écran (jusqu'à 843 px sur 760) : une feuille qui monte du bas, comme
     le panneau d'un mouvement. Les menus et réglages des Tâches et du Pipeline (« Autres façons de créer »,
     « Conditions », « Ordre », le menu d'une carte…) : la même, ils se retrouvaient à 22 px de haut quand
     leur bouton était près du bas de l'écran. */
  .qk-pop{left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom,0))!important;width:auto!important;min-width:0!important;
    max-width:none!important;max-height:78dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:16px;animation:elv-feuille-monte .2s cubic-bezier(.2,.8,.3,1)}
  .qk-pop-cat{min-width:0}
  .tk-pop{left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom,0))!important;width:auto!important;
    max-width:none!important;max-height:78dvh!important;overscroll-behavior:contain;border-radius:16px;animation:elv-feuille-monte .2s cubic-bezier(.2,.8,.3,1)}
  /* Deux contrôles de fenêtre qui sortaient de leur cadre : la bascule « Signer en tant qu'Elevora / que client »
     (17 px de trop) et le bouton « Corriger » du contrat à côté de son champ. */
  #admin-sign-ov :is(#sig-mode-admin-btn,#sig-mode-client-btn){white-space:normal;min-width:0;line-height:1.25}
  [id$="-refine-input"]{min-width:0!important}
  /* Aperçu d'une facture dans sa fenêtre : la page entière, à l'échelle de la largeur (zoom posé par
     js/71-mobile.js) ; elle était écrasée à 270 px, tableau et totaux coupés à droite. */
  .gen-preview-side .preview-doc{width:880px;max-width:none;box-sizing:border-box;zoom:var(--prev-zoom,.36)}
  /* 03/10/2026 : la colonne unique de la fenêtre était en « 1fr », qui ne descend jamais sous la largeur de
     son contenu : elle s'élargissait aux 880 px de la facture, le calcul du zoom (js/71) concluait que la
     page tenait (zoom 1) et la facture restait à taille réelle, coupée à droite (capture de Célian du 03/10,
     logo « Elevora » décentré). minmax(0,1fr) : la colonne garde la largeur de l'écran. */
  .gen-body{grid-template-columns:minmax(0,1fr)!important}
  /* Lignes de facture : cinq colonnes dans 318 px (description à 60 px, croix hors de l'écran) devenaient une
     carte par ligne — la description sur toute la largeur, puis quantité, prix et total. */
  .gen-section .li-table,.gen-section .li-table tbody{display:block;width:100%}
  .gen-section .li-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .gen-section .li-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:2px 8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--border)}
  .gen-section .li-table tr:last-child{border-bottom:0}
  .gen-section .li-table td{display:block;min-width:0;padding:0;border:0}
  .gen-section .li-table td:nth-child(1){grid-column:1/3;grid-row:1}
  .gen-section .li-table td:nth-child(5){grid-column:3;grid-row:1;align-self:center;justify-self:end}
  .gen-section .li-table td:nth-child(2){grid-column:1;grid-row:2}
  .gen-section .li-table td:nth-child(3){grid-column:2;grid-row:2}
  .gen-section .li-table td:nth-child(4){grid-column:3;grid-row:2;align-self:center;text-align:right;font-size:13px!important;padding-bottom:12px}
  .gen-section .li-table td:nth-child(2)::before,.gen-section .li-table td:nth-child(3)::before{display:block;margin:4px 0 2px;font:500 11.5px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--text2)}
  .gen-section .li-table td:nth-child(2)::before{content:"Qté"}
  .gen-section .li-table td:nth-child(3)::before{content:"P.U. HT"}
  .gen-section .li-table .li-inp{width:100%!important;max-width:none!important;min-height:44px}
  .gen-section .li-table .li-del{width:44px;height:44px;min-height:44px!important;display:inline-flex;align-items:center;justify-content:center}
}

/* Mouvement réduit : le curseur du thème, les feuilles du bas — rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .mob-theme-piste,.mob-theme-piste::after{transition:none!important}
  .qk-pop,.tk-pop{animation:none!important}
}

/* [V12] 03/10/2026 (point 3) : restes mobiles du contrôle — marge basse sous « + Créer », boutons du pipeline à 44 px,
   cartes cachées derrière « Afficher plus », blocs des réglages IA repliables. */
.carte-plus{display:none}
.adm-repli>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center}
.adm-repli>summary::-webkit-details-marker{display:none}
.adm-repli>summary::after{content:'+';margin-left:auto;font-weight:600}
.adm-repli[open]>summary::after{content:'\2212'}
@media (max-width: 560px) {
  .fiche-client,.espace-prospect{padding-bottom:96px}
  .fiche-client .fc-onglets,.ep-nav .fiche-onglets{margin-bottom:8px}
  #pr-vue-btn,[id^="pl-actualiser-"]{min-height:44px;min-width:44px}
  .carte-plus{display:flex;width:100%;justify-content:center;min-height:44px;margin:8px 0 16px}
  .content table.tab-cartes tr.carte-cachee{display:none!important}
}

/* ════════════════════════════════════════════════════════════════════════════════
   [V20] 06/10/2026 — L'AGENDA SUR TÉLÉPHONE : la vue Semaine défile (document de Célian, §13)
   ════════════════════════════════════════════════════════════════════════════════
   Constat : « quand je clique sur Semaine, la moitié du tableau sort de l'écran […] je ne peux pas swiper sur le côté ».
   Désormais (js/30-calendrier.js, _agVueGrille et _agTelPoser) la vue Semaine (et 7 jours) porte TOUTE la semaine dans
   UNE zone qui défile, trois jours à la fois :
     · défilement horizontal natif, chaque jour calé à son bord (scroll-snap) ;
     · la colonne des heures reste fixe à gauche, l'en-tête des jours (et la ligne « journée ») fixe en haut
       (position: sticky) — ils sont donc DANS la zone qui défile, au contraire du bureau ;
     · la largeur d'un jour est un tiers de ce qui reste après la colonne des heures (unités de conteneur : le
       conteneur est la grille elle-même, pas la fenêtre — un tiroir ou une marge ne la faussent pas) ;
     · un glissement qui continue au-delà du premier ou du dernier jour passe à la semaine voisine (JS).
   Au doigt, un rendez-vous ne se déplace qu'après un appui long : le toucher sert d'abord à faire défiler. */
@media (pointer: coarse), (max-width: 560px) {
  .ag-bloc,.ag-puce{touch-action:pan-x pan-y}
  .ag-poignee{touch-action:none;height:16px}
}
@media (max-width: 560px) {
  .ag-grille-tel{--ag-hw:44px;--ag-jw:calc((100vw - var(--ag-hw)) / 3);min-width:0;width:100%}
  @supports (width: 1cqw) { .ag-grille-tel{--ag-jw:calc((100cqw - var(--ag-hw)) / 3);container-type:inline-size} }
  .ag-defil-tel{overflow:auto;max-height:calc(100dvh - 190px);min-height:320px;scroll-snap-type:x mandatory;scroll-padding-left:var(--ag-hw);scroll-padding-top:130px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .ag-defil-tel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .ag-tel-large{width:calc(var(--ag-hw) + var(--ag-n) * var(--ag-jw));display:flex;flex-direction:column}
  .ag-tel-entete{position:sticky;top:0;z-index:8;background:var(--bg2)}
  .ag-grille-tel .ag-grille-tete,.ag-grille-tel .ag-grille-jour,.ag-grille-tel .ag-grille-corps{grid-template-columns:var(--ag-hw) repeat(var(--ag-n),var(--ag-jw))}
  .ag-grille-tel .ag-fuseau,.ag-grille-tel .ag-journee-l,.ag-grille-tel .ag-heures{position:sticky;left:0;z-index:7;background:var(--bg2)}
  .ag-grille-tel .ag-heures{border-right:1px solid var(--border)}
  .ag-grille-tel .ag-col,.ag-grille-tel .ag-tete-jour{scroll-snap-align:start}
  .ag-grille-tel .ag-tete-jour{min-width:0}
  /* Un bloc d'une heure fait 48 px : le titre (deux lignes au plus) et l'horaire tiennent sans être coupés au milieu d'une ligne. */
  .ag-grille-tel .ag-bloc{padding:2px 5px}
  .ag-grille-tel .ag-bloc-t{font-size:11.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;flex:0 1 auto}
  .ag-grille-tel .ag-bloc-h{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
  .ag-grille-tel .ag-bloc.ag-court{flex-direction:column;align-items:stretch;gap:0}
  .ag-grille-tel .ag-bloc.ag-court .ag-bloc-t{-webkit-line-clamp:1}
  /* La barre du haut : précédent, suivant, aujourd'hui et le choix de la vue restent visibles, sans le menu des agendas. */
  .ag-barre{row-gap:4px}
  .ag-barre .ag-ico,.ag-barre .ag-auj-btn,.ag-barre .ag-vue-btn{min-height:44px}
  .ag-barre .ag-ico{min-width:44px}
  .ag-charge{order:9}
}