/* ============================================================================ MOBILE — téléphones (moins de 768 px de large, ou tactile en paysage) ---------------------------------------------------------------------------- Chargé en dernier, avec l'attribut media du : sur un ordinateur ce fichier n'est jamais appliqué. Le bloc « RESPONSIVE MOBILE » d'app.css (27/07/2026 : burger, tiroir plein écran, tables à défilement) reste la base ; ce fichier reprend ce qui a cassé depuis. Audit du 26/09/2026 : docs/MOBILE.md. Règles de la maison, à tenir ici aussi : - ne jamais changer l'ordre des colonnes d'un tableau ; - les tableaux larges défilent à l'horizontale dans leur carte, jamais la page ; - pas de vert foncé #15803D sur un contrôle. ============================================================================ */ @media (max-width: 767px), ((pointer: coarse) and (max-height: 500px)) { /* ---- Coquille ---------------------------------------------------------- */ /* Ombre du volet fermé : elle débordait sur le bord droit de toutes les vues. */ .drawer:not(.open) { box-shadow: none; } .dsh-drw:not(.open) { box-shadow: none; } /* Menu latéral : « Installer l'extension » et « Installer le MCP » ne servent que sur ordinateur. Sans eux, la liste des vues tient sur l'écran. */ #settingsBtn, #mcpBtn { display: none !important; } /* La liste des vues défile sans barre : un fondu en bas dit qu'il y a une suite. */ .app .sidebar .nav { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 18px; } /* Recherche globale : la liste des résultats faisait 560 px de large. Pleine largeur, catégories en rangée défilante au-dessus des résultats. */ #gsBox { position: fixed !important; top: 60px !important; left: 8px !important; right: 8px !important; min-width: 0 !important; width: auto !important; max-height: calc(100dvh - 72px) !important; } #gsBox > div { flex-direction: column; max-height: calc(100dvh - 74px) !important; } #gsBox > div > div:first-child { flex: none !important; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-right: 0 !important; border-bottom: 1px solid var(--line); } #gsBox .gs-cat { flex: none; white-space: nowrap; } #gsBox .gs-cat > span:nth-child(2) { flex: none !important; } #gsBox > div > div:last-child { flex: 1 1 auto !important; min-height: 0; } /* Hauteur d'écran : 100vh compte l'écran SANS la barre d'adresse (Safari iOS, Chrome Android). Kama ne fait pas défiler la page, la barre ne se replie donc jamais : le bas de l'app et des volets restait caché dessous. 100dvh = la hauteur réellement visible (ignoré par les navigateurs trop anciens, qui gardent 100vh). */ .app { height: 100dvh; } .drawer, .drawer.lg, .drawer.xl { height: 100dvh; } /* Safari iOS zoome sur tout champ écrit en moins de 16 px, et la plupart des champs de Kama portent leur taille en style inline (12,5 à 14 px) : la règle « 16 px » d'app.css ne les atteignait pas. iOS seulement (@supports ci-dessous), Android ne zoome pas. */ @supports (-webkit-touch-callout: none) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select { font-size: 16px !important; } #affTitre { font-size: 18px !important; } #amSubject { font-size: 17px !important; } /* L'appui long ouvre le menu du clic droit (frontend/shell/appui-long.mts, 28/09) : pas de bulle « Enregistrer l'image » ni d'aperçu de lien par-dessus, là où un menu maison répond. */ .hf-l, .lf[data-lf], .proc-c, .proc-aff, .afc-card, [data-conssel], .cons-entete, [data-consecoute], [data-orgtag], tr[data-cand] { -webkit-touch-callout: none; } } /* Actions qui n'apparaissaient qu'au survol : visibles, atténuées, au doigt. */ @media (hover: none) { .pop .canalrow .canaledit, .popsec .srcrow .srcout, .pop.srcpop .srcrow .srcout, .dsh .nw .acts, .dsh-menu button .srcout { opacity: .6; } } /* ---- Onglets : à la ligne plutôt que coupés ---------------------------- */ /* Dashboard : l'onglet actif (Avis Google, Mon espace…) sortait de l'écran. */ .dsh .dsh-tabs { flex-wrap: wrap; overflow: visible; position: static; top: auto; padding-top: 0; margin-top: 0; row-gap: 2px; } .dsh-tabs button { padding: 8px 10px; font-size: 13px; } /* Playbook : « Newsletters » passait sous le bord droit. */ .pb-tabs { flex-wrap: wrap; row-gap: 2px; } .pb-tabs .pb-sep { display: none; } /* Statistiques : Tableau de bord / Journal des appels / Graphiques / Individuel. */ .content div:has(> .stats-tab) { display: flex !important; flex-wrap: wrap; width: 100%; box-sizing: border-box; } .content .stats-tab { flex: 1 1 auto; justify-content: center; padding: 7px 10px !important; } /* ---- Dashboard --------------------------------------------------------- */ /* Une colonne qui peut rétrécir : les tableaux défilent dans leur panneau. */ .dsh-row, .dsh-row.c2 { grid-template-columns: minmax(0, 1fr) !important; } .dsh .dshpanel { min-width: 0; } .dsh .dshpanel > .body:not(.scrollx) { overflow-x: auto; } /* ---- Tableaux de bord « Performance » (Prospects) ---------------------- */ /* Entonnoir et volume hebdo imposaient 480 à 500 px de large. */ .content div[style*="min-width:500px"], .content div[style*="min-width:480px"] { min-width: 0 !important; flex-basis: 100% !important; } /* ---- Playbook ---------------------------------------------------------- */ /* Une colonne qui peut rétrécir (les Newsletters faisaient 524 px de large), et le menu de gauche ne colle plus : empilé au-dessus, il recouvrait le texte. */ .pb-wrap { grid-template-columns: minmax(0, 1fr) !important; } .pb-wrap > * { min-width: 0; } .pb-rail { position: static; } .pb-nl-panel { padding: 14px 14px 18px; } /* ---- Statistiques ------------------------------------------------------ */ /* « Taux de succès du pipeline » : 7 barres de 52 px minimum ne tiennent pas. */ .content div[style*="min-width:52px"] { min-width: 0 !important; } /* ---- Admin → Comptes rendus -------------------------------------------- */ /* Cinq chiffres côte à côte (coût sur 30 jours…) : deux par ligne. */ .content div[style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* ---- Kanban Affaires et Process ---------------------------------------- */ /* Colonnes à 168 px : titres un mot par ligne, compteurs hors de la carte. Une colonne à la largeur de l'écran, on glisse de l'une à l'autre. */ .content div:has(> .aff-col) { scroll-snap-type: x mandatory; scroll-padding-left: 10px; } .aff-col { flex: 0 0 min(84vw, 340px) !important; min-width: 0 !important; scroll-snap-align: start; } #procBoard { scroll-snap-type: x mandatory; scroll-padding-left: 10px; } #procBoard > .proc-col { flex: 0 0 min(84vw, 340px) !important; min-width: 0 !important; scroll-snap-align: start; } /* ---- Calendrier des activités (Mois) ----------------------------------- */ /* 7 colonnes qui tiennent dans l'écran ; chaque pastille se tronque. */ .content div[style*="grid-template-columns:repeat(7,1fr)"] { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 2px !important; } .content div[style*="grid-template-columns:repeat(7,1fr)"] > div { min-width: 0; padding-left: 2px !important; padding-right: 2px !important; } /* En-tête du calendrier : « Lecture seule — par échéance » poussait la page à droite. */ .content div:has(> #actCalPrev) { flex-wrap: wrap; row-gap: 6px; } /* ---- Listes : barres d'outils ------------------------------------------ */ /* Candidats sélectionnés : la barre flottante (« Ajouter à la pré-liste ») faisait 470 px et sortait des deux côtés. */ #candBulkBar { left: 8px !important; right: 8px !important; transform: none !important; flex-wrap: wrap; justify-content: center; white-space: normal !important; row-gap: 6px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } /* Candidats : le champ de recherche était réduit à 86 px par « Chercher au sens ». */ .content .cand-fld { flex: 1 1 100%; } /* Candidats : la barre ne rétrécit plus sous le tableau (le bouton « doublons » passait sous la carte). */ .content.cand-flush > :not(.card) { flex-shrink: 0; } /* Prospects : actions groupées (Pousser, Récupérer les textes…) à la ligne, au lieu d'une rangée qui défile hors de l'écran. */ .content div:has(> #bulkStatus) { flex-wrap: wrap !important; overflow: visible !important; row-gap: 6px; } /* Avertissement « Cette annonce n'a pas de texte » : « Récupérer le texte » sortait de la fenêtre. */ div:has(> div > #sensAvertGet), div:has(> #sensAvertGet) { flex-wrap: wrap; row-gap: 10px; } /* Aide clavier (↑↓ choisir · Entrée ajouter…) : sans objet au doigt, et elle débordait de la fenêtre « Ajouter à la pré-liste ». */ #affPickHint { display: none; } /* Fenêtre « Programmer une activité » : une association par ligne (« Associer une affa… » était tronqué à deux par ligne). */ .amod .fld[style*="min-width:170px"] { flex-basis: 100% !important; } /* ---- Résumés d'appel (Consigner) --------------------------------------- */ /* La liste prenait 340 px et le compte rendu tenait dans une bande de 17 px : impossible de lire ou d'enregistrer. Liste en haut (elle défile), compte rendu dessous, en pleine largeur ; la page défile. */ @media (max-width: 767px) { #consSplit { flex-direction: column; align-items: stretch !important; gap: 10px !important; } #consSplit > #consListe { flex: none !important; max-width: none !important; width: 100%; height: auto !important; max-height: 34dvh; } #consSplit > #consDetail { flex: none !important; width: 100%; height: auto !important; overflow: visible !important; } } /* En paysage, les deux volets tiennent côte à côte : la liste se resserre. */ @media (min-width: 768px) { #consSplit > #consListe { flex-basis: 300px !important; max-width: 300px !important; } } /* En-tête du compte rendu : le nom tenait dans 24 px, « Enregistrer » le recouvrait. Nom en pleine largeur, les deux boutons dessous, côte à côte. */ .cons-entete { flex-wrap: wrap; row-gap: 8px; } .cons-entete > div { flex: 1 1 calc(100% - 40px) !important; } .cons-entete > button { flex: 1 1 auto !important; justify-content: center; } /* ---- Volets (fiches) ---------------------------------------------------- */ /* Contacts d'un prospect (volet annonce) : les puces TO PUSH / Principal / Secondaire mangeaient le nom (« Fanny Le… »). Nom en pleine ligne, puces dessous. */ .annleadrow { flex-wrap: wrap; row-gap: 4px; } .annleadrow > div:first-of-type { flex: 1 1 calc(100% - 40px) !important; } .annleadrow > div:last-child { margin-left: 40px; } /* Composeur d'activité : échéance, heure et recruteur sur une ligne de 412 px. Échéance et heure côte à côte, le recruteur en dessous. */ #drawer div[style*="flex-wrap:nowrap"]:has(> .fld.fldtip), .amod div[style*="flex-wrap:nowrap"]:has(> .fld.fldtip) { flex-wrap: wrap !important; width: 100%; } #drawer div[style*="flex-wrap:nowrap"]:has(> .fld.fldtip) > .fld.fldtip, .amod div[style*="flex-wrap:nowrap"]:has(> .fld.fldtip) > .fld.fldtip { flex: 1 1 130px !important; min-width: 0; } /* Volet Candidat : le métier et la ville tenaient dans 140 px (4 lignes) à côté du recruteur. Nom, métier, ville en pleine ligne ; le recruteur dessous. */ #drawer .drawer-head-row:has(> #kOwnerBox) { flex-wrap: wrap; row-gap: 6px; } #drawer .drawer-head-row:has(> #kOwnerBox) > div:first-child { flex: 1 1 calc(100% - 84px); order: 0; } #drawer .drawer-head-row:has(> #kOwnerBox) > div:has(> #kMenuBtn) { order: 1; margin-left: 6px !important; margin-right: 8px !important; } #drawer .drawer-head-row:has(> #kOwnerBox) > #kClose { order: 2; } #drawer .drawer-head-row:has(> #kOwnerBox) > #kOwnerBox { order: 3; margin-left: 63px !important; margin-top: 0 !important; } /* Volet Affaire : l'en-tête tenait sur une ligne de 612 px (titre réduit à 3 lettres, compteurs et avatar hors écran). Titre, menu et croix en haut, le reste en dessous. */ #drawer div:has(> span > span > #affTitre) { flex-wrap: wrap; row-gap: 10px; } #drawer div:has(> span > span > #affTitre) > span:has(#affTitre) { order: 0; flex: 1 1 0 !important; min-width: 0; } #drawer div:has(> span > span > #affTitre) > span:has(#affTitre) > span { display: grid !important; width: 100%; } #drawer div:has(> span > span > #affTitre) > div:has(> #affMenuBtn) { order: 1; } #drawer div:has(> span > span > #affTitre) > #affClose { order: 2; } #drawer div:has(> span > span > #affTitre) > span:empty { display: none; } #drawer div:has(> span > span > #affTitre) > span:has(> .aff-kanban) { order: 3; margin-bottom: 32px; } #drawer div:has(> span > span > #affTitre) > span:has(#affOwnerBox) { order: 4; } #drawer div:has(> span > span > #affTitre) > span:has(> #affWin) { order: 5; margin-bottom: 27px; } /* Titre long (37 lettres en capitales, 446 px) : son double invisible, qui donne sa largeur au champ, poussait le volet de 80 px vers la droite, et le volet glissait de côté. La colonne rétrécit, le double est coupé, le titre finit par « … » tant qu'on ne l'édite pas. */ #drawer div:has(> span > span > #affTitre) > span:has(#affTitre) > span { grid-template-columns: minmax(0, 1fr); overflow: hidden; } #drawer #affTitre { text-overflow: ellipsis; } /* Historique des volets à plusieurs (contact, affaire, organisation, annonce ; frontend/fiche/historique-rendu.mts), 27/09 : une ligne d'appel « heure · icône · libellé · personne · Consigner · durée · écoute · avatar » faisait 342 px dans 320 ; le libellé tombait à rien, l'avatar sortait du volet. Sur une ligne qui nomme quelqu'un, le bouton garde son crayon seul (« Consigner » reste son nom pour un lecteur d'écran) ; le nom rétrécit avec le libellé. Le module ajoute son style après ce fichier : d'où le « .hf » en tête. */ .hf .hf-l { gap: 6px; } .hf .hf-qui { display: block; flex: 0 1 auto; min-width: 0; } .hf .hf-qui::before { display: inline-block; margin-right: 5px; vertical-align: 1px; } .hf .hf-l:has(> .hf-qui) > .hf-cta { gap: 0; padding: 4px 7px; font-size: 0; } /* Le détail d'une ligne partait à 70 px du bord : un groupe ouvert (« 2 appels ») laissait 256 px à ses lignes (« Ap… • … »), un compte rendu 250 px. 28 px. */ .hf .hf-det { margin-left: 28px; } .hf .hf-det.grp .hf-det { margin-left: 16px; } /* ---- Admin → Utilisateurs & rôles --------------------------------------- */ /* Identité sur la première ligne, les boutons dessous. */ .reccard { flex-wrap: wrap; row-gap: 8px; } .reccard > .ava + div { flex: 1 1 calc(100% - 50px) !important; } .rhead { flex-wrap: wrap; row-gap: 6px; } /* Invitation : email, rôle, puis « Ajouter » à la ligne s'il le faut. */ #adminBody div:has(> #admAdd) { flex-wrap: wrap; } #adminBody div:has(> #admAdd) > input { flex: 1 1 100% !important; min-width: 0 !important; } }