/* ============================================================ GaragePro — Feuille de style (socle repris d'Event) Le bleu d'un bleu de travail, le gris clair d'un atelier propre, 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; 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 agrandi (16 px, titres de groupe 12 px), interligne resserré pour que les 16 entrées tiennent toujours sur un écran de 768 px. */ .sb-lien { font-size: 16px; line-height: 1.3; } .sb-groupe-titre { font-size: 12px; 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); } /* ============================================================ GaragePro — é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'atelier. */ .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; } @media (max-width: 760px) { .fp-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .fp-actions .btn { flex: 0 0 auto; } } /* ── 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 { display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 4px; background: var(--gris-pale); overflow: hidden; margin-right: 8px; } .gs-jauge span { display: block; height: 100%; border-radius: 4px; background: var(--serie-ventes); } .gs-jauge.gs-ok span { background: #15803D; } .gs-jauge.gs-loin span { background: var(--serie-charges); } .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; }