/* ─── Application installable et notifications — interface de gestion (lot AM) ────────────── Chargé sur TOUTES les pages de gestion, APRÈS leurs propres styles (dernier élément du bloc commun du ) : c'est aussi l'endroit prévu pour les règles de la mise en page mobile. Crochets posés par /js/app-mobile.js : body.app-installee application lancée depuis son icône (display-mode: standalone) ; body.appareil-ios iPhone / iPad ; body.appareil-tactile écran tactile (téléphone, tablette) ; #am-menu-app entrée « Application et notifications » du menu « Mon Compte » ; #am-voile .am-panneau panneau ouvert par cette entrée ; [data-app-mobile="installer"] bouton d'installation de la page de connexion. Classes des réglages : am-section, am-etat (am-etat-actif, -inactif, -bloque, -ios-installer, -non-supporte, -indisponible), am-aide, am-actions, am-bouton (am-bouton-principal), am-message. ─────────────────────────────────────────────────────────────────────────────────────────── */ /* Panneau (fenêtre par-dessus la page) */ .am-voile { position: fixed; inset: 0; z-index: 3000; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; } .am-voile[hidden] { display: none; } .am-panneau { background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; color: var(--text-primary, #1a1a2e); } .am-panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--panel-border, #dde0e4); background: var(--panel-header-bg, #f5f7f9); border-radius: 8px 8px 0 0; } .am-panneau-tete h2 { font-size: 1rem; font-weight: 600; margin: 0; } .am-fermer { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; min-width: 36px; min-height: 36px; color: var(--text-secondary, #555e6d); } .am-panneau-corps { padding: 4px 16px 12px; } /* Réglages */ .am-section { padding: 12px 0; border-bottom: 1px solid #eef0f3; } .am-section:last-of-type { border-bottom: 0; } .am-section h3 { font-size: 0.9rem; font-weight: 600; margin: 0 0 6px; } .am-etat, .am-aide { font-size: 0.88rem; line-height: 1.45; margin: 0 0 8px; color: var(--text-secondary, #555e6d); } .am-etat-actif { color: var(--success, #16a34a); } .am-etat-bloque { color: var(--danger, #dc2626); } .am-aide[hidden] { display: none; } .am-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .am-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border-radius: var(--radius, 4px); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: #f8f9fa; color: var(--text-secondary, #555e6d); border: 1px solid var(--border, #d1d5db); } .am-bouton:hover { background: #e9ecef; } .am-bouton-principal { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent-hover, #1d4ed8); } .am-bouton-principal:hover { background: var(--accent-hover, #1d4ed8); } .am-bouton:disabled { opacity: 0.6; cursor: wait; } .am-message { font-size: 0.85rem; margin: 10px 0 0; color: var(--text-primary, #1a1a2e); } .am-message:empty { display: none; } /* Page de connexion */ [data-app-mobile="installer"] { margin-top: 16px; text-align: center; } [data-app-mobile="installer"][hidden] { display: none; } [data-app-mobile="installer"] .am-bouton { width: 100%; min-height: 44px; } [data-app-mobile="installer"] .am-aide { margin-top: 8px; text-align: left; } /* Zones sûres, à TOUTES les largeurs. Les pages déclarent viewport-fit=cover : un iPhone à encoche tenu à l'horizontale fait 812 à 932 px de large — il reçoit la mise en page d'ordinateur — et le logo, le menu et le début des champs passaient sous l'encoche, « Mon Compte » dans le coin arrondi. Seulement des marges env(safe-area-inset-*), qui valent 0 sur un écran sans encoche : rien ne change sur ordinateur (ni la barre du haut ni la page n'avaient de marge sur ces côtés). La barre est fixe : elle a les siennes. */ .topbar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } body:has(> .topbar) { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* ─── Mise en page sur téléphone (lot AM, partie 2) ────────────────────────────────────────── Tout est sous 768 px (@media ci-dessous) : au-dessus, l'interface de gestion reste exactement comme avant. Visés d'abord, les parcours du revendeur : tableau de bord, liste et fiche de ses clients (déménagement, modem), nouvelle commande (manage-order), ses commandes, ses factures, « Mes prix » — les règles sont communes, donc le personnel en profite aussi. Posés par /js/app-mobile.js (section 5) : .am-menu-bouton bouton ☰, premier élément de .topbar ; body.am-menu-ouvert menu principal (.topbar-nav) ouvert en panneau sous la barre ; .am-deplie menu déroulant ouvert au doigt (au survol sur ordinateur, inchangé) ; .am-cadre-tableau cadre qui défile à l'horizontale, posé autour des tableaux sur téléphone. Les « !important » ne servent qu'à passer devant un style écrit dans la page (style="…"). ─────────────────────────────────────────────────────────────────────────────────────────── */ /* Bouton ajouté par le script : jamais visible sur ordinateur. */ .am-menu-bouton { display: none; } @media (max-width: 767.98px) { :root { --topbar-h: 48px; } html { -webkit-text-size-adjust: 100%; } body:has(> .topbar) { padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); } body.am-menu-ouvert { overflow: hidden; } /* ── Barre du haut : ☰, logo, notifications, « Mon Compte » (icône seule) ── */ .topbar { height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); } .am-menu-bouton { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } .am-menu-bouton[aria-expanded="true"] { background: var(--topbar-active); } .topbar-logo { min-width: 0; padding: 0 10px; } .topbar-right { padding-right: 4px; gap: 0; align-items: stretch; } .topbar-icon-btn { width: 44px; height: 44px; } .topbar-right .topbar-nav-item > button { font-size: 0; gap: 0; padding: 0 12px; min-width: 44px; } .topbar-right .topbar-nav-item > button svg { width: 22px !important; height: 22px !important; } .topbar-right .topbar-nav-item > button .chevron { display: none; } /* ── Menu principal : panneau plein écran sous la barre, ouvert par ☰ ── */ .topbar-nav { display: none; } body.am-menu-ouvert .topbar-nav { display: flex; flex-direction: column; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); background: var(--topbar-bg); border-top: 1px solid rgba(255, 255, 255, 0.12); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 1001; } .topbar-nav .topbar-nav-item { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .topbar-nav .topbar-nav-item > a, .topbar-nav .topbar-nav-item > button { width: 100%; height: auto; min-height: 52px; gap: 10px; justify-content: flex-start; padding: 0 max(18px, env(safe-area-inset-left, 0px)); font-size: 1rem; text-align: left; } .topbar-nav .topbar-nav-item > button .chevron { margin-left: auto; width: 18px; height: 18px; } /* Menus déroulants : au doigt (classe am-deplie), plus au survol — un doigt « survole » au hasard sur un écran tactile. */ .topbar-nav-item:hover > .topbar-dropdown, .has-submenu:hover > .topbar-dropdown, .topbar-notif:hover > .topbar-dropdown { display: none; } .topbar-nav-item:hover .chevron { transform: none; } .topbar-nav-item.am-deplie > .topbar-dropdown, .has-submenu.am-deplie > .topbar-dropdown, .topbar-notif.am-deplie > .topbar-dropdown { display: block; } .topbar-nav-item.am-deplie > button .chevron { transform: rotate(180deg); } /* Dans le panneau, les sous-menus s'ouvrent sous leur titre (en accordéon) */ .topbar-nav .topbar-dropdown { position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; } .topbar-nav .topbar-dropdown a, .topbar-nav .topbar-dropdown .dropdown-item { min-height: 48px; padding: 12px 20px 12px 46px; font-size: 0.95rem; border-top: 1px solid #eef0f3; } .topbar-nav .has-submenu > .topbar-dropdown a { padding-left: 62px; background: #f5f7fa; } .topbar-nav .has-submenu > .dropdown-item svg { transform: rotate(90deg); transition: transform var(--transition); } .topbar-nav .has-submenu.am-deplie > .dropdown-item svg { transform: rotate(-90deg); } /* Menus de droite (notifications, « Mon Compte ») : sous la barre, dans l'écran */ .topbar-right .topbar-dropdown a { min-height: 48px; padding: 12px 16px; justify-content: flex-start; gap: 8px; } .topbar-notif > .topbar-dropdown { position: fixed; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); left: 8px !important; right: 8px !important; width: auto !important; } /* ── Contenu ── */ /* Côtés : les zones sûres sont déjà sur (plus haut, toutes largeurs). */ .main-content { padding: 12px 12px max(16px, env(safe-area-inset-bottom, 0px)); } .page-header h1 { font-size: 1.25rem; } .panel-header, .dash-panel-hdr, .modal-footer, .panel-footer { flex-wrap: wrap; gap: 8px; } .panel-body { padding: 12px; } /* Tableaux : ils défilent dans leur cadre, jamais la page */ .am-cadre-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table-wrap { -webkit-overflow-scrolling: touch; } /* Champs dans un tableau (lignes d'une facture…) : jamais écrasés au point d'être illisibles. */ .am-cadre-tableau td input[type="text"], .am-cadre-tableau td input[type="number"] { min-width: 72px; } .am-cadre-tableau td textarea { min-width: 150px; } /* Champs : texte à 16 px (sinon l'iPhone agrandit la page à chaque champ touché) et assez hauts pour le doigt. */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea { font-size: 16px !important; } /* Cibles au doigt : 44 px au moins (boutons, champs, listes déroulantes — aussi celles sans classe, comme la pagination —, boutons du panneau « Application et notifications »). */ .form-input, .filter-select, .search-box, select { min-height: 44px; } .btn, .btn-sm { min-height: 44px; } .am-bouton { min-height: 44px; } .am-fermer { min-width: 44px; min-height: 44px; } .filters-bar { padding: 10px 12px; } /* Recherche (clients, transactions) : le champ occupe toute la hauteur de son cadre — toucher le cadre, c'est toucher le champ. */ .search-box { min-width: 0; flex: 1 1 100%; padding-top: 0; padding-bottom: 0; } .search-box input { align-self: stretch; min-height: 42px; } /* Fiches et formulaires empilés. Grilles « libellé | champ | libellé | champ » : une paire par rangée ; grilles écrites dans la page (style="grid-template-columns…") : une colonne. */ .whmcs-form-grid { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) !important; } .whmcs-form-grid > .wf-input { border-right: none; } .whmcs-form-grid > [style*="span 3"] { grid-column: auto !important; } .wf-label { padding: 8px 10px; } /* Paire vide (libellé et champ vides, qui ne servent qu'à caler les colonnes) : cachée. */ .whmcs-form-grid > .wf-label:empty:has(+ .wf-input:empty), .whmcs-form-grid > .wf-label:empty + .wf-input:empty { display: none; } /* Fiche client, onglet « Profil » : seul le bloc identité | adresse (les 7 premières rangées, 28 cases, jusqu'à « Numéro de téléphone ») se lit colonne par colonne — identité, puis adresse et téléphone — au lieu d'entremêler les deux. La suite (réglages du compte, SN et MAC du modem, VL et Req VDN, PBX, Mac TV, champs personnalisés) garde l'ordre de la page : ses paires vont ensemble. Les champs personnalisés sont dans #custom-fields-grid (display:contents). */ #client-form > .whmcs-form-grid > :nth-child(4n+3):nth-child(-n+28), #client-form > .whmcs-form-grid > :nth-child(4n+4):nth-child(-n+28) { order: 1; } #client-form > .whmcs-form-grid > :nth-child(n+29), #client-form #custom-fields-grid > * { order: 2; } .wf-input { padding: 8px 10px; flex-wrap: wrap; gap: 6px; } /* Un champ suivi d'un bouton (« Demander un déménagement », « Générer mot de passe ») : le bouton passe dessous plutôt que d'écraser le champ. */ .wf-input > .form-input { flex: 1 1 140px !important; } .main-content [style*="grid-template-columns"]:not(.whmcs-form-grid), #mo-main-content [style*="grid-template-columns"]:not(.whmcs-form-grid), .modal [style*="grid-template-columns"]:not(.whmcs-form-grid) { grid-template-columns: minmax(0, 1fr) !important; } /* Grilles de recherche des listes (factures, commandes…) et de la fiche client-profile.html */ .inv-search-grid, .data-grid { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 8px 10px; } .inv-search-grid label { padding-right: 0; } .date-input-wrap { flex-wrap: wrap; } /* Rangées écrites dans la page (style="display:flex…") : elles passent à la ligne plutôt que d'élargir la page. Sans effet sur une rangée qui tient dans l'écran. */ :is(.main-content, #mo-main-content, .modal) :is([style*="display:flex"], [style*="display: flex"]):not([style*="nowrap"]):not([style*="column"]) { flex-wrap: wrap; } /* Boutons alignés sous la colonne des champs (fiche client : 185 px ; commandes : 170 px) */ .main-content [style*="0 0 185px"], .main-content [style*="padding-left:170px"] { padding-left: 0 !important; } .wf-input label[style*="nowrap"] { white-space: normal !important; } #c-never-suspend-label { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; } .wf-reglages-row { flex-direction: column; gap: 6px; padding: 12px; } .wf-reglages-label { width: auto; text-align: left; } .wf-toggle-row { flex-wrap: wrap; gap: 10px 20px; } .settings-grid, .profile-summary-grid, .ptab-content, .pbx-blocs { grid-template-columns: minmax(0, 1fr); } .profile-alerts { flex-wrap: wrap; justify-content: flex-start !important; } .profile-alerts > div { flex-wrap: wrap; gap: 6px 16px !important; } /* Onglets de la fiche client : une seule rangée qui défile au doigt (au lieu de trois rangées). Le trait sous les onglets passe en ombre intérieure : l'onglet actif le masque, comme avant. */ .profile-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 0 !important; box-shadow: inset 0 -1px 0 var(--panel-border); } .profile-tabs::-webkit-scrollbar { display: none; } .profile-tab { flex: 0 0 auto; bottom: 0; margin-bottom: 1px; min-height: 44px; display: flex; align-items: center; } .profile-tab.active { margin-bottom: 0; } .nav-tabs { flex-wrap: wrap; } /* Tableau de bord : tuiles deux par rangée, panneaux l'un sous l'autre */ .whmcs-kpi-row { grid-template-columns: 1fr 1fr; } .whmcs-kpi { padding: 12px 10px; gap: 10px; border-bottom: 1px solid var(--panel-border); } .whmcs-kpi:nth-child(2n) { border-right: none; } .whmcs-kpi-num { font-size: 1.5rem; } .whmcs-kpi-icon { width: 34px; height: 34px; } .kpi-popover { min-width: 0; width: min(290px, calc(100vw - 40px)); } .whmcs-kpi[data-kpi]:nth-child(2n) .kpi-popover { left: auto; right: 8px; } .dash-grid-2 { grid-template-columns: minmax(0, 1fr); margin-bottom: 15px; } /* Fenêtres : presque plein écran ; panneaux latéraux (déménagement, modem) plein écran */ .modal-overlay { padding: 8px; } .modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } .modal-body { padding: 12px; } .modal-close { width: 44px; height: 44px; font-size: 1rem; } .modal-overlay.panneau-lateral { padding: 0; } .modal-overlay.panneau-lateral .modal { max-width: none; max-height: none; height: 100%; } .am-voile { padding: 8px; } /* Facture vue par le personnel ou le revendeur (invoice.html) : détails, puis état et actions */ #inv-tab-summary { flex-direction: column; gap: 12px !important; } #inv-tab-summary > div { flex: none !important; width: 100%; } /* Page de connexion (login.html) : carte avec marges */ body:has(> .login-container) { padding: 16px max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); } .login-container { padding: 24px 20px; } .btn-login { min-height: 44px; } /* Commande (manage-order.html) : fiche en une colonne, demande du revendeur empilée */ #mo-main-content { min-width: 0; } /* élément flex : sans ceci, le tableau des articles élargit la page */ #mo-main-content .page-title { margin: 12px; font-size: 1.3rem; } #mo-main-content > div[style*="margin:0 20px"] { margin-left: 12px !important; margin-right: 12px !important; padding: 14px !important; } #mo-main-content .order-details-grid { grid-template-columns: minmax(0, 1fr); margin: 0 12px 16px; } #mo-main-content .od-col { border-right: none; border-bottom: 1px solid #ddd; } #mo-main-content .od-col:last-child { border-bottom: none; } #mo-main-content .od-label { width: 38%; } #mo-main-content .od-value { width: 62%; overflow-wrap: anywhere; } #mo-main-content .section-title { margin: 0 12px 10px; } #mo-main-content div[style*="margin: 0 20px"] { margin-left: 12px !important; margin-right: 12px !important; } #mo-main-content table.whmcs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } #mo-main-content .actions-row { flex-wrap: wrap; margin: 16px 12px; } #mo-main-content .btn-whmcs { min-height: 44px; padding: 8px 14px; } #mo-main-content div:has(> #new-order-plan), #new-order-modem-row { flex-wrap: wrap; margin-left: 12px !important; margin-right: 12px !important; } #new-order-plan { flex: 1 1 100% !important; max-width: none !important; } /* Pied de page fixe « Copyright WHMCS » : dans le flux sur téléphone, il cachait les boutons. */ body > div[style*="position: fixed"][style*="bottom: 0"] { position: static !important; flex-wrap: wrap; gap: 4px 12px; } }