/* ========================================================================== FleetZop ÉDITION TELEINFRA - Feuille de style principale Système de thème jour / nuit via l'attribut data-theme sur . Palette : charte Teleinfra Cameroon — teal #19868A + anthracite #3F4547, police Poppins. Les accents ambre/rouge/vert restent FONCTIONNELS (statuts, alertes) et ne font pas partie de la charte de marque. NB : la couleur primaire réelle vient du paramètre « couleur_primaire » (injecté par head.ejs) — les valeurs ci-dessous sont les replis. ========================================================================== */ /* ---------- 1. Jetons de design (couleurs, ombres, rayons) ---------- */ :root { --primaire: #19868A; /* teal Teleinfra */ --primaire-fonce: #0E4E51; /* teal profond (barre latérale, splash) */ --primaire-clair: #55B4B7; --primaire-pastel: #E3F2F3; --anthracite: #3F4547; /* gris de la charte Teleinfra */ --ambre: #E8A23D; --ambre-pastel: #FBF0DC; --rouge: #D95757; --rouge-pastel: #FBE4E4; --vert: #3E9B62; --vert-pastel: #E3F2E9; --bleu: #4A7FB5; --bleu-pastel: #E4EDF7; --fond: #F3F6F6; /* fond général de l'application */ --surface: #FFFFFF; /* cartes et panneaux */ --surface-2: #F6F9F9; /* zones secondaires (entêtes de table...) */ --texte: #2E3538; /* anthracite (charte Teleinfra) */ --texte-2: #66716F; --bordure: #E2E8E8; --ombre: 0 6px 24px rgba(15, 76, 72, 0.07); --rayon: 16px; --rayon-petit: 10px; } /* Mode nuit : mêmes jetons, valeurs sombres */ [data-theme="dark"] { --primaire-pastel: rgba(79, 179, 172, 0.14); --ambre-pastel: rgba(232, 162, 61, 0.14); --rouge-pastel: rgba(217, 87, 87, 0.16); --vert-pastel: rgba(62, 155, 98, 0.16); --bleu-pastel: rgba(74, 127, 181, 0.16); --fond: #0E1B1A; --surface: #142524; --surface-2: #1A2E2D; --texte: #E6F0EE; --texte-2: #93A8A5; --bordure: #24403E; --ombre: 0 6px 24px rgba(0, 0, 0, 0.35); } /* ---------- 2. Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { /* Charte Teleinfra : Poppins partout (texte courant compris) */ font-family: 'Poppins', system-ui, sans-serif; background: var(--fond); color: var(--texte); font-size: 14.5px; line-height: 1.5; } h1, h2, h3, .kpi-valeur, .topbar-titre, .logo-auth, .splash-nom, .marque-texte { font-family: 'Poppins', system-ui, sans-serif; } a { color: var(--primaire); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- 3. Splash screen ---------- */ #splash { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: linear-gradient(150deg, var(--primaire-fonce), var(--primaire)); transition: opacity .5s ease; } #splash.masque { opacity: 0; pointer-events: none; } .splash-logo { display: flex; align-items: center; gap: 14px; animation: splash-pop .7s ease; } .splash-mark, .marque-icone { width: 40px; height: 40px; border-radius: 12px; display: inline-block; background: linear-gradient(135deg, #4FB3AC 0%, #8AD8D0 100%); position: relative; } .splash-mark::after, .marque-icone::after { content: ""; position: absolute; inset: 9px; border-radius: 6px; border: 3px solid rgba(15, 76, 72, .85); border-right-color: transparent; transform: rotate(45deg); } .splash-nom { font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -1px; } .splash-nom em, .marque-texte em, .logo-auth em { font-style: normal; color: #8AD8D0; } .splash-barre { width: 180px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; } .splash-barre span { display: block; height: 100%; width: 40%; border-radius: 4px; background: #8AD8D0; animation: splash-charge 1.1s ease-in-out infinite; } @keyframes splash-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes splash-charge { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } @media (prefers-reduced-motion: reduce) { .splash-barre span, .splash-logo { animation: none; } } /* ---------- 4. Coquille applicative : sidebar + corps ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--primaire-fonce); color: #CFE7E4; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: margin-left .25s ease; } body.sidebar-fermee .sidebar { margin-left: -248px; } .sidebar-marque { display: flex; align-items: center; gap: 10px; padding: 20px 18px 14px; } .marque-icone { width: 32px; height: 32px; border-radius: 9px; } .marque-icone::after { inset: 7px; border-width: 2.5px; } .marque-texte { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.5px; } .sidebar-nav { flex: 1; padding: 6px 12px 12px; } .nav-groupe { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px; color: #7FA8A4; padding: 16px 10px 6px; } .nav-lien { display: flex; align-items: center; gap: 11px; padding: 9px 10px; margin: 2px 0; border-radius: var(--rayon-petit); color: #CFE7E4; font-weight: 500; } .nav-lien svg { width: 18px; height: 18px; fill: currentColor; opacity: .85; flex-shrink: 0; } .nav-lien:hover { background: rgba(255,255,255,.08); text-decoration: none; } .nav-lien.actif { background: var(--primaire); color: #fff; box-shadow: inset 3px 0 0 #8AD8D0; } .sidebar-pied { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.1); } .badge-version { display: inline-block; font-size: 11.5px; font-weight: 600; background: rgba(138, 216, 208, .15); color: #8AD8D0; border: 1px solid rgba(138, 216, 208, .35); padding: 4px 10px; border-radius: 20px; } .voile-sidebar { display: none; } .app-corps { flex: 1; display: flex; flex-direction: column; min-width: 0; } .contenu { flex: 1; padding: 22px 26px; } /* ---------- 5. Barre supérieure ---------- */ .topbar { display: flex; align-items: center; gap: 14px; padding: 12px 26px; background: var(--surface); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 50; } .topbar-titre { font-size: 18px; font-weight: 700; flex: 1; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .btn-icone { width: 38px; height: 38px; border-radius: var(--rayon-petit); border: 1px solid var(--bordure); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--texte-2); } .btn-icone:hover { background: var(--surface-2); } .btn-icone svg { width: 19px; height: 19px; fill: currentColor; } [data-theme="light"] .icone-soleil { display: none; } [data-theme="dark"] .icone-lune { display: none; } /* Menu profil */ .profil-menu { position: relative; } .profil-bouton { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 30px; padding: 4px 12px 4px 4px; cursor: pointer; color: var(--texte); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primaire), var(--primaire-clair)); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } .profil-infos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .profil-nom { font-size: 13px; font-weight: 600; } .profil-role { font-size: 11px; color: var(--texte-2); } .chevron { width: 16px; height: 16px; fill: var(--texte-2); } .profil-deroulant { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); box-shadow: var(--ombre); min-width: 190px; overflow: hidden; z-index: 60; } .profil-deroulant.ouvert { display: block; } .profil-deroulant a, .lien-deconnexion { display: block; width: 100%; text-align: left; padding: 11px 16px; color: var(--texte); font-size: 13.5px; background: none; border: none; cursor: pointer; font-family: inherit; } .profil-deroulant a:hover, .lien-deconnexion:hover { background: var(--surface-2); text-decoration: none; } .lien-deconnexion { color: var(--rouge); border-top: 1px solid var(--bordure); } /* ---------- 6. Cartes et grilles ---------- */ .carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 20px; margin-bottom: 18px; } .carte-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .carte-entete h2 { font-size: 15.5px; font-weight: 700; margin: 0; } .entete-note { font-size: 12px; font-weight: 500; color: var(--texte-2); margin-left: 6px; } .vide { color: var(--texte-2); font-size: 13.5px; padding: 8px 0; } .grille-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 18px; } .grille-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; } .grille-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; } .grille-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 1100px) { .grille-2-1, .grille-1-2, .grille-2col { grid-template-columns: 1fr; } } /* Cartes KPI pastel */ .kpi { border-radius: var(--rayon); padding: 16px 18px; border: 1px solid transparent; } .kpi-teal { background: var(--primaire-pastel); border-color: rgba(27,122,117,.18); } .kpi-bleu { background: var(--bleu-pastel); border-color: rgba(74,127,181,.18); } .kpi-ambre { background: var(--ambre-pastel); border-color: rgba(232,162,61,.22); } .kpi-vert { background: var(--vert-pastel); border-color: rgba(62,155,98,.2); } .kpi-rouge { background: var(--rouge-pastel); border-color: rgba(217,87,87,.22); } .kpi-libelle { font-size: 12.5px; font-weight: 600; color: var(--texte-2); } /* v5 : les montants s'ADAPTENT à l'écran et à leur longueur (un CA au * MILLIARD de FCFA reste lisible sans déborder ni casser la carte) : * taille fluide via clamp() + retour à la ligne propre si nécessaire. */ .kpi-valeur { font-size: clamp(15px, 2vw + 6px, 24px); font-weight: 800; margin: 4px 0 2px; letter-spacing: -.5px; overflow-wrap: anywhere; line-height: 1.15; } .kpi-sur { font-size: 14px; color: var(--texte-2); font-weight: 600; margin-left: 4px; } .kpi-devise { font-size: 12px; font-weight: 700; color: var(--texte-2); } .kpi-note { font-size: 12px; color: var(--texte-2); } /* Anneau objectif (progression en % via la variable --pct) */ .carte-objectif { display: flex; flex-direction: column; align-items: center; } .anneau { --pct: 0; width: 170px; height: 170px; border-radius: 50%; margin: 12px 0; background: radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%), conic-gradient(var(--primaire) calc(var(--pct) * 1%), var(--bordure) 0); display: flex; align-items: center; justify-content: center; } .anneau-centre { text-align: center; } .anneau-valeur { display: block; font-size: 30px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; } .anneau-libelle { font-size: 12px; color: var(--texte-2); } .objectif-detail { font-size: 12.5px; color: var(--texte-2); text-align: center; margin: 4px 0 0; } .graphique-boite { position: relative; height: 290px; } /* ---------- 7. Tableaux (jamais de débordement : .table-wrap défile) ---------- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 560px; } th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--texte-2); background: var(--surface-2); padding: 10px 12px; border-bottom: 1px solid var(--bordure); white-space: nowrap; } td { padding: 11px 12px; border-bottom: 1px solid var(--bordure); vertical-align: middle; } tbody tr:hover { background: var(--surface-2); } .cellule-action { text-align: right; white-space: nowrap; } /* Pastilles de statut (la classe .badge partage la même base) */ .statut, .pastille, .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-transform: capitalize; } .statut-en_cours { background: var(--bleu-pastel); color: var(--bleu); } .statut-planifiee { background: var(--ambre-pastel); color: var(--ambre); } .statut-terminee, .statut-disponible { background: var(--vert-pastel); color: var(--vert); } .statut-annulee, .statut-en_panne, .statut-suspendu { background: var(--rouge-pastel); color: var(--rouge); } .statut-litige, .statut-immobilise, .statut-repos { background: var(--surface-2); color: var(--texte-2); } .statut-en_mission { background: var(--primaire-pastel); color: var(--primaire); } .statut-charge { background: var(--surface-2); color: var(--texte-2); } .pastille-rouge { background: var(--rouge-pastel); color: var(--rouge); } /* v12.18.4 : origine de l'apporteur d'affaires sur la fiche d'opération */ .pastille-apporteur-interne { background: var(--primaire-pastel); color: var(--primaire); text-transform: none; } .pastille-apporteur-externe { background: var(--ambre-pastel); color: var(--ambre); text-transform: none; } .pastille-ambre { background: var(--ambre-pastel); color: var(--ambre); } /* v12.14 : statuts des devis (approuvé / ouvert) */ .pastille-verte { background: var(--vert-pastel); color: var(--vert); } .pastille-orange { background: var(--ambre-pastel); color: var(--ambre); } /* v12.14 : bandeau d'information (étape suivante d'un devis approuvé) */ .bandeau-info { background: var(--vert-pastel); border: 1px solid rgba(62,155,98,.25); border-radius: 8px; padding: 10px 14px; } /* Variantes génériques de badges (dashboard, comptabilité, journal, chauffeurs) */ .badge-vert { background: var(--vert-pastel); color: var(--vert); } .badge-rouge { background: var(--rouge-pastel); color: var(--rouge); } .badge-ambre { background: var(--ambre-pastel); color: var(--ambre); } .badge-gris { background: var(--surface-2); color: var(--texte-2); } /* Badges de statut d'opération (mêmes couleurs que les pastilles .statut-*) */ .badge-statut-en_cours { background: var(--bleu-pastel); color: var(--bleu); } .badge-statut-planifiee { background: var(--ambre-pastel); color: var(--ambre); } .badge-statut-terminee { background: var(--vert-pastel); color: var(--vert); } .badge-statut-annulee { background: var(--rouge-pastel); color: var(--rouge); } .badge-statut-litige { background: var(--surface-2); color: var(--texte-2); } /* Alignement des montants à droite + petits utilitaires de mise en page */ .droite { text-align: right; font-variant-numeric: tabular-nums; } .groupe-boutons { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .form-vertical { display: grid; gap: 14px; } /* ---------- 8. Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--rayon-petit); padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; text-decoration: none; } .btn:hover { text-decoration: none; filter: brightness(1.04); } .btn-primaire { background: var(--primaire); color: #fff; } .btn-contour { background: var(--surface); color: var(--texte); border-color: var(--bordure); } .btn-petit { padding: 7px 13px; font-size: 12.5px; } .btn-large { width: 100%; padding: 12px; font-size: 14.5px; } /* ---------- 9. Formulaires ---------- */ .carte-form { max-width: 980px; } fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 16px 18px 6px; margin: 0 0 18px; } legend { font-size: 13px; font-weight: 700; padding: 0 8px; color: var(--primaire); } legend small, label small { font-weight: 500; color: var(--texte-2); } .form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 12px; } @media (max-width: 760px) { .form-grille { grid-template-columns: 1fr; } } .champ { display: flex; flex-direction: column; gap: 6px; } .champ-large { grid-column: 1 / -1; } .champ label { font-size: 12.5px; font-weight: 600; } .champ label b { color: var(--rouge); } input, select, textarea { font-family: inherit; font-size: 14px; color: var(--texte); background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 10px 12px; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(27, 122, 117, .18); } input:disabled { background: var(--surface-2); color: var(--texte-2); } input[type="color"] { padding: 4px; height: 42px; } textarea { resize: vertical; } .champ-case { justify-content: flex-end; } .case { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; } .case input { width: 18px; height: 18px; accent-color: var(--primaire); } .form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 6px; } .form-encadre { border-top: 1px dashed var(--bordure); margin-top: 16px; padding-top: 14px; } .form-encadre h3 { font-size: 13.5px; margin: 0 0 10px; } /* Fiche détail (opération) */ .fiche-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; } .fiche-grille > div { display: flex; flex-direction: column; gap: 2px; } .fiche-pleine { grid-column: 1 / -1; } .fiche-libelle { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--texte-2); font-weight: 600; } /* ---------- 10. Alertes ---------- */ .alerte { border-radius: var(--rayon-petit); padding: 12px 16px; font-size: 13.5px; margin-bottom: 14px; } .alerte-rouge { background: var(--rouge-pastel); color: var(--rouge); border: 1px solid rgba(217,87,87,.3); } .alerte-verte { background: var(--vert-pastel); color: var(--vert); border: 1px solid rgba(62,155,98,.3); } /* ---------- 11. Pages d'authentification ---------- */ .auth-fond { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 80% at 80% 10%, rgba(79,179,172,.25), transparent 60%), linear-gradient(150deg, var(--primaire-fonce), var(--primaire)); padding: 20px; } .carte-auth { width: 100%; max-width: 400px; background: var(--surface); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 34px 32px; text-align: center; } .logo-auth { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--primaire-fonce); } [data-theme="dark"] .logo-auth { color: #fff; } .auth-titre { font-size: 18px; margin: 14px 0 4px; } .auth-sous-titre { color: var(--texte-2); font-size: 13px; margin: 4px 0 18px; } .form-auth { text-align: left; display: flex; flex-direction: column; gap: 14px; margin: 14px 0; } .lien-discret { display: inline-block; margin-top: 12px; font-size: 13px; } .lien-reset { display: block; word-break: break-all; font-size: 12.5px; margin: 10px 0; } .auth-pied { margin-top: 20px; font-size: 11.5px; color: var(--texte-2); } .erreur-titre { font-size: 20px; margin: 14px 0 6px; } .erreur-texte { color: var(--texte-2); font-size: 13.5px; margin-bottom: 18px; } /* ---------- 12. Carte Leaflet ---------- */ .carte-map { padding: 8px; } #carte-flotte { height: calc(100vh - 280px); min-height: 420px; border-radius: 12px; z-index: 1; } .legende-carte { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 12.5px; color: var(--texte-2); } .legende-compteur { font-weight: 700; color: var(--texte); } .legende-gerer { font-weight: 600; } .point { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .point-mission { background: var(--primaire); } .point-dispo { background: var(--vert); } .point-panne { background: var(--rouge); } .legende-trait { color: var(--primaire); font-weight: 600; } .marqueur-vehicule { border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); } [data-theme="dark"] .leaflet-tile { filter: brightness(.65) contrast(1.1) saturate(.7); } [data-theme="dark"] .leaflet-container { background: #0E1B1A; } /* ---------- 13. Pied de page ---------- */ .pied { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 16px 26px; color: var(--texte-2); font-size: 12.5px; border-top: 1px solid var(--bordure); } .pied a { color: var(--primaire); font-weight: 600; } .pied-version { opacity: .8; } /* ---------- 14. Responsive : sidebar en surimpression sur mobile ---------- */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 200; margin-left: -248px; } body.sidebar-ouverte-mobile .sidebar { margin-left: 0; } body.sidebar-fermee .sidebar { margin-left: -248px; } body.sidebar-ouverte-mobile .voile-sidebar { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); } .contenu { padding: 16px 14px; } .topbar { padding: 10px 14px; } .profil-infos { display: none; } } /* ========================================================================== Compléments v2 ========================================================================== */ /* ---------- Anti-débordement mobile : les tableaux défilent DANS leur carte, la page elle-même ne crée jamais d'espace vide à droite ---------- */ .app-corps, .contenu, .carte { min-width: 0; } .grille-kpi > *, .grille-2-1 > *, .grille-1-2 > *, .grille-2col > * { min-width: 0; } .table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; } body { overflow-x: hidden; } /* ---------- Barre d'outils des tableaux (recherche + filtre, dès 5 lignes) */ .table-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; } .table-recherche, .table-filtre { font-family: inherit; font-size: 13px; color: var(--texte); background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 8px 12px; } .table-recherche { flex: 1; min-width: 180px; max-width: 340px; } .table-recherche:focus, .table-filtre:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 18%, transparent); } .table-compteur { font-size: 12px; color: var(--texte-2); margin-left: auto; } /* ---------- Œil de visualisation des mots de passe ---------- */ .champ-mdp { position: relative; display: block; } .champ-mdp input { width: 100%; padding-right: 42px; } .btn-oeil { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--texte-2); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } .btn-oeil:hover { color: var(--primaire); background: var(--surface-2); } .btn-oeil svg { width: 19px; height: 19px; fill: currentColor; } .btn-oeil .oeil-ferme { display: none; } .champ-mdp.mdp-visible .oeil-ouvert { display: none; } .champ-mdp.mdp-visible .oeil-ferme { display: block; } /* ---------- Carte : icône camion + tirets à clignotement doux ---------- */ .marqueur-camion { width: 30px; height: 30px; border-radius: 50% 50% 50% 6px; background: var(--c, var(--primaire)); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; } .marqueur-camion svg { width: 17px; height: 17px; fill: #fff; } @keyframes clignotement-doux { 0%, 100% { stroke-opacity: 0.35; } 50% { stroke-opacity: 0.85; } } /* v5 : les pointillés du trajet AVANCENT vers la destination (effet * "fourmis en marche") au lieu de clignoter — le décalage du motif de * tirets (stroke-dashoffset) recule en continu, ce qui donne visuellement * un mouvement dans le sens départ -> arrivée du tracé. -200 est un * multiple de la longueur du motif (10+10), la boucle est donc parfaite. */ @keyframes trajet-avance { to { stroke-dashoffset: -200; } } .trajet-anim { animation: trajet-avance 6s linear infinite; } @media (prefers-reduced-motion: reduce) { .trajet-anim { animation: none; } } /* ---------- Boutons de suppression + formulaires en ligne ---------- */ .btn-danger { background: var(--rouge); color: #fff; border-color: transparent; } .btn-danger:hover { background: #B23F3F; } .form-inline { display: inline-block; margin: 0; } .cellule-action { white-space: nowrap; text-align: right; } .cellule-action .btn { margin-left: 6px; } /* ---------- Grille de permissions (Paramètres > Permissions) ---------- */ .table-permissions th.mini { font-size: 10.5px; padding: 6px 4px; } .table-permissions td.centre, .table-permissions th.centre { text-align: center; } .table-permissions input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primaire); cursor: pointer; } .table-permissions td { padding: 8px 4px; } .table-permissions tbody th { font-weight: 600; white-space: nowrap; } /* ---------- Mises à jour système (barre de progression) ---------- */ .zone-maj { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; } .champ-fichier { flex: 1; min-width: 220px; font-size: 13px; color: var(--texte); background: var(--fond); border: 1px dashed var(--bordure); border-radius: var(--rayon-petit); padding: 10px 12px; } .progression { margin: 14px 0 6px; } .progression-barre { height: 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--bordure); overflow: hidden; } .progression-barre span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primaire-fonce), var(--primaire)); transition: width 0.4s ease; } .progression-texte { font-size: 13px; color: var(--texte-2); margin-top: 8px; } /* ---------- Facturation ---------- */ .total-facture { font-size: 20px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; } .badge-etat-payee { background: var(--vert-pastel); color: var(--vert); } .badge-etat-partielle { background: var(--bleu-pastel); color: var(--bleu); } .badge-etat-en_attente{ background: var(--ambre-pastel); color: var(--ambre); } .badge-etat-en_retard { background: var(--rouge-pastel); color: var(--rouge); } .badge-etat-brouillon { background: var(--surface-2); color: var(--texte-2); } .badge-etat-annulee { background: var(--surface-2); color: var(--texte-2); text-decoration: line-through; } /* ========================================================================== v3 - Bandeau de période, comptabilité, journal, annonces, chauffeur ========================================================================== */ /* Bandeau de période d'activité (dashboard + comptabilité) */ .bandeau-periode { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; } .form-periode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .form-periode label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--texte-2); } .form-periode input[type="date"] { padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface-2); color: var(--texte); font: inherit; font-size: 0.85rem; } /* Bloc "Accès chauffeur" sur la fiche opération */ .carte-acces-chauffeur { border-left: 4px solid var(--primaire); } .acces-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; } .acces-grille input { cursor: copy; } .boutons-envoi { flex-wrap: wrap; } /* Journal des actions : badges par type d'action */ .badge-action-connexion { background: color-mix(in srgb, #2E9C95 18%, transparent); color: #2E9C95; } .badge-action-deconnexion { background: color-mix(in srgb, #8B8FA3 20%, transparent); color: var(--texte-2); } .badge-action-creation { background: color-mix(in srgb, #3FA46A 18%, transparent); color: #3FA46A; } .badge-action-modification { background: color-mix(in srgb, #D99A2B 20%, transparent); color: #B57F1E; } .badge-action-suppression { background: color-mix(in srgb, #D95757 18%, transparent); color: #D95757; } .badge-action-envoi { background: color-mix(in srgb, #4A7BD9 18%, transparent); color: #4A7BD9; } .badge-action-position { background: color-mix(in srgb, #2E9C95 18%, transparent); color: #2E9C95; } .badge-action-mise_a_jour { background: color-mix(in srgb, #7B5CD6 18%, transparent); color: #7B5CD6; } .cellule-date { white-space: nowrap; font-variant-numeric: tabular-nums; } .cellule-details { max-width: 340px; overflow-wrap: anywhere; font-size: 0.8rem; color: var(--texte-2); } /* Petit déroulant de disponibilité dans le tableau chauffeurs */ .select-statut { padding: 5px 8px; border-radius: 999px; border: 1px solid var(--bordure); background: var(--surface-2); color: var(--texte); font: inherit; font-size: 0.78rem; cursor: pointer; } /* Bouton d'export Excel au-dessus des tableaux */ .table-export { display: flex; justify-content: flex-end; margin: 0 0 8px; } .table-outils + .table-export, .table-export + .table-outils { margin-top: 8px; } /* Lien "Itinéraire" dans les popups de la carte */ .lien-itineraire { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--primaire); } /* -------------------------------------------------------------------------- Zone rouge d'erreur : secousse + (vibration gérée par app.js) -------------------------------------------------------------------------- */ @keyframes secousse-fz { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .secousse { animation: secousse-fz 0.45s ease; } /* -------------------------------------------------------------------------- Popup des annonces du jour (rappels calibrés par l'Admin) -------------------------------------------------------------------------- */ .popup-annonces { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(10, 18, 24, 0.55); backdrop-filter: blur(2px); padding: 20px; } .popup-annonces-boite { background: var(--surface); color: var(--texte); border: 1px solid var(--bordure); border-radius: 16px; padding: 22px 24px; max-width: 460px; width: 100%; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } .popup-annonces-boite h3 { margin: 0 0 12px; font-family: 'Plus Jakarta Sans', sans-serif; } .popup-annonces-boite ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; } .popup-annonces-boite li { border: 1px solid var(--bordure); border-left: 4px solid var(--primaire); border-radius: 10px; padding: 10px 12px; } .popup-annonces-boite li p { margin: 4px 0 0; font-size: 0.85rem; color: var(--texte-2); } .popup-annonce-date { display: inline-block; margin-left: 6px; font-size: 0.78rem; color: var(--primaire); font-weight: 600; } /* -------------------------------------------------------------------------- Interface chauffeur (simulation PWA) : page autonome, adaptée au mobile -------------------------------------------------------------------------- */ .fond-chauffeur { background: var(--fond); min-height: 100vh; } .page-chauffeur { max-width: 720px; margin: 0 auto; padding: 16px 14px 28px; display: grid; gap: 14px; } .entete-chauffeur { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px; padding: 12px 16px; } .entete-chauffeur .logo-auth { font-size: 1.3rem; margin: 0; } .entete-chauffeur-infos { display: grid; line-height: 1.25; } .entete-chauffeur-infos span { font-size: 0.78rem; color: var(--texte-2); } .actions-chauffeur { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .auth-sous-titre { text-align: center; color: var(--texte-2); font-size: 0.85rem; margin: -8px 0 14px; } .btn-large { width: 100%; padding: 12px; font-size: 1rem; } /* ========================================================================== v4 - Nouveaux composants ========================================================================== */ /* ---- Zone d'erreurs de formulaire (liste des problèmes en français) ---- */ .zone-erreurs { border: 1px solid var(--rouge); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; background: color-mix(in srgb, var(--rouge) 8%, transparent); } .zone-erreurs ul { margin: 6px 0 0 18px; } .aide-erreur { margin: 6px 0 0; font-size: 0.8rem; color: var(--rouge); } /* ---- Graphique indisponible (CDN inaccessible) : message au lieu du vide ---- */ .graphique-indispo { color: var(--texte-2); font-size: 0.85rem; padding: 20px; text-align: center; } /* ---- Cloche de notifications ---- */ .notif-cloche { position: relative; } .notif-compteur { position: absolute; top: 2px; right: 2px; background: var(--rouge); color: #fff; font-size: 0.62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .notif-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: 90vw; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.18); z-index: 60; overflow: hidden; } .notif-menu.ouvert { display: block; } /* v12.1 : le corps défile — l'en-tête et le lien "Voir toutes" restent fixes, seule la liste elle-même dépasse en hauteur si besoin. */ .notif-menu-corps { max-height: min(50vh, 420px); overflow-y: auto; } .notif-menu-entete { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--bordure); } .notif-ligne { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--bordure); color: inherit; text-decoration: none; } .notif-ligne:hover { background: color-mix(in srgb, var(--primaire) 6%, transparent); } .notif-non-lue { border-left: 3px solid var(--primaire); background: color-mix(in srgb, var(--primaire) 5%, transparent); } .notif-titre { font-weight: 600; font-size: 0.85rem; } .notif-message { font-size: 0.78rem; color: var(--texte-2); } .notif-quand { font-size: 0.7rem; color: var(--texte-2); } .notif-vide { padding: 16px; font-size: 0.82rem; color: var(--texte-2); text-align: center; } .notif-toutes { display: block; text-align: center; padding: 10px; font-size: 0.8rem; color: var(--primaire); text-decoration: none; font-weight: 600; } .lien-discret { background: none; border: none; color: var(--primaire); font-size: 0.75rem; cursor: pointer; } /* ---- Badges d'alerte numérotés sur les menus (une action à entreprendre) ---- */ .badge-menu { margin-left: auto; background: var(--rouge); color: #fff; font-size: 0.66rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .ligne-non-lue { background: color-mix(in srgb, var(--primaire) 6%, transparent); } /* ---- Rubriques numérotées des paramètres + recherche ---- */ .rubrique { border: 1px solid var(--bordure); border-radius: 12px; padding: 14px 16px 8px; margin-bottom: 16px; } .rubrique-titre { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 0.95rem; padding: 0 8px; } .recherche-params-boite { padding: 12px 16px; } .recherche-params { width: 100%; padding: 11px 14px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond); color: inherit; font-size: 0.9rem; } .apercu-param { max-height: 44px; max-width: 120px; vertical-align: middle; border-radius: 6px; border: 1px solid var(--bordure); background: #fff; padding: 2px; } /* ---- Photos (chauffeur / véhicule / galerie de mission) ---- */ .photo-ronde { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primaire); } .photo-grande { width: 96px; height: 96px; } .photo-vehicule-mini { max-height: 44px; border-radius: 6px; vertical-align: middle; } .galerie-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; } .galerie-item { display: block; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--bordure); text-decoration: none; } .galerie-item img { width: 100%; height: 110px; object-fit: cover; display: block; } .galerie-legende { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.62); color: #fff; font-size: 0.66rem; padding: 3px 6px; } /* ---- Interface chauffeur v4 ---- */ .contexte-chauffeur { border-left: 4px solid var(--primaire); } .form-contexte { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .form-contexte select { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--bordure); background: var(--fond); color: inherit; } .btn-large { width: 100%; padding: 14px; font-size: 1rem; } .sous-op-chauffeur { border: 1px solid var(--bordure); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .sous-op-active { border-color: var(--primaire); background: color-mix(in srgb, var(--primaire) 7%, transparent); } .sous-op-titre { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } .qr-boite { text-align: center; } .qr-image { width: 190px; height: 190px; margin: 8px auto; display: block; background: #fff; padding: 8px; border-radius: 12px; } .verification-identite { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; } .badge-incident { background: var(--rouge); color: #fff; border-radius: 8px; font-size: 0.68rem; padding: 2px 8px; margin-left: 8px; font-weight: 700; } /* ---- Formulaire de position dans les popups de la carte ---- */ .form-position-carte { margin-top: 8px; display: grid; gap: 6px; } .form-position-carte input { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 12px; } .ligne-position { display: flex; gap: 6px; } /* ========================================================================== * v5 - Assistant de rentabilité, alertes clignotantes, suivi des règlements * ========================================================================== */ /* Encadré ROUGE CLIGNOTANT : opération hors target / incident non résolu / * bordereaux manquants sur mission terminée (attire l'oeil sans agresser) */ @keyframes pulsation-rouge { 0%, 100% { border-color: var(--rouge); box-shadow: 0 0 0 0 rgba(217, 72, 58, 0.35); } 50% { border-color: rgba(217, 72, 58, 0.35); box-shadow: 0 0 0 6px rgba(217, 72, 58, 0); } } .cadre-alerte-clignotant { border: 2px solid var(--rouge) !important; animation: pulsation-rouge 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cadre-alerte-clignotant { animation: none; } } /* Carte de l'assistant de rentabilité (verdict coloré, sobre) */ .analyse-operation { border-left: 6px solid var(--bordure); } .analyse-bon { border-left-color: #3E9B62; background: var(--vert-pastel); } .analyse-moyen { border-left-color: var(--ambre); background: var(--ambre-pastel); } .analyse-mauvais { border-left-color: var(--rouge); background: var(--rouge-pastel, rgba(217,72,58,.08)); } .analyse-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; } .analyse-icone { font-size: 19px; } .analyse-resume { margin: 8px 0 6px; font-size: 13.5px; line-height: 1.5; } .analyse-details summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--primaire); } .analyse-points { list-style: none; padding: 8px 0 0; margin: 0; } .analyse-points li { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; line-height: 1.45; } .analyse-points li span { flex: 0 0 auto; font-weight: 800; } .point-ok span { color: #3E9B62; } .point-ko span { color: var(--rouge); } .point-info span { color: #4A7FB5; } .badge-retard { background: var(--rouge); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 2px 10px; } /* Contact client affiché automatiquement dans le formulaire opération */ .info-contact-client { margin: 6px 0 0; font-size: 12.5px; background: var(--primaire-pastel); border-radius: 8px; padding: 6px 10px; } /* Suivi des règlements (comptabilité) */ .ligne-priorite td { background: var(--ambre-pastel); } .ligne-alerte-rouge td { background: rgba(217, 72, 58, 0.08); } /* v12.3 : symétrique du rouge — service terminé ET réglé, l'affaire est close */ .ligne-terminee td { background: rgba(62, 155, 98, 0.08); } .texte-rouge { color: var(--rouge); font-weight: 700; } .texte-vert { color: #3E9B62; font-weight: 700; } .details-archives { margin-top: 10px; font-size: 13px; } .details-archives summary { cursor: pointer; color: var(--texte-2); font-weight: 600; } .details-archives ul { margin: 8px 0 0 18px; } .note-prerequis { font-size: 12.5px; color: var(--texte-2); background: var(--ambre-pastel); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; } .note-donut { font-size: 11.5px; color: var(--texte-2); text-align: center; margin: 6px 0 0; } .form-charge-rapide { margin-bottom: 14px; } /* ========================================================================== * v6 - Modal de confirmation centré, pagination, bouton retour, vignettes * ========================================================================== */ /* Beau popup de confirmation : voile sombre + boîte CENTRÉE à l'écran */ .modal-voile { position: fixed; inset: 0; background: rgba(15, 25, 24, 0.55); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 18px; backdrop-filter: blur(2px); } .modal-boite { background: var(--surface); color: var(--texte); border-radius: 16px; padding: 22px 24px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.35); animation: modal-apparition .18s ease-out; } @keyframes modal-apparition { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-icone { font-size: 34px; margin-bottom: 6px; } .modal-message { font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; } .modal-boutons { display: flex; gap: 10px; justify-content: center; } /* Pagination des tableaux : ‹ page X / Y › */ .table-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; } .table-page-info { font-size: 12.5px; font-weight: 700; color: var(--texte-2); } .table-taille { max-width: 130px; } /* Bouton retour (flèche) vers l'interface précédente */ .btn-retour { background: none; border: 1px solid var(--bordure); color: var(--texte-2); border-radius: 20px; padding: 5px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-bottom: 12px; } .btn-retour:hover { color: var(--primaire); border-color: var(--primaire); } /* Vignettes photos (attelages...) dans les tableaux */ .vignette { width: 52px; height: 38px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bordure); display: block; } /* Popup d'annonces : centrage GARANTI + bouton son */ .popup-annonces { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1900; background: rgba(15, 25, 24, 0.5); } .popup-annonces[hidden] { display: none; } .popup-son { margin-top: 10px; background: none; border: 1px solid var(--bordure); border-radius: 20px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--texte-2); display: inline-block; } .popup-son:hover { color: var(--primaire); border-color: var(--primaire); } /* v7 : indicateur de délais de l'interface chauffeur */ .bandeau-delai { border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-weight: 700; font-size: 14px; } .delai-vert { background: var(--vert-pastel); border: 2px solid #3E9B62; } .delai-orange { background: var(--ambre-pastel); border: 2px solid var(--ambre); } .delai-rouge { background: rgba(217, 72, 58, 0.1); border: 2px solid var(--rouge); animation: pulsation-rouge 1.2s ease-in-out infinite; } /* ========================================================================== * v7 - Renforts RESPONSIVE (mobile) : formulaires en 1 colonne, KPI * empilés, boutons pleine largeur, tableaux à défilement conservé. * ========================================================================== */ @media (max-width: 700px) { .form-grille { grid-template-columns: 1fr !important; } .grille-kpi { grid-template-columns: 1fr 1fr !important; } .grille-2col { grid-template-columns: 1fr !important; } .fiche-grille { grid-template-columns: 1fr !important; } .carte-entete { flex-wrap: wrap; gap: 8px; } .groupe-boutons { flex-wrap: wrap; } .form-periode { flex-wrap: wrap; gap: 6px; } .modal-boutons { flex-direction: column; } .modal-boutons .btn { width: 100%; } .table-pagination { flex-wrap: wrap; } .kpi-valeur { font-size: clamp(14px, 5vw, 20px); } } @media (max-width: 480px) { .grille-kpi { grid-template-columns: 1fr !important; } .contenu { padding: 10px !important; } } /* v8 : paramètres cliquables */ .cases-roles { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 6px 0; } .case-role { font-size: 12.5px; display: flex; align-items: center; gap: 5px; } .ligne-api-cle { display: flex; gap: 8px; align-items: center; } .ligne-api-cle input { flex: 1; } .avatar-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primaire); } /* v9 : interface chauffeur — ergonomie mobile légère */ .qr-mini { width: 74px; height: 74px; border-radius: 8px; border: 2px solid var(--primaire); margin-left: auto; background: #fff; padding: 2px; } .btn-clignote { animation: clignote-action 1.15s ease-in-out infinite; } @keyframes clignote-action { 0%,100% { box-shadow: 0 0 0 0 rgba(27,122,117,.55); } 50% { box-shadow: 0 0 0 9px rgba(27,122,117,0); } } .badge-statut-anim { animation: clignote-action 1.6s ease-in-out infinite; } .btn-position-mini { animation: clignote-action 1.6s ease-in-out infinite; font-size: 17px; padding: 6px 12px; border-radius: 50%; } .popup-incident summary { list-style: none; cursor: pointer; display: inline-block; } .popup-incident[open] { position: fixed; inset: 0; background: rgba(10,18,24,.6); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 14px; } .popup-incident[open] summary { position: absolute; top: 14px; right: 16px; } .popup-incident[open] summary::after { content: ' ✕ Fermer'; } .popup-incident[open] > form { background: var(--surface); border-radius: 14px; padding: 16px; max-width: 460px; width: 100%; max-height: 86vh; overflow: auto; } /* Tableaux chauffeur : coulissants et dépliables au doigt */ @media (max-width: 700px) { .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table { min-width: 560px; } } /* v9.1 : chauffeur mobile */ .entete-position { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .coin-position { display: flex; flex-direction: column; align-items: center; gap: 2px; } .pos-coords { font-size: 11px; color: var(--texte-2); white-space: nowrap; } .table-pliante summary { list-style: none; cursor: pointer; } .table-glisse { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; } .table-glisse table { min-width: 560px; } .popup-annonces-boite { max-height: 82vh; display: flex; flex-direction: column; } .popup-annonces-boite ul { overflow-y: auto; flex: 1; min-height: 0; } /* v9.2 (Cactis) : bouton Actualiser vert + footer chauffeur */ .btn-actualiser { background: #3E9B62; color: #fff; border: none; border-radius: 10px; padding: 9px 20px; font-weight: 800; cursor: pointer; } .pied-chauffeur { text-align: center; font-size: 11.5px; color: var(--texte-2); padding: 14px 0 20px; } /* v10 (© Cactis) : brief matinal + camions non productifs */ .carte-brief { border-left: 4px solid var(--primaire); } .carte-inactifs { border-left: 4px solid var(--ambre); } .brief-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .brief-liste li { font-size: 13.5px; line-height: 1.5; } /* v11 (© Cactis) : PWA chauffeur — bandeau d'état du réseau */ .bandeau-reseau { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500; text-align: center; font-size: 12.5px; font-weight: 700; padding: 9px 14px; background: #3E9B62; color: #fff; } .bandeau-reseau.reseau-coupe { background: var(--ambre); color: #2b2b2b; animation: clignote-action 1.6s ease-in-out infinite; } /* v11.4 : test d'envoi SMS (Paramètres) */ .test-sms { border-top: 1px dashed var(--bordure); margin-top: 10px; padding-top: 10px; } .test-sms-ligne { display: flex; gap: 8px; flex-wrap: wrap; } .test-sms-ligne input { flex: 1; min-width: 160px; } .alerte-ambre { background: #FFF4DE; color: #7A5200; } /* ========================================================================== v12 (© Cactis) — CORRECTIF GLOBAL DE L'ATTRIBUT hidden -------------------------------------------------------------------------- Le bug « champs apporteur externe toujours visibles » venait d'ici : la classe .champ { display:flex } est PLUS FORTE que l'attribut hidden du navigateur (display:none). Résultat : hidden ne cachait plus rien. Cette règle rend hidden ABSOLU, partout, pour toujours. ========================================================================== */ [hidden] { display: none !important; } /* ========================================================================== v12 — POPUP DES ANNONCES : anti-blocage - La boîte entière défile si le contenu est long : le bouton « C'est noté » reste TOUJOURS atteignable, même sur petit écran. - Croix de fermeture ✖ en haut à droite (2e porte de sortie). ========================================================================== */ .popup-annonces-boite { overflow-y: auto; position: relative; } .popup-annonces-fermer { position: absolute; top: 8px; right: 10px; background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--texte-2); padding: 4px 6px; } .popup-annonces-fermer:hover { color: var(--rouge); } /* ========================================================================== v12 — PARKINGS / GARAGES DE L'ENTREPRISE SUR LA CARTE Marqueur 🅿️ + étiquette du nom TOUJOURS visible (pas besoin de cliquer) : le propriétaire compare d'un coup d'œil la position d'un camion avec l'endroit où il devrait être. ========================================================================== */ .marqueur-parking { width: 28px; height: 28px; border-radius: 8px; background: #2455A4; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .etiquette-parking { background: #2455A4; color: #fff; border: none; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .etiquette-parking::before { border-top-color: #2455A4; } /* Point bleu carré de la légende (distinct des points ronds des statuts) */ .legende-carte .point-parking { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #2455A4; margin-right: 4px; vertical-align: baseline; } /* ========================================================================== v12.2 (© Cactis) — KILOMÉTRAGE OBLIGATOIRE (départ / arrivée, chauffeur) Coloré + CLIGNOTANT tant que le champ est vide, via :placeholder-shown — CSS pur, aucun JavaScript : dès que le chauffeur tape un chiffre, le placeholder disparaît et l'animation s'arrête d'elle-même. Fonctionne même hors connexion (aucune dépendance à un script). ========================================================================== */ .champ-km-obligatoire { margin: 10px 0; } .champ-km-obligatoire label { display: block; font-weight: 700; margin-bottom: 6px; } .champ-km-obligatoire input { width: 100%; padding: 12px 14px; font-size: 16px; font-weight: 700; border-radius: var(--rayon-petit); border: 2px solid var(--bordure); } .champ-km-obligatoire input:placeholder-shown { border-color: var(--rouge); background: var(--rouge-pastel); color: var(--rouge); animation: clignote-km 1.3s ease-in-out infinite; } .champ-km-obligatoire input:not(:placeholder-shown) { border-color: var(--vert); background: var(--vert-pastel); color: var(--texte); } @keyframes clignote-km { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,87,87,.45); } 50% { box-shadow: 0 0 0 8px rgba(217,87,87,0); } } /* ========================================================================== ÉDITION TELEINFRA (v12.18) — styles des logos de marque paramétrables (Paramètres > 0. Identité visuelle). Les anciens styles .splash-mark / .marque-icone / .logo-auth sont CONSERVÉS : ils servent de repli si l'Admin efface les chemins de logo. ========================================================================== */ /* Logo blanc sur le splash screen (fond teal profond). v12.18.3 : nettement agrandi — à petite taille, la ligne « CAMEROON » du logo horizontal devenait illisible (retour Teleinfra). */ .splash-logo-img { max-height: 160px; max-width: min(540px, 86vw); height: auto; animation: splash-pop .7s ease; } .splash-slogan { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; letter-spacing: .4px; text-align: center; padding: 0 18px; } /* Logo blanc dans la barre latérale (fond teal profond). v12.18.3 : le logo occupe la largeur disponible (~200 px) au lieu d'être bridé à 46 px de haut — le nom et « CAMEROON » restent lisibles. width + height:auto = proportions strictement conservées. */ .marque-logo-img { width: 100%; max-width: 200px; height: auto; display: block; } /* Logo couleur sur les cartes claires (connexion, erreur, accès chauffeur). v12.18.3 : agrandi pour une vraie présence de marque à l'ouverture. */ .logo-auth-img { max-height: 118px; max-width: min(380px, 86vw); height: auto; display: block; margin: 0 auto 6px; } /* Cas particulier : entête compacte de la fiche mission chauffeur — on garde une taille d'entête, pas une taille d'affiche */ .entete-chauffeur .logo-auth-img { max-height: 54px; margin: 0; } /* Aperçu des logos dans Paramètres : fond quadrillé neutre pour juger les deux versions (le blanc serait invisible sur fond blanc) */ .apercu-param-sombre { background: var(--primaire-fonce); border-radius: 8px; padding: 6px 10px; }