/* ─── Application installable et notifications — espace client (lot AM) ───────────────────── Chargé sur TOUTES les pages du portail, 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 /client/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) ; html[data-app-marque] marque posée : « club » (client direct) ou « revendeur » (l'application porte le nom du revendeur) ; absent : page neutre (connexion) ; [data-app-mobile="reglages"] réglages (profil, dans #app-mobile-reglages) ; [data-app-mobile="banniere"] bannière du tableau de bord (#app-mobile-banniere) ; [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, am-banniere-texte. ─────────────────────────────────────────────────────────────────────────────────────────── */ [data-app-mobile][hidden], [data-app-mobile-cadre][hidden] { display: none; } /* Réglages */ .am-section { padding: 12px 0; border-bottom: 1px solid var(--border-color, #e5e5e5); } .am-section:first-child { padding-top: 0; } .am-section:last-of-type { border-bottom: 0; } .am-section h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--text-color, #333); } .am-etat, .am-aide { font-size: 14px; line-height: 1.5; margin: 0 0 8px; color: var(--text-muted, #777); } .am-etat-actif { color: var(--success, #5cb85c); } .am-etat-bloque { color: var(--danger, #d9534f); } .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: 40px; padding: 8px 16px; border-radius: 4px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; color: var(--text-color, #333); border: 1px solid #ccc; } .am-bouton:hover { background: #f2f2f2; } .am-bouton-principal { background: var(--primary, #0f4a6b); color: #fff; border-color: var(--primary-hover, #0c3954); } .am-bouton-principal:hover { background: var(--primary-hover, #0c3954); } .am-bouton:disabled { opacity: 0.6; cursor: wait; } .am-message { font-size: 14px; margin: 10px 0 0; color: var(--text-color, #333); } .am-message:empty { display: none; } /* Bannière du tableau de bord */ .am-banniere { background: #eaf4fb; border: 1px solid #b6d7ec; border-left: 4px solid var(--secondary, #1783c6); border-radius: 4px; padding: 12px 14px; margin-bottom: 20px; } .am-banniere-texte { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text-color, #333); } /* Page de connexion */ [data-app-mobile="installer"] { margin-top: 18px; text-align: center; } [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 (812 à 932 px, mise en page d'ordinateur) mettait le bord du contenu sous l'encoche. Seulement des marges env(safe-area-inset-*), qui valent 0 sur un écran sans encoche : rien ne change sur ordinateur (.container et .page-container n'ont pas de marge intérieure sur les côtés ; la facture garde ses 20 px). */ .container, .page-container { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } body:has(> .invoice-container) { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, 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, le portail reste exactement comme avant. Pages visées : les 17 pages de /client/, et invoice-client.html / gocardless-return.html, qui chargent ce fichier. Seuls ajouts au balisage : .am-empiler rangée en ligne (style « display:flex » écrit dans la page) à empiler ; table.am-cartes tableau affiché en cartes (une par ligne, l'intitulé de la colonne devant chaque valeur — data-etiquette, posé par /client/js/app-mobile.js) ; .am-defile cadre qui défile à l'horizontale autour d'un tableau trop large ; et, posés par /client/js/app-mobile.js : le bouton « ☰ Menu » (.am-bouton-menu) devant la barre latérale, avec .am-repliable sur .layout et .am-ouverte sur la barre ouverte. Les « !important » ne servent qu'à passer devant un style écrit dans la page (style="…"). ─────────────────────────────────────────────────────────────────────────────────────────── */ /* Bouton ajouté par le script : jamais visible sur ordinateur. */ .am-bouton-menu { display: none; } @media (max-width: 767.98px) { html { -webkit-text-size-adjust: 100%; } body { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Gouttières de 16 px (les zones sûres sont déjà dans .container, plus haut, toutes largeurs) */ .container { width: auto; max-width: none; margin-left: 16px; margin-right: 16px; } .page-container { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .page-container .content-body { margin-top: 16px !important; } /* En-tête de page : titre plus court, lien de retour sous le titre au besoin */ .page-header { margin: 4px 0 14px; flex-wrap: wrap; gap: 10px; } .page-header h1 { font-size: 26px; line-height: 1.25; } /* Le fil d'Ariane double le lien « Retour à l'espace client » : caché sur téléphone. */ .breadcrumb { display: none; } .back-link { min-height: 44px; font-size: 14px; } /* Barre latérale repliée derrière « ☰ Menu » (le contenu principal vient d'abord) */ .layout { flex-direction: column; gap: 0; } .sidebar { width: 100%; } .layout.am-repliable > .sidebar { display: none; } .layout.am-repliable > .sidebar.am-ouverte { display: flex; flex-direction: column; } /* Dans le menu ouvert, les listes de liens (« Que voulez-vous faire ? »…) passent en premier. */ .layout.am-repliable > .sidebar > .panel:has(> .list-group) { order: -1; } .am-bouton-menu { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0 0 16px; padding: 10px 16px; background: #fff; color: var(--primary, #0f4a6b); border: 1px solid var(--border-color, #e5e5e5); border-radius: 4px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .am-bouton-menu[aria-expanded="true"] { background: #eef4f8; } .list-group-item { min-height: 48px; font-size: 15px; } /* Tuiles du tableau de bord : deux par rangée */ .stat-tiles { flex-wrap: wrap; } .stat-tile { flex: 0 0 50%; padding: 14px 8px; border-bottom-width: 3px; } .stat-tile:nth-child(2n) { border-right: none; } .stat-tile h2 { font-size: 28px; } .stat-tile .icon { display: none; } .content-panel-header { flex-wrap: wrap; gap: 8px; } .am-empiler { flex-direction: column; gap: 0 !important; } .am-empiler > * { flex: 0 0 auto !important; width: 100%; } /* Boutons et champs : au moins 44 px au doigt ; texte des champs à 16 px (sinon l'iPhone agrandit la page à chaque champ touché). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; } .am-bouton { min-height: 44px; } .btn-block { display: flex; } .btn-order, .btn-checkout, .btn-continue, .btn-submit, .btn-cancel, .btn-promo, .btn-addon, .btn-pay, .btn-action { min-height: 44px; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea { font-size: 16px !important; } .form-control, select, input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"] { min-height: 44px; } .form-control { height: auto; } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; vertical-align: middle; } /* Tableaux en cartes (table.am-cartes) */ table.am-cartes, table.am-cartes tbody, table.am-cartes tr, table.am-cartes td { display: block; width: 100%; } table.am-cartes { border: 0 !important; background: transparent !important; } table.am-cartes thead { display: none; } table.am-cartes tbody tr { background: #fff !important; border: 1px solid var(--border-color, #e5e5e5); border-radius: 6px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } table.am-cartes td { position: relative; min-height: 44px; padding: 10px 14px 10px 42% !important; border: 0; border-top: 1px solid #f0f0f0; text-align: right !important; word-break: break-word; } table.am-cartes td:first-child { border-top: 0; } table.am-cartes td::before { content: attr(data-etiquette); position: absolute; left: 14px; top: 10px; width: calc(42% - 24px); text-align: left; font-weight: 600; font-size: 13px; color: var(--text-muted, #777); } /* Ligne de message (« Chargement… », « Aucune facture ») : pleine largeur, sans intitulé. */ table.am-cartes td[colspan], table.am-cartes td:not([data-etiquette]) { padding-left: 14px !important; text-align: center !important; } table.am-cartes td[colspan]::before, table.am-cartes td:not([data-etiquette])::before { content: none; } table.am-cartes td .btn, table.am-cartes td button { min-height: 44px; font-size: 14px !important; } /* Tableau trop large gardé tel quel : il défile dans son cadre, jamais la page. */ .am-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .am-defile > table { min-width: 100%; } /* Fenêtre « Payer la facture » (invoices.html, invoice-client.html) : défile si le clavier la cache, marges réduites. */ #pay-modal-overlay { overflow-y: auto; } #pay-modal-overlay > div { margin: auto; padding: 20px 16px !important; } #pay-method-tabs { flex-wrap: wrap; } #pay-method-tabs .pay-method-tab { min-height: 44px; } /* Pages de connexion et de mot de passe : carte centrée avec marges */ body:has(> .login-container), body:has(> .box) { height: auto; min-height: 100vh; 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)); box-sizing: border-box; } .login-container, .box { padding: 28px 20px; } /* « Mot de passe oublié ? », « Retour à la connexion » : assez grands pour le doigt. */ .login-container form a, .box a.back { display: inline-block; padding: 10px 4px; } /* Boutique (boutique.html, store.html) : une carte par rangée, onglets qui défilent */ .plans-grid { grid-template-columns: 1fr; gap: 14px; } .plan-card { padding: 18px; } .filter-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .filter-tab { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; } /* Configurer, panier, commande */ .config-section { padding: 16px; } .configure-layout, .cart-layout { gap: 16px; } .cart-table td { padding: 12px; } .checkout-section h3::before, .checkout-section h3::after { width: 10%; margin: 0 6px; } .payment-methods { justify-content: flex-start; gap: 6px 16px; } .payment-method { min-height: 44px; } /* Bandeau de sécurité : en ligne (display:flex coupait la phrase en colonnes étroites). */ .security-badge { display: block; text-align: left; line-height: 1.5; } .security-badge svg { vertical-align: middle; margin-right: 6px; } /* Profil (edit-profile.html, déjà empilé par la page sous 768 px) : champs pleine largeur */ .form-row > .form-input-container { align-self: stretch; } .main-content > p { margin-bottom: 10px; } /* Ajouter une carte : libellés au-dessus des champs */ .form-horizontal .form-group { flex-direction: column; align-items: stretch; } .form-horizontal label.control-label { width: auto; text-align: left; padding: 0 0 6px; } .form-horizontal label.control-label:empty { display: none; } .form-horizontal .form-control-wrap { max-width: none; width: 100% !important; flex-wrap: wrap; } .form-horizontal .btn-submit, .form-horizontal .btn-cancel { margin: 0 8px 8px 0; } /* Facture vue par le client (invoice-client.html) */ body:has(> .invoice-container) { padding: 0; } .invoice-container { padding: 20px 16px; box-shadow: none; } .invoice-container .ribbon { top: 14px; right: -76px; width: 240px; font-size: 0.8rem; } .invoice-container .header { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .invoice-container .status-container { padding-top: 0; text-align: left; } .invoice-container .details-row { flex-direction: column; gap: 20px; margin-bottom: 24px; } .invoice-container .billed-to, .invoice-container .pay-to { width: auto; text-align: left; } .invoice-container .meta-row { flex-wrap: wrap; gap: 12px; } .invoice-container .footer-actions .btn-action { margin: 0 4px 8px; } .invoice-container #back-link { display: inline-flex; align-items: center; min-height: 44px; } }