/* ========================================================================== VéhiCom — Feuille de style commune (refonte 2026-07) Design « immersif bleu ». S'applique par-dessus Bootstrap 5.3. Chargée après Bootstrap dans le de chaque page. ========================================================================== */ :root { --blue-900:#00274d; --blue-800:#003a75; --blue-700:#004b9a; --blue-600:#0062c4; --blue-500:#1a7ee0; --blue-400:#4da0ef; --blue-100:#dbeafe; --blue-50:#eef5fc; --ground:#eaf1f9; --card:#ffffff; --ink:#0c2138; --muted:#5a7189; --faint:#8ba0b8; --line:#d7e3f0; --ok:#1f9d55; --warn:#d68000; --bad:#d92d20; --radius:16px; --radius-sm:11px; --shadow:0 4px 20px rgba(0,60,130,.09); --shadow-lg:0 22px 55px rgba(0,32,72,.30); } body { background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased; } .tnum { font-variant-numeric: tabular-nums; } /* ============ Barre d'application (navbar restylée) ============ */ .qrga-navbar { background: linear-gradient(120deg, var(--blue-700), var(--blue-900)) !important; color: #fff; padding: 0.6rem 1.1rem; box-shadow: 0 2px 14px rgba(0,40,90,.18); } .qrga-navbar .navbar-brand { font-weight: 700; letter-spacing: .3px; } .qrga-navbar .navbar-logo { height: 34px; max-width: 40px; margin-right: .5rem; object-fit: contain; background:#fff; border-radius:8px; padding:3px; } .qrga-navbar .btn-outline-light { border-color: rgba(255,255,255,.4); border-radius: 9px; font-weight: 600; } .qrga-navbar .btn-outline-light:hover { background:#fff; color: var(--blue-700); } /* ============ Conteneur principal ============ */ .container-main { margin: 1.6rem auto; } /* Tableau de bord conducteur : wrapper transparent (les blocs sont des cartes) */ .vc-app .container-main { max-width: 940px; padding: 0 1rem; background: transparent; box-shadow: none; border-radius: 0; } /* Administration : grande carte blanche (tableaux denses) */ .vc-admin .container-main { max-width: 1200px; padding: 1.8rem; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); } /* ============ Boutons ============ */ .btn-qrga, .btn-primary { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); border: none; color: #fff; font-weight: 650; border-radius: var(--radius-sm); box-shadow: 0 6px 16px rgba(0,75,154,.24); } .btn-qrga:hover, .btn-primary:hover { background: linear-gradient(135deg, var(--blue-500), var(--blue-800)); color: #fff; transform: translateY(-1px); } .btn-outline-primary { color: var(--blue-700); border: 1.5px solid var(--blue-400); border-radius: var(--radius-sm); font-weight: 600; } .btn-outline-primary:hover { background: var(--blue-600); border-color: var(--blue-600); } .btn { border-radius: var(--radius-sm); } /* ============ Formulaires ============ */ .form-control, .form-select { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; } .form-control:focus, .form-select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(26,126,224,.15); } .form-label { font-weight: 600; color: var(--muted); font-size: .85rem; } .input-group-text { background: var(--blue-50); border-color: var(--line); } /* ============ Cartes / alertes / modales ============ */ .card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .alert { border-radius: var(--radius-sm); border: none; } .modal-content { border: none; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .modal-header { background: linear-gradient(120deg, var(--blue-700), var(--blue-900)); color: #fff; border: none; padding: 1rem 1.2rem; } .modal-header .btn-close { filter: brightness(0) invert(1); } .modal-title { font-weight: 700; } .modal-body { padding: 1.2rem; } /* ============ Panneaux (listes trajets / messagerie) ============ */ .vc-section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; margin: .3rem .2rem .8rem; } .vc-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .vc-panel-head { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--line); } .vc-panel-head h4 { font-size: .92rem; margin: 0; font-weight: 700; } /* ============ Bandeau « trajet en cours » ============ */ .vc-trip-live { display:flex; align-items:center; gap:.9rem; background: linear-gradient(120deg,#e8f2fd,#f3f8fe); border: 1.5px solid var(--blue-100); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.4rem; } .vc-pulse { width:11px; height:11px; border-radius:50%; background: var(--blue-500); box-shadow: 0 0 0 0 rgba(26,126,224,.5); animation: vc-pulse 2s infinite; flex:none; } @keyframes vc-pulse { 70%{box-shadow:0 0 0 10px rgba(26,126,224,0);} 100%{box-shadow:0 0 0 0 rgba(26,126,224,0);} } @media (prefers-reduced-motion:reduce){ .vc-pulse{animation:none;} } /* ============ Tuiles d'action (Départ / Arrivée / Carburant / Entretien) ============ */ .vc-tiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:1.2rem; } .vc-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1rem; cursor:pointer; transition:.16s; box-shadow: var(--shadow); color: var(--ink); width:100%; min-height: 128px; } .vc-tile:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--blue-400); box-shadow: 0 14px 30px rgba(0,60,130,.14); } .vc-tile:disabled { opacity:.5; cursor:not-allowed; } .vc-tile .vc-ic { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom: .8rem; background: linear-gradient(135deg, var(--blue-50), #dcebfb); color: var(--blue-700); font-size: 1.5rem; } .vc-tile .vc-tt { font-size:1.05rem; font-weight:700; line-height:1.2; } .vc-tile .vc-ts { margin-top:.25rem; color: var(--muted); font-size:.8rem; } /* ============ Cartes d'accès rapide (infos utiles / mode d'emploi) ============ */ .vc-help-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:1.4rem; } .vc-help-card { display:flex; align-items:center; gap:.85rem; text-align:left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; cursor:pointer; transition:.16s; box-shadow: var(--shadow); color: var(--ink); } .vc-help-card:hover { transform: translateY(-2px); border-color: var(--blue-400); box-shadow: 0 12px 26px rgba(0,60,130,.13); } .vc-help-card .vc-hic { width:44px; height:44px; border-radius:12px; flex:none; font-size:1.3rem; background: linear-gradient(135deg, var(--blue-50), #dcebfb); color: var(--blue-700); display:flex; align-items:center; justify-content:center; } .vc-help-card .vc-htext { display:flex; flex-direction:column; } .vc-help-card .vc-ht { font-size:.95rem; font-weight:700; } .vc-help-card .vc-hs { margin-top:.15rem; color: var(--muted); font-size:.78rem; } .vc-help-card .vc-arrow { margin-left:auto; color: var(--faint); font-size:1.1rem; } @media (max-width: 575px){ .vc-tiles { gap:11px; } .vc-help-row { grid-template-columns:1fr; } } /* ============ Mode CONNEXION (immersif plein écran, logged-out) ============ */ body.vc-login { min-height: 100vh; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 16px; background: radial-gradient(120% 120% at 20% 0%, var(--blue-500) 0%, var(--blue-700) 42%, var(--blue-900) 100%); } body.vc-login .qrga-navbar { display: none; } body.vc-login .container-main { position: relative; width: 100%; max-width: 384px; margin: 0; padding: 2rem 1.9rem; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-lg); } body.vc-login .container-main h3 { text-align:center; font-weight:700; font-size:1.4rem; margin-bottom:1.3rem; } body.vc-login .btn-link { display:block; text-align:center; color: var(--blue-600); font-weight:600; } /* Logo de marque en haut de la carte de connexion */ .vc-brand-mark { width:58px; height:58px; margin:0 auto 1rem; border-radius:16px; background: linear-gradient(135deg, var(--blue-500), var(--blue-800)); display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(0,75,154,.35); } .vc-brand-sub { text-align:center; color: var(--muted); font-size:.85rem; margin:.15rem 0 1.4rem; } /* Bandeau PWA sous la carte de connexion */ .vc-login-pwa { width:100%; max-width:384px; margin-top:15px; display:flex; align-items:center; gap:.85rem; padding:.8rem .95rem; border-radius:15px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); color:#fff; } .vc-login-pwa .vc-pic { width:38px; height:38px; border-radius:10px; flex:none; font-size:1.2rem; background: rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; } .vc-login-pwa .vc-pt { font-weight:650; font-size:.85rem; } .vc-login-pwa .vc-ps { font-size:.75rem; opacity:.85; } .vc-login-pwa .btn { margin-left:auto; background:#fff; color: var(--blue-700); font-weight:700; font-size:.78rem; padding:.5rem .85rem; border:none; white-space:nowrap; } /* ============ Contenu riche (infos utiles / manuel) ============ */ .useful-info-content h3, .useful-info-content h4, .useful-info-content h5, .user-manual-content h3, .user-manual-content h4, .user-manual-content h5, .useful-info-content strong { color: var(--blue-700); } /* ============ Statistiques admin ============ */ .vc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:1.4rem; } .vc-stat { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding:1rem 1.1rem; box-shadow: var(--shadow); } .vc-stat .vc-n { font-size:1.7rem; font-weight:750; letter-spacing:-.5px; color: var(--blue-700); } .vc-stat .vc-l { color: var(--muted); font-size:.8rem; font-weight:600; margin-top:.1rem; } @media (max-width: 767px){ .vc-stats { grid-template-columns:1fr 1fr; } } /* ============ Pastilles de statut ============ */ .vc-pill { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; } .vc-pill.ok { background:#e6f6ee; color: var(--ok); } .vc-pill.warn { background:#fdf1e0; color: var(--warn); } .vc-pill.bad { background:#fdeceb; color: var(--bad); } .vc-pill.blue { background: var(--blue-50); color: var(--blue-700); } /* ============ Onglets admin ============ */ .nav-tabs { border-bottom: 2px solid var(--line); gap: 2px; } .nav-tabs .nav-link { color: var(--muted); font-weight: 600; border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: .6rem .9rem; } .nav-tabs .nav-link:hover { color: var(--blue-600); border-bottom-color: var(--blue-100); } .nav-tabs .nav-link.active { color: var(--blue-700); background: transparent; border-bottom-color: var(--blue-600); font-weight: 700; } /* ============ Tableaux admin ============ */ .table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color: var(--muted); font-weight:700; background:#f6f9fc; } .table thead { background:#f6f9fc; }