/* ============================================================ OpsFacturePro — Feuille de style (socle repris d'OpsGaragePro) Charte OP SYNERGIE : l'ardoise du logo pour la structure, et l'émeraude propre à OpsFacturePro pour l'action et les repères. ============================================================ */ :root { --vert: #0F7B5A; /* émeraude : icônes, liens actifs — 5,4:1 sur blanc */ --vert-fonce: #2C2F3E; /* ardoise du logo : en-tête de fiche, texte fort */ --vert-pale: #E3F4EC; --encre: #18212D; /* texte courant */ --encre2: #4A5566; /* texte secondaire — 7,4:1 sur blanc */ --papier: #F2F4F7; /* fond de page */ --blanc: #FFFFFF; --trait: #D8DEE7; --action: #0E7D59; /* bouton d'action émeraude — 5,2:1 avec le blanc */ --action-fonce: #0A5E43; --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: #C3E5D5; --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: 310px; /* largeur du menu (1.2.0 : 272 → 310 px) */ 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; } /* Toute la largeur de l'écran (1.2.0) : plus de plafond à 1280 px sur les grands écrans. */ .contenu { padding: 22px 24px 60px; max-width: none; min-width: 0; } .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(var(--fiche-l, 720px), 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; } /* 1.54.0 — Le stock d'un devis : la pastille passe sous le texte quand la place manque. */ .fp-enfant.fp-stock { flex-wrap: wrap; } .fp-enfant.fp-stock > span:first-child { flex: 1 1 220px; min-width: 0; } .fp-enfant.fp-stock > .pastille { flex: none; } 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); } .toast-alerte { background: #8A4B00; } /* ── 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; } /* 1.62.0 — Les couleurs proposées d'après le logo, et les quatre mises en page des devis et factures. */ .marque-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 13px; color: var(--encre2); } .marque-sugg button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 4px 10px 4px 5px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); cursor: pointer; } .marque-sugg button i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .marque-sugg button.actif { border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre); } .mpd-choix { --mc: #2C2F3E; --me: #2C2F3E; --mt: #EAEAEC; --ms: #FFFFFF; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .mpd-carte { display: grid; justify-items: start; align-content: start; gap: 3px; text-align: left; font: inherit; padding: 10px; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); cursor: pointer; min-width: 0; } .mpd-carte b { font-size: 14px; } .mpd-carte small { font-size: 12px; color: var(--encre2); line-height: 1.35; } .mpd-carte:hover { border-color: var(--trait-fort); } .mpd-carte.actif { border-color: var(--action); box-shadow: 0 0 0 2px var(--action); } .mpd-carte:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; } /* La vignette : une feuille A4 en réduction, dessinée en CSS (toujours claire, comme le papier). */ .mpd-mini { position: relative; display: block; width: 100%; max-width: 120px; aspect-ratio: 210 / 297; background: #FFFFFF; border: 1px solid #D8DEE7; border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .mpd-mini i { position: absolute; display: block; } /* Lignes du tableau, communes : des traits gris. */ .mpd-mini .e { left: 10%; right: 10%; top: 52%; height: 22%; background: repeating-linear-gradient(#E3E7EC 0 1px, transparent 1px 7px); } .mpd-classique .a { left: 0; right: 0; top: 0; height: 3px; background: var(--mc); } .mpd-classique .b { left: 10%; top: 7%; width: 14%; aspect-ratio: 1; border-radius: 3px; background: var(--mc); } .mpd-classique .c { right: 10%; top: 8%; width: 30%; height: 5%; background: var(--me); border-radius: 1px; } .mpd-classique .d { left: 52%; right: 10%; top: 26%; height: 14%; background: var(--mt); border-radius: 3px; } .mpd-classique .f { left: 55%; right: 10%; top: 80%; height: 5%; background: var(--mc); border-radius: 2px; } .mpd-bandeau .a { left: 0; right: 0; top: 0; height: 24%; background: var(--mc); } .mpd-bandeau .b { left: 10%; top: 6%; width: 13%; aspect-ratio: 1; border-radius: 3px; background: var(--ms); } .mpd-bandeau .c { right: 10%; top: 7%; width: 34%; height: 6%; background: var(--ms); border-radius: 1px; } .mpd-bandeau .d { right: 10%; top: 16%; width: 22%; height: 4%; background: var(--ms); border-radius: 1px; opacity: .85; } .mpd-bandeau .e { background: repeating-linear-gradient(var(--mt) 0 4px, transparent 4px 8px); } .mpd-bandeau .f { left: 55%; right: 10%; top: 80%; height: 5%; background: var(--mc); border-radius: 2px; } .mpd-epure .a { left: 44%; top: 6%; width: 12%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--me); box-sizing: border-box; } .mpd-epure .b { left: 46%; width: 8%; top: 17%; height: 1.5px; background: var(--mc); } .mpd-epure .c { left: 10%; top: 24%; width: 34%; height: 6%; background: var(--me); border-radius: 1px; opacity: .9; } .mpd-epure .d { left: 10%; right: 10%; top: 40%; height: 1px; background: #C8D0DB; } .mpd-epure .f { left: 55%; right: 10%; top: 80%; height: 4px; border-top: 1px solid #1A1F27; border-bottom: 1px solid #1A1F27; box-sizing: border-box; } .mpd-colonne .a { left: 0; top: 0; bottom: 0; width: 32%; background: var(--mt); } .mpd-colonne .b { left: 6%; top: 6%; width: 16%; aspect-ratio: 1; border-radius: 3px; background: var(--mc); } .mpd-colonne .c { left: 6%; top: 22%; width: 20%; height: 4%; background: var(--me); border-radius: 1px; } .mpd-colonne .d { left: 40%; right: 8%; top: 44%; height: 4%; background: var(--mc); border-radius: 1px; } .mpd-colonne .e { left: 40%; right: 8%; } .mpd-colonne .f { left: 62%; right: 8%; top: 80%; height: 5%; background: var(--mt); border-radius: 2px; } .mpd-apercus { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } @media (max-width: 760px) { .mpd-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 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 { --g0: var(--accent); --g: var(--g0); --g-pale: color-mix(in srgb, var(--g) 12%, var(--blanc)); } /* 1.3.0 — Plus de couleur : une teinte par groupe du menu (toutes à 4,5:1 au moins sur fond blanc), reprise par l'écran ouvert. */ .sb-groupe.g-cyan { --g0: #0B7490; } .sb-groupe.g-bleu { --g0: #1D5FA8; } .sb-groupe.g-violet { --g0: #6941C6; } .sb-groupe.g-sarcelle { --g0: #0F766E; } .sb-groupe.g-indigo { --g0: #4338CA; } .sb-groupe.g-ambre { --g0: #B45309; } .sb-groupe.g-vert { --g0: #15803D; } .sb-groupe.g-orange { --g0: #C2410C; } .sb-groupe.g-brun { --g0: #7A4630; } .sb-groupe.g-rose { --g0: #BE185D; } .sb-groupe.g-pourpre { --g0: #9333EA; } .sb-groupe.g-ardoise { --g0: #475569; } .sb-groupe.g-petrole { --g0: #155E75; } :root[data-theme="dark"] .sb-groupe { --g: color-mix(in srgb, var(--g0) 55%, #FFFFFF); } @media (prefers-color-scheme: dark) { :root.theme-auto .sb-groupe { --g: color-mix(in srgb, var(--g0) 55%, #FFFFFF); } } .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); } /* ============================================================ 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; } /* « Ma voix » (1.9.0) */ .vx-lecteur audio { width: 100%; } .vx-section { display: grid; gap: 10px; margin-bottom: 18px; } /* 1.11.0 — Mes sons et mes titres : la fiche du titre */ .tt-lecteur-zone { --ls-accent: var(--vert); --ls-fond-onde: var(--vert-pale); --ls-barre: color-mix(in srgb, var(--encre2) 40%, transparent); } .tt-etapes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .tt-etapes li > button, .tt-etapes li > span { width: 100%; display: grid; gap: 6px; justify-items: center; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--encre2); background: none; border: 0; padding: 4px 2px; border-radius: 8px; text-align: center; } .tt-etapes li > button { cursor: pointer; } .tt-etapes li > button:hover { background: var(--vert-pale); color: var(--encre); } .tt-etapes i { width: 100%; height: 6px; border-radius: 999px; background: var(--trait); display: block; } .tt-etapes li.fait i { background: var(--vert); } .tt-etapes li.ici i { background: linear-gradient(90deg, var(--vert) 50%, var(--trait) 50%); } .tt-etapes li.ici > button, .tt-etapes li.ici > span { color: var(--encre); font-weight: 800; } .tt-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .tt-version { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--trait-leger, var(--trait)); } .tt-num { font-weight: 800; font-variant-numeric: tabular-nums; background: var(--vert-pale); color: var(--vert); border-radius: 8px; padding: 3px 8px; } .tt-v-txt { display: grid; gap: 2px; min-width: 0; } .tt-v-txt small { color: var(--encre2); } .tt-v-note { display: flex; gap: 5px; align-items: flex-start; } .tt-ok { color: var(--vert) !important; display: inline-flex; gap: 4px; align-items: center; } .tt-v-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .vx-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .vx-tete h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; } .vx-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .vx-exo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--trait); } .vx-exo > span:first-child { display: grid; gap: 2px; min-width: 0; } .vx-consigne { color: var(--gris-texte); display: flex; gap: 5px; align-items: flex-start; } .vx-faits { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--gris-pale); color: var(--gris-texte); white-space: nowrap; } .vx-faits.ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .vx-morceau { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; } .vx-rec { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--trait); } .vx-rec:first-of-type { border-top: 0; padding-top: 0; } .vx-rec audio { width: 100%; height: 38px; } .vx-note { display: grid; gap: 6px; } .vx-note textarea { width: 100%; font: inherit; font-size: 14px; } .vx-note > div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .vx-choix { border: 1px solid var(--trait); border-radius: 12px; padding: 8px 12px 10px; margin: 0 0 12px; display: grid; gap: 4px; } .vx-choix legend { font-weight: 700; font-size: 13px; padding: 0 6px; } @media (max-width: 600px) { .vx-exo { grid-template-columns: minmax(0, 1fr) auto; } .vx-exo .vx-faits { grid-column: 1; justify-self: start; } } .esp-edit { display: grid; gap: 10px; } .esp-apercu { position: relative; height: 150px; border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; padding: 16px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--action) 55%, #1E2130) 0%, #1E2130 65%) center / cover no-repeat; } .esp-apercu::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,32,.05), rgba(20,22,32,.7)); } .esp-apercu-txt { position: relative; display: grid; color: #fff; } .esp-apercu-txt b { font-size: 20px; } .esp-apercu-txt small { color: rgba(255,255,255,.85); font-size: 13px; } .esp-boutons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .sg-recap { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--gris-pale); font-size: 13.5px; } .sg-recap dt { color: var(--gris-texte); font-weight: 600; } .sg-recap dd { margin: 0; min-width: 0; } @media (max-width: 600px) { .sg-recap { grid-template-columns: 1fr; gap: 0; } .sg-recap dd { margin-bottom: 6px; } } .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; } /* 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: #0F7B5A; --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: none; } .corps-page.avec-prm .contenu { max-width: none; min-width: 0; } /* Les formulaires de réglages gardent une largeur de lecture ; les listes prennent tout. */ .corps-page.avec-prm .prm-form { max-width: 1100px; } .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; grid-template-columns: minmax(0, 1fr); 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 p .pastille { white-space: normal; } .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: 34px; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--encre2); } .prm-lien svg { width: 15px; height: 15px; } .prm-lien.actif { box-shadow: none; border-color: var(--vert); background: var(--vert); color: #fff; } .prm-lien.actif svg { color: #fff; } /* « Rubriques » reste collé à gauche pendant que la bande défile. */ .prm-tout { position: sticky; left: -12px; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0 2px 0 -12px; padding: 5px 12px 5px 14px; border: 0; border-radius: 0 999px 999px 0; background: var(--vert-fonce); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 6px 0 10px -4px rgba(16, 24, 40, .18); } .prm-tout:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; } .prm-nav.suite-droite { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } .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; } } .prm-tout { display: none; } @media (max-width: 900px) { .prm-tout { display: inline-flex; } } .prm-rubriques { display: grid; gap: 14px; } .prm-rub-groupe { display: grid; gap: 2px; } .prm-rub-groupe .prm-groupe-titre { display: block; padding: 0 4px 4px; } .prm-rub-lien { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 10px; color: var(--encre); text-decoration: none; font-size: 14.5px; } .prm-rub-lien svg { flex: none; color: var(--encre3); } .prm-rub-lien:hover { background: var(--survol); } .prm-rub-lien.actif { background: var(--vert-pale); color: var(--lien); font-weight: 700; } .prm-rub-lien.actif svg { color: var(--accent); } @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-activation { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); margin-bottom: 12px; } .pp-activation .interrupteur { flex: 1 1 260px; min-width: 0; } .pp-activation.actif { border-color: var(--vert-trait); background: color-mix(in srgb, var(--vert-pale) 45%, var(--blanc)); } .pp-etat { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .pp-etat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pp-etat.off { background: var(--gris-pale); color: var(--encre2); } .pp-etat.test { background: var(--ambre-pale); color: var(--ambre-texte); } .pp-etat.reel { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .pp-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; transition: opacity .15s; } .pp-modes.pp-eteint { opacity: .6; } .pp-mode { --pm: var(--vert); --pm-f: var(--vert-pale); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 40px 14px 14px; border: 1.5px solid var(--trait); border-radius: 14px; cursor: pointer; background: var(--blanc); transition: border-color .15s, background .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; } .pp-mode-test { --pm: var(--ambre-texte); --pm-f: var(--ambre-pale); } .pp-mode:hover { border-color: var(--trait-fort); } .pp-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .pp-mode-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--gris-pale); color: var(--encre2); transition: background .15s, color .15s; } .pp-mode-txt { display: grid; gap: 3px; min-width: 0; } .pp-mode-txt b { font-size: 15px; color: var(--encre); line-height: 1.25; } .pp-mode-txt small { color: var(--encre2); font-size: 12.5px; line-height: 1.45; } .pp-mode-coche { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--trait-fort); display: grid; place-items: center; color: transparent; background: var(--blanc); transition: background .15s, border-color .15s, color .15s; } .pp-mode.choisi { border-color: var(--pm); background: color-mix(in srgb, var(--pm-f) 55%, var(--blanc)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-f) 70%, transparent); } .pp-mode.choisi .pp-mode-ico { background: var(--pm); color: #fff; } .pp-mode.choisi .pp-mode-coche { background: var(--pm); border-color: var(--pm); color: #fff; } .pp-mode-coche svg { stroke-width: 3; } .pp-mode:has(input:focus-visible) { outline: 3px solid var(--pm); outline-offset: 2px; } .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; gap: 8px; } .pp-mode { padding: 12px 38px 12px 12px; gap: 2px 10px; } .pp-mode-ico { width: 34px; height: 34px; border-radius: 10px; } .pp-activation { padding: 12px 14px; } .pp-activation .pp-etat { margin-left: 56px; } .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; line-height: 1.25; padding: 4px 10px; border-radius: 12px; cursor: pointer; max-width: 100%; text-align: center; overflow-wrap: normal; 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; } /* 1.18.2 — Le catalogue à portée de main : le bouton, la liste du champ vide, le panneau. */ .le-ajout.le-cat-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--action); border-color: var(--action); color: #FFFFFF; padding: 0 15px; } .le-ajout.le-cat-btn:hover { background: var(--action-fonce, var(--action)); } .le-ajout.le-cat-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 30%, transparent); } .le-res.le-res-tout { max-height: min(62vh, 560px); } .le-res-vide { padding: 12px 14px; font-size: 13.5px; color: var(--encre2); } .le-res-pied button { display: inline-flex; align-items: center; gap: 6px; } .md.md-lignes { position: relative; } .md:not(.md-lignes) > .le-cat { display: none; } .le-cat { position: absolute; z-index: 9; right: 0; top: var(--le-cat-haut, 64px); bottom: var(--le-cat-bas, 0px); width: min(660px, 60%); display: flex; flex-direction: column; min-height: 0; background: var(--blanc); color: var(--encre); border-left: 1px solid var(--trait); box-shadow: -18px 0 40px rgba(19, 41, 75, .18); outline: none; transform: translateX(16px); opacity: 0; transition: transform .16s ease-out, opacity .16s ease-out; } .le-cat.ouvert { transform: none; opacity: 1; } .le-cat-tete { display: grid; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--trait); background: var(--survol); } .le-cat-titre { display: flex; align-items: center; gap: 8px; } .le-cat-titre h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: var(--encre); } .le-cat-x { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--encre2); font-size: 16px; cursor: pointer; } .le-cat-x:hover { background: var(--gris-pale); color: var(--encre); } .le-cat-cherche { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 11px; color: var(--encre2); } .le-cat-cherche:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); } .le-cat-cherche input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--encre); font: inherit; font-size: 15px; } .le-cat-categorie { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--encre2); min-width: 0; } .le-cat-categorie select { flex: 1; min-width: 0; min-height: 38px; font: inherit; font-size: 14px; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); color: var(--encre); } .le-cat-puces { display: flex; flex-wrap: wrap; gap: 6px; } .le-cat-puces:empty { display: none; } .le-cat-puces .le-puce { min-height: 34px; padding: 5px 12px; } .le-cat-puces .le-puce b { font-weight: 800; margin-left: 2px; } .le-cat-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px 0 10px; list-style: none; } .le-cat-groupe { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 10px 16px 6px; background: var(--blanc); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); border-bottom: 1px solid var(--trait-leger); } .le-cat-groupe small { margin-left: auto; font-weight: 700; letter-spacing: 0; color: var(--encre3); } .le-cat-groupe svg { color: var(--ambre-texte, var(--encre2)); } .le-cat-art { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; min-height: 52px; padding: 7px 10px 7px 16px; border-bottom: 1px solid var(--trait-leger); cursor: pointer; } .le-cat-art:hover { background: var(--survol); } .le-cat-art.actif { background: var(--courant); box-shadow: inset 3px 0 0 var(--action); } .le-cat-art .le-pastille { margin-top: 0; cursor: pointer; justify-self: start; } .le-cat-des { display: grid; gap: 2px; min-width: 0; } .le-cat-des b { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .le-cat-des small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--encre2); min-width: 0; } .le-cat-des small i { font-style: normal; } .le-cat-des .mono { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; } .le-cat-liste mark { background: transparent; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 2px; } .le-cat-prix { display: grid; justify-items: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .le-cat-prix b { font-size: 14px; } .le-cat-prix small { font-size: 11px; color: var(--encre3); } .le-cat-ajout { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; border-radius: 999px; border: 1.5px solid var(--trait); color: var(--action); background: var(--blanc); font-size: 12px; justify-self: end; } .le-cat-art:hover .le-cat-ajout, .le-cat-art.actif .le-cat-ajout { border-color: var(--action); } .le-cat-art.ajoute .le-cat-ajout { width: auto; min-width: 36px; padding: 0 7px; border-color: transparent; background: var(--action); color: #FFFFFF; } .le-cat-art.ajoute .le-cat-ajout b { font-weight: 800; } .le-cat-art.flash { animation: le-cat-flash .7s ease-out; } @keyframes le-cat-flash { from { background: color-mix(in srgb, var(--action) 22%, transparent); } to { background: transparent; } } .le-cat-vide { display: grid; gap: 12px; padding: 26px 18px; text-align: center; color: var(--encre2); font-size: 14px; } .le-cat-vide p { margin: 0; line-height: 1.5; } .le-cat-vide b { color: var(--encre); } .le-cat-vide-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .le-cat-nouveau { padding: 8px 10px; } .le-cat-nouveau .lien-txt { display: inline-flex; align-items: center; gap: 6px; color: var(--lien); } .le-cat-creer { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 16px; } .le-cat-creer h4 { margin: 0; font-size: 15px; } .le-cat-creer label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--encre2); min-width: 0; } .le-cat-creer label small { font-weight: 500; color: var(--encre3); } .le-cat-creer input, .le-cat-creer select { font: inherit; font-size: 15px; font-weight: 400; min-height: 42px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); color: var(--encre); min-width: 0; width: 100%; box-sizing: border-box; } .le-cat-creer-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .le-cat-creer-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } .le-cat-pied { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--trait); background: var(--survol); } .le-cat-etat { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; color: var(--encre2); } .le-cat-etat b { color: var(--encre); font-size: 14px; } .le-cat-dernier { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .le-cat-total { font-weight: 700; color: var(--lien); } .le-cat-pied .btn { flex: 0 0 auto; } @media (max-width: 860px) { /* Sur téléphone : un volet plein écran qui monte du bas, de grandes lignes faciles à toucher. */ .le-cat { position: fixed; inset: 0; width: auto; z-index: 75; border-left: 0; box-shadow: none; transform: translateY(40px); } .le-cat-tete { padding: 12px 12px 10px; padding-top: max(12px, env(safe-area-inset-top)); } .le-cat-cherche input, .le-cat-categorie select { font-size: 16px; } .le-cat-art { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "t p a" "d p a"; row-gap: 3px; min-height: 64px; padding: 9px 10px 9px 14px; } .le-cat-art > .le-pastille { grid-area: t; font-size: 11px; padding: 2px 8px; } .le-cat-art > .le-cat-des { grid-area: d; } .le-cat-art > .le-cat-prix { grid-area: p; } .le-cat-art > .le-cat-ajout { grid-area: a; width: 42px; height: 42px; } .le-cat-art.ajoute > .le-cat-ajout { min-width: 42px; } .le-cat-des b { font-size: 15px; } .le-cat-groupe { padding: 10px 14px 6px; } .le-cat-pied { padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); } .le-cat-pied .btn { min-height: 46px; padding: 8px 18px; } .le-cat-creer-2 { grid-template-columns: minmax(0, 1fr); } .le-ajout.le-cat-btn { order: -1; } } @media (prefers-reduced-motion: reduce) { .le-cat { transition: none; } .le-cat-art.flash { animation: none; } } .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; } .le-res li[data-k] > span:empty { 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 Garages) 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; } /* 2.4.0 — Anciennes factures */ .liste-simple { margin: 6px 0 10px; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 14px; } .liste-simple li { margin: 2px 0; } .fp-impaye .case { display: inline-flex; gap: 6px; align-items: center; margin: 0; } .fp-impaye .case.desactive { opacity: .7; } #ra-client { width: 100%; margin-top: 6px; } /* 2.5.0 — Filtres complémentaires et tri des listes */ .filtres-plus { display: flex; flex-wrap: wrap; gap: 8px; } .filtre-plus { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 4px 0 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); font-size: 13px; color: var(--encre2); } .filtre-plus select { border: 0; background: transparent; font: inherit; color: var(--encre); min-height: 38px; max-width: 220px; padding: 0 6px; cursor: pointer; } .filtre-plus select:focus { outline: 2px solid var(--vert-pale); } .filtre-plus.actif { border-color: var(--vert-fonce); box-shadow: inset 0 0 0 1px var(--vert-fonce); } .filtre-plus.actif select { font-weight: 700; } #liste-pastilles .filtres { margin: 0 0 8px; } .th-tri { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .tableau th.num .th-tri { justify-content: flex-end; width: 100%; } .th-tri:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; border-radius: 3px; } .th-fleche { font-size: 11px; opacity: .6; } .th-tri:hover .th-fleche, .th-tri.actif .th-fleche { opacity: 1; } .th-tri.actif { color: var(--encre); } /* 1.4.1 — « Trier par » aussi sur ordinateur : le tri par les en-têtes reste possible. */ .tri-mobile { display: inline-flex; } @media (max-width: 760px) { /* Sur téléphone : filtres sur deux colonnes, pastilles sur une ligne qui défile. */ .liste-outils { display: grid; grid-template-columns: 1fr 1fr; } .liste-outils .recherche { grid-column: 1 / -1; } .filtres-plus { display: contents; } .filtre-plus { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 4px 8px 2px; min-width: 0; } .filtre-plus span { font-size: 11px; } .filtre-plus select { max-width: none; min-height: 30px; padding: 0; } .tri-mobile { display: flex; } .liste-outils > .lien-txt { grid-column: 1 / -1; justify-self: start; } #liste-pastilles .filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #liste-pastilles .filtre { flex: 0 0 auto; } } /* 2.5.2 — Couleurs du catalogue : une teinte par catégorie, le type, le stock. Une seule couleur par catégorie (--cat) : le fond et le texte en sont tirés contre --blanc et --encre, qui s'inversent en thème sombre. */ .cat-x { --cat: #8A94A3; } .cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--cat) 14%, var(--blanc)); color: color-mix(in srgb, var(--cat) 58%, var(--encre)); } .cat-pill i, .cat-point { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: 0 0 auto; display: inline-block; } .filtre.filtre-cat { display: inline-flex; align-items: center; gap: 6px; border-color: color-mix(in srgb, var(--cat) 35%, var(--trait)); } .filtre.filtre-cat:hover { background: color-mix(in srgb, var(--cat) 10%, var(--blanc)); } .filtre.filtre-cat.actif { background: var(--cat); border-color: var(--cat); color: #FFFFFF; } .filtre.filtre-cat.actif .cat-point { background: #FFFFFF; } .filtre.filtre-cat.cat-claire.actif { color: #18212D; } .filtre.filtre-cat.cat-claire.actif .cat-point { background: #18212D; } .type-pill { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .type-piece { background: var(--p-piece-f); color: var(--p-piece-t); } .type-main_oeuvre { background: var(--p-mo-f); color: var(--p-mo-t); } .type-forfait { background: var(--p-forfait-f); color: var(--p-forfait-t); } .stock-q { display: inline-block; min-width: 2.2em; padding: 1px 8px; border-radius: 6px; text-align: center; } .stock-ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .stock-bas { background: var(--ambre-pale); color: var(--ambre-texte); } .stock-neg { background: var(--rouge-pale); color: var(--rouge-texte); } .stock-zero { color: var(--encre3); } .oui-non { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; } .oui-non.oui { color: var(--vert-pastille-texte); } .oui-non.non { color: var(--encre3); font-weight: 500; } .carte .cat-pill { flex: 0 0 auto; } /* OpsFacturePro — le liseré d'état des lignes de liste */ .tableau tr.ligne-etat td:first-child { box-shadow: inset 4px 0 0 var(--etat, transparent); } .etat-vert { --etat: #16A34A; } .etat-ambre { --etat: #F59E0B; } .etat-rouge { --etat: #DC2626; } .etat-bleu { --etat: #2563EB; } .etat-gris { --etat: #94A3B8; } .etat-violet { --etat: #8B5CF6; } /* Reprise OpsFact */ .im-type.im-reprise { grid-column: 1 / -1; border-color: var(--vert-trait); background: var(--vert-pale); } .rp-parties { display: grid; gap: 8px; margin: 6px 0 12px; } .rp-partie { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); cursor: pointer; } .rp-partie > svg { color: var(--accent); flex: none; } .rp-partie span { display: grid; } .rp-partie small { color: var(--encre2); font-size: 12.5px; } .rp-partie.vide { opacity: .55; cursor: default; } .rp-verif th { text-align: left; width: 38%; font-weight: 600; } .rp-verif td .pastille { margin: 2px 4px 2px 0; } .rp-err { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--rouge, #B42318); } .rp-avance { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; } .rp-avance li { padding: 8px 12px; border-radius: 8px; background: var(--survol); font-size: 14px; } .rp-avance li.ok { background: var(--vert-pale); } .rp-avance li.attention { background: #FEF3C7; color: #7A4B00; } .rp-avance li.ko { background: #FDE8E8; color: #9B1C1C; } .rp-avance li.encours { font-style: italic; } :root[data-theme="dark"] .rp-avance li.attention, :root[data-theme="dark"] .rp-avance li.ko { color: inherit; background: var(--survol); } .rp-bloc { border-color: var(--vert-trait); background: var(--vert-pale); } .rp-bloc > .btn { justify-self: start; } /* 1.1.0 — Paramètres → Numérotation */ .num-liste { list-style: none; margin: 0; padding: 0; display: grid; } .num-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--trait-leger); } .num-liste li:first-child { border-top: 0; } .num-nom b { display: block; font-size: 14.5px; } .num-nom small { color: var(--encre2); font-size: 12.5px; } .num-perso { color: var(--bleu-texte); font-weight: 700; } .num-prochain { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .num-prochain span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); } .num-prochain code, .num-apercu code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 700; background: var(--bleu-pale); color: var(--bleu-texte); padding: 4px 10px; border-radius: 8px; font-size: 14px; } .num-apercu { display: grid; justify-items: center; gap: 6px; padding: 16px; margin-bottom: 14px; border-radius: 12px; background: var(--survol); text-align: center; } .num-apercu span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); } .num-apercu code { font-size: 22px; padding: 6px 16px; } .num-apercu code.rouge { background: #FDECEC; color: #9B1C1C; } .num-apercu small { color: var(--encre2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; } .num-pas { display: inline-flex; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; } .num-pas button { width: 38px; border: 0; background: var(--survol); font-size: 17px; font-weight: 700; cursor: pointer; color: var(--encre); } .num-pas input { flex: 0 0 56px; width: 56px !important; min-width: 0; border: 0 !important; text-align: center; border-radius: 0 !important; -moz-appearance: textfield; } .num-pas input::-webkit-inner-spin-button, .num-pas input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .num-page > .aide { padding: 4px 22px 18px; margin: 0; } .num-apercu ~ .champ-ligne { align-items: start; } .num-apercu ~ .champ-ligne .champ select, .num-apercu ~ .champ-ligne .champ input { flex: 0 0 auto; } .num-pas { align-self: flex-start; height: 42px; width: max-content; } .num-pas button, .num-pas input { height: 100%; } @media (max-width: 640px) { .num-liste li { grid-template-columns: minmax(0, 1fr) auto; } .num-prochain { grid-column: 1; align-items: flex-start; } } /* ── 1.2.0 — Contrôle de la facture électronique avant envoi ── */ .ctl-attente { display: flex; gap: 10px; align-items: center; padding: 18px; color: var(--encre2); } .ctl-verdict { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; margin-bottom: 14px; } .ctl-verdict div { display: grid; gap: 2px; } .ctl-verdict b { font-size: 16px; } .ctl-verdict span { font-size: 13px; } .ctl-verdict.ok { background: #E7F6EC; color: #14532D; } .ctl-verdict.ko { background: #FDECEC; color: #9B1C1C; } .ctl-bloc { border: 1px solid var(--trait-leger); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; } .ctl-bloc h4 { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: 14px; } .ctl-bloc h4 small { font-weight: 400; color: var(--encre2); } .ctl-liste { margin: 4px 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; } .ctl-liste code { font-size: 12px; background: var(--survol); padding: 1px 6px; border-radius: 6px; margin-right: 4px; } .ctl-liste.ko li::marker { color: #B42318; } .ctl-liste.avt li::marker { color: #B45309; } .ctl-ok { display: flex; gap: 6px; align-items: center; color: #15803D; margin: 4px 0; } .ctl-sous { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); } .ctl-etat { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; } .ctl-etat.ok { color: #15803D; } .ctl-etat.ko { color: #B42318; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ctl-verdict.ok { background: #12301F; color: #BBF7D0; } :root:not([data-theme="light"]) .ctl-verdict.ko { background: #3A1515; color: #FECACA; } } /* 1.2.0 — Conditions de paiement et échéance */ .pe-ligne { align-items: start; } .pe-ligne .aide .lien-txt { font-size: inherit; padding: 0 0 0 4px; } /* 1.3.0 — Poignée de redimensionnement de la fiche (bord gauche). */ .fp-poignee { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 3; touch-action: none; } .fp-poignee::after { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 48px; margin-top: -24px; border-radius: 3px; background: var(--trait-fort, #B8C1CE); opacity: 0; transition: opacity .15s; } .fp-poignee:hover::after, .fp-poignee.actif::after, .fp-poignee:focus-visible::after { opacity: 1; } .fp-poignee:focus-visible { outline: none; } body.fp-redim, body.fp-redim * { cursor: ew-resize !important; user-select: none !important; } @media (max-width: 760px) { .fp-poignee { display: none; } } /* ── 1.3.0 — Plus de couleur ───────────────────────────────────────────── L'écran ouvert reçoit la teinte de son groupe (--page, posée par aller()). */ :root { --page: var(--accent); --page-pale: color-mix(in srgb, var(--page) 12%, var(--blanc)); } /* La fiche de droite reprend la teinte de l'écran : liseré en tête, libellés et titres de section. */ .fiche .fp-tete { box-shadow: inset 0 4px 0 var(--page); } .fiche .fp-lib { color: color-mix(in srgb, var(--page) 65%, var(--encre2)); } .fiche .fp-champ { border-left: 3px solid color-mix(in srgb, var(--page) 35%, var(--blanc)); } .fiche .fp-section-tete h3 { color: color-mix(in srgb, var(--page) 70%, var(--encre)); } .fiche .fp-resume > div { background: var(--page-pale); } .topbar { box-shadow: inset 0 -3px 0 var(--page); } .tb-titre #titre-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--page-pale); color: var(--page); flex: 0 0 auto; } .tableau th { background: color-mix(in srgb, var(--page) 9%, var(--blanc)); color: color-mix(in srgb, var(--page) 72%, var(--encre)); border-bottom: 2px solid color-mix(in srgb, var(--page) 28%, var(--blanc)); } .tableau tbody tr[tabindex]:hover { background: color-mix(in srgb, var(--page) 5%, var(--blanc)); } .filtre.actif { background: var(--page); border-color: var(--page); color: #fff; } .titre-section { color: color-mix(in srgb, var(--page) 70%, var(--encre)); } .tableau-zone { border-top: 3px solid color-mix(in srgb, var(--page) 55%, var(--blanc)); } /* La tête du menu aux couleurs OP SYNERGIE : fond ardoise, anneau cyan. */ .sb-tete { background: #2C2F3E; border-bottom: 0; } .sb-tete .sb-logo { background: rgba(10, 186, 228, .16); color: #0ABAE4; } .sb-tete .sb-noms b { color: #FFFFFF; } .sb-tete .sb-noms span { color: #B9C0CE; } .sb-tete .sb-fermer { color: #FFFFFF; } /* En thème sombre, les teintes sont éclaircies : le texte du filtre actif passe au sombre. */ :root[data-theme="dark"] .filtre.actif { color: #10151C; } @media (prefers-color-scheme: dark) { :root.theme-auto .filtre.actif { color: #10151C; } } /* Sur téléphone, chaque carte de liste porte un liseré de la couleur de l'écran. */ @media (max-width: 760px) { .carte { box-shadow: inset 4px 0 0 var(--page); } } /* 1.17.2 — Le fond du menu, au choix (Paramètres → Documents → Habillage). CLAIR (par défaut) : gris ardoise très clair, l'écran ouvert en blanc. En thème sombre : le fond sombre habituel. FONCE (html.menu-fonce) : ardoise #2C2F3E, comme le haut du menu, texte clair. */ .sb { background: #F3F5F8; border-right-color: #DDE2EA; } .sb .sb-groupe + .sb-groupe { border-top-color: rgba(44, 47, 62, .10); } .sb .sb-lien:hover { background: rgba(255, 255, 255, .8); } .sb .sb-groupe .sb-lien.actif { background: #FFFFFF; box-shadow: inset 3px 0 0 var(--g), 0 1px 3px rgba(28, 38, 60, .12); } :root[data-theme="dark"] .sb { background: var(--blanc); border-right-color: var(--trait); } :root[data-theme="dark"] .sb .sb-groupe + .sb-groupe { border-top-color: var(--trait); } :root[data-theme="dark"] .sb .sb-lien:hover { background: var(--g-pale); } :root[data-theme="dark"] .sb .sb-groupe .sb-lien.actif { background: var(--g-pale); box-shadow: inset 3px 0 0 var(--g); } @media (prefers-color-scheme: dark) { :root.theme-auto .sb { background: var(--blanc); border-right-color: var(--trait); } :root.theme-auto .sb .sb-groupe + .sb-groupe { border-top-color: var(--trait); } :root.theme-auto .sb .sb-lien:hover { background: var(--g-pale); } :root.theme-auto .sb .sb-groupe .sb-lien.actif { background: var(--g-pale); box-shadow: inset 3px 0 0 var(--g); } } :root.menu-fonce .sb { background: #2C2F3E; border-right-color: #2C2F3E; } :root.menu-fonce .sb-tete { border-bottom: 1px solid rgba(255, 255, 255, .08); } :root.menu-fonce .sb .sb-lien { color: #E4E7EE; } :root.menu-fonce .sb .sb-groupe { --g: color-mix(in srgb, var(--g0) 50%, #FFFFFF); --g-pale: rgba(255, 255, 255, .08); } :root.menu-fonce .sb .sb-groupe + .sb-groupe { border-top-color: rgba(255, 255, 255, .10); } :root.menu-fonce .sb .sb-lien:hover { background: rgba(255, 255, 255, .06); } :root.menu-fonce .sb .sb-groupe .sb-lien.actif { background: rgba(255, 255, 255, .11); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--g); } :root.menu-fonce .sb .sb-lien svg { color: var(--g); } /* Le choix, dans les Paramètres : deux vignettes du menu. */ .mc-edit { display: grid; gap: 8px; margin-bottom: 18px; } .mc-titre { margin: 0; font-weight: 700; font-size: 14px; } .mc-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mc-choix { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; cursor: pointer; background: var(--blanc); } .mc-choix:has(input:checked) { border-color: var(--vert-fonce); box-shadow: 0 0 0 1px var(--vert-fonce) inset; } .mc-choix input { accent-color: var(--vert-fonce); } .mc-choix > span:last-child { display: grid; gap: 2px; min-width: 0; } .mc-choix small { color: var(--encre2); font-size: 12.5px; line-height: 1.35; } .mc-ech { flex: 0 0 auto; width: 54px; height: 64px; border-radius: 8px; padding: 8px 7px; display: grid; gap: 5px; align-content: start; box-sizing: border-box; border: 1px solid var(--trait); } .mc-ech i { display: block; height: 6px; border-radius: 3px; } .mc-clair { background: #F3F5F8; } .mc-clair i { background: #C9D0DB; } .mc-clair i.mc-actif { background: #FFFFFF; box-shadow: inset 3px 0 0 #6941C6, 0 1px 2px rgba(0, 0, 0, .12); height: 9px; } .mc-fonce { background: #2C2F3E; border-color: #2C2F3E; } .mc-fonce i { background: rgba(255, 255, 255, .35); } .mc-fonce i.mc-actif { background: rgba(255, 255, 255, .18); box-shadow: inset 3px 0 0 #A78BFA; height: 9px; } @media (max-width: 560px) { .mc-liste { grid-template-columns: 1fr; } } /* Repris d'OpsFormaPro 1.9.0 — Désignation mise en forme : la zone, la barre d'outils, l'affichage en lecture. */ .le-rang .le-riche { font: inherit; font-size: 13.5px; line-height: 1.4; min-height: 34px; max-height: 240px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); width: 100%; box-sizing: border-box; min-width: 0; word-break: break-word; cursor: text; } .le-rang .le-riche:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 20%, transparent); } .le-riche:empty::before { content: attr(data-ph); color: var(--encre3, #8A93A3); pointer-events: none; } .le-riche ul, .le-riche ol, .lg-riche ul, .lg-riche ol { margin: 2px 0 2px 20px; padding: 0; } .le-riche li, .lg-riche li { margin: 1px 0; } .le-riche div, .lg-riche div { min-height: 1em; } .le-rang.le-txt .le-riche { font-style: italic; background: var(--survol); } .le-format { position: fixed; z-index: 1300; display: flex; gap: 2px; padding: 3px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 9px; box-shadow: 0 6px 18px -6px rgba(20, 24, 34, .28); } .le-format button { min-width: 32px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--encre); font: inherit; font-size: 13.5px; cursor: pointer; } .le-format button:hover { background: var(--survol); } .le-format button.actif { background: var(--bleu-pale); color: var(--bleu-texte); } .le-format button:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; } @media (max-width: 760px) { .le-rang .le-riche { font-size: 16px; min-height: 40px; } .le-format button { min-width: 40px; height: 38px; } } /* 1.4.1 — Fiche sur téléphone : deux actions et « Plus » ; le reste dans un volet. */ .fp-plus { display: none; } .fp-plus small { font-size: 12px; font-weight: 800; background: var(--gris-pale); color: var(--gris-texte); border-radius: 999px; padding: 1px 7px; } .lo-bascule { display: none; } .feuille-voile { position: fixed; inset: 0; z-index: 90; background: rgba(15, 22, 32, .45); display: flex; align-items: flex-end; justify-content: center; } .feuille-voile[hidden] { display: none; } .feuille { width: min(560px, 100%); max-height: 80vh; overflow-y: auto; background: var(--blanc); border-radius: 18px 18px 0 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(15, 22, 32, .25); animation: monte .16s ease-out; } @keyframes monte { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } } .feuille::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--trait-fort); margin: 2px auto 10px; } .feuille-liste { display: grid; } .feuille-item { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--trait-leger); background: transparent; color: var(--encre); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; border-radius: 10px; } .feuille-item:hover, .feuille-item:focus { background: var(--survol); outline: none; } .feuille-item.rouge { color: var(--rouge-txt); } .feuille-item:disabled { opacity: .5; } .feuille-annuler { width: 100%; min-height: 48px; margin-top: 8px; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier); color: var(--encre); font: inherit; font-weight: 700; cursor: pointer; } @media (max-width: 760px) { .fp-actions { flex-wrap: nowrap; } .fp-actions .fp-repli { display: none; } .fp-actions .fp-plus { display: inline-flex; flex: 0 0 auto; } .fp-actions { gap: 6px; padding: 8px 10px; } .fp-actions .btn { min-width: 0; white-space: normal; line-height: 1.15; text-align: center; padding: 6px 10px; gap: 6px; font-size: 14px; } .fp-actions .btn:not(.fp-plus) { flex: 1 1 auto; justify-content: center; } .fp-actions .btn:not(.fp-plus) svg { display: none; } .fp-actions .fp-plus { padding: 8px 10px; } .liste-outils { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lo-bascule { min-width: 0; white-space: nowrap; overflow: hidden; } .fp-tete { padding: 12px 14px; } .fp-titres h2 { font-size: 17px; } .fp-corps { padding: 12px 14px 32px; } /* Listes : recherche et bouton « Filtres et tri » ; le détail s'ouvre à la demande. */ .liste-outils .lo-bascule { display: inline-flex; justify-content: center; min-height: 42px; } .liste-outils .lo-bascule b { background: var(--vert-fonce); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; } .liste-outils:not(.ouvert) .filtre-plus { display: none; } .liste-outils .recherche { grid-column: 1; } } /* Le carnet de prise en main, dans « Mon compte ». */ .pc-carnet { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; color: var(--encre); text-decoration: none; background: var(--vert-pale); } .pc-carnet:hover { border-color: var(--accent); } .pc-carnet svg { color: var(--accent); flex: 0 0 auto; } .pc-carnet span { display: grid; gap: 2px; min-width: 0; } .pc-carnet small { color: var(--encre2); font-size: 12.5px; } /* ============================================================ 1.5.0 — Module « Mon instrument » ============================================================ */ .bandeau-vert { background: var(--vert-pale); color: var(--vert-pastille-texte); border: 1px solid var(--vert-trait); } /* Les étapes d'un dépôt : un clic fait avancer le statut. */ .dp-zone { container-type: inline-size; margin: 0 0 14px; } .dp-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; } .dp-etape { width: 100%; height: 100%; min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 10px; border: 1.5px solid var(--trait); background: var(--blanc); color: var(--encre2); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.2; } .dp-etape:not([disabled]):hover { border-color: var(--accent); color: var(--encre); } .dp-etape[disabled] { cursor: default; opacity: .75; } .dp-etape.fait { color: var(--encre); border-color: var(--vert-trait); } .dp-etape.courant { background: var(--vert-pale); border-color: var(--accent); color: var(--encre); opacity: 1; } .dp-puce { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--trait-fort); display: grid; place-items: center; color: #fff; } .dp-etape.fait .dp-puce { background: var(--accent); border-color: var(--accent); } .dp-etape.courant .dp-puce { border: 5px solid var(--accent); } .dp-etape:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @container (max-width: 760px) { .dp-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dp-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .fp-enfant-droite { display: flex !important; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Forfait de séances : le compteur et les cases. */ .fs-compteur { display: grid; justify-items: center; padding: 6px 0 10px; } .fs-compteur b { font-size: 46px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .fs-compteur span { font-weight: 600; color: var(--encre2); } .fs-pastilles { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px; margin: 0 0 14px; } .fs-pastilles span { height: 22px; border-radius: 6px; border: 1.5px solid var(--vert-trait); background: var(--blanc); } .fs-pastilles span.pl { background: var(--accent); border-color: var(--accent); } .fs-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .fs-liste li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--trait-leger); } .fs-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-pastille-texte); display: grid; place-items: center; font-weight: 700; font-size: 13px; } .fs-txt { flex: 1; display: grid; min-width: 0; } .fs-txt small { color: var(--encre2); font-size: 12.5px; } .fs-txt b { font-weight: 600; } /* 1.5.1 — Photos d'un dépôt (à l'arrivée, à la remise). */ .ph-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .ph-bloc { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); } .ph-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ph-tete small { color: var(--encre2); font-size: 12px; } .ph-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; } .ph-vignette { padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--trait-leger); aspect-ratio: 1; } .ph-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; } .ph-vignette:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .ph-ajout { justify-self: start; cursor: pointer; } .ph-grande { display: grid; place-items: center; background: #11151C; border-radius: 10px; overflow: hidden; } .ph-grande img { max-width: 100%; max-height: 68vh; display: block; } /* ── 1.12.0 — Le planning des rendez-vous (module Mon instrument) ───────── Une semaine en colonnes (une heure = 56 px), un jour sur téléphone. Chaque type a sa couleur (--ev) ; le fond se mélange au blanc du thème, clair ou sombre. */ .ag-entete { align-items: center; } .ag-boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ag { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); } .ag-tetes { display: grid; grid-template-columns: 52px repeat(var(--n, 7), minmax(0, 1fr)); border-bottom: 1px solid var(--trait); background: var(--blanc); } .ag-tetes { grid-template-columns: 52px repeat(7, minmax(0, 1fr)); } .ag-tel .ag-tetes { grid-template-columns: 52px 1fr; } .ag-tete-jour { display: grid; justify-items: center; padding: 8px 0 7px; position: relative; border-left: 1px solid var(--trait-leger); } .ag-tete-jour small { font-size: 12px; color: var(--encre2); text-transform: capitalize; } .ag-tete-jour b { font-size: 20px; line-height: 1.15; font-weight: 700; } .ag-tete-jour i { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: var(--bleu-pale); color: var(--bleu-texte); padding: 0 5px; } .ag-tete-jour.ag-auj b { background: var(--action); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; } .ag-corps { display: grid; grid-template-columns: 52px 1fr; max-height: calc(100vh - 250px); min-height: 360px; overflow-y: auto; position: relative; } .ag-heures { position: relative; border-right: 1px solid var(--trait); } .ag-heures span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11.5px; color: var(--encre3); font-variant-numeric: tabular-nums; } .ag-heures span:first-child { transform: none; top: 2px !important; } .ag-jours { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); } .ag-col { position: relative; border-left: 1px solid var(--trait-leger); cursor: copy; background-image: repeating-linear-gradient(to bottom, var(--trait-leger) 0 1px, transparent 1px 28px, color-mix(in srgb, var(--trait-leger) 45%, transparent) 28px 29px, transparent 29px 56px); } .ag-col:first-child { border-left: 0; } .ag-we { background-color: var(--survol); } .ag-col.ag-auj { background-color: color-mix(in srgb, var(--action) 5%, transparent); } .ag-evt { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; text-align: left; cursor: pointer; padding: 3px 6px 3px 8px; border: 0; border-left: 4px solid var(--ev); border-radius: 7px; font: inherit; color: var(--encre); background: color-mix(in srgb, var(--ev) 17%, var(--blanc)); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: box-shadow .15s, transform .15s; } .ag-evt:hover, .ag-evt:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .16); z-index: 2; transform: translateY(-1px); } .ag-evt .ag-h { white-space: nowrap; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--ev) 70%, var(--encre)); display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; } .ag-evt b { font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-evt small { font-size: 12px; color: var(--encre2); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-evt.ag-court { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; } .ag-evt.ag-court small { display: none; } .ag-evt.ag-indispo { border-left-color: var(--encre3); color: var(--encre2); background: repeating-linear-gradient(-45deg, var(--gris-pale) 0 6px, color-mix(in srgb, var(--gris-pale) 50%, var(--blanc)) 6px 12px); } .ag-evt.ag-st-fait { opacity: .72; } .ag-evt.ag-st-fait .ag-h { color: var(--action); } .ag-evt.ag-st-absent { border-left-color: var(--rouge); background: var(--rouge-fond); } .ag-evt.ag-st-absent .ag-h { color: var(--rouge-txt); } .ag-evt.ag-chev { outline: 2px dashed color-mix(in srgb, var(--ambre-texte) 55%, transparent); outline-offset: -2px; } .ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--rouge); z-index: 3; pointer-events: none; } .ag-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); } .ag-promis { margin-top: 3px; font-size: 11px; font-weight: 600; border-radius: 9px; padding: 1px 7px; background: var(--ambre-fond); color: var(--ambre-texte); display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; } .ag-annules { position: absolute; z-index: 2; right: 4px; bottom: 4px; font-size: 11px; font-weight: 600; border-radius: 9px; padding: 1px 7px; pointer-events: none; background: var(--gris-pale); color: var(--gris-texte); } .ag-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 2px 0; font-size: 13px; color: var(--encre2); } .ag-legende span { display: inline-flex; align-items: center; gap: 6px; } .ag-l { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border-left: 4px solid var(--ev); background: color-mix(in srgb, var(--ev) 22%, var(--blanc)); vertical-align: -2px; } .ag-l-indispo { background: repeating-linear-gradient(-45deg, var(--gris-pale) 0 3px, var(--blanc) 3px 6px); border-left-color: var(--encre3); } .ag-l-fait { --ev: var(--action); opacity: .72; } /* Téléphone : les jours en pastilles, un seul jour en colonne. */ .ag-puces { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; } .ag-puces button { display: grid; justify-items: center; gap: 0; padding: 6px 0 4px; border-radius: 12px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; cursor: pointer; } .ag-puces button small { font-size: 11.5px; color: var(--encre2); text-transform: capitalize; } .ag-puces button b { font-size: 17px; line-height: 1.2; } .ag-puces button i { font-style: normal; font-size: 12px; line-height: 1; color: var(--action); min-height: 12px; letter-spacing: 1px; } .ag-puces button.ag-auj b { color: var(--action); } .ag-puces button.actif { background: var(--action); border-color: var(--action); color: #fff; } .ag-puces button.actif small, .ag-puces button.actif i, .ag-puces button.actif.ag-auj b { color: #fff; } .ag-tel .ag-corps { max-height: none; } .ag-tel .ag-tetes { display: none; } @media (max-width: 760px) { .ag-txt-large { display: none; } .ag-entete .pl-nav { width: 100%; } .ag-periode { flex: 1 1 100%; margin-left: 0 !important; order: -1; font-size: 17px; } .ag-boutons { width: 100%; } .ag-boutons .btn-p { margin-left: auto; } .ag-evt b { font-size: 14px; } .ag-evt small { font-size: 12.5px; } } /* Les rappels de demain, et les réglages. */ .ag-raps { list-style: none; margin: 8px 0 0; padding: 0; } .ag-rap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait-leger); } .ag-rap div { display: grid; gap: 3px; justify-items: start; min-width: 0; } .ag-rap small { color: var(--encre2); } .ag-gcal { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--survol); border: 1px solid var(--trait-leger); } .ag-gcal h3 { margin: 0 0 6px; font-size: 15px; display: flex; gap: 8px; align-items: center; } .ag-gcal p { margin: 0 0 10px; color: var(--encre2); font-size: 14px; } .ag-lien { display: flex; gap: 8px; margin-bottom: 6px; } .ag-lien input { flex: 1 1 auto; min-width: 0; font-size: 13px; } .ag-etapes { margin: 10px 0 8px; padding-left: 20px; font-size: 14px; color: var(--encre2); } .ag-etapes li { margin-bottom: 3px; } @media print { .ag-corps { max-height: none; overflow: visible; } .ag-boutons, .ag-puces { display: none; } } /* 1.12.1 — Glisser-déplacer : la main pour prendre, la poignée du bas pour la durée. */ .ag-evt.ag-mobile { cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .ag-poignee { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; } .ag-poignee::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: color-mix(in srgb, var(--ev) 55%, transparent); opacity: 0; transition: opacity .15s; } .ag-evt.ag-mobile:hover .ag-poignee::after, .ag-evt.ag-glisse .ag-poignee::after { opacity: 1; } .ag-evt.ag-glisse { z-index: 5; cursor: grabbing; transform: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); outline: 2px solid var(--ev); outline-offset: 1px; opacity: .95; transition: none; } .ag-glisse-en-cours, .ag-glisse-en-cours * { cursor: grabbing !important; } .ag-glisse-en-cours .ag-col { cursor: grabbing; } .ag-puces button.ag-cible { outline: 3px solid var(--action); outline-offset: 2px; background: color-mix(in srgb, var(--action) 14%, var(--blanc)); } @media (hover: none) { .ag-poignee { height: 14px; } .ag-poignee::after { opacity: 1; } } /* 1.12.1 — Les messages à envoyer (espace du client, rappel de rendez-vous) : une zone haute, lisible d'un coup d'œil. */ textarea.ta-message { min-height: 300px; resize: vertical; line-height: 1.5; } @media (max-width: 620px) { textarea.ta-message { min-height: 240px; } } /* 1.13.0 — L'habillage : une image dans le bandeau des fenêtres (bd-fen) et dans le haut des fiches de droite (bd-fic). Posé par index.php sur (--bandeau = l'image) et par appliquerBandeau() après Paramètres → Documents. Deux façons de poser l'image : un objet détouré (PNG transparent), couché de biais avec une ombre ; ou une photo (bd-photo) qui remplit le côté droit et se fond dans la couleur du bandeau. bd-auto : la basse du module Musique, avec sa lueur de bois. */ .bd-fen { --bd-ardoise: #24252F; } .bd-fen .md:not(.md-lignes) { overflow: hidden; } .bd-fen .md:not(.md-lignes) .md-tete { position: relative; overflow: hidden; flex-shrink: 0; min-height: 78px; border-bottom: 0; color: #FFFFFF; background: radial-gradient(90% 160% at 78% 50%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, 0) 70%) var(--bd-ardoise); } .bd-fen.bd-auto .md:not(.md-lignes) .md-tete { background: radial-gradient(90% 160% at 78% 50%, #6A4428 0%, #3B2B25 38%, #24252F 72%) #24252F; } .bd-fen .md:not(.md-lignes) .md-tete::after { content: ""; position: absolute; z-index: 0; pointer-events: none; right: 50px; top: 50%; width: 240px; height: 72px; margin-top: -33px; transform: rotate(-7deg); background: var(--bandeau) center / contain no-repeat; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .55)); } .bd-fen .md:not(.md-lignes) .md-tete::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--bd-ardoise) 0%, rgba(36, 37, 47, .85) 30%, rgba(36, 37, 47, 0) 52%); } .bd-fen .md:not(.md-lignes) .md-tete h2 { position: relative; z-index: 2; color: #FFFFFF; max-width: calc(100% - 270px); line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } .bd-fen .md:not(.md-lignes) .md-fermer { position: relative; z-index: 2; color: #FFFFFF; background: rgba(255, 255, 255, .14); border-radius: 9px; width: 34px; height: 34px; } .bd-fen .md:not(.md-lignes) .md-fermer:hover { background: rgba(255, 255, 255, .26); } .bd-fen .md.md-large:not(.md-lignes) .md-tete h2 { max-width: calc(100% - 300px); } /* Une photo : elle occupe les deux tiers de droite, en fondu. */ .bd-fen.bd-photo .md:not(.md-lignes) .md-tete::after { right: 0; top: 0; bottom: 0; width: 66%; height: auto; margin: 0; transform: none; filter: none; background: var(--bandeau) center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); } .bd-fen.bd-photo .md:not(.md-lignes) .md-tete::before { background: linear-gradient(90deg, rgba(36, 37, 47, .55) 0%, rgba(36, 37, 47, .15) 55%, rgba(36, 37, 47, .25) 100%); } .bd-fen.bd-photo .md:not(.md-lignes) .md-tete h2, .bd-fen.bd-photo .md.md-large:not(.md-lignes) .md-tete h2 { max-width: 62%; } @media (max-width: 560px) { .bd-fen .md:not(.md-lignes) .md-tete { min-height: 70px; } .bd-fen .md:not(.md-lignes) .md-tete::after { width: 190px; height: 60px; margin-top: -30px; right: 34px; opacity: .6; } .bd-fen.bd-photo .md:not(.md-lignes) .md-tete::after { width: 80%; height: auto; margin: 0; right: 0; opacity: .8; } .bd-fen .md:not(.md-lignes) .md-tete::before { background: linear-gradient(90deg, #24252F 0%, rgba(36, 37, 47, .8) 45%, rgba(36, 37, 47, .15) 85%); } .bd-fen .md:not(.md-lignes) .md-tete h2, .bd-fen.bd-photo .md:not(.md-lignes) .md-tete h2 { max-width: none; } } /* Le haut des fiches de droite : l'image à droite, plus discrète, sous un fondu de la couleur de la fiche. */ .bd-fic .fp-tete { position: relative; overflow: hidden; flex-shrink: 0; } .bd-fic .fp-tete > * { position: relative; z-index: 2; } .bd-fic .fp-tete::after { content: ""; position: absolute; z-index: 0; pointer-events: none; right: 58px; top: 50%; width: 190px; height: 58px; margin-top: -27px; transform: rotate(-7deg); opacity: .9; background: var(--bandeau) center / contain no-repeat; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .45)); } .bd-fic .fp-tete::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--vert-fonce) 0%, var(--vert-fonce) 38%, transparent 78%); opacity: .92; } .bd-fic.bd-photo .fp-tete::after { right: 0; top: 0; bottom: 0; width: 60%; height: auto; margin: 0; transform: none; filter: none; opacity: 1; background: var(--bandeau) center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); } .bd-fic.bd-photo .fp-tete::before { background: linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, .18) 100%); opacity: 1; } .bd-fic .fp-titres h2 { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); } @media (max-width: 560px) { .bd-fic .fp-tete::after { width: 150px; height: 46px; margin-top: -21px; right: 52px; opacity: .55; } } @media print { .bd-fic .fp-tete::after, .bd-fic .fp-tete::before, .bd-fen .md-tete::after, .bd-fen .md-tete::before { display: none; } } /* 1.13.0 — Paramètres → Documents → Habillage : les trois choix, l'aperçu d'une fenêtre et d'une fiche. */ .bd-edit { display: grid; gap: 14px; } .bd-edit > .aide { margin: 0; } .bd-choix-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .bd-choix { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; cursor: pointer; background: var(--blanc); } .bd-choix:has(input:checked) { border-color: var(--vert-fonce); box-shadow: 0 0 0 1px var(--vert-fonce) inset; } .bd-choix input { margin-top: 3px; accent-color: var(--vert-fonce); } .bd-choix span { display: grid; gap: 2px; min-width: 0; } .bd-choix small { color: var(--encre2); font-size: 12.5px; line-height: 1.35; } .bd-apercus { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: 14px; background: var(--gris-pale, #EEF0F3); } .bd-apercus .md { width: 100%; max-height: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); } .bd-apercus .md-fermer, .bd-apercus .fp-fermer { display: inline-grid; place-items: center; cursor: default; } .bd-apercus .md-corps { display: grid; gap: 8px; } .bd-ligne { display: block; height: 9px; border-radius: 5px; background: var(--trait); } .bd-ligne.court { width: 60%; } .bd-apercu-fiche { border-radius: 12px; overflow: hidden; background: var(--blanc); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); } .bd-apercu-fiche .fp-tete { padding: 14px 16px; } .bd-apercu-fiche .fp-titres h2 { font-size: 16px; } .bd-apercu-fiche .fp-fermer { margin-left: auto; flex: 0 0 auto; } .bd-apercu-actions { display: flex; gap: 6px; padding: 10px 14px; } .bd-apercu-actions span { height: 22px; flex: 1; border-radius: 7px; background: var(--trait); } .bd-apercus.bd-sans-fen .bd-apercu-md, .bd-apercus.bd-sans-fic .bd-apercu-fiche { opacity: .55; } .bd-image { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; } .bd-image .bd-genre { margin: 0; min-width: 240px; } .bd-ou { display: grid; gap: 8px; } @media (max-width: 760px) { .bd-choix-liste, .bd-apercus { grid-template-columns: minmax(0, 1fr); } .bd-apercus { padding: 12px; } .bd-image .bd-genre { min-width: 0; flex: 1 1 100%; } } /* 1.14.0 — Fiche de réglage : le pupitre de l'ampli, l'instrument, la chaîne d'effets, le conseil. */ .rg-fiche { display: grid; gap: 12px; margin: 14px 0; } .rg-panneau { background: #1B1B22; border-radius: 16px; padding: 14px 12px 12px; color: #E6E6E6; box-shadow: inset 0 0 0 2px #0C0C10, inset 0 0 0 4px #3A3D4C; } .rg-etiq { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #FC9508; margin: 0 4px 8px; } .rg-led { width: 9px; height: 9px; border-radius: 50%; background: #FC9508; box-shadow: 0 0 8px 2px rgba(252, 149, 8, .7); } .rg-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 4px; } .rg-bouton { display: flex; flex-direction: column; align-items: center; min-width: 0; } .rg-bouton svg { width: 100%; max-width: 74px; height: auto; overflow: visible; } .rg-grad line { stroke: #8A8D9C; } .rg-nom { font-size: 12px; font-weight: 700; } .rg-val { font-size: 12.5px; font-weight: 800; color: #FC9508; font-variant-numeric: tabular-nums; } .rg-instr { display: flex; flex-wrap: wrap; gap: 6px; } .rg-instr span { display: grid; padding: 6px 10px; border-radius: 10px; background: var(--gris-pale); font-weight: 700; font-size: 14px; line-height: 1.25; } .rg-instr small { font-size: 11px; font-weight: 600; color: var(--encre2); text-transform: uppercase; letter-spacing: .04em; } .rg-fx { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: fx; } .rg-fx li { counter-increment: fx; font-size: 13.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--vert-fonce); } .rg-fx li::before { content: counter(fx); font-size: 11px; font-weight: 800; color: var(--vert-fonce); margin-right: 6px; } .rg-conseil { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--gris-pale); margin: 0 0 14px; line-height: 1.45; } .rg-conseil b { display: block; font-size: 13px; } /* 1.15.0 — Espace du client : dernière ouverture, code à 4 chiffres, nouveau lien. */ .esp-secu { display: grid; gap: 8px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--gris-pale); } .esp-secu-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; } .esp-secu-ligne svg { color: var(--encre2); flex-shrink: 0; } .esp-secu-mode { margin: 0; } .esp-secu .btn { justify-self: start; } /* 1.16.0 — Le planning : bascule Semaine / Mois, et la grille du mois. */ .ag-vues { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--gris-pale); border: 1px solid var(--trait); } .ag-vues button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--encre2); padding: 6px 12px; border-radius: 8px; cursor: pointer; } .ag-vues button[aria-pressed="true"] { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .ag-mois { border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; background: var(--blanc); } .ag-m-noms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--gris-pale); border-bottom: 1px solid var(--trait); } .ag-m-noms span { padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: var(--encre2); text-transform: capitalize; } .ag-m-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .ag-m-jour { min-height: 118px; min-width: 0; padding: 6px 6px 8px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background .15s; } .ag-m-jour:nth-child(7n) { border-right: 0; } .ag-m-jour:hover { background: color-mix(in srgb, var(--action) 4%, transparent); } .ag-m-jour.ag-we { background: color-mix(in srgb, var(--gris-pale) 55%, transparent); } .ag-m-jour.ag-m-hors > * { opacity: .45; } .ag-m-jour.ag-cible { background: color-mix(in srgb, var(--action) 14%, transparent); outline: 2px dashed var(--action); outline-offset: -3px; } .ag-m-tete { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 2px; } .ag-m-num { border: 0; background: none; font: inherit; font-weight: 800; font-size: 14px; color: var(--encre); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } .ag-m-num:hover { background: var(--gris-pale); } .ag-m-jour.ag-auj .ag-m-num { background: var(--action); color: #fff; } .ag-m-evt { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--ev); background: color-mix(in srgb, var(--ev) 13%, var(--blanc)); color: var(--encre); font: inherit; font-size: 12.5px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-m-evt span { font-weight: 700; font-variant-numeric: tabular-nums; } .ag-m-evt[draggable="true"] { cursor: grab; } .ag-m-evt.ag-glisse { opacity: .5; } .ag-m-evt.ag-st-fait { opacity: .62; } .ag-m-evt.ag-st-absent { text-decoration: line-through; } .ag-m-evt.ag-indispo { background: repeating-linear-gradient(135deg, var(--gris-pale) 0 6px, transparent 6px 12px); border-left-color: #8A94A3; } .ag-m-plus { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--action); text-align: left; padding: 1px 6px; cursor: pointer; } .ag-m-jour .ag-promis { font-size: 11px; } /* Sur téléphone : des pastilles, et la liste du jour touché en dessous. */ .ag-mois-tel .ag-m-noms span { padding: 6px 0; text-align: center; font-size: 11px; } .ag-mois-tel .ag-m-jour { min-height: 54px; padding: 4px 0; align-items: center; justify-content: flex-start; gap: 2px; border: 0; border-bottom: 1px solid var(--trait); background: none; font: inherit; color: var(--encre); } .ag-mois-tel .ag-m-jour b { font-size: 15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; } .ag-mois-tel .ag-m-jour.ag-auj b { color: var(--action); } .ag-mois-tel .ag-m-jour.actif b { background: var(--action); color: #fff; } .ag-mois-tel .ag-m-jour i { display: flex; gap: 2px; min-height: 6px; } .ag-mois-tel .ag-m-jour i em { width: 6px; height: 6px; border-radius: 50%; background: var(--ev); } .ag-mois-tel .ag-m-jour small { font-size: 10px; color: var(--encre2); line-height: 1; } .ag-m-liste { margin: 14px 0 6px; display: grid; gap: 8px; } .ag-m-liste h3 { margin: 0; font-size: 16px; } .ag-m-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ag-m-ligne { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid var(--trait); border-left: 4px solid var(--ev); background: var(--blanc); color: var(--encre); border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer; } .ag-m-ligne b { font-variant-numeric: tabular-nums; min-width: 4.2em; } .ag-m-ligne span { display: grid; min-width: 0; } .ag-m-ligne small { color: var(--encre2); font-size: 13px; } .ag-m-ligne.ag-st-fait { opacity: .7; } .ag-m-liste .btn { justify-self: start; } .ag-m-liste .lien-txt { justify-self: start; } @media print { .ag-vues { display: none; } .ag-m-jour { min-height: 90px; } } /* 1.16.0 — La photo de l'instrument, dans sa fiche : une vignette, les boutons à côté ; un clic l'agrandit. */ .in-photo { margin: 0 0 14px; display: flex; align-items: center; gap: 14px; } .in-photo-img { flex: 0 0 auto; padding: 0; border: 0; background: var(--gris-pale); border-radius: 12px; overflow: hidden; cursor: zoom-in; display: block; width: 168px; height: 126px; } .in-photo-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .in-photo figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .in-photo figcaption small, .in-photo-vide small { color: var(--encre2); font-size: 13px; } .in-photo-vide { display: grid; justify-items: start; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border: 2px dashed var(--trait); border-radius: 12px; } @media (max-width: 560px) { .in-photo-img { width: 128px; height: 96px; } } .in-photo figcaption .lien-txt { padding-left: 0; padding-right: 0; } .in-photo-grande { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; border-radius: 10px; } /* 1.17.0 — Mes documents : brochure, Kbis, RIB… (repris d'OpsFormaPro). */ .bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .bib-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; min-width: 0; } .bib-carte.inactif { opacity: .6; } .bib-tete { display: flex; gap: 8px; align-items: flex-start; } .bib-tete svg { color: var(--accent); flex: none; margin-top: 2px; } .bib-tete small { display: block; color: var(--encre2); font-size: 12px; } .bib-carte p { margin: 0; font-size: 13px; color: var(--encre2); } .bib-carte p svg { vertical-align: -2px; } .bib-fichier { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bib-fichier a { color: var(--lien); text-decoration: none; } .bib-fichier svg { vertical-align: -2px; } .bib-actions { display: flex; gap: 6px; flex-wrap: wrap; } .doc-ent-actions { align-items: center; } .doc-ent-actions .bib-icones { display: inline-flex; gap: 6px; margin-left: auto; } .doc-ent-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; } .doc-ent-suggest .filtre svg { vertical-align: -2px; } .pj-ent { border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px 6px; background: var(--gris-pale); } .pj-titre { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 2px; } .pj-titre svg { color: var(--accent); } .pj-liste .case { font-weight: 500; font-size: 14px; align-items: flex-start; } .pj-liste .case span { line-height: 1.35; padding-top: 1px; } .pj-liste .case small { display: block; font-size: 12px; } .case.desactive { cursor: not-allowed; opacity: .75; } .env-pj { display: block; margin-top: 2px; font-size: 12px; } .env-pj svg { vertical-align: -2px; } /* ══ 1.18.0 — Métallerie ═══════════════════════════════════════════════════ Un atelier : la planche (plan coté sur papier millimétré), l'établi (les réglages), et la barre du prix qui suit chaque geste. */ .sb-groupe.g-rouille { --g0: #B4431C; } .mt-accueil { background: radial-gradient(420px 220px at 92% 0%, rgba(232,137,26,.28), transparent 70%), linear-gradient(135deg, #263241, #1C2430); color: #fff; border-radius: 18px; padding: 22px 22px 20px; margin-bottom: 16px; position: relative; overflow: hidden; } .mt-accueil::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 2px dashed rgba(232,137,26,.35); } .mt-accueil-tete { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1; } .mt-kick { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #F4A64A; } .mt-accueil h2 { margin: 4px 0 6px; font-size: 24px; line-height: 1.15; color: #fff; } .mt-accueil p { margin: 0; color: #C9D2DD; max-width: 620px; font-size: 14.5px; } .mt-compteurs { display: flex; gap: 10px; } .mt-compteurs div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 8px 14px; display: grid; min-width: 96px; } .mt-compteurs b { font-size: 19px; } .mt-compteurs span { font-size: 12px; color: #C9D2DD; } .mt-types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 18px; position: relative; z-index: 1; } .mt-type { background: #fff; color: #1E2833; border: 0; border-radius: 14px; padding: 12px 10px 11px; display: grid; justify-items: center; gap: 3px; cursor: pointer; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease; font: inherit; } .mt-type:hover, .mt-type:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.28); outline: none; } .mt-type:focus-visible { box-shadow: 0 0 0 3px #F4A64A; } .mt-type-ico svg { width: 72px; height: 50px; display: block; } .mt-type b { font-size: 14px; } .mt-type small { font-size: 11.5px; color: #5B6878; line-height: 1.25; } .mt-types-modale { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; } /* 1.56.0 — Les ouvrages rangés par famille */ .mt-famille { position: relative; z-index: 1; margin-top: 16px; } .mt-famille-titre { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F4A64A; } .mt-famille .mt-types { margin-top: 0; } .mt-familles-modale .mt-famille:first-child { margin-top: 0; } .mt-familles-modale .mt-famille-titre { color: var(--encre2); } .mt-types-modale .mt-type { border: 1px solid var(--trait); box-shadow: none; } @media (max-width: 1100px) { .mt-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 520px) { .mt-types, .mt-types-modale { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-accueil h2 { font-size: 20px; } } .mt-outils { margin-bottom: 12px; } .mt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .mt-carte { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--encre); transition: border-color .15s, transform .15s; min-width: 0; } .mt-carte:hover { border-color: #E8891A; transform: translateY(-1px); } .mt-carte-ico { flex: none; width: 64px; height: 48px; border-radius: 10px; background: #F3F5F8; display: grid; place-items: center; } .mt-carte-ico svg { width: 56px; height: 40px; } .mt-carte-corps { display: grid; gap: 3px; min-width: 0; flex: 1; } .mt-carte-haut { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .mt-carte-haut b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-carte small { color: var(--encre2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-carte-bas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; } .mt-carte-bas svg { vertical-align: -2px; } .mt-niv { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; font-size: 12px; border-radius: 20px; padding: 1px 8px; } .mt-niv-ok { background: #E3F4EA; color: #17663A; } .mt-niv-alerte { background: #FDEBD8; color: #9A4F00; } /* L'atelier */ .mt-atelier { display: grid; gap: 12px; } .mt-barre-haut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mt-titre-ouvrage { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .mt-titre-ouvrage b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-titre-ouvrage small { color: var(--encre2); } .mt-mini svg { width: 42px; height: 30px; display: block; } .mt-actions-haut { display: flex; gap: 8px; flex-wrap: wrap; } .mt-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; } .mt-planche { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; min-width: 0; } .mt-onglets { display: flex; border-bottom: 1px solid var(--trait); overflow-x: auto; } .mt-onglets button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 11px 16px; font: inherit; font-weight: 700; color: var(--encre2); cursor: pointer; white-space: nowrap; } .mt-onglets button[aria-selected="true"] { color: #B4431C; border-bottom-color: #E8891A; } .mt-vue { padding: 12px; min-width: 0; } .mt-plan { background-color: #FBFCFD; background-image: linear-gradient(#E9EEF4 1px, transparent 1px), linear-gradient(90deg, #E9EEF4 1px, transparent 1px); background-size: 22px 22px; border: 1px solid #E1E7EE; border-radius: 10px; padding: 6px; } .mt-plan svg { width: 100%; height: auto; max-height: 56vh; display: block; } .mt-infos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .mt-infos span { background: #F3F5F8; border-radius: 10px; padding: 5px 10px; display: grid; } .mt-infos small { font-size: 11px; color: #5B6878; } .mt-infos b { font-size: 14px; color: #1E2833; } .mt-controles { display: grid; gap: 6px; padding: 0 12px 12px; } .mt-ctrl { display: flex; gap: 9px; align-items: flex-start; border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.35; } .mt-ctrl svg { flex: none; margin-top: 1px; } .mt-ctrl b { display: block; font-size: 13.5px; } .mt-ctrl-ok { background: #ECF7F0; color: #155B33; } .mt-ctrl-alerte { background: #FFF1E2; color: #8A4300; border-left: 4px solid #E8891A; } .mt-ctrl-info { background: #F1F4F8; color: #3D4B5C; } .mt-table td, .mt-table th { font-variant-numeric: tabular-nums; } .mt-rep { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 6px; background: #B4431C; color: #fff; font-weight: 800; font-size: 12px; } .mt-quinc { font-size: 13px; margin: 10px 2px 0; } .mt-chute { font-weight: 700; margin: 2px 0 10px; } .mt-profil { margin-bottom: 12px; font-size: 13px; } .mt-barre { display: flex; height: 22px; margin-top: 4px; border: 1.5px solid #1E2833; border-radius: 3px; overflow: hidden; background: #fff; } .mt-barre span { background: #3D4B5C; color: #fff; font-size: 10.5px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; border-right: 1px solid #fff; } .mt-barre span:nth-child(even) { background: #5F7083; } .mt-barre em { background: repeating-linear-gradient(135deg, #F8E3CF 0 5px, #FFF 5px 10px); } .mt-postes, .mt-lignes { display: grid; gap: 2px; } .mt-poste, .mt-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; border-bottom: 1px dashed var(--trait); align-items: baseline; } .mt-poste span, .mt-ligne span { display: grid; min-width: 0; } .mt-poste small, .mt-ligne small { color: var(--encre2); font-size: 12px; } .mt-poste b, .mt-ligne b { font-variant-numeric: tabular-nums; } .mt-ligne .n { text-align: right; font-size: 12.5px; color: var(--encre2); white-space: nowrap; } .mt-poste-total { border-bottom: 2px solid var(--encre); } .mt-h4 { margin: 16px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #B4431C; } /* L'établi */ .mt-panneau { display: grid; gap: 10px; min-width: 0; } .mt-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 13px; display: grid; gap: 9px; } .mt-bloc h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre2); display: flex; gap: 6px; align-items: center; } details.mt-bloc summary { cursor: pointer; list-style: none; } details.mt-bloc summary::-webkit-details-marker { display: none; } details.mt-bloc summary h3::after { content: '＋'; margin-left: auto; font-weight: 400; } details.mt-bloc[open] summary h3::after { content: '−'; } details.mt-bloc summary h3 { display: flex; } .mt-champ { display: grid; gap: 4px; min-width: 0; } .mt-lib { font-size: 12.5px; font-weight: 700; color: var(--encre); } .mt-champ select, .mt-champ textarea, .mt-champ > input[type=text] { width: 100%; box-sizing: border-box; } .mt-champ small { font-size: 11.5px; color: var(--encre2); line-height: 1.3; } .mt-num { display: flex; align-items: stretch; border: 1px solid var(--trait); border-radius: 9px; overflow: hidden; background: var(--blanc); } .mt-num:focus-within { border-color: #E8891A; box-shadow: 0 0 0 3px rgba(232,137,26,.18); } .mt-num input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; font-size: 17px; font-weight: 700; padding: 8px 10px; font-variant-numeric: tabular-nums; background: transparent; color: var(--encre); } .mt-num i { font-style: normal; display: grid; place-items: center; padding: 0 10px; background: #F3F5F8; color: #5B6878; font-size: 12.5px; font-weight: 700; } .mt-seg { display: flex; flex-wrap: wrap; gap: 5px; } .mt-seg button { flex: 1 1 auto; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .mt-seg button.actif { background: #263241; border-color: #263241; color: #fff; box-shadow: inset 0 -3px 0 #E8891A; } .mt-seg button:disabled { cursor: default; opacity: .8; } .mt-bool { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; } .mt-bool input { width: 18px; height: 18px; accent-color: #E8891A; } .mt-astuce { display: flex; gap: 8px; align-items: flex-start; background: #FFF6EA; border: 1px dashed #F0B36B; color: #6B3A00; border-radius: 12px; padding: 9px 11px; font-size: 13px; margin: 0; } .mt-astuce svg { flex: none; color: #E8891A; margin-top: 1px; } .mt-libre { display: grid; gap: 6px; } .mt-libre-l { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 92px 64px auto; gap: 5px; align-items: center; } .mt-libre-l .mt-num input { font-size: 14px; padding: 6px; } @media (max-width: 520px) { .mt-libre-l { grid-template-columns: 1fr 1fr; } } /* Le prix qui suit */ .mt-resume { position: sticky; bottom: 0; z-index: 5; } .mt-resume-in { background: #1C2430; color: #fff; border-radius: 16px; padding: 11px 14px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; box-shadow: 0 -6px 22px rgba(0,0,0,.18); } .mt-prix { display: grid; min-width: 150px; } .mt-prix small { color: #AEB9C6; font-size: 11.5px; } .mt-prix b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; } .mt-prix b span { font-size: 13px; color: #F4A64A; } .mt-chiffres { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; font-size: 13px; color: #DCE3EB; } .mt-chiffres span { display: inline-flex; gap: 5px; align-items: center; } .mt-boutons { display: flex; gap: 8px; flex-wrap: wrap; } .mt-resume .btn-s { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); } .mt-pulse { animation: mt-pulse 1.6s ease-in-out infinite; } @keyframes mt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,137,26,.0); } 50% { box-shadow: 0 0 0 4px rgba(232,137,26,.45); } } @media (prefers-reduced-motion: reduce) { .mt-pulse { animation: none; box-shadow: 0 0 0 2px #E8891A; } .mt-type, .mt-carte { transition: none; } } .mt-lien-devis { margin: 6px 4px 0; font-size: 13px; } .mt-choix-devis { display: grid; gap: 6px; margin-top: 8px; } .mt-etapes { display: flex; flex-wrap: wrap; gap: 6px; } .mt-tdb { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-bottom: 8px; } .mt-tdb button { border: 1px solid var(--trait); background: var(--blanc); border-radius: 10px; padding: 7px; display: grid; cursor: pointer; font: inherit; color: var(--encre); } .mt-tdb b { font-size: 18px; } .mt-tdb span { font-size: 11.5px; color: var(--encre2); } /* Le relevé */ .mt-releve { display: grid; gap: 10px; } .mt-releve-schema svg { width: 100%; max-height: 210px; display: block; background: #FBFCFD; border: 1px solid var(--trait); border-radius: 12px; } .mt-releve-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 560px) { .mt-releve-champs { grid-template-columns: minmax(0, 1fr); } } .mt-lettre { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: #C2410C; color: #fff; font-size: 11.5px; margin-right: 4px; } .mt-releve-bilan { background: #F3F5F8; border-radius: 10px; padding: 9px 11px; font-size: 13.5px; } .mt-ecart { color: #9A4F00; } .mt-ecart svg { vertical-align: -2px; } /* Les tarifs */ .mt-tarifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 10px; } .mt-tarif .mt-num input { font-size: 15px; } @media (max-width: 1000px) { .mt-grille { grid-template-columns: 1fr; } .mt-plan svg { max-height: 44vh; } } @media (max-width: 600px) { .mt-resume-in { padding: 9px 11px; gap: 8px; border-radius: 14px 14px 0 0; } .mt-chiffres { font-size: 12px; gap: 8px; order: 3; flex-basis: 100%; } .mt-prix b { font-size: 20px; } .mt-boutons { margin-left: auto; } .mt-boutons .btn { padding: 8px 10px; } } :root[data-theme="dark"] .mt-type, :root[data-theme="dark"] .mt-carte-ico, :root[data-theme="dark"] .mt-infos span { background: #EEF2F6; } .mt-champ select, .mt-champ > input[type=text], .mt-champ textarea, .mt-libre-l select, .mt-libre-l > input[type=text] { border: 1px solid var(--trait); border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 14.5px; background: var(--blanc); color: var(--encre); min-width: 0; } .mt-champ select:focus, .mt-champ > input[type=text]:focus, .mt-champ textarea:focus, .mt-libre-l select:focus, .mt-libre-l > input:focus { border-color: #E8891A; outline: none; box-shadow: 0 0 0 3px rgba(232,137,26,.18); } .mt-champ select:disabled, .mt-champ input:disabled { background: var(--survol); color: var(--encre2); } @media (min-width: 1001px) { .mt-planche { position: sticky; top: 12px; } } .mt-carte-haut b { min-width: 0; flex: 1; } .mt-carte-haut .pastille { flex: none; } .mt-outils .recherche, .mt-outils input[type=search] { min-width: 0; } .mt-carte-corps { grid-template-columns: minmax(0, 1fr); } @media (max-width: 600px) { .mt-titre-ouvrage { order: -1; flex-basis: 100%; } .mt-actions-haut { margin-left: auto; } .mt-prix { min-width: 0; flex: 1; } .mt-btxt { display: none; } .mt-boutons { margin-left: 0; } .mt-chiffres span:nth-child(3) { display: none; } } .mt-carte-client { display: flex; gap: 5px; align-items: center; font-size: 13px; font-weight: 600; color: var(--encre); min-width: 0; } .mt-carte-client svg { flex: none; color: var(--encre2); } .mt-carte-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .mt-carte-client svg { vertical-align: -2px; margin-right: 2px; } .mt-carte-client.discret { font-weight: 400; color: var(--encre2); } .mt-releve, .mt-releve-champs > *, .mt-astuce span { min-width: 0; } .mt-releve .mt-num { min-width: 0; } .mt-releve-schema { contain: inline-size; } .mt-titre-ouvrage b { min-width: 0; } .mt-titre-ouvrage small, .mt-mini { flex: none; } .mt-atelier { grid-template-columns: minmax(0, 1fr); } .mt-btxt-court { display: none; } .mt-prix b { white-space: nowrap; } @media (max-width: 600px) { .mt-btxt-court { display: inline; } } @media (max-width: 600px) { .mt-prix { flex: 1 0 auto; } .mt-prix b { font-size: 19px; } .mt-prix b span { font-size: 11px; } } /* 1.19.1 — Métallerie, liste des ouvrages sur téléphone : la recherche sur toute la largeur, les étapes dessous, sur toute la largeur (au lieu d'être serrées à côté de la recherche). */ @media (max-width: 760px) { .liste-outils.mt-outils { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .liste-outils.mt-outils .recherche { grid-column: 1 / -1; width: 100%; } .liste-outils.mt-outils .filtres { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; } .liste-outils.mt-outils .filtre { flex: none; white-space: nowrap; } /* Même règle pour les autres listes à pastilles (Historique des envois) : les pastilles sous la recherche. */ .liste-outils > .filtres { grid-column: 1 / -1; min-width: 0; } } /* ── 1.20.0 — Interventions ────────────────────────────────────────────── La fiche (étapes, tâches à cocher, photos, compte rendu), « Ma journée » du technicien (une carte par passage, les gros boutons au pouce), l'équipe à cocher, la couche de l'agenda. */ .bandeau-gris { background: var(--gris-pale); color: var(--gris-texte); border: 1px solid var(--trait); } .segments { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 9px; overflow: hidden; flex: none; background: var(--blanc); } .segments button { border: 0; background: transparent; color: var(--encre2); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer; min-height: 34px; } .segments button + button { border-left: 1px solid var(--trait-fort); } .segments button.actif { background: var(--vert-fonce); color: #fff; } .segments button:disabled { cursor: default; } .segments button:not(.actif):not(:disabled):hover { background: var(--survol); color: var(--encre); } .iv-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 14px; } .iv-texte { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; } .iv-barre { height: 6px; border-radius: 4px; background: var(--trait-leger); overflow: hidden; margin: 0 0 8px; } .iv-barre span { display: block; height: 100%; background: var(--action); transition: width .2s; } .iv-taches { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .iv-tache { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 38%) auto; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); } .iv-tache.fait { background: var(--vert-pale); border-color: var(--vert-trait); } .iv-tache.fait .iv-lib { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); } .iv-case { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; } .iv-case input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--action); } .iv-lib { overflow-wrap: anywhere; line-height: 1.35; } .iv-lib small { display: block; color: var(--encre2); font-size: 11.5px; text-decoration: none; } .iv-com { width: 100%; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); } .iv-com-lu { grid-column: 2 / 4; color: var(--encre2); } .iv-ajout { display: flex; gap: 8px; margin-top: 8px; } .iv-ajout input { flex: 1; min-width: 0; font: inherit; padding: 7px 10px; border: 1px dashed var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); } .iv-cr { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); color: var(--encre); resize: vertical; } .iv-cr-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; min-height: 30px; } .iv-fournitures { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .iv-fournitures li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 1px solid var(--trait-leger); border-radius: 8px; } .iv-fournitures li b { white-space: nowrap; font-variant-numeric: tabular-nums; } .iv-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; } @media (max-width: 600px) { .iv-tache { grid-template-columns: minmax(0, 1fr) auto; } .iv-tache .iv-com { grid-column: 1 / 2; grid-row: 2; } .iv-tache > .btn { grid-row: 1 / 3; grid-column: 2; } .iv-com-lu { grid-column: 1 / -1; } } /* L'équipe d'une intervention : des fiches à cocher. */ .lib-groupe { font-weight: 600; font-size: 13px; } .mfk { display: flex; flex-wrap: wrap; gap: 6px; } .mfk-choix { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1px solid var(--trait-fort); border-radius: 20px; cursor: pointer; font-size: 13.5px; background: var(--blanc); min-height: 36px; } .mfk-choix input { width: 17px; height: 17px; margin: 0; accent-color: var(--action); } .mfk-choix:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 9%, var(--blanc)); font-weight: 600; } .mfk-choix:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; } /* « Ma journée » : pensée pour le téléphone, tenu d'une main sur le chantier. */ .mj { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; } .mj-tete { display: grid; gap: 10px; } .mj-nav { display: flex; align-items: center; gap: 10px; } .mj-nav .btn { min-width: 44px; min-height: 44px; font-size: 18px; } .mj-titre { flex: 1; min-width: 0; text-align: center; display: grid; } .mj-titre h2 { margin: 0; font-size: 22px; } .mj-titre span { font-size: 13px; color: var(--encre2); } .mj-outils { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; } .mj-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .mj-carte { background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--ev); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: var(--ombre); } .mj-carte.mj-terminee { opacity: .78; } .mj-carte.mj-en_cours { border-color: color-mix(in srgb, var(--ambre-texte) 40%, var(--trait)); border-left-color: var(--ev); background: color-mix(in srgb, var(--ambre-fond) 55%, var(--blanc)); } .mj-ouvrir { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: start; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .mj-ouvrir:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; } .mj-heure { display: grid; font-variant-numeric: tabular-nums; } .mj-heure b { font-size: 19px; color: color-mix(in srgb, var(--ev) 65%, var(--encre)); } .mj-heure small { font-size: 12.5px; color: var(--encre2); } .mj-txt { display: grid; gap: 1px; min-width: 0; } .mj-txt b { font-size: 16px; overflow-wrap: anywhere; } .mj-txt span { font-size: 14px; overflow-wrap: anywhere; } .mj-txt small { font-size: 12.5px; color: var(--encre2); } .mj-barre { margin: 0; } .mj-adresse { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--encre2); overflow-wrap: anywhere; } .mj-adresse svg { flex: none; margin-top: 2px; } .mj-actions { display: flex; flex-wrap: wrap; gap: 8px; } .mj-actions .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; } @media (max-width: 480px) { .mj-ouvrir { grid-template-columns: 50px minmax(0, 1fr); } .mj-ouvrir > .pastille { grid-column: 2; justify-self: start; } } /* Le tableau de bord, les réglages. */ .iv-mots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .iv-mot { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; background: var(--blanc); } .iv-mot input { margin: 3px 0 0; accent-color: var(--action); } .iv-mot span { display: grid; gap: 2px; } .iv-mot small { color: var(--encre2); font-size: 12px; } .iv-mot:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 7%, var(--blanc)); } .iv-etapes-aide { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; } /* L'agenda : une intervention se reconnaît à sa mallette, à la couleur de son type. */ .ag-evt.ag-iv { border-left-width: 5px; background: color-mix(in srgb, var(--ev) 22%, var(--blanc)); } .ag-evt.ag-iv .ag-h svg { opacity: .7; } .ag-evt.ag-iv-terminee, .ag-m-evt.ag-iv-terminee { opacity: .7; } .ag-evt.ag-iv-en_cours { outline: 2px solid color-mix(in srgb, var(--ev) 70%, transparent); outline-offset: -2px; } .ag-m-evt.ag-iv svg { vertical-align: -1px; opacity: .7; } .ag-l-iv { border-left-width: 5px; } /* ============================================================ OpsInterventionPro 1.0.0 — l'édition « intervention » (interventions_pro.js, demande.php, equipement.php). Dans l'édition « facture », aucune de ces classes n'est employée. ============================================================ */ /* Sa couleur de marque : le violet (#5B3CC4 : 7,3:1 avec le texte blanc ; survol #47309E ; fond pâle #EFEAFE ; trait #D6CCF5). */ :root.ed-intervention { --vert: #5B3CC4; --action: #5B3CC4; --action-fonce: #47309E; --vert-pale: #EFEAFE; --vert-trait: #D6CCF5; } /* Thème sombre : les boutons gardent le violet foncé (texte blanc, 7,3:1) ; les liens, icônes et repères prennent le violet vif (#9B7BF7, 5,1:1 sur le fond #19202A) ; les fonds pâles et les traits sont teintés de sombre (sinon ils resteraient clairs). */ :root.ed-intervention[data-theme="dark"] { --lien: #B9A5FA; --accent: #9B7BF7; --vert-pale: #2A2347; --vert-trait: #4A3D80; } :root.ed-intervention[data-theme="dark"] .filtre.actif { color: #1E1240; } @media (prefers-color-scheme: dark) { :root.ed-intervention.theme-auto { --lien: #B9A5FA; --accent: #9B7BF7; --vert-pale: #2A2347; --vert-trait: #4A3D80; } :root.ed-intervention.theme-auto .filtre.actif { color: #1E1240; } } /* Le groupe « Interventions » du menu porte la couleur de l'édition (interventions_pro.js : COULEURS_GROUPES). */ .sb-groupe.g-marque { --g0: var(--vert); } /* L'en-tête du menu (ardoise) : la clé de l'édition en violet vif. */ :root.ed-intervention .sb-tete .sb-logo:not(.logo-img) { background: rgba(155, 123, 247, .18); color: #9B7BF7; } /* Le tableau de bord des interventions. */ .tdb-iv .tdb-grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); } .tdb-pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ev); margin-right: 4px; vertical-align: 0; } .iv-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .iv-barres li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; } .iv-barres-lib { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iv-barres-lib i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ev); } .iv-barres-piste { height: 10px; border-radius: 5px; background: var(--trait-leger); overflow: hidden; } .iv-barres-piste span { display: block; height: 100%; border-radius: 5px; background: var(--ev); } .iv-barres b { font-variant-numeric: tabular-nums; white-space: nowrap; } .iv-ca td:first-child { white-space: nowrap; } /* Le planning multi-techniciens. */ .pt-entete { align-items: center; } .pt-chev-liste { margin-top: 2px; } .pt-bandeau { background: var(--blanc); border: 1px dashed var(--trait-fort); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; } .pt-bandeau-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; } .pt-bandeau-tete b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } .pt-afaires { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; min-height: 58px; align-items: stretch; } .pt-afaires.pt-cible { background: var(--vert-pale); border-radius: 10px; } /* Sur grand écran, tout « À planifier » se voit : les cartes passent à la ligne (deux rangs visibles, puis défilement). */ @media (min-width: 761px) { .pt-afaires { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: 142px; } } .pt-rien { align-self: center; } .pt-afaire { flex: 0 0 210px; display: grid; gap: 1px; text-align: left; font: inherit; color: var(--encre); cursor: pointer; padding: 6px 9px 6px 10px; border: 1px solid var(--trait); border-left: 4px solid var(--ev, #64748B); border-radius: 9px; background: color-mix(in srgb, var(--ev, #64748B) 10%, var(--blanc)); min-width: 0; } .pt-afaire b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-afaire small { font-size: 12px; color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-afaire span { font-size: 11.5px; color: var(--encre3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-afaire.pt-dem { --ev: #7C3AED; border-style: dashed; border-left-style: solid; } .pt-urgent { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rouge) 70%, transparent); } .pt-mobile { cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .pt-zone { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow-x: auto; box-shadow: var(--ombre); } .pt { min-width: 100%; } .pt-ligne { display: grid; grid-template-columns: 180px var(--pt-l, 1fr); border-bottom: 1px solid var(--trait-leger); } .pt-ligne:last-child { border-bottom: 0; } .pt-nom { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--blanc); border-right: 1px solid var(--trait); min-width: 0; } .pt-nom i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ev); } .pt-nom span { display: grid; min-width: 0; } .pt-nom b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-nom small { font-size: 12px; color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-tete { position: sticky; top: 0; z-index: 5; background: var(--blanc); } .pt-piste { position: relative; min-height: 58px; background-image: repeating-linear-gradient(90deg, var(--trait-leger) 0 1px, transparent 1px var(--pt-h, 60px)); } .pt-piste.pt-cible { background-color: var(--vert-pale); } .pt-heures { height: 30px; min-height: 0; background-image: none; } .pt-heures span { position: absolute; top: 7px; font-size: 11.5px; color: var(--encre3); padding-left: 4px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--trait); height: 23px; } .pt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rouge); z-index: 2; pointer-events: none; } .pt-evt { position: absolute; height: 50px; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; text-align: left; padding: 3px 6px 3px 8px; line-height: 1.2; border: 0; border-left: 4px solid var(--ev); border-radius: 7px; font: inherit; color: var(--encre); cursor: pointer; background: color-mix(in srgb, var(--ev) 17%, var(--blanc)); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .pt-evt:hover, .pt-evt:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .16); z-index: 3; } .pt-evt .pt-h { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: color-mix(in srgb, var(--ev) 70%, var(--encre)); display: inline-flex; align-items: center; gap: 3px; } .pt-evt b { font-size: 12.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-evt small { font-size: 11.5px; color: var(--encre2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-evt.pt-terminee, .pt-puce.pt-terminee { opacity: .7; } .pt-evt.pt-en_cours { background: color-mix(in srgb, var(--ambre-fond) 70%, var(--blanc)); } .pt-chev { outline: 2px solid var(--rouge); outline-offset: -2px; } .pt-glisse { opacity: .35; } .pt-fantome { position: fixed; z-index: 90; pointer-events: none; opacity: .92; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transform: rotate(-1.5deg); } .pt-fantome.pt-evt { height: 50px; } .pt-semaine .pt-ligne { grid-template-columns: 180px repeat(7, minmax(118px, 1fr)); } .pt-jtete { display: grid; justify-items: center; padding: 6px 0; border-left: 1px solid var(--trait-leger); font-size: 12px; } .pt-jtete small { color: var(--encre2); text-transform: capitalize; } .pt-jtete b { font-size: 16px; } .pt-jtete.pt-auj b { color: var(--action); } .pt-case { border-left: 1px solid var(--trait-leger); padding: 4px; display: flex; flex-direction: column; gap: 4px; min-height: 58px; min-width: 0; } .pt-case.pt-we, .pt-jtete.pt-we { background: var(--survol); } .pt-case.pt-auj { background: color-mix(in srgb, var(--action) 6%, transparent); } .pt-case.pt-cible { background: var(--vert-pale); outline: 2px dashed var(--vert); outline-offset: -3px; } .pt-puce { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.25; color: var(--encre); padding: 4px 6px 4px 7px; border: 0; border-left: 3px solid var(--ev); border-radius: 6px; background: color-mix(in srgb, var(--ev) 15%, var(--blanc)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .pt-puce b { font-variant-numeric: tabular-nums; } .pt-l-chev { --ev: var(--rouge); background: var(--blanc); outline: 2px solid var(--rouge); outline-offset: -2px; border-left-width: 0; } .pt-l-urgent { --ev: var(--rouge); box-shadow: inset 0 0 0 2px var(--rouge); background: var(--blanc); border-left-width: 0; } /* Téléphone : une liste par technicien. */ .pt-tel { display: grid; gap: 14px; } .pt-tel-tech h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; } .pt-tel-tech h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--ev); } .pt-tel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pt-tel-carte { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--ev); border-radius: 12px; padding: 10px 12px; cursor: pointer; } .pt-tel-h { display: grid; font-variant-numeric: tabular-nums; } .pt-tel-h b { font-size: 17px; } .pt-tel-h small { font-size: 12px; color: var(--encre2); } .pt-tel-txt { display: grid; min-width: 0; } .pt-tel-txt b, .pt-tel-txt span { overflow-wrap: anywhere; } .pt-tel-txt span { font-size: 13.5px; color: var(--encre2); } @media (max-width: 760px) { .pt-entete .pl-nav { width: 100%; } .pt-entete .ag-boutons { width: 100%; } .pt-entete .ag-boutons .btn-p { margin-left: auto; } .pt-afaire { flex-basis: 78%; } .pt-bandeau-tete .discret { flex: 1 1 100%; } } /* La fiche de l'intervention : temps pointé, équipements. */ .iv-pt { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; } .iv-pt li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 10px; border-radius: 8px; background: var(--survol); font-variant-numeric: tabular-nums; } .iv-pt small { color: var(--encre2); } .iv-pt-total { font-size: 18px; font-variant-numeric: tabular-nums; } .iv-eqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .iv-eq { border: 1px solid var(--trait); border-radius: 12px; padding: 10px; background: var(--blanc); display: grid; gap: 6px; min-width: 0; } .iv-eq-tete { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .iv-eq-tete img, .iv-eq-ico { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); } .iv-eq-tete > span:nth-child(2) { display: grid; min-width: 0; } .iv-eq-tete b { overflow-wrap: anywhere; } .iv-eq-tete small { font-size: 12.5px; color: var(--encre2); overflow-wrap: anywhere; } .iv-eq-notes { margin: 0; font-size: 13px; color: var(--encre2); background: var(--ambre-fond); border-radius: 8px; padding: 6px 9px; } .iv-eq-vide { margin: 0; font-size: 13px; } .iv-eq-hist summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--lien); padding: 2px 0; } .iv-eq-hist ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; } .iv-eq-hist button { width: 100%; display: grid; gap: 1px; text-align: left; font: inherit; font-size: 13.5px; color: var(--encre); background: var(--survol); border: 0; border-radius: 8px; padding: 6px 9px; cursor: pointer; } .iv-eq-hist small { color: var(--encre2); font-size: 12px; } .iv-eq-hist span { color: var(--encre2); font-size: 12.5px; white-space: pre-line; } .iv-eq-choix { display: grid; gap: 6px; } @media (max-width: 480px) { .iv-eq-tete { grid-template-columns: 42px minmax(0, 1fr); } .iv-eq-tete > .pastille { grid-column: 2; justify-self: start; } } /* « Ma journée » : équipements et temps pointé sur la carte. */ .mj-eq svg, .mj-temps svg { color: var(--accent); } .mj-temps { color: var(--ambre-texte); font-weight: 600; } /* La fiche d'un équipement. */ .eq-haut { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 12px; } .eq-photo { width: 132px; height: 132px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); border: 1px solid var(--trait); } .eq-resume { margin: 0; } .eq-resume > div { flex-basis: 150px; } .eq-resume b { font-size: 16px; } .eq-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .eq-hist button { width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: start; text-align: left; font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--ev); border-radius: 10px; padding: 8px 10px; cursor: pointer; } .eq-hist button:hover { background: var(--survol); } .eq-hist-date { display: grid; font-variant-numeric: tabular-nums; } .eq-hist-date small { color: var(--encre3); font-size: 12px; } .eq-hist-txt { display: grid; gap: 2px; min-width: 0; } .eq-hist-txt b { overflow-wrap: anywhere; } .eq-hist-txt small { color: var(--encre2); font-size: 12.5px; } .eq-hist-cr { font-size: 13px; color: var(--encre2); white-space: pre-line; overflow-wrap: anywhere; } .dem-photo img { max-height: 420px; } @media (max-width: 560px) { .eq-haut { grid-template-columns: 1fr; } .eq-photo { width: 100%; height: 180px; } span.eq-photo { display: none; } .eq-hist button { grid-template-columns: minmax(0, 1fr) auto; } .eq-hist-date { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; } } /* Le stock des véhicules. */ .sv-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 14px; margin-bottom: 18px; } .sv-carte { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--ev); border-radius: 14px; padding: 12px 14px; min-width: 0; } .sv-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sv-tete > div { flex: 1; display: grid; min-width: 0; } .sv-tete small { font-size: 12.5px; color: var(--encre2); } .sv-pt { width: 12px; height: 12px; border-radius: 50%; background: var(--ev); flex: none; } .sv-table td.actions { width: 1%; white-space: nowrap; } /* Paramètres : le lien et le code QR du formulaire de demande. */ .iv-lien-dem { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; } .iv-lien-qr { width: 132px; padding: 8px; background: #fff; border: 1px solid var(--trait); border-radius: 10px; } .iv-lien-qr svg { display: block; width: 100%; height: auto; } .iv-lien-txt { display: grid; gap: 8px; min-width: 0; } .iv-lien-txt .rp-code { overflow-wrap: anywhere; word-break: break-all; } @media (max-width: 560px) { .iv-lien-dem { grid-template-columns: 1fr; } } /* Les pages publiques : la demande d'intervention et la page d'un équipement (téléphone d'abord). */ body.pub { background: var(--papier) radial-gradient(circle at 12% 0%, var(--vert-pale) 0, transparent 42%); min-height: 100vh; } .pub-page { max-width: 640px; margin: 0 auto; padding: 16px 16px 28px; display: grid; gap: 14px; } .pub-tete { display: flex; align-items: center; gap: 12px; } .pub-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--vert-pale); color: var(--accent); object-fit: contain; } .pub-noms { flex: 1; display: grid; min-width: 0; } .pub-noms b { font-size: 17px; color: var(--lien); overflow-wrap: anywhere; } .pub-noms span { font-size: 13px; color: var(--encre2); } .pub-appel { flex: none; } .pub-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 20px 18px; box-shadow: var(--ombre); display: grid; gap: 12px; min-width: 0; } .pub-carte h1 { margin: 0; font-size: 23px; letter-spacing: -.01em; overflow-wrap: anywhere; } .pub-intro { margin: -4px 0 0; color: var(--encre2); } .pub-erreur { display: flex; gap: 8px; align-items: flex-start; background: var(--rouge-fond); color: var(--rouge-texte); border: 1px solid var(--rouge-trait); border-radius: 10px; padding: 10px 12px; font-size: 14px; } .pub-eq { display: flex; gap: 10px; align-items: flex-start; background: var(--vert-pale); border-radius: 12px; padding: 10px 12px; color: var(--encre); } .pub-eq svg { color: var(--accent); flex: none; margin-top: 2px; } .pub-eq div { display: grid; min-width: 0; } .pub-eq span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); font-weight: 700; } .pub-eq small { color: var(--encre2); overflow-wrap: anywhere; } .pub-form { display: grid; gap: 14px; } .pub-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; } .pub-form legend { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); margin-bottom: 4px; padding: 0; } .pub-form .champ { display: grid; gap: 5px; margin: 0; min-width: 0; } .pub-form label, .pub-form .lib-groupe { font-weight: 600; font-size: 14px; } .pub-form input[type=text], .pub-form input[type=tel], .pub-form input[type=email], .pub-form textarea { font: inherit; font-size: 16px; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--blanc); color: var(--encre); } .pub-form input:focus, .pub-form textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); } .pub-form input[type=file] { font: inherit; font-size: 14px; max-width: 100%; } .pub-form .champ-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; } .pub-urgence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pub-urgence label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--trait-fort); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-weight: 400; } .pub-urgence label:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); } .pub-urgence .pub-urgent:has(input:checked) { border-color: var(--rouge); background: var(--rouge-fond); } .pub-urgence span { display: grid; flex: 1 1 auto; min-width: 0; text-align: left; } .pub-urgence small { color: var(--encre2); font-size: 12.5px; } .pub-urgence input, .champ .pub-urgence input[type=radio] { margin: 2px 0 0; accent-color: var(--vert); width: 20px; height: 20px; min-height: 0; min-width: 0; max-width: 20px; padding: 0; flex: none; box-shadow: none; border: 0; } .pub-miel { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .pub-envoyer { min-height: 52px; font-size: 16px; } .pub-note, .pub-pied { margin: 0; font-size: 12.5px; color: var(--encre2); text-align: center; } .pub-ok { display: grid; gap: 10px; justify-items: start; } .pub-ok > svg { color: var(--vert); } .pub-ok p { margin: 0; } .pub-recap { width: 100%; background: var(--survol); border-radius: 12px; padding: 10px 12px; } .pub-recap span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); } .pub-recap p { margin: 4px 0 0; overflow-wrap: anywhere; } .pub-eq-tete { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; } .pub-eq-photo, .pub-eq-ico { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); } .pub-sur { font: 700 12.5px ui-monospace, Menlo, monospace; color: var(--encre2); } .pub-garantie { margin: 4px 0 0; font-size: 14px; } .pub-demander { min-height: 52px; font-size: 16px; } .pub-bloc { border-top: 1px solid var(--trait-leger); padding-top: 12px; } .pub-bloc h2 { margin: 0 0 8px; font-size: 15px; } .pub-bloc p { margin: 0 0 6px; } .pub-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 14px; } .pub-dl div { display: grid; min-width: 0; } .pub-dl dt { font-size: 12px; color: var(--encre2); } .pub-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .pub-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pub-hist li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; } .pub-hist-date { font-weight: 700; font-variant-numeric: tabular-nums; } .pub-hist div { display: grid; gap: 2px; min-width: 0; } .pub-hist small { color: var(--encre2); } .pub-hist p { margin: 2px 0 0; font-size: 14px; color: var(--encre2); white-space: pre-line; overflow-wrap: anywhere; } @media (max-width: 420px) { .pub-urgence { grid-template-columns: 1fr; } .pub-eq-tete { grid-template-columns: 72px minmax(0, 1fr); } .pub-eq-photo, .pub-eq-ico { width: 72px; height: 72px; } .pub-hist li { grid-template-columns: 1fr; gap: 2px; } .pub-appel span { display: none; } } .iv-cell-texte { display: block; min-width: 220px; max-width: 360px; } .iv-cell-texte small { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; } .iv-tel { white-space: nowrap; } .sv-table td:first-child { min-width: 180px; } /* Les colonnes chiffrées gardent la même largeur d'un véhicule à l'autre. */ @media (min-width: 761px) { .sv-table th.num { width: 150px; } } .sv-table th.num, .sv-depot th.num { text-align: right; } .mj-ouvrir { grid-template-columns: minmax(58px, max-content) minmax(0, 1fr) auto; } @media (max-width: 480px) { .mj-ouvrir { grid-template-columns: minmax(50px, max-content) minmax(0, 1fr); } } @media (max-width: 760px) { :root.ed-intervention .carte-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } .iv-cell-objet { display: block; min-width: 200px; } /* ============================================================ OpsInterventionPro 1.1.0 — la fiche d'intervention fluides frigorigènes (interventions_fluides.js). Dans l'édition « facture », aucune de ces classes n'est employée. ============================================================ */ .ff-calc-eq { font-size: 13px; color: var(--lien); font-weight: 600; display: flex; gap: 6px; align-items: center; } .ff-calc-eq:empty { display: none; } .ff-fluide { font-weight: 700; } /* Dans la fiche d'une intervention : un équipement à fluide, une fiche. */ .ff-eqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ff-eq { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; background: var(--blanc); display: grid; gap: 6px; } .ff-eq-tete { display: flex; align-items: center; gap: 10px; } .ff-eq-tete > span:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; } .ff-eq-tete small { color: var(--encre2); font-size: 12.5px; } .ff-eq-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--vert-pale); color: var(--accent); } .ff-eq-calc { margin: 0; font-size: 13px; color: var(--encre2); } .ff-eq-actions { display: flex; flex-wrap: wrap; gap: 8px; } .ff-btn { min-height: 44px; } /* La fiche à remplir : plein écran au téléphone, gros champs (16 px : pas de zoom à l'iPhone), cases à toucher. */ .md.md-fluide { width: min(760px, 100%); } @media (max-width: 760px) { .md-voile:has(.md-fluide) { padding: 0; place-items: stretch; } .md.md-fluide { width: 100%; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; } .md.md-fluide .md-pied { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .md.md-fluide .md-pied .btn { flex: 1 1 auto; min-height: 48px; } } .ff-form .champ input, .ff-form .champ select, .ff-form .champ textarea { font-size: 16px; min-height: 48px; } .ff-form .champ textarea { min-height: 96px; } .ff-tete { display: grid; gap: 2px; padding: 10px 12px; margin: 0 0 12px; border-radius: 12px; background: var(--vert-pale); border: 1px solid var(--vert-trait); } .ff-tete b { font-size: 16px; } .ff-tete span { font-size: 14px; font-weight: 600; } .ff-tete small { color: var(--encre2); font-size: 13px; } .ff-version { color: var(--lien) !important; font-weight: 700; } .ff-rub { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px 2px; margin: 0 0 12px; background: var(--blanc); } .ff-rub h4, .ff-rub summary { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; font-weight: 700; } .ff-rub h4 i, .ff-rub summary i, .ff-calcul i { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--action); color: #FFFFFF; font-style: normal; font-size: 12px; font-weight: 800; } .ff-rub summary { cursor: pointer; list-style: none; padding-bottom: 8px; margin: 0; } .ff-rub summary::-webkit-details-marker { display: none; } .ff-rub summary small { margin-left: auto; color: var(--encre2); font-weight: 500; font-size: 13px; text-align: right; } .ff-rub summary::after { content: '▾'; color: var(--encre3); font-size: 13px; } .ff-rub[open] summary::after { content: '▴'; } .ff-lu { background: var(--survol); } .ff-dl { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 4px 10px; margin: 0 0 10px; font-size: 14px; } .ff-dl dt { color: var(--encre2); } .ff-dl dd { margin: 0; font-weight: 600; } .ff-choix-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .ff-choix { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1.5px solid var(--trait-fort); border-radius: 10px; cursor: pointer; font-size: 14.5px; font-weight: 600; background: var(--blanc); line-height: 1.25; } .ff-choix input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--action); } .ff-choix.coche { border-color: var(--action); background: var(--vert-pale); color: var(--lien); } .ff-oui-non { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .ff-oui-non .ff-choix { justify-content: center; font-size: 16px; } .ff-facultatif { opacity: .62; } .ff-facultatif h4::after { content: 'facultatif pour cette nature'; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--encre2); } .ff-calcul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; } .ff-calcul > div { display: grid; gap: 3px; justify-items: start; padding: 8px 10px; border-radius: 10px; background: var(--survol); border: 1px solid var(--trait); } .ff-calcul span { font-size: 12px; color: var(--encre2); } .ff-calcul b { font-size: 14px; } .ff-calcul p { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--encre2); } .ff-fuites { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; } .ff-fuite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 34%); gap: 8px; } .ff-fuites input, .ff-fuites select { width: 100%; font: inherit; font-size: 16px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); } .ff-sous { margin: 6px 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--encre2); } .ff-qte { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--trait-leger); } .ff-qte > span:first-child { display: grid; font-size: 14.5px; font-weight: 600; } .ff-qte > span:first-child b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 6px; background: var(--gris-pale); color: var(--encre); font-size: 13px; vertical-align: 1px; } .ff-qte small { font-weight: 400; font-size: 12px; color: var(--encre2); margin-left: 32px; } .ff-qte-saisie { display: inline-flex; align-items: center; gap: 6px; flex: none; } .ff-qte-saisie input { width: 110px; font: inherit; font-size: 18px; font-weight: 700; text-align: right; min-height: 48px; padding: 6px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); font-variant-numeric: tabular-nums; } .ff-qte-saisie input:focus, .ff-fuites input:focus, .ff-fuites select:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .ff-qte-saisie i { font-style: normal; color: var(--encre2); font-size: 14px; } .ff-total { margin: 8px 0 12px; text-align: right; font-size: 15px; } .ff-total b { font-size: 17px; color: var(--lien); font-variant-numeric: tabular-nums; } .ff-alerte { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--rouge-fond); color: var(--rouge-texte); border: 1px solid var(--rouge-trait); font-size: 13.5px; font-weight: 600; } @media (max-width: 600px) { .ff-choix-grille { grid-template-columns: 1fr; } .ff-calcul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ff-fuite { grid-template-columns: 1fr; } .ff-dl { grid-template-columns: 1fr; gap: 0 0; } .ff-dl dd { margin-bottom: 6px; } } /* L'écran « Fluides » : registre, contrôles à faire, bilan annuel. */ .ff-ecran-tete { align-items: flex-start; } .ff-onglets button { min-height: 38px; } .ff-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; } .ff-filtres .filtre-plus input[type=date] { border: 0; background: transparent; font: inherit; color: var(--encre); min-height: 38px; padding: 0 6px; } .ff-somme { margin: 0 0 10px; } .ff-table td { vertical-align: top; } .ff-table tr.cliquable { cursor: pointer; } .ff-table tr.cliquable:hover td { background: var(--survol); } .ff-bilan tfoot td { border-top: 2px solid var(--trait-fort); background: var(--survol); } /* ── OpsInterventionPro 1.2.0 — le mode hors connexion du technicien (hors_ligne.js) ────────── La barre d'état en bas de l'écran (au-dessus de la fiche, sous les fenêtres), le petit marqueur « en attente » des éléments pas encore envoyés, l'état « Prêt hors connexion » de Ma journée, et la liste « À revoir ». Rien de tout cela n'apparaît dans l'édition « facture ». */ .hl-bandeau { position: fixed; left: var(--sb); right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 48px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 14px; line-height: 1.35; background: var(--ambre-fond); color: var(--ambre-texte); border-top: 1px solid var(--ambre-trait); box-shadow: 0 -6px 18px rgba(16, 24, 40, .10); } .hl-bandeau > span { flex: 1 1 180px; min-width: 0; } .hl-bandeau svg { flex: 0 0 auto; } .hl-bandeau.hl-hors { background: #2C2F3E; color: #FFFFFF; border-top-color: #2C2F3E; } .hl-bandeau.hl-envoi { background: var(--bleu-pale); color: var(--bleu-texte); border-top-color: var(--vert-trait); } .hl-bandeau.hl-ok { background: var(--vert-pale); color: var(--vert-fonce); border-top-color: var(--vert-trait); } .hl-bandeau.hl-rouge { background: var(--rouge-fond); color: var(--rouge-texte); border-top-color: var(--rouge-trait); } .hl-bandeau .hl-btn { background: #FFFFFF; color: #1F2633; border: 1px solid rgba(0, 0, 0, .18); font-weight: 600; min-height: 36px; } .hl-bandeau .hl-btn:hover { background: #F3F4F7; } .hl-bandeau .hl-btn-revoir { color: #9B1C12; border-color: #FECDCA; } html.hl-barre .contenu, html.hl-barre .fp-corps { padding-bottom: 84px; } html.hl-barre .toasts { bottom: 72px; } @media (max-width: 760px) { .hl-bandeau { left: 0; padding-left: 12px; padding-right: 12px; font-size: 13.5px; } html.hl-barre .toasts { left: 12px; right: 12px; bottom: 76px; } } .hl-marque { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: middle; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--ambre-pale); color: var(--ambre-texte); border: 1px dashed var(--ambre-trait); } small .hl-marque, .iv-lib .hl-marque { font-size: 11px; } .iv-tache.hl-en-attente { box-shadow: inset 3px 0 0 var(--ambre-trait); } .ph-vignette { position: relative; } .ph-vignette.hl-en-attente { outline: 2px dashed #D9A445; outline-offset: -2px; } .hl-pastille-photo { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FEF6E7; color: #7A3A06; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .mj-carte.hl-en-attente { box-shadow: 0 0 0 2px var(--ambre-trait); } .mj-hl { color: var(--ambre-texte); font-weight: 600; } .hl-pret { text-align: center; font-size: 13px; line-height: 1.45; color: var(--encre2); } .hl-pret svg { color: var(--accent); vertical-align: -3px; margin-right: 2px; } .hl-pret .lien-txt { font-size: 13px; } .hl-pret b { color: var(--encre); } .hl-indispo p { max-width: 30rem; margin: 0; } .hl-revoir { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; } .hl-revoir > li { border: 1px solid var(--trait); border-left: 4px solid var(--rouge-trait); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; } .hl-revoir-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; } .hl-revoir-tete small { color: var(--encre3); } .hl-motif { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--rouge-texte); font-size: 13.5px; } .hl-motif svg { flex: 0 0 auto; margin-top: 2px; } .hl-revoir-img { max-width: 100%; max-height: 220px; border-radius: 8px; justify-self: start; } .hl-revoir-sig { max-height: 90px; max-width: 100%; background: #FFFFFF; border: 1px solid var(--trait); border-radius: 8px; justify-self: start; } .hl-revoir-texte { white-space: pre-wrap; font: inherit; font-size: 13.5px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--gris-pale); color: var(--encre); } .hl-revoir-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* ============================================================ 1.21.0 — Le téléphone : barre du bas selon le métier, menu replié, écrans resserrés ============================================================ */ /* Le titre d'un groupe repliable : un bouton (sur ordinateur, il ne fait rien de visible). */ .sb-groupe-bascule { width: 100%; background: none; border: 0; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; cursor: default; } .sb-groupe-bascule .sb-groupe-nb, .sb-groupe-bascule svg { display: none; } /* La barre du bas : absente sur ordinateur. */ .bb { display: none; } @media (max-width: 1000px) { .sb-groupe-bascule { cursor: pointer; padding: 8px 12px 6px; border-radius: 8px; } .sb-groupe-bascule:hover { background: var(--g-pale); } .sb-groupe-bascule .sb-groupe-nb { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--g-pale); color: var(--g); font-size: 11px; letter-spacing: 0; margin-left: 2px; } .sb-groupe-bascule svg { display: block; margin-left: auto; transition: transform .15s ease; } .sb-groupe.replie .sb-groupe-bascule svg { transform: rotate(-90deg); } .sb-groupe.replie .sb-lien { display: none; } .sb { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } /* 1.29.5 — Comme OpsEventPro : une barre arrondie, une bulle de couleur par bouton (bleu, framboise, ambre, violet ; Menu vert) ; le bouton de l'écran ouvert se soulève en couleur pleine, avec un petit rebond. */ body.avec-bb .bb { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--barre); border-radius: 20px 20px 0 0; padding: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px -10px rgba(28, 38, 50, .28); } .bb-lien { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 4px 2px; border: 0; background: none; color: var(--encre2); font: inherit; font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; } .bb-lib { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .25s; } .bb-lib.bb-long { font-size: 9.5px; letter-spacing: -.03em; } .bb-lien:has(.bb-long) { padding-inline: 0; } .bb-bulle { display: grid; place-items: center; width: 44px; height: 32px; border-radius: 12px; background: var(--bbf); color: var(--bbm); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s, box-shadow .2s; } .bb-bulle svg { width: 21px; height: 21px; } .bb-lien.actif .bb-bulle { background: var(--bbm); color: #FFFFFF; transform: translateY(-7px) scale(1.08) rotate(-4deg); box-shadow: 0 8px 16px -6px var(--bbm); } .bb-lien.actif .bb-lib { color: var(--bbt); font-weight: 800; transform: translateY(-4px); } .bb-lien:active .bb-bulle { transform: scale(.88); } .bb-lien:focus-visible { outline: 2px solid var(--bbm); outline-offset: -2px; border-radius: 12px; } @media (max-width: 360px) { .bb-lien { font-size: 10.5px; padding-inline: 0; } .bb-bulle { width: 40px; } } /* La barre d'état « hors connexion » (OpsInterventionPro) se pose juste au-dessus de la barre. */ body.avec-bb .hl-bandeau { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); padding-bottom: 8px; border-radius: 14px 14px 0 0; } /* La barre remplace le bouton ☰ du haut ; la page s'arrête au-dessus d'elle. */ body.avec-bb .hamburger { display: none; } body.avec-bb .contenu { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } body.avec-bb .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; } body.avec-bb .toast { max-width: none; } } @media (max-width: 1000px) and (max-height: 430px) { body.avec-bb .bb { display: none; } body.avec-bb .hamburger { display: block; } } @media (max-width: 760px) { /* Le bandeau du haut : place au titre (l'icône du titre et le bouton « Recharger » rapetissent). */ .topbar { gap: 8px; } .tb-titre #titre-ico { display: none !important; } .tb-titre { font-size: 18px; } .tb-droite { gap: 6px; } .tb-droite .tb-rond { width: 36px; height: 36px; } .tb-droite .tb-ava { width: 36px; height: 36px; } .tb-droite #btn-ajouter { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; } /* Le tableau de bord : les actions en pavés, trois par ligne. */ .tdb-entete h2 { font-size: 21px; } .tdb-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tdb-actions .btn { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 72px; padding: 8px 6px; border-radius: 14px; font-size: 12.5px; line-height: 1.2; text-align: center; white-space: normal; } .tdb-actions .btn svg { width: 22px; height: 22px; } .tdb-tuile { padding: 10px 12px; column-gap: 8px; } .tdb-tuile-ico { width: 34px; height: 34px; } .tdb-tuile b { font-size: 22px; } .tdb-tuile span:last-child { font-size: 12.5px; line-height: 1.25; } /* Les listes en cartes : le titre tient sur deux lignes au lieu d'être coupé. */ .carte-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } .carte { padding: 11px 12px; } /* Les outils d'une liste (import, export…) passent derrière « Filtres et tri ». */ .liste-outils .lo-actions { grid-column: 1 / -1; } .liste-outils:not(.ouvert) .lo-actions { display: none; } /* La fiche : les informations en liste resserrée, les champs vides cachés (« Modifier » les montre). */ .fp-champs { gap: 0; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); overflow: hidden; } .fp-champ, .fiche .fp-champ { border: 0; border-radius: 0; border-bottom: 1px solid var(--trait-leger); padding: 8px 12px; display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; align-items: baseline; } .fp-champ:last-child { border-bottom: 0; } .fp-champ.large { grid-template-columns: 1fr; gap: 2px; } .fp-champ .fp-lib { font-size: 11.5px; } .fp-champ .fp-val { overflow-wrap: anywhere; } .fp-champ.vide { display: none; } } /* Sur ordinateur, les outils d'une liste restent au-dessus de la recherche. */ .liste-outils .lo-actions { order: -1; flex-basis: 100%; } .liste-outils .lo-actions .bloc-outils { margin: 0; } /* La fiche d'un client : appeler, WhatsApp, e-mail d'un geste. */ .fp-contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .fp-contact a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font-weight: 700; font-size: 14px; text-decoration: none; min-height: 40px; } .fp-contact a svg { color: var(--accent); } .fp-contact a.fpc-wa svg { color: #128C4A; } .fp-contact a:hover { border-color: var(--accent); } @media (max-width: 760px) { .fp-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .fp-contact a { justify-content: center; padding: 8px 6px; } } /* Le tableau de bord du module Musique : la journée d'abord. */ .tdb-jour { margin-bottom: 14px; } .tdb-jour .tdb-jour-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tdb-jour-liste button { width: 100%; display: grid; grid-template-columns: 52px 4px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; background: var(--papier); border: 1px solid var(--trait-leger); border-radius: 12px; padding: 9px 10px; cursor: pointer; color: var(--encre); font: inherit; } .tdb-jour-liste button:hover { border-color: var(--ev); } .tdb-jour-liste .tj-heure { white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; } .tdb-jour-liste .tj-heure small { display: block; font-weight: 600; color: var(--encre2); font-size: 11.5px; } .tdb-jour-liste .tj-trait { align-self: stretch; border-radius: 2px; background: var(--ev); } .tdb-jour-liste .tj-qui { display: grid; min-width: 0; } .tdb-jour-liste .tj-qui b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tdb-jour-liste .tj-qui span { color: var(--encre2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tdb-jour-liste .tj-type { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: var(--ev); background: color-mix(in srgb, var(--ev) 13%, transparent); white-space: nowrap; } .tdb-jour-liste li.passe button { opacity: .62; } .tdb-jour-liste li.fait .tj-type { color: #15803D; background: color-mix(in srgb, #15803D 13%, transparent); } .tdb-jour-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* ── 1.21.0 — Les en-têtes de section des formulaires : une pastille d'icône, le titre, une ligne d'aide ── */ .form-section { --fs: var(--page, var(--vert)); border: 1px solid color-mix(in srgb, var(--fs) 22%, var(--trait)); border-radius: 14px; overflow: hidden; } .form-section.fs-c1 { --fs: #0F766E; } .form-section.fs-c2 { --fs: #BE185D; } .form-section.fs-c3 { --fs: #6941C6; } .form-section.fs-c4 { --fs: #B45309; } .form-section.fs-c5 { --fs: #1D5FA8; } .form-section.fs-c0 { --fs: #15803D; } :root[data-theme="dark"] .form-section { --fs-txt: color-mix(in srgb, var(--fs) 55%, #FFFFFF); } @media (prefers-color-scheme: dark) { :root.theme-auto .form-section { --fs-txt: color-mix(in srgb, var(--fs) 55%, #FFFFFF); } } .form-section > summary { gap: 12px; padding: 10px 12px; color: var(--encre); font-size: 15px; background: linear-gradient(100deg, color-mix(in srgb, var(--fs) 13%, var(--blanc)) 0%, var(--blanc) 75%); } .form-section > summary::before { content: none; } .form-section > summary:hover { background: linear-gradient(100deg, color-mix(in srgb, var(--fs) 20%, var(--blanc)) 0%, var(--blanc) 80%); } .fs-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; color: #fff; background: var(--fs); box-shadow: 0 3px 8px color-mix(in srgb, var(--fs) 35%, transparent); transform: rotate(-4deg); transition: transform .2s ease; } .form-section[open] .fs-ico { transform: rotate(0); } .fs-txt { display: grid; min-width: 0; line-height: 1.2; } .fs-txt b { font-weight: 800; color: var(--fs-txt, var(--fs)); } .fs-txt small { font-weight: 500; font-size: 12.5px; color: var(--encre2); } .fs-chev { margin-left: auto; color: var(--fs-txt, var(--fs)); display: grid; transition: transform .2s ease; transform: rotate(-90deg); } .form-section[open] .fs-chev { transform: none; } .form-section-corps { padding: 10px 14px 4px; } /* ── Le bouton gradué 0-10 : une rangée de pastilles, qui chauffe vers 10 ── */ .crans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 4px; max-width: 470px; } .cran { --c: color-mix(in srgb, #F59E0B calc(var(--n) * 10%), #10B981); min-width: 0; height: 34px; padding: 0; border-radius: 9px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; font-variant-numeric: tabular-nums; transition: transform .12s ease, background .12s ease; } .cran:hover { border-color: var(--c); transform: translateY(-1px); } .cran.actif { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 40%, transparent); transform: scale(1.12); position: relative; z-index: 1; } .cran.cran-vide { color: var(--encre3); } .cran.cran-vide.actif { background: var(--gris-pale); border-color: var(--trait-fort); color: var(--encre2); box-shadow: none; } @media (max-width: 420px) { .cran { height: 32px; font-size: 12.5px; border-radius: 7px; } .crans { gap: 3px; } } /* ── Les pastilles à toucher (micro, jeu, accordage, cordes, effets…) ── */ .pst { display: grid; gap: 8px; margin: 4px 0 6px; } .pst:empty { display: none; } .pst-groupe { display: grid; gap: 4px; } .pst-titre { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--encre2); } .pst-liste { display: flex; flex-wrap: wrap; gap: 6px; } .pst-choix { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .pst-choix:hover { border-color: var(--fs, var(--vert)); transform: translateY(-1px); } .pst-choix.actif { background: var(--fs, var(--vert)); border-color: var(--fs, var(--vert)); color: #fff; } .pst-choix:disabled { opacity: .55; cursor: default; } .champ .pst + input { font-size: 14px; } /* La chaîne d'effets : familles en couleur, et l'ordre de branchement numéroté. */ .pst-chaine .pst-groupe:nth-child(1) { --fs: #475569; } .pst-chaine .pst-groupe:nth-child(2) { --fs: #B45309; } .pst-chaine .pst-groupe:nth-child(3) { --fs: #C2410C; } .pst-chaine .pst-groupe:nth-child(4) { --fs: #6941C6; } .pst-chaine .pst-groupe:nth-child(5) { --fs: #0E7490; } .pst-chaine .pst-titre { color: var(--fs); } .pst-ordre { list-style: none; counter-reset: fx; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--papier); border: 1px dashed var(--trait-fort); } .pst-ordre li { counter-increment: fx; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; } .pst-ordre li::before { content: counter(fx); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--encre); color: var(--blanc); font-size: 11px; } .pst-ordre li + li::before { margin-left: 2px; } .pst-ordre li:not(:last-child)::after { content: "→"; color: var(--encre3); margin-left: 3px; } .pst-choix svg { display: none; } .pst:not(.pst-chaine) .pst-choix.actif svg { display: block; } /* 1.22.0 (OpsInterventionPro 1.4.0) — Le planning des interventions plus vivant : résumé, pastilles des techniciens, jauge de la journée, barres en dégradé avec l'icône du statut et la durée, bord droit à tirer, bulle au glisser. */ .pt-resume { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .pt-chip { --c: #475569; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 13px; color: var(--encre); background: color-mix(in srgb, var(--c) 10%, var(--blanc)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); } .pt-chip svg { color: #FFFFFF; background: var(--c); border-radius: 50%; padding: 4px; width: 22px; height: 22px; box-sizing: border-box; } .pt-chip b { font-size: 15px; color: color-mix(in srgb, var(--c) 72%, var(--encre)); font-variant-numeric: tabular-nums; } .pt-chip-bleu { --c: #1D5FA8; } .pt-chip-ambre { --c: #B45309; } .pt-chip-vert { --c: #15803D; } .pt-chip-violet { --c: #6D28D9; } .pt-chip-rouge { --c: #C4320A; } .pt-chip-zero { opacity: .55; } .pt-chip-chev:not(.pt-chip-zero) { animation: pt-pouls 2.4s ease-in-out infinite; } @keyframes pt-pouls { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #C4320A 18%, transparent); } } /* Les techniciens : initiales sur leur couleur, jauge de la journée (8 h). */ .pt-ligne { grid-template-columns: 200px var(--pt-l, 1fr); } .pt-semaine .pt-ligne { grid-template-columns: 200px repeat(7, minmax(118px, 1fr)); } .pt-nom { gap: 9px; } .pt-nom > span { gap: 1px; } .pt-nom-tete { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--encre2); } .pt-nom-tete svg { color: var(--action); } .pt-ava { --ev: #64748B; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ev); color: #FFFFFF; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3.5px color-mix(in srgb, var(--ev) 40%, transparent); } .pt-ava-vide { background: var(--survol); color: var(--encre3); box-shadow: none; border: 1.5px dashed var(--trait-fort); } .pt-charge-ligne { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .pt-charge-ligne em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--encre2); font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-charge { flex: 1 1 auto; min-width: 40px; max-width: 90px; height: 6px; border-radius: 3px; background: var(--trait-leger); overflow: hidden; } .pt-charge i { display: block; height: 100%; border-radius: 3px; background: var(--g); } .pt-charge-vert { --g: #15803D; } .pt-charge-ambre { --g: #D97706; } .pt-charge-rouge { --g: #C4320A; } /* L'heure qu'il est : un trait et sa pastille en haut. */ .pt-now { width: 2px; background: var(--rouge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rouge) 12%, transparent); } .pt-now-lib { position: absolute; top: 4px; transform: translateX(-50%); z-index: 3; padding: 1px 7px; border-radius: 999px; background: var(--rouge); color: #FFFFFF; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 2px 6px color-mix(in srgb, var(--rouge) 40%, transparent); } /* Les interventions : dégradé de la couleur du type, icône du statut, durée. */ .pt-evt { border-left-width: 0; border-radius: 10px; padding: 4px 8px 4px 9px; gap: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--ev) 26%, var(--blanc)), color-mix(in srgb, var(--ev) 12%, var(--blanc))); box-shadow: inset 4px 0 0 var(--ev), 0 2px 6px color-mix(in srgb, var(--ev) 22%, transparent); transition: transform .12s ease, box-shadow .12s ease; } .pt-evt:hover, .pt-evt:focus-visible { transform: translateY(-1px); box-shadow: inset 4px 0 0 var(--ev), 0 6px 16px color-mix(in srgb, var(--ev) 32%, transparent); } .pt-evt .pt-h { gap: 5px; color: color-mix(in srgb, var(--ev) 65%, var(--encre)); max-width: 100%; overflow: hidden; } .pt-ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--ev); color: #FFFFFF; } .pt-ico svg { width: 10px; height: 10px; } .pt-dur { font-size: 10.5px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--ev) 22%, transparent); color: color-mix(in srgb, var(--ev) 70%, var(--encre)); white-space: nowrap; } .pt-court .pt-dur, .pt-court small { display: none; } .pt-evt.pt-en_cours { background: linear-gradient(135deg, color-mix(in srgb, #D97706 24%, var(--blanc)), color-mix(in srgb, var(--ev) 12%, var(--blanc))); } .pt-evt.pt-en_cours .pt-ico { background: #D97706; animation: pt-pouls-ico 1.8s ease-in-out infinite; } @keyframes pt-pouls-ico { 50% { box-shadow: 0 0 0 4px rgba(217, 119, 6, .25); } } .pt-evt.pt-terminee .pt-ico { background: #15803D; } .pt-evt.pt-urgent .pt-ico { background: var(--rouge); } .pt-evt.pt-chev { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ev) 18%, var(--blanc)) 0 8px, color-mix(in srgb, var(--rouge) 12%, var(--blanc)) 8px 16px); } .pt-mobile { cursor: grab; } /* Le bord droit à tirer. */ .pt-etirable { padding-right: 14px; } .pt-poignee { position: absolute; top: 0; right: 0; bottom: 0; width: 11px; cursor: ew-resize; touch-action: none; } .pt-poignee::after { content: ""; position: absolute; top: 50%; right: 3px; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: color-mix(in srgb, var(--ev) 70%, var(--encre)); opacity: 0; transition: opacity .12s; } .pt-evt:hover .pt-poignee::after, .pt-evt:focus-visible .pt-poignee::after, .pt-etire .pt-poignee::after { opacity: .8; } .pt-etire { z-index: 6; box-shadow: inset 4px 0 0 var(--ev), 0 0 0 2px var(--blanc), 0 0 0 4px var(--ev), 0 10px 22px color-mix(in srgb, var(--ev) 35%, transparent); transition: none; } .pt-fantome { border-radius: 10px; } /* La bulle pendant le geste : où l'on va, ou la nouvelle heure de fin. */ .pt-bulle { position: fixed; z-index: 95; pointer-events: none; padding: 6px 11px; border-radius: 10px; background: var(--toast); color: #FFFFFF; font-size: 13px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); } .pt-bulle::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); } .pt-bulle span { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 800; font-size: 12px; } /* La semaine : aujourd'hui en pastille, week-end hachuré, puces avec l'icône du statut. */ .pt-jtete b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-variant-numeric: tabular-nums; } .pt-jtete.pt-auj b { background: var(--action); color: #FFFFFF; box-shadow: 0 3px 8px color-mix(in srgb, var(--action) 45%, transparent); } .pt-jtete.pt-auj small { color: var(--action); font-weight: 800; } .pt-case.pt-we, .pt-jtete.pt-we { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--encre3) 7%, transparent) 6px 7px), var(--survol); } .pt-puce { display: flex; align-items: center; gap: 5px; border-left-width: 0; border-radius: 8px; box-shadow: inset 3px 0 0 var(--ev); background: linear-gradient(135deg, color-mix(in srgb, var(--ev) 22%, var(--blanc)), color-mix(in srgb, var(--ev) 10%, var(--blanc))); } .pt-puce .pt-ico { width: 15px; height: 15px; } .pt-puce .pt-ico svg { width: 9px; height: 9px; } /* « À planifier » : des cartes un peu plus vivantes, et l'aide en encadré. */ .pt-bandeau-tete b svg { color: #6D28D9; } .pt-afaire { border-left-width: 0; box-shadow: inset 4px 0 0 var(--ev, #64748B); transition: transform .12s ease, box-shadow .12s ease; } .pt-afaire:hover { transform: translateY(-1px); box-shadow: inset 4px 0 0 var(--ev, #64748B), 0 6px 14px color-mix(in srgb, var(--ev, #64748B) 25%, transparent); } .pt-afaire.pt-dem { border-left-style: dashed; } .pt-aide { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 2px; padding: 9px 12px; border-radius: 10px; font-size: 13px; color: var(--encre2); background: color-mix(in srgb, var(--action) 6%, var(--blanc)); border: 1px dashed color-mix(in srgb, var(--action) 35%, transparent); } .pt-aide svg { flex: 0 0 auto; margin-top: 1px; color: var(--action); } /* Téléphone : la pastille du technicien et sa jauge dans le titre. */ .pt-tel-tech h3 { flex-wrap: wrap; } .pt-tel-tech h3 .pt-ava { width: 28px; height: 28px; font-size: 10.5px; } .pt-tel-tech h3 .pt-charge-ligne { flex: 1 1 100%; margin: 0 0 0 36px; } @media (max-width: 760px) { .pt-chip { font-size: 12px; padding: 4px 10px 4px 5px; } .pt-aide-clavier { display: none; } } .pt-nom .pt-charge-ligne { display: flex; flex-wrap: nowrap; } .pt-nom .pt-charge { display: block; } .pt-court { padding-left: 7px; padding-right: 5px; } .pt-court .pt-ico { display: none; } .pt-court.pt-etirable { padding-right: 11px; } /* ── 1.23.0 — Module « Ateliers » : sessions en cartes, inscrits, catalogue ── */ .p-violet { background: #EDE7FB; color: #4C2A9E; } :root[data-theme="dark"] .p-violet { background: #2A2147; color: #C9B8F7; } @media (prefers-color-scheme: dark) { :root.theme-auto .p-violet { background: #2A2147; color: #C9B8F7; } } .at-accueil { position: relative; overflow: hidden; color: #fff; border-radius: 20px; padding: 22px 22px 20px; margin-bottom: 14px; display: grid; gap: 16px; background: radial-gradient(480px 260px at 95% 0%, rgba(255,192,120,.45), transparent 70%), linear-gradient(135deg, #C2410C, #8A2D0B 70%, #5E1F09); } .at-accueil-cat { background: radial-gradient(480px 260px at 95% 0%, rgba(255,214,140,.4), transparent 70%), linear-gradient(135deg, #0E7D59, #0A5E43 70%, #07432F); } .at-accueil::after { content: ''; position: absolute; right: -50px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.22); pointer-events: none; } .at-acc-tete { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1; } .at-acc-tete > div:first-child { min-width: 0; flex: 1 1 340px; } .at-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FFD8A8; } .at-accueil h2 { margin: 6px 0 6px; font-size: 25px; line-height: 1.15; color: #fff; letter-spacing: -.01em; text-wrap: balance; } .at-accueil p { margin: 0; color: rgba(255,255,255,.86); max-width: 640px; font-size: 14.5px; } .at-compteurs { display: flex; gap: 10px; flex-wrap: wrap; } .at-compteurs div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 9px 14px; display: grid; min-width: 104px; } .at-compteurs b { font-size: 21px; font-variant-numeric: tabular-nums; } .at-compteurs b small { font-size: 13px; font-weight: 600; opacity: .8; } .at-compteurs span { font-size: 12px; color: rgba(255,255,255,.82); } .at-lien-page { position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,.96); color: #18212D; border-radius: 14px; padding: 10px 12px; } .at-param .at-lien-page { background: var(--survol); color: var(--encre); border: 1px solid var(--trait); } .at-lien-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #FFE8D6; color: #C2410C; flex: none; } .at-lien-txt { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; justify-items: start; } .at-lien-txt code { font-size: 12px; color: #4A5566; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .at-param .at-lien-txt code { color: var(--encre2); } .at-lien-act { display: flex; gap: 6px; flex-wrap: wrap; } .at-outils { margin-bottom: 4px; } .at-mois { margin: 18px 2px 10px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 10px; color: var(--encre); } .at-mois::after { content: ''; flex: 1; height: 1px; background: var(--trait); } .at-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 14px; } .at-s-carte { display: grid; grid-template-rows: auto 1fr; text-align: left; padding: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; cursor: pointer; font: inherit; color: var(--encre); box-shadow: var(--ombre); transition: transform .16s ease, box-shadow .16s ease, border-color .16s; min-width: 0; } .at-s-carte:hover, .at-s-carte:focus-visible { transform: translateY(-3px); border-color: var(--t); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 30px rgba(0,0,0,.12); outline: none; } .at-s-visuel, .at-sd-visuel, .at-cat-visuel, .at-fa-photo { position: relative; display: block; aspect-ratio: 16 / 7; max-width: 100%; overflow: hidden; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 50%, #FFD8A8), var(--t)); } .at-s-visuel img, .at-sd-visuel img, .at-cat-visuel img, .at-fa-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .at-dessin { position: absolute; right: 8%; bottom: 8%; width: 40%; height: 76%; opacity: .92; transform: rotate(-6deg); color: #fff; } .at-vide .at-dessin { position: static; width: 74px; height: 74px; transform: none; color: #E8590C; } .at-pdate { position: absolute; z-index: 1; left: 12px; top: 12px; display: grid; justify-items: center; min-width: 54px; padding: 6px 8px 7px; border-radius: 14px; background: var(--blanc); color: var(--encre); box-shadow: 0 6px 16px rgba(0,0,0,.2); line-height: 1.05; font-variant-numeric: tabular-nums; } .at-pdate small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--t); } .at-pdate b { font-size: 23px; font-weight: 800; margin: 2px 0 1px; } .at-pdate-grand { min-width: 70px; padding: 8px 10px 9px; } .at-pdate-grand b { font-size: 30px; } .at-s-corps { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-width: 0; } .at-s-haut b { font-size: 16.5px; line-height: 1.25; display: block; } .at-s-corps > small { color: var(--encre2); font-size: 12.5px; } .at-s-etats { display: flex; flex-wrap: wrap; gap: 5px; min-height: 0; } .at-s-etats:empty { display: none; } .at-jauge { position: relative; display: block; height: 8px; border-radius: 99px; background: var(--trait-leger); overflow: visible; margin-top: 2px; } .at-jauge i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--t, #E8590C), color-mix(in srgb, var(--t, #E8590C) 55%, #FFC078)); } .at-jauge em { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--encre2); border-radius: 2px; opacity: .55; } .at-s-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--encre2); margin-top: auto; } .at-s-bas b { font-size: 16px; color: var(--encre); font-variant-numeric: tabular-nums; } .at-s-bas b small { font-size: 12.5px; font-weight: 600; color: var(--encre2); } .at-annulee { opacity: .62; } .at-annulee .at-s-visuel, .at-annulee .at-i-avatar { filter: grayscale(.8); } .at-vide { border-style: solid; } /* La session ouverte */ .at-fil { margin-bottom: 8px; } .at-sd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; overflow: hidden; box-shadow: var(--ombre); } .at-sd-visuel { aspect-ratio: auto; min-height: 260px; } .at-sd-infos { padding: 18px 20px 20px; display: grid; gap: 10px; align-content: start; min-width: 0; } .at-sd-infos h2 { margin: 0; font-size: 25px; line-height: 1.15; text-wrap: balance; } .at-sd-quand { margin: 0; color: var(--encre2); } .at-sd-places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .at-sd-places div { background: var(--survol); border: 1px solid var(--trait-leger); border-radius: 12px; padding: 8px 10px; display: grid; } .at-sd-places b { font-size: 19px; font-variant-numeric: tabular-nums; } .at-sd-places span { font-size: 12px; color: var(--encre2); } .at-sd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; } .at-bascule { padding: 6px 10px; border: 1px solid var(--trait); border-radius: 10px; } @media (max-width: 860px) { .at-sd { grid-template-columns: minmax(0, 1fr); } .at-sd-visuel { min-height: 0; aspect-ratio: 16 / 7; } .at-sd-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .at-inscrits { margin-top: 16px; display: grid; gap: 10px; } .at-inscrits-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .at-inscrits-tete h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; } .at-compte-mini { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--encre2); } .at-compte-mini span { display: inline-flex; gap: 4px; align-items: center; } .at-i-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; align-items: start; } .at-i-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 14px; } .at-i-carte.at-present { border-color: color-mix(in srgb, var(--vert) 50%, var(--trait)); background: color-mix(in srgb, var(--vert-pale) 45%, var(--blanc)); } .at-i-avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 60%, #FFC078), var(--t)); grid-row: span 2; } .at-i-avatar em { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--encre); color: var(--blanc); border-radius: 99px; padding: 1px 6px; } .at-i-corps { display: grid; gap: 4px; min-width: 0; } .at-i-haut { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .at-i-haut b { font-size: 15px; margin-right: 2px; } .at-i-corps small { font-size: 12.5px; overflow-wrap: anywhere; } .at-i-remarque { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; background: var(--ambre-fond); color: var(--ambre-texte); border-radius: 9px; padding: 5px 9px; } .at-i-docs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; } .at-i-docs b { margin-left: auto; font-variant-numeric: tabular-nums; } .at-i-doc { display: inline-flex; align-items: center; gap: 4px; color: var(--lien); text-decoration: none; font-weight: 600; } .at-i-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; } .at-presence { display: inline-flex; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; } .at-presence button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--blanc); color: var(--encre2); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; cursor: pointer; min-height: 32px; } .at-presence button + button { border-left: 1px solid var(--trait); } .at-presence button.actif { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .at-presence button.at-absent { background: var(--rouge-pale); color: var(--rouge-texte); } .at-annulees { margin-top: 4px; } .at-annulees summary { cursor: pointer; color: var(--encre2); font-weight: 600; padding: 4px 2px; } .at-annulees .at-i-liste { margin-top: 8px; } .at-menu-actions { display: grid; gap: 8px; } .at-menu-actions .btn { justify-content: flex-start; } .at-modes, .at-encaissement { display: grid; gap: 8px; } .at-modes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .at-mode { display: flex; gap: 8px; align-items: center; border: 1.5px solid var(--trait); border-radius: 12px; padding: 9px 11px; cursor: pointer; } .at-mode:has(input:checked) { border-color: var(--action); background: var(--vert-pale); } .at-mode span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; } .at-mode-large { align-items: flex-start; } .at-mode-large span { display: grid; gap: 2px; } .at-mode-large small { font-weight: 400; color: var(--encre2); font-size: 13px; } .at-mode-large input { margin-top: 4px; } /* Programmer une session : le choix de l'atelier */ .at-choix-ateliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 2px; } .at-choix-at { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--trait); border-radius: 14px; padding: 7px; cursor: pointer; min-width: 0; } .at-choix-at:has(input:checked) { border-color: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 22%, transparent); } .at-choix-at input { position: absolute; opacity: 0; pointer-events: none; } .at-choix-vis { position: relative; flex: none; width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 50%, #FFD8A8), var(--t)); color: #fff; } .at-choix-vis img { width: 100%; height: 100%; object-fit: cover; } .at-choix-vis .at-dessin { width: 70%; height: 80%; right: 15%; bottom: 10%; } .at-choix-at > span:last-child { display: grid; min-width: 0; } .at-choix-at b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .at-choix-at small { font-size: 12px; color: var(--encre2); } /* Le catalogue */ .at-cat-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; } .at-cat-carte { display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; box-shadow: var(--ombre); min-width: 0; } .at-cat-visuel { border: 0; padding: 0; cursor: pointer; aspect-ratio: 16 / 8; } .at-cat-theme { position: absolute; z-index: 1; left: 12px; bottom: 10px; font-size: 12.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); } .at-cat-sessions { position: absolute; z-index: 1; right: 10px; top: 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; } .at-cat-corps { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; } .at-cat-corps > b { font-size: 16.5px; line-height: 1.25; } .at-cat-corps p { margin: 0; color: var(--encre2); font-size: 13.5px; } .at-cat-infos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--encre2); } .at-cat-infos span { display: inline-flex; align-items: center; gap: 4px; } .at-cat-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .at-cat-prix { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .at-cat-prix small { font-size: 12.5px; font-weight: 500; color: var(--encre2); } .at-cat-act { display: flex; gap: 6px; flex-wrap: wrap; } /* La fiche d'un atelier */ .at-fa-photo { border-radius: 14px; aspect-ratio: 16 / 5; max-height: 210px; margin-bottom: 4px; } .at-fa-photo-btn { position: absolute; z-index: 1; right: 10px; bottom: 10px; } .at-fa-photo-ret { position: absolute; z-index: 1; left: 10px; bottom: 10px; } .at-themes { display: flex; flex-wrap: wrap; gap: 6px; } .at-theme-choix input { position: absolute; opacity: 0; pointer-events: none; } .at-theme-choix span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; border: 1.5px solid var(--trait); font-size: 13px; font-weight: 600; cursor: pointer; } .at-theme-choix span i { width: 10px; height: 10px; border-radius: 50%; background: var(--t); } .at-theme-choix input:checked + span { border-color: var(--t); background: color-mix(in srgb, var(--t) 14%, var(--blanc)); } .at-theme-choix input:focus-visible + span { outline: 2px solid var(--t); outline-offset: 2px; } .at-allerg { display: flex; flex-wrap: wrap; gap: 6px; } .at-allerg label { cursor: pointer; } .at-allerg input { position: absolute; opacity: 0; pointer-events: none; } .at-allerg span { display: inline-block; padding: 5px 10px; border-radius: 99px; border: 1.5px solid var(--trait); font-size: 12.5px; font-weight: 600; } .at-allerg input:checked + span { background: var(--ambre-pale); border-color: var(--ambre-trait); color: var(--ambre-texte); } .at-allerg input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; } /* L'accueil */ .at-tdb { margin-bottom: 14px; display: grid; gap: 10px; } .at-tdb-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .at-tdb-tete h3 { margin: 0; } .at-tdb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; } .at-tdb-s { position: relative; display: flex; gap: 10px; align-items: center; text-align: left; background: var(--survol); border: 1px solid var(--trait-leger); border-radius: 14px; padding: 8px 10px; cursor: pointer; font: inherit; color: var(--encre); min-width: 0; } .at-tdb-s:hover { border-color: var(--t); } .at-tdb-s .at-pdate { position: static; box-shadow: none; border: 1px solid var(--trait); min-width: 48px; } .at-tdb-txt { display: grid; gap: 3px; min-width: 0; flex: 1; } .at-tdb-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .at-tdb-txt small { font-size: 12px; color: var(--encre2); } .at-tdb-act { display: flex; gap: 6px; flex-wrap: wrap; } .at-outils { flex-wrap: wrap; } @media (max-width: 600px) { .at-accueil { padding: 18px 16px 16px; } .at-accueil h2 { font-size: 21px; } .at-accueil .at-acc-tete p { display: none; } .at-compteurs { width: 100%; } .at-compteurs div { min-width: 0; flex: 1 1 30%; padding: 8px 10px; } .at-compteurs b { font-size: 16px; white-space: nowrap; } .at-outils .btn-p { width: 100%; justify-content: center; white-space: nowrap; } .at-sd-infos h2 { font-size: 21px; } .at-i-actions { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .at-s-carte { transition: none; } .at-s-carte:hover { transform: none; } } @media (max-width: 760px) { .liste-outils.at-outils { display: flex; flex-wrap: wrap; gap: 8px; } .liste-outils.at-outils .recherche { flex: 1 1 100%; width: 100%; } .liste-outils.at-outils .filtres { flex: 1 1 100%; flex-wrap: wrap; margin: 0; } .liste-outils.at-outils .btn-p { flex: 1 1 100%; justify-content: center; } } /* ── 1.24.0 — Ateliers : quiz et questionnaires (bureau) ── */ .qb-accueil { background: radial-gradient(480px 260px at 95% 0%, rgba(250,176,5,.38), transparent 70%), linear-gradient(135deg, #7B2FA8, #5A1F86 65%, #3B1260); } .qb-acc-btns { display: flex; gap: 8px; flex-wrap: wrap; } .qb-btn-clair { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); } .qb-btn-clair:hover { background: rgba(255,255,255,.24); color: #fff; } .qb-trois { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .qb-trois div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 10px 12px; } .qb-trois svg { grid-row: span 2; color: #FFD8A8; } .qb-trois b { font-size: 14.5px; } .qb-trois small { font-size: 12.5px; color: rgba(255,255,255,.8); } .qb-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .qb-carte { position: relative; display: grid; gap: 7px; align-content: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 14px 14px 12px; overflow: hidden; } .qb-carte::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--t); } .qb-archive { opacity: .7; } .qb-carte-tete { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .qb-type { display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t); margin-right: auto; } .qb-titre { font-size: 16.5px; line-height: 1.25; } .qb-chiffres { display: flex; flex-wrap: wrap; gap: 6px; } .qb-chiffres span { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--survol); color: var(--encre2); font-variant-numeric: tabular-nums; } .qb-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .qb-etoiles { display: inline-flex; gap: 1px; color: var(--trait-fort); font-size: 15px; letter-spacing: 0; line-height: 1; } .qb-etoiles i { font-style: normal; } .qb-etoiles i.plein { color: #F59F00; } .qb-etoiles i.demi { background: linear-gradient(90deg, #F59F00 50%, var(--trait-fort) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* L'éditeur */ .qb-form { display: grid; gap: 12px; } .qb-case-espace { align-self: center; } .qb-questions { display: grid; gap: 10px; } .qb-q { display: grid; gap: 8px; border: 1px solid var(--trait); border-radius: 14px; padding: 12px; background: var(--survol); } .qb-q-tete { display: flex; gap: 8px; align-items: center; } .qb-q-tete > b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: #fff; font-size: 14px; flex: none; } .qb-q-tete select { max-width: 230px; } .qb-q-btns { margin-left: auto; display: flex; gap: 4px; } .qb-q textarea { width: 100%; } .qb-choix { display: grid; gap: 6px; } .qb-choix-l { display: flex; gap: 8px; align-items: center; } .qb-choix-l input:not([type=radio]) { flex: 1; min-width: 0; } .qb-bonne input, .qb-p-choix input[type=radio] { position: absolute; opacity: 0; } .qb-bonne span, .qb-lettre { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; cursor: pointer; flex: none; opacity: .45; } .qb-lettre { cursor: default; opacity: .9; } .qb-bonne input:checked + span { opacity: 1; box-shadow: 0 0 0 3px var(--blanc), 0 0 0 5px var(--action); } .qb-bonne input:checked + span::after { content: ' ✓'; font-size: 10px; } .qb-bonne input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 3px; } .qb-l0 .qb-bonne span, .qb-l0 .qb-lettre { background: #E8590C; } .qb-l1 .qb-bonne span, .qb-l1 .qb-lettre { background: #1971C2; } .qb-l2 .qb-bonne span, .qb-l2 .qb-lettre { background: #2F9E44; } .qb-l3 .qb-bonne span, .qb-l3 .qb-lettre { background: #AE3EC9; } .qb-vf { font-weight: 600; } .qb-plus { justify-self: start; } .qb-duree { max-width: 150px; } .qb-apercu { display: flex; gap: 8px; align-items: center; color: var(--encre2); } .qb-apercu .qb-etoiles { font-size: 22px; } .qb-dix span { width: 26px; height: 26px; border: 1px solid var(--trait-fort); border-radius: 7px; display: grid; place-items: center; font-size: 12px; } .qb-ajouter { display: flex; flex-wrap: wrap; gap: 6px; } /* Dans la session */ .qb-session, .fi-session { margin-top: 18px; display: grid; gap: 10px; } .qb-session-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } .qb-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; } .qb-bloc h4 { margin: 0; display: flex; gap: 7px; align-items: center; font-size: 15px; } .qb-bloc p { margin: 0; color: var(--encre2); font-size: 14px; } .qb-bloc-direct { background: linear-gradient(160deg, color-mix(in srgb, #AE3EC9 9%, var(--blanc)), var(--blanc) 60%); } .qb-lancer { display: flex; gap: 8px; } .qb-lancer select { flex: 1; min-width: 0; } .qb-papier { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13.5px; } .qb-papier .lien-txt { display: inline-flex; gap: 5px; align-items: center; } .qb-parties { display: grid; gap: 6px; } .qb-partie { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--trait); border-radius: 12px; padding: 8px 10px; background: var(--blanc); cursor: pointer; color: var(--encre); font: inherit; } .qb-partie:hover { border-color: var(--action); } .qb-partie > span:nth-child(2) { display: grid; flex: 1; min-width: 0; } .qb-partie small { color: var(--encre2); font-size: 12.5px; } .qb-partie-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, #AE3EC9 14%, var(--blanc)); color: #8E2BA8; flex: none; } .qb-avis-chiffres { display: flex; gap: 10px; flex-wrap: wrap; } .qb-avis-chiffres > div { display: grid; justify-items: start; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--survol); min-width: 96px; } .qb-avis-chiffres b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1; } .qb-avis-chiffres small { font-size: 12px; color: var(--encre2); } .qb-com { border-left: 3px solid #F59F00; padding: 4px 0 4px 10px; display: grid; gap: 4px; } .qb-com p { margin: 0; color: var(--encre); font-size: 14px; } .qb-com p small { display: block; color: var(--encre2); font-size: 11.5px; font-weight: 600; } .qb-com-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .qb-masque { opacity: .55; } .qb-chips { display: flex; flex-wrap: wrap; gap: 5px; } .qb-p-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; } .qb-p-choix .at-mode { position: relative; } /* Le bilan d'une partie */ .qb-bilan { display: grid; gap: 12px; } .qb-bilan h4 { margin: 4px 0 0; } .qb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .qb-m { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 8px; border-radius: 14px; background: var(--survol); } .qb-m span { font-size: 28px; } .qb-m b { overflow-wrap: anywhere; } .qb-m small { color: var(--encre2); font-variant-numeric: tabular-nums; } .qb-m1 { background: color-mix(in srgb, #FAB005 20%, var(--blanc)); } .qb-suite { margin: 0; padding-left: 26px; display: grid; gap: 4px; } .qb-suite li span { display: inline-block; min-width: 60%; } .qb-suite b { font-variant-numeric: tabular-nums; } .qb-reussites { display: grid; gap: 8px; } .qb-reussites > div, .qb-repart > div { display: grid; grid-template-columns: minmax(0, 1fr) 110px 44px; gap: 10px; align-items: center; font-size: 13.5px; } .qb-reussites small, .qb-repart small { text-align: right; color: var(--encre2); font-variant-numeric: tabular-nums; } .qb-barre { height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; } .qb-barre i { display: block; height: 100%; border-radius: inherit; background: #F59F00; } /* Les avis, tous ateliers */ .qb-avis-filtre { margin-bottom: 10px; } .qb-avis-filtre select { max-width: 320px; } .qb-avis-haut { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(180px, 240px); gap: 12px; margin-bottom: 12px; } .qb-note { justify-items: center; text-align: center; } .qb-note > b { font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; } .qb-note .qb-etoiles { font-size: 22px; } .qb-note small { color: var(--encre2); } .qb-repart > div { grid-template-columns: 34px minmax(0, 1fr) 34px; } .qb-nps > b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--action); } .qb-nps small { font-weight: 700; } .qb-nps span { font-size: 12.5px; color: var(--encre2); } .qb-par-q { margin-bottom: 12px; } .qb-pq { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; gap: 10px; align-items: center; font-size: 14px; padding: 4px 0; border-bottom: 1px dashed var(--trait); } .qb-pq:last-child { border-bottom: 0; } .qb-pq > b { text-align: right; font-variant-numeric: tabular-nums; } .qb-pq-choix { grid-template-columns: minmax(0, 1fr); } .qb-pq-c { display: flex; gap: 6px; flex-wrap: wrap; } .qb-pq-c span { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--survol); } .qb-h3 { margin: 6px 0 8px; font-size: 16px; } .qb-coms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .qb-coms .qb-com { background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid #F59F00; border-radius: 12px; padding: 10px 12px; } @media (max-width: 760px) { .qb-avis-haut { grid-template-columns: 1fr; } .qb-podium { grid-template-columns: 1fr; } .qb-reussites > div { grid-template-columns: minmax(0, 1fr) 70px 38px; } .qb-q-tete select { max-width: 160px; } } /* Les champs de l'éditeur et des filtres, hors de .champ */ .qb-q input:not([type=radio]):not([type=checkbox]), .qb-q select, .qb-q textarea, .qb-avis-filtre select, .qb-lancer select, .qb-p-choix + select, .qb-form .champ select { font: inherit; color: var(--encre); min-height: 40px; padding: 7px 11px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); } .qb-q textarea { min-height: 56px; resize: vertical; font-weight: 600; } .qb-q-tete select { width: auto; min-height: 34px; padding: 4px 8px; } .qb-avis-filtre select { width: 100%; } .qb-q input:focus, .qb-q select:focus, .qb-q textarea:focus, .qb-avis-filtre select:focus, .qb-lancer select:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .qb-q .champ-ligne { align-items: end; } /* 1.24.1 — La carte de l'inscrit : appeler et WhatsApp en icônes */ .at-i-ligne { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; } .at-i-contact { display: inline-flex; gap: 6px; flex: none; } .at-i-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre2); text-decoration: none; } .at-i-ico:hover { border-color: var(--action); color: var(--action); background: var(--vert-pale); } .at-i-wa { color: #1FA855; border-color: color-mix(in srgb, #25D366 45%, var(--trait)); } .at-i-wa:hover { color: #fff; background: #25D366; border-color: #25D366; } .at-i-ico:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; } /* 1.24.3 — Les photos proposées pour l'habillage */ .bd-proposees { display: grid; gap: 6px; } .bd-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .bd-vignette { display: grid; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--trait); background: var(--blanc); cursor: pointer; font: inherit; color: var(--encre); text-align: center; } .bd-vignette span { display: block; height: 58px; border-radius: 8px; background-color: #24252F; background-repeat: no-repeat; background-position: center; background-image: var(--x); background-size: cover; } .bd-vignette small { font-size: 12px; font-weight: 600; } .bd-vignette:hover, .bd-vignette:focus-visible { border-color: var(--action); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } /* ══ 1.25.0 — Ateliers, quiz et avis : un style plus sobre ══════════════════════════════════════════ Plus de dégradés vifs ni de dessins penchés : des cartes claires, un trait fin, la couleur du thème en touche. */ .at-accueil, .at-accueil-cat, .qb-accueil { color: var(--encre); background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; box-shadow: none; } .at-accueil::after { content: none; } .at-kick { color: var(--encre2); font-weight: 700; letter-spacing: .12em; } .at-accueil h2 { color: var(--encre); font-size: 22px; font-weight: 700; } .at-accueil p { color: var(--encre2); } .at-compteurs div { background: var(--survol); border: 1px solid var(--trait-leger); border-radius: 10px; } .at-compteurs span { color: var(--encre2); } .at-lien-page { background: var(--survol); color: var(--encre); border: 1px solid var(--trait-leger); border-radius: 10px; } .at-lien-ico { background: var(--blanc); color: var(--encre2); border: 1px solid var(--trait); border-radius: 10px; } .at-lien-txt code { color: var(--encre2); } .qb-btn-clair { background: var(--blanc); color: var(--encre); border-color: var(--trait); } .qb-btn-clair:hover { background: var(--survol); color: var(--encre); } .qb-trois div { background: var(--survol); border: 1px solid var(--trait-leger); border-radius: 10px; } .qb-trois svg { color: var(--encre2); } .qb-trois small { color: var(--encre2); } /* Le visuel d'un atelier sans photo : une carte de menu, le dessin en petit, à la couleur du thème */ .at-s-visuel, .at-sd-visuel, .at-cat-visuel, .at-fa-photo, .at-choix-vis { color: var(--t); background: color-mix(in srgb, var(--t) 7%, var(--blanc)); } .at-s-visuel::before, .at-sd-visuel::before, .at-cat-visuel::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--t) 22%, transparent); border-radius: 6px; pointer-events: none; } .at-s-visuel:has(img)::before, .at-sd-visuel:has(img)::before, .at-cat-visuel:has(img)::before { content: none; } .at-dessin { right: 50%; bottom: 50%; width: 52px; height: 52px; transform: translate(50%, 50%); opacity: .75; color: var(--t); stroke-width: 1.6; } .at-choix-vis .at-dessin { width: 26px; height: 26px; right: 50%; bottom: 50%; } .at-vide .at-dessin { transform: none; color: var(--encre2); width: 56px; height: 56px; } .at-pdate { border-radius: 8px; box-shadow: none; border: 1px solid var(--trait); padding: 5px 8px 6px; } .at-pdate small { color: var(--encre2); font-weight: 700; } .at-pdate b { font-weight: 700; } .at-s-carte, .at-cat-carte, .at-sd { border-radius: 12px; box-shadow: none; } .at-s-carte:hover, .at-s-carte:focus-visible { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.07); border-color: color-mix(in srgb, var(--t) 45%, var(--trait)); } .at-jauge { height: 4px; } .at-jauge i { background: var(--t, var(--encre2)); } .at-jauge em { top: -3px; height: 10px; } .at-cat-theme { color: var(--t); text-shadow: none; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; } .at-cat-visuel:has(img) .at-cat-theme { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .at-cat-sessions { background: var(--blanc); color: var(--encre); border: 1px solid var(--trait); } .at-i-carte { border-radius: 12px; } .at-i-avatar { background: color-mix(in srgb, var(--t) 13%, var(--blanc)); color: color-mix(in srgb, var(--t) 85%, #000); font-weight: 700; } .at-theme-choix span, .at-allerg span { border-radius: 8px; } .qb-carte { border-radius: 12px; } .qb-carte::before { height: 3px; } .qb-m span { font-size: 15px; font-weight: 800; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); border: 1px solid var(--trait); } .qb-m1 { background: color-mix(in srgb, #B8962E 12%, var(--blanc)); } /* ══ 1.26.0 — Ateliers : photos, carte du menu, couleur brune ═════════════════════════════════════ */ :root[data-groupe="brun"] #contenu .btn-p, :root[data-groupe="brun"] .md .btn-p { background: var(--page); border-color: var(--page); } :root[data-groupe="brun"] #contenu .btn-p:hover, :root[data-groupe="brun"] .md .btn-p:hover { background: color-mix(in srgb, var(--page) 82%, #000); } /* La carte du menu en texte, quand l'atelier n'a pas de photo */ .at-carte-menu { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 18px 22px; text-align: center; background: color-mix(in srgb, var(--t) 6%, var(--blanc)); color: var(--encre); } .at-carte-menu::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--t) 28%, transparent); border-radius: 6px; pointer-events: none; } .at-carte-menu small { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--t); margin-bottom: 4px; } .at-carte-menu i { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: 16px; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .at-sd-visuel .at-carte-menu i { font-size: 20px; } .at-s-visuel:has(.at-carte-menu)::before, .at-sd-visuel:has(.at-carte-menu)::before, .at-cat-visuel:has(.at-carte-menu)::before { content: none; } .at-cat-visuel:has(img:not([src^="data"])) .at-cat-theme, .at-cat-visuel:has(img) .at-cat-theme { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); } /* La fiche : l'aperçu et le choix du visuel */ .at-fa-rendu { position: absolute; inset: 0; } .at-fa-rendu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .at-fa-photo { aspect-ratio: 16 / 6; } .at-galerie { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: -2px 0 6px; scrollbar-width: thin; } .at-gal-choix { flex: 0 0 116px; display: grid; gap: 4px; padding: 4px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); cursor: pointer; font: inherit; color: var(--encre); text-align: left; } .at-gal-choix small { font-size: 11.5px; line-height: 1.2; color: var(--encre2); padding: 0 2px 2px; } .at-gal-img { display: block; height: 62px; border-radius: 7px; background: var(--survol) center / cover no-repeat; } .at-gal-menu { display: grid; place-items: center; background: color-mix(in srgb, #7A4630 6%, var(--blanc)); border: 1px solid color-mix(in srgb, #7A4630 25%, transparent); } .at-gal-menu i { font-family: 'Playfair Display', Georgia, serif; font-size: 14px; color: var(--encre); } .at-gal-choix:hover { border-color: var(--trait-fort); } .at-gal-choix.actif { border-color: var(--page, #7A4630); box-shadow: 0 0 0 2px color-mix(in srgb, var(--page, #7A4630) 35%, transparent); } .at-gal-choix.actif small { color: var(--encre); font-weight: 600; } .at-fa-photo { width: 100%; aspect-ratio: auto; height: 200px; max-height: none; } .at-galerie-tete { margin: 2px 2px -2px; font-size: 12.5px; font-weight: 600; color: var(--encre2); } .at-s-visuel .at-carte-menu, .at-cat-visuel .at-carte-menu { align-content: end; padding: 14px 20px 18px; } .at-cat-visuel:has(.at-carte-menu) .at-cat-theme { display: none; } /* ══ 1.27.0 — Les en-têtes des Ateliers et des Quiz : une photo en fond, plus gourmands ══ */ .at-accueil, .at-accueil-cat, .qb-accueil { color: #fff; border: 0; border-radius: 20px; box-shadow: 0 14px 34px rgba(40, 24, 12, .18); background: linear-gradient(100deg, rgba(28, 18, 10, .9) 0%, rgba(28, 18, 10, .72) 45%, rgba(28, 18, 10, .25) 100%), url('icones/ateliers/table-de-fete.jpg') center / cover no-repeat, #2A1D14; } .at-accueil-cat { background: linear-gradient(100deg, rgba(14, 30, 20, .9) 0%, rgba(14, 30, 20, .7) 45%, rgba(14, 30, 20, .2) 100%), url('icones/ateliers/agrumes.jpg') center / cover no-repeat, #16261C; } .qb-accueil { background: linear-gradient(100deg, rgba(48, 10, 22, .9) 0%, rgba(48, 10, 22, .7) 45%, rgba(48, 10, 22, .15) 100%), url('icones/ateliers/cerises-citrons.jpg') center / cover no-repeat, #3A1020; } .at-kick { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #FFE8A3; font-weight: 800; letter-spacing: .13em; backdrop-filter: blur(4px); } .at-accueil h2 { color: #fff; font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); } .at-accueil p { color: rgba(255, 255, 255, .9); } .qb-btn-clair { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(4px); } .qb-btn-clair:hover { background: rgba(255, 255, 255, .28); color: #fff; } :root #contenu .qb-acc-btns .btn-p { background: #FFD43B; border-color: #FFD43B; color: #3A2A06; box-shadow: 0 6px 18px rgba(255, 212, 59, .35); } :root #contenu .qb-acc-btns .btn-p:hover { background: #FCC419; border-color: #FCC419; color: #3A2A06; } .qb-trois div { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; backdrop-filter: blur(6px); transition: transform .15s ease, background .15s; } .qb-trois div:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .2); } .qb-trois svg { box-sizing: content-box; padding: 9px; border-radius: 50%; color: #fff; background: #E8590C; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } .qb-trois div:nth-child(2) svg { background: #1C7ED6; } .qb-trois div:nth-child(3) svg { background: #2F9E44; } .qb-trois b { color: #fff; } .qb-trois small { color: rgba(255, 255, 255, .82); } /* 1.28.2 — Les compteurs de « Vos prochaines sessions » sur la photo : verre dépoli, chiffres blancs lisibles. */ .at-accueil .at-compteurs div { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; backdrop-filter: blur(6px); color: #fff; } .at-accueil .at-compteurs b { color: #fff; } .at-accueil .at-compteurs b small { color: rgba(255, 255, 255, .8); } .at-accueil .at-compteurs span { color: rgba(255, 255, 255, .85); } @media (max-width: 600px) { .at-accueil h2 { font-size: 22px; } } /* ══ 1.27.0 — L'éditeur de quiz : glisser-déposer, outils plus lisibles ══ */ .qb-questions { position: relative; } .qb-choix { position: relative; } .qb-poignee { display: grid; place-items: center; width: 26px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--encre3, #98A2B3); cursor: grab; touch-action: none; flex: none; } .qb-poignee:hover, .qb-poignee:focus-visible { background: var(--blanc); color: var(--encre); box-shadow: 0 0 0 1px var(--trait); } .qb-poignee:active { cursor: grabbing; } .qb-poignee-c { width: 22px; height: 30px; } .qb-q { transition: box-shadow .2s, border-color .2s; } .qb-q:hover { border-color: color-mix(in srgb, var(--page, var(--vert)) 40%, var(--trait)); } .qb-q-tete > b { background: var(--page, var(--action)); } .qb-q-btns { gap: 2px; padding: 3px; border-radius: 10px; background: var(--blanc); border: 1px solid var(--trait); } .qb-outil { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--encre2); cursor: pointer; } .qb-outil:hover:not(:disabled) { background: var(--survol); color: var(--encre); } .qb-outil:disabled { opacity: .3; cursor: default; } .qb-outil-suppr:hover:not(:disabled) { background: #FFE3E3; color: #C92A2A; } .qb-choix-l > .btn-icone { border: 0; background: transparent; color: var(--encre3, #98A2B3); } .qb-choix-l > .btn-icone:hover { background: #FFE3E3; color: #C92A2A; } .qb-fantome { list-style: none; background: var(--blanc); border-radius: 14px; opacity: .96; } .qb-choix-l.qb-fantome { padding: 4px 8px; } .qb-trie .qb-poignee { cursor: grabbing; } .qb-deposee { animation: qb-deposee .8s ease; } @keyframes qb-deposee { 0% { box-shadow: 0 0 0 0 var(--vert-pale); background-color: var(--vert-pale); } 100% { box-shadow: 0 0 0 0 transparent; } } /* ══ 1.28.0 — Les fiches des ateliers ══ */ .fi-accueil { background: linear-gradient(100deg, rgba(30, 20, 12, .9) 0%, rgba(30, 20, 12, .7) 48%, rgba(30, 20, 12, .2) 100%), url('icones/ateliers/biscuits-the.jpg') center / cover no-repeat, #2A1D14; } /* 1.35.0 — Une entreprise « Plantes et jardin » seulement : les en-têtes en feuillage. */ .at-accueil.at-nature, .at-accueil-cat.at-nature, .fi-accueil.at-nature { background: linear-gradient(100deg, rgba(12, 32, 18, .9) 0%, rgba(12, 32, 18, .7) 45%, rgba(12, 32, 18, .2) 100%), url('icones/bandeau-nature-feuille.jpg') center / cover no-repeat, #15301C; box-shadow: 0 14px 34px rgba(12, 40, 20, .2); } .fi-modeles { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } .fi-mod { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .12); color: #fff; text-align: left; cursor: pointer; backdrop-filter: blur(6px); font: inherit; transition: transform .15s, background .15s; } .fi-mod:hover:not(:disabled) { transform: translateY(-2px); background: rgba(255, 255, 255, .22); } .fi-mod b { display: block; font-size: 13.5px; } .fi-mod small { font-size: 11.5px; color: rgba(255, 255, 255, .78); } .fi-mod-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--m); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } .fi-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; } .fi-carte { display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; transition: box-shadow .18s, transform .18s; } .fi-carte:hover { box-shadow: 0 10px 26px rgba(40, 24, 12, .12); transform: translateY(-2px); } .fi-vignette { position: relative; height: 128px; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: #fff; font: inherit; background: radial-gradient(260px 130px at 85% 0%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 55%, #1F1C19)); background-size: cover; background-position: center; } .fi-vig-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55)); } .fi-vig-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .5); position: relative; z-index: 1; } .fi-vig-photo .fi-vig-ic { position: absolute; left: 12px; bottom: 10px; width: 36px; height: 36px; background: var(--m); border: 0; } .fi-vig-mod { position: absolute; right: 10px; top: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; } .fi-carte-corps { display: grid; gap: 6px; padding: 12px 14px 14px; align-content: start; } .fi-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 6px 0 12px; } .fi-choix-m { display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; background: var(--blanc); color: var(--encre); text-align: left; cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; } .fi-choix-m:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(40, 24, 12, .14); border-color: var(--m, var(--action)); } .fi-choix-m img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; border-bottom: 3px solid var(--m); } .fi-choix-txt { display: grid; gap: 3px; padding: 10px 12px 12px; } .fi-choix-txt b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--m); } .fi-choix-txt small { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre2); } .fi-choix-txt > span { font-size: 13px; color: var(--encre2); } .fi-choix-import { --m: #1C7ED6; border-style: dashed; } .fi-choix-ic { display: grid; place-items: center; height: 150px; color: #1C7ED6; background: color-mix(in srgb, #1C7ED6 8%, var(--blanc)); } /* L'éditeur */ .fi-edit { display: grid; gap: 14px; } .fi-barre { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--barre); border: 1px solid var(--trait); border-radius: 14px; backdrop-filter: blur(8px); } .fi-barre-titre { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .fi-barre-titre .fi-mod-ic { width: 32px; height: 32px; } .fi-barre-titre small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--m); } .fi-barre-titre b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fi-etat { font-size: 12.5px; color: var(--encre2); } .fi-etat-mod { color: #B35C00; font-weight: 600; } .fi-barre-titre > span:last-child { min-width: 0; } /* 1.34.1 — le titre long se coupe au lieu de déborder */ /* 1.34.1 — La barre de l'éditeur reste visible SOUS la barre du haut (elle passait dessous en défilant). Sur téléphone : une ligne d'outils (retour, état, Envoyer, Enregistrer ; retour et Envoyer en icône) et le titre en dessous. */ .fi-barre { top: 68px; } @media (max-width: 700px) { .fi-barre { top: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; padding: 8px 10px; } .fi-barre > .fi-b-retour { grid-column: 1; grid-row: 1; padding-inline: 10px; } .fi-barre > .fi-etat { grid-column: 1 / -1; grid-row: 3; min-width: 0; font-size: 12px; line-height: 1.2; } .fi-barre > .fi-etat:empty { display: none; } .fi-barre > #fi-btn-envoyer { grid-column: 3; grid-row: 1; padding-inline: 10px; justify-self: end; } .fi-barre > #fi-btn-enreg { grid-column: 4; grid-row: 1; } .fi-barre .fi-b-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fi-barre > .fi-barre-titre { grid-column: 1 / -1; grid-row: 2; gap: 8px; } .fi-barre-titre .fi-mod-ic { width: 26px; height: 26px; flex: none; } .fi-barre-titre small { font-size: 10px; } .fi-barre-titre b { font-size: 15px; } /* L'en-tête de l'aperçu : « Aperçu » et A4 / A5 sur une ligne, le lien « Ouvrir en grand » en dessous, sans se couper. */ .fi-apercu-tete { flex-wrap: wrap; row-gap: 6px; } .fi-apercu-tete #fi-grand { flex: 1 0 100%; } } .fi-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); gap: 16px; align-items: start; } .fi-form { min-width: 0; display: grid; gap: 10px; } .fi-apercu { position: sticky; top: 76px; display: grid; gap: 8px; min-width: 0; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; } .fi-ligne-haut { align-items: start !important; } .fi-apercu-tete { display: flex; align-items: center; gap: 10px; font-weight: 700; } .fi-apercu-tete > span { margin-right: auto; } .fi-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--survol); border: 1px solid var(--trait); } .fi-seg button { border: 0; background: transparent; padding: 4px 11px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 700; color: var(--encre2); cursor: pointer; } .fi-seg button.on { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .fi-cadre { position: relative; overflow: hidden; border-radius: 8px; background: #6F675D; box-shadow: 0 10px 30px rgba(40, 24, 12, .18); min-height: 200px; } .fi-cadre iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; pointer-events: none; } .fi-alerte { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: #FFF3D6; color: #7A4B00; font-size: 13px; } .fi-photo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .fi-photo-actuelle { width: 132px; height: 76px; border-radius: 10px; flex: none; background: var(--survol) center / cover; border: 1px solid var(--trait); display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--encre2); padding: 4px; } .fi-photo-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; } .fi-photo-btns .aide { flex-basis: 100%; margin: 0; } .fi-puce { border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 13px; cursor: pointer; } .fi-puce.on { background: var(--m); border-color: var(--m); color: #fff; } .fi-gal { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: thin; } .fi-gal-p { flex: none; width: 74px; height: 44px; border-radius: 8px; border: 2px solid transparent; background: center / cover; cursor: pointer; } .fi-gal-p.on { border-color: var(--m); box-shadow: 0 0 0 2px color-mix(in srgb, var(--m) 30%, transparent); } .fi-mois { display: flex; flex-wrap: wrap; gap: 5px; } .fi-coche { position: relative; cursor: pointer; } .fi-coche input { position: absolute; opacity: 0; pointer-events: none; } .fi-coche span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--trait); background: var(--blanc); font-size: 13px; font-weight: 600; color: var(--encre2); transition: background .12s; } .fi-coche input:checked + span { background: var(--m); border-color: var(--m); color: #fff; } .fi-coche input:focus-visible + span { outline: 2px solid var(--m); outline-offset: 2px; } .fi-liste { position: relative; display: grid; gap: 6px; } .fi-rang { display: grid; grid-template-columns: 26px var(--cols) 32px; gap: 6px; align-items: start; padding: 4px; border-radius: 10px; background: var(--blanc); } .fi-rang-tete { background: transparent; padding-top: 0; padding-bottom: 0; font-size: 11.5px; font-weight: 700; color: var(--encre2); text-transform: uppercase; letter-spacing: .05em; } .fi-rang input:not([type=checkbox]), .fi-rang textarea, .fi-rang select { width: 100%; min-width: 0; } .fi-rang textarea { min-height: 38px; resize: vertical; } .fi-rang .qb-poignee { height: 38px; } .fi-rang .qb-outil { height: 38px; } .fi-case { display: grid; place-items: center; height: 38px; } .fi-case input { width: 18px; height: 18px; } .fi-icone { display: flex; align-items: center; gap: 4px; min-width: 0; } .fi-icone-vue { display: grid; place-items: center; width: 26px; flex: none; color: var(--m); } .fi-icone select { font-size: 12px; padding: 4px 2px; } .fi-plus { justify-self: start; } .fi-liste-champ > label { margin-bottom: 4px; } @media (max-width: 1100px) { .fi-cols { grid-template-columns: 1fr; } .fi-apercu { position: static; order: -1; } .fi-cadre { max-width: 520px; } } @media (max-width: 640px) { .fi-rang { grid-template-columns: 26px 1fr 32px; } .fi-rang > :not(.qb-poignee):not(.qb-outil) { grid-column: 2; } .fi-rang > .qb-outil { grid-column: 3; grid-row: 1; } .fi-rang-tete { display: none; } } /* L'import */ .fi-import { display: grid; gap: 12px; } .fi-depot { display: grid; justify-items: center; gap: 4px; padding: 20px; border: 2px dashed var(--trait-fort, var(--trait)); border-radius: 14px; background: var(--survol); color: var(--encre2); cursor: pointer; text-align: center; } .fi-depot b { color: var(--encre); } .fi-depot.survol { border-color: #1C7ED6; background: color-mix(in srgb, #1C7ED6 8%, var(--blanc)); } .fi-import-carte { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--m) 40%, var(--trait)); background: color-mix(in srgb, var(--m) 7%, var(--blanc)); } .fi-import-carte > div { flex: 1; min-width: 180px; display: grid; gap: 2px; } .fi-import-carte small { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--m); } .fi-import-carte b { font-size: 16px; } .fi-import-carte span { font-size: 13px; color: var(--encre2); } /* La session ouverte */ .fi-s-liste { display: grid; gap: 6px; } .fi-s-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--survol); } .fi-s-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--blanc); color: var(--page, var(--action)); border: 1px solid var(--trait); } .fi-s-txt { flex: 1; min-width: 0; display: grid; } .fi-s-txt small { color: var(--encre2); font-size: 12.5px; } @media (max-width: 560px) { .fi-s-lib { display: none; } } /* 1.29.5 — Les couleurs des bulles de la barre du bas (téléphone), claires et sombres (comme OpsEventPro). */ .bb-c1 { --bbf: #E3F1E0; --bbt: #1F5A24; --bbm: #2E7D32; } .bb-c2 { --bbf: #E1EAFA; --bbt: #22408F; --bbm: #3E63C9; } .bb-c3 { --bbf: #FBEFD5; --bbt: #74470A; --bbm: #C47F12; } .bb-c4 { --bbf: #EEE6F8; --bbt: #57308F; --bbm: #8156C2; } .bb-c5 { --bbf: #FAE4EC; --bbt: #8C2350; --bbm: #C94A7D; } :root[data-theme="dark"] .bb-c1 { --bbf: #1C3320; --bbt: #A9DCAC; --bbm: #4FA556; } :root[data-theme="dark"] .bb-c2 { --bbf: #1B2744; --bbt: #AFC3F5; --bbm: #5B7FD9; } :root[data-theme="dark"] .bb-c3 { --bbf: #3A2C12; --bbt: #F5CD84; --bbm: #C98A22; } :root[data-theme="dark"] .bb-c4 { --bbf: #2C2140; --bbt: #CDB6F0; --bbm: #9270CF; } :root[data-theme="dark"] .bb-c5 { --bbf: #3A1A28; --bbt: #F4B0C9; --bbm: #CC5F8A; } @media (prefers-color-scheme: dark) { :root.theme-auto .bb-c1 { --bbf: #1C3320; --bbt: #A9DCAC; --bbm: #4FA556; } :root.theme-auto .bb-c2 { --bbf: #1B2744; --bbt: #AFC3F5; --bbm: #5B7FD9; } :root.theme-auto .bb-c3 { --bbf: #3A2C12; --bbt: #F5CD84; --bbm: #C98A22; } :root.theme-auto .bb-c4 { --bbf: #2C2140; --bbt: #CDB6F0; --bbm: #9270CF; } :root.theme-auto .bb-c5 { --bbf: #3A1A28; --bbt: #F4B0C9; --bbm: #CC5F8A; } } @media (prefers-reduced-motion: reduce) { .bb-bulle, .bb-lib { transition: none; } } @media print { .bb { display: none !important; } } /* ── 1.30.0 — Le module « Dossiers » : la liste en cartes, le dossier et sa frise d'étapes ── */ :root { --ds: #3E4FB5; --ds-pale: #E8EBFA; --ds-fonce: #2A357F; } :root[data-theme="dark"] { --ds: #8E9BF0; --ds-pale: #23284A; --ds-fonce: #C3CAF7; } @media (prefers-color-scheme: dark) { :root.theme-auto { --ds: #8E9BF0; --ds-pale: #23284A; --ds-fonce: #C3CAF7; } } .ds-accueil { background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--ds); border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; display: grid; gap: 12px; box-shadow: var(--ombre); } .ds-acc-tete { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .ds-acc-tete > div:first-child { min-width: 0; flex: 1 1 340px; } .ds-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ds); } .ds-accueil h2, .ds-tete h2 { margin: 6px 0; font-size: 23px; line-height: 1.2; color: var(--encre); text-wrap: balance; } .ds-accueil p { margin: 0; color: var(--encre2); max-width: 660px; font-size: 14.5px; } .ds-compteurs { display: flex; gap: 8px; flex-wrap: wrap; } .ds-compteurs button, .ds-tdb-chiffres button { font: inherit; cursor: pointer; text-align: left; background: var(--ds-pale); border: 1px solid transparent; border-radius: 14px; padding: 9px 14px; display: grid; min-width: 100px; color: var(--encre); } .ds-compteurs button:hover, .ds-tdb-chiffres button:hover { border-color: var(--ds); } .ds-compteurs b, .ds-tdb-chiffres b { font-size: 22px; line-height: 1.1; color: var(--ds-fonce); font-variant-numeric: tabular-nums; } .ds-compteurs span, .ds-tdb-chiffres span { font-size: 12.5px; color: var(--encre2); } .ds-c-ambre { background: var(--ambre-pale) !important; } .ds-c-ambre b { color: var(--ambre-texte) !important; } .ds-c-rouge { background: var(--rouge-pale) !important; } .ds-c-rouge b { color: var(--rouge-texte) !important; } .ds-phases { display: flex; flex-wrap: wrap; gap: 6px; } .ds-phases span { background: var(--gris-pale); color: var(--gris-texte); border-radius: 99px; padding: 3px 11px; font-size: 13px; } .ds-phases b { color: var(--encre); } .ds-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ds-cherche { flex: 1 1 180px; max-width: 280px; min-height: 40px; } .ds-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .ds-carte { font: inherit; text-align: left; cursor: pointer; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 14px 16px; display: grid; gap: 7px; color: var(--encre); box-shadow: var(--ombre); transition: transform .12s, border-color .12s; min-width: 0; } .ds-carte:hover { transform: translateY(-2px); border-color: var(--ds); } .ds-carte-calme { opacity: .78; } .ds-carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ds-carte-haut small { color: var(--encre3); font-weight: 700; letter-spacing: .04em; } .ds-carte-client { font-size: 16.5px; line-height: 1.25; } .ds-carte-titre { color: var(--encre2); font-size: 13.5px; line-height: 1.35; } .ds-carte-etape { display: flex; gap: 8px; align-items: center; background: var(--ds-pale); border-radius: 12px; padding: 7px 10px; font-weight: 600; font-size: 14px; color: var(--ds-fonce); } .ds-carte-etape > svg { flex-shrink: 0; } .ds-carte-etape small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); } .ds-carte-etape.ds-fini { background: var(--vert-pale); color: var(--vert-pastille-texte); } .ds-frise-mini { display: flex; gap: 3px; } .ds-frise-mini i { flex: 1; height: 6px; border-radius: 9px; background: var(--trait); } .ds-frise-mini i.f { background: var(--vert); } .ds-frise-mini i.x { background: var(--trait-fort); opacity: .5; } .ds-frise-mini i.c { background: var(--ds); } .ds-frise-mini i.a { background: #E39B1A; } .ds-frise-mini i.r { background: var(--rouge); } .ds-carte-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .ds-barre { flex: 1 1 90px; height: 7px; border-radius: 9px; background: var(--trait-leger); overflow: hidden; } .ds-barre i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--ds), var(--vert)); } .ds-barre-grande { height: 10px; max-width: 360px; } .ds-vide { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 16px; color: var(--encre2); } .ds-vide > svg { color: var(--ds); } /* Le dossier ouvert */ .ds-fil { margin-bottom: 8px; } .ds-tete { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px; box-shadow: var(--ombre); margin-bottom: 14px; } .ds-client { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; font-weight: 600; } .ds-client .lien-txt { font-weight: 700; } .ds-avance { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--encre2); } .ds-avance b { color: var(--encre); font-size: 16px; font-variant-numeric: tabular-nums; } .ds-tete-act { display: grid; gap: 10px; align-content: start; } .ds-espace { background: var(--ds-pale); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; } .ds-espace b { display: flex; align-items: center; gap: 6px; color: var(--ds-fonce); } .ds-espace small { color: var(--encre2); } .ds-espace-btns, .ds-tete-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .ds-phase { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ds); } .ds-phase:first-child { margin-top: 0; } .ds-parcours { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 16px 18px; box-shadow: var(--ombre); margin-bottom: 14px; } .ds-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; } .ds-etapes::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; border-left: 2px dashed var(--trait-fort); } .ds-etape { position: relative; border: 1px solid var(--trait-leger); border-radius: 14px; background: var(--blanc); } .ds-etape.ds-ouverte { border-color: var(--ds); box-shadow: 0 6px 20px -12px rgba(30, 40, 120, .45); } .ds-e-tete { font: inherit; color: inherit; width: 100%; background: none; border: 0; cursor: pointer; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 8px 10px 8px 0; text-align: left; min-height: 52px; } .ds-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--gris-pale); color: var(--gris-texte); border: 3px solid var(--blanc); position: relative; z-index: 1; font-variant-numeric: tabular-nums; } .ds-e-f .ds-num { background: var(--vert); color: #fff; } .ds-e-c .ds-num { background: var(--ds); color: #fff; box-shadow: 0 0 0 4px var(--ds-pale); } .ds-e-a .ds-num { background: #E39B1A; color: #fff; } .ds-e-r .ds-num { background: var(--rouge); color: #fff; } .ds-e-x .ds-num { opacity: .5; } .ds-e-x .ds-e-txt b { text-decoration: line-through; color: var(--encre3); } .ds-e-txt { display: grid; gap: 2px; min-width: 0; } .ds-e-txt b { font-size: 15px; line-height: 1.3; } .ds-e-txt small { color: var(--encre2); font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; } .ds-e-txt small svg { vertical-align: -2px; } .ds-sep { color: var(--encre3); margin: 0 2px; } .ds-e-etat { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .ds-chev { color: var(--encre3); transition: transform .15s; } .ds-ouverte .ds-chev { transform: rotate(180deg); } .ds-e-corps { padding: 4px 14px 14px 56px; display: grid; gap: 10px; } .ds-e-corps .champ { margin: 0; } .ds-lien-piece { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; background: var(--survol); border-radius: 12px; padding: 9px 12px; } .ds-lien-piece > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ds-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ds-ligne select { flex: 1 1 240px; min-width: 0; min-height: 40px; } .ds-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--trait-leger); padding-top: 10px; } .ds-actions-plus { margin-left: auto; display: flex; gap: 2px; align-items: center; flex-wrap: wrap; } .btn-icone-danger:hover { color: var(--rouge-txt); } .ds-echeance { max-width: 220px; } .ds-force { margin: 0; background: var(--ambre-fond); color: var(--ambre-texte); border-radius: 10px; padding: 7px 10px; font-size: 13.5px; } .ds-attente { margin: 0; background: var(--ambre-fond); color: var(--ambre-texte); border: 1px solid var(--ambre-trait); border-radius: 10px; padding: 8px 12px; } .ds-accepte { margin: 0; background: var(--vert-pale); color: var(--vert-pastille-texte); border-radius: 10px; padding: 8px 12px; } .ds-cr { background: var(--survol); border-radius: 10px; padding: 9px 12px; } .ds-cr p { margin: 4px 0 0; } .ds-fichiers, .ds-docs { display: grid; gap: 8px; } .ds-docs { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 16px 18px; box-shadow: var(--ombre); margin-bottom: 14px; } .ds-docs h3, .ds-notes h3 { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 16px; } .ds-fichiers ul, .ds-fichiers-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ds-fichiers li, .ds-fichiers-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border: 1px solid var(--trait-leger); border-radius: 10px; padding: 7px 10px; } .ds-fichiers li a, .ds-fichiers-liste li a { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; } .ds-fichiers li small, .ds-fichiers-liste li small { color: var(--encre2); flex: 1 1 160px; } .ds-depot { justify-self: start; cursor: pointer; } .ds-ajout { margin-top: 12px; } .ds-notes { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 16px 18px; } .ds-notes p { margin: 8px 0 0; color: var(--encre2); } .ds-tdb-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .ds-tdb-tete h3 { margin: 0; } .ds-tdb-chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } /* Paramètres → Dossiers */ .ds-parc-liste { display: grid; gap: 8px; } .ds-parc-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ds-parc { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; background: var(--blanc); } .ds-parc > div:first-child { min-width: 0; flex: 1 1 320px; display: grid; gap: 4px; } .ds-parc small { color: var(--encre2); line-height: 1.4; } .ds-parc-btns { display: flex; gap: 8px; align-items: center; } .ds-dp { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; } .ds-dp li { display: grid; grid-template-columns: 30px minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .9fr) auto 74px auto; gap: 6px; align-items: center; } .ds-dp .ds-num { width: 28px; height: 28px; font-size: 12px; border: 0; } .ds-dp input:not([type=checkbox]), .ds-dp select { min-height: 40px; min-width: 0; font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); } .ds-dp input:not([type=checkbox]):focus, .ds-dp select:focus { outline: none; border-color: var(--ds); box-shadow: 0 0 0 3px var(--ds-pale); } .ds-dp li:not(:last-child) { padding-bottom: 6px; border-bottom: 1px dashed var(--trait); } .ds-dp-btns { display: flex; } @media (max-width: 760px) { .ds-tete { grid-template-columns: 1fr; padding: 16px; } .ds-e-tete { grid-template-columns: 36px minmax(0, 1fr) 18px; } .ds-e-etat { grid-column: 2 / 3; grid-row: 2; justify-content: flex-start; } .ds-chev { grid-column: 3; grid-row: 1; } .ds-e-corps { padding: 4px 12px 14px 12px; } .ds-actions-plus { margin-left: 0; } .ds-parcours, .ds-docs { padding: 14px 12px; } .ds-cherche { max-width: none; } .ds-dp li { grid-template-columns: 28px minmax(0, 1fr) auto; } .ds-dp .ds-num { grid-row: 1; grid-column: 1; } .ds-dp .dp-phase { grid-row: 1; grid-column: 2 / 4; } .ds-dp .dp-lib { grid-row: 2; grid-column: 2 / 4; } .ds-dp .dp-type { grid-row: 3; grid-column: 2; } .ds-dp .case-petite { grid-row: 3; grid-column: 3; } .ds-dp .dp-hw { grid-row: 4; grid-column: 2; max-width: 120px; } .ds-dp-btns { grid-row: 4; grid-column: 3; justify-self: end; } } /* 1.31.0 — Dossiers : le temps passé. Le bouton du chrono à droite de chaque étape, le temps dans l'en-tête et sur les cartes, le bloc « Temps passé », et le bandeau flottant du chrono en cours (en bas, au centre ; au-dessus de la barre du téléphone). */ .ds-etape { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .ds-etape > .ds-e-corps { grid-column: 1 / -1; } .ds-chrono { margin-right: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); color: var(--ds); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; } button.ds-chrono:hover { background: var(--ds-pale); border-color: var(--ds); } button.ds-chrono:focus-visible { outline: 2px solid var(--ds); outline-offset: 2px; } .ds-chrono small { font-size: 12.5px; color: var(--encre2); font-weight: 600; } .ds-chrono-on { background: var(--rouge); border-color: var(--rouge); color: #fff; animation: ds-pouls 2s ease-in-out infinite; } .ds-chrono-on:hover { filter: brightness(.95); background: var(--rouge) !important; } .ds-chrono-on b { font-size: 13.5px; } .ds-chrono-total { cursor: default; border-style: dashed; color: var(--encre2); } .ds-chrono-discret { width: 36px; padding: 0; justify-content: center; color: var(--encre3); border-color: var(--trait-leger); } .ds-chrono-on svg rect, .ds-pil-stop svg rect, .btn-chrono-on svg rect { fill: currentColor; } .ds-chrono-vide { width: 0; padding: 0; border: 0; margin: 0; min-height: 0; } @keyframes ds-pouls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rouge) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rouge) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .ds-chrono-on, .ds-pil-point { animation: none !important; } } .ds-tete-temps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 14px; color: var(--encre2); } .ds-tete-temps > svg { color: var(--ds); } .ds-tete-temps b { color: var(--encre); font-variant-numeric: tabular-nums; } .btn-chrono-on { background: var(--rouge); border-color: var(--rouge); color: #fff; font-variant-numeric: tabular-nums; } .btn-chrono-on b { color: #fff !important; } .ds-carte-temps { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--encre2); font-weight: 600; font-variant-numeric: tabular-nums; } .ds-carte-temps.ds-tourne { color: var(--rouge); } .ds-temps { background: var(--blanc); border: 1px solid var(--trait-leger); border-radius: 18px; padding: 18px 20px; display: grid; gap: 14px; margin-top: 14px; } .ds-temps-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .ds-temps-tete h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; } .ds-temps-tete h3 svg { color: var(--ds); } .ds-temps-total { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ds-fonce); } .ds-temps-btns { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; } .ds-temps-repart { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; } .ds-temps-repart > div { display: grid; gap: 6px; min-width: 0; } .ds-temps-repart small { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre3); } .ds-tb { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; } .ds-tb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-tb i { height: 8px; border-radius: 99px; background: var(--gris-pale); overflow: hidden; } .ds-tb i b { display: block; height: 100%; border-radius: inherit; background: var(--ds); } .ds-tb em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; } .ds-temps-cadre { overflow-x: auto; } .ds-temps-table { width: 100%; } .ds-temps-table td.num, .ds-temps-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .ds-temps-table tr.ds-tourne td { background: color-mix(in srgb, var(--rouge) 7%, var(--blanc)); } .ds-temps-act { white-space: nowrap; text-align: right; } .ds-pilule { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 6px; background: var(--ardoise, #2C2F3E); color: #fff; border-radius: 999px; box-shadow: 0 10px 28px -8px rgba(20, 24, 40, .55); max-width: calc(100vw - 32px); } .ds-pil-txt { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 10px 0 6px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 999px; } .ds-pil-txt b { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .ds-pil-txt small { font-size: 12.5px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; } .ds-pil-point { width: 10px; height: 10px; border-radius: 50%; background: #F97066; flex: none; animation: ds-clign 1.4s ease-in-out infinite; } @keyframes ds-clign { 50% { opacity: .35; } } .ds-pil-stop { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--rouge); color: #fff; cursor: pointer; flex: none; } .ds-pil-stop:hover { filter: brightness(1.08); } .ds-pil-txt:focus-visible, .ds-pil-stop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ds-pil-long .ds-pil-point { background: #FDB022; } body.avec-bb .ds-pilule { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 760px) { .ds-chrono { margin-right: 8px; padding: 0 10px 0 8px; } .ds-chrono:not(.ds-chrono-on) small { display: none; } .ds-temps { padding: 14px 12px; } .ds-temps-btns { margin-left: 0; width: 100%; } .ds-tb { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; } .ds-pil-txt small { max-width: 18ch; } } /* L'éditeur du parcours : les heures prévues, avec leur unité. */ .dp-hw { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--encre2); font-weight: 600; } .dp-hw input { width: 100%; text-align: right; } /* 1.32.0 — Dossiers : les sous-tâches chronométrées d'une étape, les heures prévues et les jauges passé / prévu. */ .ds-sts { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--survol); } .ds-sts-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .ds-sts-tete > b { display: flex; align-items: center; gap: 6px; font-size: 14px; } .ds-sts-tete > b svg { color: var(--ds); } .ds-sts-tete small { font-weight: 600; color: var(--encre3); } .ds-st-total { font-size: 13px; color: var(--encre2); font-weight: 600; } .ds-prevu { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--encre2); } .ds-prevu input { width: 64px; min-height: 34px; padding: 4px 8px; font: inherit; font-size: 14px; text-align: right; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); } .ds-st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ds-st { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; background: var(--blanc); border: 1px solid var(--trait-leger); border-radius: 10px; padding: 4px 6px 4px 8px; min-height: 46px; } .ds-st .ds-chrono { margin-right: 0; } .ds-st-case input { width: 20px; height: 20px; accent-color: var(--ds); } .ds-st-lib { min-width: 0; display: grid; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .ds-st-lib small { font-weight: 400; font-size: 12px; color: var(--encre3); } .ds-st-fait .ds-st-lib { color: var(--encre3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--encre3) 60%, transparent); } .ds-st-fait .ds-st-lib small { text-decoration: none; } .ds-st-on { border-color: var(--rouge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rouge) 14%, transparent); } .ds-st-temps { font-size: 13px; font-weight: 700; color: var(--encre2); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; } .ds-st-act { display: flex; gap: 2px; } .ds-st-ajout { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ds-st-ajout input { flex: 1 1 220px; min-width: 0; min-height: 38px; padding: 6px 10px; font: inherit; font-size: 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); color: var(--encre); } .ds-st-fil { color: var(--encre3); font-size: 12.5px; } .ds-jauge { display: inline-grid; grid-template-columns: auto minmax(60px, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; min-width: 0; } .ds-jauge:not(:has(> span)) { grid-template-columns: minmax(60px, 140px) auto; } .ds-jauge > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-jauge i { height: 8px; border-radius: 99px; background: var(--gris-pale); overflow: hidden; } .ds-jauge i b { display: block; height: 100%; border-radius: inherit; background: var(--vert); } .ds-jauge em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-jauge.ds-depasse i b { background: var(--rouge); } .ds-jauge.ds-depasse em { color: var(--rouge-txt); } .ds-temps-repart .ds-jauge { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; } .ds-chrono.ds-depasse small { color: var(--rouge-txt); } @media (max-width: 760px) { .ds-st { grid-template-columns: 26px minmax(0, 1fr) auto; } .ds-st-act { grid-column: 2 / -1; justify-content: flex-end; } .ds-prevu { margin-left: 0; } .ds-temps-repart .ds-jauge { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; } } @media print { .ds-chrono, .ds-pilule, .ds-temps-btns, .ds-temps-act { display: none !important; } } @media print { .ds-actions, .ds-espace, .ds-tete-btns, .ds-ajout, .ds-depot { display: none !important; } } /* 1.33.0 — Paramètres → Utilisateurs : le crayon du super-administrateur pour corriger le nom affiché. */ .nom-modif { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 2px; vertical-align: middle; border: 0; border-radius: 8px; background: transparent; color: var(--encre3, #98A2B3); cursor: pointer; } .nom-modif:hover, .nom-modif:focus-visible { background: var(--gris-pale); color: var(--encre); } /* 1.34.0 — Ateliers : l'accueil du jour J (billets scannés, verdict, recherche, pointage). */ .at-acc2 { display: grid; gap: 14px; max-width: 760px; } .at-acc2-tete { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 16px 18px; } .at-acc2-titre { min-width: 0; flex: 1 1 240px; } .at-acc2-titre h2 { margin: 2px 0; font-size: 22px; text-wrap: balance; } .at-acc2-titre p { margin: 0; color: var(--encre2); } .at-acc2-compteur { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; text-align: right; } .at-acc2-compteur b { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--t, var(--encre)); } .at-acc2-compteur small { font-size: 18px; color: var(--encre2); font-variant-numeric: tabular-nums; } .at-acc2-compteur span { grid-column: 1 / -1; font-size: 13px; color: var(--encre2); } .at-acc2-scan { min-height: 58px; font-size: 18px; justify-content: center; border-radius: 16px; } .at-verdict { display: flex; gap: 14px; align-items: flex-start; border-radius: 18px; padding: 16px 18px; border: 2px solid; } .at-verdict-vert { background: var(--vert-pale); border-color: var(--vert-trait); color: var(--vert-pastille-texte); } .at-verdict-orange { background: var(--ambre-pale); border-color: var(--ambre-trait); color: var(--ambre-texte); } .at-verdict-rouge { background: var(--rouge-pale); border-color: var(--rouge-trait); color: var(--rouge-texte); } .at-verdict-ico { flex: 0 0 auto; display: inline-flex; } .at-verdict-txt { display: grid; gap: 4px; min-width: 0; } .at-verdict-txt b { font-size: 20px; } .at-verdict-txt span { color: var(--encre); } .at-verdict-txt small { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; } .at-verdict-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .at-verdict-corr { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--encre); font-size: 14px; } .at-verdict-corr button { min-width: 40px; min-height: 40px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--blanc); color: var(--encre); font: inherit; font-weight: 700; cursor: pointer; } .at-verdict-corr button.actif { background: var(--vert-pastille); color: var(--vert-pastille-texte); border-color: var(--vert-trait); } .at-acc2-cherche { position: relative; } .at-acc2-cherche > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--encre3); display: inline-flex; } .at-acc2-cherche input { width: 100%; min-height: 46px; padding-left: 38px; border-radius: 12px; } .at-acc2-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .at-acc2-liste li { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; } .at-acc2-liste li.at-acc2-ok { border-color: var(--vert-trait); background: color-mix(in srgb, var(--vert-pale) 55%, var(--blanc)); } .at-acc2-liste li.at-acc2-part { border-color: var(--ambre-trait); } .at-acc2-liste li.at-acc2-vide { justify-content: center; color: var(--encre2); } .at-acc2-qui { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; } .at-acc2-qui small { color: var(--encre2); } .at-acc2-rem { display: inline-flex; gap: 5px; align-items: center; color: var(--ambre-texte) !important; font-weight: 600; } .at-acc2-etat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .at-acc2-pas { display: inline-flex; align-items: center; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; } .at-acc2-pas button { min-width: 40px; min-height: 38px; border: 0; background: var(--blanc); color: var(--encre); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; } .at-acc2-pas button:disabled { color: var(--encre3); cursor: default; } .at-acc2-pas b { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; } /* 1.34.2 — Ateliers : chaque carte (catalogue, sessions) bien détachée de la suivante : un contour à la couleur du thème de l'atelier, un fond très légèrement teinté et une ombre douce. */ .at-cat-carte, .at-s-carte { border: 1.5px solid color-mix(in srgb, var(--t, var(--encre2)) 38%, var(--trait)); background: color-mix(in srgb, var(--t, var(--encre2)) 5%, var(--blanc)); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06); } .at-cat-visuel, .at-s-visuel { border-bottom: 1px solid color-mix(in srgb, var(--t, var(--encre2)) 25%, var(--trait)); } .at-cat-grille, .at-sessions { gap: 18px; } @media (max-width: 700px) { .at-cat-grille, .at-sessions { gap: 20px; } } /* 1.35.0 — Ateliers : les types (Cuisine, Pâtisserie, Plantes et jardin) et le dessin d'un thème sans photo. */ .at-types { display: flex; flex-wrap: wrap; gap: 8px; } .at-type-choix input { position: absolute; opacity: 0; pointer-events: none; } .at-type-choix > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--blanc); font-size: 14px; font-weight: 600; cursor: pointer; } .at-type-choix input:checked + span { border-color: var(--action); background: color-mix(in srgb, var(--action) 10%, var(--blanc)); color: var(--encre); } .at-type-choix input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; } .at-types-param { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } /* 1.35.1 — Paramètres → Ateliers : une carte par type, avec une vraie case à cocher (comme les choix d'encaissement). */ .at-types-param { gap: 10px; } .at-type-large { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc); cursor: pointer; } .at-type-large:hover { border-color: color-mix(in srgb, var(--action) 45%, var(--trait)); } .at-type-large:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 8%, var(--blanc)); } .at-type-large input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--action); cursor: pointer; } .at-type-large > span { display: grid; gap: 4px; min-width: 0; } .at-type-large > span b { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--encre); } .at-type-large > span small { font-weight: 400; color: var(--encre2); font-size: 12.5px; line-height: 1.4; } .at-carte-dessin { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--t); background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--t) 16%, var(--blanc)), color-mix(in srgb, var(--t) 6%, var(--blanc)) 70%); } .at-carte-dessin::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--t) 26%, transparent); border-radius: 6px; pointer-events: none; } .at-carte-dessin .at-dessin { position: static; width: 56px; height: 56px; transform: none; opacity: .9; } .at-carte-dessin small { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 0 14px; } .at-cat-visuel:has(.at-carte-dessin) .at-cat-theme, .at-s-visuel:has(.at-carte-dessin) .at-theme-s { display: none; } #fa-gal-theme { display: grid; place-items: center; color: var(--t); background-color: color-mix(in srgb, var(--t) 10%, var(--blanc)); } #fa-gal-theme .at-dessin { position: static; width: 34px; height: 34px; transform: none; } .at-filtre-types .filtre { display: inline-flex; align-items: center; gap: 5px; } .at-param .prm-bloc h3 { flex-wrap: nowrap; } .at-param .prm-bloc h3 svg { flex: none; } /* ══ 1.36.0 — La fiche d'un atelier « Plantes et jardin » : les plantes, « À prévoir », le tarif de groupe ══ */ .at-plantes-tete, .at-plante { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, .9fr) 34px; gap: 8px; align-items: center; } .at-plantes-tete { font-size: 12.5px; font-weight: 700; color: var(--encre2); margin-bottom: 4px; } .at-plantes-tete small { font-weight: 400; } .at-plantes { display: grid; gap: 8px; margin-bottom: 10px; } .at-plante input { min-width: 0; } .at-plante .pl-latin { font-style: italic; } .at-plante .btn-icone { width: 34px; height: 34px; } @media (max-width: 640px) { .at-plantes-tete { display: none; } .at-plante { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; padding: 8px; border: 1px solid var(--trait); border-radius: 10px; } .at-plante .pl-nom { grid-column: 1 / 3; } .at-plante .btn-icone { grid-column: 3; grid-row: 1; } .at-plante .pl-latin, .at-plante .pl-partie { grid-column: 1 / -1; } } .at-prevoir { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .at-prevoir-b { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1.5px dashed var(--trait); background: var(--blanc); color: var(--encre2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .at-prevoir-b:hover { border-color: var(--action); color: var(--encre); } .at-prevoir-b.on { border-style: solid; border-color: var(--action); background: color-mix(in srgb, var(--action) 10%, var(--blanc)); color: var(--encre); } .at-groupe-tarif { display: grid; gap: 8px; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--trait); background: var(--survol); } .at-groupe-tarif .lib-groupe { display: inline-flex; align-items: center; gap: 6px; } .at-groupe-tarif .champ-ligne { margin: 0; } .at-i-groupe { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--action) 12%, var(--blanc)); color: var(--encre); font-size: 12px; font-weight: 700; } .at-i-prec { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: #FFF4D6; color: #7A4B00; font-size: 13px; font-weight: 600; } :root[data-theme="dark"] .at-i-prec { background: #3A2E12; color: #FFD98A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .at-i-prec { background: #3A2E12; color: #FFD98A; } } .champ.at-plantes { margin-bottom: 10px; } /* L'accès d'assistance de l'éditeur (Paramètres → Équipe) */ .assist-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 4px; } .assist-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .assist-commandes select { width: auto; min-width: 120px; } h3.sous-titre { font-size: 13px; font-weight: 700; margin: 18px 0 8px; } .assist-commandes select { min-height: 38px; } /* 1.40.0 — Le statut : entreprise ou association loi 1901 */ .champ .lbl { font-weight: 600; font-size: 13px; } .sj-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sj-c { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); cursor: pointer; font-weight: 400 !important; } .sj-c:has(input:checked) { border-color: var(--trait-fort, var(--trait)); background: var(--survol); } .sj-c input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--action); flex: none; } .sj-c span { display: flex; flex-direction: column; min-width: 0; } .sj-c b { font-size: 14px; } .sj-c small { color: var(--encre2); font-size: 12.5px; } @media (max-width: 560px) { .sj-choix { grid-template-columns: minmax(0, 1fr); } } /* ── 1.41.0 — Le module « Association » (modules/association/association.js) ─────────────── */ :root { --as: #1F7A55; --as-pale: #E3F2EA; --as-fonce: #145239; } :root[data-theme="dark"] { --as: #5CC495; --as-pale: #173327; --as-fonce: #A8E5C8; } @media (prefers-color-scheme: dark) { :root.theme-auto { --as: #5CC495; --as-pale: #173327; --as-fonce: #A8E5C8; } } .as-accueil, .as-fiche { background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--as); border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; display: grid; gap: 12px; box-shadow: var(--ombre); } .as-acc-tete { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .as-acc-tete > div:first-child { min-width: 0; flex: 1 1 340px; } .as-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--as); } .as-accueil h2, .as-fiche h2 { margin: 6px 0; font-size: 23px; line-height: 1.2; color: var(--encre); text-wrap: balance; } .as-accueil p { margin: 0; color: var(--encre2); max-width: 660px; font-size: 14.5px; } .as-compteurs { display: flex; gap: 8px; flex-wrap: wrap; } .as-compteurs button { font: inherit; cursor: pointer; text-align: left; background: var(--as-pale); border: 1px solid transparent; border-radius: 14px; padding: 9px 14px; display: grid; min-width: 100px; color: var(--encre); } .as-compteurs button:disabled { cursor: default; } .as-compteurs button:not(:disabled):hover, .as-compteurs button.actif { border-color: var(--as); } .as-compteurs b { font-size: 21px; line-height: 1.15; color: var(--as-fonce); font-variant-numeric: tabular-nums; } .as-compteurs span { font-size: 12.5px; color: var(--encre2); } .as-compteurs .as-c-ambre { background: var(--ambre-fond); } .as-compteurs .as-c-ambre b { color: var(--ambre-texte); } .as-modes { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--encre2); } .as-modes b { color: var(--encre); font-variant-numeric: tabular-nums; } .as-outils { flex-wrap: wrap; gap: 8px; } .as-outils select { min-height: 40px; font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); max-width: 100%; } .as-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; } .as-bandeau { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; background: var(--as-pale); color: var(--encre); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-size: 14px; } .as-bandeau svg { color: var(--as); flex: none; } .as-bandeau.as-alerte { background: var(--ambre-fond); color: var(--ambre-texte); } .as-bandeau.as-alerte svg { color: var(--ambre-texte); } .as-envoi span { flex: 1 1 260px; min-width: 0; display: inline-flex; gap: 8px; align-items: center; } .as-table .as-ligne { cursor: pointer; } .as-table .as-ligne:hover td { background: var(--survol); } .as-coche { width: 34px; } .as-coche input { width: 18px; height: 18px; accent-color: var(--as); } .as-cot b { font-variant-numeric: tabular-nums; } .as-compte { margin: 8px 2px; } .as-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 18px; } .as-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .as-coord { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; } .as-coord dt { color: var(--encre2); font-weight: 600; } .as-coord dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .as-fiche-act { display: grid; gap: 10px; align-content: start; } .as-du { background: var(--as-pale); border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; } .as-du small { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--as); } .as-du b { font-size: 18px; color: var(--encre); display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; } .as-du .as-ok { color: var(--as-fonce); } .as-fiche-btns { display: flex; flex-wrap: wrap; gap: 6px; } .as-lien { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; } .as-imp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .as-imp-cols label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; } .as-imp-cols label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-imp-cols select { width: 100%; min-width: 0; font: inherit; font-weight: 400; min-height: 36px; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); } .as-imp-lignes { max-height: 320px; overflow: auto; } .as-imp-err td { background: var(--rouge-fond); } .as-tarifs input.as-m { width: 110px; text-align: right; font: inherit; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); } .as-tarifs input.as-l { width: 18px; height: 18px; accent-color: var(--as); } .as-civ { flex: 0 0 96px; } .as-tdb-chiffres { margin: 10px 0; } @media (max-width: 760px) { .as-fiche { grid-template-columns: 1fr; padding: 16px; } .liste-outils.as-outils { display: flex; flex-wrap: wrap; gap: 8px; } .liste-outils.as-outils > * { min-width: 0; } .liste-outils.as-outils .recherche, .liste-outils.as-outils select { flex: 1 1 100%; width: 100%; max-width: none; } .as-btns { margin-left: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .as-btns .btn { justify-content: center; min-width: 0; white-space: normal; text-align: center; } .as-accueil { padding: 16px; } } /* 1.42.0 — Le formulaire d'adhésion en ligne (adhesion.php?n=…, page simple). */ .ps-form select, .ps-form textarea { font: inherit; font-weight: 400; min-height: 44px; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); } .ps-form textarea { min-height: 64px; resize: vertical; } .ps-form select:focus, .ps-form textarea:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .ps-form .ps-case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: var(--encre2); } .ps-form .ps-case input { min-height: 0; width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--action); } .ps-cats { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .ps-cats legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; } .ps-form .ps-choix-cat { display: flex; gap: 10px; align-items: center; border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 400; } .ps-choix-cat:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); } .ps-form .ps-choix-cat input { min-height: 0; width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--action); } .ps-choix-cat span { display: flex; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; } .ps-choix-cat small { color: var(--encre2); font-variant-numeric: tabular-nums; } .ps-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; } .ps-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .as-lien-adh { margin: 4px 0 8px; } .as-lien-adh .as-url { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-family: ui-monospace, monospace; } .as-mention { font-size: 13.5px; color: var(--encre2); } .as-mention summary { cursor: pointer; font-weight: 600; color: var(--encre); } .as-envois { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; } .ps-deux label { min-width: 0; } .ps-deux input { width: 100%; min-width: 0; box-sizing: border-box; } .ps-rep { display: grid; gap: 14px; padding: 12px; border-radius: 10px; background: var(--survol); } /* 1.43.0 — Association : foyer, mineur, bénévolat, assemblée générale, images du reçu. */ .as-foyer { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; } .as-foyer li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px; } .as-foyer li.as-tit { border-color: var(--as); } .as-rep { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--survol); } .as-bv-grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; } .as-odj { margin: 6px 0 0; padding-left: 20px; color: var(--encre2); font-size: 14px; display: grid; gap: 2px; } .as-du-ko { background: var(--ambre-fond); } .as-pres select { font: inherit; font-size: 14px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); max-width: 220px; } .as-pres input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--as); } .as-resolutions { display: grid; gap: 10px; margin-bottom: 12px; } .as-reso { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; display: grid; gap: 8px; } .as-reso input, .as-reso textarea, .as-reso select { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); min-width: 0; } .as-reso .as-r-titre { font-weight: 700; } .as-r-votes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--encre2); } .as-r-votes label { display: inline-flex; gap: 6px; align-items: center; } .as-r-votes input { width: 76px; } .as-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .as-img { display: grid; gap: 6px; justify-items: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; } .as-img img { max-height: 70px; max-width: 100%; background: #fff; border-radius: 6px; } .as-img label.btn { cursor: pointer; } @media (max-width: 760px) { .as-bv-grille { grid-template-columns: 1fr; } } /* ── 1.43.1 — Association au téléphone : cartes compactes, actions repliées, pointage de l'assemblée au pouce ── */ .as-mobile { display: none; } .as-plus-bascule { display: none; } .as-btns-plus { display: contents; } .as-cartes-mob { gap: 8px; margin-bottom: 10px; } .as-cm { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 11px 13px; cursor: pointer; min-width: 0; } .as-cm:active { background: var(--survol); } .as-cm > input[type=checkbox] { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--as); } .as-cm-corps { display: grid; gap: 3px; min-width: 0; flex: 1; } .as-cm-l1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; } .as-cm-l1 > b, .as-cm-l1 > .lien-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; } .as-cm-l1 .pastille { flex: none; } .as-cm-m { font-variant-numeric: tabular-nums; flex: none; } .as-cm-l2 { font-size: 13px; color: var(--encre2); overflow-wrap: anywhere; } .as-cm-l3 { font-size: 13px; color: var(--encre2); } .as-cm-l3 b { color: var(--encre); } .as-cm-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .as-cm-cot { cursor: default; } .as-cm-ann { opacity: .75; } .as-lignes-mob { gap: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; margin-bottom: 10px; } .as-lm { display: flex; align-items: center; gap: 10px; padding: 10px 13px; min-height: 48px; } .as-lm + .as-lm { border-top: 1px solid var(--trait-leger); } .as-lm > span { display: grid; flex: 1; min-width: 0; } .as-lm > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-lm small { color: var(--encre2); font-size: 12.5px; } .as-lm > b { font-variant-numeric: tabular-nums; flex: none; } .as-lm[role=button] { cursor: pointer; } .as-pm-bilan { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--as-pale); color: var(--encre); border-radius: 12px; padding: 9px 13px; margin: 0 0 8px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } .as-pm-cherche { width: 100%; margin-bottom: 8px; } .as-pm-liste { gap: 8px; margin-bottom: 12px; } .as-pm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; } .as-pm.present { border-color: var(--as); background: color-mix(in srgb, var(--as-pale) 55%, var(--blanc)); } .as-pm-txt { display: grid; min-width: 0; } .as-pm-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-pm-txt small { color: var(--encre2); font-size: 12.5px; } .as-pm-porte { color: var(--as-fonce) !important; font-weight: 600; } .as-pm-btn { font: inherit; font-weight: 700; font-size: 14px; min-height: 44px; min-width: 104px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--trait-fort, var(--trait)); background: var(--blanc); color: var(--encre2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } .as-pm-btn[aria-pressed=true] { background: var(--as); border-color: var(--as); color: #fff; } :root[data-theme="dark"] .as-pm-btn[aria-pressed=true] { color: #0E1A14; } .as-pm-pouv { grid-column: 1 / -1; font: inherit; font-size: 16px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); color: var(--encre); width: 100%; } @media (max-width: 760px) { .as-mobile { display: grid; } .as-bureau { display: none; } .as-plus-bascule { display: inline-flex; justify-content: center; } .as-btns-plus { display: none; } .as-outils.ouvert .as-btns-plus { display: contents; } .as-btns .btn { min-height: 44px; } /* Les filtres sur une ligne qui défile, au lieu de deux ou trois lignes de boutons. */ .liste-outils.as-outils .filtres { flex: 1 1 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; min-width: 0; max-width: 100%; } .liste-outils.as-outils .filtres::-webkit-scrollbar { display: none; } .liste-outils.as-outils .filtre { flex: none; white-space: nowrap; } /* Pas de zoom automatique de l'iPhone dans les champs : 16 px au moins. */ .as-outils select, .as-outils .recherche, .as-reso input, .as-reso textarea, .as-reso select, .as-tarifs input.as-m, .as-pm-cherche { font-size: 16px; } /* L'en-tête des écrans, plus court : le texte d'explication s'efface, les chiffres restent. */ .as-accueil > .as-acc-tete > div:first-child > p { display: none; } .as-accueil h2 { font-size: 20px; margin: 2px 0 0; } .as-accueil { gap: 10px; padding: 14px; } .as-compteurs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; width: 100%; } .as-compteurs button { min-width: 0; padding: 8px 11px; } .as-compteurs b { font-size: 19px; } /* La fiche : les intitulés au-dessus des valeurs. */ .as-fiche { padding: 14px; gap: 12px; } .as-fiche h2 { font-size: 21px; } .as-coord { grid-template-columns: minmax(0, 1fr); gap: 0; } .as-coord dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; } .as-fiche-btns .btn { flex: 1 1 calc(50% - 6px); justify-content: center; min-height: 44px; } .as-foyer li { padding: 10px 12px; } .as-r-votes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .as-r-votes label { display: grid; gap: 3px; } .as-r-votes input { width: 100%; min-height: 42px; } .as-r-votes label:nth-child(4) { grid-column: 1 / -1; } .as-r-votes label:nth-child(4) select { width: 100%; min-height: 42px; } .as-odj { font-size: 13.5px; } } @media (max-width: 760px) { .as-btns > :only-child { grid-column: 1 / -1; } } /* ── 1.43.2 — Paramètres → Association : les marges des autres onglets, catégories et tarifs en lignes ── */ .as-param { display: grid; gap: 16px; min-width: 0; } .as-param .prm-form { min-width: 0; } .as-p-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; } .as-p-tete > div { flex: 1 1 260px; min-width: 0; } .as-param .champ.as-court input { max-width: 220px; } .as-param .as-alerte { margin: 0; } .as-param .as-aide-ico { display: flex; gap: 6px; align-items: flex-start; } .as-param .as-aide-ico svg { flex: none; margin-top: 2px; } .as-param .as-lien-adh { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--gris-pale); } .as-param .as-lien-adh .as-url { font-size: 13px; overflow-wrap: anywhere; } .as-lien-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .as-param .as-imgs { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); } .as-param .as-img { justify-items: stretch; } .as-img-cadre { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 6px; border: 1px dashed var(--trait-fort); border-radius: 8px; background: #fff; } .as-img-cadre .discret { color: #6b7280; font-size: 13px; } .as-img-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .as-cats { display: grid; } .as-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 22px; border: 0; border-bottom: 1px solid var(--trait-leger); background: none; color: var(--encre); font: inherit; text-align: left; cursor: pointer; } .as-cat:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; } .as-cat:hover { background: var(--survol); } .as-cat:focus-visible { outline: 3px solid var(--vert); outline-offset: -3px; } .as-cat-nom { display: grid; gap: 2px; min-width: 0; } .as-cat-nom b { overflow-wrap: anywhere; } .as-cat-nom small, .as-cat-prix small { color: var(--encre2); font-size: 13px; } .as-cat-prix { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; } .as-cat-ico { display: inline-flex; color: var(--encre3); } .as-cats > .aide { padding: 14px 22px; } .as-p-saison { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .as-p-saison select { flex: 0 1 220px; min-width: 0; } .as-param .as-tarifs { display: grid; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; } .as-tarif { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 8px 14px; border-bottom: 1px solid var(--trait-leger); } .as-tarif:last-child { border-bottom: 0; } .as-tarif-nom { display: grid; gap: 2px; min-width: 0; } .as-tarif-nom b { overflow-wrap: anywhere; } .as-tarif-nom small { color: var(--encre2); font-size: 12.5px; } .as-tarif-val { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; } .as-euro { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .as-param .as-tarifs input.as-m { width: 96px; min-height: 40px; font-variant-numeric: tabular-nums; } .as-libre { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--encre2); font-size: 13.5px; white-space: nowrap; cursor: pointer; } .as-libre input { width: 18px; height: 18px; accent-color: var(--as); } @media (max-width: 760px) { .as-param { gap: 12px; } .as-p-tete .btn, .as-p-saison .btn { flex: 1 1 100%; justify-content: center; } .as-p-saison select { flex: 1 1 100%; font-size: 16px; } .as-param .champ.as-court input { max-width: none; } .as-cat { padding: 10px 14px; gap: 10px; } .as-cats > .aide { padding: 12px 14px; } .as-tarif { padding: 8px 12px; } .as-tarif-val { flex-direction: column; align-items: flex-end; gap: 0; } .as-libre { min-height: 34px; } .as-lien-btns .btn { flex: 1 1 auto; justify-content: center; } } @media (max-width: 900px) { /* 1.43.2 — la bande des rubriques se colle juste sous la barre du haut (hauteur mesurée), sans jour entre les deux. */ .prm-nav { top: var(--haut-barre, 56px); } } @media (max-width: 760px) { /* Au téléphone, la barre du haut est opaque : le texte qui défile ne se lit plus au travers. */ .topbar { background: var(--blanc); } } @media (max-width: 700px) { .fi-barre { top: var(--haut-barre, 56px); } } .as-p-saison select { min-height: 42px; padding: 8px 11px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); font: inherit; } .as-p-saison select:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } /* 1.43.2 — Au téléphone, la barre « Modifications non enregistrées / Enregistrer » des Paramètres reste au-dessus de la barre du bas. */ body.avec-bb .prm-pied.actif { bottom: var(--haut-bb, 0px); } @media (max-width: 760px) { .as-param .as-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .as-param .as-img { padding: 10px; } .as-img-cadre { min-height: 64px; } .as-img-btns .btn { flex: 1 1 100%; justify-content: center; } } /* ── 1.43.3 — Paramètres → Association : en-tête qui résume, pastilles de couleur, aperçu du reçu, code QR ── */ :root { --as-c1: #2563EB; --as-c2: #B45309; --as-c3: #0F7B5A; --as-c4: #C2410C; --as-c5: #7C3AED; --as-c6: #BE185D; } :root[data-theme="dark"] { --as-c1: #7FA8F5; --as-c2: #F0B35A; --as-c3: #5CC495; --as-c4: #F59A6B; --as-c5: #B79BF7; --as-c6: #F08DBB; } @media (prefers-color-scheme: dark) { :root.theme-auto { --as-c1: #7FA8F5; --as-c2: #F0B35A; --as-c3: #5CC495; --as-c4: #F59A6B; --as-c5: #B79BF7; --as-c6: #F08DBB; } } .as-param { max-width: 1100px; } .as-hc-1, .as-av-1 { --c: var(--as-c1); } .as-hc-2, .as-av-2 { --c: var(--as-c2); } .as-hc-3, .as-av-3 { --c: var(--as-c3); } .as-hc-4, .as-av-4 { --c: var(--as-c4); } .as-hc-5, .as-av-5 { --c: var(--as-c5); } .as-hc-6, .as-av-6 { --c: var(--as-c6); } .as-h-ico { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); transform: rotate(-4deg); transition: transform .2s; } .prm-bloc:hover .as-h-ico, .as-etat:hover .as-h-ico { transform: rotate(0) scale(1.06); } .as-param .prm-bloc h3 { gap: 10px; } .as-param .prm-tete h2 { display: flex; align-items: center; gap: 10px; } .as-p-bloc { scroll-margin-top: calc(var(--haut-barre, 56px) + 70px); } #as-p-cats, #as-p-tarifs { scroll-margin-top: calc(var(--haut-barre, 56px) + 70px); } @keyframes as-eclat { 0% { box-shadow: inset 4px 0 0 var(--as); background: var(--as-pale); } 100% { box-shadow: inset 4px 0 0 transparent; background: transparent; } } .as-p-eclat { animation: as-eclat 1.6s ease-out; } @media (prefers-reduced-motion: reduce) { .as-p-eclat { animation: none; } .as-h-ico { transition: none; } } /* L'en-tête : le titre et six tuiles d'état, chacune mène à son réglage. */ .as-p-hero { display: grid; gap: 14px; padding: 20px 22px 18px; border-bottom: 1px solid var(--trait); border-radius: 12px 12px 0 0; background: linear-gradient(135deg, var(--as-pale), transparent 70%); } .as-p-hero h2 { margin: 4px 0 4px; font-size: 22px; color: var(--encre); } .as-p-hero p { margin: 0; max-width: 640px; color: var(--encre2); font-size: 14px; line-height: 1.45; } .as-p-etats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .as-etat { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 8px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); color: var(--encre); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; } .as-etat:hover { border-color: var(--as); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 24, 40, .08); } .as-etat:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; } .as-etat-txt { display: grid; gap: 1px; min-width: 0; } .as-etat-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-etat-txt small { font-size: 12.5px; color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-etat-ok { border-color: color-mix(in srgb, var(--as) 45%, var(--trait)); } .as-etat-alerte { border-color: var(--ambre-texte); background: var(--ambre-fond); } .as-etat-alerte small { color: var(--ambre-texte); } /* Le reçu : les champs et l'aperçu côte à côte sur ordinateur. */ .as-recu-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 18px; align-items: start; } .as-recu-champs { display: grid; gap: 12px; min-width: 0; } .as-recu-apercu-zone { display: grid; gap: 6px; position: sticky; top: calc(var(--haut-barre, 56px) + 14px); } .as-ra-titre { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); } .as-recu-apercu { display: grid; gap: 10px; padding: 16px 16px 12px; border-radius: 6px; background: #FFFEF9; color: #1F2733; border: 1px solid #E7E2D3; box-shadow: 0 1px 0 #E7E2D3, 0 8px 20px rgba(16, 24, 40, .10); transform: rotate(.6deg); font-size: 13px; line-height: 1.45; } .as-ra-tete { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: 2px solid var(--as); } .as-ra-tete b { font-size: 13.5px; } .as-ra-tete span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #1F7A55; } .as-ra-tete small, .as-ra-pied { color: #5B6472; font-size: 11.5px; } .as-ra-corps, .as-ra-phrase { margin: 0; } .as-ra-phrase { font-style: italic; color: #3A4452; } .as-ra-sign { display: grid; justify-items: end; gap: 1px; text-align: right; } .as-ra-sign i { color: #8A93A1; } .as-ra-imgs { display: flex; gap: 6px; align-items: flex-end; min-height: 8px; } .as-ra-imgs img { max-height: 44px; max-width: 110px; } .as-ra-pied { border-top: 1px dashed #D9D3C2; padding-top: 6px; } /* Les réglages qui dépendent d'un interrupteur s'estompent quand il est coupé. */ .as-dep { display: grid; gap: 12px; transition: opacity .2s; } .as-dep.as-off { opacity: .5; } .as-dep-off { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--gris-pale); color: var(--encre2); font-size: 13.5px; } .as-dep-off[hidden] { display: none; } .as-dep-off svg { flex: none; margin-top: 2px; } /* Le lien d'adhésion, avec son code QR. */ .as-param .as-lien-adh { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; } .as-qr { display: block; width: 92px; height: 92px; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid var(--trait); } .as-qr svg { display: block; width: 100%; height: 100%; } .as-lien-corps { display: grid; gap: 6px; min-width: 0; } .as-lien-lib { font-size: 12px; font-weight: 700; color: var(--encre2); } /* Les catégories : initiales en couleur, part des membres. */ .as-cat { grid-template-columns: auto minmax(0, 1fr) auto auto; } .as-cat-av { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); } .as-cat-barre { display: block; height: 5px; margin-top: 4px; max-width: 220px; border-radius: 3px; background: var(--trait-leger); overflow: hidden; } .as-cat-barre i { display: block; height: 100%; border-radius: 3px; background: var(--c); } .as-cat:hover .as-cat-ico { color: var(--as); } /* « C'est fait », dans le pied de la carte. */ @keyframes as-bravo { 0% { opacity: 0; transform: translateY(6px) scale(.96); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } } .as-bravo { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--as); font-weight: 700; font-size: 14px; animation: as-bravo 2.6s ease forwards; } @media (prefers-reduced-motion: reduce) { .as-bravo { animation: none; } } @media (max-width: 1000px) { .as-recu-grille { grid-template-columns: minmax(0, 1fr); } .as-recu-apercu-zone { position: static; max-width: 420px; } } @media (max-width: 760px) { .as-p-hero { padding: 16px 14px 14px; } .as-p-hero h2 { font-size: 20px; } .as-p-hero p { font-size: 13.5px; } .as-p-etats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .as-etat { min-height: 52px; padding: 7px 9px; gap: 8px; } .as-etat .as-h-ico { width: 26px; height: 26px; border-radius: 8px; } .as-etat-txt b { font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .as-etat-txt small { font-size: 11.5px; } .as-param .as-lien-adh { grid-template-columns: minmax(0, 1fr); justify-items: start; } .as-qr { width: 120px; height: 120px; } .as-cat-av { width: 34px; height: 34px; font-size: 12px; } .as-recu-apercu { transform: none; } } @media (max-width: 760px) { .as-etat-txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* 1.44.1 — Ateliers « Ferme et table » : la pastille d'un label montre son logo (sur fond blanc, lisible en thème sombre). */ .at-label-choix > span { padding-left: 6px; } .at-label-choix img { width: auto; height: 24px; padding: 1px 2px; border-radius: 4px; background: #fff; flex: none; } /* 1.45.0 — Paramètres → Ateliers : le fond de l'écran du quiz, en vignettes 16:9 (un faux écran : titre, carte du code, texte). */ .at-fonds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 4px 0 10px; } .at-fond { position: relative; display: grid; align-content: start; gap: 8px; padding: 8px; border: 1.5px solid var(--trait); border-radius: 14px; background: var(--blanc); cursor: pointer; min-width: 0; } .at-fond input { position: absolute; opacity: 0; pointer-events: none; } .at-fond:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); } .at-fond:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; } .at-fond-vue { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 9px; overflow: hidden; background-color: #15171C; } .at-fond-vue i { position: absolute; display: block; } .at-fond-titre { left: 7%; top: 9%; width: 30%; height: 6%; border-radius: 3px; background: rgba(255,248,240,.85); } .at-fond-carte { left: 7%; top: 34%; width: 46%; height: 34%; border-radius: 6px; background: #fff; } .at-fond-carte em { position: absolute; left: 34%; top: 38%; width: 54%; height: 26%; border-radius: 3px; background: #15171C; opacity: .85; } .at-fond-carte::before { content: ""; position: absolute; left: 7%; top: 14%; width: 20%; height: 72%; border-radius: 2px; background: repeating-linear-gradient(90deg, #15171C 0 3px, #fff 3px 5px); opacity: .8; } .at-fond-txt { left: 60%; top: 46%; width: 30%; height: 8%; border-radius: 3px; background: rgba(255,248,240,.75); } .at-fond-lib { display: grid; gap: 2px; padding: 0 4px 2px; min-width: 0; } .at-fond-lib b { font-size: 14px; } .at-fond-lib small { color: var(--gris-texte); font-size: 12.5px; line-height: 1.35; } .at-fond:has(input:checked) .at-fond-lib b::after { content: " ✓"; color: var(--action); } /* ── 1.46.0 — Qui est connecté ─────────────────────────────────────────── */ .cnx-tete { align-items: flex-end; } .cnx-resume { margin: 0 0 2px; font-size: 18px; display: flex; align-items: center; gap: 8px; } .cnx-point { width: 10px; height: 10px; border-radius: 50%; background: #2F9E44; box-shadow: 0 0 0 0 rgba(47, 158, 68, .5); animation: cnx-pouls 2.4s ease-out infinite; } @keyframes cnx-pouls { 0% { box-shadow: 0 0 0 0 rgba(47, 158, 68, .45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(47, 158, 68, 0); } } .cnx-outils { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cnx-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-bottom: 18px; } .cnx-carte { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); } .cnx-absent { opacity: .82; } .cnx-avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: color-mix(in srgb, var(--action, #0E7490) 14%, var(--blanc)); color: var(--action, #0E7490); } .cnx-avatar i { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blanc); background: var(--gris-texte, var(--encre2)); } .cnx-en-ligne .cnx-avatar i { background: #2F9E44; } .cnx-corps { display: grid; gap: 3px; min-width: 0; } .cnx-corps > b { overflow-wrap: anywhere; } .cnx-corps > small { color: var(--gris-texte, var(--encre2)); } .cnx-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; margin-top: 2px; } .cnx-infos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; color: var(--gris-texte, var(--encre2)); } .cnx-infos li { display: flex; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; } .cnx-infos svg { flex: none; } .cnx-groupe h3 { display: flex; align-items: center; gap: 6px; font-size: 15px; margin: 4px 0 10px; } @media (prefers-reduced-motion: reduce) { .cnx-point { animation: none; } } /* ══ 1.46.1 — L'éditeur des quiz et questionnaires au téléphone : rien ne dépasse ══ Les cartes des questions ne s'élargissent plus au-delà de la fenêtre ; sur un écran étroit, la barre d'outils (dupliquer, monter, descendre, supprimer) passe sous le type de question, à droite. */ .qb-questions { grid-template-columns: minmax(0, 1fr); } .qb-q, .qb-q > *, .qb-choix-l, .qb-apercu { min-width: 0; } .qb-q-tete { flex-wrap: wrap; row-gap: 8px; } .qb-q-tete select { flex: 1 1 150px; min-width: 0; max-width: 260px; text-overflow: ellipsis; } .qb-apercu { flex-wrap: wrap; row-gap: 4px; } .qb-ajouter .btn { max-width: 100%; white-space: normal; text-align: left; } @media (max-width: 760px) { .qb-q-tete select { max-width: none; } .qb-q { padding: 10px; } .qb-q .champ-ligne { grid-template-columns: minmax(0, 1fr); } .qb-duree { max-width: none; } } @media (max-width: 420px) { .qb-q-btns { margin-left: auto; } .qb-outil { width: 36px; height: 34px; } .qb-dix { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; } .qb-dix span { width: auto; height: 26px; font-size: 11.5px; } } /* ══ 1.46.2 — Les saisies d'une phrase passent à la ligne (zone de texte qui grandit avec le texte) ══ */ textarea.saisie-longue, .champ textarea.saisie-longue, .qb-q textarea.saisie-longue { display: block; width: 100%; min-height: 42px; resize: none; overflow: hidden; line-height: 1.45; font-weight: inherit; overflow-wrap: anywhere; } textarea.saisie-longue.iv-com { min-height: 32px; line-height: 1.4; } .as-reso textarea.saisie-longue { min-height: 36px; } @media (max-width: 760px) { .champ textarea.saisie-longue { font-size: 16px; padding-top: 10px; padding-bottom: 10px; } } /* ══ 1.46.4 — Les cartes des fiches : un contour net, à la couleur du modèle (plante, carnet de terrain…) ══ */ .fi-carte { border: 1.5px solid color-mix(in srgb, var(--m, var(--action)) 40%, var(--trait-fort, var(--trait))); box-shadow: 0 2px 10px rgba(24, 33, 45, .06); } .fi-carte:hover, .fi-carte:focus-within { border-color: color-mix(in srgb, var(--m, var(--action)) 70%, var(--trait-fort, var(--trait))); } /* ══ 1.47.0 — Le fil d'Ariane et le bouton « Revenir », dans le bandeau du haut ══ */ .tb-retour { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: var(--blanc); border: 1px solid var(--trait); color: var(--encre); transition: background .15s, border-color .15s, transform .15s; } .tb-retour:hover { border-color: var(--page, var(--vert)); color: var(--page, var(--lien)); transform: translateX(-2px); } .tb-retour:focus-visible { outline: 3px solid var(--page, var(--vert)); outline-offset: 2px; } .tb-bloc { display: grid; gap: 1px; min-width: 0; } .tb-fil { min-width: 0; } .tb-fil ol { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--encre2); } .tb-fil li { display: flex; align-items: center; min-width: 0; white-space: nowrap; } .tb-fil li:not(:last-child) { flex: none; } .tb-fil li + li::before { content: '›'; margin: 0 6px; color: var(--encre3, var(--encre2)); font-weight: 600; } .tb-fil li:last-child span { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--encre); } .tb-fil button { font: inherit; color: var(--lien, var(--vert)); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; } .tb-fil button:hover, .tb-fil button:focus-visible { text-decoration-color: currentColor; } .tb-fil + .tb-titre { font-size: 18px; } @media (max-width: 760px) { .tb-retour { width: 36px; height: 36px; } /* Au téléphone, le fil garde ses deux dernières étapes (l'écran et le détail ouvert). */ .tb-fil li:not(:nth-last-child(-n+2)) { display: none; } .tb-fil li:nth-last-child(2)::before { content: none; } .tb-fil ol { font-size: 12px; } .tb-fil + .tb-titre { font-size: 16.5px; } .tb-fil + .tb-titre #titre-ico { display: none; } } @media print { .tb-retour, .tb-fil { display: none !important; } } /* Au téléphone, les blocs « Quiz et avis » d'une session tiennent dans l'écran (la grille ne force plus 300 px). */ .qb-session-grille { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .qb-session, .qb-session-grille > * { min-width: 0; } .qb-lancer { flex-wrap: wrap; } .qb-lancer select { min-width: 0; max-width: 100%; } /* ── 1.48.0 — Le prélèvement SEPA ─────────────────────────────────────── */ .prl-resume { font-size: 13px; line-height: 1.6; color: var(--encre2); margin: -4px 0 14px; } .prl-resume svg { color: var(--accent); vertical-align: -2px; margin-right: 2px; } .prl-table td:last-child small { white-space: nowrap; } .prl-onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--trait); margin: 0 0 14px; } .prl-onglet { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--encre2); padding: 9px 12px; border-bottom: 3px solid transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .prl-onglet:hover { color: var(--lien); } .prl-onglet.actif { color: var(--lien); border-bottom-color: var(--action); } .prl-nb { background: var(--action); color: #FFFFFF; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; line-height: 1.5; } .prl-table td:first-child, .prl-table th:first-child { width: 36px; } .prl-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--vert); } .prl-pied { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; margin-top: 14px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px 16px; } .prl-pied .champ { margin: 0; } .prl-pied .case { margin: 0; } .prl-action { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; } .prl-total { font-variant-numeric: tabular-nums; } .prl-remises { display: grid; gap: 14px; } .prl-remise { background: var(--blanc); border: 1.5px solid color-mix(in srgb, var(--action) 30%, var(--trait)); border-radius: var(--rayon); padding: 14px 16px; box-shadow: 0 2px 10px rgba(24, 33, 45, .05); } .prl-remise.statut-passee, .prl-remise.statut-annulee { border-color: var(--trait); box-shadow: none; } .prl-remise > header { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; align-items: flex-start; } .prl-remise > header > span { display: grid; gap: 3px; min-width: 0; justify-items: start; } .prl-remise > header small { color: var(--encre2); } .prl-montant { font-size: 20px; font-variant-numeric: tabular-nums; } .prl-etapes { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 8px; counter-reset: e; } .prl-etapes li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--survol); } .prl-etapes li > svg { color: var(--encre2); } .prl-etapes li.fait > svg { color: var(--vert-pastille-texte); } .prl-etapes li > span { display: grid; gap: 1px; min-width: 0; } .prl-etapes li small { color: var(--encre2); font-size: 12.5px; } .prl-detail { margin-top: 10px; } .prl-detail summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--lien); padding: 4px 0 8px; } .prl-annuler { margin: 8px 0 0; text-align: right; font-size: 13px; } .prl-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; } .prl-mode { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--trait); border-radius: 10px; padding: 10px 12px; cursor: pointer; } .prl-mode:has(input:checked) { border-color: var(--action); background: var(--vert-pale); } .prl-mode input { margin-top: 3px; accent-color: var(--vert); } .prl-mode span { display: grid; gap: 2px; } .prl-mode small { color: var(--encre2); font-size: 12.5px; } @media (max-width: 760px) { .prl-pied { grid-template-columns: minmax(0, 1fr); } .prl-action { justify-content: space-between; } .prl-etapes li { grid-template-columns: 22px minmax(0, 1fr); } .prl-etapes li > .btn { grid-column: 2; justify-self: start; } } /* ── 1.49.0 — Importer un pack d'ateliers (Paramètres → Ateliers) ── */ .pk-plan { display: grid; gap: 16px; } .pk-tete b { font-size: 17px; color: var(--lien); } .pk-tete p { margin: 4px 0 0; color: var(--encre2); } .pk-chiffres { display: flex; flex-wrap: wrap; gap: 8px 18px; } .pk-chiffres b { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; } .pk-erreurs { padding: 10px 14px; border-radius: var(--rayon); background: var(--rouge-fond); border: 1px solid var(--rouge-trait); color: var(--rouge-texte); } .pk-erreurs ul { margin: 6px 0 0; padding-left: 18px; } .pk-bloc h4 { margin: 0 0 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--lien); } .pk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border: 1px solid var(--trait-leger); border-radius: var(--rayon); overflow: hidden; } .pk-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--blanc); } .pk-liste li + li { border-top: 1px solid var(--trait-leger); } .pk-liste li > span:first-child { min-width: 0; display: grid; gap: 1px; } .pk-liste small { color: var(--encre2); font-size: 12.5px; } .pk-v { flex: none; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .pk-nouveau { background: var(--vert-pastille); color: var(--vert-pastille-texte); } .pk-deja { background: var(--gris-pale); color: var(--gris-texte); } .pk-erreur { background: var(--rouge-pale); color: var(--rouge-texte); white-space: normal; max-width: 50%; text-align: right; } @media (max-width: 620px) { .pk-liste li:has(.pk-erreur) { flex-wrap: wrap; } .pk-erreur { max-width: none; } } /* ── 1.50.0 — La fiche PDF (éditeur) ── */ .fi-pdf-actuel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--survol); } .fi-pdf-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--m, var(--accent)) 14%, var(--blanc)); color: var(--m, var(--accent)); } .fi-pdf-txt { flex: 1; min-width: 160px; display: grid; gap: 1px; } .fi-pdf-txt b { overflow-wrap: anywhere; } .fi-pdf-txt small { color: var(--encre2); } .fi-depot-pdf { min-height: 120px; } .pk-pdf { color: var(--encre2); font-size: 12.5px; } .pk-progres { display: grid; gap: 6px; } .pk-barre { height: 6px; border-radius: 99px; background: var(--trait-leger); overflow: hidden; } .pk-barre i { display: block; height: 100%; background: var(--action); transition: width .2s; } .fi-vignette.fi-vig-pdf { background-position: center top !important; background-size: cover; } /* ── 1.52.0 — Le module « Contrats » (modules/contrats/contrats.js) ───────── */ :root { --ct: #2F6B4F; --ct-pale: #E5F1EA; --ct-fonce: #1F4A36; } :root[data-theme="dark"] { --ct: #7CC4A0; --ct-pale: #1F3329; --ct-fonce: #B8E3CC; } @media (prefers-color-scheme: dark) { :root.theme-auto { --ct: #7CC4A0; --ct-pale: #1F3329; --ct-fonce: #B8E3CC; } } .ct-accueil { background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--ct); border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; box-shadow: var(--ombre); } .ct-accueil > div:first-child { min-width: 0; flex: 1 1 340px; } .ct-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ct); } .ct-accueil h2, .ct-tete h2 { margin: 6px 0; font-size: 23px; line-height: 1.2; color: var(--encre); text-wrap: balance; } .ct-accueil p { margin: 0; color: var(--encre2); max-width: 660px; font-size: 14.5px; } .ct-compteurs { display: flex; gap: 8px; flex-wrap: wrap; } .ct-compteurs button { font: inherit; cursor: pointer; text-align: left; background: var(--ct-pale); border: 1px solid transparent; border-radius: 14px; padding: 9px 14px; display: grid; min-width: 100px; color: var(--encre); } .ct-compteurs button:hover { border-color: var(--ct); } .ct-compteurs b { font-size: 22px; line-height: 1.1; color: var(--ct-fonce); font-variant-numeric: tabular-nums; } .ct-compteurs span { font-size: 12.5px; color: var(--encre2); } .ct-c-ambre { background: var(--ambre-pale) !important; } .ct-c-ambre b { color: var(--ambre-texte) !important; } .ct-c-bleu { background: var(--bleu-pale, var(--ct-pale)) !important; } .ct-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ct-cherche { flex: 1 1 180px; max-width: 280px; min-height: 40px; } .ct-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .ct-carte { font: inherit; text-align: left; cursor: pointer; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 14px 16px; display: grid; gap: 7px; align-content: start; color: var(--encre); box-shadow: var(--ombre); transition: transform .12s, border-color .12s; min-width: 0; } .ct-carte:hover { transform: translateY(-2px); border-color: var(--ct); } .ct-calme { opacity: .75; } .ct-carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ct-carte-haut small { color: var(--encre3); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .ct-carte-client { font-size: 16.5px; line-height: 1.25; } .ct-carte-titre { color: var(--encre2); font-size: 13.5px; line-height: 1.35; } .ct-carte-infos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--encre2); } .ct-carte-infos span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .ct-carte-bas { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 13px; border-top: 1px solid var(--trait-leger); padding-top: 8px; } .ct-carte-bas b { font-size: 15px; font-variant-numeric: tabular-nums; } /* Le contrat ouvert */ .ct-fil { margin-bottom: 8px; } .ct-tete { background: var(--blanc); border: 1px solid var(--trait); border-top: 5px solid var(--ct); border-radius: 18px; padding: 18px 20px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; box-shadow: var(--ombre); margin-bottom: 12px; } .ct-tete-txt { min-width: 0; flex: 1 1 320px; } .ct-client { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; font-weight: 600; } .ct-client .lien-txt { font-weight: 700; } .ct-objet { margin: 0; color: var(--encre2); } .ct-tete-total { display: grid; justify-items: end; align-content: start; text-align: right; } .ct-tete-total b { font-size: 26px; line-height: 1.1; color: var(--ct-fonce); font-variant-numeric: tabular-nums; } .ct-tete-total span { font-size: 12px; color: var(--encre3); text-transform: uppercase; letter-spacing: .08em; } .ct-tete-total small { margin-top: 4px; color: var(--encre2); font-size: 13px; } .ct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; } .ct-actions a.btn { text-decoration: none; } .ct-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; } .ct-col { display: grid; gap: 14px; min-width: 0; } .ct-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 14px 16px; min-width: 0; } .ct-bloc h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 15.5px; color: var(--encre); } .ct-bloc h3 svg { color: var(--ct); } .ct-bloc h4 { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre2); } .ct-signe { border-color: var(--ct); background: var(--ct-pale); } .ct-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; } .ct-dl dt { color: var(--encre2); } .ct-dl dd { margin: 0; overflow-wrap: anywhere; } .ct-pre { white-space: pre-line; margin: 0; font-size: 14px; } .ct-defil { overflow-x: auto; } .ct-table { width: 100%; border-collapse: collapse; font-size: 14px; } .ct-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); border-bottom: 1px solid var(--trait); padding: 6px 8px; } .ct-table td { border-bottom: 1px solid var(--trait-leger); padding: 7px 8px; vertical-align: top; } .ct-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .ct-table tfoot td { border-bottom: 0; font-weight: 600; } .ct-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--trait-leger); font-size: 14px; } .ct-fact > span:first-child { flex: 1 1 180px; font-weight: 600; } .ct-articles { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; } .ct-articles small { display: block; color: var(--encre2); font-size: 12.5px; } .ct-empreinte { margin-top: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; overflow-wrap: anywhere; } .ct-plus { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 4px; } /* L'éditeur du contrat */ .ct-fs { border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px 12px; margin: 4px 0 8px; min-width: 0; } .ct-fs legend { font-weight: 700; padding: 0 6px; } .ct-lg-tete, .ct-lg { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 90px 36px; gap: 6px; align-items: center; } .ct-lg-tete.ct-lg-fr, .ct-lg.ct-lg-fr { grid-template-columns: minmax(0, 1fr) 70px 110px 36px; } .ct-lg-tete { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); margin-bottom: 4px; } .ct-lg { margin-bottom: 6px; } .ct-lg input, .ct-lg select { min-width: 0; width: 100%; } .ct-lg .lg-qte, .ct-lg .lg-pu { text-align: right; } .ct-total-ed { margin: 8px 0 0; font-size: 14px; color: var(--encre2); } .ct-total-ed b { color: var(--encre); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .ct-grille { grid-template-columns: minmax(0, 1fr); } .ct-tete-total { justify-items: start; text-align: left; } .ct-lg-tete { display: none; } .ct-lg, .ct-lg.ct-lg-fr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; border-bottom: 1px solid var(--trait-leger); padding-bottom: 8px; } .ct-lg .lg-des { grid-column: 1 / -1; } .ct-lg:not(.ct-lg-fr) .lg-tva { grid-column: 1 / 3; } .ct-lg:not(.ct-lg-fr) .btn-icone { grid-row: 3; grid-column: 3; } } /* Paramètres → Contrats */ .ct-mod-liste { display: grid; gap: 8px; } .ct-mod { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--trait); border-radius: 14px; padding: 10px 14px; } .ct-mod > div:first-child { min-width: 0; flex: 1 1 260px; display: grid; gap: 2px; } .ct-mod small { color: var(--encre2); } .ct-mod-btns { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .ct-avert { display: flex; gap: 6px; align-items: flex-start; max-width: 760px; } .ct-avert svg { flex-shrink: 0; margin-top: 2px; } .md.md-ct-modele { max-width: 1080px; } .ct-med { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; } .ct-med-form { display: grid; gap: 4px; min-width: 0; } .ct-med-h { margin: 10px 0 4px; } .ct-med-art { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; } .ct-med-art li { border: 1px solid var(--trait); border-radius: 14px; padding: 10px; display: grid; gap: 6px; background: var(--fond, transparent); } .ct-med-art-tete { display: flex; gap: 8px; align-items: center; } .ct-med-art-tete .cma-titre { flex: 1 1 auto; min-width: 0; font-weight: 600; } .ct-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ct-pale); color: var(--ct-fonce); font-weight: 800; font-size: 13px; flex-shrink: 0; } .ct-med-btns { display: flex; gap: 2px; } .ct-med-art textarea { width: 100%; min-height: 90px; resize: vertical; } .ct-med-aide { position: sticky; top: 0; border: 1px solid var(--trait); border-radius: 14px; padding: 12px; font-size: 13px; color: var(--encre2); max-height: 70vh; overflow: auto; } .ct-med-aide h4 { margin: 0 0 6px; color: var(--encre); } .ct-med-aide ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; } .ct-champ { font: inherit; width: 100%; text-align: left; cursor: pointer; background: var(--ct-pale); border: 1px solid transparent; border-radius: 10px; padding: 5px 8px; display: grid; color: var(--encre); } .ct-champ:hover { border-color: var(--ct); } .ct-champ code { font-size: 12px; color: var(--ct-fonce); font-weight: 700; } .ct-champ span { font-size: 12px; color: var(--encre2); } @media (max-width: 760px) { .ct-med { grid-template-columns: minmax(0, 1fr); } .ct-med-aide { position: static; max-height: none; } } /* ── Comparer les années ───────────────────────────────────────────────── Une couleur par année : la plus récente prend celle des ventes, les autres s'éloignent avec l'âge. */ :root { --cmp-0: var(--serie-ventes); --cmp-1: #C26A06; --cmp-2: #6D5BD0; --cmp-3: #B83A74; --cmp-4: #6B7A1F; --cmp-5: #7A8597; } :root[data-theme="dark"] { --cmp-1: #F2A33A; --cmp-2: #A594F9; --cmp-3: #F07AB0; --cmp-4: #B5C45A; --cmp-5: #A6B0BE; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cmp-1: #F2A33A; --cmp-2: #A594F9; --cmp-3: #F07AB0; --cmp-4: #B5C45A; --cmp-5: #A6B0BE; } } .cmp-s0 { --cmp: var(--cmp-0); } .cmp-s1 { --cmp: var(--cmp-1); } .cmp-s2 { --cmp: var(--cmp-2); } .cmp-s3 { --cmp: var(--cmp-3); } .cmp-s4 { --cmp: var(--cmp-4); } .cmp-s5 { --cmp: var(--cmp-5); } .cmp-reglages { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; margin-bottom: 10px; } .cmp-champ { display: grid; gap: 6px; min-width: 0; } .cmp-lib { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); } .cmp-case { align-self: center; } .cmp-export { margin-left: auto; align-self: center; } .cmp-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 14px; } .cmp-tuile { display: grid; align-content: start; gap: 3px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 3px 0 var(--cmp); } .cmp-tuile .cmp-an { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--encre); } .cmp-tuile .cmp-an i { width: 10px; height: 10px; border-radius: 3px; background: var(--cmp); } .cmp-tuile > b { font-size: 22px; color: var(--encre); font-variant-numeric: tabular-nums; } .cmp-tuile > span { font-size: 13px; color: var(--encre2); } .cmp-tuile small { font-size: 12.5px; color: var(--encre2); } .cmp-evo { font-weight: 700; white-space: nowrap; } .cmp-graphe { margin-bottom: 6px; } .cmp-graphe-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .cmp-graphe-tete h3 { margin: 0; } .cmp-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 2px; font-size: 13px; color: var(--encre2); } .cmp-legende span { display: inline-flex; align-items: center; gap: 6px; } .cmp-puce { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cmp); margin-right: 6px; vertical-align: baseline; } .cmp-barres { border: 0; padding: 8px 0 0; } .cmp-barres .gs-barres { gap: 1px; padding: 0 2px; } .cmp-barres .gs-b { width: auto; flex: 1 1 0; max-width: 14px; background: var(--cmp); } .cmp-cumul { margin: 8px 0 0; } .cmp-cumul svg { display: block; width: 100%; height: auto; overflow: visible; } .cmp-grille { stroke: var(--trait); stroke-width: 1; } .cmp-txt { font-size: 11px; fill: var(--encre2); font-variant-numeric: tabular-nums; } .cmp-fin { font-weight: 700; fill: var(--cmp); } .cmp-ligne { fill: none; stroke: var(--cmp); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .cmp-s0 .cmp-ligne { stroke-width: 3.5; } .cmp-point { fill: var(--blanc); stroke: var(--cmp); stroke-width: 2; } .cmp-cumul figcaption { font-size: 12px; margin-top: 4px; } .cmp-mois th.num, .cmp-clients th.num { white-space: nowrap; } .cmp-clients tr.cliquable { cursor: pointer; } .cmp-clients tr.cliquable:hover th, .cmp-clients tr.cliquable:hover td { background: var(--survol); } @media (max-width: 640px) { .cmp-export { margin-left: 0; } .cmp-tuiles { grid-template-columns: 1fr 1fr; } .cmp-tuile > b { font-size: 18px; } .cmp-barres .gs-col small { font-size: 10px; } } @media (max-width: 340px) { .cmp-tuiles { grid-template-columns: 1fr; } } @media print { .cmp-reglages, .cmp-graphe-tete .filtres { display: none !important; } } /* 1.57.0 — La recherche d'un client au-dessus de la liste (devis, facture, toute fiche qui choisit un client). */ .fk-recherche { position: relative; display: grid; gap: 4px; margin-bottom: 6px; } .fk-recherche input[type="search"] { padding-left: 36px; } .fk-rech-ico { position: absolute; left: 12px; top: 13px; color: var(--encre2); pointer-events: none; display: inline-flex; } .fk-rech-info { color: var(--encre2); font-size: 13px; min-height: 0; } .fk-rech-info:empty { display: none; } select.fk-liste { height: auto; min-height: 0; padding: 4px; background-image: none; } select.fk-liste option { padding: 7px 8px; border-radius: 6px; } select.fk-liste option:checked { background: var(--vert-pale); color: var(--encre); } /* ── 1.58.0 — Séances facturées au mois (modules/seances/seances.js) ─────────────────── */ :root { --se: #2E7D67; --se-pale: #E3F2EC; --se-fonce: #1D5545; } :root[data-theme="dark"] { --se: #7BC9AF; --se-pale: #1C322B; --se-fonce: #BDE7D7; } @media (prefers-color-scheme: dark) { :root.theme-auto { --se: #7BC9AF; --se-pale: #1C322B; --se-fonce: #BDE7D7; } } .se-tete { background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--se); border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; box-shadow: var(--ombre); } .se-tete > div:first-child { min-width: 0; flex: 1 1 340px; } .se-tete h2 { margin: 6px 0; font-size: 23px; line-height: 1.2; color: var(--encre); text-wrap: balance; } .se-tete p { margin: 0; color: var(--encre2); max-width: 680px; font-size: 14.5px; } .se-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--se); } .se-tete-act, .se-bloc-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .se-mois-nav { display: flex; align-items: center; gap: 8px; } .se-mois-nav b { min-width: 150px; text-align: center; font-size: 16px; } .se-compteurs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .se-compteurs > div, .se-compteurs > button { font: inherit; text-align: left; background: var(--se-pale); border: 1px solid transparent; border-radius: 14px; padding: 9px 14px; display: grid; min-width: 112px; color: var(--encre); } .se-compteurs > button { cursor: pointer; } .se-compteurs > button:hover { border-color: var(--se); } .se-compteurs b { font-size: 21px; line-height: 1.15; color: var(--se-fonce); font-variant-numeric: tabular-nums; } .se-compteurs span { font-size: 12.5px; color: var(--encre2); } .se-compteurs-petits b { font-size: 19px; } .se-c-ambre { background: var(--ambre-pale) !important; } .se-c-ambre b { color: var(--ambre-texte) !important; } .se-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 14px 16px; margin: 0 0 14px; min-width: 0; } .se-bloc h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 15.5px; color: var(--encre); } .se-bloc h3 svg { color: var(--se); } .se-bloc-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .se-bloc-tete h3 { margin: 0; } .se-calme { background: var(--fond2, var(--blanc)); } .se-calme p { color: var(--encre2); margin: 0 0 10px; max-width: 760px; } .se-table td, .se-table th { vertical-align: middle; } .se-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .se-table tr.se-coche td { background: var(--se-pale); } .se-sous { display: block; color: var(--encre2); font-size: 12.5px; } .se-act { text-align: right; white-space: nowrap; } .se-parts { margin: 0 0 6px; } .se-parts .num { text-align: right; font-variant-numeric: tabular-nums; } .se-jour { margin: 0 0 14px; } .se-jour h3 { font-size: 14px; text-transform: none; color: var(--encre2); margin: 0 0 6px; } .se-ligne { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 14px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; } .se-ligne-choisie { border-color: var(--se); } .se-ligne-quoi { flex: 1 1 240px; min-width: 0; display: grid; } .se-ligne-quoi small { color: var(--encre2); } .se-choix-zone { display: flex; flex-wrap: wrap; gap: 6px; } .se-choix { position: relative; cursor: pointer; } .se-choix input { position: absolute; opacity: 0; pointer-events: none; } .se-choix span { display: inline-block; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--trait); font-size: 13.5px; background: var(--blanc); } .se-choix input:focus-visible + span { outline: 2px solid var(--se); outline-offset: 2px; } .se-choix.actif span { background: var(--se); border-color: var(--se); color: #fff; } .se-prev { flex-basis: 100%; font-size: 13.5px; color: var(--encre2); } .se-prev input { margin-left: 6px; } .se-pied { position: sticky; bottom: 0; background: var(--fond, var(--blanc)); border-top: 1px solid var(--trait); padding: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .se-jours { display: flex; flex-wrap: wrap; gap: 4px 14px; } .se-radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; } .se-radio input { margin-top: 4px; } .se-radio span { display: grid; } .se-radio small { color: var(--encre2); } .se-unite { display: flex; align-items: center; gap: 8px; } .se-unite input { max-width: 110px; } .se-unite span { color: var(--encre2); } .se-etapes { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--encre2); } .se-attest { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .se-attest li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--trait); border-radius: 12px; padding: 8px 12px; } .se-attest li span { display: grid; min-width: 0; } .se-attest small { color: var(--encre2); } .se-tdb-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .se-tdb-tete h3 { margin: 0; } .se-tdb .se-compteurs { margin: 10px 0; } .ag-seance { --ev: #2E8B6E; } @media (max-width: 760px) { .se-mois-nav b { min-width: 0; } .se-table .se-act .btn { padding-inline: 8px; } } /* Sur téléphone, la barre « Valider » flotte au-dessus de la barre du bas. */ body.avec-bb .se-pied { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); padding-inline: 12px; border-radius: 14px; box-shadow: var(--ombre); border: 1px solid var(--trait); } /* ── 1.59.0 — Le module Séances au téléphone ─────────────────────────────── */ .se-court, .se-fc-liste { display: none; } .tdb-nb { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ambre-pale); color: var(--ambre-texte); font-size: 12px; font-weight: 800; } .se-jl-liste { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; } .se-jl { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; border: 1px solid var(--trait); border-left: 4px solid var(--se); border-radius: 12px; padding: 8px 10px; background: var(--blanc); } .se-jl-fini { border-left-color: var(--trait-fort); opacity: .8; } .se-jl-quoi { flex: 1 1 220px; min-width: 0; display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 2px 0; font: inherit; color: var(--encre); text-align: left; cursor: pointer; } .se-jl-quoi > span { display: grid; min-width: 0; } .se-jl-quoi small { color: var(--encre2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .se-jl-h { flex: none; min-width: 52px; font-size: 15px; color: var(--se-fonce); font-variant-numeric: tabular-nums; } .se-jl-liens { display: flex; gap: 4px; } .se-jl-liens a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--trait); color: var(--se-fonce); background: var(--blanc); } .se-jl-act { display: flex; gap: 6px; } .se-jl-vide { margin: 8px 0; } .se-choix-fait.actif span { background: #2E7D67; border-color: #2E7D67; } .se-choix-absent.actif span { background: #B54708; border-color: #B54708; } .se-choix-annule_client.actif span, .se-choix-annule_pro.actif span { background: var(--gris-texte, #435063); border-color: var(--gris-texte, #435063); } .se-fc { list-style: none; border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; background: var(--blanc); display: grid; gap: 6px; } .se-fc.se-coche { border-color: var(--se); background: var(--se-pale); } .se-fc-haut { display: flex; align-items: flex-start; gap: 10px; } .se-fc-haut input { width: 22px; height: 22px; margin-top: 2px; flex: none; } .se-fc-qui { flex: 1; min-width: 0; display: grid; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--encre); cursor: pointer; } .se-fc-qui small { color: var(--encre2); font-size: 12.5px; } .se-fc-total { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .se-fc-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--encre2); } .se-fc-emettre { margin-left: auto; } .se-fc-tout { list-style: none; padding: 0 2px; } @media (max-width: 760px) { .se-long { display: none; } .se-court { display: block; } .se-tete { padding: 12px 14px; gap: 10px; border-radius: 14px; } .se-tete h2 { font-size: 20px; margin: 2px 0 4px; } .se-tete p { font-size: 13.5px; } .se-tete-act, .se-mois-nav { width: 100%; } .se-tete-act .btn { flex: 1; justify-content: center; } .se-mois-nav { justify-content: space-between; } .se-mois-nav .btn { min-width: 44px; min-height: 40px; justify-content: center; } .se-compteurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .se-compteurs > div, .se-compteurs > button { min-width: 0; padding: 8px 12px; } .se-compteurs > :last-child:nth-child(odd) { grid-column: 1 / -1; } .se-ligne { padding: 10px 12px; } .se-ligne-quoi { flex-basis: 100%; } .se-choix-zone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; } .se-choix span { display: grid; place-items: center; min-height: 42px; padding: 6px 8px; border-radius: 10px; text-align: center; line-height: 1.2; } .se-pied .discret { flex: 1 1 140px; font-size: 13px; } .se-large { display: none; } .se-fc-liste { display: grid; gap: 8px; margin: 0; padding: 0; } .se-bloc { padding: 12px; } .se-bloc-act { width: 100%; } .se-bloc-act .btn-p { flex: 1; justify-content: center; } .se-jl-quoi { flex-basis: 100%; } .se-jl-liens { margin-right: auto; } .se-jl-act .btn { min-height: 38px; } .tdb-actions .btn { position: relative; } .tdb-actions .tdb-nb { position: absolute; top: 6px; right: 8px; } } @media (max-width: 760px) { .se-choix { display: block; } .se-choix span { width: 100%; box-sizing: border-box; } } /* ── 1.59.1 — L'écran en chargement : une barre fine en haut, l'ancien écran estompé ── */ .contenu.en-charge > * { opacity: .45; transition: opacity .2s ease .05s; pointer-events: none; } .contenu.en-charge::before { content: ''; position: fixed; z-index: 70; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--page, var(--accent)), transparent) no-repeat; background-size: 35% 100%; animation: en-charge 1.1s linear infinite; } @keyframes en-charge { from { background-position: -40% 0; } to { background-position: 140% 0; } } @media (prefers-reduced-motion: reduce) { .contenu.en-charge::before { animation: none; background: var(--page, var(--accent)); opacity: .6; } } /* ── 1.60.0 — Le rappel des anciennes factures à encaisser (écran des factures) ── */ .bandeau-lien { width: 100%; text-align: left; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; } .bandeau-lien > span:nth-child(2) { flex: 1; min-width: 0; } .bandeau-lien .bandeau-fleche { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; } .bandeau-lien:hover { filter: brightness(.98); } .bandeau-lien:focus-visible { outline: 2px solid var(--page, var(--accent)); outline-offset: 2px; } /* 1.62.4 — Logos et labels : une carte par logo, l'emplacement sur une petite page, la taille au curseur, l'aperçu. */ .lgo-grille { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; } .lgo-liste { display: grid; gap: 10px; min-width: 0; } .lgo-carte { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); box-shadow: var(--ombre); transition: opacity .15s, border-color .15s; } .lgo-carte:hover { border-color: var(--trait-fort); } .lgo-carte.eteint { opacity: .6; } .lgo-carte.eteint .lgo-vignette img { filter: grayscale(1); } .lgo-vignette { width: 96px; height: 96px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: #fff repeating-conic-gradient(#EEF1F5 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 1px solid var(--trait-leger); } .lgo-vignette img { max-width: 88px; width: auto; object-fit: contain; transition: height .12s; } .lgo-corps { display: grid; gap: 8px; min-width: 0; } .lgo-nom { font: inherit; font-weight: 700; font-size: 15px; padding: 6px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--encre); width: 100%; min-width: 0; } .lgo-nom:hover { border-color: var(--trait); } .lgo-nom:focus { border-color: var(--action); outline: none; background: var(--blanc); } .lgo-ligne { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } /* La petite page : 3 points en haut (en-tête), 3 en bas (pied de page), des lignes au milieu. */ .lgo-page { width: 62px; height: 82px; flex: none; display: grid; grid-template-rows: auto 1fr 1fr 1fr auto; gap: 4px; padding: 5px; border-radius: 5px; background: #fff; border: 1px solid #D8DEE7; box-shadow: 0 2px 6px rgba(20, 30, 45, .1); } .lgo-page > i { display: block; height: 3px; align-self: center; border-radius: 2px; background: #E3E7EC; } .lgo-page > i.court { width: 60%; } .lgo-rang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .lgo-spot { height: 13px; padding: 0; border-radius: 3px; border: 1.5px dashed #C8D0DB; background: transparent; cursor: pointer; transition: transform .1s, background .1s; } .lgo-spot:hover { background: var(--vert-pale); border-color: var(--action); transform: scale(1.12); } .lgo-spot.actif { background: var(--action); border: 1.5px solid var(--action); } .lgo-spot:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; } .lgo-reglages { display: grid; gap: 6px; flex: 1 1 200px; min-width: 0; } .lgo-place { font-size: 13px; font-weight: 700; color: var(--action); } .lgo-taille { display: grid; grid-template-columns: auto minmax(0, 1fr) 52px; gap: 8px; align-items: center; font-size: 13px; color: var(--encre2); } .lgo-taille input[type=range] { width: 100%; accent-color: var(--action); } .lgo-taille output { font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; text-align: right; } .lgo-actions { display: grid; gap: 6px; justify-items: start; } .lgo-inter { align-items: center; gap: 8px; } .lgo-inter b { font-size: 13px; } .lgo-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); cursor: pointer; } .lgo-btn:hover { border-color: var(--trait-fort); background: var(--survol); } .lgo-btn.danger { color: var(--rouge-texte); } .lgo-btn.danger:hover { background: var(--rouge-fond); border-color: var(--rouge-trait); } .lgo-vide { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--survol); color: var(--encre2); font-size: 14px; } .lgo-depot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px dashed var(--trait-fort); border-radius: 14px; cursor: pointer; color: var(--encre2); transition: border-color .15s, background .15s; } .lgo-depot:hover, .lgo-depot.survol { border-color: var(--action); background: var(--vert-pale); color: var(--encre); } .lgo-depot-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--vert-pale); color: var(--action); } .lgo-depot b { display: block; color: var(--encre); font-size: 14px; } .lgo-depot small { font-size: 12.5px; } /* L'aperçu : une feuille en réduction, toujours claire comme le papier. */ .lgo-apercu { margin: 0; position: sticky; top: 90px; display: grid; gap: 6px; justify-items: center; } .lgo-apercu figcaption { font-size: 12px; color: var(--encre2); } .lgo-feuille { width: 231px; aspect-ratio: 210 / 297; background: #fff; border-radius: 4px; border: 1px solid #D8DEE7; box-shadow: 0 6px 20px rgba(20, 30, 45, .14); padding: 9px 12px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 7px; color: #18212D; overflow: hidden; } .lgo-ap-zone { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 4px; min-height: 6px; } .lgo-ap-zone span { display: flex; gap: 3px; align-items: flex-end; min-width: 0; } .lgo-ap-C { justify-content: center; } .lgo-ap-D { justify-content: flex-end; } /* 1.63.0 — Le pied de page réparti : une seule rangée, le même espace entre les logos et jusqu'aux bords. */ .lgo-ap-zone.lgo-ap-repartis { display: flex; justify-content: space-evenly; align-items: flex-end; gap: 0; } .lgo-ap-repartis img { max-width: 30%; } .lgo-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 14px; background: var(--survol); } .lgo-pied-txt { display: grid; gap: 2px; flex: 1 1 240px; min-width: 0; } .lgo-pied-txt b { font-size: 14px; color: var(--encre); } .lgo-pied-txt small { font-size: 12.5px; color: var(--encre2); line-height: 1.4; } .lgo-segment { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--blanc); border: 1px solid var(--trait); flex: none; } .lgo-segment button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--encre2); cursor: pointer; white-space: nowrap; } .lgo-segment button:hover { color: var(--encre); background: var(--survol); } .lgo-segment button[aria-pressed="true"] { background: var(--action); color: #fff; } .lgo-segment button:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; } @media (max-width: 560px) { .lgo-segment { width: 100%; } .lgo-segment button { flex: 1; justify-content: center; } } .lgo-ap-zone img { width: auto; max-width: 100%; object-fit: contain; transition: height .12s; } .lgo-ap-tete { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: start; } .lgo-ap-logo img { height: 20px; width: auto; max-width: 50px; object-fit: contain; display: block; } .lgo-ap-lignes { display: grid; gap: 3px; padding-top: 2px; } .lgo-ap-lignes i, .lgo-ap-corps i { display: block; height: 3px; border-radius: 2px; background: #E3E7EC; } .lgo-ap-lignes i:first-child { background: #B8C1CD; width: 70%; } .lgo-ap-lignes i.court, .lgo-ap-corps i.court { width: 55%; } .lgo-ap-tete b { font-size: 9px; letter-spacing: .1em; color: #2C2F3E; } .lgo-ap-corps { display: grid; gap: 7px; align-content: start; padding-top: 10px; } @media (max-width: 900px) { .lgo-grille { grid-template-columns: 1fr; } .lgo-apercu { position: static; } } @media (max-width: 600px) { .lgo-carte { grid-template-columns: 72px minmax(0, 1fr); } .lgo-vignette { width: 72px; height: 72px; } .lgo-vignette img { max-width: 64px; } .lgo-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .lgo-btn { flex: none; white-space: nowrap; } } /* 1.62.5 — Les lignes d'un devis, d'une facture ou d'un ordre, au téléphone : une carte par ligne. */ .lgc-liste { display: none; } @media (max-width: 760px) { .lg-lecture-zone { display: none; } .lgc-liste { display: grid; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; counter-reset: none; } .lgc { --t-f: var(--gris-pale); --t-t: var(--gris-texte); position: relative; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 14px 12px 18px; box-shadow: var(--ombre); display: grid; gap: 8px; overflow: hidden; } .lgc::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--t-t); opacity: .85; } .lgc-piece { --t-f: var(--p-piece-f); --t-t: var(--p-piece-t); } .lgc-mo { --t-f: var(--p-mo-f); --t-t: var(--p-mo-t); } .lgc-forfait { --t-f: var(--p-forfait-f); --t-t: var(--p-forfait-t); } .lgc-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; } .lgc-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--t-f); color: var(--t-t); font-weight: 800; font-size: 13px; } .lgc .le-pastille { font-size: 12px; padding: 3px 9px; border-radius: 999px; } .lgc-divers .le-pastille { background: var(--gris-pale); color: var(--gris-texte); } .lgc-ref { font: 600 12px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--encre2); background: var(--survol); border: 1px solid var(--trait-leger); border-radius: 6px; padding: 3px 7px; letter-spacing: .02em; } .lgc-remise { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ambre-pale); color: var(--ambre-texte); } .lgc-des { font-size: 15.5px; line-height: 1.45; color: var(--encre); overflow-wrap: anywhere; } .lgc-des small { display: block; margin-top: 4px; } .lgc-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px dashed var(--trait); } .lgc-calc { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--encre2); font-variant-numeric: tabular-nums; } .lgc-calc b { color: var(--encre); } .lgc-calc small { font-size: 12px; color: var(--encre3); } .lgc-total { font-size: 20px; font-weight: 800; color: var(--lien); font-variant-numeric: tabular-nums; white-space: nowrap; } .lgc-section { margin-top: 6px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .lgc-section::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: var(--vert-trait); } .lgc-section:first-child { margin-top: 0; } .lgc-texte { font-size: 14.5px; color: var(--encre2); background: var(--survol); border-radius: 12px; padding: 10px 12px; border-left: 3px solid var(--trait-fort); } .lgc-st { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 6px 2px; font-size: 14px; color: var(--encre2); } .lgc-st span { min-width: 0; } .lgc-st b { color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Le total : une carte, le TTC en avant. */ .fp-section .lg-totaux { width: 100%; min-width: 0; margin-top: 14px; background: var(--survol); border-radius: 16px; overflow: hidden; } .fp-section .lg-totaux td { padding: 9px 14px; } .fp-section .lg-totaux .lg-ttc td { background: var(--action); color: #FFFFFF; font-size: 18px; padding: 12px 14px; } } /* 1.67.0 — Toutes les fiches : chaque section dans une carte au bandeau coloré, comme dans OpsFormaPro (pastille d'icône inclinée, titre en couleur, ligne d'aide, chevron pour replier) ; les champs rangés sous leurs sections, les champs vides cités sur une ligne ; les tuiles du client ; les factures et devis en pastilles. */ #fiche .fp-corps > .fp-section { --fs: #15803D; margin-top: 14px; padding: 0 14px 14px; border: 1px solid color-mix(in srgb, var(--fs) 22%, var(--trait)); border-radius: 16px; background: var(--blanc); overflow: hidden; } #fiche .fp-corps > .fp-section:nth-of-type(6n+2) { --fs: #1D5FA8; } #fiche .fp-corps > .fp-section:nth-of-type(6n+3) { --fs: #B45309; } #fiche .fp-corps > .fp-section:nth-of-type(6n+4) { --fs: #6941C6; } #fiche .fp-corps > .fp-section:nth-of-type(6n+5) { --fs: #0F766E; } #fiche .fp-corps > .fp-section:nth-of-type(6n+6) { --fs: #BE185D; } :root[data-theme="dark"] #fiche .fp-corps > .fp-section { --fs-txt: color-mix(in srgb, var(--fs) 55%, #FFFFFF); } @media (prefers-color-scheme: dark) { :root.theme-auto #fiche .fp-corps > .fp-section { --fs-txt: color-mix(in srgb, var(--fs) 55%, #FFFFFF); } } #fiche .fp-corps > .fp-section > .fp-section-tete { margin: 0 -14px 14px; padding: 11px 14px; flex-wrap: wrap; background: linear-gradient(100deg, color-mix(in srgb, var(--fs) 13%, var(--blanc)) 0%, var(--blanc) 75%); border-bottom: 1px solid color-mix(in srgb, var(--fs) 16%, var(--trait-leger)); } #fiche .fp-corps > .fp-section > .fp-section-tete h3 { flex: 1 1 auto; min-width: 0; gap: 12px; font-size: 17px; font-weight: 800; color: var(--fs-txt, var(--fs)); border-radius: 10px; outline-offset: 3px; } #fiche .fp-corps > .fp-section > .fp-section-tete h3[tabindex] { cursor: pointer; } #fiche .fp-corps > .fp-section > .fp-section-tete h3:focus-visible { outline: 2px solid var(--fs); } #fiche .fp-corps > .fp-section > .fp-section-tete h3[tabindex]::after { content: ""; margin-left: auto; margin-right: 4px; flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--fs-txt, var(--fs)); border-bottom: 2.5px solid var(--fs-txt, var(--fs)); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; } #fiche .fp-corps > .fp-section .fp-section-tete .fp-sec-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; color: #FFFFFF; background: var(--fs); box-shadow: 0 4px 10px color-mix(in srgb, var(--fs) 35%, transparent); transform: rotate(-4deg); transition: transform .2s ease; } #fiche .fp-corps > .fp-section .fp-section-tete .fp-sec-ico svg { width: 19px; height: 19px; } #fiche .fp-corps > .fp-section .fp-section-tete h3:hover .fp-sec-ico { transform: rotate(0); } #fiche .fp-corps > .fp-section .fp-section-tete .fp-compte { background: color-mix(in srgb, var(--fs) 14%, var(--blanc)); color: var(--fs-txt, var(--fs)); } #fiche .fp-corps > .fp-section .fp-section-tete .fp-compte.plein { background: var(--fs); color: #FFFFFF; } #fiche .fp-corps > .fp-section.replie { padding-bottom: 0; } #fiche .fp-corps > .fp-section.replie > .fp-section-tete { margin-bottom: 0; border-bottom-color: transparent; } #fiche .fp-corps > .fp-section.replie > :not(.fp-section-tete) { display: none !important; } #fiche .fp-corps > .fp-section.replie > .fp-section-tete h3::after { transform: rotate(-45deg) translate(-1px, 1px); } #fiche .fp-corps > .fp-section.replie > .fp-section-tete .fp-section-actions { display: none; } .fp-sec-titre { display: grid; min-width: 0; line-height: 1.2; } .fp-sec-titre small { font-size: 12.5px; font-weight: 500; color: var(--encre2); } #fiche .fp-corps > .fp-groupe:first-child, #fiche .fp-corps > .fp-contact + .fp-groupe { margin-top: 0; } #fiche .fp-corps > .fr-tuiles + .fp-groupe { margin-top: 12px; } #fiche .fp-groupe .fp-champ { border-color: color-mix(in srgb, var(--fs) 14%, var(--trait-leger)); border-left: 3px solid color-mix(in srgb, var(--fs) 45%, var(--blanc)); } #fiche .fp-groupe .fp-lib { color: color-mix(in srgb, var(--fs-txt, var(--fs)) 70%, var(--encre2)); } .fp-manque { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; color: var(--encre2); background: color-mix(in srgb, var(--fs, var(--vert)) 5%, var(--papier)); border: 1px dashed color-mix(in srgb, var(--fs, var(--vert)) 20%, var(--trait)); } .fp-manque svg { flex: none; margin-top: 2px; opacity: .7; } .fp-manque b { font-weight: 700; } .fp-champs + .fp-manque { margin-top: 10px; } .fp-groupe > .fp-manque:first-of-type:nth-child(2) { margin-top: 0; } /* Les tuiles du haut d'une fiche (client) */ .fr-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 12px; } .fr-tuile { --t: #1D5FA8; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; min-width: 0; font: inherit; text-align: left; color: var(--encre); cursor: pointer; border: 1px solid color-mix(in srgb, var(--t) 22%, var(--trait)); background: linear-gradient(150deg, color-mix(in srgb, var(--t) 9%, var(--blanc)), var(--blanc) 70%); transition: transform .15s ease, box-shadow .15s ease; } .fr-tuile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 30, 50, .08); } .fr-tuile:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; } .fr-tuile.t-vert, .fr-tuile.t-ok { --t: #15803D; } .fr-tuile.t-ambre { --t: #B45309; } .fr-tuile.t-rouge { --t: #C4320A; } .fr-tuile.t-gris { --t: #64748B; } .fr-t-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; color: #FFFFFF; background: var(--t); box-shadow: 0 3px 8px color-mix(in srgb, var(--t) 35%, transparent); } .fr-tuile > span:last-child { display: grid; min-width: 0; line-height: 1.25; } .fr-tuile b { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--encre); overflow-wrap: anywhere; } .fr-tuile > span:last-child > span { font-size: 13px; font-weight: 600; } .fr-tuile small { font-size: 12px; color: var(--encre2); } .fr-tuile.t-ambre b { color: var(--ambre-texte); } .fr-tuile.t-rouge b { color: var(--rouge-texte); } /* Les factures et devis d'une fiche : montant à droite, pastilles de résumé qui filtrent, la suite repliée */ .fe-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .fe-puce { --c: #64748B; display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; color: var(--encre); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--trait)); background: color-mix(in srgb, var(--c) 8%, var(--blanc)); } .fe-puce b { color: var(--c); font-variant-numeric: tabular-nums; } .fe-puce small { font-size: 12px; color: var(--encre2); font-variant-numeric: tabular-nums; } .fe-puce.t-rouge { --c: #C4320A; } .fe-puce.t-ambre { --c: #B45309; } .fe-puce.t-vert { --c: #15803D; } .fe-puce.t-bleu { --c: #1D5FA8; } .fe-puce[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #FFFFFF; } .fe-puce[aria-pressed="true"] b, .fe-puce[aria-pressed="true"] small { color: #FFFFFF; } :root[data-theme="dark"] .fe-puce b { color: color-mix(in srgb, var(--c) 55%, #FFFFFF); } @media (prefers-color-scheme: dark) { :root.theme-auto .fe-puce b { color: color-mix(in srgb, var(--c) 55%, #FFFFFF); } } .fe-droite { display: flex !important; align-items: center; gap: 10px; flex: none; } .fe-montant { display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; } .fe-montant b { font-size: 14.5px; white-space: nowrap; } .fe-montant small { white-space: nowrap; } .fp-enfant.fe-echue { border-left: 3px solid var(--rouge-texte); } .fp-enfant.fe-aregler { border-left: 3px solid #D9A443; } .fp-enfant.fe-reglee .fe-montant b, .fp-enfant.fe-refuse .fe-montant b { color: var(--encre2); font-weight: 600; } .fp-court:not(.fp-filtre) > li:nth-child(n+7) { display: none; } .fp-voir-tout { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--fs-txt, var(--fs, var(--lien))); background: color-mix(in srgb, var(--fs, var(--vert)) 6%, var(--blanc)); border: 1px dashed color-mix(in srgb, var(--fs, var(--vert)) 30%, var(--trait)); border-radius: 10px; cursor: pointer; } .fp-voir-tout[aria-expanded="true"] svg { transform: rotate(180deg); } .fp-filtre + .fp-voir-tout { display: none; } /* Les chiffres du haut des fiches (facture, devis, véhicule, article) en tuiles */ #fiche .fp-resume > div { background: linear-gradient(150deg, color-mix(in srgb, var(--vert) 10%, var(--blanc)), var(--blanc) 75%); border: 1px solid color-mix(in srgb, var(--vert) 22%, var(--trait)); border-radius: 14px; } @media (max-width: 760px) { #fiche .fp-corps > .fp-section { padding: 0 11px 12px; } #fiche .fp-corps > .fp-section > .fp-section-tete { margin: 0 -11px 12px; padding: 10px 11px; } #fiche .fp-corps > .fp-section > .fp-section-tete h3 { font-size: 16px; } #fiche .fp-groupe .fp-champs { border: 0; border-radius: 0; } #fiche .fp-groupe .fp-champ { border-left: 0; } .fr-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .fr-tuile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 9px; } .fr-t-ico { width: 30px; height: 30px; border-radius: 9px; } .fr-tuile b { font-size: 16px; } .fr-tuile > span:last-child > span { font-size: 12px; } .fp-enfant:has(.fe-droite) { flex-wrap: wrap; } .fp-enfant:has(.fe-droite) > span:first-child { flex: 1 1 180px; } } @media (prefers-reduced-motion: reduce) { #fiche .fp-sec-ico, .fr-tuile { transition: none; } } /* 1.68.0 — Module « Chantiers » : la frise des étapes, les métrés par lot, l'éditeur de métré (réglages à gauche, calcul à droite), les situations de travaux, les packs de calculs. */ .ch-haut { display: grid; gap: 12px; margin-bottom: 4px; } #fiche .ch-haut .fr-tuiles { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-frise-carte { border: 1px solid var(--trait); border-radius: 16px; padding: 14px 14px 12px; background: var(--blanc); } .ch-frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); counter-reset: none; } .ch-pas { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; } .ch-pas:not(:first-child)::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: var(--trait); z-index: 0; } .ch-pas.ok:not(:first-child)::before, .ch-pas.actif:not(:first-child)::before { background: #B45309; } .ch-rond { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 800; font-size: 14px; background: var(--blanc); border: 2px solid var(--trait); color: var(--encre2); } .ch-pas.ok .ch-rond { background: #B45309; border-color: #B45309; color: #FFFFFF; } .ch-pas.actif .ch-rond { background: #FFF3E3; border-color: #B45309; color: #8A3C05; box-shadow: 0 0 0 4px color-mix(in srgb, #B45309 18%, transparent); } .ch-pas-lib { font-size: 12.5px; font-weight: 600; color: var(--encre2); line-height: 1.2; overflow-wrap: anywhere; } .ch-pas.actif .ch-pas-lib { color: var(--encre); font-weight: 800; } .ch-abandon .ch-frise { opacity: .45; } .ch-abandon-txt { margin: 8px 0 0; display: flex; gap: 6px; align-items: center; color: var(--rouge-texte); font-weight: 700; } .ch-suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--trait); } .ch-suite p { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--encre2); font-size: 13.5px; flex: 1 1 260px; min-width: 0; } .ch-suite p svg { flex: none; margin-top: 2px; } .ch-suite-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } :root[data-theme="dark"] .ch-pas.actif .ch-rond { background: #3A2410; color: #FBD5A8; } @media (prefers-color-scheme: dark) { :root.theme-auto .ch-pas.actif .ch-rond { background: #3A2410; color: #FBD5A8; } } .ch-intro { margin: 0 0 10px; color: var(--encre2); } .ch-types-groupe + .ch-types-groupe { margin-top: 12px; } .ch-types-groupe h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); } .ch-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .ch-type { display: grid; justify-items: center; gap: 4px; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--trait); background: var(--blanc); font: inherit; color: var(--encre); text-align: center; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .ch-type:hover, .ch-type:focus-visible { transform: translateY(-2px); border-color: #B45309; box-shadow: 0 8px 18px rgba(20, 30, 50, .1); outline: none; } .ch-type b { font-size: 14px; } .ch-type small { font-size: 12px; color: var(--encre2); line-height: 1.25; } .ch-picto { --p: #B45309; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--p); flex: none; background: color-mix(in srgb, var(--p) 12%, var(--blanc)); } .ch-picto svg { width: 32px; height: 32px; } .ch-picto.t-MUR_BLOCS, .ch-picto.t-SEMELLE { --p: #475569; } .ch-picto.t-TERRASSEMENT { --p: #92400E; } .ch-picto.t-ENDUIT { --p: #A16207; } .ch-picto.t-CARRELAGE { --p: #0F766E; } .ch-picto.t-PEINTURE { --p: #BE185D; } .ch-picto.t-CLOISON { --p: #6941C6; } .ch-picto.t-FORFAIT { --p: #1D5FA8; } :root[data-theme="dark"] .ch-picto { color: color-mix(in srgb, var(--p) 55%, #FFFFFF); } @media (prefers-color-scheme: dark) { :root.theme-auto .ch-picto { color: color-mix(in srgb, var(--p) 55%, #FFFFFF); } } .ch-lot + .ch-lot { margin-top: 14px; } .ch-lot-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 0 2px 6px; border-bottom: 2px solid color-mix(in srgb, var(--fs, #B45309) 30%, var(--trait)); margin-bottom: 8px; } .ch-lot-tete b { font-size: 15px; } .ch-lot-tete span { font-size: 13px; color: var(--encre2); font-variant-numeric: tabular-nums; } .ch-metres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ch-metre { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 13px; border: 1px solid var(--trait-leger); background: var(--blanc); font: inherit; color: var(--encre); text-align: left; cursor: pointer; } .ch-metre:hover, .ch-metre:focus-visible { border-color: color-mix(in srgb, var(--fs, #B45309) 45%, var(--trait)); background: color-mix(in srgb, var(--fs, #B45309) 4%, var(--blanc)); outline: none; } .ch-metre .ch-picto { width: 40px; height: 40px; } .ch-metre .ch-picto svg { width: 27px; height: 27px; } .ch-m-txt { display: grid; min-width: 0; flex: 1 1 auto; line-height: 1.3; } .ch-m-txt small { color: var(--encre2); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ch-m-alerte { font-style: normal; font-size: 12px; color: var(--ambre-texte); display: inline-flex; gap: 4px; align-items: center; margin-top: 2px; } .ch-m-chiffres { display: grid; justify-items: end; text-align: right; flex: none; font-variant-numeric: tabular-nums; line-height: 1.3; } .ch-m-chiffres b { font-size: 14.5px; white-space: nowrap; } .ch-m-chiffres span { font-size: 13px; color: var(--encre2); white-space: nowrap; } .ch-total { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--fs, #B45309) 8%, var(--blanc)); } .ch-total span { font-weight: 700; } .ch-total b { font-size: 18px; font-variant-numeric: tabular-nums; } .ch-total small { grid-column: 1 / -1; color: var(--encre2); font-size: 12.5px; } .ch-devis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .ch-devis .aide { flex: 1 1 100%; margin: 0; } .ch-devis-btns { display: flex; flex-wrap: wrap; gap: 8px; } .ch-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; background: var(--blanc); } .ch-seg button { font: inherit; font-size: 13px; padding: 7px 11px; border: 0; background: transparent; color: var(--encre); cursor: pointer; } .ch-seg button + button { border-left: 1px solid var(--trait); } .ch-seg button.actif { background: #B45309; color: #FFFFFF; font-weight: 700; } /* L'éditeur */ .ch-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; } .ch-ed-tete { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .ch-ed-tete div { display: grid; } .ch-ed-tete small { color: var(--encre2); } .ch-ed-2, .ch-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ch-champs { margin-top: 10px; } .ch-champ { display: grid; gap: 4px; min-width: 0; align-content: start; } .ch-champ.ch-large { grid-column: 1 / -1; } .ch-lib { font-size: 12.5px; font-weight: 700; color: var(--encre); } .ch-champ small { font-size: 12px; color: var(--encre2); line-height: 1.3; } .ch-champ > input[type=text], .ch-sit-date input { width: 100%; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); color: var(--encre); } .ch-champ > input[type=text]:focus, .ch-sit-date input:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .ch-num { display: flex; align-items: center; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); overflow: hidden; } .ch-num input { border: 0 !important; box-shadow: none !important; flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; padding: 8px 8px; background: transparent; } .ch-num i { font-style: normal; font-size: 12.5px; color: var(--encre2); padding: 0 10px 0 2px; white-space: nowrap; } .ch-num:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 20%, transparent); } .ch-bool { display: flex; gap: 8px; align-items: center; font-size: 14px; } .ch-ed-droite { position: sticky; top: 0; border-radius: 14px; padding: 14px; background: color-mix(in srgb, #B45309 5%, var(--papier)); border: 1px solid color-mix(in srgb, #B45309 18%, var(--trait)); min-width: 0; } .ch-res-ouvrage { display: flex; gap: 12px; align-items: center; } .ch-res-ouvrage > span { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: #8A3C05; } .ch-res-ouvrage > span i { font-style: normal; font-size: 15px; margin-left: 3px; } .ch-res-ouvrage p { margin: 0; font-size: 13.5px; line-height: 1.35; min-width: 0; } :root[data-theme="dark"] .ch-res-ouvrage > span { color: #FBD5A8; } @media (prefers-color-scheme: dark) { :root.theme-auto .ch-res-ouvrage > span { color: #FBD5A8; } } .ch-resume { margin: 10px 0 0; display: grid; gap: 3px; } .ch-resume div { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px; font-size: 13px; } .ch-resume dt { color: var(--encre2); } .ch-resume dd { margin: 0; font-weight: 600; min-width: 0; } .ch-res-titre { margin: 12px 0 4px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--encre2); } .ch-four-cadre { overflow-x: auto; } .ch-four { width: 100%; border-collapse: collapse; font-size: 13px; } .ch-four td { padding: 4px 4px; border-bottom: 1px solid var(--trait-leger); vertical-align: top; } .ch-four td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .ch-res-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; } .ch-res-chiffres div { display: grid; padding: 7px 9px; border-radius: 10px; background: var(--blanc); border: 1px solid var(--trait-leger); } .ch-res-chiffres b { font-size: 15px; font-variant-numeric: tabular-nums; } .ch-res-chiffres span { font-size: 12px; color: var(--encre2); } .ch-res-chiffres .ch-res-vente { border-color: #B45309; } .ch-res-chiffres .ch-res-vente b { color: #8A3C05; } .ch-res-chiffres .ch-faible b { color: var(--rouge-texte); } :root[data-theme="dark"] .ch-res-chiffres .ch-res-vente b { color: #FBD5A8; } @media (prefers-color-scheme: dark) { :root.theme-auto .ch-res-chiffres .ch-res-vente b { color: #FBD5A8; } } .ch-alertes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .ch-alertes li { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; padding: 7px 9px; border-radius: 9px; background: var(--ambre-fond, #FFF6E6); color: var(--ambre-texte); } .ch-alertes svg { flex: none; margin-top: 1px; } .ch-ed-droite .aide { margin: 10px 0 0; font-size: 12px; } /* Les situations */ .ch-avance { margin-bottom: 10px; } .ch-avance-txt { font-size: 13.5px; margin-bottom: 6px; } .ch-avance-txt b { font-size: 17px; } .ch-avance-txt small { color: var(--encre2); } .ch-jauge { height: 10px; border-radius: 999px; background: var(--trait-leger); overflow: hidden; } .ch-jauge span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B45309, #E08A2B); } .ch-sits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ch-sit { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 13px; border: 1px solid var(--trait-leger); background: var(--blanc); font: inherit; color: var(--encre); text-align: left; cursor: pointer; } .ch-sit:hover, .ch-sit:focus-visible { border-color: color-mix(in srgb, var(--fs, #B45309) 45%, var(--trait)); outline: none; } .ch-sit-no { display: grid; place-items: center; min-width: 46px; height: 40px; border-radius: 11px; font-weight: 800; font-size: 13px; background: color-mix(in srgb, var(--fs, #B45309) 12%, var(--blanc)); color: var(--fs-txt, var(--fs, #B45309)); flex: none; } .ch-sit-txt { display: grid; min-width: 0; flex: 1 1 auto; } .ch-sit-txt small { color: var(--encre2); font-size: 12.5px; } .ch-sit-ed .md-texte { margin-top: 0; } .ch-sit-outils { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 10px; } .ch-sit-date { display: grid; gap: 4px; margin: 0; } .ch-sit-date span { font-size: 12.5px; font-weight: 700; } .ch-sl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ch-sl-section { margin-top: 8px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #8A3C05; } .ch-sl { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(170px, 1fr) 110px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--trait-leger); } .ch-sl-des { display: grid; min-width: 0; } .ch-sl-des b { font-weight: 600; font-size: 13.5px; } .ch-sl-des small { color: var(--encre2); font-size: 12px; } .ch-sl-pct { display: flex; gap: 8px; align-items: center; min-width: 0; } .ch-sl-pct input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: #B45309; } .ch-num-court { width: 78px; flex: none; } .ch-sl-mt { display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; } .ch-sl-mt small { color: var(--encre2); font-size: 11.5px; } .ch-sit-total { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; } .ch-sit-total div { display: grid; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--trait); background: var(--blanc); } .ch-sit-total span { font-size: 12px; color: var(--encre2); font-weight: 600; } .ch-sit-total b { font-size: 17px; font-variant-numeric: tabular-nums; } .ch-sit-total small { font-size: 11.5px; color: var(--encre2); } .ch-sit-total .ch-sit-periode { border-color: #B45309; background: color-mix(in srgb, #B45309 7%, var(--blanc)); } /* Paramètres */ .ch-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .ch-pack { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--trait); border-radius: 14px; cursor: pointer; } .ch-pack:has(input:checked) { border-color: #B45309; background: color-mix(in srgb, #B45309 6%, var(--blanc)); } .ch-pack input { margin-top: 3px; } .ch-pack > span { display: grid; gap: 3px; min-width: 0; } .ch-pack small { color: var(--encre2); } .ch-pack-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ch-pack-types .ch-picto { width: 34px; height: 34px; border-radius: 10px; } .ch-pack-types .ch-picto svg { width: 23px; height: 23px; } .ch-tarifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; } @media (max-width: 760px) { #fiche .ch-haut .fr-tuile { flex-direction: row; align-items: center; } .ch-frise { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ch-pas-lib { font-size: 10px; overflow-wrap: normal; letter-spacing: -.01em; } .ch-rond { width: 28px; height: 28px; font-size: 13px; } .ch-pas:not(:first-child)::before { top: 13px; } .ch-ed { grid-template-columns: minmax(0, 1fr); } .ch-ed-droite { position: static; } .ch-metre { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; } .ch-m-chiffres { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-items: start; text-align: left; align-items: baseline; } .ch-sl { grid-template-columns: minmax(0, 1fr) auto; } .ch-sl-des { grid-column: 1 / -1; } .ch-sit { flex-wrap: wrap; } .ch-sit .fe-droite { margin-left: auto; } } @media (max-width: 420px) { .ch-ed-2, .ch-champs { grid-template-columns: minmax(0, 1fr); } .ch-champ.ch-large { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .ch-type { transition: none; } } /* 1.69.0 — Chantiers : les marchés à bons de commande, leur bordereau, le choix des prix dans un bon. */ .ch-marche { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; font: inherit; color: var(--encre); text-align: left; cursor: pointer; border: 1px solid color-mix(in srgb, #1D5FA8 25%, var(--trait)); background: color-mix(in srgb, #1D5FA8 6%, var(--blanc)); } .ch-marche > span:nth-child(2) { display: grid; min-width: 0; flex: 1 1 auto; } .ch-marche small { color: var(--encre2); } .ch-marche > svg { transform: rotate(-90deg); flex: none; color: var(--encre2); } .ch-marche-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #1D5FA8; color: #FFFFFF; flex: none; } .ch-code { display: inline-grid; place-items: center; min-width: 52px; padding: 4px 7px; border-radius: 8px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; background: color-mix(in srgb, #1D5FA8 10%, var(--blanc)); color: #1D4F8A; flex: none; overflow-wrap: anywhere; } :root[data-theme="dark"] .ch-code { color: #A9C8F0; } @media (prefers-color-scheme: dark) { :root.theme-auto .ch-code { color: #A9C8F0; } } .ch-bpu .ch-m-txt b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bp-q { width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); color: var(--encre); margin-bottom: 10px; } .bp-q:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); } .bp-liste { display: grid; gap: 6px; max-height: min(60vh, 560px); overflow-y: auto; padding-right: 2px; } .bp-chap { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--encre2); } .bp-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 112px; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--trait-leger); cursor: pointer; } .bp-ligne.choisi { border-color: #1D5FA8; background: color-mix(in srgb, #1D5FA8 6%, var(--blanc)); } .bp-des { font-size: 13.5px; line-height: 1.35; min-width: 0; } .bp-pu { display: grid; justify-items: end; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .bp-pu small { font-weight: 500; color: var(--encre2); font-size: 11.5px; } .bp-total { margin-right: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .bp-table-cadre { overflow-x: auto; border: 1px solid var(--trait-leger); border-radius: 12px; } .bp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .bp-table th { text-align: left; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); padding: 7px 9px; background: var(--papier); border-bottom: 1px solid var(--trait); } .bp-table td { padding: 6px 9px; border-bottom: 1px solid var(--trait-leger); vertical-align: top; } .bp-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .bp-table tbody tr[tabindex] { cursor: pointer; } .bp-table tbody tr[tabindex]:hover, .bp-table tbody tr[tabindex]:focus-visible { background: color-mix(in srgb, var(--fs, #1D5FA8) 6%, var(--blanc)); outline: none; } .bp-c { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .bp-chap-l td { font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); background: color-mix(in srgb, var(--fs, #1D5FA8) 4%, var(--blanc)); } .bp-chap-mini { color: var(--encre2); } .bp-fichier { display: inline-flex; position: relative; margin: 4px 0 10px; } .bp-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .bp-fichier span { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 10px; background: #1D5FA8; color: #FFFFFF; font-weight: 700; } .bp-fichier:focus-within span { box-shadow: 0 0 0 3px color-mix(in srgb, #1D5FA8 35%, transparent); } .bp-coller { margin-bottom: 10px; } .bp-coller summary { cursor: pointer; color: var(--lien); font-weight: 600; } .bp-coller textarea { width: 100%; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; margin: 8px 0; padding: 8px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); color: var(--encre); } .bp-compte { margin: 6px 0 8px; } .bp-mode { margin-top: 10px; } .ma-jauge { margin-top: -2px; } .ma-bons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ma-bons label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--trait-leger); cursor: pointer; } .ma-bons label > span { display: grid; min-width: 0; flex: 1 1 auto; } .ma-bons small { color: var(--encre2); font-size: 12.5px; } .ma-mt { font-variant-numeric: tabular-nums; white-space: nowrap; } .ch-total-court { font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .bp-ligne { grid-template-columns: auto minmax(0, 1fr); } .bp-pu { grid-column: 2; justify-items: start; display: flex; gap: 6px; align-items: baseline; } .bp-ligne .ch-num { grid-column: 2; width: 140px; } .ch-bpu { grid-template-columns: auto minmax(0, 1fr) !important; } } /* 1.70.0 — Chantiers : les photos (avant, pendant, après), la réception (réserves, PV), la retenue de garantie. */ .ch-ph-trio { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .ch-pv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--trait); background: var(--blanc); margin-bottom: 10px; } .ch-pv > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; } .ch-pv small { color: var(--encre2); font-size: 13px; line-height: 1.4; } .ch-pv-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; color: #FFFFFF; background: #6B7686; } .ch-pv-ok { border-color: color-mix(in srgb, #1F8A4C 30%, var(--trait)); background: color-mix(in srgb, #1F8A4C 6%, var(--blanc)); } .ch-pv-ok .ch-pv-ico { background: #1F8A4C; } .ch-pv-reserves { border-color: color-mix(in srgb, #C77A0A 35%, var(--trait)); background: color-mix(in srgb, #C77A0A 7%, var(--blanc)); } .ch-pv-reserves .ch-pv-ico { background: #C77A0A; } .ch-pv-attente .ch-pv-ico { background: #1D5FA8; } .ch-res-reste { color: #A15F00; } :root[data-theme="dark"] .ch-res-reste { color: #F2B65A; } @media (prefers-color-scheme: dark) { :root.theme-auto .ch-res-reste { color: #F2B65A; } } .ch-reserves { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ch-res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--trait-leger); border-radius: 12px; background: var(--blanc); } .ch-res-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-variant-numeric: tabular-nums; background: #C77A0A; color: #FFFFFF; } .ch-res.levee .ch-res-no { background: #1F8A4C; } .ch-res-corps { display: grid; gap: 4px; min-width: 0; } .ch-res-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; align-items: baseline; } .ch-res-tete b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; flex: 1 1 220px; } .ch-res.levee .ch-res-tete b { color: var(--encre2); } .ch-res-etat { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .ch-res-etat.ouverte { background: color-mix(in srgb, #C77A0A 14%, var(--blanc)); color: #8A5200; } .ch-res-etat.ok { background: color-mix(in srgb, #1F8A4C 14%, var(--blanc)); color: #17673A; } :root[data-theme="dark"] .ch-res-etat.ouverte { color: #F2B65A; } :root[data-theme="dark"] .ch-res-etat.ok { color: #7FD3A2; } @media (prefers-color-scheme: dark) { :root.theme-auto .ch-res-etat.ouverte { color: #F2B65A; } :root.theme-auto .ch-res-etat.ok { color: #7FD3A2; } } .ch-res small { color: var(--encre2); font-size: 12.5px; } .ch-res-photos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ch-res-photos .ph-grille { grid-template-columns: repeat(auto-fill, 58px); } .ch-res-fleche { color: var(--encre2); display: grid; } .ch-res-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 2px; } .ch-pv-liste { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; display: grid; gap: 3px; } .ch-rt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--trait); background: var(--blanc); } .ch-rt-montant { display: grid; } .ch-rt-montant b { font-size: 22px; font-variant-numeric: tabular-nums; } .ch-rt-montant small { color: var(--encre2); } .ch-rt-etat { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 240px; } .ch-rt-etat > span:last-child { display: grid; min-width: 0; } .ch-rt-etat small { color: var(--encre2); font-size: 13px; } .ch-rt-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none; color: #FFFFFF; background: #1D5FA8; } .ch-rt-reclamer { border-color: color-mix(in srgb, #C0392B 35%, var(--trait)); background: color-mix(in srgb, #C0392B 6%, var(--blanc)); } .ch-rt-reclamer .ch-rt-ico { background: #C0392B; } .ch-rt-rendue .ch-rt-ico { background: #1F8A4C; } .ch-tdb-ligne { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--encre); background: none; border: 0; text-align: left; } button.ch-tdb-ligne { cursor: pointer; } button.ch-tdb-ligne:hover b { text-decoration: underline; } .ch-tdb-ligne svg { flex: none; margin-top: 2px; } .ch-tdb-ligne.rouge svg { color: #C0392B; } @media (max-width: 520px) { .ch-res { padding: 9px 10px; } .ch-rt-montant b { font-size: 20px; } } /* 1.71.0 — Paramètres → Chantiers : les prix par corps de métier, repliables, habillés comme les sections des fiches. */ .ch-prix-groupe { margin-bottom: 10px; background: var(--blanc); } .ch-prix-groupe > summary { display: flex; align-items: center; cursor: pointer; list-style: none; } .ch-prix-groupe > summary::-webkit-details-marker { display: none; } .ch-prix-ico svg { width: 21px; height: 21px; stroke-width: 2.6; } .ch-prix-groupe .form-section-corps { padding: 12px 14px 12px; } /* 1.71.0 — Chantiers : le journal de chantier ; les avenants et la révision des prix d'un marché. */ .cj-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cj-jour { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--trait-leger); border-left: 4px solid #1D5FA8; border-radius: 12px; background: var(--blanc); min-width: 0; } .cj-jour.cj-incident { border-left-color: #C77A0A; } .cj-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .cj-tete b { font-weight: 700; } .cj-tete .lien-txt { margin-left: auto; } .cj-meteo { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--encre2); padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, #1D5FA8 7%, var(--blanc)); } .cj-equipe { display: flex; align-items: center; gap: 5px; color: var(--encre2); font-size: 12.5px; } .cj-txt { margin: 0; white-space: pre-line; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .cj-inc { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; padding: 6px 9px; border-radius: 9px; white-space: pre-line; background: color-mix(in srgb, #C77A0A 9%, var(--blanc)); color: var(--encre); overflow-wrap: anywhere; } .cj-inc svg { flex: none; margin-top: 2px; color: #A15F00; } .cj-jour .ph-grille { grid-template-columns: repeat(auto-fill, 64px); } .cj-seg { flex-wrap: wrap; } .cj-seg button { display: inline-flex; align-items: center; gap: 4px; } .ma-rev { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--trait); background: var(--blanc); margin-bottom: 10px; } .ma-rev > span:last-child { display: grid; min-width: 0; } .ma-rev small { color: var(--encre2); font-size: 13px; } .ma-rev-k { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius: 10px; background: #1D5FA8; color: #FFFFFF; } .ma-avs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ma-av { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--trait-leger); border-radius: 11px; } .ma-av-no { flex: none; font-weight: 800; font-size: 12.5px; padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, #1D5FA8 10%, var(--blanc)); color: #1D4F8A; } :root[data-theme="dark"] .ma-av-no { color: #A9C8F0; } @media (prefers-color-scheme: dark) { :root.theme-auto .ma-av-no { color: #A9C8F0; } } .ma-av-txt { display: grid; min-width: 0; } .ma-av-txt small { color: var(--encre2); font-size: 12.5px; } /* 1.71.0 — « Nouveau métré » : les corps de métier côte à côte (un groupe prend la place de ses ouvrages). */ .ch-types-tous { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-start; } .ch-types-tous .ch-types-groupe { flex: 0 1 auto; min-width: 0; max-width: 100%; } .ch-types-tous .ch-types { display: flex; flex-wrap: wrap; gap: 8px; } .ch-types-tous .ch-type { width: 156px; } @media (max-width: 520px) { .ch-types-tous .ch-types-groupe { flex-basis: 100%; } .ch-types-tous .ch-type { width: calc(50% - 4px); } } .ch-types-tous .ch-types-groupe + .ch-types-groupe { margin-top: 0; } /* ── 1.72.0 — Chantiers : planning des équipes ─────────────────────────────────────────────────────────── */ /* Couleurs des pastilles (thème clair, puis sombre plus bas) */ .plc-barre-haut { margin-bottom: 12px; } .plc-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .plc-fl { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); cursor: pointer; transition: transform .15s, box-shadow .15s; } .plc-fl:hover { transform: scale(1.06); box-shadow: var(--ombre); } .plc-fl-d svg { transform: rotate(180deg); } .plc-sem { display: grid; line-height: 1.15; padding: 4px 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--blanc)), var(--blanc)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--trait)); } .plc-sem small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .plc-sem b { font-size: 17px; } .plc-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .plc-stat { --sc: #1D5FA8; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; color: var(--encre); background: color-mix(in srgb, var(--sc) 12%, var(--blanc)); border: 1px solid color-mix(in srgb, var(--sc) 28%, var(--trait)); } .plc-stat svg { color: var(--sc); } .plc-stat b { font-size: 15px; color: var(--sc); } .plc-stat.s-vert { --sc: #0E7D59; } .plc-stat.s-violet { --sc: #6941C6; } .plc-stat.s-ambre { --sc: #B45309; } .plc-stat.s-rouge { --sc: #C0261B; } .plc-jauge { display: inline-block; width: 60px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--sc) 18%, var(--blanc)); overflow: hidden; } .plc-jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sc), color-mix(in srgb, var(--sc) 60%, #FFFFFF)); } .plc-corps { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; } .plc-corps.plc-seul { grid-template-columns: minmax(0, 1fr); } .plc-cadre { overflow-x: auto; border: 1px solid var(--trait); border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre); } .plc { display: grid; min-width: 780px; --plc-cols: 168px repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .5fr)); } .plc-ligne { display: grid; grid-template-columns: var(--plc-cols); border-top: 1px solid var(--trait-leger); position: relative; } .plc-tete { border-top: 0; background: linear-gradient(180deg, var(--survol), var(--blanc)); border-radius: 18px 18px 0 0; } .plc-nom { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 0; border-right: 1px solid var(--trait-leger); grid-column: 1; } .plc-tete .plc-nom { color: var(--encre2); font-weight: 600; font-size: 13px; gap: 6px; } .plc-nom-txt { display: grid; gap: 1px; min-width: 0; } .plc-nom-txt b { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; } .plc-nom-txt small { color: var(--encre2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plc-avatar { width: var(--ta, 34px); height: var(--ta, 34px); flex: none; border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--ta, 34px) * .38); font-weight: 800; letter-spacing: .02em; color: #FFFFFF; background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 65%, #FFFFFF)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 22%, transparent); } .plc-charge { display: flex; gap: 3px; margin-top: 4px; } .plc-charge i { width: 12px; height: 5px; border-radius: 3px; background: var(--trait); } .plc-charge i.plein { background: var(--action); } .plc-jour { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 10px; border-left: 1px solid var(--trait-leger); } .plc-js { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); } .plc-jn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: var(--encre); } .plc-jour.plc-auj .plc-js { color: var(--accent); } .plc-jour.plc-auj .plc-jn { color: #FFFFFF; background: var(--action); box-shadow: 0 3px 10px color-mix(in srgb, var(--action) 40%, transparent); } .plc-jour.plc-we .plc-jn { color: var(--encre3); font-weight: 600; } .plc-case { border-left: 1px solid var(--trait-leger); min-width: 0; position: relative; } .plc:not(.plc-en-glisse) .plc-case[onclick] { cursor: pointer; } .plc-case[onclick]::after { content: '+'; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: 16px; font-weight: 700; line-height: 1; color: var(--accent); opacity: 0; transition: opacity .15s; } .plc-case[onclick]:hover { background: color-mix(in srgb, var(--accent) 6%, var(--blanc)); } .plc-case[onclick]:hover::after { opacity: .9; } .plc-case.plc-we { background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--trait) 45%, transparent) 7px 8px); } .plc-case.plc-auj { background: color-mix(in srgb, var(--action) 7%, var(--blanc)); } .plc-case.plc-cible { background: color-mix(in srgb, var(--accent) 16%, var(--blanc)); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 10px; } .plc-en-glisse .plc-barre:not(.plc-glisse) { pointer-events: none; } .plc-en-glisse .plc-barre.plc-glisse { pointer-events: none; } /* Les barres : du premier au dernier jour, à la couleur du chantier */ .plc-barre { position: relative; z-index: 1; margin: 5px 4px; min-width: 0; align-self: center; min-height: 42px; display: flex; align-items: center; gap: 7px; text-align: left; font: inherit; color: #FFFFFF; cursor: pointer; padding: 6px 9px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 72%, #FFFFFF)); box-shadow: 0 2px 8px color-mix(in srgb, var(--pc) 35%, transparent); transition: transform .15s, box-shadow .15s; } .plc-barre:hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 45%, transparent); } .plc-barre:focus-visible { outline: 3px solid color-mix(in srgb, var(--pc) 45%, var(--blanc)); outline-offset: 2px; } .plc-barre.plc-avant { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .plc-barre.plc-apres { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .plc-b-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .22); } .plc-b-txt { display: grid; min-width: 0; line-height: 1.2; } .plc-b-txt b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plc-b-txt small { font-size: 11.5px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plc-court .plc-b-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .plc-court .plc-b-ico { display: none; } .plc-b-cr { flex: none; margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--pc); } .plc-barre.plc-conflit { background: repeating-linear-gradient(135deg, #C0261B 0 10px, #D9473B 10px 20px); box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px #C0261B; animation: plc-vibre 2.4s ease-in-out infinite; } .plc-barre.plc-conflit .plc-b-cr { color: #C0261B; } @keyframes plc-vibre { 0%, 90%, 100% { transform: none; } 93% { transform: translateX(-2px); } 96% { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .plc-barre, .plc-fl, .plc-ap { transition: none; } .plc-barre.plc-conflit { animation: none; } } .plc-glisse { opacity: .45; } /* À planifier */ .plc-attente { border: 1px solid var(--trait); border-radius: 18px; background: var(--blanc); padding: 14px; display: grid; gap: 9px; position: sticky; top: 12px; box-shadow: var(--ombre); } .plc-attente h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; } .plc-h-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(135deg, #B45309, #E0892F); } .plc-attente .aide { margin: 0; font-size: 12.5px; } .plc-ap { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 12px; cursor: grab; color: var(--encre); background: color-mix(in srgb, var(--pc) 10%, var(--blanc)); border: 1px solid color-mix(in srgb, var(--pc) 30%, var(--trait)); border-left: 5px solid var(--pc); transition: transform .15s, box-shadow .15s; } .plc-ap:hover { transform: translateX(-3px); box-shadow: 0 4px 12px color-mix(in srgb, var(--pc) 25%, transparent); } .plc-ap .plc-b-ico { background: var(--pc); color: #FFFFFF; } .plc-ap .plc-b-txt small { color: var(--encre2); opacity: 1; } .plc-ap .plc-b-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .plc-poignee { margin-left: auto; color: var(--encre3); flex: none; } .plc-ok { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 10px 4px 4px; } .plc-ok > span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(135deg, #0E7D59, #3CB98A); box-shadow: 0 4px 14px rgba(14, 125, 89, .35); } .plc-ok p { margin: 0; font-size: 13px; color: var(--encre2); line-height: 1.45; } /* Téléphone : jour par jour */ .plc-tel { display: none; } .plc-tel-jour { display: grid; gap: 8px; } .plc-tel-jour h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; } .plc-tel-jour h3 em { font-style: normal; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #FFFFFF; background: var(--action); padding: 2px 8px; border-radius: 999px; margin-left: 4px; } .plc-tel-date { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; align-content: center; line-height: 1; background: var(--survol); border: 1px solid var(--trait); } .plc-tel-date small { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--encre2); } .plc-tel-date b { font-size: 18px; } .plc-tel-jour.plc-auj .plc-tel-date { background: var(--action); border-color: var(--action); color: #FFFFFF; } .plc-tel-jour.plc-auj .plc-tel-date small { color: #FFFFFF; } .plc-tel-jour .discret { margin: 0; } .plc-tel-aff { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--encre); cursor: pointer; padding: 9px 11px; border-radius: 14px; background: color-mix(in srgb, var(--pc) 10%, var(--blanc)); border: 1px solid color-mix(in srgb, var(--pc) 30%, var(--trait)); border-left: 5px solid var(--pc); } .plc-tel-aff .plc-b-txt b { font-size: 14px; } .plc-tel-aff .plc-b-txt small { color: var(--encre2); opacity: 1; font-size: 12.5px; } .plc-tel-aff .plc-b-cr { background: var(--pc); color: #FFFFFF; } @media (max-width: 760px) { .plc-corps { grid-template-columns: minmax(0, 1fr); } .plc-cadre { display: none; } .plc-attente { position: static; } .plc-tel { display: grid; gap: 16px; } .plc-sem b { font-size: 15px; } .plc-stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .plc-stats::-webkit-scrollbar { display: none; } .plc-stat { flex: none; } } /* Dans la fiche : équipe prévue et espace client */ .plc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .plc-li { width: 100%; display: grid; grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr); align-items: center; gap: 4px 10px; text-align: left; font: inherit; font-size: 14px; color: var(--encre); padding: 8px 12px; border: 1px solid var(--trait); border-left: 4px solid var(--pc); border-radius: 10px; background: var(--blanc); cursor: pointer; } .plc-li > span:nth-child(3) { color: var(--encre2); } .plc-li small { grid-column: 2 / -1; margin-top: -2px; color: var(--encre2); font-size: 12.5px; } .plc-li:hover { background: var(--survol); } .plc-li .plc-avatar { grid-row: span 2; box-shadow: none; } @media (max-width: 520px) { .plc-li { grid-template-columns: auto minmax(0, 1fr); } .plc-li > span:nth-child(3) { grid-column: 2; } } .ch-espace-bascule { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--survol); cursor: pointer; } .ch-espace-bascule input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--action); } .ch-espace-bascule span { display: grid; gap: 3px; min-width: 0; } .ch-espace-bascule small { color: var(--encre2); font-size: 13px; line-height: 1.45; } .ch-espace-lien { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .ch-espace-lien input { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 13px; color: var(--encre2); padding: 8px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--survol); } #ch-espace .aide { margin: 8px 0 0; }