/* ════════════════════════════════════════════════════════════════════ CARNET DE SERVICE — style.css Couleurs claires et douces · en-têtes vert foncé · cases à saisir jaune pâle · familles de colonnes encadrées · mobile d'abord. ════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* Couleurs de base */ --fond: #F4F7F5; --carte: #FFFFFF; --texte: #1E2B26; --doux: #5E6E67; --trait: #D3DDD8; /* traits fins entre colonnes */ --cadre: #2D6553; /* cadre épais des familles */ --vert: #2D6553; /* en-têtes */ --vert-clair: #E3EFEA; --saisie: #FFF6C4; /* cases à saisir */ --saisie-bord: #E6D88A; /* États du jour */ --e-repos: #D5EFD9; --e-repos-t: #1F6B33; --e-ferie: #FBEFA9; --e-ferie-t: #7A5A00; --e-conge: #D6E6FA; --e-conge-t: #1F4F8F; --e-maladie: #F8D7E4; --e-maladie-t: #8E2457; --e-saisir: #FFDDB8; --e-saisir-t: #9A4A00; /* Alertes */ --rouge: #C62828; --rouge-fond: #FDE3E3; --orange: #C26100; --orange-fond: #FFEBD6; --ok: #2E7D4F; /* Typo */ --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --chiffres: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --barre: 64px; /* hauteur de la barre d'onglets */ } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 16px; line-height: 1.4; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom, 0px)); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid #E0A400; outline-offset: 2px; } .chiffre { font-family: var(--chiffres); font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } /* ───────────── En-tête ───────────── */ .entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--vert); color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px)); } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--vert); z-index: 21; } .entete h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .01em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 16px; background: rgb(255 255 255 / .14); border: 0; color: #fff; font-size: 13px; white-space: nowrap; } .pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9FD8B4; } .pastille[data-code="attente"]::before { background: #FFC266; } .pastille[data-code="off"]::before { background: #FF8A80; } .pastille[data-code="demo"]::before { background: #CFE0FF; } .bouton-legende { min-width: 44px; min-height: 44px; border-radius: 22px; border: 1px solid rgb(255 255 255 / .35); background: transparent; color: #fff; font-weight: 700; } /* ───────────── Zone d'écran ───────────── */ main { padding: 14px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); max-width: 1100px; margin: 0 auto; display: grid; gap: 14px; } h2 { margin: 0; font-size: 18px; } h3 { margin: 0; font-size: 15px; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; } .carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 14px; display: grid; gap: 12px; min-width: 0; } .doux { color: var(--doux); } .petit { font-size: 13px; } .ligne-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .espace { flex: 1; } /* ───────────── Boutons ───────────── */ .btn { min-height: 44px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte); font-weight: 600; } .btn.principal { background: var(--vert); border-color: var(--vert); color: #fff; } .btn.danger { color: var(--rouge); border-color: #F0C3C3; } .btn.lien { border: 0; background: none; color: var(--vert); padding-inline: 4px; text-decoration: underline; } .btn.large { width: 100%; } .btn-icone { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte); font-size: 20px; font-weight: 700; } /* ───────────── Champs ───────────── */ label.champ { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--doux); min-width: 0; } .saisie, select.saisie, textarea.saisie { min-height: 44px; width: 100%; min-width: 0; padding: 9px 11px; border-radius: 8px; background: var(--saisie); border: 1px solid var(--saisie-bord); font-size: 17px; color: var(--texte); } .saisie.gros { min-height: 56px; font-size: 24px; font-weight: 700; text-align: center; letter-spacing: .03em; } .saisie.invalide { border-color: var(--rouge); background: var(--rouge-fond); } .grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 360px) { .grille-3 { grid-template-columns: 1fr 1fr; } } .case-cocher { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; } .case-cocher input { width: 24px; height: 24px; accent-color: var(--vert); } /* ───────────── Pastilles d'état, de ligne, de prime ───────────── */ .etat { display: inline-block; min-width: 54px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; text-align: center; letter-spacing: .03em; background: var(--carte); border: 1px solid var(--trait); white-space: nowrap; } .e-repos { background: var(--e-repos); color: var(--e-repos-t); border-color: #A9D9B2; } .e-ferie { background: var(--e-ferie); color: var(--e-ferie-t); border-color: #E7D36A; } .e-conge { background: var(--e-conge); color: var(--e-conge-t); border-color: #A9C6EE; } .e-maladie { background: var(--e-maladie); color: var(--e-maladie-t); border-color: #EDB0C8; } .e-saisir { background: var(--e-saisir); color: var(--e-saisir-t); border-color: #F2B87A; } .e-travail { background: #fff; color: var(--texte); } .ligne-bus { display: inline-block; padding: 2px 7px; border-radius: 5px; font-weight: 700; font-size: 13px; color: #fff; background: var(--doux); white-space: nowrap; } .prime { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 12px; font-weight: 700; background: var(--vert-clair); color: var(--vert); border: 1px solid #BFD8CD; } .statut-inconnu { color: #fff; background: var(--rouge); padding: 2px 6px; border-radius: 5px; font-weight: 700; font-size: 12px; } .statut-heures { color: #fff; background: var(--orange); padding: 2px 6px; border-radius: 5px; font-weight: 700; font-size: 12px; } /* ───────────── Alertes ───────────── */ .alertes { display: grid; gap: 6px; } .alerte { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; font-size: 14px; border: 1px solid; } .alerte.rouge { background: var(--rouge-fond); border-color: #F2B5B5; color: #7F1616; } .alerte.orange { background: var(--orange-fond); border-color: #F5C690; color: #7A3E00; } .alerte.ok { background: #E3F3E8; border-color: #B5DCC2; color: #1E5A35; } .alerte b { flex: none; } /* ───────────── Écran Aujourd'hui ───────────── */ .jour-titre { display: flex; align-items: center; gap: 8px; } .jour-titre h2 { flex: 1; text-align: center; font-size: 19px; text-wrap: balance; } .chiffres-cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--cadre); border-radius: 10px; overflow: hidden; } .chiffres-cles div { padding: 8px 6px; text-align: center; border-left: 1px solid var(--trait); display: grid; gap: 2px; } .chiffres-cles div:first-child { border-left: 0; } .chiffres-cles span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); } .chiffres-cles b { font-size: 18px; } @media (max-width: 380px) { .chiffres-cles { grid-template-columns: repeat(2, 1fr); } .chiffres-cles div:nth-child(3) { border-left: 0; } .chiffres-cles div:nth-child(n+3) { border-top: 1px solid var(--trait); } } .vacations { display: grid; gap: 6px; } .vacation { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--vert-clair); } .vacation .chiffre { font-size: 17px; font-weight: 700; } .infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .info { padding: 10px; border-radius: 8px; background: var(--fond); border: 1px solid var(--trait); display: grid; gap: 2px; } .info span { font-size: 12px; color: var(--doux); } .info b { font-size: 16px; } /* ───────────── Journal (grand tableau) ───────────── */ .bandeau-verif { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--orange-fond); border: 1px solid #F5C690; color: #7A3E00; font-weight: 600; width: 100%; text-align: left; min-height: 44px; } .bandeau-verif.ok { background: #E3F3E8; border-color: #B5DCC2; color: #1E5A35; } .filtres { display: flex; gap: 6px; flex-wrap: wrap; } .filtre { min-height: 40px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--trait); background: var(--carte); font-weight: 600; font-size: 14px; } .filtre[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; } .table-zone { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); max-height: calc(100vh - 260px); } table.journal { border-collapse: separate; border-spacing: 0; font-size: 14px; white-space: nowrap; } table.journal th, table.journal td { padding: 0 8px; height: 44px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); text-align: center; } table.journal thead th { position: sticky; z-index: 3; background: var(--vert); color: #fff; font-weight: 700; font-size: 12px; border-right-color: rgb(255 255 255 / .25); border-bottom-color: rgb(255 255 255 / .25); } table.journal thead tr:first-child th { top: 0; height: 30px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } table.journal thead tr:nth-child(2) th { top: 30px; height: 34px; } table.journal thead th.famille { text-align: left; padding-left: 12px; } table.journal thead th[rowspan] { top: 0; } /* Date figée à gauche */ table.journal .col-date { position: sticky; left: 0; z-index: 2; background: var(--carte); text-align: left; min-width: 76px; font-weight: 700; } table.journal thead .col-date { z-index: 4; background: var(--vert); } /* Familles de colonnes : cadre épais à gauche de chaque famille */ table.journal .debut-famille { border-left: 3px solid var(--cadre); } table.journal thead .debut-famille { border-left-color: #173A2F; } table.journal .col-date { border-right: 3px solid var(--cadre); } /* Cases saisies : jaune pâle */ table.journal td.s { background: var(--saisie); } table.journal tbody tr { cursor: pointer; } table.journal tbody tr:hover td { filter: brightness(.97); } table.journal tbody tr.aujourdhui td.col-date { box-shadow: inset 4px 0 0 #E0A400; } table.journal tbody tr.semaine td { border-top: 2px solid #9DB3A9; } table.journal td.alerte-rouge { background: var(--rouge-fond); color: #7F1616; font-weight: 700; } table.journal td.alerte-orange { background: var(--orange-fond); color: #7A3E00; } table.journal td.ctl { text-align: left; white-space: normal; min-width: 240px; max-width: 340px; padding-block: 6px; line-height: 1.3; font-size: 13px; } table.journal td.obs { max-width: 180px; overflow: hidden; text-overflow: ellipsis; text-align: left; } .jour-court { display: block; font-size: 11px; font-weight: 600; color: var(--doux); text-transform: uppercase; } /* ───────────── Menu « Plus » et listes ───────────── */ .menu { display: grid; gap: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; } .menu button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 0; border-top: 1px solid var(--trait); background: none; text-align: left; font-weight: 600; } .menu button:first-child { border-top: 0; } .menu button small { display: block; font-weight: 400; color: var(--doux); font-size: 13px; } .menu button::after { content: "›"; margin-left: auto; font-size: 22px; color: var(--doux); } .liste { display: grid; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; background: var(--carte); } .liste > div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--trait); min-height: 52px; flex-wrap: wrap; } .liste > div:first-child { border-top: 0; } /* ───────────── Roulement (28 cases) ───────────── */ .cycle { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; } .cycle span { text-align: center; font-size: 12px; color: var(--doux); font-weight: 600; } .cycle button { min-height: 44px; border-radius: 8px; border: 1px solid var(--saisie-bord); background: var(--saisie); font-weight: 700; font-size: 13px; color: var(--doux); padding: 0; } .cycle button[aria-pressed="true"] { background: var(--e-repos); border-color: #6FBF82; color: var(--e-repos-t); } /* ───────────── Barre d'onglets ───────────── */ .onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--carte); border-top: 1px solid var(--trait); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } .onglets button { min-height: var(--barre); border: 0; background: none; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--doux); border-top: 3px solid transparent; } .onglets svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .onglets button[aria-selected="true"] { color: var(--vert); border-top-color: var(--vert); } /* ───────────── Feuille (fenêtre du bas) ───────────── */ .voile { position: fixed; inset: 0; z-index: 50; background: rgb(20 35 29 / .45); display: flex; align-items: flex-end; justify-content: center; } .feuille { width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; background: var(--carte); border-radius: 16px 16px 0 0; display: grid; gap: 14px; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); } .feuille .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; position: sticky; bottom: -16px; background: var(--carte); padding-block: 10px; } .feuille .actions .gauche { margin-right: auto; } @media (prefers-reduced-motion: no-preference) { .feuille { animation: monte .2s ease-out; } @keyframes monte { from { transform: translateY(40px); opacity: .5; } } } .legende { display: grid; gap: 6px; } .legende div { display: flex; gap: 10px; align-items: center; font-size: 14px; } /* ───────────── Message bref ───────────── */ .message { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barre) + 14px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--texte); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; max-width: 90vw; } /* ───────────── Écran de connexion ───────────── */ .connexion { max-width: 420px; margin: 8vh auto 0; } .connexion img { width: 72px; height: 72px; border-radius: 16px; } /* iPhone : le champ date ne déborde plus de sa case */ input[type="date"].saisie { -webkit-appearance: none; appearance: none; display: block; text-align: left; } input[type="date"].saisie::-webkit-date-and-time-value { text-align: left; } /* ───────────── Totaux ───────────── */ .filtres.defilant { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-inline: -2px; scrollbar-width: none; } .filtres.defilant::-webkit-scrollbar { display: none; } .filtres.defilant .filtre { flex: none; } table.journal.compact th { position: sticky; top: 0; height: 40px; } table.journal.compact td { height: 44px; } .barres { display: grid; gap: 8px; } .barres div { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; gap: 10px; align-items: center; font-size: 14px; } .barres i { display: block; height: 14px; border-radius: 7px; background: var(--vert); opacity: .8; } .barres b { font-size: 13px; color: var(--doux); white-space: nowrap; } /* ───────────── Paie ───────────── */ table.journal.fiche td { text-align: right; white-space: normal; height: auto; padding-block: 8px; } table.journal.fiche td.col-date { text-align: left; font-weight: 600; min-width: 190px; } table.journal.fiche tr.total td { font-weight: 800; background: var(--vert-clair); } table.journal tr.total td { font-weight: 700; background: var(--vert-clair); } .saisie.mini { min-height: 36px; width: 96px; padding: 4px 8px; font-size: 15px; text-align: right; } .jour-titre h2 .jour-court { font-size: 12px; margin-top: 2px; } .controle table.journal td.col-date, .controle table.journal th.col-date { white-space: normal; min-width: 130px; max-width: 150px; font-size: 13px; line-height: 1.25; padding-block: 6px; } .controle table.journal td { height: auto; } table.journal.fiche td.chiffre { white-space: nowrap; } /* ───────────── Bascule d'espace (conducteur / admin / propriétaire) ───────────── */ .bascule { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--vert-clair); border: 1px solid #BFD8CD; } .bascule button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; font-weight: 700; color: var(--vert); } .bascule button[aria-selected="true"] { background: var(--vert); color: #fff; } .grille-ancien { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; } /* une carte ne doit jamais élargir la page : le tableau défile dans sa zone */ .carte { min-width: 0; max-width: 100%; } .controle { min-width: 0; max-width: 100%; } .controle .table-zone { max-width: 100%; } /* ───────────── Accueil : service en cours ───────────── */ .service-en-cours { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; margin: 4px 0 10px; border-radius: 10px; background: var(--vert-clair); border: 1px solid #BFD8CD; } .service-en-cours > div { display: flex; flex-direction: column; } .service-en-cours b { font-size: 1.35rem; } .alerte.bandeau { width: 100%; text-align: left; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } /* ───────────── Contrôles et alertes ───────────── */ .liste-alertes { display: flex; flex-direction: column; } .alerte-reglage { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--trait); } .alerte-reglage:first-child { border-top: 0; } .interrupteur { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; } .interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; } .interrupteur .curseur { flex: none; width: 46px; height: 28px; border-radius: 14px; background: #C9D3CE; position: relative; transition: background .15s; } .interrupteur .curseur::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .interrupteur input:checked + .curseur { background: var(--vert); } .interrupteur input:checked + .curseur::after { transform: translateX(18px); } .interrupteur input:focus-visible + .curseur { outline: 3px solid var(--accent, #D9A33A); outline-offset: 2px; } .interrupteur .texte { display: flex; flex-direction: column; min-width: 0; } .interrupteur .texte small { color: var(--doux, #5E6E67); font-size: .82rem; } .alerte-reglage .saisie.mini { width: 78px; flex: none; text-align: center; } .seuil-fixe { flex: none; display: flex; flex-direction: column; align-items: center; font-family: var(--chiffres); font-weight: 700; } .seuil-fixe small { font-family: inherit; font-weight: 400; font-size: .7rem; color: var(--doux, #5E6E67); } /* ───────────── Menus avec icônes ───────────── */ .menu button .ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--vert-clair); display: grid; place-items: center; } .menu button .ico svg, .ico-petit svg { width: 22px; height: 22px; stroke: var(--vert); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .menu button .txt { display: block; min-width: 0; } .titre-menu { margin: 18px 4px 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); } .titre-ecran { margin: 4px 0 12px; } .ico-petit { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--vert-clair); display: grid; place-items: center; } .info.large { grid-column: 1 / -1; } .info.large b { font-size: 18px; } .info b span { font-size: inherit; color: inherit; } .info b .passe { color: var(--doux); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; } tr.cliquable { cursor: pointer; } tr.hors td { color: var(--doux); } /* ───────────── Espaces admin / propriétaire : en-tête d'une autre couleur ───────────── */ .pastille.espace { font-weight: 700; } body[data-espace="admin"] .entete { background: #3A3F73; } body[data-espace="proprietaire"] .entete { background: #5B2E4F; } body[data-espace="admin"] .onglets button[aria-selected="true"] { color: #3A3F73; border-top-color: #3A3F73; } body[data-espace="proprietaire"] .onglets button[aria-selected="true"] { color: #5B2E4F; border-top-color: #5B2E4F; } /* en-tête : l'espace sous le titre */ .titre-bloc { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .titre-bloc h1 { flex: none; max-width: 100%; } .espace-lien { border: 0; background: none; color: #fff; opacity: .9; font: inherit; font-size: 12.5px; font-weight: 600; padding: 2px 0; min-height: 24px; } .espace-lien[hidden] { display: none; } body[data-espace="admin"]::before { background: #3A3F73; } body[data-espace="proprietaire"]::before { background: #5B2E4F; } .chiffres-cles.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ligne-fiche { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 2px; min-height: 52px; } .ligne-fiche small, .compte-ligne small { display: block; color: var(--doux); font-size: 12.5px; } .compte-ligne { min-width: 0; overflow-wrap: anywhere; } .fiches-annee > * + * { border-top: 1px solid var(--trait); } .bascule { margin-bottom: 14px; } .bascule button { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; } .bascule svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } body[data-espace="admin"] .bascule button[aria-selected="true"] { background: #3A3F73; } body[data-espace="proprietaire"] .bascule button[aria-selected="true"] { background: #5B2E4F; } /* liens « aller à » dans les messages */ .lien-aller { display: inline; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; } .champ.surligne { border-radius: 10px; box-shadow: 0 0 0 3px var(--orange); transition: box-shadow .3s; } .droite { text-align: right; margin: 4px 2px 0; } /* versions et améliorations */ .num-version { flex: none; font-family: var(--chiffres); font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 8px; background: var(--vert-clair); color: var(--vert); } .version.actuelle { border: 2px solid var(--cadre); } .version.actuelle .num-version { background: var(--vert); color: #fff; } .version h3 { margin: 0; } .puces { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; } .idees > div { display: flex; align-items: center; gap: 10px; } .etoile { flex: none; width: 40px; height: 40px; border: 0; background: none; font-size: 22px; color: #C9A227; cursor: pointer; } .etat.prevu { background: #E6ECFA; color: #2B4C8C; border-color: #C3D0EE; } .liste.idees > div { flex-wrap: nowrap; padding: 6px 10px 6px 2px; gap: 6px; } .liste.idees > div > span:not(.espace):not(.etat) { flex: 1; min-width: 0; } .liste.idees .espace { display: none; } /* aide « Comment remplir » */ details.aide { margin: 4px 0 14px; border: 1px solid #C3D0EE; background: #F1F5FD; border-radius: 10px; padding: 0 12px; } details.aide summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: #2B4C8C; } details.aide summary::-webkit-details-marker { display: none; } details.aide summary::after { content: '▾'; margin-left: auto; transition: transform .15s; } details.aide[open] summary::after { transform: rotate(180deg); } details.aide .ico-aide { width: 22px; height: 22px; border-radius: 50%; background: #2B4C8C; color: #fff; display: grid; place-items: center; font-size: 13px; font-style: italic; font-family: Georgia, serif; } details.aide ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; } details.aide p { margin: 0 0 10px; } .choix-fichier { display: grid; gap: 10px; margin-bottom: 14px; } .choix-fichier > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--fond); border: 1px solid var(--trait); } .choix-fichier span { font-size: 14px; color: var(--doux); } a.btn.large { display: flex; justify-content: center; text-decoration: none; } table.colonnes-import td { white-space: normal; text-align: left; font-size: 13.5px; min-width: 160px; } /* heures réelles du jour */ .tag-reel { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: #E6ECFA; color: #2B4C8C; vertical-align: middle; } details.sous-bloc { margin: 10px 0; border: 1px solid var(--trait); border-radius: 10px; padding: 0 12px; background: var(--fond); } details.sous-bloc summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; } details.sous-bloc[open] { padding-bottom: 10px; } tr.cotis td { font-size: 12.5px; color: var(--doux); } /* la fiche de paie se lit en entier, sans défilement interne */ .table-zone:has(> table.fiche) { max-height: none; } /* ───────────── Choix de services ───────────── */ .tag-prevu { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: #EEE7F7; color: #5B3E8C; vertical-align: middle; } .choix-liste > .choix-u { display: flex; align-items: stretch; gap: 4px; padding: 6px 8px 6px 0; flex-wrap: nowrap; } .choix-u.eviter { background: #FFF8EE; } .choix-u.exclu { opacity: .55; } .choix-corps { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; display: grid; gap: 3px; padding: 4px 0; cursor: pointer; } .choix-l1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .choix-l2 { font-size: 13.5px; } .choix-l3 { font-size: 12.5px; color: var(--doux); } .choix-raison { font-size: 12px; color: var(--orange); font-weight: 600; } .choix-u.exclu .choix-raison { color: var(--rouge); } .choix-net { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 74px; } .choix-net small { font-size: 11px; color: var(--doux); } .liste.voeux > div { flex-wrap: nowrap; gap: 6px; } .liste.voeux .rang { min-width: 26px; font-family: var(--chiffres); } .liste.voeux .voeu-txt { flex: 1; min-width: 0; } .btn-icone.petit { width: 34px; height: 34px; min-height: 34px; font-size: 13px; } table.comparer td { white-space: normal; font-size: 13px; } table.formulaire td { white-space: normal; } textarea.saisie { min-height: 90px; font: inherit; } .chiffres-cles small.ok-txt { color: var(--ok); font-size: 11px; } .chiffres-cles small.proche-txt { color: var(--orange); font-size: 11px; } .chiffres-cles small.ecart-txt { color: var(--rouge); font-size: 11px; } .net-annee { display: flex; flex-direction: column; align-items: flex-end; } .net-annee small { color: var(--doux); font-size: 12px; } /* formulaire de paie */ .formulaire-paie > div { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .formulaire-paie label { flex: 1; min-width: 0; display: flex; flex-direction: column; } .formulaire-paie label small { color: var(--doux); font-size: 12px; } .formulaire-paie .saisie.mini { width: 84px; flex: none; text-align: center; } .formulaire-paie .saisie.mini::placeholder { color: #9AA8A1; } .saisie.change { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(194,97,0,.18); } /* ── v16 : accès, invitations, aide, exports ── */ .alerte.bleu { background: #F1F5FD; border-color: #C3D0EE; color: #2B4C8C; } .bandeau-message { margin-bottom: 12px; align-items: center; } .bandeau-message .btn-icone { min-width: 36px; min-height: 36px; } .ico-grand { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; background: var(--fond); } .ico-grand svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .connexion h2, .connexion > p { text-align: center; } .liste.comptes > button { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-top: 1px solid var(--trait); min-height: 56px; background: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; } .liste.comptes > button:first-child { border-top: 0; } .liste.comptes > button[hidden] { display: none; } #cpt-cherche { margin-bottom: 10px; width: 100%; } .etat.e-suspendu { background: var(--rouge-fond); color: #7F1616; border-color: #F2B5B5; } .message-invitation { white-space: pre-wrap; font: inherit; font-size: 14px; background: var(--fond); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; } .zone-danger { border-color: #F2B5B5; } .zone-danger h3 { color: #7F1616; } details.faq { border-top: 1px solid var(--trait); } details.faq:first-of-type { border-top: 0; } details.faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; list-style: none; gap: 8px; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: '▾'; margin-left: auto; color: var(--doux); transition: transform .15s; } details.faq[open] summary::after { transform: rotate(180deg); } details.faq p { margin: 0 0 12px; font-size: 14.5px; } textarea.saisie { width: 100%; resize: vertical; font: inherit; } /* Impression : la fiche seule */ @media print { header, .onglets, .filtres, .bascule, .non-imprime, details.aide, .bandeau-message, #toast, .btn, .btn-icone { display: none !important; } body { background: #fff; } .carte { break-inside: avoid; box-shadow: none; } input.saisie { border: 0; background: none; } } /* ── v17 : compteurs, ponts, net, règles ── */ table.compteurs { width: 100%; border-collapse: collapse; font-size: 14px; } table.compteurs th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); font-weight: 700; padding: 6px 6px; border-bottom: 1px solid var(--trait); } table.compteurs td { padding: 8px 6px; border-bottom: 1px solid var(--trait); vertical-align: top; } table.compteurs td.chiffre, table.compteurs th:nth-child(n+3) { text-align: right; } .table-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; } .liste.ponts > div { flex-wrap: nowrap; } .pont-gain { display: grid; place-items: center; min-width: 52px; height: 52px; border-radius: 12px; background: #E3F3E8; color: #1E5A35; line-height: 1; } .pont-gain b { font-size: 20px; } .pont-gain small { font-size: 10.5px; } .pont-txt { min-width: 0; } .pont-txt small { display: block; color: var(--doux); font-size: 12.5px; } .chiffres-cles.deux { grid-template-columns: 1fr 1fr; } .chiffres-cles.deux small { display: block; color: var(--doux); font-size: 11.5px; margin-top: 2px; } .chiffres-cles.deux div:nth-child(2) { border-top: 0 !important; border-left: 1px solid var(--trait) !important; } .exemple { background: #F1F5FD; border-left: 3px solid #2B4C8C; border-radius: 6px; padding: 8px 10px; margin: 8px 0 12px; font-size: 14px; } .exemple p { margin: 4px 0 0; } .grille-anc { display: flex; flex-wrap: wrap; gap: 6px; } .pastille-grille { font-size: 12.5px; background: var(--fond); border: 1px solid var(--trait); border-radius: 999px; padding: 2px 8px; } details.regle > *:not(summary) { font-size: 14.5px; } #x-faceid svg { width: 20px; height: 20px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 2; } .titre-impression { display: none; } @media print { .titre-impression { display: block; font-size: 16px; margin: 0 0 8px; } .table-zone { max-height: none !important; overflow: visible !important; border: 0; } table.journal { font-size: 9px; } table.journal th, table.journal td { height: auto; padding: 2px 3px; position: static !important; } .jour-titre .btn-icone { display: none; } @page { margin: 10mm; } } table.compteurs small.sous { display: block; font-size: 11.5px; color: var(--doux); font-weight: 400; } /* ── v18 : conditions de choix ── */ .gain-cond { display: block; font-size: 12px; color: #2B4C8C; margin-top: 3px; font-weight: 600; } .alerte-reglage .gain-cond { padding-left: 58px; margin-top: -4px; margin-bottom: 6px; } .jauge { height: 14px; border-radius: 999px; background: var(--fond); border: 1px solid var(--trait); overflow: hidden; margin: 8px 0; } .jauge i { display: block; height: 100%; background: linear-gradient(90deg, #2E8A57, #4CB07A); border-radius: 999px; } ol.plan { margin: 4px 0 8px; padding-left: 22px; display: grid; gap: 4px; font-size: 14.5px; } .verrou { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; color: var(--doux); } .verrou input { width: 20px; height: 20px; } .cond-section h4, .jauge-carte h4 { margin: 12px 0 6px; font-size: 14px; } .liste.voeux > div.en-trop { background: var(--rouge-fond); } b.vert { color: #1E5A35; } .alerte-reglage { flex-wrap: wrap; } .alerte-reglage .gain-cond { flex-basis: 100%; padding-left: 58px; margin: -6px 0 8px; } /* ── v18 : dates passées, en cours, à venir ── */ table.journal tr.passe td.col-date { background: #ECEFEC; color: #5B6B60; } table.journal tr.passe td.col-date .jour-court { color: #7C8A80; } table.journal tr.avenir td.col-date { background: #F4F8FF; } table.journal .annee { display: block; font-size: 10.5px; font-weight: 600; color: var(--doux); } .liste > div.passe { background: #F1F3F1; color: #5B6B60; } .liste > div.passe b { color: #4A584E; } .liste > div.encours { background: #E3F3E8; box-shadow: inset 4px 0 0 #2E8A57; } .liste > div.avenir { box-shadow: inset 4px 0 0 #2B4C8C; } /* ── v19 : lecture des PDF ── */ .depot-pdf { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 14px; cursor: pointer; } .depot-pdf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .chiffres-cles.compact b { font-size: 15px; } /* ── v19 : comparaison avec les PDF ── */ .boutons-pdf { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .boutons-pdf .btn { display: inline-flex; align-items: center; gap: 8px; flex: 1; justify-content: center; cursor: pointer; } .boutons-pdf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .comparer-pdf h4 { margin: 14px 0 6px; font-size: 14px; } table.comparaison tr.egal td:last-child { color: #1E5A35; } table.comparaison tr.ecart td { background: #FFF6E8; } table.comparaison tr.ecart td:last-child { color: #7A3E00; } table.comparaison tr.ecart-fort td { background: #FDECEC; } table.comparaison tr.ecart-fort td:last-child { color: #7F1616; } table.comparaison tr.total td { border-top: 2px solid var(--trait); } .liste.diffs-jours > div { background: #FFF6E8; flex-wrap: nowrap; } .liste.diffs-jours small { line-height: 1.45; } table.comparaison { font-size: 13px; } table.comparaison td.chiffre, table.comparaison th { white-space: nowrap; } table.comparaison td, table.comparaison th { padding: 7px 4px; } table.comparaison td:first-child { min-width: 0; } /* ── v22 : Mes paies, contrôle du mois, À faire ── */ .liste-mois { display: grid; gap: 10px; } .mois-paie { display: grid; gap: 6px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--trait); border-left: 6px solid #9AA59E; background: var(--carte); font: inherit; color: inherit; cursor: pointer; } .mois-paie .mp-tete { display: flex; align-items: center; gap: 8px; font-size: 16px; } .mois-paie .mp-ligne { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; } .mois-paie .verdict { font-weight: 800; font-size: 14px; padding: 3px 10px; border-radius: 999px; background: var(--fond); white-space: nowrap; } .mois-paie.v-juste { border-left-color: #2E8A57; } .mois-paie.v-juste .verdict { background: #E3F3E8; color: #1E5A35; } .mois-paie.v-proche { border-left-color: #B26A00; } .mois-paie.v-proche .verdict { background: #FFF1DC; color: #7A3E00; } .mois-paie.v-ecart { border-left-color: #C62828; } .mois-paie.v-ecart .verdict { background: #FDECEC; color: #7F1616; } .mois-paie.v-encours { border-left-color: #2B4C8C; } .mois-paie.v-encours .verdict { background: #E6ECFA; color: #2B4C8C; } .mp-chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--fond); color: var(--doux); border: 1px solid var(--trait); } .chip.ok { background: #E3F3E8; color: #1E5A35; border-color: #B5DCC2; } .chip.ko { background: #FDECEC; color: #7F1616; border-color: #F2B5B5; } .verdict-carte { border-width: 2px; } .verdict-carte.v-juste { border-color: #2E8A57; background: #F3FAF5; } .verdict-carte.v-proche { border-color: #E3A23B; background: #FFFAF1; } .verdict-carte.v-ecart { border-color: #C62828; background: #FFF6F6; } .verdict-carte.v-encours, .verdict-carte.v-attente { border-color: #C3D0EE; background: #F6F8FE; } .verdict-grand { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .verdict-grand b { display: block; font-size: 20px; } .verdict-grand small { display: block; font-size: 14px; color: var(--texte); } .verdict-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; font-weight: 800; background: var(--fond); flex: none; } .v-juste .verdict-ico { background: #2E8A57; color: #fff; } .v-proche .verdict-ico { background: #E3A23B; color: #fff; } .v-ecart .verdict-ico { background: #C62828; color: #fff; } .etape .num-etape { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2B4C8C; color: #fff; font-weight: 800; font-size: 14px; flex: none; } .etape.faite .num-etape { background: #2E8A57; } .etape.a-voir .num-etape { background: #C62828; } .etape h3 { margin: 0; } .liste.ecarts-liste > label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-top: 1px solid var(--trait); cursor: pointer; } .liste.ecarts-liste > label:first-child { border-top: 0; } .liste.ecarts-liste input { width: 22px; height: 22px; margin-top: 2px; flex: none; } .liste.ecarts-liste > label.moins { background: #FFF6F6; } .liste.ecarts-liste > label.moins b { color: #7F1616; } .liste.ecarts-liste > label.plus { background: #F3FAF5; } .liste.ecarts-liste > label.plus b { color: #1E5A35; } .a-faire-carte { display: grid; gap: 8px; } .a-faire-carte h3 { margin-bottom: 2px; } .a-faire, .verdict-mini { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid #C3D0EE; background: #F1F5FD; font: inherit; color: inherit; cursor: pointer; } .a-faire small, .verdict-mini small { grid-column: 1; color: var(--doux); font-size: 12.5px; } .a-faire > span, .verdict-mini > span:last-child { grid-row: 1 / span 2; grid-column: 2; color: var(--doux); font-size: 20px; } .a-faire.ko { border-color: #F5C690; background: var(--orange-fond); } .verdict-mini { grid-template-columns: auto 1fr auto; } .verdict-mini .verdict-ico { width: 36px; height: 36px; font-size: 18px; grid-row: 1; } .verdict-mini > span:nth-child(2) b { display: block; } .verdict-mini > span:nth-child(2) small { display: block; } .verdict-mini > span:last-child { grid-row: 1; grid-column: 3; } .verdict-mini.v-juste { border-color: #B5DCC2; background: #F3FAF5; } .verdict-mini.v-ecart { border-color: #F2B5B5; background: #FFF6F6; } .verdict-mini.v-proche { border-color: #F5C690; background: #FFFAF1; } .resume-paies .chiffres-cles { margin-bottom: 6px; } .mois-paie.v-explique { border-left-color: #6B7C72; } .mois-paie.v-explique .verdict { background: #EEF1EF; color: #44524A; } .verdict-carte.v-explique { border-color: #AEB9B2; background: #F7F9F8; } .v-explique .verdict-ico { background: #6B7C72; color: #fff; font-style: italic; font-family: Georgia, serif; } .verdict-mini.v-explique { border-color: #CDD5D0; background: #F7F9F8; } .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex: none; } .btn:has(svg) { display: inline-flex; align-items: center; gap: 6px; } .verdict-carte .chiffres-cles b { font-size: 15px; white-space: nowrap; } .mois-paie .mp-ligne b { white-space: nowrap; } /* ══ v23 : style de la maquette (simple, grandes cartes) ══ */ .jour-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .jour-nav .btn-icone { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--trait); background: var(--carte); font-size: 22px; } .jour-nav-titre { flex: 1; text-align: center; background: none; border: 0; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; } .jour-nav-titre small { font-size: 12.5px; color: var(--doux); text-transform: uppercase; letter-spacing: .06em; } .jour-nav-titre b { font-size: 19px; } .grande-carte { background: var(--carte); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 3px rgba(30,43,38,.08); margin-bottom: 12px; } .grande-carte.repos { background: #F3FAF5; } .grande-carte.conge { background: #F1F5FD; } .gc-lib { font-size: 13px; color: var(--doux); } .gc-numero { font-size: 56px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .gc-numero.petit-num { font-size: 34px; } .gc-heures { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; } .gc-sous { font-size: 14px; color: var(--doux); } .gc-infos { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; color: var(--doux); } .gc-infos b { color: var(--texte); } .gc-bouton { display: block; width: 100%; min-height: 52px; border-radius: 14px; border: 0; background: var(--vert); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; margin: 4px 0 12px; } .gc-bouton.clair { background: var(--carte); color: var(--vert); border: 1px solid var(--trait); } .grande-carte .gc-bouton { margin: 4px 0 0; } .rappel { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; } .rappel i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .rappel span:nth-child(2) { flex: 1; } .rappel span:last-child { font-size: 20px; } .rappel.orange { background: #FFEBD6; color: #7A3E00; } .rappel.orange i { background: #C26100; } .rappel.vert { background: #E3F3E8; color: #1E5A35; } .rappel.vert i { background: #2E7D4F; } .rappel.rouge { background: #FDE3E3; color: #7F1616; } .rappel.rouge i { background: #C62828; } .rappel.bleu { background: #E6ECFA; color: #2B4C8C; } .rappel.bleu i { background: #2B4C8C; } .reperes { display: flex; gap: 10px; margin-bottom: 12px; } .reperes > * { flex: 1; background: var(--carte); border-radius: 14px; padding: 12px 14px; border: 0; font: inherit; color: inherit; text-align: left; } .reperes button { cursor: pointer; } .reperes small { display: block; font-size: 12px; color: var(--doux); } .reperes b { font-size: 17px; } .liste-jours { background: var(--carte); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(30,43,38,.08); } .jl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid #E6ECE9; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 60px; } .jl:first-child { border-top: 0; } .jl.repos { background: #F3FAF5; } .jl.repos .etat-txt { color: #1F6B33; } .jl.a-saisir { background: #FFF6E8; } .jl.a-saisir .etat-txt { color: #9A4A00; } .jl.conge { background: #F1F5FD; } .jl.conge .etat-txt { color: #1F4F8F; } .jl.maladie { background: #FCEFF4; } .jl.maladie .etat-txt { color: #8E2457; } .jl.auj { box-shadow: inset 4px 0 0 var(--vert); } .jl.alerte-j .jl-h::after { content: ' ⚠'; color: #C26100; } .jl-date { width: 42px; flex: none; } .jl-date small { display: block; font-size: 11.5px; color: var(--doux); } .jl-date b { font-size: 18px; } .jl-centre { flex: 1; min-width: 0; } .jl-centre b { font-size: 17px; } .jl-centre small { display: block; font-size: 14px; color: var(--doux); } .jl-h { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .centre { text-align: center; } .actions-journal { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .tete-ecran { gap: 6px; margin-bottom: 12px; align-items: center; } .tete-ecran .tm b { display: block; font-size: 19px; } .tete-ecran .tm small { color: var(--doux); font-size: 13px; } .tete-ecran .btn-icone { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--trait); background: var(--carte); } .bilan-2 { display: flex; background: var(--carte); border-radius: 18px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(30,43,38,.08); } .bilan-2 > div { flex: 1; text-align: center; } .bilan-2 > i { width: 1px; background: #E6ECE9; } .bilan-2 b { display: block; font-size: 28px; font-weight: 800; } .bilan-2 small { font-size: 13px; color: var(--doux); } .vert-t { color: #2E7D4F; } .rouge-t { color: var(--rouge); } .liste-paies { display: grid; gap: 10px; margin-bottom: 12px; } .lp { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 0; border-radius: 16px; padding: 14px 16px; font: inherit; color: inherit; text-align: left; cursor: pointer; } .lp-g { flex: 1; min-width: 0; } .lp-g b { display: block; font-size: 17px; } .lp-g small { font-size: 14px; color: var(--doux); } .badge { font-size: 14px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .badge.vert { background: #E3F3E8; color: #1E5A35; } .badge.rouge { background: #FDE3E3; color: #7F1616; } .badge.bleu { background: #E6ECFA; color: #2B4C8C; } .badge.gris { background: #EEF1EF; color: #44524A; } .verdict2 { background: var(--carte); border: 2px solid var(--trait); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .verdict2.rouge { border-color: #C62828; } .verdict2.vert { border-color: #2E7D4F; } .verdict2.bleu { border-color: #C3D0EE; } .v2-tete { display: flex; align-items: center; gap: 12px; } .v2-tete b { display: block; font-size: 20px; font-weight: 800; } .v2-tete small { font-size: 14px; color: var(--doux); } .v2-ico { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; background: #6B7C72; flex: none; } .verdict2.rouge .v2-ico { background: #C62828; } .verdict2.vert .v2-ico { background: #2E7D4F; } .verdict2.bleu .v2-ico { background: #2B4C8C; } .v2-montants { display: flex; gap: 8px; } .v2-montants > div { flex: 1; background: var(--fond); border-radius: 12px; padding: 10px; } .v2-montants small { display: block; font-size: 12px; color: var(--doux); } .v2-montants b { font-size: 17px; white-space: nowrap; } .bloc { background: var(--carte); border-radius: 18px; overflow: hidden; margin-bottom: 12px; } .bloc h3 { padding: 12px 16px 6px; margin: 0; font-size: 13px; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; } .pb { padding: 12px 16px; border-top: 1px solid #E6ECE9; } .pb small { display: block; font-size: 14px; color: var(--doux); margin-top: 4px; } .pb.moins { background: #FFF6F6; } .pb.moins b { color: #7F1616; } .pb.plus { background: #F3FAF5; } .pb.plus b { color: #1E5A35; } .vr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid #E6ECE9; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 52px; box-sizing: border-box; } .vr-i { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--fond); color: var(--doux); flex: none; } .vr-i.ok { background: #E3F3E8; color: #2E7D4F; } .vr-i.ko { background: #FDE3E3; color: #C62828; } .vr-t { flex: 1; font-size: 16px; } .vr-d { font-size: 14px; color: var(--doux); } .vr-d.lien { color: var(--vert); font-weight: 600; } .tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .tuile { background: var(--carte); border: 0; border-radius: 16px; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--texte); cursor: pointer; padding: 10px 6px; text-align: center; } .ti { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .ti svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ti.v { background: #E3EFEA; color: #2D6553; } .ti.b { background: #E6ECFA; color: #2B4C8C; } .ti.o { background: #FFF1DC; color: #9A4A00; } .ti.g { background: #EEF1EF; color: #44524A; } .menu-petit button small { display: none; } .pb.neutre { background: #F7F9F8; } .pb.neutre b { color: #44524A; } /* ═════ v24 ═════ */ .burger { flex: none; width: 40px; height: 40px; margin-left: -6px; border: 0; border-radius: 10px; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; } .burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; } .burger:active { background: rgb(255 255 255 / .16); } .burger[hidden] { display: none; } .titre-menu { margin: 16px 4px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); } .svc-pill { display: inline-block; padding: 1px 8px; border-radius: 7px; background: #E6ECE9; color: #1E2B26; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5; } .svc-pill.grand { font-size: 22px; padding: 2px 12px; border-radius: 10px; } .ligne-bus .ex { font-weight: 600; opacity: .85; font-size: .8em; } .infos-service { display: grid; gap: 0; margin: 10px 0 4px; border-top: 1px solid var(--bord, #E6ECE9); } .infos-service > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord, #E6ECE9); font-size: 15px; } .infos-service > div > span:first-child { color: var(--doux); font-size: 13px; padding-top: 1px; } .rappels { display: grid; gap: 8px; margin-bottom: 10px; } .rappels:empty { display: none; } .tag-j { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #EEF1EF; color: #44524A; vertical-align: middle; } .tag-j.bleu { background: #E6ECFA; color: #2B4C8C; } .tag-j.orange { background: #FFF1DC; color: #9A4A00; } .jl-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .jl-alerte { color: #9A4A00 !important; } .pt-alerte { font-style: normal; color: #C46A00; margin-left: 6px; } .jl.passe-j .jl-date { opacity: .65; } .sem-titre { display: flex; justify-content: space-between; margin: 14px 4px 6px; font-size: 13px; font-weight: 700; color: var(--doux); } .segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 12px; background: #E6ECE9; border-radius: 12px; } .segment button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 600; color: #44524A; } .segment button[aria-pressed="true"] { background: #fff; color: var(--vert); box-shadow: 0 1px 3px rgb(30 43 38 / .12); } .num-idee { display: inline-block; min-width: 1.8em; font-weight: 700; color: var(--doux); font-variant-numeric: tabular-nums; } .seul-impression { display: none; } @media print { .seul-impression { display: block; } .burger { display: none; } } .service-en-cours .btn { min-height: 40px; padding: 0 12px; font-size: 15px; } /* ═════ v25 : rubriques ═════ */ .rubriques { display: grid; gap: 10px; } .rubrique { background: var(--carte, #fff); border: 1px solid #E1E8E4; border-radius: 16px; overflow: hidden; } .rb-tete { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .rb-tete .ico { width: 38px; height: 38px; border-radius: 11px; background: var(--vert-clair, #E3EFEA); color: var(--vert); display: flex; align-items: center; justify-content: center; flex: none; } .rb-tete .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rb-tete b { flex: 1; font-size: 16px; } .rb-tete > span:last-child { color: var(--doux); font-size: 20px; } .rb-sous { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px 64px; } .rb-sous button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #D3DDD8; background: #F4F7F5; font: inherit; font-size: 14px; color: #1E2B26; cursor: pointer; } .titre-rubrique { margin: 4px 4px 12px; } table.cp-mois tr.actuel td { background: #EEF6F1; } table.cp-mois .badge { font-size: 11px; } .periode-cp { margin: 12px 0; } .periode-cp + .periode-cp { border-top: 1px solid #E6ECE9; padding-top: 12px; } .segment button { white-space: nowrap; font-size: 13.5px; padding: 0 4px; } .segment .cpt { display: inline-block; min-width: 17px; margin-left: 3px; padding: 0 4px; border-radius: 9px; background: #C46A00; color: #fff; font-size: 11px; line-height: 17px; vertical-align: 2px; } /* ═════ v26 : cloche, suggestions de terminus ═════ */ .cloche { position: relative; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cloche svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cloche:active { background: rgb(255 255 255 / .16); } .cloche[hidden] { display: none; } .cloche[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #D93025; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--vert); } .notifs { display: grid; gap: 8px; } .rappel span small { display: block; font-weight: 400; font-size: 13px; opacity: .8; margin-top: 2px; } .suggestions { display: grid; margin-top: 4px; border: 1px solid #D3DDD8; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgb(30 43 38 / .12); } .suggestions[hidden] { display: none; } .suggestions button { min-height: 44px; padding: 8px 12px; border: 0; border-top: 1px solid #EEF1EF; background: #fff; text-align: left; font: inherit; font-size: 15px; color: #1E2B26; cursor: pointer; } .suggestions button:first-child { border-top: 0; } .suggestions .sug-ajout { color: var(--vert); font-weight: 700; background: #F3FAF5; } .actions-inconnu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; width: 100%; } .notifs .rappel { margin: 0; } .champ:has(.suggestions) { position: relative; } .champ .suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; } #f-apercu { flex-wrap: wrap; } .actions-inconnu .btn { flex: 1 1 auto; } /* ═════ v27 : vérifications, profil ═════ */ .profil-btn { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .profil-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .profil-btn[hidden] { display: none; } .entete .pastille { font-size: 0; gap: 0; padding: 4px 8px; min-height: 28px; } /* la pastille de synchro : un point, le détail au toucher */ .alerte.bleu { background: #E6ECFA; color: #2B4C8C; border-color: #C8D4F0; } .verif-intro .etapes { margin: 6px 0 8px 20px; padding: 0; } .verif-intro .etapes li { margin: 4px 0; } .verif-doc { padding: 12px 14px; border-top: 1px solid #E6ECE9; } .bloc .verif-doc:first-of-type { border-top: 0; } .verif-doc .ligne-flex { gap: 12px; align-items: center; } .verif-doc .vd-t { flex: 1; display: flex; flex-direction: column; } .verif-doc .vd-t small { color: var(--doux); font-size: 13px; margin-top: 2px; } .verif-doc.manque { background: #FFF8EE; } .verif-boutons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .verif-boutons .btn { min-height: 44px; padding: 0 6px; } .aide-docs p { margin: 8px 0; } .oblig { color: #C62828; } .bienvenue { margin: 4px 4px 14px; } .bienvenue h2 { margin: 0 0 8px; } .profil-form h3 { margin: 14px 0 8px; } .bloc-elements { background: #F3FAF5; border-radius: 12px; padding: 10px 12px; margin: 8px 0; } .bloc-elements .liste > div { background: transparent; } .cycle-dates .cy-sem { font-size: 11px; line-height: 1.1; color: var(--doux); text-align: center; } .cycle-dates { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); } .pf-nouveau { background: #FFF8EE; border: 1px solid #F1D9B5; border-radius: 12px; padding: 10px 12px; margin: 8px 0 4px; } .pf-nouveau[hidden] { display: none; } .deconnexion { margin-top: 14px; color: #7F1616; border-color: #F0C9C9; } .deconnexion small { font-weight: 400; opacity: .8; } /* ═════ v29 : estimé en face du réel ═════ */ table.fiche.avec-reel th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); text-align: right; padding: 6px 10px; } table.fiche.avec-reel td.reel { background: #F3FAF5; } table.fiche td.reel small, table.fiche td.chiffre small { display: block; font-size: 12px; font-weight: 700; } .plus-txt { color: #2E7D4F; } .chiffres-cles.reel-paye { margin-top: 8px; border-color: #2E7D4F; background: #F3FAF5; } .jl-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px 70px; border-top: 0; background: #FFF6E8; } .jl-actions .btn { min-height: 40px; font-size: 14px; } .ok-txt { color: #2E7D4F; } .ecart-txt { color: var(--rouge); } .proche-txt { color: var(--orange); } table.fiche.avec-reel { width: 100%; min-width: 0 !important; table-layout: fixed; } table.fiche.avec-reel th:first-child, table.fiche.avec-reel td.col-date { width: 44%; white-space: normal; } table.fiche.avec-reel td.chiffre { font-size: 13px; padding-left: 4px; padding-right: 6px; white-space: nowrap; } table.fiche.avec-reel thead th { background: transparent !important; color: var(--doux) !important; position: static; } .inc-form { margin: 0; border-radius: 0; border-left: 0; border-right: 0; } .inc-form .btn.large { margin-top: 10px; } .entete .cloche, .entete .profil-btn { width: 38px; height: 38px; } .entete { gap: 6px; } .corriger .corr-lignes { display: grid; gap: 6px; margin-top: 8px; } .corr-ligne { display: grid; grid-template-columns: 1fr 7.5em; gap: 8px; align-items: center; font-size: 13px; } .corr-ligne .saisie { min-height: 40px; text-align: right; font-variant-numeric: tabular-nums; } /* ═════ v31 : rapport de réclamation ═════ */ .rapport { background: #fff; border: 1px solid #E1E8E4; border-radius: 14px; padding: 18px 16px; margin-top: 10px; color: #111; font-size: 14px; } .rapport h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #2D6553; margin: 18px 0 8px; } .rp-tete { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #2D6553; padding-bottom: 10px; } .rp-tete b { font-size: 17px; display: block; } .rp-tete small, .rp-qui small { display: block; color: #555; font-size: 12px; margin-top: 2px; } .rp-qui { text-align: right; font-weight: 700; } .rp-tab { width: 100%; border-collapse: collapse; font-size: 13px; } .rp-tab th { text-align: right; font-size: 11px; color: #555; font-weight: 700; padding: 4px; border-bottom: 1px solid #ccc; } .rp-tab th:first-child { text-align: left; } .rp-tab td { padding: 6px 4px; border-bottom: 1px solid #e3e3e3; vertical-align: top; } .rp-tab td.chiffre { text-align: right; white-space: nowrap; } .rp-tab small.sous { display: block; color: #666; font-size: 11px; } .rp-total td { border-top: 2px solid #333; font-weight: 700; } .rp-signe { margin-top: 28px; font-weight: 700; } .rp-pied { margin-top: 18px; font-size: 11px; color: #777; border-top: 1px solid #ddd; padding-top: 8px; } @media print { .rapport { border: 0; padding: 0; margin: 0; font-size: 11pt; } body.rapport-imprime .entete, body.rapport-imprime .onglets { display: none !important; } } /* visite guidée */ .visite h2 { margin: 6px 0 8px; } .visite p { font-size: 16px; line-height: 1.45; } .vi-points { display: flex; gap: 6px; } .vi-points i { width: 8px; height: 8px; border-radius: 50%; background: #D3DDD8; } .vi-points i.on { background: var(--vert); width: 22px; border-radius: 4px; } .visite-cible { position: relative; z-index: 60; box-shadow: 0 0 0 3px #FFD54F, 0 0 0 7px rgb(255 213 79 / .45) !important; border-radius: 12px; animation: vi-pulse 1.2s ease-in-out infinite; } @keyframes vi-pulse { 50% { box-shadow: 0 0 0 3px #FFD54F, 0 0 0 11px rgb(255 213 79 / .2); } } .entete .visite-cible, .onglets .visite-cible { z-index: 60; } .voile.voile-visite { background: rgb(20 35 29 / .12); } .voile.voile-visite.en-haut { align-items: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 70px); } .voile.voile-visite.en-haut .feuille { border-radius: 20px; margin: 0 10px; } .voile.voile-visite { pointer-events: auto; } /* ═════════ v33 : accueil, période, paie sur une page, chiffres, détail des calculs, recherche ═════════ */ /* Bandeau du haut de l'accueil */ .bandeau-accueil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; } .bandeau-accueil button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; font: inherit; color: inherit; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; cursor: pointer; } .bandeau-accueil button > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); } .bandeau-accueil b { font-size: 19px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bandeau-accueil b .sur { font-size: 13px; font-weight: 600; color: var(--doux); } .bandeau-accueil small { font-size: 12px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bandeau-accueil .jauge { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--vert-clair); overflow: hidden; margin: 3px 0 1px; } .bandeau-accueil .jauge i { display: block; height: 100%; background: var(--vert); border-radius: 3px; } .bandeau-accueil .rouge { border-color: var(--rouge); background: var(--rouge-fond); } .bandeau-accueil .rouge small { color: var(--rouge); font-weight: 600; } .bandeau-accueil .vert small { color: var(--ok); } @media (max-width: 640px) { .bandeau-accueil { grid-template-columns: 1fr 1fr; } } /* Le même bandeau de période partout */ .jour-nav-titre.ailleurs { border-radius: 12px; } .jour-nav-titre.ailleurs:active { background: var(--vert-clair); } .jour-nav-titre .revenir { font-style: normal; font-size: 11.5px; color: var(--vert); font-weight: 600; margin-top: 2px; } .jour-nav-titre b { text-wrap: balance; } @media print { .jour-nav .btn-icone, .jour-nav-titre .revenir { display: none; } } /* Un mois de paie : blocs dépliables */ .blocs-paie { display: grid; gap: 10px; margin-top: 14px; } .bloc-paie { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; } .bloc-paie > summary, .bloc-paie.lien-bloc { list-style: none; cursor: pointer; display: grid; gap: 2px; padding: 14px 44px 14px 16px; position: relative; } .bloc-paie > summary::-webkit-details-marker { display: none; } .bloc-paie > summary::after, .bloc-paie.lien-bloc::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--doux); transition: transform .15s; } .bloc-paie[open] > summary::after { transform: translateY(-50%) rotate(90deg); } .bloc-paie > summary b, .bloc-paie.lien-bloc b { font-size: 16px; } .bloc-paie > summary small, .bloc-paie.lien-bloc small { font-size: 12.5px; color: var(--doux); } .bloc-paie[open] > summary { border-bottom: 1px solid var(--trait); } .bloc-paie .bp-corps { padding: 12px 10px 6px; } .bloc-paie .bp-corps > .carte:first-child { margin-top: 0; } .bloc-paie.lien-bloc { font: inherit; color: inherit; text-align: left; width: 100%; } /* Chiffres plus lisibles */ .chiffres-cles b, b.chiffre, td.chiffre { font-variant-numeric: tabular-nums; } .u { font-family: var(--police); font-size: .68em; font-weight: 600; margin-left: .18em; opacity: .7; } @media (max-width: 640px) { .chiffres-cles:not(.trois):not(.deux) { grid-template-columns: 1fr 1fr; } .chiffres-cles:not(.trois):not(.deux) div { border-left: 1px solid var(--trait); } .chiffres-cles:not(.trois):not(.deux) div:nth-child(odd) { border-left: 0; } .chiffres-cles:not(.trois):not(.deux) div:nth-child(n+3) { border-top: 1px solid var(--trait); } .chiffres-cles b { font-size: 20px; } .chiffres-cles div { padding: 10px 8px; } } /* « ? » : le calcul détaillé */ .q-detail { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; vertical-align: 1px; border-radius: 50%; border: 1px solid var(--cadre); background: var(--vert-clair); color: var(--vert); font: 700 12px var(--police); cursor: pointer; } .calcul-detail { background: var(--vert-clair); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.5; margin: 8px 0 12px; } .calcul-detail small { color: var(--doux); } @media print { .q-detail { display: none; } } /* Recherche du menu ☰ */ .recherche-menu { width: 100%; margin: 4px 0 12px; } .menu-res .rb-sous { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; } .menu-res .rb-sous button { text-align: left; min-height: 40px; font-size: 15px; } /* Admin : À faire */ .a-faire-bord h3 .cpt { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 12px; text-align: center; vertical-align: 2px; } .a-faire-bord .notifs .rappel { margin-bottom: 8px; } /* v33.1 : bandeau de l'accueil en 3 cases (sans doublon avec la carte du service) */ .bandeau-accueil { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 640px) { .bandeau-accueil { grid-template-columns: 1fr 1fr !important; } } .bandeau-accueil .afaire { border-color: #F5C690; background: var(--orange-fond); } .bandeau-accueil .afaire b { color: var(--orange); } @media (max-width: 640px) { .bandeau-accueil { gap: 6px; } .bandeau-accueil button { padding: 9px 9px; } .bandeau-accueil b { font-size: 17px; } .bandeau-accueil b .sur { font-size: 12px; } .bandeau-accueil button > span:first-child { font-size: 10px; letter-spacing: .04em; } } /* ═════════ v34 : textes légaux, conditions, partage ═════════ */ .texte-legal h3 { margin: 16px 0 6px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--vert); } .texte-legal h3:first-child { margin-top: 0; } .texte-legal p, .texte-legal li { font-size: 15px; line-height: 1.5; } .texte-legal ul { padding-left: 20px; margin: 6px 0; } .texte-legal li { margin-bottom: 6px; } .liens-legaux { text-align: center; font-size: 13px; color: var(--doux); margin: 10px 0 18px; } .liens-legaux .btn.lien { font-size: 13px; padding: 4px 2px; min-height: 0; } .centre { text-align: center; } .accepter { background: var(--vert-clair); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; margin: 16px 0 12px; transition: box-shadow .2s; } .accepter.surligne { box-shadow: 0 0 0 3px var(--orange); } .accepter .case-cocher { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; } .accepter .case-cocher input { width: 22px; height: 22px; flex: none; margin-top: 1px; } .accepter .lien-aller { font-size: inherit; } .accepter p { margin: 8px 0 0; text-align: center; } .accepter .case-cocher { font-weight: 400; } /* v34.1 : Vérifier ma paie — un mois par ligne */ .docs-legende { display: grid; gap: 8px; margin: 8px 0 12px; } .docs-legende div { background: var(--fond); border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; } .docs-legende small { color: var(--doux); font-size: 13px; } .docs-mois { display: grid; gap: 8px; } .dm { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; cursor: pointer; } .dm-m { display: grid; gap: 1px; } .dm-m b { font-size: 16px; } .dm-m small { font-size: 12px; color: var(--doux); } .dm-p { display: grid; gap: 1px; border-radius: 10px; padding: 5px 8px; background: var(--fond); } .dm-p small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); } .dm-p b { font-size: 13.5px; white-space: nowrap; } .dm-p.ok { background: #E3F3E8; } .dm-p.ok b { color: var(--ok); } .dm-p.ko { background: var(--orange-fond); } .dm-p.ko b { color: var(--orange); } .dm-p.rouge { background: var(--rouge-fond); } .dm-p.rouge b { color: var(--rouge); } .dm-p.att b { color: var(--doux); font-weight: 600; } .dm-f { font-size: 20px; color: var(--doux); } .dm.encours { border-style: dashed; } .dm .tag-encours { color: var(--vert) !important; font-weight: 700; text-transform: uppercase; font-size: 10.5px !important; letter-spacing: .05em; } /* v35 : mots du métier */ abbr.terme { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--vert); cursor: help; } .def-terme { font-size: 16px; line-height: 1.55; } @media print { abbr.terme { text-decoration: none; } } .explication-cp ol { padding-left: 20px; } .explication-cp li { margin-bottom: 6px; line-height: 1.45; } .explication-cp h3 { margin-top: 14px; } .tot-journal, details.bloc-paie[data-bloc="valeur-cp"] { margin: 0 0 14px; } .bloc-paie .bp-corps > .carte, .bloc-paie .bp-corps > section.carte { border: 0; box-shadow: none; padding-left: 4px; padding-right: 4px; } /* ═════════ v36 : menu 📷 et feuilles de service TMC ═════════ */ .menu-ajout .ico-emoji { font-size: 22px; display: grid; place-items: center; } .menu-ajout .entree { width: 100%; } .grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (max-width: 420px) { .grille-4 { grid-template-columns: 1fr 1fr; } .tmc-carte .grille-3 { grid-template-columns: 1fr 1fr; } } .tmc-tete { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .tmc-tete h3 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--texte); } .tmc-photo { flex: none; width: 84px; height: 60px; padding: 0; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; background: var(--fond); cursor: zoom-in; } .tmc-photo img { width: 100%; height: 100%; object-fit: cover; } .tmc-zoom { overflow: auto; max-height: 75vh; -webkit-overflow-scrolling: touch; } .tmc-zoom img { width: 200%; max-width: none; display: block; } .tmc-controle { background: var(--fond); border-radius: 10px; padding: 8px 10px; } /* ═════════ v37-v38 : périodes et déviations ═════════ */ .liste-periodes .periode { margin-bottom: 10px; } .periode .per-nom { font-size: 17px; } .periode.off { opacity: .65; } .periode.service, .periode.maintenue { border-color: var(--cadre); box-shadow: 0 0 0 1px var(--cadre) inset; } .boutons-per { flex-wrap: wrap; gap: 8px; } .dev-alerte { width: 100%; text-align: left; font: inherit; cursor: pointer; } .dev-alerte span:nth-child(2) { display: grid; gap: 2px; flex: 1; } .dev-alerte small { font-weight: 400; } .liste-dev { display: grid; gap: 8px; margin: 10px 0 14px; } .dev-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; cursor: pointer; } .dev-t { display: grid; gap: 2px; } .dev-t small { color: var(--doux); font-size: 12.5px; } .dev-image { margin: 10px 0; } .dev-image img { width: 100%; border-radius: 10px; border: 1px solid var(--trait); } .texte-dev { background: var(--fond); border-radius: 10px; padding: 10px 12px; line-height: 1.5; margin: 8px 0; } .tag-j.dev { background: var(--orange-fond); color: var(--orange); border-color: #F5C690; font-weight: 700; } /* ═════════ v37 : affiche QR, journal des modifications, menu de côté sur ordinateur ═════════ */ .affiche-qr { background: #fff; border: 2px solid var(--cadre); border-radius: 16px; padding: 22px; text-align: center; max-width: 520px; margin: 0 auto; color: #1E2B26; } .affiche-qr h2 { font-size: 30px; margin: 0 0 6px; color: var(--vert); } .affiche-qr .aq-sous { font-size: 16px; margin: 0 0 14px; } .affiche-qr svg.qr { width: 72%; max-width: 320px; height: auto; display: block; margin: 0 auto; } .affiche-qr .aq-scan { font-size: 18px; margin: 12px 0 2px; } .affiche-qr .aq-url { font-family: var(--chiffres); font-size: 14px; color: var(--doux); margin: 0 0 10px; } .affiche-qr ul { text-align: left; display: inline-block; margin: 6px auto 12px; font-size: 15px; } .affiche-qr .aq-pied { font-size: 12.5px; color: var(--doux); margin: 0; } @media print { body:has(.affiche-qr) .entete, body:has(.affiche-qr) .onglets, body:has(.affiche-qr) #cote { display: none !important; } .affiche-qr { border: 0; max-width: none; } .affiche-qr h2 { font-size: 44px; } .affiche-qr svg.qr { width: 60%; } } .liste.modifs > div { align-items: flex-start; } .mo-h { min-width: 46px; color: var(--doux); } .mo-t { display: grid; gap: 2px; } .mo-t small { font-size: 12.5px; } body.avec-cote { padding-left: 300px; } body.avec-cote .burger { display: none; } body.avec-cote .onglets { left: 300px; } #cote { position: fixed; left: 0; top: 0; bottom: 0; width: 300px; overflow-y: auto; background: var(--carte); border-right: 1px solid var(--trait); padding: 14px 12px 24px; z-index: 40; } #cote .cote-tete { display: grid; padding: 4px 6px 12px; } #cote .cote-tete b { font-size: 18px; color: var(--vert); } #cote .cote-tete small { color: var(--doux); } #cote .cote-cherche { width: 100%; text-align: left; color: var(--doux); cursor: text; margin-bottom: 10px; background: var(--fond); } #cote .rb-sous { padding-left: 50px; } #cote .rubrique.ici > .rb-tete b { color: var(--vert); } #cote .rb-sous button[aria-current="page"] { background: var(--vert); color: #fff; border-color: var(--vert); } #cote .cote-espaces { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } @media print { #cote { display: none; } body.avec-cote { padding-left: 0; } } .repos-sem .passe { color: var(--doux); text-decoration: line-through; font-weight: 600; } .repos-sem .auj { color: var(--vert); } .liste > div.passe { opacity: .55; } /* ═════════ v38 : nouvelle navigation, accueil, gestes ═════════ */ body.avec-cote .onglets { display: none; } body.avec-cote main { padding-bottom: 24px; } body.avec-cote #ecran { padding-bottom: 24px; } /* Accueil */ .carte-service .mini-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 4px; } .mini-chiffres div { background: var(--fond); border-radius: 10px; padding: 6px 4px; text-align: center; display: grid; gap: 1px; } .mini-chiffres span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); } .mini-chiffres b { font-size: 16px; } .cs-pied { margin: 8px 0 0; } .a-savoir h3 { margin: 4px 0 6px; } .as-liste { display: grid; gap: 6px; } .as-l { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 14.5px; color: inherit; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 9px 12px; cursor: pointer; } div.as-l { cursor: default; } .as-l i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--doux); } .as-l.orange i { background: var(--orange); } .as-l.rouge i { background: var(--rouge); } .as-l.rouge { border-color: #F2B8B8; } .as-l span:nth-child(2) { flex: 1; min-width: 0; } .as-l small { display: block; color: var(--doux); font-size: 12.5px; margin-top: 1px; } .as-l span:last-child { color: var(--doux); font-size: 18px; } .as-ok { margin: 0; color: var(--ok); font-weight: 600; font-size: 14.5px; } .demain { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; color: inherit; text-align: left; background: var(--carte); border: 1px dashed var(--trait); border-radius: 12px; padding: 10px 12px; cursor: pointer; } .demain span:nth-child(2) { flex: 1; } .demain span:last-child { color: var(--doux); font-size: 18px; } .puce-verif { width: 100%; text-align: left; font: inherit; font-weight: 700; color: var(--orange); background: var(--orange-fond); border: 1px solid #F5C690; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; display: flex; justify-content: space-between; } .depot-seg button { font-size: 13px; } /* Gestes : glisser à gauche, appui long */ [data-geste] { touch-action: pan-y; transition: transform .18s ease; } .geste-actions { position: fixed; z-index: 60; display: flex; gap: 0; border-radius: 0 12px 12px 0; overflow: hidden; box-shadow: 0 2px 10px rgb(0 0 0 / .15); } .geste-actions button { border: 0; font: inherit; font-weight: 700; font-size: 14px; color: #fff; padding: 0 16px; min-width: 84px; cursor: pointer; } .geste-actions .g-suppr { background: var(--rouge); } .geste-actions .g-modif { background: #5E6E67; } .geste-actions .g-off { background: var(--orange); } .toast-annuler { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barre) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 14px; background: #1E2B26; color: #fff; border-radius: 12px; padding: 12px 14px 12px 16px; box-shadow: 0 6px 20px rgb(0 0 0 / .25); font-size: 15px; max-width: calc(100vw - 32px); } .toast-annuler button { border: 0; background: none; color: #9FE0BC; font: inherit; font-weight: 800; cursor: pointer; padding: 4px 6px; } body.avec-cote .toast-annuler { bottom: 24px; } [data-geste] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .menu-gestes .danger-txt .txt { color: var(--rouge); font-weight: 700; } /* v38.1 : formulaires plus compacts, conditions qui défilent, déviation à côté du service */ label.champ { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 4px; } label.champ > :is(input, select, textarea, small, .suggestions, div) { flex-basis: 100%; } .profil-form { gap: 8px; padding: 12px; } .profil-form h3 { margin: 8px 0 0; font-size: 13px; } .profil-form > p, .profil-form .doux.petit { margin: 0; } .profil-form .segment { margin-bottom: 0; } .profil-form .grille-2 { gap: 8px; } .profil-form .saisie { min-height: 42px; padding: 8px 10px; } .profil-form .cycle { gap: 3px; } .profil-form .cycle button { min-height: 36px; } .profil-form .btn.large { margin-top: 4px; } .cadre-defile { max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: inset 0 -14px 12px -12px rgb(0 0 0 / .18); } .svc-et-dev { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .badge-dev { border: 0; font: inherit; font-size: 13px; font-weight: 800; color: #fff; background: var(--orange); border-radius: 999px; padding: 4px 10px; cursor: pointer; box-shadow: 0 0 0 3px var(--orange-fond); animation: pulse-dev 2s ease-in-out 3; } @keyframes pulse-dev { 50% { box-shadow: 0 0 0 6px var(--orange-fond); } } .as-l.orange { background: var(--orange-fond); border-color: #F5C690; } .as-l.orange b { color: #7A3E00; } /* ───── v39 : accueil — 2 grandes tuiles puis 3 petites (semaine, déviations, net estimé) ───── */ .bandeau-accueil.v39 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } .bandeau-accueil.v39 > button { grid-column: span 3; } .bandeau-accueil.v39 > button.b3 { grid-column: span 2; } @media (min-width: 900px) { .bandeau-accueil.v39 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } .bandeau-accueil.v39 > button { grid-column: span 3; } .bandeau-accueil.v39 > button.b3 { grid-column: span 2; } } @media (max-width: 640px) { .bandeau-accueil.v39 > button.b3 b { font-size: 15px; } .bandeau-accueil.v39 > button.b3 b .sur { font-size: 11px; } .bandeau-accueil.v39 > button.b3 small { font-size: 11px; } .bandeau-accueil.v39 > button.b3 { padding: 8px 7px; } } .jour-svc { font-size: 10px; padding: 1px 5px; vertical-align: middle; } .segment.mode-per { margin: 8px 0 4px; flex-wrap: wrap; } .segment.mode-per button { flex: 1 1 auto; font-size: 13px; padding: 7px 8px; } /* ═════════════ v40 : thèmes — Clair (par défaut) · Sombre · Bleu marine ═════════════ */ :root[data-theme="sombre"] { color-scheme: dark; --fond: #0F1513; --carte: #18201D; --texte: #E4ECE8; --doux: #9AABA3; --trait: #2C3833; --cadre: #4A9A7C; --vert: #3B8468; --vert-clair: #1F2E29; --saisie: #2C2914; --saisie-bord: #5C5326; --e-repos: #173A24; --e-repos-t: #8FD6A3; --e-ferie: #3A3210; --e-ferie-t: #E8CF6A; --e-conge: #15294A; --e-conge-t: #9EC1F2; --e-maladie: #3E1729; --e-maladie-t: #F0A3C3; --e-saisir: #43280E; --e-saisir-t: #F5B97A; --rouge: #EF6B6B; --rouge-fond: #3A1717; --orange: #F0A048; --orange-fond: #3A2610; --ok: #6BCB8E; } [data-theme="sombre"] body { background: var(--fond); } [data-theme="sombre"] :is(.e-travail, .segment button[aria-pressed="true"], .suggestions, .suggestions button, .rubrique) { background: var(--carte); color: var(--texte); } [data-theme="sombre"] :is(.suggestions, .suggestions button, .rubrique, .rb-sous button) { border-color: var(--trait); } [data-theme="sombre"] :is(.alerte.ok, .bandeau-verif.ok, .pont-gain, .liste > div.encours, .mois-paie.v-juste .verdict, .chip.ok, .verdict-carte.v-juste, .liste.ecarts-liste > label.plus, .verdict-mini.v-juste, .grande-carte.repos, .rappel.vert, .jl.repos, .badge.vert, .pb.plus, .vr-i.ok, .ti.v, .suggestions .sug-ajout, .bloc-elements, table.fiche.avec-reel td.reel, .chiffres-cles.reel-paye, .dm-p.ok, table.cp-mois tr.actuel td) { background: rgb(70 170 110 / .14); color: #A9E3BA; border-color: rgb(70 170 110 / .35); } [data-theme="sombre"] :is(.liste.ecarts-liste > label.plus b, .pb.plus b, .jl.repos .etat-txt) { color: #8FD6A3; } [data-theme="sombre"] :is(.etat.prevu, details.aide, .tag-reel, .alerte.bleu, .exemple, table.journal tr.avenir td.col-date, .mois-paie.v-encours .verdict, .verdict-carte.v-encours, .verdict-carte.v-attente, .grande-carte.conge, .rappel.bleu, .jl.conge, .badge.bleu, .ti.b, .tag-j.bleu) { background: rgb(90 130 220 / .16); color: #B3C8F5; border-color: rgb(90 130 220 / .35); } [data-theme="sombre"] .jl.conge .etat-txt { color: #9EC1F2; } [data-theme="sombre"] :is(.choix-u.eviter, table.comparaison tr.ecart td, .liste.diffs-jours > div, .mois-paie.v-proche .verdict, .verdict-carte.v-proche, .rappel.orange, .jl.a-saisir, .ti.o, .tag-j.orange, .verif-doc.manque, .pf-nouveau, .jl-actions, .verdict-mini.v-proche) { background: rgb(240 160 72 / .14); color: #F5C08A; border-color: rgb(240 160 72 / .35); } [data-theme="sombre"] .jl.a-saisir .etat-txt { color: #F5B97A; } [data-theme="sombre"] :is(table.comparaison tr.ecart-fort td, .mois-paie.v-ecart .verdict, .chip.ko, .verdict-carte.v-ecart, .liste.ecarts-liste > label.moins, .verdict-mini.v-ecart, .rappel.rouge, .badge.rouge, .pb.moins, .vr-i.ko) { background: rgb(239 107 107 / .15); color: #F5A3A3; border-color: rgb(239 107 107 / .35); } [data-theme="sombre"] :is(.liste.ecarts-liste > label.moins b, .pb.moins b) { color: #F5A3A3; } [data-theme="sombre"] .jl.maladie { background: rgb(240 163 195 / .12); } [data-theme="sombre"] .jl.maladie .etat-txt { color: #F0A3C3; } [data-theme="sombre"] :is(.mois-paie.v-explique .verdict, .verdict-carte.v-explique, .verdict-mini.v-explique, table.journal tr.passe td.col-date, .liste > div.passe, .badge.gris, .pb.neutre, .tag-j, .segment, .rb-sous button, .svc-pill, .ti.g) { background: #222C28; color: #C5D1CB; border-color: var(--trait); } [data-theme="sombre"] .bilan-2 > i { background: var(--trait); } [data-theme="sombre"] :is(.alerte.orange, .as-l.orange, .bandeau-accueil .afaire) { background: var(--orange-fond); border-color: rgb(240 160 72 / .4); } [data-theme="sombre"] :is(.alerte.rouge) { background: var(--rouge-fond); border-color: rgb(239 107 107 / .4); } [data-theme="sombre"] :is(img:not(.qr), .dev-image) { filter: brightness(.9); } /* Bleu marine : en-tête bleu, repos en violet, journées de travail marquées d'un trait orange (comme un planning papier) */ :root[data-theme="bleu"] { --fond: #F2F5F8; --trait: #D5DEE6; --cadre: #275D7E; --vert: #275D7E; --vert-clair: #E3EDF4; --e-repos: #EEE4F5; --e-repos-t: #6E4091; --doux: #5D6B78; --texte: #1C2A36; } [data-theme="bleu"] .jl.travail { box-shadow: inset 6px 0 0 #F0A63C; } [data-theme="bleu"] .jl.repos { background: #FAF6FC; box-shadow: inset 6px 0 0 #9466AE; } [data-theme="bleu"] .jl.repos .etat-txt { color: #6E4091; } [data-theme="bleu"] .jl.conge { box-shadow: inset 6px 0 0 #9466AE; } [data-theme="bleu"] .jl.a-saisir { box-shadow: inset 6px 0 0 #E07A2E; } [data-theme="bleu"] .jl.maladie { box-shadow: inset 6px 0 0 #C2577F; } [data-theme="bleu"] :is(.segment, .rb-sous button) { background: #E6ECF2; } [data-theme="bleu"] :is(.grande-carte.repos, .rappel.vert, .badge.vert) { background: #F3EDF8; color: #5B3478; } /* Réglages : le choix de l'affichage */ .choix-theme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; } .choix-theme button { display: grid; gap: 6px; justify-items: center; padding: 8px 4px 10px; border-radius: 12px; border: 2px solid var(--trait); background: var(--carte); color: var(--texte); font-size: 13px; font-weight: 600; } .choix-theme button[aria-pressed="true"] { border-color: var(--cadre); box-shadow: 0 0 0 2px var(--vert-clair); } .choix-theme i { display: block; width: 100%; height: 34px; border-radius: 8px; border: 1px solid rgb(0 0 0 / .1); } .choix-theme .t-clair i { background: linear-gradient(#2D6553 0 30%, #F4F7F5 30%); } .choix-theme .t-sombre i { background: linear-gradient(#3B8468 0 30%, #18201D 30%); } .choix-theme .t-bleu i { background: linear-gradient(#275D7E 0 30%, #F2F5F8 30% 65%, #9466AE 65% 72%, #F2F5F8 72% 86%, #F0A63C 86%); } .choix-theme .t-auto i { background: linear-gradient(90deg, #F4F7F5 50%, #18201D 50%); } @media (max-width: 380px) { .choix-theme { grid-template-columns: 1fr 1fr; } } /* ───── v41 : bus en commun, messagerie, idées ───── */ .sigs { display: grid; gap: 8px; margin: 6px 0 10px; } .sig { border: 1px solid #F5C690; background: var(--orange-fond); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; } .sig small { color: var(--doux); font-size: 12.5px; } .sig.ancien { opacity: .72; border-style: dashed; } .sig.repare { background: var(--carte); border-color: var(--trait); } .sig-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .sig-act .btn { padding: 6px 10px; font-size: 13px; min-height: 0; } .carte.sigs { padding: 10px; } .sig-bus { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: start; } .sig-bus > b { font-size: 17px; padding-top: 10px; } .indices-bus { display: grid; gap: 4px; margin-top: 4px; } .indice-bus { font-size: 13px; color: var(--doux); } .indice-bus.orange { color: var(--orange); font-weight: 600; } .dem p { margin: 6px 0; } .liste-dem, .liste-idees { display: grid; gap: 10px; margin-top: 10px; } .fil { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .msg { max-width: 86%; align-self: flex-start; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px 14px 14px 4px; padding: 8px 11px; } .msg.mien { align-self: flex-end; background: var(--vert-clair); border-color: transparent; border-radius: 14px 14px 4px 14px; } .msg.admin:not(.mien) { border-color: var(--cadre); } .msg.supprime { opacity: .6; } .msg-tete { display: flex; align-items: baseline; gap: 6px; font-size: 13px; } .msg-tete small { color: var(--doux); font-size: 11.5px; } .msg-txt { margin-top: 2px; white-space: normal; overflow-wrap: anywhere; } .msg-act { display: flex; gap: 10px; justify-content: flex-end; } .msg-act .btn.lien { font-size: 12.5px; padding: 2px 0; min-height: 0; } .btn.lien.danger { color: var(--rouge); } .ecrire { position: sticky; bottom: calc(var(--barre) + 8px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; align-items: flex-end; background: var(--fond); padding: 8px 0; z-index: 2; } .ecrire textarea { flex: 1; resize: vertical; min-height: 44px; } .epingle { background: var(--e-conge); color: var(--e-conge-t); border-radius: 12px; padding: 10px 12px; margin: 10px 0; } details.regles { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; margin: 10px 0; } details.regles > div { margin: 8px 0; line-height: 1.5; } .liste.conv button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; } .idee.faite, .idee.refusee { opacity: .8; } .reponse-admin { background: var(--vert-clair); border-radius: 10px; padding: 8px 10px; } @media (min-width: 1100px) { .ecrire { bottom: 8px; } } .msg-tete { flex-wrap: wrap; } .msg-tete .doux.petit { flex-basis: 100%; order: 3; font-size: 11.5px; } /* ───── v42 : discussions ───── */ .disc-filtres { margin: 8px 0; } .liste-disc { display: grid; gap: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; margin-bottom: 10px; } .disc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid var(--trait); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .liste-disc > .disc:first-child { border-top: 0; } .disc-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--vert-clair); display: grid; place-items: center; font-size: 20px; } .disc-txt { flex: 1; min-width: 0; display: grid; gap: 2px; } .disc-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .disc-txt small { color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; } .disc.nonlu .disc-txt b, .disc.nonlu .disc-txt small { color: var(--texte); font-weight: 700; } .disc-meta { display: grid; justify-items: end; gap: 4px; } .disc-meta small { color: var(--doux); font-size: 12px; white-space: nowrap; } .disc-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--vert); color: #fff; font-size: 12px; line-height: 22px; text-align: center; } .disc-n.muet { background: var(--doux); } .disc-pin { font-size: 12px; } .disc-tete { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; background: var(--fond); padding: 6px 0 8px; border-bottom: 1px solid var(--trait); } .disc-tete .disc-ico { width: 36px; height: 36px; font-size: 17px; } button.epingle { display: flex; gap: 8px; width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; } div.regles { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; margin: 10px 0; display: grid; gap: 8px; line-height: 1.5; } .sep-jour, .sep-nouv { text-align: center; margin: 8px 0 2px; } .sep-jour span { font-size: 12px; color: var(--doux); background: var(--vert-clair); padding: 3px 10px; border-radius: 10px; } .sep-nouv { border-top: 1px solid var(--orange); margin-top: 12px; } .sep-nouv span { position: relative; top: -10px; background: var(--fond); color: var(--orange); font-size: 12px; font-weight: 700; padding: 0 8px; } .fil .msg { display: flex; gap: 8px; max-width: 88%; padding: 0; background: none; border: 0; border-radius: 0; align-self: flex-start; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .fil .msg.mien { align-self: flex-end; flex-direction: row-reverse; } .fil .msg.suite { margin-top: -4px; padding-left: 40px; } .fil .msg.mien.suite { padding-left: 0; } .avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 2px; } .msg-corps { background: var(--carte); border: 1px solid var(--trait); border-radius: 4px 14px 14px 14px; padding: 7px 11px 5px; min-width: 70px; } .msg.mien .msg-corps { background: var(--vert-clair); border-color: transparent; border-radius: 14px 4px 14px 14px; } .msg.suite .msg-corps { border-radius: 14px; } .msg.admin:not(.mien) .msg-corps { border-color: var(--cadre); } .msg.supprime .msg-corps { opacity: .6; } .msg.surligne .msg-corps { box-shadow: 0 0 0 3px var(--orange); } .msg-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; margin-bottom: 1px; } .msg-tete .doux.petit { flex-basis: 100%; font-size: 11.5px; } .msg-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 3px; } .msg-pied small { color: var(--doux); font-size: 11px; margin-left: auto; padding-left: 6px; } .react { border: 1px solid var(--trait); background: var(--fond); border-radius: 12px; padding: 1px 7px; font-size: 13px; cursor: pointer; color: var(--texte); } .react.moi { border-color: var(--cadre); background: var(--vert-clair); font-weight: 700; } .citation { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--cadre); background: rgb(0 0 0 / .04); border-radius: 6px; padding: 4px 8px; margin: 2px 0 4px; font: inherit; font-size: 13px; color: var(--doux); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .citation b { color: var(--texte); } .ecrire { flex-direction: column; align-items: stretch; gap: 6px; } .ecrire-l { display: flex; gap: 8px; align-items: flex-end; } .ecrire-l textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; border-radius: 22px; padding: 11px 16px; } .ecrire-l .btn { width: 46px; height: 46px; border-radius: 50%; padding: 0; font-size: 18px; flex: none; } .rep-barre { display: flex; align-items: center; gap: 8px; background: var(--carte); border-left: 3px solid var(--cadre); border-radius: 8px; padding: 4px 4px 4px 10px; font-size: 13px; } .rep-barre span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .react-choix { display: flex; justify-content: space-between; gap: 6px; margin: 2px 0 12px; } .react-choix button { flex: 1; font-size: 26px; padding: 8px 0; border-radius: 14px; border: 1px solid var(--trait); background: var(--carte); cursor: pointer; } .react-choix button[aria-pressed="true"] { border-color: var(--cadre); background: var(--vert-clair); } .menu-msg { display: grid; border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; } .menu-msg button { text-align: left; padding: 13px 16px; border: 0; border-top: 1px solid var(--trait); background: var(--carte); font: inherit; color: var(--texte); cursor: pointer; } .menu-msg button:first-child { border-top: 0; } .menu-msg button.danger { color: var(--rouge); } .react-g { font-size: 20px; width: 34px; } .vide-fil { text-align: center; padding: 24px 10px; } .segment.mini button { padding: 5px 8px; font-size: 12.5px; } .liste.membres > div { align-items: center; } .sig-msg { display: grid !important; gap: 6px; } /* ───── v42 : barre contextuelle dans Messages ───── */ @media (max-width: 1099px) { body.ctx-msg .seg-ech { display: none; } } .onglets button { position: relative; } .onglets button[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #D93025; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; } body.dans-fil .onglets { display: none; } body.dans-fil .ecrire { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } body.dans-fil #ecran { padding-bottom: 12px; } .ecrire { margin: 0 -16px; padding: 8px 16px; box-shadow: 0 -6px 12px -10px rgb(0 0 0 / .25); } .disc-tete { top: var(--h-entete, 0px); } .recherche-liste { margin: 6px 0 8px; } /* v44 : boutons empilés (choix du jour d'une feuille TMC) */ .pile { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } /* v44 : la variante du jour sous le champ Service */ .variante-aide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: -4px; } .variante-aide:empty { display: none; } .variante-autres { display: inline-flex; flex-wrap: wrap; gap: 6px; } .btn.mini { padding: 3px 9px; min-height: 0; font-size: .85em; border-radius: 999px; } .voile.voile-haut { z-index: 60; align-items: center; } .voile.voile-haut .feuille { border-radius: 16px; margin: 0 16px; } /* v45 : écran des conditions sur une seule page */ .cgu { display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 460px; margin: 0 auto; padding: 18px 4px 0; } .cgu-tete { display: flex; align-items: center; gap: 14px; } .cgu-logo svg { width: 64px; height: 64px; display: block; border-radius: 16px; box-shadow: 0 6px 18px rgb(20 35 29 / .18); } .cgu-tete h2 { margin: 0; font-size: 24px; } .cgu-tete p { margin: 2px 0 0; font-size: 14px; } .cgu-points { list-style: none; margin: 0; padding: 4px 14px; display: grid; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; } .cgu-points li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: 15px; line-height: 1.4; } .cgu-points li + li { border-top: 1px solid var(--trait); } .cgu-points li > b { font-size: 20px; line-height: 1.2; } .cgu .accepter { margin: 0; padding: 14px; align-items: center; font-weight: 600; } .cgu-partage { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; background: var(--carte); font-size: 14px; } .cgu-partage summary { cursor: pointer; font-weight: 600; } .cgu-partage h3:empty { display: none; } .cgu-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 0; font-size: 13px; } .cgu-liens .btn.lien { font-size: 13px; padding: 4px 0; min-height: 0; } /* v45 : la petite carte des déviations (OpenStreetMap) */ .mini-carte { position: relative; overflow: hidden; height: 260px; border-radius: 14px; border: 1px solid var(--trait); background: #e8eee9; touch-action: none; user-select: none; cursor: grab; } .mini-carte.grande { height: min(62vh, 520px); } .mc-tuiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; } .mc-trace { position: absolute; inset: 0; pointer-events: none; } .mc-ligne-fond { fill: none; stroke: #fff; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; opacity: .9; } .mc-ligne { fill: none; stroke: #2F9E44; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; } .mc-point { fill: #fff; stroke: #2F9E44; stroke-width: 3; } .mc-depart { fill: #2B8A3E; stroke: #fff; stroke-width: 3; } .mc-arrivee { fill: #C92A2A; stroke: #fff; stroke-width: 3; } .mc-zoom { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; } .mc-zoom button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--trait); background: #fff; color: #1F2A24; font-size: 20px; line-height: 1; cursor: pointer; } .mc-credit { position: absolute; right: 0; bottom: 0; background: rgb(255 255 255 / .8); font-size: 10px; padding: 1px 6px; color: #333; border-top-left-radius: 6px; } .mc-credit a { color: inherit; } .mc-legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; } .mc-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; } /* v45 : messagerie — nom plus grand, rôle, citations, liens, sondages, lu par */ .msg-tete b { font-size: 15px; font-weight: 700; } .role-msg { font-size: 12px; line-height: 1; padding: 2px 6px; border-radius: 999px; background: var(--fond); border: 1px solid var(--trait); } .role-msg.admin { background: #E7F0FF; border-color: #BFD3F5; color: #1C3D7A; font-weight: 600; } .etoile-sup { font-size: 12px; margin-right: 4px; } .msg.cite .msg-corps { box-shadow: inset 3px 0 0 var(--orange, #E8590C); } .mention { color: #1C3D7A; background: #E7F0FF; border-radius: 4px; padding: 0 3px; font-weight: 600; } .lien-msg { border: 0; background: none; padding: 0; font: inherit; color: var(--vert-fonce, #1F4D3E); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 600; } .mention-choix { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; } .mention-choix button { border: 1px solid var(--trait); background: var(--carte); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; } .sondage { display: grid; gap: 6px; margin: 8px 0 2px; min-width: 220px; } .sd-choix { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--trait); background: var(--carte); border-radius: 10px; padding: 9px 12px; font: inherit; cursor: pointer; } .sd-choix.moi { border-color: var(--vert, #2E6B56); font-weight: 600; } .sd-choix:disabled { cursor: default; opacity: 1; } .sd-barre { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vert-clair, #E3EFE9); z-index: 0; transition: width .3s; } .sd-txt, .sd-n { position: relative; z-index: 1; } .sd-txt { flex: 1; } .sd-noms { color: var(--doux); font-size: 12px; margin: -2px 0 2px 12px; } .lu-par { border: 0; background: none; color: var(--doux); font-size: 12px; padding: 2px 0; cursor: pointer; } /* v45 : améliorations (admins) */ .idee-l { display: flex; align-items: center; gap: 10px; } .idee-l .idee-t { flex: 1; display: grid; gap: 2px; } .idee-l .idee-t small { font-size: 12px; } .idee-l.epinglee { background: #FFF8E6; border-radius: 10px; } .nb-etoiles { font-size: 13px; font-weight: 700; color: #B7791F; white-space: nowrap; } /* v46 : annonce en haut de l'accueil, bus cliquable */ .annonce-haut { display: flex; align-items: flex-start; gap: 6px; background: #EEF4FF; border: 1px solid #C9D8F5; border-radius: 14px; padding: 4px 4px 4px 0; margin: 0 0 12px; } .annonce-haut.non-lue { border-color: #6C8FD6; box-shadow: 0 0 0 2px rgb(108 143 214 / .18); } .annonce-haut .ah-corps { flex: 1; display: grid; gap: 3px; text-align: left; background: none; border: 0; padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; } .annonce-haut .ah-corps span { line-height: 1.35; } .annonce-haut .ah-corps small { color: var(--doux); font-size: 12px; } .lien-bus { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; } .msg-prog { font-size: 12px; color: #7A4B00; background: #FFF4DB; border-radius: 8px; padding: 4px 8px; margin-top: 6px; } .mc-arret rect { fill: #1C3D7A; stroke: #fff; stroke-width: 2.5; } .mc-arret text { font: 600 12px system-ui, sans-serif; fill: #1C3D7A; paint-order: stroke; stroke: #fff; stroke-width: 3px; } .dev-msg { display: block; width: 100%; margin-top: 6px; text-align: left; border: 1px solid #F2C08A; background: #FFF4E6; color: #8A3B00; border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 600; cursor: pointer; } .fil-cherche { padding: 6px 0; } mark { background: #FFE58A; color: inherit; border-radius: 3px; padding: 0 1px; } .idee-noms { color: #B7791F; font-size: 12px; } /* v46 : tendances */ .tend-barres { display: grid; gap: 6px; } .tend-barres > div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; } .tb-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-barre { height: 8px; background: var(--fond); border-radius: 4px; overflow: hidden; } .tb-barre i { display: block; height: 100%; background: var(--vert, #2E6B56); border-radius: 4px; } .tend-jours { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin-top: 10px; } .tend-jours i { flex: 1; background: var(--vert, #2E6B56); border-radius: 2px 2px 0 0; opacity: .85; min-width: 2px; } /* v47 : carte en plein écran, ma position */ .mini-carte.plein-ecran { position: fixed; inset: 0; z-index: 80; height: auto; border-radius: 0; border: 0; } .mini-carte.plein-ecran .mc-zoom { top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; } .mini-carte.plein-ecran .mc-zoom button { width: 44px; height: 44px; font-size: 22px; box-shadow: 0 2px 8px rgb(0 0 0 / .2); } .mc-zoom button[data-pos].actif { background: #1C64F2; color: #fff; border-color: #1C64F2; } .mc-moi { fill: #1C64F2; stroke: #fff; stroke-width: 3; } .mc-moi-zone { fill: rgb(28 100 242 / .14); stroke: rgb(28 100 242 / .35); stroke-width: 1; } .carte-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .prudence { font-size: 12px; color: #7A4B00; background: #FFF4DB; border-radius: 8px; padding: 6px 10px; margin: 6px 0 0; } /* v48 : parcours des lignes, déviations sur la ligne, suivi */ .mc-ligne.mc-base { stroke: #8A96A3; stroke-width: 5; } .mc-ligne.mc-base.mc-pale { stroke: #C3CBD3; stroke-width: 4; } .mc-ligne.mc-ferme { stroke: #C92A2A; stroke-dasharray: 8 7; stroke-width: 5; } .mc-ligne.mc-detour { stroke: #2F9E44; stroke-width: 6; } .mc-ligne.mc-ligne-l { stroke: #1F6FB2; stroke-width: 6; } .mc-ligne.mc-guide { stroke: #1F6FB2; stroke-width: 9; opacity: .35; } .mc-arret rect { fill: #5F6B76; stroke: #fff; stroke-width: 2.5; } .mc-arret.prov rect { fill: #1C3D7A; } .mc-arret.terminus rect { fill: #1F2A24; } .mc-arret.nd rect { fill: #fff; stroke: #C92A2A; } .mc-barre { stroke: #C92A2A; stroke-width: 2.5; } .mc-arret.nd text { fill: #C92A2A; } .mc-arret.verif rect { fill: #F59F00; } .mc-arret.verif text { fill: #B35C00; } .mc-arret text { font: 600 12px system-ui, sans-serif; fill: #1F2A24; paint-order: stroke; stroke: #fff; stroke-width: 3px; } .mc-arret.prov text { fill: #1C3D7A; } .mc-suivi { position: absolute; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); background: #fff; color: #1F2A24; border-radius: 16px; box-shadow: 0 6px 24px rgb(0 0 0 / .25); padding: 12px 14px; display: grid; gap: 8px; z-index: 3; } .mc-suivi.hors { background: #FFF0E8; box-shadow: 0 0 0 3px #E8590C, 0 6px 24px rgb(0 0 0 / .25); } .mc-s-l { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 15px; } .mc-s-l b { font-size: 18px; } .mc-s-l small { color: #5F6B76; } .mc-s-b { display: flex; gap: 8px; } .mc-s-b button { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid #D4DAD6; background: #F4F6F5; font: inherit; font-weight: 600; } .mc-s-b [data-stop] { background: #1F2A24; color: #fff; border-color: #1F2A24; } /* v49 : guidage, réglages, modification des arrêts, import OpenStreetMap */ .mc-s-v { display: flex; align-items: center; gap: 10px; font-size: 26px !important; } .mc-s-f { font-size: 34px; line-height: 1; color: #1F6FB2; } .mc-s-reg { display: grid; gap: 6px; font-size: 14px; border-top: 1px solid #E3E8E5; padding-top: 8px; } .mc-s-reg label { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .mc-s-reg select { font: inherit; padding: 4px 6px; border-radius: 8px; } .mc-s-reg .mc-s-c { justify-content: flex-start; } .mc-s-reg small { color: #5F6B76; } .mc-arret.choisi rect { stroke: #F59F00; stroke-width: 4; } .tl-sel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #FFF8E6; border-radius: 12px; padding: 8px; } .tl-sel input { flex: 1 1 140px; } .tl-osm-l { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--trait); } .tl-osm-l span { display: grid; } .tl-osm-l small { color: var(--doux); } .tl-osm-l select { max-width: 150px; } /* v52 : plusieurs affiches de déviation à vérifier */ .lot-dev { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .lot-img { flex: none; width: 52px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--vert-clair); border: 1px solid var(--trait); } /* v52 : Progression 100 % */ .anneau { flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; position: relative; } .anneau > span { width: 72%; height: 72%; border-radius: 50%; background: var(--carte); display: flex; align-items: center; justify-content: center; font: 700 .8rem var(--chiffres); color: var(--vert); } .as-l.prog .anneau > span { font-size: .62rem; } .prog-lien { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; } .prog-lien > span:nth-child(2), .prog-tete > div { flex: 1; display: flex; flex-direction: column; } .prog-lien small, .prog-tete small, .prog-t small { color: var(--doux); font-size: .85rem; } .prog-tete { display: flex; align-items: center; gap: 14px; } .prog-tete .anneau > span { font-size: 1.1rem; } .prog-liste { display: flex; flex-direction: column; gap: 8px; } .prog-l { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0; } .prog-l.fait { opacity: .75; } .prog-c { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--trait); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; } .prog-l.fait .prog-c { background: var(--ok); border-color: var(--ok); } .prog-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .prog-t .ligne-flex { margin-top: 6px; } /* v53 : barre du bas adaptée à la rubrique : les mêmes choix ne se répètent pas en haut */ body.ctx-nav .seg-vue { display: none; } .menu-btn { flex: none; width: 40px; height: 40px; margin-left: -6px; border: 0; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; } .menu-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .menu-burger { display: flex; flex-direction: column; gap: 6px; } .menu-burger > div { border-bottom: 1px solid var(--trait); padding-bottom: 6px; } .burger-t { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0 4px; } .burger-t b { flex: 1; font-size: 1.05rem; } .burger-t .ico svg { width: 24px; height: 24px; fill: none; stroke: var(--vert); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .burger-s { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 4px 40px; } .burger-s button { border: 1px solid var(--trait); background: var(--carte); color: inherit; font: inherit; font-size: .9rem; border-radius: 999px; padding: 6px 12px; min-height: 36px; cursor: pointer; } /* ═══ v53 : l'accueil tient sur un écran — service, puis « À savoir », puis 4 compteurs ; une seule couleur d'accent ═══ */ .accueil-v53 { display: flex; flex-direction: column; gap: 10px; } .accueil-v53 > * { margin-top: 0 !important; margin-bottom: 0 !important; } .accueil-v53 .carte-service { padding: 12px 14px; } .accueil-v53 .carte-service h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); margin: 0; } .accueil-v53 .service-en-cours { background: none; border: 0; padding: 0; margin: 6px 0 8px; gap: 10px; } .accueil-v53 .sc-actions { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; } .accueil-v53 .sc-actions .btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-weight: 600; background: var(--carte); } .accueil-v53 .sc-actions svg { width: 18px; height: 18px; fill: none; stroke: var(--vert); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .accueil-v53 .vacations { grid-template-columns: 1fr 1fr; gap: 8px; } .accueil-v53 .vacation { flex-direction: column; align-items: flex-start; gap: 0; background: var(--fond); padding: 6px 10px; } .accueil-v53 .vacation:only-child { grid-column: span 2; } .accueil-v53 .carte-service .mini-chiffres { margin: 8px 0 0; } .accueil-v53 .mini-chiffres div { background: none; padding: 2px; } .accueil-v53 .cs-pied { margin: 6px 0 0; } .accueil-v53 .a-savoir h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); margin: 0 0 6px; } .accueil-v53 .as-l { min-height: 50px; } .accueil-v53 .as-l small { display: block; color: var(--doux); font-size: 13px; } .accueil-v53 .as-l > span:nth-child(2) { flex: 1; min-width: 0; } .accueil-v53 .as-l.gris i { background: var(--trait); } .bandeau-accueil.v53 { grid-template-columns: 1fr 1fr !important; gap: 8px; } .bandeau-accueil.v53 > button { grid-column: auto !important; padding: 8px 10px; } .bandeau-accueil.v53 b { font-size: 16px; } .bandeau-accueil.v53 b .sur { font-size: 12px; } .bandeau-accueil.v53 .repos-sem { color: var(--vert); } @media (min-width: 900px) { .bandeau-accueil.v53 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .burger-q { width: 100%; text-align: left; color: var(--doux); margin-bottom: 10px; cursor: pointer; background: var(--fond); border-color: var(--trait); } /* v53 : l'annonce en une ligne sur l'accueil (toucher pour la lire) */ .accueil-v53 .annonce-haut { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 0; min-height: 44px; border-radius: 12px; } .accueil-v53 .annonce-haut .ah-corps { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 10px; white-space: nowrap; overflow: hidden; } .accueil-v53 .annonce-haut .ah-corps b { flex: none; font-size: 14px; } .accueil-v53 .annonce-haut .ah-corps span { overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .accueil-v53 .annonce-haut .ah-corps small { display: none; } .accueil-v53 .annonce-haut .btn-icone { width: 36px; height: 36px; min-height: 36px; } .accueil-v53 .annonce-haut { background: var(--carte); border-color: var(--trait); box-shadow: none; } .accueil-v53 .annonce-haut.non-lue { border-color: var(--vert); } .accueil-v53, .accueil-v53 > * { min-width: 0; max-width: 100%; } .accueil-v53 .annonce-haut { overflow: hidden; } /* v54 : thème « TDFC » — orange vif #E7591C (en-tête), orange foncé #B8440F (textes et boutons, lisible), gris #555554, pêche #FBD6B9, bleu nuit #00455E */ :root[data-theme="tdfc"] { --fond: #FBF7F4; --carte: #FFFFFF; --texte: #2B2B2A; --doux: #5E5E5C; --trait: #E8DCD3; --cadre: #B8440F; --vert: #B8440F; --vert-clair: #FDEBDD; --saisie: #FFF4EC; --saisie-bord: #F3C9A8; --e-repos: #DCE9EF; --e-repos-t: #00455E; --e-conge: #E6E3F2; --e-conge-t: #474090; --ok: #4F7A1F; } [data-theme="tdfc"] .entete, [data-theme="tdfc"] body::before { background: #E7591C; } [data-theme="tdfc"] body[data-espace="admin"] .entete { background: #00455E; } [data-theme="tdfc"] body[data-espace="proprietaire"] .entete { background: #474090; } [data-theme="tdfc"] .jl.repos { box-shadow: inset 6px 0 0 #00455E; } [data-theme="tdfc"] .jl.travail { box-shadow: inset 6px 0 0 #E7591C; } [data-theme="tdfc"] :is(.segment, .rb-sous button) { background: #F5EAE2; } .choix-theme .t-tdfc i { background: linear-gradient(#E7591C 0 30%, #FBF7F4 30% 65%, #00455E 65% 72%, #FBF7F4 72% 86%, #FBD6B9 86%); } /* ═══ v54 : le journal comme la maquette — une carte par jour, aujourd'hui encadré ═══ */ .sem-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; } .sem-chiffres > div { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; } .sem-chiffres span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); } .sem-chiffres b { font-size: 17px; } .liste-jours { display: flex; flex-direction: column; gap: 6px; background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } .liste-jours .jl { background: var(--carte); border: 1px solid var(--trait) !important; border-radius: 12px; padding: 8px 12px 8px 4px; min-height: 60px; box-shadow: none !important; gap: 8px; } .liste-jours .jl.auj { border: 2px solid var(--vert) !important; } .liste-jours .jl.repos, .liste-jours .jl.conge, .liste-jours .jl.maladie { background: transparent; } .liste-jours .jl.a-saisir { background: var(--carte); } .jl-date { width: 44px; text-align: center; } .jl-date small { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .jl-centre { display: flex; align-items: center; gap: 10px; } .jl-svc { flex: none; min-width: 56px; display: flex; justify-content: center; } .jl-svc .pastille-svc, .jl-svc > * { font-size: 15px; } .jl-etat { min-width: 56px; text-align: center; padding: 4px 8px; border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--vert-clair); color: var(--vert); } .jl.repos .jl-etat { background: var(--e-repos); color: var(--e-repos-t); } .jl.conge .jl-etat { background: var(--e-conge); color: var(--e-conge-t); } .jl.maladie .jl-etat { background: var(--e-maladie); color: var(--e-maladie-t); } .jl.a-saisir .jl-etat { background: var(--carte); color: var(--e-saisir-t); border: 1px dashed var(--saisie-bord); } .jl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .jl-txt > b { font-size: 14.5px; line-height: 1.3; } .jl-txt small { font-size: 12.5px !important; color: var(--doux); line-height: 1.35; } .jl-dev { color: var(--orange); font-weight: 600; } .jl-h { font-family: var(--chiffres); font-size: 14px; font-weight: 700; } /* ═══ v54 : fiche ligne et fiche déviation comme les maquettes ═══ */ .fl-tete { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-right: 36px; } .fl-tete .pastille-ligne, .fl-tete > span:first-child { font-size: 20px; flex: none; } .fl-tete > div { min-width: 0; display: flex; flex-direction: column; } .fl-tete b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-tete small { font-size: 12.5px; color: var(--doux); } .feuille .as-l { margin: 0 0 10px; } .feuille .as-l small { display: block; color: var(--doux); font-size: 13px; } .feuille .as-l > span:nth-child(2) { flex: 1; min-width: 0; } .fl-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; margin: 0 0 10px; } .fl-sens { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 6px; background: var(--fond); } .fl-sens button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--doux); font: inherit; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; cursor: pointer; padding: 4px; } .fl-sens button small { font-size: 10.5px; letter-spacing: .06em; } .fl-sens button[aria-pressed="true"] { background: var(--carte); color: var(--texte); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .fl-var { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px; background: var(--fond); font-size: 13px; color: var(--doux); } .fl-var select { flex: 1; min-height: 36px; font-size: 13px; } .fl-carte .mini-carte { border-radius: 0; margin: 0; border: 0; } .fl-devmsg { margin: 0; padding: 8px 12px; background: var(--orange-fond); } .fl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 12px 4px; } .fl-actions .btn { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; } .fl-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .fl-pied { margin: 0; padding: 4px 12px 12px; font-size: 12px; color: var(--doux); } .fl-pied .btn.lien { font-size: 12px; min-height: 0; padding: 0; } .fl-svc { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; } .fl-svc > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ou-suis h3 { margin: 0; font-size: 15px; } .ou-grille { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px 10px; align-items: center; font-size: 14px; margin: 8px 0; } .ou-grille i { justify-self: center; width: 12px; height: 12px; border-radius: 3px; background: #5F6B76; } .ou-grille i.ou-p { border-radius: 50%; background: #1F6FB2; } .ou-grille i.ou-t { width: 14px; height: 14px; background: #1F2A24; } /* fiche déviation */ .fd-tete { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding-right: 36px; } .fd-tete h2 { margin: 0; font-size: 21px; line-height: 1.2; } .fd-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--doux); } .fd-arrets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; } .fd-arrets > div { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.5; } .fd-arrets > div:only-child { grid-column: span 2; } .fd-arrets span { display: block; font-size: 11px; letter-spacing: .06em; font-weight: 700; text-transform: uppercase; } .fd-arrets .nd span { color: #C92A2A; } .fd-arrets .pv span { color: #1C3D7A; } .fd-pli { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; margin: 0 0 10px; } .fd-pli summary { font-weight: 700; cursor: pointer; } .fd-pli .dev-image img { width: 100%; border-radius: 8px; margin-top: 8px; } .fd-legende { padding: 8px 12px 0; } .fd-meta span { display: inline-flex; align-items: center; gap: 5px; } .fd-meta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .feuille .fl-tete, .feuille .fl-carte, .feuille .fl-svc, .feuille .fd-tete, .feuille .fd-arrets { max-width: 100%; min-width: 0; box-sizing: border-box; } .feuille .fl-tete { overflow: hidden; } .fl-svc > div > * { flex: none; } /* v55 : « À vérifier » — l'alerte passe sous la ligne, sur toute la largeur */ .jl-centre { flex-wrap: wrap; row-gap: 4px; } .jl-centre > .jl-alerte { flex-basis: 100%; order: 3; font-size: 13px !important; padding-left: 66px; } /* v55 : liste des arrêts à cocher dans « Tracer la déviation » */ .td-coches { margin: 8px 0; } .td-coches summary { font-weight: 700; font-size: 14px; cursor: pointer; padding: 6px 0; } #td-coches { display: flex; flex-direction: column; gap: 4px; } .td-c { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .td-c i { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--trait); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #fff; } .td-c.nd { color: #C92A2A; font-weight: 600; border-color: #F2B8B8; background: #FFF5F5; } .td-c.nd i { background: #C92A2A; border-color: #C92A2A; } .td-c.verif { color: #B35C00; } .td-c.verif i { border-color: #F59F00; } /* v55 : maintenance, sécurité, double authentification */ .maint-actions { display: flex; flex-direction: column; gap: 8px; } .maint-actions .btn { justify-content: flex-start; text-align: left; } .secu-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .secu-l { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte); font-size: 14px; } .secu-l > b { flex: none; width: 22px; text-align: center; } .secu-l small { display: block; color: var(--doux); } .secu-l.danger { border-color: #F2B8B8; background: var(--rouge-fond); } .secu-l.attention { border-color: #F5C690; background: var(--orange-fond); } .secu-l.ok > b { color: var(--ok); } .mfa-qr { display: flex; justify-content: center; padding: 8px; background: #fff; border-radius: 12px; } .mfa-qr img { width: 200px; height: 200px; } .mc-arret.ajout rect { fill: #2F9E44; } .mc-arret.ajout text { fill: #1E7A34; } /* v57 : info trafic IDFM */ .trafic .trafic-l { border-top: 1px solid var(--trait); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; } .trafic .trafic-l:first-of-type { border-top: 0; } .trafic .trafic-l p { margin: 0; } #il-idfm .info { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } #il-idfm td small { display: block; color: var(--doux); font-size: 11px; } /* v57.1 : infos trafic qui ne touchent pas les bus, rangées dans un pli */ .trafic-autres { margin-top: 10px; border-top: 1px solid var(--trait); padding-top: 8px; } .trafic-autres > summary { cursor: pointer; font-size: .9rem; color: var(--doux); padding: 6px 0; } .trafic-autres .trafic-l { opacity: .85; } .trafic-txt > summary { cursor: pointer; font-size: .9rem; list-style: none; } .trafic-txt > summary::after { content: ' Lire tout ›'; color: var(--vert); font-weight: 600; } .trafic-txt[open] > summary { display: none; } .trafic-txt p { white-space: pre-line; margin: 0; } /* v58 : arrêts de la fiche ligne, fiche horaire et prochains passages */ .fl-arrets { margin: 10px 0; border: 1px solid var(--trait); border-radius: 12px; padding: 8px 12px; background: var(--carte); } .fl-arrets > summary { cursor: pointer; font-weight: 600; padding: 4px 0; } .fl-arr-liste { display: flex; flex-direction: column; } .fl-arr { display: flex; align-items: center; gap: 10px; background: none; border: 0; border-bottom: 1px solid var(--trait); padding: 9px 2px; text-align: left; font: inherit; color: var(--texte); } .fl-arr.actif { font-weight: 700; color: var(--vert); } .fl-arr-pt { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--vert); flex: none; } .fl-arr-pt.term { background: var(--vert); } #il-arret-z:not(:empty) { border: 1px solid var(--trait); border-radius: 10px; padding: 10px; margin: 8px 0; } .fa-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #il-arret-z h4 { margin: 10px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); } .fa-direct { display: flex; flex-direction: column; gap: 6px; } .fa-p { display: flex; align-items: center; gap: 10px; } .fa-p small { display: block; color: var(--doux); } .fa-p.supp .fa-h { text-decoration: line-through; color: var(--rouge); } .fa-h { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2em; } .fa-svc { margin-left: auto; font-size: 12px; font-weight: 700; background: var(--vert-clair); color: var(--vert); border-radius: 6px; padding: 2px 6px; white-space: nowrap; } .fa-heures { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 8px; font-variant-numeric: tabular-nums; font-size: 14px; } .fa-heures span.passe { color: var(--doux); opacity: .6; } .fa-heures .fa-svc { margin-left: 3px; font-size: 10px; padding: 0 4px; } /* v58 : Devant / Derrière (Aujourd'hui) et courses des TMC */ .dd { margin: 10px 0 4px; border-top: 1px solid var(--trait); padding-top: 8px; } .dd-titre { margin-bottom: 4px; } .dd-l { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--trait); } .dd-l:last-child { border-bottom: 0; } .dd-c { font-size: 13px; min-width: 0; } .dd-v { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; line-height: 1.15; } .dd-v small { color: var(--doux); font-size: 11px; } .dd-tout > summary { cursor: pointer; font-size: 13px; color: var(--vert); padding: 4px 0; } .dd-vide { margin: 8px 0 0; } .tmc-l { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; } .tmc-prop { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; } .tmc-apercu details { border-bottom: 1px solid var(--trait); padding: 6px 0; } .tmc-apercu summary { cursor: pointer; } .tmc-apercu p { margin: 4px 0; } /* v59 : cartes de déviation, résumé, filtres (conducteur, admin, superviseur) */ .e-idfm { background: #E6EEF9; color: #1C4E8C; border-color: #B9CDEA; } .dv-meslignes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; } .dv-carte { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 14px; border: 1px solid var(--trait); border-radius: 16px; background: var(--carte); color: var(--texte); text-align: left; font: inherit; margin-bottom: 10px; box-sizing: border-box; } .dv-carte.manque { border-color: #F2C9A0; } .dv-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; } .dv-haut .etat { flex: none; } .dv-plus { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--fond); color: var(--doux); border: 1px solid var(--trait); } .dv-titre { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; } .dv-meta { font-size: 13px; color: var(--doux); } .dv-tags { display: flex; flex-wrap: wrap; gap: 6px; } .dv-tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--fond); color: var(--doux); border: 1px solid var(--trait); } .dv-tag.vert { background: var(--vert-clair); color: var(--vert); border-color: transparent; } .dv-tag.orange { background: var(--orange-fond); color: var(--orange); border-color: transparent; } .dv-tag.rouge { background: var(--rouge-fond); color: var(--rouge); border-color: transparent; } .dv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; } .dv-actions .btn { min-height: 44px; } .dv-txt > summary { cursor: pointer; font-size: 13px; color: var(--vert); } .dv-txt p { white-space: pre-line; margin: 6px 0 0; } .dv-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; } .dv-resume button { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); color: var(--texte); font: inherit; text-align: left; } .dv-resume b { font-size: 24px; line-height: 1.1; } .dv-resume span { font-size: 12px; color: var(--doux); } .dv-resume button.orange { border-color: #F2C9A0; } .dv-resume button.orange b { color: var(--orange); } .dv-outils { margin-bottom: 10px; } .dv-filtres { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; } .dv-filtres button { flex: none; height: 34px; padding: 0 12px; border: 1px solid var(--trait); border-radius: 17px; background: var(--carte); color: var(--texte); font: inherit; font-size: 13px; font-weight: 700; } .dv-filtres button[aria-pressed="true"] { background: var(--texte); color: var(--carte); border-color: var(--texte); } .dv-voir { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 12px; background: transparent; color: var(--texte); font: inherit; font-size: 15px; font-weight: 600; } /* v59 : page Lignes */ .lg-jauge { display: flex; flex-direction: column; gap: 8px; } .lg-chiffre { font-size: 22px; } .lg-barre { height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; } .lg-barre i { display: block; height: 8px; background: var(--vert); border-radius: 4px; } .lg-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .lg-carte { position: relative; display: flex; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); min-width: 0; } .lg-carte.manque { border-color: #F2C9A0; } .lg-ouvrir { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 0; background: transparent; color: var(--texte); font: inherit; text-align: left; } .lg-haut .ligne-bus { font-size: 15px; } .lg-term { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; } .lg-amanque { color: var(--orange); } .lg-tags { display: flex; flex-wrap: wrap; gap: 4px; } .lg-tags .dv-tag { font-size: 11px; padding: 2px 6px; } .lg-nb { font-size: 12px; color: var(--doux); } .lg-modif { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--doux); display: flex; align-items: center; justify-content: center; } .lg-modif svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .dv-tag.jaune { background: var(--e-ferie); color: var(--e-ferie-t); border-color: transparent; } .lg-choix { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); } .lg-choix > span:nth-of-type(2) { flex: 1; display: flex; flex-direction: column; font-size: 14px; } .btn.large { width: 100%; } @media (min-width: 700px) { .lg-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lg-hors > summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--doux); } /* v59 : page Services en cartes, écarts avec le TMC */ .sv-ecarts { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 12px; border: 1px solid #F2C9A0; border-radius: 14px; background: var(--orange-fond); color: var(--texte); font: inherit; text-align: left; } .sv-ecarts > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; } .sv-ecarts small { color: var(--doux); } .sv-ec-i { width: 32px; height: 32px; border-radius: 10px; background: var(--carte); color: var(--orange); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 18px; } .sv-filtres { margin: 8px 0; } .sv-filtres > summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--vert); } .sv-gr { display: flex; align-items: center; gap: 8px; } .sv-gr span { color: var(--doux); font-weight: 600; } .sv-liste { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--trait); border-radius: 16px; background: var(--carte); overflow: hidden; margin-bottom: 12px; } .sv-carte { width: 100%; box-sizing: border-box; min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--trait); background: transparent; color: var(--texte); font: inherit; text-align: left; } .sv-carte:last-child { border-bottom: 0; } .sv-num { font-family: ui-monospace, Menlo, monospace; font-weight: 800; font-size: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .sv-mil { display: flex; flex-direction: column; min-width: 0; } .sv-mil b { font-size: 15px; font-variant-numeric: tabular-nums; } .sv-mil small { font-size: 12px; color: var(--doux); overflow-wrap: anywhere; } .sv-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .sv-droite .dv-tag { font-size: 11px; padding: 2px 6px; } .ec-svc { border-bottom: 1px solid var(--trait); padding: 10px 0; } .ec-l { display: grid; grid-template-columns: 24px 110px 1fr; gap: 6px; align-items: center; padding: 4px 0; font-size: 14px; } .ec-k { color: var(--doux); font-size: 13px; } .ec-v s { color: var(--doux); } /* v59 : un segment trop large défile au lieu d'élargir la page */ .segment { max-width: 100%; overflow-x: auto; scrollbar-width: none; box-sizing: border-box; } .segment::-webkit-scrollbar { display: none; } /* v59 : page Bus */ .bu-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .bu-t { position: relative; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--texte); font: inherit; } .bu-t b { font-family: ui-monospace, Menlo, monospace; font-size: 15px; } .bu-t small { font-size: 11px; color: var(--doux); } .bu-t i { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 10px; color: var(--vert); font-weight: 700; } .bu-t.pb { border-color: #F2C9A0; background: var(--orange-fond); } .bu-t.pb small { color: var(--orange); font-weight: 700; } .bu-t.hors { border-style: dashed; } .dv-resume button[aria-pressed="true"] { outline: 2px solid var(--vert); } @media (min-width: 700px) { .bu-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .dd-dir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--trait); font-size: 14px; } .dd-dir small { display: block; color: var(--doux); font-size: 12px; } .dd-st { font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 7px; white-space: nowrap; } .dd-st.vert { background: var(--vert-clair); color: var(--vert); } .dd-st.orange { background: var(--orange-fond); color: var(--orange); } .dd-st.rouge { background: var(--rouge-fond); color: var(--rouge); } .dd-st.gris { background: var(--fond); color: var(--doux); } /* v60 · déviations : temps restant, mes lignes filtrables */ .dv-bas { display: flex; align-items: baseline; gap: 8px; } .dv-bas .dv-meta { flex: 1 1 auto; min-width: 0; } .dv-reste { flex: none; font-size: 12px; font-weight: 700; color: var(--doux); white-space: nowrap; } .dv-pl { border: 2px solid transparent; background: none; padding: 1px; border-radius: 9px; cursor: pointer; } .dv-pl.choisie { border-color: var(--texte); } .dv-meslignes:has(.dv-pl.choisie) .dv-pl:not(.choisie) { opacity: .45; } /* v60 · erreurs et tests, signaler, installer */ .er-liste { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; } .er-l { border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; background: var(--carte); display: flex; flex-direction: column; gap: 6px; } .er-l.vu, .er-l.corrige { opacity: .7; } .er-msg { margin: 0; font-size: 14px; overflow-wrap: anywhere; } .er-pile { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; background: var(--fond); padding: 8px; border-radius: 8px; margin: 6px 0 0; } .er-photo { max-width: 160px; max-height: 220px; border-radius: 10px; border: 1px solid var(--trait); } .inst-etapes { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; } .inst-etapes li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); } .inst-etapes li > b { flex: none; width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--texte); color: var(--carte); font-size: 14px; } .centre-bloc { display: block; margin: 8px auto; } .champ.a-verifier .saisie { border-color: #C26100; box-shadow: 0 0 0 2px rgba(194, 97, 0, .18); } .champ.a-verifier::after { content: 'à vérifier'; font-size: 11px; font-weight: 700; color: #A34A00; } /* v61 · déviations : suspendre / réactiver, filtres */ .dv-bloc { display: flex; flex-direction: column; gap: 0; } .dv-bloc .dv-carte { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dv-bloc-act { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 10px; border: 1px solid var(--trait); border-top: 0; border-radius: 0 0 16px 16px; background: var(--carte); } .dv-carte.suspendue { opacity: .55; } .dv-tag.bleu { background: #E6EEF9; color: #1C4E8C; } .dv-bloc { margin-bottom: 10px; } .dv-bloc .dv-carte { margin-bottom: 0; } /* v61 · règles du calcul */ .rg-theme { display: flex; flex-direction: column; gap: 0; } .rg-l { padding: 10px 0; border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: 4px; } .rg-theme h3 + .rg-l { border-top: 0; } .rg-l.eteinte b { text-decoration: line-through; opacity: .6; } .rg-l p { margin: 0; } .rg-champ { gap: 10px; flex-wrap: wrap; } .rg-champ .saisie { flex: 1 1 160px; min-width: 0; } .rg-fiab { display: flex; flex-direction: column; gap: 6px; } .rg-fiab > div { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px 40px; gap: 8px; align-items: center; font-size: 13px; } .rg-barre { height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; } .rg-barre i { display: block; height: 8px; background: #2D6553; } .barre-enreg { position: sticky; bottom: 84px; z-index: 2; padding: 8px 0; } /* v61 · feuille de TMC complète */ .tmc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; } .tmc-fe { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--texte); font: inherit; text-align: left; } .tmc-fe b { font-family: ui-monospace, Menlo, monospace; font-size: 15px; } .tmc-fe small { font-size: 11px; color: var(--doux); } .tf-entete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; } .tf-c { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; } .tf-c small { font-size: 11px; color: var(--doux); } .tf-liste { display: flex; flex-direction: column; gap: 4px; } .tf-course { border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; background: var(--carte); } .tf-course summary { cursor: pointer; font-size: 14px; } .tf-arrets { margin: 8px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; } .tf-entre { font-size: 12px; color: var(--doux); padding: 2px 12px; } .tf-entre.coupure { color: #8A3C00; font-weight: 700; }