/* ALFRED-MOBILE — chargé en dernier. Aucune règle hors @media. */ /* 📱 V5.002 (mobile) : téléphone et tactile seulement. À 1280 px avec une souris, AUCUNE règle ne s'applique (preuve : script de la partie 6 du plan → doit afficher []). Retirable : supprimer la ligne d'index.html. Blocs : A ≤900 réparations · B ≤768 mise en page · C ≤640 tableaux en cartes · D doigt · E sans survol · F barre du haut (sous html.mbarre-on, posée par modules/mobile-barre.js) · G appli installée. */ /* ═══ A. ≤900 px : réparations alignées sur le tiroir existant ═══ */ @media (max-width:900px){ /* A1 Colonnes collantes : lève *{max-width:100vw} (styles.css) dans les zones qui défilent. Les largeurs écrites dans les balises (min/max-width des cellules) restent prioritaires. */ #cm-planning-scroll *, #cm-simple-scroll *, #ec-cal-scroll *, #planning-content *, [id^="interv-calendar-scroll-"] *, #trello-board *{ max-width:none } /* A2 Tiroir ☰ : au-dessus des pages plein écran (ticket z50, fil messages z120), sous les fenêtres (.overlay 200). Il passe aussi AU-DESSUS du ☰ (z100) → le logo n'est plus caché ; encoche iPhone et hauteur réelle. */ .sidebar{ height:100vh; height:100dvh; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px) } .sidebar.mobile-open{ z-index:170 } .mobile-overlay.show{ z-index:169 } .sidebar.mobile-open .logo-name{ display:block } /* débris du menu « icônes seules » (styles.css ≤900) */ .sidebar .nav-item span.nav-badge{ display:inline-block } /* compteur #nb-open réaffiché ; display:none écrit dans la balise reste prioritaire */ .mobile-menu-btn{ left:calc(14px + env(safe-area-inset-left,0px)) } /* ☰ hors de l'encoche en paysage */ /* A1 bis Grille Interventions (#interventions-content, interventions.js) : le TABLEAU seul défile (styles.css table{display:block;overflow-x:auto}) → plus de 2e zone de défilement dans le cadre (équipe F) */ #interventions-content table{ max-width:100% !important } /* A3 Fiche ticket #ticket-page (styles.css .ticket-*) */ .ticket-page{ left:0 !important; right:0 !important; width:auto !important } /* plus de bande vide de 232 px entre 641 et 900 px */ .ticket-topbar{ flex-wrap:wrap; gap:8px !important; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 64px !important } /* « Retour » dégagé du ☰ */ .ticket-topbar-title{ flex:1 1 100%; order:10; white-space:normal } .ticket-topbar-back{ min-height:40px } .ticket-topbar-back > span{ display:none } /* « Échap » */ .ticket-body{ flex-direction:column } .ticket-main{ order:1; padding:14px 12px !important; overflow:visible } .ticket-sidebar{ order:2; width:auto !important; border-right:0 !important; border-top:1px solid var(--border); padding:14px 12px !important; overflow:visible } /* A4 Bouton 📄 PDF (export-pdf.js) : outil de bureau ; cachait « mois suivant » en Interventions */ .exp-pdf-btn{ display:none !important } /* A5 Filtres en 16 px (bat .filters select{12px!important}) → plus de zoom automatique sur iPhone */ .filters select, .filters input:not([type=checkbox]):not([type=radio]){ font-size:16px !important } /* A6 Bandeau d'annonces (index.html, top:0 z9998) : passe en bas, ne couvre plus ☰ */ #announcement-banner{ top:auto !important; bottom:0; padding-bottom:env(safe-area-inset-bottom,0px) } /* A7 Fenêtres : vraie hauteur iPhone + pied collé en bas (.modal défile déjà en overflow-y:auto) */ .overlay .modal{ max-height:calc(100dvh - 24px) !important; margin:12px auto !important } .modal-actions{ flex-wrap:wrap; position:sticky; bottom:0; z-index:2; background:var(--bg2) } .modal-actions .btn{ flex:1 1 auto; justify-content:center } #cm-resa-readonly > div > div:last-child{ position:sticky; bottom:-20px; background:var(--bg2); padding:10px 0 } /* « Fermer » toujours visible (cm-smoobu.js) */ /* A8 Conversation voyageurs plein écran (cm-messages.js) : encoche et barre d'accueil */ #cm-mobile-thread{ padding-top:env(safe-area-inset-top,0px) !important; padding-bottom:env(safe-area-inset-bottom,0px) !important } #cm-mobile-thread > div:first-child{ flex-wrap:wrap !important; row-gap:6px } #cm-mobile-thread > div:first-child > div:last-child{ flex-shrink:1 !important; flex-wrap:wrap; margin-left:auto } /* A9 Écran de connexion (panneau width:440px) */ #agent-selector-screen{ overflow-y:auto !important; align-items:flex-start !important; padding:calc(16px + env(safe-area-inset-top,0px)) 12px 16px } #agent-selector-screen > div[style*="width:440px"]{ width:100% !important; max-width:440px; padding:22px 18px !important; margin:auto } #agent-selector-screen .ops-readout, #agent-selector-screen .ops-corner{ display:none } /* 📱 V5.004 (test téléphone) A10 Onglets à marge de bureau (margin:-28px -32px écrit dans la balise) : même recette que #tab-cockpit (styles.css) */ #tab-resilience, #tab-idees, #tab-patrimoine, #tab-fiscal, #tab-juridique, #tab-sante, #tab-investigation, #tab-logistique{ margin:0 !important } } /* ═══ B. ≤768 px : mise en page ═══ */ @media (max-width:768px){ /* B1 Grilles fixes non couvertes par styles.css */ [style*="grid-template-columns:1fr 340px"],[style*="grid-template-columns:1fr 260px"], [style*="grid-template-columns:1fr 280px"],[style*="grid-template-columns:420px 1fr"], [style*="grid-template-columns:300px 1fr"],[style*="grid-template-columns:200px 1fr"], [style*="grid-template-columns:230px 1fr 320px"],[style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns:1.1fr 2fr"],[style*="grid-template-columns:1.4fr 1fr"], [style*="grid-template-columns:1fr auto;gap:20px"], [style*="minmax(400px"],[style*="minmax(340px"],[style*="minmax(320px"],[style*="minmax(300px"] { grid-template-columns:minmax(0,1fr) !important } [style*="grid-template-columns:repeat(3,"], .report-grid, .agent-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)) !important } :is(#cm-stats-content,#ec-stats-host) [style*="grid-template-columns:150px 1fr 70px 92px"]{ grid-template-columns:minmax(0,1fr) 36px auto auto !important; gap:6px !important } :is(#cm-stats-content,#ec-stats-host) :is([style*="grid-template-columns:170px 1fr 100px"],[style*="grid-template-columns:170px 1fr 110px"],[style*="grid-template-columns:150px 1fr 100px"]) { grid-template-columns:minmax(0,1.3fr) minmax(30px,1fr) auto !important } :is(#cm-stats-content,#ec-stats-host) [style*="min-width:190px;background:linear-gradient"]{ min-width:0 !important } #cm-stats-content [style*="top:calc(100% + 6px);right:0"]{ right:auto !important; left:0 !important; max-width:calc(100vw - 24px) !important; max-height:60vh !important } /* menu « Tous les logements » coupé */ #cm-prix-content [style*="display:flex;gap:12px;font-size:11.5px;color:var(--text3);padding-top:10px"]{ flex-wrap:wrap !important } #cm-resas-content [style*="grid-column:span 2"]{ grid-column:1/-1 !important } /* B2 Carte Trello #modal-trello-card (« 1fr 460px ») : plein écran, 1 colonne, 1 seule zone qui défile */ #modal-trello-card .modal{ width:100vw !important; max-width:100vw !important; max-height:100vh !important; max-height:100dvh !important; margin:0 !important; border-radius:0 !important; padding:0 !important } #modal-trello-card .modal > div:first-child{ position:sticky; top:0; z-index:3; background:var(--bg2); padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px !important; gap:8px !important } #modal-trello-card .modal > div[style*="1fr 460px"]{ grid-template-columns:minmax(0,1fr) !important; min-height:0 !important } #modal-trello-card .modal > div[style*="1fr 460px"] > div{ max-height:none !important; overflow:visible !important; padding:14px 12px !important } #modal-trello-card .modal > div[style*="1fr 460px"] > div:last-child{ border-left:0 !important; border-top:1px solid var(--border) } #trello-card-comments-list{ min-height:0 !important } #modal-trello-card .modal-actions{ margin-top:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)) !important } #modal-trello-card .tr-deplacer{ display:block !important } /* liste « Déplacer vers la colonne » (index.html) */ #trello-card-checklist-list + div{ flex-wrap:wrap !important } #trello-card-checklist-input{ flex:1 1 100% !important } #trello-card-checklist-assignee{ flex:1 1 auto; width:auto !important } #modal-trello-card #trello-card-title{ min-width:0 !important; width:0 } /* 📱 V5.002 (mobile) : le titre (flex:1) gardait 229 px → ✕ hors écran */ /* B3 Tableau Trello : une colonne par écran, glissement aimanté */ #trello-board{ scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scroll-padding:0 12px; min-height:0 !important } #trello-board .trello-col, #trello-board .trello-col-add{ scroll-snap-align:start; width:calc(100vw - 56px) !important; min-width:calc(100vw - 56px) !important; max-width:none !important } #trello-board .trello-col{ max-height:calc(100vh - 190px); max-height:calc(100dvh - 190px) } #trello-board .trello-card{ padding:10px 12px !important } /* bat [class*="-card"] (0,2,0) */ #trello-board .trello-card-title, #trello-board .trello-card-icons{ padding:0 !important; border-radius:0 !important } .trello-col-menu{ position:fixed; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow-y:auto } /* trello.js calcule en coordonnées d'écran ; jamais hors de l'écran */ #trello-col-nav{ display:flex !important } /* onglets de colonnes, créés par trello.js (équipe B) */ #trello-col-nav::-webkit-scrollbar{ display:none } /* scrollbar-width:none (posé par le JS) ne suffit pas sur Safari */ /* B4 Plannings : colonne des noms plus étroite (elle reste collée grâce à A1) */ #cm-planning-scroll [style*="min-width:160px;max-width:160px"]{ min-width:104px !important; max-width:104px !important; padding-left:8px !important; padding-right:6px !important; white-space:normal !important } [id^="interv-calendar-scroll-"] [style*="position:sticky;left:0"]{ min-width:100px !important; max-width:100px !important; white-space:normal !important } #interventions-content table :is(th,td):first-child{ min-width:96px !important; max-width:110px !important; white-space:normal !important } /* colonne Logement ≈ 100 px (vraie grille, équipe F) */ #cm-simple-scroll{ scroll-snap-type:x mandatory !important; gap:10px !important } #cm-simple-scroll > div{ width:100% !important; flex:0 0 100% !important; padding:10px 8px 6px !important } #tab-channel-planning [style^="width:1px;height:24px"]{ display:none !important } /* 📱 V5.002 (mobile) : nom du logement sur 2 lignes (l'élément intérieur gardait nowrap + « … ») ; pastille « ⚠ Double résa » en dessous */ #cm-planning-scroll [style*="min-width:160px;max-width:160px"]{ flex-wrap:wrap !important; row-gap:2px !important } #cm-planning-scroll [style*="min-width:160px;max-width:160px"] [style*="text-overflow:ellipsis"]{ white-space:normal !important; line-height:1.2 } #cm-planning-scroll [style*="min-width:160px;max-width:160px"] > [style*="flex:1;min-width:0"]{ min-width:70px !important } /* B5 Tableaux : 1re colonne collée (le tableau défile déjà) + filtres des Clefs */ #clef-grid table :is(th,td):first-child{ position:sticky; left:0; z-index:1; background:var(--bg2) } #clef-grid table{ overflow:visible !important } /* 📱 V5.004 : overflow:hidden (clefs.js) cachait Double 3, Stock, Note, ✏ et ✕ */ /* Planning RH : 2e ligne d'en-tête = noms des employés (Date en rowspan) → seule la 1re ligne d'en-tête est collée (équipe F) */ #planning-content table :is(tbody td:first-child, tfoot td:first-child, thead tr:first-child th:first-child){ position:sticky; left:0; z-index:1; background:var(--bg2) } #tab-clefs div:has(> #clef-search){ flex-wrap:wrap !important } #clef-search{ width:100% !important; flex:1 1 100% } /* 📱 V5.002 (mobile) : Planning RH — le tableau défile aussi en hauteur → l'en-tête (noms des employés) reste visible ; rh.js fait défiler le TABLEAU jusqu'à aujourd'hui. Case « Date » (2 lignes) au-dessus de tout. */ #planning-content table{ max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px) } #planning-content thead th{ position:sticky; top:0; z-index:2; background:var(--bg2) } #planning-content table thead tr:first-child th:first-child{ z-index:3 } /* 📱 V5.002 (mobile) : cartes chiffres (Tickets…) en 2×2 — bat .stats{1fr} de styles.css ≤480 */ .content .stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important } /* B6 Récap (cm-recap.js) */ #cm-recap-content [style*="minmax(400px,1fr)"]{ grid-template-columns:1fr !important } #cm-recap-content [style*="max-height:74vh"]{ max-height:none !important; overflow:visible !important } #cm-recap-content [style*="flex:1;min-width:120px"]{ min-width:calc(33.3% - 7px) !important; padding:8px !important } /* B7 Espace client (propriétaire / prestataire) — scroll-margin = hauteur de la barre du haut (bloc F) */ #tab-espaceclient div:has(> #ec-tab-calendrier){ flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none; scroll-snap-type:x proximity; scroll-margin-top:calc(70px + env(safe-area-inset-top,0px)) } #tab-espaceclient div:has(> #ec-tab-calendrier)::-webkit-scrollbar{ display:none } #tab-espaceclient div:has(> #ec-tab-calendrier) > .ec-subtab{ flex:0 0 auto !important; scroll-snap-align:start; min-height:40px; font-size:13px !important; padding:8px 14px !important } #ec-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; margin-bottom:12px !important } /* bat .stats{1fr} des règles ≤480 et ≤380 */ #ec-kpis .stat{ padding:8px 10px !important } #ec-kpis .stat-val{ font-size:18px !important } #ec-content{ scroll-margin-top:calc(70px + env(safe-area-inset-top,0px)) } #ec-content > div[style*="calc(100vh - 235px)"]{ height:calc(100dvh - 200px - env(safe-area-inset-top,0px)) !important; min-height:360px !important } /* messagerie-proprio.js — 📱 V5.004 : -70 px, la bande des rubriques reste visible au-dessus */ #tab-espaceclient .ec-engagement{ padding:10px 12px !important; gap:10px !important } /* classe posée par supervision.js (équipe E) */ #ec-content table.ec-clefs{ min-width:0 !important } /* cartes des Clés, suite en C */ #ec-block-modal > div{ min-width:0 !important; width:100% } /* 📱 V5.004 (test téléphone par rôle, 30/09) */ /* B8 Idées (idees.js) : les actions passent sous le texte (avant : texte à 0 px, une lettre par ligne ; Archiver et ✕ hors écran) */ #idees-list .idee-card > div{ flex-wrap:wrap !important; row-gap:8px !important } #idees-list .idee-card > div > div:nth-child(2){ flex:1 1 0% !important } #idees-list .idee-card > div > div:last-child{ flex:1 1 100% !important; justify-content:flex-start !important; gap:6px !important } #idees-list .idee-card > div > div:last-child > select{ flex:1 1 100% } #idee-new-input{ min-width:0 } #idees-search{ width:100% !important } #tab-idees div:has(> #idees-search){ flex:1 1 0%; min-width:0 } #tab-idees div:has(> #idees-filter-status){ flex:1 1 100%; flex-wrap:nowrap !important } /* Cadres intérieurs de ces onglets (padding:32px 36px de bureau) */ :is(#tab-idees,#tab-fiscal,#tab-juridique,#tab-sante,#tab-investigation,#tab-logistique) > div[style*="padding:32px 36px"]{ padding:4px 0 20px !important } #tab-patrimoine > div > div[style*="padding:32px 36px"]{ padding:12px 0 20px !important } #resil-root > div[style*="padding:30px 32px 40px"]{ padding:4px 0 24px !important } /* B9 Control Center (control-center.js) : colonnes empilées, le fil ouvert en haut (avant : fil à 0 px, impossible d'écrire) */ #controlcenter-content > div{ flex-direction:column !important; height:auto !important; min-height:0 !important } #controlcenter-content > div > div{ width:auto !important; flex:0 0 auto !important; max-height:45vh; border-left:0 !important; border-right:0 !important; border-bottom:1px solid var(--border) } #controlcenter-content > div > div:nth-child(2){ order:-1; height:calc(100vh - 190px); height:calc(100dvh - 190px); max-height:none } #controlcenter-content > div > div:nth-child(2):has(> div[style^="margin:auto"]){ display:none !important } /* bat display:flex écrit dans la balise */ #cc-input{ min-height:44px !important } /* B10 Sous-onglets (Paramètres, Fiscalité) : une rangée qui défile de côté */ div:has(> .param-tab), div:has(> .fiscal-tab){ flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; max-width:100% !important; scrollbar-width:none; -webkit-overflow-scrolling:touch } div:has(> .param-tab)::-webkit-scrollbar, div:has(> .fiscal-tab)::-webkit-scrollbar{ display:none } .param-tab, .fiscal-tab{ flex:0 0 auto !important; min-height:40px; white-space:nowrap } /* B11 Paramètres › Channel manager (cm-settings.js « 1fr 360px ») : la colonne ne pousse plus hors écran */ #param-channel-manager [style*="grid-template-columns:1fr 360px"]{ grid-template-columns:minmax(0,1fr) !important } #param-channel-manager [style*="grid-template-columns:1fr 360px"] > *{ min-width:0 } /* B12 Barres d'actions coupées (Inventaire, fiche Travaux, filtres Prestataires ménage) */ .toprow > div{ flex-wrap:wrap !important } #menage-prestataires div:has(> #prest-menage-search){ flex-wrap:wrap !important } #prest-menage-search{ width:100% !important; flex:1 1 100% } /* B13 Marketing › Trafic (mkt-trafic-dash.js, chantier Trafic) : KPI 2 par ligne, blocs empilés, courbe 180 px. Pas de sélecteur « collé » : .content est en overflow-x:hidden (styles.css ≤900) → position:sticky n'y colle pas ; la barre de période est donc pleine largeur, en haut, avec de grosses cibles. */ #tab-mkt-traffic .trf{ gap:12px } #tab-mkt-traffic .trf-tete{ padding:14px; flex-direction:column; align-items:stretch } #tab-mkt-traffic .trf-titre{ font-size:18px } #tab-mkt-traffic .trf-tete-a{ width:100% } #tab-mkt-traffic .trf-periodes{ flex:1 1 auto } #tab-mkt-traffic .trf-periodes button{ flex:1 1 0; min-height:40px } #tab-mkt-traffic .trf-rafraichir{ min-width:44px; min-height:40px } #tab-mkt-traffic .trf-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px } #tab-mkt-traffic .trf-kpi{ padding:12px 12px 10px } #tab-mkt-traffic .trf-kpi-l{ white-space:normal; line-height:1.25; min-height:2.5em } #tab-mkt-traffic .trf-kpi-vr{ flex-direction:column; align-items:stretch; gap:4px } #tab-mkt-traffic .trf-kpi-v{ font-size:22px } #tab-mkt-traffic .trf-spark{ flex:0 0 auto; width:100%; height:18px; margin:0 } #tab-mkt-traffic :is(.trf-duo,.trf-src,.trf-direct,.trf-logs){ grid-template-columns:minmax(0,1fr) } #tab-mkt-traffic .trf-boite, #tab-mkt-traffic .trf-live, #tab-mkt-traffic .trf-ia{ padding:14px } #tab-mkt-traffic .trf-live-n{ font-size:34px } #tab-mkt-traffic .trf-courbe{ height:180px } #tab-mkt-traffic .trf-bulle{ max-width:200px } #tab-mkt-traffic .trf-leg{ min-height:40px; padding:6px 12px } #tab-mkt-traffic .trf-src-l{ grid-template-columns:minmax(0,1fr) auto; row-gap:4px } #tab-mkt-traffic .trf-src-l .trf-rail{ grid-column:1/-1; order:3; height:6px } #tab-mkt-traffic .trf-pays{ grid-template-columns:minmax(0,1fr) auto; row-gap:4px } #tab-mkt-traffic .trf-pays .trf-rail{ grid-column:1/-1; order:3 } #tab-mkt-traffic .trf-hm{ gap:2px } #tab-mkt-traffic .trf-hm-c{ border-radius:2px; min-height:8px } #tab-mkt-traffic .trf-releves{ padding:0 12px } #tab-mkt-traffic .trf-releves > summary{ min-height:44px; padding:13px 0; line-height:1.4 } } @media (max-width:480px){ .grid2{ grid-template-columns:1fr } } /* ═══ C. ≤640 px : tableaux clés en cartes (ordinateur intact) ═══ */ @media (max-width:640px){ /* Tickets (colonnes : 1 #, 2 AVA, 3 titre, 4 logement, 5 type, 6 priorité, 7 agent, 8 statut, 9 créé, 10 modifié) */ #tab-tickets .tbl-wrap{ background:none; border:0; box-shadow:none } #tab-tickets thead{ display:none } #ticket-list{ display:flex; flex-direction:column; gap:8px } #ticket-list tr{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:12px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:12px } #ticket-list td{ display:block; padding:0 !important; border:0 !important; white-space:normal !important; background:none !important } #ticket-list td:nth-child(3){ order:-1; flex:1 1 100%; font-size:15px } #ticket-list td:nth-child(3) .ticket-title::after{ content:''; position:absolute; inset:0 } /* toute la carte ouvre le ticket */ #ticket-list td:nth-child(4){ flex:1 1 100% } #ticket-list td:nth-child(9), #ticket-list td:nth-child(10){ display:none } /* Réservations (cm-resas.js) : chaque ligne devient une carte — ordre 5 (voyageur) · 7 · 4 · 1-3 · 6/8/9 ; tri par défaut gardé */ #cm-resas-content table thead{ display:none } #cm-resas-content table, #cm-resas-content tbody{ display:block !important; overflow:visible !important } #cm-resas-content tbody tr{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:10px 12px; border-bottom:1px solid var(--border) } #cm-resas-content tbody td{ padding:0 !important; white-space:normal !important; border:0 } #cm-resas-content tbody td:nth-child(5){ order:1; flex:1 1 60% } #cm-resas-content tbody td:nth-child(7){ order:2; margin-left:auto } #cm-resas-content tbody td:nth-child(4){ order:3; flex:1 1 100%; color:var(--text2) } #cm-resas-content tbody td:nth-child(1), #cm-resas-content tbody td:nth-child(2), #cm-resas-content tbody td:nth-child(3){ order:4 } #cm-resas-content tbody td:nth-child(6), #cm-resas-content tbody td:nth-child(8), #cm-resas-content tbody td:nth-child(9){ order:5 } /* Contacts (cm-contacts.js) : même principe, numéro de téléphone agrandi */ #cm-contacts-content [style*="grid-template-columns:2fr 1fr 1fr"]{ grid-template-columns:1fr !important } #cm-contacts-content table thead{ display:none } #cm-contacts-content table, #cm-contacts-content tbody{ display:block !important } #cm-contacts-content tbody tr{ display:flex; flex-wrap:wrap; gap:4px 12px; padding:10px 12px; border-bottom:1px solid var(--border) } #cm-contacts-content tbody td{ padding:0 !important; white-space:normal !important } #cm-contacts-content tbody td:first-child{ flex:1 1 100% } #cm-contacts-content tbody td:nth-child(3) a{ display:inline-block; padding:6px 0; font-size:14px } #modal-cm-contact div[onclick^="cmContactsCloseDetail"]{ flex-wrap:wrap } /* Clés du propriétaire : table.ec-clefs → cartes, libellé lu dans data-label (posés par supervision.js, équipe E) */ #ec-content table.ec-clefs, #ec-content table.ec-clefs tbody, #ec-content table.ec-clefs tr{ display:block } #ec-content table.ec-clefs{ overflow:visible } #ec-content table.ec-clefs thead, #ec-content table.ec-clefs tr:has(> th){ display:none } #ec-content table.ec-clefs tr{ background:var(--bg2); border:1px solid var(--border); border-radius:12px; margin:0 0 10px; padding:6px 12px } #ec-content table.ec-clefs td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0 !important; white-space:normal !important; border-left:0 !important; text-align:right } #ec-content table.ec-clefs td[data-label]::before{ content:attr(data-label); flex:0 0 auto; font-size:12px; color:var(--text3); text-align:left } #ec-content table.ec-clefs td :is(select,input){ max-width:60% !important; width:60% !important } /* 📱 V5.002 (mobile) : Inventaire du propriétaire (supervision.js) — nom sur sa ligne, quantité et pastille dessous : plus de défilement sur le côté */ #ec-content table:has(button[onclick^="ecInvAjuster"]) tr{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between } #ec-content table:has(button[onclick^="ecInvAjuster"]) td:first-child{ flex:1 1 100%; padding-bottom:0 !important } #tp-comments .cf-meta{ flex-wrap:wrap; padding-right:80px } :is(#tab-channel-prix,#cm-stats-content,#ec-stats-host,#tab-channel-messages,#tab-channel-recap) :is(input[type=checkbox],input[type=radio]){ min-height:0 !important; padding:0 !important } #modal-swikly-lier [style*="grid-template-columns:1fr auto auto"]{ grid-template-columns:1fr auto !important } /* 📱 V5.004 Réglages des notifications (notifs.js renderNotifsReglages) : une carte par événement (avant : tableaux de 690-1240 px) */ table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]){ display:block; min-width:0 !important } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) thead{ display:none } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) tbody{ display:block } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) tr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 4px } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td{ display:block; padding:0 !important; min-width:0 !important; white-space:normal !important } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td:nth-child(2){ flex:1 1 calc(100% - 50px) } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td:nth-child(4)::before{ content:"📱 " } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td:nth-child(5)::before{ content:"✉️ " } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td:nth-child(3){ order:3; flex:1 1 100% } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td:nth-child(3) button{ min-height:32px; font-size:12px !important; margin:2px } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td:nth-child(6){ order:4; flex:1 1 100% } table:has(input[onchange^="notifSetCfg("][onchange*="','emails',"]) td:nth-child(6) input{ width:100% !important } } /* ═══ D. Doigt (tactile, ≤900) : zones à toucher ≥ 40-44 px ═══ */ @media (max-width:900px) and (pointer:coarse){ .btn{ min-height:44px !important } /* bat 38 px (styles.css) */ .btn-sm{ min-height:40px !important } .nav-item{ min-height:44px } .sidebar .nav-section-label.nav-collapsible{ min-height:44px; font-size:12px !important; padding:14px 12px 8px !important } /* bat 10 px */ .modal-close, .toast-close, .trello-col-btn{ min-width:44px; min-height:44px } #notifs-bell, #theme-toggle-btn{ width:40px !important; height:40px !important } /* 26×26 écrits dans la balise (index.html) */ #cm-recap-content span[onclick^="recapToggleCheck"]{ width:40px !important; height:40px !important } #cm-recap-content :is(span[onclick^="recapToggleMenage"],span[onclick^="openNewTicket"]){ min-height:40px; padding:8px 14px !important; font-size:13px !important } #cm-recap-content button[onclick^="recapToggleFilter"]{ min-height:40px; padding:8px 14px !important } #cm-recap-content :is(a[href^="tel:"],a[href^="mailto:"],a[href^="sms:"]){ min-height:40px; padding:8px 12px !important; font-size:13px !important } /* 📱 V5.002 (mobile) : Appeler / Écrire */ #cm-stats-content [style*="top:calc(100% + 6px);right:0"] label{ min-height:40px } #trello-card-comments-list button{ min-width:36px; min-height:36px } #trello-card-checklist-list input[type=checkbox]{ width:22px !important; height:22px !important } #submit-status-select{ width:44px !important } #mention-box [data-i]{ padding:11px 12px !important; font-size:15px } #modal-ec-parrainage button[title="Fermer"]{ min-width:44px; min-height:44px } /* 📱 V5.004 : la fenêtre est posée sur body, pas dans #tab-espaceclient */ .tk-edit-tactile:not([hidden]){ display:inline-flex !important } /* ✏ Modifier du ticket (créé par tickets.js, équipe C) : l'attribut hidden reste respecté */ :is(#cm-stats-content,#ec-stats-host) button[onclick^="cmStatsTelComparer"]{ min-height:40px } /* « ＋ Comparer » (cm-stats.js, équipe D) */ /* 📱 V5.004 : Idées (étiquettes, étoile) et crayon des cartes Travaux, trop petits pour le doigt */ #idees-tags-bar button{ min-height:36px; padding:6px 12px !important; font-size:13px !important } #idees-list button[title="Marquer comme prioritaire"]{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center } #tab-travaux button[onclick^="event.stopPropagation();editTrav"]{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center } } /* ═══ E. Sans survol (tactile, ≤900) : effets collés + aides clavier inutiles ═══ */ @media (max-width:900px) and (hover:none){ .btn:hover, .stat:hover, .trello-card:hover, .idee-card:hover{ transform:none } #ec-kpis .stat{ transform:none !important; box-shadow:none !important } .trello-add-form-hint, #tp-desc kbd{ display:none } } /* ═══ F. ≤900 px : barre du haut FIXE (☰ + titre + 🔔), créée par modules/mobile-barre.js ═══ La barre naît avec l'attribut hidden : sans cette règle (ordinateur, ou CSS absent) elle reste invisible. Position fixe (pas de sticky) → aucun overflow de styles.css touché. z-index 45 : sous la fiche ticket (50), la conversation voyageurs (120), le ☰ (100), le tiroir ouvert (170) et les fenêtres (200). */ @media (max-width:900px){ html.mbarre-on #mbarre{ display:flex; align-items:center; gap:8px; position:fixed; top:0; left:0; right:0; z-index:45; height:calc(60px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) calc(10px + env(safe-area-inset-right,0px)) 0 calc(64px + env(safe-area-inset-left,0px)); background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.25) } html.mbarre-on #mbarre-titre{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em } html.mbarre-on #mbarre-cloche{ position:relative; flex:0 0 auto; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--bg2); border:1px solid var(--border); color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent } html.mbarre-on #mbarre-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#ef4444; color:#fff; font-size:10px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg) } html.mbarre-on #mbarre-badge[hidden]{ display:none } /* ☰ centré dans la barre ; sa pastille passe sur la cloche */ html.mbarre-on .mobile-menu-btn{ top:calc(10px + env(safe-area-inset-top,0px)) !important } html.mbarre-on .mobile-menu-btn .mobile-menu-notifs-badge{ display:none !important } /* contenu décalé de la hauteur de la barre (le body porte déjà l'encoche) */ html.mbarre-on .content{ padding-top:68px !important } /* fenêtre des notifications sous la barre */ html.mbarre-on .notifs-popup{ top:calc(64px + env(safe-area-inset-top,0px)) !important; max-height:calc(100vh - 84px - env(safe-area-inset-top,0px)) !important; max-height:calc(100dvh - 84px - env(safe-area-inset-top,0px)) !important } } /* ═══ G. Appli installée au téléphone (écran d'accueil) : barre d'état fondue → marges de sécurité partout ═══ */ @media (max-width:900px) and (display-mode:standalone){ .sidebar{ padding-left:env(safe-area-inset-left,0px) } /* logo hors de l'encoche en paysage (le haut est compté en A2) */ #announcement-banner{ padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px) } }