/* ═══════════════════════════════════════════════════════════════════════════ CHANTIER LA TRAVERSÉE — Styles de la pollution graduée + badge crucial (2026-04-24, Jour 2 étapes 2c + 2d) Principe : les 3 éléments DOM (bandeau, overlay, modal) sont toujours présents mais invisibles par défaut. Le CSS les active selon le niveau de pollution global, via l'attribut data-pollution-level="X" sur . ═══════════════════════════════════════════════════════════════════════════ */ /* ── Badge crucial dans la liste Eisenhower (niveau 1+) ─────────────────── */ .trv-crucial-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 14px; line-height: 1; flex-shrink: 0; filter: saturate(1.2); margin-right: 2px; } /* Ligne Eisenhower marquée crucial : bordure gauche rouge discrète */ .eisen-item-crucial { border-left: 3px solid var(--bs-danger, #dc3545) !important; padding-left: 8px !important; background: rgba(220, 53, 69, 0.03); } /* ── Niveau 2 : bandeau sticky en haut de toutes les vues ────────────────── */ .trv-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; display: none; /* caché par défaut */ align-items: center; padding: 10px 18px; background: linear-gradient(90deg, #dc3545, #b02a37); color: #fff; font-weight: 500; font-size: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); animation: trvBannerSlideIn 0.35s ease-out; } body[data-pollution-level="2"] .trv-banner, body[data-pollution-level="3"] .trv-banner, body[data-pollution-level="4"] .trv-banner { display: flex; } /* Si le bandeau est visible, décale le contenu principal pour qu'il ne soit pas masqué (en supposant que l'app utilise un conteneur .main-content). */ body[data-pollution-level="2"], body[data-pollution-level="3"], body[data-pollution-level="4"] { padding-top: 42px; } .trv-banner-text { flex: 1; } .trv-banner-action { flex-shrink: 0; } @keyframes trvBannerSlideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Niveau 3 : overlay semi-transparent persistant ──────────────────────── */ .trv-overlay { position: fixed; inset: 0; z-index: 1055; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: trvOverlayFadeIn 0.5s ease-out; } body[data-pollution-level="3"] .trv-overlay { display: flex; pointer-events: auto; } /* Au niveau 4, c'est le modal bloquant qui prend le relais → on cache l'overlay */ .trv-overlay-card { max-width: 480px; background: #fff; border-radius: 16px; padding: 30px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .trv-overlay-icon { font-size: 48px; line-height: 1; margin-bottom: 12px; } .trv-overlay-title { font-size: 20px; font-weight: 700; color: #212529; margin-bottom: 6px; } .trv-overlay-subtitle { font-size: 14px; color: #5d6778; margin-bottom: 4px; } @keyframes trvOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Niveau 4 : modal bloquant plein écran ────────────────────────────────── */ .trv-block-modal { position: fixed; inset: 0; z-index: 1065; display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(139, 0, 0, 0.92), rgba(40, 0, 0, 0.95)); color: #fff; animation: trvBlockFadeIn 0.6s ease-out; } body[data-pollution-level="4"] .trv-block-modal { display: flex; } .trv-block-card { max-width: 540px; padding: 40px 36px; text-align: center; } .trv-block-icon { font-size: 64px; line-height: 1; margin-bottom: 20px; animation: trvPulse 2s ease-in-out infinite; } .trv-block-title { font-size: 28px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.3px; } .trv-block-subtitle { font-size: 15px; opacity: 0.92; margin-bottom: 24px; line-height: 1.55; } @keyframes trvBlockFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes trvPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ═══════════════════════════════════════════════════════════════════════════ Modale de capture-preuve (trv-proof.js, étape 2e) Plein écran, fond sombre, focus exclusif sur la capture. ═══════════════════════════════════════════════════════════════════════════ */ .trv-proof-modal { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; background: rgba(15, 20, 30, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .trv-proof-modal.show { display: flex; animation: trvProofFadeIn 0.3s ease-out; } body.trv-proof-open { overflow: hidden; } @keyframes trvProofFadeIn { from { opacity: 0; } to { opacity: 1; } } .trv-proof-card { position: relative; width: 100%; max-width: 640px; max-height: 95vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: 28px 24px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5); } .trv-proof-close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: #6c757d; cursor: pointer; } .trv-proof-close:hover { color: #000; } .trv-proof-header { margin-bottom: 16px; } .trv-proof-title { font-size: 20px; font-weight: 700; color: #212529; margin-bottom: 4px; } .trv-proof-consigne { font-size: 14px; color: #5d6778; font-style: italic; } .trv-proof-challenge { display: flex; flex-direction: column; align-items: center; background: #fff8e1; border: 2px dashed #f59e0b; border-radius: 12px; padding: 16px; margin-bottom: 18px; } .trv-proof-challenge-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #92400e; margin-bottom: 6px; font-weight: 600; } .trv-proof-challenge-code { font-size: 44px; font-weight: 700; color: #b45309; letter-spacing: 10px; font-family: ui-monospace, 'Courier New', monospace; } .trv-proof-stage { display: block; } .trv-proof-stage.d-none { display: none !important; } .trv-proof-hint { text-align: center; color: #5d6778; margin-bottom: 14px; } .trv-proof-video, .trv-proof-snapshot { width: 100%; max-height: 360px; border-radius: 10px; background: #000; display: block; object-fit: contain; } .trv-proof-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: center; flex-wrap: wrap; } .btn-capture { width: 64px; height: 64px; border-radius: 50%; font-size: 28px; padding: 0; display: flex; align-items: center; justify-content: center; } .trv-proof-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 0; } .trv-proof-loading-text { color: #5d6778; font-size: 14px; } .trv-proof-success, .trv-proof-fail { text-align: center; padding: 20px 0; } .trv-proof-success-icon { font-size: 56px; color: #16a34a; margin-bottom: 10px; font-weight: 700; } .trv-proof-fail-icon { font-size: 56px; color: #dc2626; margin-bottom: 10px; font-weight: 700; } .trv-proof-success h3 { color: #15803d; } .trv-proof-fail h3 { color: #b91c1c; } .trv-proof-justif { background: #f8f9fa; border-radius: 8px; padding: 12px; margin: 14px 0; font-size: 14px; color: #2c3e50; font-style: italic; } /* Bouton "Je l'ai fait avec preuve" sur les tâches crucials Eisenhower */ .eisen-proof-btn { background: #fff; border: 1px solid #dc3545; color: #dc3545; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px; cursor: pointer; flex-shrink: 0; transition: all 0.15s; } .eisen-proof-btn:hover { background: #dc3545; color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ Modale d'onboarding bibliothèque de gages (traversee-gages.js, étape 4a) ═══════════════════════════════════════════════════════════════════════════ */ .trv-gages-modal { position: fixed; inset: 0; z-index: 1075; display: none; align-items: center; justify-content: center; background: rgba(15, 20, 30, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .trv-gages-modal.show { display: flex; animation: trvProofFadeIn 0.3s ease-out; } body.trv-gages-open { overflow: hidden; } .trv-gages-card { position: relative; width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5); overflow: hidden; } .trv-gages-close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: #6c757d; cursor: pointer; z-index: 1; } .trv-gages-header { padding: 24px 24px 12px; text-align: center; border-bottom: 1px solid #f0f2f5; } .trv-gages-icon { font-size: 40px; line-height: 1; margin-bottom: 6px; } .trv-gages-title { font-size: 20px; font-weight: 700; color: #212529; margin: 0 0 6px; } .trv-gages-subtitle { font-size: 13px; color: #5d6778; margin: 0; line-height: 1.5; } .trv-gages-body { padding: 16px 24px; overflow-y: auto; flex: 1; } .trv-gages-family { margin-bottom: 18px; } .trv-gages-family-title { font-size: 14px; font-weight: 700; color: #2c3e50; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 2px solid #e9ecef; } .trv-gages-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 16px; } .trv-gages-item { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 14px; color: #2c3e50; cursor: pointer; border-radius: 6px; } .trv-gages-item:hover { background: #f8f9fa; } .trv-gages-cb { flex-shrink: 0; cursor: pointer; } .trv-gages-label { flex: 1; } .trv-gages-footer { padding: 14px 24px; border-top: 1px solid #f0f2f5; display: flex; align-items: center; gap: 10px; justify-content: flex-end; background: #fafbfc; } .trv-gages-count { flex: 1; font-size: 13px; color: #5d6778; font-weight: 600; } @media (max-width: 576px) { .trv-gages-card { max-width: 100%; max-height: 100vh; border-radius: 0; } .trv-gages-list { grid-template-columns: 1fr; } .trv-gages-footer { flex-wrap: wrap; } } /* ── Panel Settings "Mes gages" ───────────────────────────────────── */ .trv-gages-panel-list { display: flex; flex-direction: column; gap: 16px; } .trv-gages-panel-family { border-bottom: 1px solid #f0f2f5; padding-bottom: 12px; } .trv-gages-panel-family:last-child { border-bottom: 0; padding-bottom: 0; } .trv-gages-panel-family-title { font-size: 14px; font-weight: 700; color: #2c3e50; margin: 0 0 8px; } .trv-gages-panel-items { display: grid; grid-template-columns: 1fr; gap: 4px; } .trv-gages-panel-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 6px; font-size: 14px; } .trv-gages-panel-item:hover { background: #f8f9fa; } .trv-gages-panel-label { color: #2c3e50; } .trv-gages-panel-proof { font-family: ui-monospace, 'Courier New', monospace; font-size: 11px; color: #5d6778; background: #f0f2f5; padding: 2px 6px; border-radius: 4px; } .trv-gages-panel-delete { padding: 2px 8px; font-size: 12px; } /* ── Responsive mobile ─────────────────────────────────────────────────── */ @media (max-width: 576px) { .trv-banner { flex-direction: column; align-items: stretch; padding: 10px 12px; gap: 8px; } .trv-banner-action { align-self: center; } body[data-pollution-level="2"], body[data-pollution-level="3"], body[data-pollution-level="4"] { padding-top: 80px; /* bandeau plus haut en mobile */ } .trv-overlay-card, .trv-block-card { margin: 20px; padding: 24px 20px; } .trv-block-title { font-size: 22px; } }