/* ============================================================ OpsFormaPro — Feuille de style (socle repris d'Event) Un bleu sobre, un gris clair reposant et l'orange d'action des applications OpsFact. ============================================================ */ :root { --vert: #1D5FA8; /* icônes, liens actifs — 6,3:1 sur blanc */ --vert-fonce: #17416E; /* en-tête de fiche, texte fort */ --vert-pale: #E7EFF9; --encre: #18212D; /* texte courant */ --encre2: #4A5566; /* texte secondaire — 7,4:1 sur blanc */ --papier: #F2F4F7; /* fond de page */ --blanc: #FFFFFF; --trait: #D8DEE7; --action: #B54708; /* bouton d'action — 5,6:1 avec le blanc */ --action-fonce: #93370D; --rouge: #B42318; /* Rôles : ce qui change entre le thème clair et le thème sombre. */ --lien: var(--vert-fonce); /* texte de marque : liens, titres */ --accent: var(--vert); /* icônes, repères */ --rouge-txt: var(--rouge); --encre3: #6B7686; --trait-leger: #EDF0F5; --trait-fort: #C8D0DB; --survol: #F6F8FB; --barre: rgba(255, 255, 255, .96); --toast: #18212D; --vert-trait: #CFDDF0; --vert-pastille: #DCEFD9; --vert-pastille-texte: #1B5E20; --ambre-fond: #FEF6E7; --ambre-texte: #7A3A06; --ambre-trait: #F3D9A4; --ambre-pale: #FDEFC8; --rouge-fond: #FEF3F2; --rouge-pale: #FDE4E2; --rouge-texte: #9B1C12; --rouge-trait: #FECDCA; --gris-pale: #ECEFF3; --gris-texte: #435063; --bleu-pale: #E0E8F9; --bleu-texte: #25408F; color-scheme: light; --rayon: 10px; --ombre: 0 1px 2px rgba(28, 38, 32, .06), 0 4px 14px rgba(28, 38, 32, .06); --sb: 272px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--encre); -webkit-text-size-adjust: 100%; } /* ── Thème sombre ────────────────────────────────────────────── Seule l'application le prend (index.php pose data-theme ou la classe theme-auto sur ) : billets, tickets, factures et attestations restent sur fond blanc, prêts à imprimer. Sélecteurs plus précis que :root, pour l'emporter aussi sur les couleurs de marque de l'organisateur. */ :root[data-theme="dark"] { --papier: #10151C; --blanc: #19202A; --trait: #2C3643; --trait-leger: #222A35; --trait-fort: #3A4553; --encre: #E4E8EE; --encre2: #A6B0BE; --encre3: #7F8A99; --lien: color-mix(in srgb, var(--vert) 50%, #FFFFFF); --accent: color-mix(in srgb, var(--vert) 60%, #FFFFFF); --vert-pale: color-mix(in srgb, var(--vert) 24%, #19202A); --vert-trait: color-mix(in srgb, var(--vert) 45%, #19202A); --vert-pastille: #1D3A22; --vert-pastille-texte: #A6DDA9; --rouge-txt: #F97066; --survol: #212936; --barre: rgba(25, 32, 42, .96); --toast: #2B3542; --ambre-fond: #2A2112; --ambre-texte: #F5C57A; --ambre-trait: #5C4520; --ambre-pale: #3A2C12; --rouge-fond: #2A1513; --rouge-pale: #3A1714; --rouge-texte: #FDA29B; --rouge-trait: #6B2A24; --gris-pale: #262F3B; --gris-texte: #C3CAD4; --bleu-pale: #1B2540; --bleu-texte: #A9BEF5; --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root.theme-auto { --papier: #10151C; --blanc: #19202A; --trait: #2C3643; --trait-leger: #222A35; --trait-fort: #3A4553; --encre: #E4E8EE; --encre2: #A6B0BE; --encre3: #7F8A99; --lien: color-mix(in srgb, var(--vert) 50%, #FFFFFF); --accent: color-mix(in srgb, var(--vert) 60%, #FFFFFF); --vert-pale: color-mix(in srgb, var(--vert) 24%, #19202A); --vert-trait: color-mix(in srgb, var(--vert) 45%, #19202A); --vert-pastille: #1D3A22; --vert-pastille-texte: #A6DDA9; --rouge-txt: #F97066; --survol: #212936; --barre: rgba(25, 32, 42, .96); --toast: #2B3542; --ambre-fond: #2A2112; --ambre-texte: #F5C57A; --ambre-trait: #5C4520; --ambre-pale: #3A2C12; --rouge-fond: #2A1513; --rouge-pale: #3A1714; --rouge-texte: #FDA29B; --rouge-trait: #6B2A24; --gris-pale: #262F3B; --gris-texte: #C3CAD4; --bleu-pale: #1B2540; --bleu-texte: #A9BEF5; --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--papier); font-size: 15px; line-height: 1.5; min-height: 100vh; } a { color: var(--lien); } button { font: inherit; color: inherit; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; border-radius: 4px; } .discret { color: var(--encre2); font-size: 13px; } svg { flex-shrink: 0; } /* ── Boutons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:disabled { opacity: .55; cursor: progress; } .btn-p { background: var(--action); color: #fff; } .btn-p:hover { background: var(--action-fonce); } .btn-s { background: var(--blanc); border-color: var(--trait); color: var(--encre); } .btn-s:hover { border-color: var(--vert); color: var(--lien); } .btn-danger { background: var(--rouge); color: #fff; } .btn-danger-txt { background: none; color: var(--rouge-txt); border-color: transparent; } .btn-danger-txt:hover { background: var(--rouge-fond); } .btn-wa { background: #1F7A4D; color: #fff; } .btn-wa:hover { background: #17603C; } .btn-petit { min-height: 32px; padding: 4px 10px; font-size: 13px; } .btn-plein { width: 100%; } .lien-txt { background: none; border: 0; color: var(--encre2); font-weight: 600; cursor: pointer; padding: 8px 12px; } .lien-txt:hover { color: var(--encre); text-decoration: underline; } /* ── Pages hors application (connexion, invitation) ──────────── */ .page-simple { display: grid; place-items: center; padding: 24px 16px; min-height: 100vh; background: var(--papier) radial-gradient(circle at 15% 10%, var(--vert-pale) 0, transparent 45%); } .ps-carte { width: 100%; max-width: 420px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 28px 26px; box-shadow: var(--ombre); } .ps-marque { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--lien); margin-bottom: 22px; } .ps-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--vert-pale); color: var(--accent); } .ps-carte h1 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.01em; } .ps-texte { color: var(--encre2); margin: 0 0 16px; } .ps-note { color: var(--encre2); font-size: 13px; margin: 16px 0 0; text-align: center; } .ps-form { display: grid; gap: 14px; margin-top: 8px; } .ps-form label { display: grid; gap: 5px; font-weight: 600; font-size: 13px; } .ps-form input { font: inherit; font-weight: 400; min-height: 44px; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 8px; } .ps-form input:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .ps-erreur, .ps-info { border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; } .ps-erreur { background: var(--rouge-fond); color: var(--rouge-txt); border: 1px solid var(--rouge-trait); } .ps-info { background: var(--vert-pale); color: var(--lien); } .ps-liste { display: grid; gap: 8px; } .ps-choix { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 14px 16px; cursor: pointer; } .ps-choix:hover { border-color: var(--vert); } .ps-choix span { display: grid; } .ps-choix small { color: var(--encre2); } .ps-actuel { font-size: 11px; font-weight: 700; color: var(--lien); background: var(--vert-pale); padding: 1px 7px; border-radius: 10px; } /* ── Menu latéral ────────────────────────────────────────────── */ .sb { position: fixed; inset: 0 auto 0 0; width: var(--sb); background: var(--blanc); border-right: 1px solid var(--trait); display: flex; flex-direction: column; z-index: 40; overflow-y: auto; } .sb-tete { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--trait); } .sb-logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--vert-pale); color: var(--accent); } .sb-noms { display: grid; min-width: 0; } .sb-noms b { font-size: 16px; color: var(--lien); } .sb-noms span { font-size: 12px; color: var(--encre2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-fermer { display: none; margin-left: auto; background: none; border: 0; font-size: 18px; cursor: pointer; padding: 6px; } #menu-liens { padding: 10px 8px; display: grid; gap: 2px; } .sb-lien { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; font-weight: 500; } .sb-lien svg { color: var(--accent); } .sb-lien:hover { background: var(--papier); } .sb-lien.actif { background: var(--vert-pale); color: var(--lien); font-weight: 700; } .sb-voile { display: none; } /* ── Bandeau du haut ─────────────────────────────────────────── */ .main { margin-left: var(--sb); min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--barre); border-bottom: 1px solid var(--trait); } .hamburger { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; padding: 4px 8px; } .tb-titre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; min-width: 0; } .tb-titre #titre-ico { color: var(--accent); display: inline-flex; } .tb-titre #titre-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; } .tb-rond { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blanc); border: 1px solid var(--trait); cursor: pointer; color: var(--encre2); } .tb-rond:hover { color: var(--lien); border-color: var(--vert); } .tb-ava { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--vert-fonce); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; } .contenu { padding: 22px 24px 60px; max-width: 1280px; } .chargement { color: var(--encre2); padding: 40px 0; } /* ── Accueil : tuiles du menu ────────────────────────────────── */ .accueil-intro { color: var(--encre2); margin: 0 0 16px; } .tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .tuile { display: flex; align-items: center; gap: 18px; min-height: 92px; padding: 16px 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; color: var(--encre); text-decoration: none; font-size: 16px; font-weight: 600; } a.tuile:hover { border-color: var(--vert); box-shadow: var(--ombre); } .tuile-ico { display: grid; place-items: center; width: 60px; height: 60px; color: var(--accent); } .tuile-ico svg { stroke-width: 1.6; } .tuile-txt { display: grid; } .tuile-txt small { font-size: 12px; font-weight: 400; color: var(--encre2); } .tuile-avenir { background: transparent; border-style: dashed; color: var(--encre2); } .tuile-avenir .tuile-ico { color: var(--encre3); } /* ── Listes ──────────────────────────────────────────────────── */ .liste-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; } .recherche { flex: 1 1 240px; max-width: 380px; font: inherit; min-height: 42px; padding: 8px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); } .recherche:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .filtres { display: flex; flex-wrap: wrap; gap: 6px; } .filtre { min-height: 34px; padding: 4px 12px; border-radius: 17px; border: 1px solid var(--trait); background: var(--blanc); cursor: pointer; font-size: 13px; } .filtre b { margin-right: 3px; } .filtre.actif { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; } .liste-compte { font-size: 13px; color: var(--encre2); margin: 4px 2px 8px; } .tableau-zone { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); overflow-x: auto; } .tableau { width: 100%; border-collapse: collapse; font-size: 14px; } .tableau th { text-align: left; font-size: 12px; font-weight: 700; color: var(--encre2); background: var(--survol); padding: 10px 14px; border-bottom: 1px solid var(--trait); white-space: nowrap; } .tableau td { padding: 11px 14px; border-bottom: 1px solid var(--trait-leger); vertical-align: middle; } .tableau tbody tr:last-child td { border-bottom: 0; } .tableau tbody tr[tabindex] { cursor: pointer; } .tableau tbody tr[tabindex]:hover { background: var(--survol); } .tableau .actions { text-align: right; white-space: nowrap; } .ligne-inactive td { color: var(--encre2); } .cartes { display: none; } .pastille { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; } .p-vert { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .p-gris { background: var(--gris-pale); color: var(--gris-texte); } .p-bleu { background: var(--bleu-pale); color: var(--bleu-texte); } .p-rouge { background: var(--rouge-pale); color: var(--rouge-texte); } .p-ambre { background: var(--ambre-pale); color: var(--ambre-texte); } .vide { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; text-align: center; color: var(--encre2); background: var(--blanc); border: 1px dashed var(--trait); border-radius: 12px; } .vide svg { color: var(--accent); } .vide p { margin: 0; } .vide-erreur svg { color: var(--rouge-txt); } .bloc-tete { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; } .bloc-tete p { margin: 0; } .titre-section { font-size: 15px; font-weight: 700; margin: 26px 0 10px; } .note-bas { margin-top: 14px; } /* ── Fiche : panneau latéral droit ───────────────────────────── */ .fp-voile { position: fixed; inset: 0; background: rgba(28, 38, 32, .28); z-index: 50; } .fiche { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--blanc); z-index: 55; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(28, 38, 32, .14); animation: glisse .18s ease-out; } @keyframes glisse { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } } .fp-tete { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; background: var(--vert-fonce); color: #fff; } .fp-titres { display: grid; min-width: 0; } .fp-titres h2 { margin: 0; font-size: 19px; line-height: 1.3; } .fp-titres > span { font-size: 13px; color: #CFDDF0; } .fp-titres h2 .pastille { vertical-align: 3px; margin-left: 6px; } .fp-fermer { margin-left: auto; background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 15px; } .fp-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--trait); } .fp-corps { overflow-y: auto; padding: 16px 20px 40px; } .fp-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fp-champ { border: 1px solid var(--trait); border-radius: 8px; padding: 8px 12px; min-width: 0; } .fp-champ.large { grid-column: 1 / -1; } .fp-lib { display: block; font-size: 11px; font-weight: 700; color: var(--encre2); text-transform: uppercase; letter-spacing: .04em; } .fp-val { margin-top: 2px; overflow-wrap: anywhere; } .fp-section { margin-top: 22px; } .fp-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .fp-section-tete h3 { margin: 0; font-size: 15px; } .fp-enfants { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .fp-enfant { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--trait); border-radius: 8px; padding: 9px 12px; background: var(--blanc); } button.fp-enfant { cursor: pointer; } button.fp-enfant:hover { border-color: var(--vert); } .fp-enfant span { display: grid; min-width: 0; } .fp-enfant small { color: var(--encre2); font-size: 12px; } /* ── Formulaire : fenêtre centrée ────────────────────────────── */ .md-voile { position: fixed; inset: 0; z-index: 70; background: rgba(28, 38, 32, .42); display: grid; place-items: center; padding: 16px; } .md { width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--blanc); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); } .md-tete { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--trait); } .md-tete h2 { margin: 0; font-size: 17px; } .md-fermer { margin-left: auto; background: none; border: 0; font-size: 16px; cursor: pointer; padding: 6px; color: var(--encre2); } .md-corps { padding: 18px 20px; overflow-y: auto; } .md-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--trait); } .md-texte { margin: 0 0 12px; } .champ { display: grid; gap: 5px; margin-bottom: 14px; } .champ label { font-weight: 600; font-size: 13px; } .requis { color: var(--rouge-txt); } .champ input, .champ select, .champ textarea, .panneau-form input, .panneau-form select { font: inherit; width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); } .champ textarea { min-height: 84px; resize: vertical; } .champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .champ input:disabled, .champ select:disabled { background: var(--survol); color: var(--encre2); } .aide { color: var(--encre2); font-size: 12px; line-height: 1.4; } .case { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; margin: 4px 0 4px; cursor: pointer; } .case input { width: 20px; height: 20px; accent-color: var(--vert); } .case + .aide { display: block; margin-bottom: 14px; } .form-erreur { background: var(--rouge-fond); color: var(--rouge-txt); border: 1px solid var(--rouge-trait); border-radius: 8px; padding: 9px 12px; font-size: 14px; margin-top: 4px; } .panneau-form { max-width: 620px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 4px 22px 20px; } .form-pied { display: flex; justify-content: flex-end; margin-top: 16px; } .lien-invit { display: flex; gap: 8px; margin: 6px 0 14px; } .lien-invit input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--survol); } .envois { display: flex; flex-wrap: wrap; gap: 8px; } /* ── Compte : panneau qui remonte du bas ─────────────────────── */ .pc-voile { position: fixed; inset: 0; background: rgba(28, 38, 32, .3); z-index: 80; } .pc-feuille { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(480px, 100vw); z-index: 85; background: var(--blanc); border-radius: 16px 16px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); } .pc-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pc-ava { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vert-fonce); color: #fff; font-weight: 700; } .pc-noms { display: grid; min-width: 0; } .pc-noms span { font-size: 13px; color: var(--encre2); } .pc-fermer { margin-left: auto; background: none; border: 0; font-size: 16px; cursor: pointer; padding: 6px; } .pc-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pc-grille a { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--trait); border-radius: 10px; text-decoration: none; color: var(--encre); font-size: 13px; font-weight: 600; text-align: center; } .pc-grille a svg { color: var(--accent); } .pc-grille a:hover { border-color: var(--vert); } .pc-sortir svg { color: var(--rouge-txt) !important; } /* ── Messages ────────────────────────────────────────────────── */ .toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: grid; gap: 8px; } .toast { background: var(--toast); color: #fff; padding: 11px 16px; border-radius: 9px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); max-width: 360px; } .toast-erreur { background: var(--rouge); } /* ── Téléphone ───────────────────────────────────────────────── */ @media (max-width: 1000px) { .sb { transform: translateX(-100%); transition: transform .2s ease; } .sb.ouvert { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .18); } .sb-fermer { display: block; } .sb-voile.ouvert { display: block; position: fixed; inset: 0; background: rgba(28, 38, 32, .35); z-index: 35; } .main { margin-left: 0; } .hamburger { display: block; } .topbar { padding: 8px 12px; } .contenu { padding: 16px 12px 70px; } } @media (max-width: 760px) { .btn-label { display: none; } .zone-liste { display: none; } .cartes { display: grid; gap: 8px; } .carte { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; } .carte-txt { display: grid; flex: 1; min-width: 0; } .carte-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .carte-txt small { color: var(--encre2); font-size: 12px; } .carte > svg { color: var(--encre2); } .tuiles { grid-template-columns: 1fr; gap: 10px; } .tuile { min-height: 76px; } .tuile-ico { width: 48px; height: 48px; } .fp-champs { grid-template-columns: 1fr; } .pc-grille { grid-template-columns: repeat(2, 1fr); } .recherche { max-width: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── Pièces du socle Event gardées telles quelles ─────────────── */ .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .fp-resume { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .fp-resume > div { flex: 1 1 140px; display: grid; background: var(--vert-pale); border-radius: 10px; padding: 10px 14px; } .fp-resume b { font-size: 20px; color: var(--lien); font-variant-numeric: tabular-nums; } .fp-resume span { font-size: 12px; color: var(--encre2); } .lien-page { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin: -2px 0 14px; } .cases { display: grid; gap: 2px; } .champ-lib { font-weight: 600; font-size: 13px; } .logo-img { object-fit: contain; background: #fff; border-radius: 10px; } .sb-logo.logo-img { width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--trait); } .pub-logo.logo-img { width: 38px; height: 38px; } .ps-logo.logo-img { width: 44px; height: 44px; border: 1px solid var(--trait); } .tk-logo { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 6px; display: block; border-radius: 10px; } .marque-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; } .marque-logo { display: flex; gap: 12px; align-items: center; } .marque-apercu-logo { width: 84px; height: 84px; border: 1px dashed var(--trait); border-radius: 12px; display: grid; place-items: center; background: #fff; overflow: hidden; color: var(--encre2); flex: 0 0 84px; } .marque-apercu-logo img { width: 100%; height: 100%; object-fit: contain; } .marque-couleur label { font-weight: 600; font-size: 14px; } .marque-couleur-ligne { display: flex; gap: 8px; align-items: center; margin: 6px 0 8px; } .marque-couleur-ligne input[type=color] { width: 46px; height: 40px; padding: 2px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); } .marque-couleur-ligne input[type=text] { width: 110px; font: inherit; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; } .marque-apercu em { font-style: normal; background: #fff; color: var(--m); padding: 5px 12px; border-radius: 7px; } @media (max-width: 700px) { .marque-edit { grid-template-columns: 1fr; } } .pc-installer { margin-top: 10px; } .pc-installer .aide { margin: 0; display: flex; gap: 6px; align-items: flex-start; } .marque-logo > div { display: grid; gap: 6px; justify-items: start; } .marque-couleur-ligne .lien-txt { white-space: nowrap; } /* Menu latéral en groupes : un trait et un petit titre discret par groupe. */ .sb-groupe { display: grid; gap: 1px; } .sb-groupe + .sb-groupe { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--trait); } .sb-groupe-titre { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); padding: 2px 12px 4px; } /* Une couleur par groupe du menu : titre et icônes. Le texte des liens reste sombre (lisibilité) ; l'écran ouvert se teinte de la couleur de son groupe. Toutes ces couleurs font au moins 4,5:1 sur fond blanc. */ .sb-groupe { --g: var(--accent); --g-pale: var(--vert-pale); } /* Une seule couleur, le vert de l'application, pour tous les groupes : la couleur est réservée à l'écran ouvert, qui ressort mieux ainsi. */ .sb-groupe-titre { color: var(--g); display: flex; align-items: center; gap: 6px; } .sb-groupe-titre::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--g); } .sb-groupe .sb-lien svg { color: var(--g); flex: 0 0 auto; } .sb-groupe .sb-lien:hover { background: var(--g-pale); } .sb-groupe .sb-lien.actif { background: var(--g-pale); color: var(--g); box-shadow: inset 3px 0 0 var(--g); } /* Texte du menu : 14,5 px (titres de groupe 11 px), entrées plus serrées pour que tout le menu tienne sur un écran d'ordinateur portable. */ .sb-lien { font-size: 14.5px; line-height: 1.25; padding: 7px 12px; gap: 10px; } .sb-groupe-titre { font-size: 11px; line-height: 1.3; font-weight: 800; padding: 2px 12px 3px; } .sb-noms b { font-size: 17px; } .sb-noms span { font-size: 13px; } .sb-tete { padding: 9px 16px; } .champ-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 600px) { .champ-ligne { grid-template-columns: 1fr; } } /* Titres des sections de fiche : icône en pastille, nombre en badge. */ .fp-section-tete h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; } .fp-sec-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--vert-pale); color: var(--accent); flex: 0 0 32px; } .fp-compte { min-width: 24px; height: 22px; padding: 0 8px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--gris-pale); color: var(--encre2); } .fp-compte.plein { background: var(--vert); color: #fff; } .fp-unite { font-size: 12px; font-weight: 700; color: var(--encre2); background: var(--gris-pale); border-radius: 6px; padding: 2px 6px; } .fp-vide { margin: 2px 0 0; padding: 10px 12px; border: 1px dashed var(--trait); border-radius: 10px; color: var(--encre2); font-size: 14px; background: var(--papier); } /* Sociétés : les mêmes boutons au même endroit sur chaque ligne. */ .soc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .soc-actions .btn { min-width: 104px; justify-content: center; } .soc-place { display: inline-block; min-width: 104px; } /* Mon compte : le choix de l'apparence. */ .pc-theme { display: grid; gap: 8px; margin: 14px 0 4px; } .pc-theme-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--encre2); } .pc-theme-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--papier); border: 1px solid var(--trait); border-radius: 10px; } .pc-theme-choix button { min-height: 40px; border: 0; border-radius: 7px; background: transparent; color: var(--encre2); font-weight: 600; font-size: 14px; cursor: pointer; } .pc-theme-choix button.actif { background: var(--blanc); color: var(--lien); box-shadow: var(--ombre); } /* ============================================================ OpsFormaPro — écrans du métier ============================================================ */ .md.md-large { width: min(860px, 100%); } .rouge { color: var(--rouge-txt); } .titre-section.rouge { color: var(--rouge-txt); } .bandeau { display: flex; gap: 8px; align-items: flex-start; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; } .bandeau svg { flex: 0 0 auto; margin-top: 1px; } .bandeau-ambre { background: var(--ambre-fond); color: var(--ambre-texte); border: 1px solid var(--ambre-trait); } .bandeau-rouge { background: var(--rouge-fond); color: var(--rouge-texte); border: 1px solid var(--rouge-trait); } .bloc-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .fk-ligne { display: flex; gap: 6px; align-items: stretch; } .fk-ligne select { flex: 1; min-width: 0; } .fk-ligne .btn { min-height: 42px; } .champ-case { margin-bottom: 12px; } .case-petite { font-weight: 500; font-size: 13px; margin: 2px 10px 2px 0; display: inline-flex; } .case-petite input { width: 17px; height: 17px; } .form-section { border: 1px solid var(--trait); border-radius: 10px; margin: 0 0 12px; background: var(--blanc); } .form-section > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 10px 14px; color: var(--lien); list-style: none; display: flex; align-items: center; gap: 8px; } .form-section > summary::-webkit-details-marker { display: none; } .form-section > summary::before { content: '▸'; transition: transform .15s; } .form-section[open] > summary::before { transform: rotate(90deg); } .form-section-corps { padding: 2px 14px 4px; } .pastille-couleur { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 1px solid var(--trait); } .lien-txt.lien-fort { padding: 0; color: var(--lien); font-weight: 700; text-align: left; } .fp-note { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; margin: 0 0 12px; color: var(--encre2); } .fp-note .lien-txt { padding: 0; } .empreinte { font-size: 11px; word-break: break-all; color: var(--encre2); } .fp-enfant.barre b, .fp-enfant.barre small { text-decoration: line-through; color: var(--encre3); } /* Schéma des dommages : l'image reste sur fond blanc, même en thème sombre. */ .sd { display: grid; gap: 8px; } .sd-cadre { position: relative; background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 8px 20px; } .sd-cadre svg { display: block; width: 100%; height: auto; max-height: 300px; } .sd-edit svg { cursor: crosshair; touch-action: manipulation; } .sd-point { cursor: pointer; } .sd-av, .sd-ar { position: absolute; bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #6B7686; } .sd-av { left: 12px; } .sd-ar { right: 12px; } .sd-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .sd-leg { display: inline-flex; align-items: center; gap: 5px; } .sd-types { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sd-type { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 8px; border-radius: 18px; border: 2px solid var(--trait); background: var(--blanc); font-weight: 600; font-size: 13px; cursor: pointer; } .sd-type.actif { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); } /* Signatures : fond blanc pour qu'elles s'impriment et se lisent partout. */ .sig { border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; } .sig-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .sig-tete .lien-txt { padding: 4px 6px; } .sig-pad { width: 100%; height: 160px; background: #fff; border: 1px dashed var(--trait-fort); border-radius: 8px; touch-action: none; cursor: crosshair; } .sig-existante, .sig-img { display: block; max-width: 100%; max-height: 120px; background: #fff; border: 1px solid var(--trait); border-radius: 8px; margin: 4px 0; } .sig-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .sig-duo small { display: block; } @media (max-width: 600px) { .sig-duo { grid-template-columns: 1fr; } } .jauge { display: inline-block; width: 70px; height: 10px; border-radius: 5px; background: var(--gris-pale); overflow: hidden; vertical-align: middle; } .jauge span { display: block; height: 100%; background: linear-gradient(90deg, #DC2626, #D97706 35%, #16A34A 70%); } .choix-carb { display: flex; flex-wrap: wrap; gap: 6px; } .puce { position: relative; } .puce input { position: absolute; opacity: 0; } .puce span { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 14px; border: 1px solid var(--trait); border-radius: 19px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--blanc); } .puce input:checked + span { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; } .puce input:focus-visible + span { outline: 3px solid var(--vert); outline-offset: 2px; } .cases-grille { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 12px; } .checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; } .ck-famille { display: grid; gap: 0; } .ck-famille b { font-size: 13px; color: var(--lien); margin: 4px 0 2px; } .edl .champ { margin-bottom: 16px; } .edl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .edl-col h4 { margin: 0 0 6px; font-size: 14px; } .edl-col p { margin: 4px 0; font-size: 13px; } @media (max-width: 640px) { .edl-duo { grid-template-columns: 1fr; } } /* Lignes des devis, ordres et factures. */ .lg-ajouts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .lg-liste { display: grid; gap: 8px; } .lg { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; background: var(--blanc); } .lg-num { font-size: 12px; font-weight: 800; color: var(--encre3); padding-top: 10px; text-align: center; } .lg-corps { display: grid; gap: 6px; min-width: 0; } .lg-l1 { display: flex; gap: 6px; } .lg-l1 select { flex: 0 0 132px; } .lg-l1 .lg-des { flex: 1; min-width: 0; } .lg input, .lg select { font: inherit; font-size: 14px; min-height: 38px; padding: 6px 9px; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); width: 100%; } .lg-l2 { display: grid; grid-template-columns: 1.1fr .7fr 1fr 1fr .7fr .9fr 1.4fr; gap: 6px; align-items: end; } .lg-l2 input, .lg-l2 select { font-weight: 400; } .lg-l2 label { display: grid; gap: 2px; font-size: 11px; font-weight: 700; color: var(--encre2); } .lg-total { font-weight: 800; text-align: right; align-self: center; min-width: 96px; white-space: nowrap; font-variant-numeric: tabular-nums; } .lg-txt { grid-template-columns: 26px 1fr auto; background: var(--survol); } .lg-txt .lg-des { font-style: italic; } .lg-outils { display: flex; flex-direction: column; gap: 4px; } .lg-btn { width: 30px; height: 28px; border: 1px solid var(--trait); border-radius: 6px; background: var(--blanc); cursor: pointer; color: var(--encre2); display: grid; place-items: center; } .lg-btn:disabled { opacity: .35; cursor: default; } .lg-suppr:hover { color: var(--rouge-txt); border-color: var(--rouge-trait); } .lg-totaux { margin: 12px 0 0 auto; border-collapse: collapse; min-width: 280px; font-size: 14px; } .lg-totaux td { padding: 5px 0 5px 16px; border-bottom: 1px solid var(--trait-leger); } .lg-totaux .lg-ttc td { font-weight: 800; font-size: 16px; border-bottom: 0; padding-top: 8px; color: var(--lien); } .lg-lecture td { vertical-align: top; } .lg-texte td { font-style: italic; color: var(--encre2); background: var(--survol); } @media (max-width: 760px) { .lg-l1 { flex-direction: column; } .lg-l1 select { flex: none; } .lg-l2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg-outils { flex-direction: row; grid-column: 2; justify-content: flex-end; } .lg { grid-template-columns: 22px 1fr; } } /* Tableau de bord. */ .tdb { display: block; } .tdb-entete { display: grid; gap: 4px; margin-bottom: 14px; } .tdb-entete h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; } .tdb-entete p { margin: 0; } .tdb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tdb-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; } .tdb-tuile { --t: var(--vert); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--t); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--encre); } .tdb-tuile:hover { box-shadow: var(--ombre); } .tdb-tuile-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t); } .tdb-tuile b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; } .tdb-tuile span:last-child { font-size: 13px; color: var(--encre2); } .t-rouge { --t: #C4320A; } .t-vert { --t: #15803D; } .t-ambre { --t: #B45309; } .t-bleu { --t: var(--vert); } .tdb-tuile.t-vide { border-left-color: var(--trait); opacity: .8; } .tdb-tuile.t-vide .tdb-tuile-ico { background: var(--gris-pale); color: var(--encre3); } .tdb-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .tdb-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; min-width: 0; } .tdb-carte h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; } .tdb-carte h3 svg { color: var(--accent); } .tdb-alerte { border-color: var(--rouge-trait); } .tdb-alerte h3 svg { color: var(--rouge-txt); } .tdb-argent { grid-column: 1 / -1; } .tdb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .tdb-liste button { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; background: none; border: 0; border-radius: 8px; padding: 7px 8px; cursor: pointer; color: var(--encre); } .tdb-liste button:hover { background: var(--survol); } .tdb-liste b { font-variant-numeric: tabular-nums; } .tdb-liste span { color: var(--encre2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tdb-liste small { grid-column: 1 / -1; color: var(--encre2); font-size: 12px; } .tdb-sous { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); margin: 14px 0 4px; } .tdb-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .tdb-chiffres > div { display: grid; background: var(--vert-pale); border-radius: 10px; padding: 10px 12px; } .tdb-chiffres b { font-size: 20px; color: var(--lien); font-variant-numeric: tabular-nums; } .tdb-chiffres span { font-size: 12px; color: var(--encre2); } .graphe { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 130px; padding: 6px 0 0; } .graphe-col { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; } .graphe-barre { align-self: end; background: var(--vert); border-radius: 5px 5px 0 0; min-height: 2px; } .graphe-col:last-child .graphe-barre { background: var(--action); } .graphe-col small { font-size: 10px; color: var(--encre2); margin-top: 3px; } @media (max-width: 900px) { .tdb-grille { grid-template-columns: 1fr; } .tdb-chiffres { grid-template-columns: 1fr; } } /* Planning de l'organisme. */ .pl-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pl-nav b { margin-left: 8px; } .pl { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; overflow-x: auto; } .pl-ligne { display: grid; grid-template-columns: 170px minmax(620px, 1fr); border-bottom: 1px solid var(--trait-leger); } .pl-lib { display: grid; align-content: center; padding: 6px 10px; border-right: 1px solid var(--trait); min-width: 0; } .pl-lib b { font-size: 14px; } .pl-lib small { color: var(--encre2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-piste { display: grid; grid-template-columns: repeat(14, minmax(44px, 1fr)); position: relative; } .pl-case { grid-row: 1; border-right: 1px solid var(--trait-leger); min-height: 44px; } .pl-we { background: var(--survol); } .pl-auj { background: color-mix(in srgb, var(--action) 9%, transparent); } .pl-tete .pl-piste { position: sticky; top: 0; } .pl-jour { grid-row: 1; display: grid; justify-items: center; padding: 6px 0; border-right: 1px solid var(--trait-leger); font-size: 12px; } .pl-jour b { font-size: 15px; } .pl-jour.pl-auj b { color: var(--action); } .pl-barre { --tc: var(--vert); grid-row: 1; z-index: 1; align-self: center; margin: 6px 3px; min-height: 30px; border: 0; border-radius: 7px; padding: 4px 8px; background: var(--tc); color: #fff; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pl-barre:hover { filter: brightness(1.1); } .pl-planifie { --tc: #64748B; } .pl-en_cours { --tc: #1D5FA8; } .pl-attente_pieces { --tc: #B45309; } .pl-termine { --tc: #15803D; } .pl-livre { --tc: #94A3B8; } .pl-retard { --tc: #C4320A !important; } .pl-loc { --tc: #7C3AED; } .pl-pret { --tc: #0E7490; } .pl-groupe { padding: 8px 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); background: var(--papier); border-bottom: 1px solid var(--trait); } .pl-vide { padding: 12px 14px; margin: 0; } .pl-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--encre2); margin: 10px 0 4px; } .pl-l { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--tc); } /* Flotte. */ .fl-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .fl-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; border-top: 4px solid var(--vert); } .fl-vert { border-top-color: #15803D; } .fl-bleu { border-top-color: var(--vert); } .fl-ambre { border-top-color: #B45309; } .fl-rouge { border-top-color: #C4320A; } .fl-tete { display: grid; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--encre); } .fl-tete b { font-size: 18px; letter-spacing: .02em; } .fl-tete span { color: var(--encre2); font-size: 13px; } .fl-etat, .fl-carte p { margin: 0; } .fl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .rc-table input { font: inherit; min-height: 38px; padding: 6px 9px; border: 1px solid var(--trait); border-radius: 7px; width: 100%; background: var(--blanc); color: var(--encre); } @media print { .sb, .topbar, .fp-actions, .toasts { display: none !important; } .main { margin: 0; } } .tableau td.nw { white-space: nowrap; } .fl-etat .pastille { white-space: normal; } .cases-grille .case { margin: 3px 0; } /* Sur téléphone, les actions d'une fiche passent à la ligne : aucune n'est cachée hors de l'écran. */ @media (max-width: 760px) { .fp-actions { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 10px 14px; } .fp-actions .btn { flex: 1 1 auto; min-height: 42px; padding: 8px 12px; font-size: 14px; justify-content: center; } } /* ── Gestion : dépenses, livre des recettes, recettes et dépenses, objectifs ── */ :root { --serie-ventes: #1D5FA8; --serie-charges: #D97706; } :root[data-theme="dark"] { --serie-ventes: #4B8BD6; --serie-charges: #D97706; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-ventes: #4B8BD6; --serie-charges: #D97706; } } .ico-seul { display: inline-flex; color: var(--accent); vertical-align: middle; } .dep-tva { margin: 0; } .dep-tva tfoot td { font-weight: 700; border-top: 1px solid var(--trait-fort); } .dep-justif { display: grid; gap: 8px; } .dep-justif img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--trait); border-radius: 8px; background: #fff; } .dep-pdf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; color: var(--lien); text-decoration: none; background: var(--survol); } .dep-pdf span { display: grid; } .dep-pdf small { color: var(--encre2); } .dep-justif-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .dep-justif-pied .lien-txt { display: inline-flex; align-items: center; gap: 4px; } .dep-ttc-ligne { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 12px; background: var(--vert-pale); border-radius: 10px; } .dep-ttc-ligne label { font-weight: 600; font-size: 14px; } .dep-ttc-saisie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dep-ttc-saisie input, .dep-ttc-saisie select { font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); } .dep-ttc-saisie input { width: 140px; } .dep-total { margin: 4px 0 12px; font-size: 15px; } .rc-depense { display: grid; gap: 8px; margin: 12px 0 4px; padding: 12px; border: 1px solid var(--trait); border-radius: 10px; } .gs-periode { flex-wrap: wrap; gap: 10px; } .gs-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; } .gs-dates input, .gs-mois input { font: inherit; min-height: 38px; padding: 5px 8px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); } .gs-mois { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } .gs-titre-impression { display: none; } .gs-sous-titre { font-size: 17px; margin: 22px 0 10px; color: var(--lien); } .gs-sous-titre small { font-size: 13px; font-weight: 500; color: var(--encre2); margin-left: 6px; } .gs-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; } .gs-chiffres > div { display: grid; align-content: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; } .gs-chiffres b { font-size: 21px; color: var(--encre); font-variant-numeric: tabular-nums; } .gs-chiffres span { font-size: 13px; color: var(--encre2); } .gs-chiffres .gs-positif { box-shadow: inset 3px 0 0 #15803D; } .gs-chiffres .gs-negatif { box-shadow: inset 3px 0 0 var(--rouge); } .gs-chiffres .gs-negatif b { color: var(--rouge-txt); } .gs-modes { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin: 0 0 12px; } .gs-table td, .gs-table th { font-variant-numeric: tabular-nums; } .gs-table tbody th { text-align: left; font-weight: 600; white-space: nowrap; } .gs-table tfoot td, .gs-table tfoot th { font-weight: 700; border-top: 2px solid var(--trait-fort); background: var(--survol); } .gs-table .gs-sep { border-left: 2px solid var(--trait); } .gs-table tr.gs-courant th, .gs-table tr.gs-courant td { background: var(--vert-pale); } .gs-part { min-width: 120px; } .gs-part { position: relative; } .gs-part-barre { position: absolute; left: 6px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--vert-trait); max-width: calc(100% - 50px); } .gs-part span:last-child { position: relative; } .gs-obj { font: inherit; width: 110px; min-height: 36px; padding: 4px 8px; text-align: right; border: 1px solid var(--trait-fort); border-radius: 7px; background: var(--blanc); color: var(--encre); } .gs-jauge { position: relative; display: inline-block; vertical-align: middle; width: 76px; height: 8px; border-radius: 4px; background: var(--gris-pale); margin-right: 8px; } .gs-jauge span { display: block; height: 100%; border-radius: 4px; background: var(--serie-ventes); } .gs-jauge.gs-ok span { background: var(--etat-ok); } .gs-jauge.gs-proche span { background: var(--etat-proche); } .gs-jauge.gs-loin span { background: var(--etat-loin); } /* Le rythme attendu à ce jour (mois en cours). */ .gs-jauge i { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--encre); } .gs-jauge-txt { font-size: 13px; font-variant-numeric: tabular-nums; } .gs-prod-tete { margin-top: 8px; align-items: flex-end; } .gs-prod-tete .gs-sous-titre { margin-bottom: 0; } .gs-tdb-obj { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--trait-leger); } .gs-tdb-obj > div { display: grid; } .gs-tdb-obj b { font-size: 19px; font-variant-numeric: tabular-nums; } .gs-tdb-obj span { font-size: 12px; color: var(--encre2); } /* Graphique : deux séries, une seule échelle, bulle au survol et au clavier. */ .gs-graphe { position: relative; margin: 6px 0 4px; padding: 12px 14px 8px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; } .gs-graphe figcaption { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre2); margin-bottom: 8px; } .gs-leg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; } .gs-leg:first-child { margin-left: 0; } .gs-leg-ventes { background: var(--serie-ventes); } .gs-leg-charges { background: var(--serie-charges); } .gs-graphe-zone { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 170px; border-bottom: 1px solid var(--trait-fort); } .gs-col { display: grid; grid-template-rows: 1fr auto; height: 100%; border-radius: 6px; outline-offset: 2px; cursor: default; } .gs-col:hover, .gs-col:focus { background: var(--survol); } .gs-barres { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; padding: 0 3px; } .gs-b { display: block; width: min(18px, 40%); border-radius: 4px 4px 0 0; } .gs-b-ventes { background: var(--serie-ventes); } .gs-b-charges { background: var(--serie-charges); } .gs-col small { font-size: 11px; color: var(--encre2); text-align: center; padding: 4px 0 0; } .gs-bulle { position: absolute; top: 34px; max-width: 280px; padding: 7px 10px; font-size: 13px; line-height: 1.35; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: 8px; box-shadow: var(--ombre); pointer-events: none; z-index: 2; } @media print { .gs-periode, .gs-outils, .aide, .gs-graphe .gs-bulle { display: none !important; } .gs-titre-impression { display: block; font-size: 16px; margin: 0 0 10px; } .gs-chiffres > div { border-color: #999; } .tableau-zone { overflow: visible !important; } } .gs-chiffres span b { font-size: inherit; } .tdb-chiffres span b, .gs-tdb-obj span b { font-size: inherit; } .gs-objectifs td, .gs-table td:last-child { white-space: nowrap; } /* ── TVA, export comptable, e-reporting ── */ .bandeau-bleu { background: var(--bleu-pale); color: var(--bleu-texte); border: 1px solid var(--vert-trait); } .gs-regles { font-size: 14px; color: var(--encre2); margin: 0 0 12px; } .gs-chiffres .gs-fort { box-shadow: inset 3px 0 0 var(--action); } .gs-table tr.gs-fort td { font-weight: 700; background: var(--survol); } .gs-ca3 td:first-child { width: 56px; color: var(--encre2); font-weight: 700; } .gs-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .gs-deux > section { min-width: 0; } @media (max-width: 1000px) { .gs-deux { grid-template-columns: 1fr; } } .gs-details { margin: 16px 0; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); padding: 4px 14px; } .gs-details > summary { cursor: pointer; font-weight: 700; color: var(--lien); padding: 10px 0; } .gs-details h4 { margin: 14px 0 8px; } .gs-fichier { font-size: 15px !important; word-break: break-all; } .gs-exports { align-items: center; margin-top: 14px; } .gs-reglages { max-width: 780px; padding: 0 0 4px; border: 0; border-radius: 0; background: none; } .gs-reglages .interrupteur { margin: 10px 0 4px; } .gs-cloture { display: flex; gap: 8px; } .gs-cloture select, .gs-compte { font: inherit; min-height: 38px; padding: 5px 8px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); } .gs-compte { width: 130px; font-variant-numeric: tabular-nums; } /* ── Lecteur de codes-barres ── */ .scan-voile { position: fixed; inset: 0; z-index: 120; background: rgba(8, 12, 18, .72); display: grid; place-items: center; padding: 16px; } .scan-boite { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--blanc); color: var(--encre); border-radius: 14px; box-shadow: var(--ombre); padding: 14px; display: grid; gap: 10px; } .scan-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .scan-tete .fp-fermer { color: var(--encre); background: var(--gris-pale); } .scan-video { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: 10px; overflow: hidden; } .scan-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .scan-cadre { position: absolute; left: 10%; right: 10%; top: 32%; bottom: 32%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 8px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); } .scan-etat { margin: 0; font-weight: 600; min-height: 22px; } .scan-erreur { color: var(--rouge-txt); } .scan-saisie { display: grid; gap: 4px; } .scan-saisie > div { display: flex; gap: 8px; } .scan-saisie input { flex: 1; font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); } .scan-liste { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; font-size: 14px; } .scan-liste li { padding: 5px 0; border-bottom: 1px solid var(--trait-leger); } .scan-pied { display: flex; justify-content: flex-end; } .scan-champ { margin-top: 6px; } .rc-boutons { display: flex; flex-wrap: wrap; gap: 8px; } tr.scan-vu td { background: var(--vert-pale); } @media (max-width: 600px) { .gs-ca3 thead { display: none; } .gs-ca3 tr { display: grid; grid-template-columns: 44px 1fr; padding: 8px 0; border-bottom: 1px solid var(--trait-leger); } .gs-ca3 td { border: 0 !important; padding: 2px 10px !important; background: none !important; } .gs-ca3 td:nth-child(3), .gs-ca3 td:nth-child(4) { grid-column: 2; text-align: left; } .gs-ca3 td:nth-child(3):empty, .gs-ca3 td:nth-child(4):empty { display: none; } .gs-ca3 td:nth-child(3)::before { content: 'Base hors taxe : '; color: var(--encre2); font-weight: 400; } .gs-ca3 td:nth-child(4)::before { content: 'Taxe : '; color: var(--encre2); font-weight: 400; } } /* ── Rappels ── */ .rp-actions { white-space: nowrap; } .rp-actions .btn { margin: 2px 4px 2px 0; } .rp-code { display: block; padding: 8px 10px; margin: 4px 0 8px; background: var(--gris-pale); border-radius: 8px; font-size: 13px; word-break: break-all; user-select: all; } @media (max-width: 760px) { .rp-actions { white-space: normal; } } /* ── Objectifs et productivité : états, chiffres clés, graphiques ── */ /* États (jamais seuls : toujours une icône et un mot). Vérifiés : contraste ≥ 3:1 sur la surface. */ :root { --etat-ok: #15803D; --etat-proche: #D97706; --etat-loin: #B42318; --teinte-bleu-fond: #E3EDFA; --teinte-bleu: #1D5FA8; --teinte-violet-fond: #EEE9FB; --teinte-violet: #6D28D9; --teinte-ambre-fond: #FDF0DC; --teinte-ambre: #B54708; --teinte-vert-fond: #E3F4E6; --teinte-vert: #15803D; } :root[data-theme="dark"] { --etat-ok: #23A04A; --etat-proche: #D6A10C; --etat-loin: #F0566A; --teinte-bleu-fond: #1B2A40; --teinte-bleu: #7FB0EA; --teinte-violet-fond: #2A2340; --teinte-violet: #B9A4F5; --teinte-ambre-fond: #33260F; --teinte-ambre: #F5B35C; --teinte-vert-fond: #16301F; --teinte-vert: #6FD08C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --etat-ok: #23A04A; --etat-proche: #D6A10C; --etat-loin: #F0566A; --teinte-bleu-fond: #1B2A40; --teinte-bleu: #7FB0EA; --teinte-violet-fond: #2A2340; --teinte-violet: #B9A4F5; --teinte-ambre-fond: #33260F; --teinte-ambre: #F5B35C; --teinte-vert-fond: #16301F; --teinte-vert: #6FD08C; } } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gs-etat { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font-variant-numeric: tabular-nums; padding: 2px 8px 2px 6px; } .gs-etat svg { flex: none; } .gs-legende-etats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 2px; font-size: 13px; } .gs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 12px; } .gs-kpi { display: flex; gap: 12px; align-items: flex-start; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 14px; box-shadow: inset 4px 0 0 var(--trait-fort); } .gs-kpi-ok { box-shadow: inset 4px 0 0 var(--etat-ok); } .gs-kpi-proche { box-shadow: inset 4px 0 0 var(--etat-proche); } .gs-kpi-loin { box-shadow: inset 4px 0 0 var(--etat-loin); } .gs-kpi > div { display: grid; gap: 2px; min-width: 0; } .gs-kpi b { font-size: 22px; color: var(--encre); font-variant-numeric: tabular-nums; line-height: 1.2; } .gs-kpi span { font-size: 13px; color: var(--encre2); } .gs-kpi .gs-kpi-jauge { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .gs-kpi .gs-kpi-jauge .gs-jauge { width: 110px; } .gs-kpi-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; } .gs-kpi .gs-kpi-ico { color: inherit; } .gs-teinte-bleu { background: var(--teinte-bleu-fond); color: var(--teinte-bleu) !important; } .gs-teinte-violet { background: var(--teinte-violet-fond); color: var(--teinte-violet) !important; } .gs-teinte-ambre { background: var(--teinte-ambre-fond); color: var(--teinte-ambre) !important; } .gs-teinte-vert { background: var(--teinte-vert-fond); color: var(--teinte-vert) !important; } .gs-graphes-obj { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; margin-bottom: 12px; } .gs-graphe-obj { margin: 0; } .gs-graphe-obj figcaption b { color: var(--encre); margin-right: auto; font-size: 14px; } .gs-graphe-obj .gs-graphe-zone { height: 150px; gap: 4px; } .gs-barres-obj { position: relative; } .gs-barres-obj .gs-b { width: min(22px, 60%); } .gs-cible { position: absolute; left: 14%; right: 14%; height: 2px; margin-bottom: -1px; border-radius: 1px; background: var(--encre); } .gs-leg-obj { width: 14px !important; height: 2px !important; border-radius: 1px !important; background: var(--encre); vertical-align: middle; } .gs-col-courante { background: var(--vert-pale); } .gs-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; font-size: 11px; font-weight: 800; background: var(--teinte-bleu-fond); color: var(--teinte-bleu); vertical-align: middle; } .gs-obj { width: 88px; } .gs-objectifs .gs-jauge { width: 60px; } @media (max-width: 640px) { .gs-graphes-obj { grid-template-columns: 1fr; } .gs-kpis { grid-template-columns: 1fr; } } @media print { .gs-legende-etats .discret { display: none; } } /* ── Réglages des rappels ── */ .rp-reglages { padding: 0; } .rp-reglages > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px; list-style: none; } .rp-reglages > summary::-webkit-details-marker { display: none; } .rp-reglages > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; } .rp-reglages[open] > summary::after { transform: rotate(-135deg); } .rp-reglages > summary svg { color: var(--accent); } .rp-reglages[open] > summary { border-bottom: 1px solid var(--trait); } .rp-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .rp-bloc { padding: 18px 20px; border-bottom: 1px solid var(--trait-leger); display: grid; gap: 12px; } .rp-bloc h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); } .rp-bloc h4 .pastille { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; } .rp-bloc .aide { margin: 0; } .rp-bloc .champ { margin: 0; } /* Interrupteur : case à cocher accessible (role="switch"), libellé et explication à côté. */ .interrupteur { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .interrupteur input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; } .interrupteur-piste { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--trait-fort); transition: background .15s; } .interrupteur-piste::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; } .interrupteur input:checked + .interrupteur-piste { background: var(--vert); } .interrupteur input:checked + .interrupteur-piste::after { transform: translateX(18px); } .interrupteur input:focus-visible + .interrupteur-piste { outline: 3px solid var(--vert); outline-offset: 2px; } .interrupteur > span:last-child { display: grid; gap: 2px; padding-top: 2px; } .interrupteur b { font-size: 14px; color: var(--encre); } .interrupteur small { font-size: 13px; color: var(--encre2); line-height: 1.4; } .rp-delais { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); gap: 12px 20px; } .rp-jours { display: flex; align-items: center; gap: 8px; } .rp-jours input { width: 88px !important; text-align: right; } .rp-jours span { font-size: 14px; color: var(--encre2); white-space: nowrap; } .rp-message { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .rp-message textarea { width: 100%; resize: vertical; min-height: 96px; } .rp-compteur { display: block; margin-top: 4px; } .rp-apercu { margin: 0; border: 1px solid var(--trait); border-radius: 10px; background: var(--papier); overflow: hidden; } .rp-apercu figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--encre2); border-bottom: 1px solid var(--trait); background: var(--blanc); } .rp-apercu-objet { padding: 10px 12px 0; font-weight: 700; font-size: 14px; color: var(--encre); } .rp-apercu-texte { padding: 6px 12px 12px; font-size: 13px; line-height: 1.5; color: var(--encre); white-space: pre-line; max-height: 260px; overflow: auto; } .rp-code-ligne { display: flex; align-items: center; gap: 8px; } .rp-code-ligne .rp-code { flex: 1; margin: 0; min-width: 0; } .rp-web > summary { cursor: pointer; font-size: 14px; color: var(--lien); font-weight: 600; } .rp-web[open] > summary { margin-bottom: 8px; } .rp-web .aide { margin-bottom: 8px; } .rp-reglages .form-erreur { margin: 12px 20px 0; } .rp-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 20px; background: var(--blanc); border-top: 1px solid var(--trait); border-radius: 0 0 10px 10px; } .rp-pied.actif { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -6px 16px rgba(16, 24, 40, .08); } .rp-pied #rp-modifie { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ambre-texte); font-size: 13px; font-weight: 600; } .rp-pied #rp-modifie[hidden] { display: none; } .rp-pied .btn:disabled { opacity: .5; cursor: default; } @media (max-width: 760px) { .rp-message { grid-template-columns: 1fr; } .rp-bloc { padding: 16px 14px; } .rp-reglages > summary { padding: 12px 14px; } .rp-code-ligne { flex-direction: column; align-items: stretch; } .rp-pied { padding: 10px 14px; gap: 6px 12px; } .rp-pied #rp-modifie { flex-basis: 100%; } .rp-pied .btn { flex: 1; justify-content: center; } } .rp-reglages { scroll-margin-top: 76px; } /* ── Éditeur de lignes : poignée, glisser-déposer, désignation extensible, remise globale ── */ #lg-zone { position: relative; } .lg-liste { position: relative; } .lg { grid-template-columns: 34px minmax(0, 1fr) auto; transition: box-shadow .2s, border-color .2s; } .lg-poignee { display: grid; justify-items: center; align-content: start; gap: 2px; width: 30px; min-height: 40px; padding: 6px 0; border: 0; border-radius: 7px; background: none; color: var(--encre3); cursor: grab; touch-action: none; font: inherit; } .lg-poignee span { font-size: 11px; font-weight: 800; } .lg-poignee:hover, .lg-poignee:focus-visible { background: var(--survol); color: var(--encre); } .lg-poignee:active { cursor: grabbing; } .lg-source { opacity: .35; } .lg-fantome { position: fixed; z-index: 90; pointer-events: none; margin: 0; box-shadow: 0 14px 34px rgba(16, 24, 40, .25); border-color: var(--vert); transform: rotate(.4deg); } .lg-repere { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); pointer-events: none; } .lg-deposee { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); } .lg-des-zone { position: relative; flex: 1; min-width: 0; } .lg textarea.lg-des { display: block; width: 100%; min-height: 38px; font: inherit; font-size: 14px; line-height: 1.4; padding: 8px 32px 8px 9px; resize: none; overflow: hidden; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); } .lg textarea.lg-des:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .lg textarea.lg-des.lg-grand { min-height: 150px; resize: vertical; } .lg-txt textarea.lg-des { font-style: italic; } .lg-agrandir { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--encre3); cursor: pointer; } .lg-agrandir:hover, .lg-agrandir:focus-visible { background: var(--survol); color: var(--encre); } /* Désignation agrandie : elle prend toute la largeur, sous le type et le montant. */ .lg-ouverte .lg-l1 { flex-wrap: wrap; } .lg-ouverte .lg-l1 .lg-des-zone { order: 3; flex-basis: 100%; } .lg-ouverte .lg-l1 .lg-total { margin-left: auto; } .lg-txt { grid-template-columns: 34px minmax(0, 1fr) auto; } .lg-total { display: grid; justify-items: end; padding-top: 8px; align-self: start; } .lg-part { font-size: 11px; font-weight: 600; color: var(--encre2); } .lg-outils { padding-top: 4px; } .lg-multi { white-space: pre-line; } /* Suggestions du catalogue sous la désignation. */ .lg-sugg { position: absolute; z-index: 5; max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: 10px; box-shadow: var(--ombre); } .lg-sugg li { display: grid; gap: 1px; padding: 7px 10px; border-radius: 7px; cursor: pointer; } .lg-sugg li b { font-size: 14px; font-weight: 600; color: var(--encre); } .lg-sugg li span { font-size: 12px; color: var(--encre2); } .lg-sugg li:hover, .lg-sugg li.actif { background: var(--vert-pale); } /* Pied : remise globale à gauche, totaux à droite. */ .lg-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); } .lg-pied .lg-totaux { margin: 0 0 0 auto; } .lg-remise { display: grid; gap: 6px; max-width: 340px; } .lg-remise > label { font-size: 13px; font-weight: 700; color: var(--encre); } .lg-remise-saisie { display: flex; align-items: center; gap: 6px; } .lg-remise-saisie input { width: 110px; font: inherit; font-size: 15px; min-height: 40px; padding: 6px 10px; text-align: right; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); font-variant-numeric: tabular-nums; } .lg-remise-saisie input:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .lg-bascule { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--gris-pale); } .lg-bascule button { min-width: 44px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--encre2); cursor: pointer; } .lg-bascule button.actif { background: var(--blanc); color: var(--lien); box-shadow: 0 1px 3px rgba(16, 24, 40, .15); } .lg-remise .aide { margin: 0; line-height: 1.4; } .lg-totaux .lg-remise-ligne td { color: var(--vert-pastille-texte); font-weight: 600; } .toast { display: flex; align-items: center; gap: 12px; } .toast-action { margin-left: auto; border: 0; background: none; color: #fff; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 2px 4px; } @media (max-width: 700px) { .lg { grid-template-columns: 30px minmax(0, 1fr); } .lg-outils { grid-column: 2; } .lg-pied .lg-totaux { margin: 0; width: 100%; } } .panneau-form > .interrupteur { margin: 10px 0 16px; } /* ── Paramètres : rubriques à gauche, onglet à droite ── */ .corps-page.avec-prm { display: grid; grid-template-columns: 252px minmax(0, 1fr); max-width: 1300px; } .corps-page.avec-prm .contenu { max-width: 960px; min-width: 0; } .prm-nav { position: sticky; top: 68px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; padding: 22px 0 24px 20px; } .prm-groupe { margin-bottom: 14px; } .prm-groupe-titre { padding: 0 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre3); } .prm-lien { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 10px; border-radius: 9px; color: var(--encre); text-decoration: none; font-size: 14px; font-weight: 500; } .prm-lien svg { flex: none; color: var(--encre3); } .prm-lien:hover { background: var(--survol); } .prm-lien.actif { background: var(--vert-pale); color: var(--lien); font-weight: 700; box-shadow: inset 3px 0 0 var(--vert); } .prm-lien.actif svg { color: var(--accent); } .prm-lien:focus-visible { outline: 3px solid var(--vert); outline-offset: -3px; } /* Un onglet : une carte, des blocs séparés, la barre d'enregistrement en bas. */ .prm-form { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; } .prm-tete { padding: 20px 22px 14px; border-bottom: 1px solid var(--trait); } .prm-tete h2 { margin: 0 0 4px; font-size: 19px; color: var(--encre); } .prm-tete p { margin: 0; font-size: 14px; color: var(--encre2); line-height: 1.45; } .prm-bloc { display: grid; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--trait-leger); } .prm-bloc h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); } .prm-bloc h3 .pastille { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; } .prm-bloc .champ { margin: 0; } .prm-bloc .aide, .prm-bloc p { margin: 0; } .prm-bloc .champ-ligne { gap: 12px 16px; align-items: start; } .prm-bloc .bandeau { margin: 0; } .prm-form .form-erreur { margin: 12px 22px 0; } .prm-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; padding: 12px 22px; border-radius: 0 0 12px 12px; background: var(--blanc); } .prm-pied.actif { position: sticky; bottom: 0; z-index: 3; border-top: 1px solid var(--trait); box-shadow: 0 -6px 16px rgba(16, 24, 40, .08); } .prm-modifie { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ambre-texte); font-size: 13px; font-weight: 600; } .prm-modifie[hidden], .prm-annuler[hidden] { display: none; } .prm-pied .btn:disabled { opacity: .5; cursor: default; } .prm-form .marque-edit { margin: 0; } @media (max-width: 900px) { .corps-page.avec-prm { display: block; } /* Sur téléphone : les rubriques deviennent une bande qui défile, sous la barre du haut. */ .prm-nav { position: sticky; top: 56px; z-index: 5; display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px 12px; background: var(--papier); border-bottom: 1px solid var(--trait); scrollbar-width: none; } .prm-nav::-webkit-scrollbar { display: none; } .prm-groupe { display: contents; } .prm-groupe-titre { display: none; } .prm-lien { flex: none; min-height: 36px; padding: 6px 12px; border: 1px solid var(--trait); border-radius: 18px; background: var(--blanc); white-space: nowrap; font-size: 13px; } .prm-lien.actif { box-shadow: none; border-color: var(--vert); } .prm-tete, .prm-bloc { padding-left: 14px; padding-right: 14px; } .prm-pied { padding: 10px 14px; } .prm-modifie { flex-basis: 100%; } .prm-pied .btn { flex: 1; justify-content: center; } } @media print { .prm-nav { display: none !important; } } /* Rappels : le nom du client aligné sur ses coordonnées. */ .rp-table td .lien-txt { padding: 0; text-align: left; } .rp-contact { display: block; margin-top: 2px; } span.nw { white-space: nowrap; } /* ── Historique des envois ── */ .env-tete { margin-bottom: 12px; } .env-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .env-kpis .gs-kpi { padding: 12px; gap: 10px; } .env-kpis .gs-kpi-ico { width: 34px; height: 34px; } .env-type { font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); } .env-table td { vertical-align: top; } .env-table .lien-txt { padding: 0; text-align: left; } .env-objet, .env-vu { display: block; margin-top: 2px; } .env-dest { overflow-wrap: anywhere; } .env-piece { min-width: 180px; } .env-piece .lien-txt, .env-piece b { white-space: nowrap; } .env-par { white-space: nowrap; } .env-etat { display: inline-flex; align-items: center; gap: 4px; } .env-erreur { display: block; margin-top: 3px; font-size: 12px; color: var(--rouge-txt); max-width: 260px; } .env-heure { display: block; margin-top: 1px; } .env-relance { display: flex; margin-top: 6px; white-space: nowrap; } .env-fiche { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .env-fiche li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; } @media (max-width: 760px) { /* Sur téléphone, chaque envoi devient une carte. */ .env-table thead { display: none; } .env-table, .env-table tbody, .env-table tr, .env-table td { display: block; width: 100%; } .env-table tr { padding: 10px 12px; border-bottom: 1px solid var(--trait); } .env-table td { padding: 2px 0; border: 0; } .env-table td:first-child { font-size: 12px; color: var(--encre2); } } .env-attente { display: block; margin-top: 3px; font-size: 12px; color: var(--ambre-texte); } .soc-messagerie { margin-top: 18px; } .env-vu svg { vertical-align: -2px; } /* ── Envoi des e-mails, relances, paiement en ligne (1.8) ─────────────── */ .em-sous, .em-smtp { margin-left: 56px !important; } .em-smtp { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--trait-leger); border-radius: 12px; background: var(--survol); } .em-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px 16px; } .em-grille .champ { margin: 0; } .em-note { font-size: 13px; } .em-test { display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap; } .em-test .champ { flex: 1 1 260px; margin: 0; } .em-res { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 11px 14px; font-size: 14px; } .em-res > div { display: grid; gap: 3px; min-width: 0; } .em-res span { font-size: 13px; } .em-res.ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); border: 1px solid color-mix(in srgb, var(--vert-pastille-texte) 25%, transparent); } .em-res.ko { background: var(--rouge-fond); color: var(--rouge-texte); border: 1px solid var(--rouge-trait); } .em-res details { margin-top: 4px; font-size: 12.5px; } .em-res pre { white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.05); font-size: 12px; } .rl-apercu { align-self: stretch; } .rl-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .rl-chiffres > div { display: grid; background: var(--vert-pale); border-radius: 10px; padding: 8px 10px; } .rl-chiffres b { font-size: 18px; color: var(--lien); font-variant-numeric: tabular-nums; } .rl-chiffres span { font-size: 11.5px; color: var(--encre2); line-height: 1.3; } .rl-apercu small { display: block; margin-top: 6px; } .rl-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; font-size: 14px; } .fp-impaye { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: -4px 0 12px; font-size: 13px; color: var(--encre2); } .fp-impaye .lien-txt { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; } .fp-enfant.echec b { color: var(--rouge-texte); } .pp-compte { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--trait-leger); border-radius: 12px; } .pp-compte > div { display: grid; flex: 1; min-width: 0; } .pp-compte span { font-size: 12.5px; color: var(--encre2); overflow-wrap: anywhere; } .prm-bloc code { font-size: 12.5px; } @media (max-width: 700px) { .em-sous, .em-smtp { margin-left: 0 !important; } .em-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .em-grille .em-hote { grid-column: 1 / -1; } .rl-chiffres { grid-template-columns: 1fr 1fr 1fr; } .fp-impaye .lien-txt { margin-left: 0; } } .md-pied .lien-txt { white-space: nowrap; } @media (max-width: 520px) { .rl-tete { font-size: 13px; } } .pp-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pp-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: 12px; cursor: pointer; background: var(--blanc); } .pp-mode input { margin-top: 3px; accent-color: var(--vert); } .pp-mode > span { display: grid; gap: 3px; } .pp-mode b { display: inline-flex; align-items: center; gap: 6px; } .pp-mode small { color: var(--encre2); font-size: 12.5px; line-height: 1.4; } .pp-mode.choisi { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); } .pp-frais { display: grid; grid-template-columns: repeat(3, auto) minmax(0, 1fr); gap: 10px 16px; align-items: end; } .pp-frais .champ { margin: 0; } .pp-simu-res { font-size: 13.5px; line-height: 1.45; padding: 8px 12px; border-radius: 10px; background: var(--vert-pale); align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .pp-bilan { margin-top: 4px; } .pp-essais { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pp-essais li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; } .pp-essais small { display: block; color: var(--encre2); font-size: 12px; } @media (max-width: 700px) { .pp-modes { grid-template-columns: 1fr; } .pp-frais { grid-template-columns: 1fr 1fr; } .pp-simu-res { grid-column: 1 / -1; } } /* ── Éditeur des lignes (2.0) ──────────────────────────────────────────── */ :root { --p-piece-f: #E3ECF9; --p-piece-t: #1D4F91; --p-mo-f: #FDE9DA; --p-mo-t: #9A3412; --p-forfait-f: #ECE6FA; --p-forfait-t: #5B3A9E; --p-kit-f: #FFF1E6; --p-kit-t: #9A3412; --nuit: #13294B; --courant: #FFF7F1; --courant-trait: #F4B48E; } :root[data-theme="dark"] { --p-piece-f: #1B2A45; --p-piece-t: #A9C4F5; --p-mo-f: #3A2416; --p-mo-t: #F8B98E; --p-forfait-f: #2A2240; --p-forfait-t: #CDB8F5; --p-kit-f: #35230F; --p-kit-t: #F5C57A; --nuit: #0E1B30; --courant: #2A2118; --courant-trait: #7A4A2A; } @media (prefers-color-scheme: dark) { :root.theme-auto { --p-piece-f: #1B2A45; --p-piece-t: #A9C4F5; --p-mo-f: #3A2416; --p-mo-t: #F8B98E; --p-forfait-f: #2A2240; --p-forfait-t: #CDB8F5; --p-kit-f: #35230F; --p-kit-t: #F5C57A; --nuit: #0E1B30; --courant: #2A2118; --courant-trait: #7A4A2A; } } .md.md-lignes { width: min(1240px, 100%); min-width: 0; height: calc(100vh - 32px); } .md.md-lignes .md-corps, #lg-zone, .le-table, #lg-liste { min-width: 0; } .md.md-lignes .md-tete { background: var(--nuit); color: #FFFFFF; border-radius: 14px 14px 0 0; border-bottom: 0; } .md.md-lignes .md-tete h2 { color: #FFFFFF; } .md.md-lignes .md-fermer { color: #FFFFFF; background: rgba(255,255,255,.12); border-radius: 9px; width: 36px; height: 36px; } .md.md-lignes .md-corps { padding: 0; flex: 1; } .md.md-lignes .md-pied { padding: 12px 20px; background: var(--survol); border-radius: 0 0 14px 14px; } .le-zone { position: relative; } .le-outils { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 20px; background: var(--survol); border-bottom: 1px solid var(--trait); } .le-cherche { position: relative; flex: 1 1 360px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px; background: var(--blanc); border: 1.5px solid var(--trait-fort); border-radius: 10px; color: var(--encre2); } .le-cherche:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); } .le-cherche input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14.5px; background: transparent; color: var(--encre); } .le-cherche kbd, .le-menu kbd { font: 700 11px/1 inherit; color: var(--encre3); border: 1px solid var(--trait); border-radius: 5px; padding: 3px 6px; } .le-scan { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--gris-pale); color: var(--lien); font: inherit; font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 7px; cursor: pointer; } .le-ajouts { display: flex; flex-wrap: wrap; gap: 6px; } .le-ajout { height: 42px; padding: 0 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--encre); } .le-ajout:hover { background: var(--survol); } .le-ajout.le-p-piece { color: var(--p-piece-t); } .le-ajout.le-p-mo { color: var(--p-mo-t); } .le-ajout.le-p-forfait { color: var(--p-forfait-t); } .le-ajout.le-p-divers, .le-ajout.le-p-texte { color: var(--gris-texte); } .le-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 20px 0; font-size: 13px; color: var(--encre2); } .le-opt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .le-opt small { font-weight: 500; color: var(--encre3); } .le-interr { position: relative; cursor: pointer; } .le-interr input { position: absolute; opacity: 0; width: 38px; height: 22px; margin: 0; cursor: pointer; } .le-interr .interrupteur-piste { transform: scale(.8); transform-origin: left center; margin-right: -6px; } .le-interr input:checked + .interrupteur-piste { background: var(--vert); } .le-interr input:checked + .interrupteur-piste::after { transform: translateX(18px); } .le-interr input:focus-visible + .interrupteur-piste { outline: 3px solid var(--vert); outline-offset: 2px; } .le-leg { display: none; } .le-raccourcis { margin-left: auto; font-size: 12px; color: var(--encre3); } .le-bascule { display: inline-flex; background: var(--gris-pale); border-radius: 8px; padding: 3px; } .le-bascule button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--encre2); padding: 4px 11px; border-radius: 6px; cursor: pointer; min-height: 30px; } .le-bascule button.actif { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 2px rgba(0,0,0,.14); } .le-table { display: flex; flex-direction: column; padding: 8px 20px 0; } .le-tete, .le-rang { display: grid; grid-template-columns: 24px 108px 98px minmax(0, 1fr) 62px 70px 90px 58px 76px 104px 34px; column-gap: 8px; align-items: start; } .le-tete { padding: 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre3); border-bottom: 2px solid var(--trait); } .le-tete .n, .le-rang .n { text-align: right; } .le-rang { position: relative; padding: 8px; border-bottom: 1px solid var(--trait-leger); border-radius: 8px; } .le-rang.courant { background: var(--courant); box-shadow: inset 0 0 0 1.5px var(--courant-trait); } .le-rang input, .le-rang select, .le-rang textarea { font: inherit; font-size: 13.5px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); width: 100%; box-sizing: border-box; min-width: 0; } .le-rang select { padding: 5px 4px; } .le-rang input:focus, .le-rang select:focus, .le-rang textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 20%, transparent); } .le-ref { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px !important; } .le-des { resize: none; line-height: 1.4; display: block; } .le-des-zone { display: grid; gap: 4px; min-width: 0; } .le-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--encre2); min-height: 0; } .le-info:empty { display: none; } .le-sep { color: var(--trait-fort); } .le-info .le-tech { width: auto !important; min-height: 26px !important; padding: 1px 6px !important; font-size: 12px !important; border-radius: 999px !important; background: var(--bleu-pale) !important; color: var(--bleu-texte) !important; border-color: transparent !important; font-weight: 600; } .le-stock { font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; } .le-s-ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .le-s-bas { background: var(--ambre-pale); color: var(--ambre-texte); } .le-s-rupture { background: var(--rouge-pale); color: var(--rouge-texte); } .le-marge { font-weight: 700; } .le-marge.bonne { color: var(--vert-pastille-texte); } .le-marge.moyenne { color: var(--ambre-texte); } .le-marge.faible { color: var(--rouge-texte); } .le-pastille { justify-self: start; margin-top: 5px; border: 0; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: var(--gris-pale); color: var(--gris-texte); } .le-p-piece.le-pastille, .le-puce.le-p-piece { background: var(--p-piece-f); color: var(--p-piece-t); } .le-p-mo.le-pastille, .le-puce.le-p-mo { background: var(--p-mo-f); color: var(--p-mo-t); } .le-p-forfait.le-pastille, .le-puce.le-p-forfait { background: var(--p-forfait-f); color: var(--p-forfait-t); } .le-p-kit.le-pastille, .le-puce.le-p-kit { background: var(--p-kit-f); color: var(--p-kit-t); box-shadow: inset 0 0 0 1px var(--courant-trait); } span.le-pastille { cursor: default; } .le-tot { display: flex; flex-direction: column; align-items: flex-end; padding-top: 7px; font-variant-numeric: tabular-nums; } .le-tot b { font-size: 14px; } .le-tot s { font-size: 11.5px; color: var(--encre3); } .le-tot small { font-size: 11px; color: var(--vert-pastille-texte); white-space: nowrap; } .le-poignee { margin-top: 5px; } .le-plus { height: 34px; width: 34px; border: 0; background: transparent; border-radius: 7px; color: var(--encre2); font-size: 18px; line-height: 1; cursor: pointer; } .le-plus:hover, .le-plus[aria-expanded="true"] { background: var(--gris-pale); } .le-rang.le-sec { grid-template-columns: 24px minmax(0, 1fr) auto auto 34px; align-items: center; margin-top: 10px; background: var(--gris-pale); border-bottom: 0; } .le-rang.le-sec.courant { background: var(--courant); } .le-sec-titre { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .05em; color: var(--lien) !important; background: transparent !important; border-color: transparent !important; } .le-sec-titre:focus { background: var(--blanc) !important; } .le-sec-info { font-size: 12.5px; color: var(--encre2); white-space: nowrap; } .le-sec-st { font-size: 13px; color: var(--encre2); white-space: nowrap; } .le-sec-st b { color: var(--lien); font-size: 14px; } .le-rang.le-txt { grid-template-columns: 24px 108px minmax(0, 1fr) 34px; } .le-rang.le-txt .le-des { font-style: italic; background: var(--survol); } .le-vide { padding: 24px 8px; color: var(--encre2); text-align: center; } .le-ajout-bas { align-self: flex-start; margin: 10px 20px 20px 28px; border: 1.5px dashed var(--trait-fort); background: transparent; color: var(--lien); font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 14px; border-radius: 9px; cursor: pointer; } .le-res { position: absolute; left: 20px; top: 58px; z-index: 6; width: min(680px, calc(100% - 40px)); margin: 0; padding: 0 0 0; list-style: none; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; box-shadow: 0 18px 44px rgba(19, 41, 75, .22); overflow: hidden; max-height: 470px; overflow-y: auto; } .le-res li[data-k] { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 88px; gap: 12px; align-items: center; padding: 9px 14px; cursor: pointer; } .le-res li[data-k].actif, .le-res li[data-k]:hover { background: var(--courant); } .le-res .le-pastille { margin-top: 0; } .le-res-des { display: grid; gap: 1px; min-width: 0; } .le-res-des b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .le-res-des small { font-size: 12px; color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .le-res mark { background: transparent; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 2px; } .le-res .mono { font-family: ui-monospace, Menlo, Consolas, monospace; } .le-puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--trait-leger); } .le-puce { border: 0; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--gris-pale); color: var(--gris-texte); cursor: pointer; } .le-puce.actif { background: var(--nuit); color: #FFFFFF; box-shadow: none; } .le-res-pied { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--trait-leger); background: var(--survol); font-size: 12px; color: var(--encre3); } .le-res-pied button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--lien); cursor: pointer; padding: 4px 0; } .le-res-pied span { margin-left: auto; } .le-menu { position: absolute; z-index: 8; min-width: 240px; max-width: 360px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 16px 40px rgba(19, 41, 75, .22); padding: 6px; display: flex; flex-direction: column; } .le-menu > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; font: inherit; font-size: 13.5px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--encre); min-height: 38px; } .le-menu > button:hover, .le-menu > button:focus { background: var(--survol); outline: none; } .le-menu > button.rouge { color: var(--rouge-txt); font-weight: 600; } .le-menu-sep { height: 1px; background: var(--trait-leger); margin: 4px 6px; } .le-kit-form { display: grid; gap: 8px; padding: 8px; min-width: 300px; } .le-kit-form input:not([type=checkbox]) { font: inherit; min-height: 38px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); } .le-kit-lignes { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; } .le-kit-lignes .case { font-weight: 500; font-size: 13.5px; } .le-kit-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; } .le-kit-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; } .le-kit-liste li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; } .le-kit-liste small { color: var(--encre2); display: block; } .le-pied { width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px 22px; align-items: center; } .le-pied-remise { display: grid; gap: 4px; } .le-pied-remise label { font-size: 12px; font-weight: 700; color: var(--encre2); } .le-pied-remise .lg-remise-saisie { display: flex; gap: 6px; align-items: center; } .le-pied-remise input { width: 72px; min-height: 36px; font: inherit; text-align: right; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); } .le-pied-remise .aide { max-width: 230px; } .le-marge-tot { display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; font-size: 12px; max-width: 230px; } .le-marge-tot b { font-size: 15px; } .le-marge-tot.bonne { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .le-marge-tot.moyenne { background: var(--ambre-pale); color: var(--ambre-texte); } .le-marge-tot.faible { background: var(--rouge-pale); color: var(--rouge-texte); } .le-recap { display: flex; align-items: center; justify-content: flex-end; gap: 22px; } .le-recap-det { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 2px; font-size: 12.5px; color: var(--encre2); white-space: nowrap; } .le-recap-det b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); } .le-recap-det .vert { color: var(--vert-pastille-texte); } .le-ttc { display: grid; justify-items: end; } .le-ttc span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); } .le-ttc strong { font-size: 26px; font-weight: 800; color: var(--lien); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; } .le-pied-actions { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; justify-items: end; } .le-pied-actions .le-etat { grid-column: 1 / -1; } .le-pied-actions .le-etat:empty { display: none; } .le-etat { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .le-etat.modifie { color: var(--ambre-texte); } .le-etat.alerte { color: var(--rouge-texte); background: var(--rouge-fond); padding: 6px 10px; border-radius: 8px; } .le-etat .lien-txt { font-size: 12.5px; } @media (max-width: 1100px) { .le-pied { grid-template-columns: auto minmax(0, 1fr); } .le-recap { grid-column: 1 / -1; justify-content: space-between; } .le-pied-actions { grid-column: 1 / -1; } .le-raccourcis { display: none; } } @media (max-width: 860px) { .le-tete { display: none; } .le-table { padding: 8px 12px 0; gap: 8px; } .le-outils, .le-options { padding-left: 12px; padding-right: 12px; } .le-ajouts { flex-wrap: wrap; width: 100%; } .le-ajout, .le-kits { flex: 1 1 auto; } .le-ajout { flex: 0 0 auto; } .le-rang { row-gap: 6px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; } .le-rang > .le-poignee { grid-area: p; } .le-rang > .le-pastille { grid-area: t; margin-top: 4px; } .le-rang > .le-ref { grid-area: r; } .le-rang > .le-des-zone { grid-area: d; } .le-rang > [data-k="quantite"] { grid-area: q; } .le-rang > [data-k="unite"] { grid-area: u; } .le-rang > [data-k="prix_unitaire_ht"], .le-rang > [data-k="prix_ttc"] { grid-area: pu; } .le-rang > [data-k="remise_pct"] { grid-area: rem; } .le-rang > [data-k="taux_tva"] { grid-area: tva; } .le-rang > .le-tot { grid-area: tot; padding-top: 4px; } .le-rang > .le-plus { grid-area: m; justify-self: end; } .le-rang input, .le-rang select, .le-rang textarea { font-size: 16px; min-height: 40px; width: 100%; min-width: 0; box-sizing: border-box; } .le-rang > * { min-width: 0; } .md.md-lignes { width: 100%; max-width: 100vw; } .le-cherche { min-width: 0; width: 100%; box-sizing: border-box; } .le-options { flex-wrap: wrap; row-gap: 8px; } .le-options .le-raccourcis { display: none; } .le-rang { grid-template-columns: 24px repeat(6, minmax(0, 1fr)) 34px; grid-template-areas: "p t t t tot tot tot m" "p d d d d d d d" "p l1 l1 l1 l1 l1 l1 l1" "p r r q q u u u" "p l2 l2 l2 l2 l2 l2 l2" "p pu pu rem rem tva tva tva"; } .le-rang > .le-leg { display: grid; grid-template-columns: subgrid; margin-bottom: -4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre3); } .le-rang > .le-leg1 { grid-area: l1; } .le-rang > .le-leg2 { grid-area: l2; } .le-leg i { font-style: normal; grid-column: span 2; padding-left: 2px; } .le-leg i:last-child { grid-column: span 3; } .le-rang.le-sec > *, .le-rang.le-txt > * { grid-area: auto; } .le-rang.le-sec { align-items: center; grid-template-columns: 24px minmax(0, 1fr) 34px; row-gap: 2px; } .le-rang.le-sec > .le-poignee { grid-column: 1; grid-row: 1 / span 2; } .le-rang.le-sec > .le-sec-titre { grid-column: 2; grid-row: 1; } .le-rang.le-sec > .le-sec-st { grid-column: 2; grid-row: 2; justify-self: start; padding-left: 10px; } .le-rang.le-sec > .le-plus { grid-column: 3; grid-row: 1; } .le-rang.le-sec { grid-template-areas: none; grid-template-columns: 24px minmax(0, 1fr) auto 34px; background: var(--gris-pale); border: 0; } .le-rang.le-sec .le-sec-info { display: none; } .le-rang.le-txt { grid-template-areas: none; grid-template-columns: 24px minmax(0, 1fr) 34px; } .le-rang.le-txt > .le-pastille { display: none; } .le-res { left: 12px; width: calc(100% - 24px); } .le-res li[data-k] { grid-template-columns: minmax(0, 1fr) 80px; } .le-res li[data-k] .le-pastille, .le-res li[data-k] .le-stock { display: none; } .md.md-lignes { height: 100vh; border-radius: 0; } .md.md-lignes .md-tete { border-radius: 0; } .le-pied { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; } .le-pied-remise .aide, .le-marge-tot, .le-recap-det { display: none; } .le-recap { grid-column: 2; justify-content: flex-end; } .le-pied-actions { grid-column: 1 / -1; } .le-ttc strong { font-size: 22px; } } @media (max-width: 860px) { .md-voile:has(.md-lignes) { padding: 0; } } .lg-lecture .lg-section td { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; color: var(--lien); background: var(--gris-pale); } .lg-lecture .lg-sous-total td { font-weight: 700; border-bottom: 2px solid var(--trait); } .lg-lecture .lg-sous-total td:first-child { text-align: right; color: var(--encre2); font-weight: 600; } /* ── Import de fichiers (2.1) ─────────────────────────────────── */ .md.md-import { width: min(980px, 100%); min-width: 0; } .md.md-import .md-corps { min-width: 0; } .im-etapes { display: flex; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; flex-wrap: wrap; } .im-etapes li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--encre3); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--survol); } .im-etapes li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--trait); color: var(--encre2); } .im-etapes li.actif { color: var(--lien); background: var(--vert-pale); } .im-etapes li.actif span { background: var(--vert); color: #FFFFFF; } .im-etapes li.fait span { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .im-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .im-type { display: grid; align-content: start; gap: 8px; text-align: left; padding: 16px; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); color: var(--encre); font: inherit; } button.im-type { cursor: pointer; } button.im-type:hover, button.im-type:focus-visible { border-color: var(--vert); background: var(--survol); } .im-type > svg, .im-type-tete svg { color: var(--accent); } .im-type b { font-size: 16px; } .im-type span { font-size: 13.5px; color: var(--encre2); line-height: 1.45; } .im-type-tete { display: flex; align-items: center; gap: 10px; } .im-type-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .im-depot { position: relative; display: grid; justify-items: center; gap: 6px; padding: 34px 20px; margin: 6px 0 12px; border: 2px dashed var(--trait-fort); border-radius: 14px; background: var(--survol); color: var(--encre2); text-align: center; cursor: pointer; } .im-depot svg { color: var(--accent); } .im-depot b { color: var(--encre); font-size: 15.5px; } .im-depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .im-depot.survol, .im-depot:focus-within { border-color: var(--vert); background: var(--vert-pale); } .im-depot.lecture { opacity: .6; pointer-events: none; } .im-fichier { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border-radius: 10px; background: var(--survol); font-size: 14px; margin-bottom: 10px; } .im-fichier svg { color: var(--accent); } .im-fichier label { display: inline-flex; align-items: center; gap: 6px; color: var(--encre2); font-size: 13px; } .im-fichier select { max-width: min(320px, 100%); min-width: 0; } .im-fichier label { max-width: 100%; min-width: 0; } .im-cols { display: grid; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; } .im-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(200px, 1fr); gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--trait-leger); } .im-col-tete { border-top: 0; background: var(--survol); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre2); } .im-col:not(.relie):not(.im-col-tete) { background: var(--survol); } .im-col:not(.relie):not(.im-col-tete) b { color: var(--encre3); } .im-col.relie select { border-color: var(--vert); font-weight: 600; } .im-col select { width: 100%; } .im-ex { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .im-ex i { font-style: normal; font-size: 12.5px; padding: 2px 7px; border-radius: 6px; background: var(--gris-pale); color: var(--gris-texte); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .im-bilan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .im-bilan > div { display: grid; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); } .im-bilan b { font-size: 24px; font-variant-numeric: tabular-nums; } .im-bilan span { font-size: 13px; color: var(--encre2); } .im-bilan .im-bilan-err { border-color: var(--rouge-trait); background: var(--rouge-fond); } .im-bilan .im-bilan-err b { color: var(--rouge-txt); } .im-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 12px 0; } .im-mode legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; } .im-mode-opt { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; background: var(--blanc); } .im-mode-opt input { grid-row: 1 / span 2; margin-top: 3px; } .im-mode-opt small { color: var(--encre2); font-size: 12.5px; line-height: 1.4; } .im-mode-opt.actif { border-color: var(--vert); background: var(--vert-pale); } .im-filtres { margin: 8px 0; flex-wrap: wrap; } .im-table { max-height: 46vh; overflow: auto; } .im-table thead th { position: sticky; top: 0; z-index: 1; } .im-detail { display: grid; gap: 3px; font-size: 13px; color: var(--encre2); min-width: 240px; } .im-detail svg { vertical-align: -2px; } .im-motif { color: var(--lien); } .im-avert { color: var(--ambre-texte); } tr.im-err td { background: var(--rouge-fond); } .im-fin { display: flex; gap: 16px; align-items: flex-start; padding: 8px 4px; } .im-fin > svg { color: #15803D; flex: 0 0 auto; } .im-fin h3 { margin: 0 0 6px; font-size: 19px; } .im-fin p { margin: 0 0 6px; } tr.im-annule td { color: var(--encre3); } @media (max-width: 760px) { .im-col { grid-template-columns: minmax(0, 1fr); gap: 6px; } .im-col select { min-width: 0; max-width: 100%; } .md.md-import { width: 100%; max-width: 100vw; } .im-col-tete { display: none; } .im-bilan { grid-template-columns: repeat(2, minmax(0, 1fr)); } .im-mode { grid-template-columns: 1fr; } .im-etapes li { padding-right: 8px; font-size: 0; gap: 0; } .im-etapes li.actif { font-size: 13px; gap: 8px; padding-right: 12px; } } /* ── Pilotage (2.1) ───────────────────────────────────────────── */ .pil { display: grid; gap: 14px; } .pil-periode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .pil-periode .filtres { flex-wrap: wrap; } .pil-dates { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--encre2); } .pil-dates label { display: inline-flex; align-items: center; gap: 6px; } .pil-dates input { min-height: 38px; } .pil-intro { margin: 0; color: var(--encre2); font-size: 14px; } .pil-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pil-tuile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; min-width: 0; } .pil-tuile > div { display: grid; gap: 3px; min-width: 0; } .pil-tuile b { font-size: 23px; line-height: 1.15; color: var(--encre); font-variant-numeric: tabular-nums; } .pil-tuile > div > span { font-size: 13px; color: var(--encre2); line-height: 1.35; } .pil-tuile small { font-size: 12.5px; color: var(--encre2); line-height: 1.35; } .pil-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); } .pil-tuile.pil-fort { box-shadow: inset 3px 0 0 var(--vert); } .pil-tuile.pil-neg b { color: var(--rouge-txt); } .pil-evo { font-weight: 700; } .pil-evo span { font-weight: 400; } .pil-hausse { color: #15803D; } .pil-baisse { color: var(--rouge-txt); } .pil-obj { display: flex; align-items: center; gap: 8px; } .pil-obj .gs-jauge { width: 64px; flex: 0 0 64px; } .pil-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .pil-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pil-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 16px; min-width: 0; } .pil-carte h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 16px; } .pil-carte h3 svg { color: var(--accent); } .pil-carte h3 small { font-weight: 500; font-size: 13px; color: var(--encre2); margin-left: auto; } .pil-sous { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); } .pil-note { margin: 10px 0 0; font-size: 13px; color: var(--encre2); line-height: 1.45; } .pil-classe { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .pil-classe button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "r n m" "r b b"; gap: 2px 8px; align-items: center; padding: 7px 6px; border: 0; background: none; font: inherit; color: var(--encre); text-align: left; border-radius: 8px; cursor: pointer; } .pil-classe button:disabled { cursor: default; } .pil-classe button:not(:disabled):hover { background: var(--survol); } .pil-rang { grid-area: r; font-size: 13px; font-weight: 700; color: var(--encre3); align-self: start; padding-top: 1px; } .pil-nom { grid-area: n; display: grid; min-width: 0; } .pil-nom b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pil-nom small { font-size: 12.5px; color: var(--encre2); } .pil-mt { grid-area: m; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .pil-barre { display: block; height: 6px; border-radius: 3px; background: var(--trait-leger); overflow: hidden; } .pil-classe .pil-barre { grid-area: b; } .pil-barre i { display: block; height: 100%; border-radius: 3px; background: var(--serie-ventes); } .pil-natures { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pil-natures li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; } .pil-natures b { font-variant-numeric: tabular-nums; } /* Ancienneté des impayés : une seule teinte qui fonce avec le retard, et le libellé écrit. */ .pil-age { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; } .pil-age > div { display: grid; gap: 1px; padding: 8px 8px; border-radius: 10px; background: var(--survol); border: 1px solid var(--trait); min-width: 0; } .pil-age span { font-size: 12px; color: var(--encre2); } .pil-age b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 420px) { .pil-age { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pil-age small { font-size: 12px; color: var(--encre2); } .pil-age .pil-age-1 { box-shadow: inset 0 3px 0 #F0B429; } .pil-age .pil-age-2 { box-shadow: inset 0 3px 0 #E07B24; } .pil-age .pil-age-3 { box-shadow: inset 0 3px 0 #C8411B; } .pil-age .pil-age-4 { box-shadow: inset 0 3px 0 #8F1D10; } .pil-age .pil-age-3:not(.vide) b, .pil-age .pil-age-4:not(.vide) b { color: var(--rouge-txt); } .pil-age .vide b { color: var(--encre3); font-weight: 600; } .pil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .pil-liste button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n m" "d m"; gap: 2px 10px; align-items: center; padding: 8px; border: 0; background: none; font: inherit; color: var(--encre); text-align: left; border-radius: 8px; cursor: pointer; } .pil-liste button:hover { background: var(--survol); } .pil-liste button > b:first-child { grid-area: n; font-size: 14px; font-weight: 600; } .pil-liste button > span { grid-area: d; font-size: 12.5px; color: var(--encre2); } .pil-liste .pil-mt { grid-area: m; } .pil-avenir { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pil-avenir button { width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); font: inherit; color: var(--encre); text-align: left; cursor: pointer; } .pil-avenir button:hover { border-color: var(--vert); background: var(--survol); } .pil-avenir b { min-width: 64px; white-space: nowrap; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--lien); } .pil-avenir span { font-size: 13.5px; color: var(--encre2); } .pil-pdp p { margin: 0; font-size: 14px; } .pil-treso-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pil-treso-tete h3 { margin: 0 auto 0 0; } .pil-treso-chiffres { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0; font-size: 14px; color: var(--encre2); } .pil-treso-chiffres b { color: var(--encre); font-variant-numeric: tabular-nums; margin-left: 4px; } .pil-graphe { position: relative; margin: 6px 0 10px; outline-offset: 4px; border-radius: 8px; } .pil-graphe svg { display: block; width: 100%; height: auto; overflow: visible; } .pil-grille-l { stroke: var(--trait-leger); stroke-width: 1; } .pil-zero { stroke: var(--trait-fort); stroke-width: 1.5; } .pil-axe { font-size: 11.5px; fill: var(--encre3); font-variant-numeric: tabular-nums; } .pil-ligne { fill: none; stroke: var(--serie-ventes); stroke-width: 2; stroke-linejoin: round; } .pil-aire { fill: var(--serie-ventes); opacity: .13; } .pil-vise { stroke: var(--encre3); stroke-width: 1; stroke-dasharray: 3 3; } .pil-point { fill: var(--serie-ventes); stroke: var(--blanc); stroke-width: 2; } .pil-bulle { top: 8px; min-width: 180px; pointer-events: none; } .pil-mv { max-height: 360px; overflow: auto; } .pil-mv thead th { position: sticky; top: 0; z-index: 1; } .pil-mv .lien-txt { text-align: left; } .pil-in { color: #15803D; font-weight: 600; } .pil-out { color: var(--rouge-txt); font-weight: 600; } :root[data-theme="dark"] .pil-in, :root[data-theme="dark"] .pil-hausse { color: #4ADE80; } @media (prefers-color-scheme: dark) { :root.theme-auto .pil-in, :root.theme-auto .pil-hausse { color: #4ADE80; } } @media (max-width: 1180px) { .pil-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pil-grille-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .pil-grille, .pil-grille-3 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pil-tuiles { grid-template-columns: 1fr; } .pil-natures li { grid-template-columns: 96px minmax(0, 1fr) auto; } } /* TVA collectée (six colonnes) et déductible : l'une au-dessus de l'autre, sauf sur très grand écran. */ .gs-deux.tva-deux { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1700px) { .gs-deux.tva-deux { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } } .tva-deux .tableau-zone { overflow-x: auto; } /* Navigation de période (TVA, e-reporting) : le libellé garde la même largeur d'un mois à l'autre, pour que les boutons et les dates à côté ne se décalent pas (« mars » / « septembre »). */ .gs-periode .pl-nav b { display: inline-block; min-width: 11em; text-align: center; margin: 0 2px; white-space: nowrap; } @media (max-width: 560px) { .gs-periode .pl-nav b { min-width: 9.5em; } } /* ── Tableaux sur téléphone (2.2.2) ─────────────────────────────── Un tableau plus large que l'écran devient une pile de cartes : chaque ligne est une carte, chaque cellule garde le titre de sa colonne (posé par adapterTableaux() dans app.js). Plus rien ne se cache à droite. */ @media (max-width: 760px) { .tableau.pile, .tableau.pile tbody, .tableau.pile tfoot, .tableau.pile tr, .tableau.pile td, .tableau.pile th { display: block; width: auto !important; } .tableau.pile { table-layout: auto; } .tableau.pile thead { display: none; } .tableau.pile tr { padding: 8px 12px; border-bottom: 1px solid var(--trait); } .tableau.pile tbody tr:last-child, .tableau.pile tfoot tr:last-child { border-bottom: 0; } .tableau.pile tfoot tr { background: var(--survol); } /* Titre de colonne à gauche (flottant), contenu de la cellule aligné à droite, d'un seul tenant. */ .tableau.pile td, .tableau.pile tfoot th, .tableau.pile tbody th:not([scope="row"]) { display: block; padding: 5px 0; border: 0; text-align: right; min-height: 0; overflow-wrap: anywhere; } .tableau.pile td::after, .tableau.pile tfoot th::after { content: ''; display: table; clear: both; } .tableau.pile td::before, .tableau.pile tfoot th::before { content: attr(data-label); float: left; max-width: 48%; margin-right: 12px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--encre2); line-height: 1.6; } .tableau.pile td[data-label=""]::before, .tableau.pile td:not([data-label])::before { content: none; } .tableau.pile td[data-label=""], .tableau.pile td:not([data-label]) { text-align: left; } .tableau.pile td > input, .tableau.pile td > select { display: inline-block; } .pil-mv { max-height: 75vh; } .tableau.pile th[scope="row"], .tableau.pile td[colspan] { display: block; padding: 4px 0; border: 0; text-align: left; font-size: 15px; } .tableau.pile td > input, .tableau.pile td > select { max-width: 55%; min-width: 0; } .tableau.pile td.num, .tableau.pile .nw { white-space: normal; } .tableau.pile td .soc-actions, .tableau.pile td .actions, .tableau.pile td .actions-ligne { display: inline-flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } } /* Planning : sur téléphone, la frise défile en largeur — on le dit. */ .pl-astuce { display: none; } @media (max-width: 760px) { .pl-astuce { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--encre2); } } /* Sauvegardes (écran Organismes) et export complet */ .prm-tete h2 .pastille { margin-left: 8px; vertical-align: middle; font-size: 12.5px; } #sauvegardes .bandeau { margin: 0 0 12px; } .occupe { opacity: .6; pointer-events: none; } /* ── Espace stagiaire (émargement à distance) ─────────────────────────── */ .es-form { border: 2px solid var(--accent, #B54708); border-radius: 12px; padding: 12px; margin: 6px 0 14px; } .es-form canvas { display: block; width: 100%; height: 150px; border: 1px dashed var(--trait); border-radius: 8px; background: #fff; touch-action: none; margin-top: 4px; } .es-form .lien-txt { justify-self: start; background: none; border: 0; color: var(--lien); font: inherit; font-size: 13px; padding: 0; cursor: pointer; } .es-case { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 8px !important; font-weight: 500 !important; } .es-case input { min-height: 0 !important; width: 20px; height: 20px; margin: 1px 0 0; flex: none; } .es-titre { font-size: 15px; margin: 18px 0 8px; } .es-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .es-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; } .es-ok, .es-abs, .es-ouvert, .es-avenir { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .es-ok { background: var(--vert-pale); color: var(--lien); } .es-abs { background: var(--rouge-fond); color: var(--rouge-txt); } .es-ouvert { background: #FEF6E7; color: #7A3A06; } .es-avenir { color: var(--encre2); } /* ══ Formation ═══════════════════════════════════════════════════════════ */ /* Le poste de pilotage d'une session : un panneau plus large. */ .fiche.fiche-large { width: min(820px, 100vw); } .se-etapes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; } .se-etape { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); } .se-etape > span:nth-child(2) { display: grid; min-width: 0; } .se-etape small { color: var(--encre2); font-size: 12.5px; } .se-etape-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gris-pale); color: var(--encre3); } .se-etape.ok .se-etape-ico { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .se-etape.afaire { border-color: var(--ambre-trait); background: var(--ambre-fond); } .se-etape.afaire .se-etape-ico { background: var(--ambre-pale); color: var(--ambre-texte); } .se-jour span:first-child { display: grid; } .se-actions { display: flex; gap: 4px; flex: none; } .se-puce { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } .se-stag td { vertical-align: top; } .se-stag .pastille { margin: 1px 2px 1px 0; } .fp-resume b small { font-size: 13px; color: var(--encre2); font-weight: 600; } .se-menu { position: fixed; z-index: 120; min-width: 230px; max-width: calc(100vw - 16px); background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); padding: 5px; display: grid; } .se-menu[hidden] { display: none; } .se-menu button { display: flex; align-items: center; gap: 9px; text-align: left; background: none; border: 0; border-radius: 7px; padding: 9px 10px; font: inherit; font-size: 14px; color: var(--encre); cursor: pointer; } .se-menu button:hover, .se-menu button:focus-visible { background: var(--survol); } .se-menu button svg { color: var(--accent); flex: none; } .se-menu button.danger, .se-menu button.danger svg { color: var(--rouge-txt); } .se-menu hr { border: 0; border-top: 1px solid var(--trait); margin: 4px 2px; } /* Tableau de bord : les séances du jour. */ .tdb-seance { border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .tdb-seance-titre { display: grid; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; } .tdb-seance-titre span { font-size: 12.5px; color: var(--encre2); } .tdb-demis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; } .tdb-demi { display: grid; text-align: left; border: 1px solid var(--ambre-trait); background: var(--ambre-fond); color: var(--ambre-texte); border-radius: 8px; padding: 6px 9px; cursor: pointer; font: inherit; } .tdb-demi span { font-size: 12.5px; font-weight: 600; } .tdb-demi b { font-size: 18px; font-variant-numeric: tabular-nums; } .tdb-demi small { font-size: 12px; } .tdb-demi.ok { border-color: var(--vert-trait); background: var(--vert-pale); color: var(--lien); } .tdb-liste button.tdb-urgent b { color: var(--rouge-txt); } .tdb-liste button b svg { vertical-align: -3px; } /* Calendrier. */ .cal-mois { text-transform: capitalize; font-size: 16px; } .cal { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; } .cal-tete, .cal-corps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-tete div { padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--encre2); background: var(--survol); border-bottom: 1px solid var(--trait); text-transform: capitalize; } .cal-jour { min-height: 104px; border-right: 1px solid var(--trait-leger); border-bottom: 1px solid var(--trait-leger); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cal-jour:nth-child(7n) { border-right: 0; } .cal-jour.we { background: var(--survol); } .cal-jour.hors { opacity: .55; } .cal-jour.auj { box-shadow: inset 0 0 0 2px var(--action); } .cal-num { font-size: 12px; font-weight: 700; color: var(--encre2); padding: 0 2px; } .cal-jour.auj .cal-num { color: var(--action); } .cal-seance { --c: #1D6FB8; display: grid; text-align: left; width: 100%; min-width: 0; border: 0; border-left: 4px solid var(--c); border-radius: 5px; padding: 3px 6px; cursor: pointer; font: inherit; background: color-mix(in srgb, var(--c) 13%, var(--blanc)); color: var(--encre); } .cal-seance.intra { border-left-style: dashed; } .cal-seance b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-seance small { font-size: 11px; color: var(--encre2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-seance:hover { background: color-mix(in srgb, var(--c) 22%, var(--blanc)); } .cal-liste { display: none; } .cal-liste-jour { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--trait); } .cal-liste-jour.auj .cal-liste-date { color: var(--action); } .cal-liste-date { font-weight: 700; font-size: 13px; text-transform: capitalize; } @media (max-width: 760px) { .cal { display: none; } .cal-liste { display: block; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 4px 12px; } } /* Planifier les journées, inscrire. */ .gj-jours { border: 0; padding: 0; margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; } .gj-jours legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; } .ins-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ins-liste { list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow-y: auto; border: 1px solid var(--trait); border-radius: 8px; } .ins-liste.court { max-height: 260px; margin-bottom: 12px; } .ins-liste li { padding: 3px 4px; border-bottom: 1px solid var(--trait-leger); } .ins-liste li:last-child { border-bottom: 0; } .ins-liste .case { font-weight: 500; } .ins-nouveau { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; margin-bottom: 6px; } .ins-nouveau input { font: inherit; font-size: 14px; min-width: 0; padding: 8px 9px; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); } @media (max-width: 700px) { .ins-grille { grid-template-columns: 1fr; } .ins-nouveau { grid-template-columns: 1fr 1fr; } .ins-nouveau input[type=email] { grid-column: 1 / -1; } } /* Grille des présences. */ .md.md-emarg { width: min(1100px, 100%); } .pr-zone { overflow-x: auto; border: 1px solid var(--trait); border-radius: 10px; } .pr-grille { border-collapse: collapse; font-size: 13px; } .pr-grille th, .pr-grille td { border: 1px solid var(--trait); padding: 4px; text-align: center; } .pr-grille thead th { background: var(--survol); font-size: 11.5px; min-width: 64px; } .pr-grille thead th span, .pr-grille thead th small { display: block; white-space: nowrap; } .pr-grille thead th small { color: var(--encre2); } .pr-grille thead th .lien-txt { font-size: 11px; padding: 0; } .pr-grille thead th.auj { background: var(--ambre-fond); } .pr-grille tbody th { text-align: left; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--blanc); z-index: 1; } .pr-grille .pr-sep td { text-align: left; background: var(--survol); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); } .pr-c.futur { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--trait-leger) 5px 7px); } .pr-case { width: 38px; height: 32px; border-radius: 7px; border: 1px solid var(--trait); background: var(--blanc); font: inherit; font-weight: 800; cursor: pointer; color: var(--encre3); } .pr-case.p-PRESENT { background: var(--vert-pastille); color: var(--vert-pastille-texte); border-color: transparent; } .pr-case.p-ABSENT { background: var(--rouge-fond); color: var(--rouge-txt); border-color: var(--rouge-trait); } .pr-case.p-EXCUSE { background: var(--ambre-fond); color: var(--ambre-texte); border-color: var(--ambre-trait); } .pr-case.signe { background: var(--vert-pastille); color: var(--vert-pastille-texte); cursor: default; } .pr-case.modifie { box-shadow: 0 0 0 2px var(--action); } /* Émargement sur place (tablette). */ .md.md-tablette { width: min(900px, 100%); } .tab-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; } .tab-tete b { text-transform: capitalize; } .tab-demis { display: flex; flex-wrap: wrap; gap: 6px; } .tab-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .tab-pers { display: grid; text-align: left; gap: 2px; min-height: 64px; padding: 10px 12px; border: 2px solid var(--trait); border-radius: 12px; background: var(--blanc); cursor: pointer; font: inherit; color: var(--encre); } .tab-pers b { font-size: 16px; } .tab-pers small { color: var(--encre2); } .tab-pers:hover { border-color: var(--vert); } .tab-pers.form { border-style: dashed; } .tab-pers.ok { border-color: var(--vert-trait); background: var(--vert-pale); cursor: default; } .tab-pers.ok small { color: var(--lien); font-weight: 600; } .tab-pers.abs { opacity: .6; } .md-tablette .sig-pad { height: 220px; } .texte-type { padding: 2px 0; font-size: 13px; } /* Une fenêtre ne dépasse jamais l'écran : son contenu large (grille des présences) défile à l'intérieur. */ .md-voile { grid-template-columns: minmax(0, 1fr); justify-items: center; } .md { min-width: 0; max-width: 100%; } .md-corps { min-width: 0; } @media (max-width: 760px) { .md-voile { padding: 8px; } .md { max-height: calc(100vh - 16px); } }