/** * Onglet Clients — module Gestion. * Rendu DANS la coque de l'espace pro de SUITE : on hérite des tokens --sp-* * et du contrat de couleurs --mth-* (pas de couleur de marque en dur). */ .ag-page{ max-width:1240px; } /* Couleurs de statut (reprennent la palette des fiches RDV de SUITE). */ .ag-page{ --ag-cmd:#dc2626; --ag-wait:var(--sp-amber,#e0891d); --ag-recue:#2563eb; --ag-done:#10b981; --ag-neutral:var(--sp-gray4,#9ca3af); } /* Empty state. */ .ag-empty{ text-align:center; padding:48px 24px; color:var(--sp-gray5); } .ag-empty__hint{ font-size:.85rem; color:var(--sp-gray4); margin-bottom:16px; } .ag-empty .as-btn{ display:inline-flex; } /* Fenêtre « Nouvelle fiche ». */ .ag-modal{ position:fixed; inset:0; z-index:100000; display:none; overflow-y:auto; } .ag-modal.is-open{ display:block; } .ag-modal__scrim{ position:fixed; inset:0; background:rgba(16,24,40,.45); } .ag-modal__card{ position:relative; z-index:1; margin:40px auto; background:var(--sp-white); border-radius:16px; box-shadow:0 16px 50px rgba(15,23,42,.28); padding:22px 24px; width:420px; max-width:92vw; } .ag-modal__card h2{ font-size:1.1rem; font-weight:700; color:var(--sp-dark); margin:0 0 16px; } .ag-field{ display:block; margin-bottom:12px; } .ag-field span{ display:block; font-size:.8rem; font-weight:600; color:var(--sp-gray5); margin-bottom:5px; } .ag-field input{ width:100%; font:inherit; font-size:.9rem; padding:9px 11px; border:1px solid var(--as-line-2); border-radius:9px; background:var(--sp-white); color:var(--sp-dark); } .ag-field input:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); } .ag-modal__err{ color:#dc2626; font-size:.83rem; margin:0 0 12px; } .ag-modal__act{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; } .ag-qty{ color:var(--sp-gray5); font-size:.8rem; } /* Grille de fiches. */ .ag-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; align-items:start; } /* Fiche client (grammaire .as-fiche de SUITE : barre verticale de couleur). */ .ag-f{ background:var(--as-surface); border:1px solid var(--as-line-2); border-left:4px solid var(--ag-neutral); border-radius:13px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 22px -12px rgba(16,24,40,.18); overflow:hidden; transition:box-shadow .15s var(--as-ease), transform .15s var(--as-ease); } .ag-f:hover{ box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 30px -14px rgba(16,24,40,.28); transform:translateY(-2px); } /* Surlignage transitoire quand on arrive via « Fiche » depuis À relancer. */ .ag-f--focus{ animation:ag-focus-pulse 2.4s var(--as-ease); } @keyframes ag-focus-pulse{ 0%,100%{ box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 22px -12px rgba(16,24,40,.18); } 12%{ box-shadow:0 0 0 3px var(--sp-amber-ring,rgba(224,137,29,.22)),0 12px 26px -10px rgba(16,24,40,.28); } } .ag-f--cmd{ border-left-color:var(--ag-cmd); } .ag-f--wait{ border-left-color:var(--ag-wait); } .ag-f--recue{ border-left-color:var(--ag-recue); } .ag-f--done{ border-left-color:var(--ag-done); } .ag-f__head{ display:flex; align-items:center; gap:11px; padding:14px 16px 10px; } .ag-f__avatar{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:#fff; background:var(--ag-neutral); } .ag-f--cmd .ag-f__avatar{ background:var(--ag-cmd); } .ag-f--wait .ag-f__avatar{ background:var(--ag-wait); } .ag-f--recue .ag-f__avatar{ background:var(--ag-recue); } .ag-f--done .ag-f__avatar{ background:var(--ag-done); } .ag-f__id{ min-width:0; flex:1; } .ag-f__id b{ display:block; font-size:.96rem; font-weight:700; color:var(--sp-dark); } .ag-f__id span{ display:block; font-size:.8rem; color:var(--sp-gray5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ag-pill{ font-size:.7rem; font-weight:700; padding:4px 9px; border-radius:100px; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; } .ag-pill--cmd{ background:#fde8e8; color:#b91c1c; } .ag-pill--wait{ background:var(--sp-amber-soft,#fef3c7); color:var(--sp-amber-deep,#b45309); } .ag-pill--recue{ background:#e6effd; color:#1d4ed8; } .ag-pill--done{ background:#e6f6ee; color:#067a52; } .ag-parts{ border-top:1px solid var(--sp-gray1); padding:10px 16px; display:flex; flex-direction:column; gap:5px; } .ag-part{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--sp-gray7); } .ag-part__lbl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Statut cliquable (badge → menu). */ .ag-part__st{ display:inline-flex; align-items:center; gap:3px; margin-left:auto; font-family:inherit; font-size:.74rem; font-weight:700; background:none; border:none; cursor:pointer; padding:3px 6px; border-radius:6px; white-space:nowrap; } .ag-part__st:hover{ background:var(--sp-gray1); } .ag-part__st .ag-cv{ width:12px; height:12px; opacity:.6; } .ag-st--cmd{ color:var(--ag-cmd); } .ag-st--wait{ color:var(--sp-amber-deep,#b45309); } .ag-st--recue{ color:var(--ag-recue); } .ag-st--done{ color:#067a52; } /* Menu de statut (même look que les menus de SUITE). */ .ag-stmenu{ position:absolute; z-index:100000; background:var(--sp-white); border:1px solid var(--as-line-2); border-radius:10px; box-shadow:0 8px 30px rgba(20,28,45,.16); padding:5px; min-width:178px; display:none; } .ag-stmenu.is-open{ display:block; } .ag-stmenu button{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; border-radius:7px; padding:8px 10px; font:inherit; font-size:.84rem; color:var(--sp-dark); cursor:pointer; text-align:left; } .ag-stmenu button:hover{ background:var(--sp-off); } .ag-stmenu .ag-sw{ width:9px; height:9px; border-radius:50%; flex:none; } .ag-stmenu .ag-ck{ margin-left:auto; width:15px; height:15px; opacity:0; color:var(--sp-amber-deep,#b45309); } .ag-stmenu button.is-cur{ font-weight:700; } .ag-stmenu button.is-cur .ag-ck{ opacity:1; } /* ── Barre d'outils (recherche + bascule) ── */ .ag-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .ag-search{ display:flex; align-items:center; gap:8px; background:var(--sp-white); border:1px solid var(--as-line-2); border-radius:10px; padding:8px 12px; flex:1; min-width:220px; max-width:340px; } .ag-search svg{ width:17px; height:17px; color:var(--sp-gray5); flex:none; } .ag-search input{ border:none; outline:none; font:inherit; font-size:.88rem; width:100%; background:none; color:var(--sp-dark); } .ag-seg{ display:inline-flex; background:var(--sp-gray1); border-radius:10px; padding:3px; gap:2px; } .ag-seg button{ font:inherit; font-size:.83rem; font-weight:600; border:none; background:none; color:var(--sp-gray5); padding:7px 14px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:7px; } .ag-seg button.is-active{ background:var(--sp-white); color:var(--sp-dark); box-shadow:0 1px 2px rgba(16,24,40,.08); } .ag-seg__count{ font-size:.72rem; font-weight:800; background:var(--ag-cmd); color:#fff; border-radius:9px; padding:0 6px; line-height:16px; } /* ── Note de fiche ── */ .ag-f__note{ padding:0 16px 10px; font-size:.84rem; color:var(--sp-gray6); line-height:1.45; } /* ── Menu ⋯ de la fiche ── */ .ag-menu{ position:relative; display:inline-flex; flex:none; } .ag-menu__btn{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; border-radius:8px; color:var(--sp-gray5); cursor:pointer; } .ag-menu__btn:hover{ background:var(--sp-gray1); color:var(--sp-dark); } .ag-menu__btn svg{ width:18px; height:18px; } .ag-menu__pop{ display:none; position:absolute; right:0; top:calc(100% + 4px); background:var(--sp-white); border:1px solid var(--as-line-2); border-radius:10px; box-shadow:0 8px 30px rgba(20,28,45,.16); padding:5px; min-width:180px; z-index:30; } .ag-menu.is-open .ag-menu__pop{ display:block; } .ag-menu__item{ display:block; width:100%; text-align:left; background:none; border:none; border-radius:7px; padding:8px 10px; font:inherit; font-size:.84rem; color:var(--sp-dark); cursor:pointer; } .ag-menu__item:hover{ background:var(--sp-off); } .ag-menu__item--danger{ color:#dc2626; } /* ── Pièce : libellé cliquable + suppression ── */ .ag-part__lbl{ flex:1; min-width:0; text-align:left; background:none; border:none; font:inherit; font-size:.86rem; color:var(--sp-gray7); cursor:pointer; padding:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ag-part__lbl:hover{ color:var(--sp-dark); text-decoration:underline; } .ag-part__del{ flex:none; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; border-radius:6px; color:var(--sp-gray4); cursor:pointer; } .ag-part__del:hover{ background:#fde8e8; color:#dc2626; } .ag-part__del svg{ width:14px; height:14px; } /* ── Ajout / édition de pièce ── */ .ag-addwrap{ margin-top:4px; } .ag-addpart{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.81rem; font-weight:600; color:var(--sp-gray5); background:none; border:1px dashed var(--sp-gray3); border-radius:8px; padding:7px 11px; cursor:pointer; } .ag-addpart:hover{ color:var(--sp-dark); border-color:var(--sp-gray4); } .ag-addpart svg{ width:15px; height:15px; } .ag-addform{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ag-addform__lbl{ flex:1; min-width:140px; font:inherit; font-size:.85rem; padding:8px 10px; border:1px solid var(--as-line-2); border-radius:8px; background:var(--sp-white); color:var(--sp-dark); } .ag-addform__qty{ width:64px; font:inherit; font-size:.85rem; padding:8px; border:1px solid var(--as-line-2); border-radius:8px; background:var(--sp-white); color:var(--sp-dark); } .ag-addform__lbl:focus, .ag-addform__qty:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); } /* ── Aucun résultat ── */ .ag-noresult{ text-align:center; color:var(--sp-gray5); padding:30px 0; } /* ── Champ textarea de la fenêtre ── */ .ag-field textarea{ width:100%; font:inherit; font-size:.9rem; padding:9px 11px; border:1px solid var(--as-line-2); border-radius:9px; background:var(--sp-white); color:var(--sp-dark); resize:vertical; } .ag-field textarea:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); } /* ── Badge sur le bouton d'import ── */ .ag-cta-count{ font-size:.7rem; font-weight:800; background:var(--sp-gray3); color:var(--sp-gray7); border-radius:9px; padding:0 6px; line-height:16px; margin-left:2px; } /* ── Historique d'intervention (dépliable) ── */ .ag-histo{ border-top:1px solid var(--sp-gray1); } .ag-histo__toggle{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; padding:10px 16px; font:inherit; font-size:.82rem; font-weight:600; color:var(--sp-gray5); cursor:pointer; } .ag-histo__toggle:hover{ color:var(--sp-dark); } .ag-histo__toggle svg{ width:15px; height:15px; } .ag-histo__chev{ margin-left:auto; transition:transform .15s var(--as-ease); } .ag-histo__toggle.is-open .ag-histo__chev{ transform:rotate(180deg); } .ag-histo__list{ padding:0 16px 12px; display:flex; flex-direction:column; gap:9px; } .ag-histo__row{ padding-left:10px; border-left:2px solid var(--sp-gray2); } .ag-histo__line{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:.83rem; } .ag-histo__date{ font-weight:700; color:var(--sp-dark); } .ag-histo__svc{ color:var(--sp-gray6); } .ag-histo__st{ margin-left:auto; font-size:.74rem; font-weight:600; color:var(--sp-gray5); } /* ── Fenêtre d'import depuis un RDV ── */ .ag-modal__card--wide{ width:560px; } .ag-import__hint{ font-size:.85rem; color:var(--sp-gray5); margin:0 0 14px; } .ag-import__list{ display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; } .ag-import__row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--as-line-2); border-radius:10px; } .ag-import__id{ min-width:0; flex:1; } .ag-import__id b{ display:block; font-size:.9rem; font-weight:700; color:var(--sp-dark); } .ag-import__id span{ display:block; font-size:.79rem; color:var(--sp-gray5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ag-import__meta{ font-size:.78rem; color:var(--sp-gray5); white-space:nowrap; } .ag-import__btn{ flex:none; } /* ── Import : barre de filtre ── */ .ag-import__search{ display:flex; align-items:center; gap:8px; background:var(--sp-white); border:1px solid var(--as-line-2); border-radius:10px; padding:8px 12px; margin-bottom:12px; } .ag-import__search svg{ width:16px; height:16px; color:var(--sp-gray5); flex:none; } .ag-import__search input{ border:none; outline:none; font:inherit; font-size:.88rem; width:100%; background:none; color:var(--sp-dark); } .ag-import__none{ text-align:center; color:var(--sp-gray5); padding:18px 0; } /* Commentaire (résumé d'intervention) sous un RDV, dans l'historique. */ .ag-histo__note{ font-size:.83rem; color:var(--sp-gray6); line-height:1.45; margin-top:4px; } /* L'attribut hidden doit l'emporter sur les display:flex des conteneurs dépliables. */ .ag-histo__list[hidden], .ag-addform[hidden]{ display:none; } /* ── Sélecteur de client (création de RDV, onglet planning) ── */ .agp-btn{ width:100%; justify-content:center; margin-bottom:10px; grid-column:1 / -1; } .agp-row{ width:100%; text-align:left; cursor:pointer; font:inherit; background:var(--sp-white); } .agp-row:hover{ border-color:var(--sp-gray3); background:var(--sp-off); } /* ── Garanties (déroulant sur la fiche) ── */ .ag-war{ border-top:1px solid var(--sp-gray1); } .ag-war__toggle{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; padding:10px 16px; font:inherit; font-size:.82rem; font-weight:600; color:var(--sp-gray5); cursor:pointer; } .ag-war__toggle:hover{ color:var(--sp-dark); } .ag-war__toggle svg{ width:15px; height:15px; } .ag-war__chev{ margin-left:auto; transition:transform .15s var(--as-ease); } .ag-war__toggle.is-open .ag-war__chev{ transform:rotate(180deg); } .ag-war__list{ padding:0 16px 12px; display:flex; flex-direction:column; gap:7px; } .ag-war__list[hidden]{ display:none; } .ag-war__row{ display:flex; align-items:center; gap:9px; font-size:.85rem; } .ag-war__lbl{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sp-gray7); } .ag-war__date{ font-size:.78rem; color:var(--sp-gray5); white-space:nowrap; } .ag-war__add{ display:inline-flex; align-items:center; gap:6px; font-size:.81rem; font-weight:600; color:var(--sp-amber-deep,#b45309); text-decoration:none; margin-top:2px; } .ag-war__add svg{ width:14px; height:14px; } .ag-war__addrow{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--sp-gray1); font-size:.82rem; font-weight:600; color:var(--sp-gray5); text-decoration:none; } .ag-war__addrow:hover{ color:var(--sp-dark); } .ag-war__addrow svg{ width:15px; height:15px; } /* Rubrique Devis (dépliable sur la fiche). */ .ag-q{ border-top:1px solid var(--sp-gray1); } .ag-q__toggle{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; padding:10px 16px; font:inherit; font-size:.82rem; font-weight:600; color:var(--sp-gray5); cursor:pointer; } .ag-q__toggle:hover{ color:var(--sp-dark); } .ag-q__toggle svg{ width:15px; height:15px; } .ag-q__chev{ margin-left:auto; transition:transform .15s var(--as-ease); } .ag-q__toggle.is-open .ag-q__chev{ transform:rotate(180deg); } .ag-q__list{ padding:0 16px 12px; display:flex; flex-direction:column; gap:6px; } .ag-q__list[hidden]{ display:none; } /* ═══════════════════════════════════════════════════════════════════ Correctifs mobile (iOS) — module GESTION entier. Tous les CSS du module sont chargés ensemble sur l'espace : ce bloc unique couvre Clients (.ag-*), Suivi (.af-*), SAV (.sv-*) et Devis (.dv-*), modales comprises (déplacées vers ). Ciblé sur les racines/menus du module → aucun effet sur l'espace natif de Suite. ═══════════════════════════════════════════════════════════════════ */ /* CAUSE n°1 des boutons à ICÔNE « HS » sur mobile : un tap sur l'icône cible le / interne, et sur iOS le clic ne remonte pas au handler délégué (closest sur [data-del]…). Les boutons à TEXTE marchent car pas de SVG cliqué. On rend tous les SVG du module « transparents » au pointeur → le tap vise toujours le bouton lui-même. (Vérifié : elementFromPoint renvoyait un .) */ .ag-page button svg, .sv-page button svg, .dv-page button svg, .af-page button svg, .ag-modal button svg, .sv-modal button svg, .dv-modal button svg, .ag-stmenu button svg, .ag-menu__item svg, .ag-page a svg, .sv-page a svg, .dv-page a svg, .af-page a svg{ pointer-events:none; } /* Taps réactifs au 1er toucher : supprime le double-tap-zoom iOS qui « avalait » le clic des boutons modifier/supprimer/etc. */ .ag-page button, .sv-page button, .dv-page button, .af-page button, .ag-modal button, .sv-modal button, .dv-modal button, .ag-stmenu button, .ag-menu__item{ touch-action:manipulation; } /* Champs : jamais de débordement hors du cadre (width 100% + padding). */ .ag-page input, .ag-page select, .ag-page textarea, .sv-page input, .sv-page select, .sv-page textarea, .dv-page input, .dv-page select, .dv-page textarea, .af-page input, .af-page select, .af-page textarea, .ag-modal input, .ag-modal select, .ag-modal textarea, .sv-modal input, .sv-modal select, .sv-modal textarea, .dv-modal input, .dv-modal select, .dv-modal textarea{ box-sizing:border-box; max-width:100%; } @media(max-width:620px){ /* iOS zoome au focus de tout champ dont la police < 16px : on neutralise pour tout le module (champs de saisie ET ouverture d'une modale via « Modifier »). */ .ag-page input, .ag-page select, .ag-page textarea, .sv-page input, .sv-page select, .sv-page textarea, .dv-page input, .dv-page select, .dv-page textarea, .af-page input, .af-page select, .af-page textarea, .ag-modal input, .ag-modal select, .ag-modal textarea, .sv-modal input, .sv-modal select, .sv-modal textarea, .dv-modal input, .dv-modal select, .dv-modal textarea{ font-size:16px !important; } /* Date d'échéance / dates de devis : iOS Safari rend les