.trafic-page{background:#f0f2f5;min-height:100vh}.trafic-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:#fff;flex-wrap:wrap;gap:10px}.trafic-header__left{display:flex;align-items:center;gap:12px}.trafic-header__icon{font-size:28px}.trafic-header__title{font-size:22px;font-weight:700;margin:0;letter-spacing:-.3px;color:#fff}.trafic-header__badge{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:#374151;color:#9ca3af;transition:all .3s}.trafic-header__badge.status-fluide{background:#065f46;color:#6ee7b7}.trafic-header__badge.status-dense{background:#78350f;color:#fcd34d}.trafic-header__badge.status-sature{background:#7f1d1d;color:#fca5a5}.trafic-header__right{display:flex;align-items:center;gap:16px}.trafic-header__clock{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:#e5e7eb}.trafic-header__update{font-size:11px;color:#9ca3af}.trafic-body{display:flex;height:calc(100vh - 80px);min-height:500px;position:relative}.trafic-map-container{flex:1;position:relative}#trafic-map{width:100%;height:100%;z-index:1}.trafic-legend{position:absolute;bottom:30px;left:16px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:10px;padding:14px 18px;z-index:1000;box-shadow:0 4px 16px rgba(0,0,0,.15);font-size:12px;min-width:140px}.trafic-legend__title{font-weight:700;font-size:12px;text-transform:uppercase;color:#374151;margin-bottom:10px;letter-spacing:.5px}.trafic-legend__item{display:flex;align-items:center;gap:8px;padding:3px 0;color:#4b5563}.trafic-legend__color{width:24px;height:5px;border-radius:3px;display:inline-block}.trafic-legend__marker{font-size:14px;width:24px;text-align:center}.trafic-legend__sep{height:1px;background:#e5e7eb;margin:8px 0}.trafic-map-controls{position:absolute;top:16px;left:16px;z-index:1000;display:flex;flex-direction:column;gap:6px}.trafic-ctrl-btn{width:38px;height:38px;border:none;border-radius:8px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;transition:all .2s}.trafic-ctrl-btn:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);color:#0073aa}.trafic-ctrl-btn[data-active="false"]{background:rgba(200,200,200,.7);color:#9ca3af}.trafic-panel{width:380px;background:#fff;border-left:1px solid #e5e7eb;overflow-y:auto;overflow-x:hidden;position:relative;transition:width .3s ease,min-width .3s ease;min-width:380px;scrollbar-width:thin;scrollbar-color:#d1d5db transparent}.trafic-panel.collapsed{width:0;min-width:0;border-left:none;overflow:hidden}.trafic-panel__toggle{position:absolute;top:16px;left:-16px;width:32px;height:32px;background:#fff;border:1px solid #e5e7eb;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:transform .3s;color:#374151}.trafic-panel.collapsed .trafic-panel__toggle{transform:rotate(180deg);left:-40px}.trafic-panel__section{padding:20px;border-bottom:1px solid #f3f4f6}.trafic-panel__heading{font-size:14px;font-weight:700;text-transform:uppercase;color:#374151;letter-spacing:.5px;margin:0 0 14px;display:flex;align-items:center;gap:8px}.trafic-panel__count{background:#ba1d41;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600}.trafic-status-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:10px;background:#f9fafb;margin-bottom:14px}.trafic-status-card__indicator{width:48px;height:48px;border-radius:50%;background:#374151;flex-shrink:0;position:relative;transition:background .3s}.trafic-status-card__indicator.status-fluide{background:#10b981;box-shadow:0 0 16px rgba(16,185,129,.4)}.trafic-status-card__indicator.status-dense{background:#f59e0b;box-shadow:0 0 16px rgba(245,158,11,.4)}.trafic-status-card__indicator.status-sature{background:#ef4444;box-shadow:0 0 16px rgba(239,68,68,.4)}.trafic-status-card__indicator::after{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid rgba(255,255,255,.4)}.trafic-status-card__level{font-size:18px;font-weight:700;color:#1f2937}.trafic-status-card__detail{font-size:12px;color:#6b7280;margin-top:2px}.trafic-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.trafic-stat{text-align:center;padding:10px 4px;background:#f9fafb;border-radius:8px}.trafic-stat__value{display:block;font-size:22px;font-weight:700;color:#1f2937;font-variant-numeric:tabular-nums}.trafic-stat__label{display:block;font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}.rush-hour-timeline{margin-bottom:14px}.rush-hour-bar{height:14px;background:#e5e7eb;border-radius:7px;position:relative;overflow:visible}.rush-hour-segment{position:absolute;top:0;height:100%;border-radius:2px}.rush-hour--calm{background:#d1fae5}.rush-hour--normal{background:#bfdbfe}.rush-hour--moderate{background:#fde68a}.rush-hour--peak{background:#fca5a5}.rush-hour-now{position:absolute;top:-4px;width:3px;height:22px;background:#ba1d41;border-radius:2px;z-index:2;transition:left .5s;box-shadow:0 0 6px rgba(186,29,65,.4)}.rush-hour-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:#9ca3af}.rush-hour-info{display:flex;flex-direction:column;gap:6px}.rush-hour-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#4b5563}.rush-hour-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.rush-hour-dot--peak{background:#ef4444}.rush-hour-dot--moderate{background:#f59e0b}.trafic-panel__section--incidents{max-height:350px;overflow-y:auto;scrollbar-width:thin}.incidents-list{display:flex;flex-direction:column;gap:8px}.incidents-loading{color:#9ca3af;font-size:13px;text-align:center;padding:20px 0}.incident-card{display:flex;gap:10px;padding:10px 12px;border-radius:8px;background:#f9fafb;cursor:pointer;transition:background .15s;border-left:3px solid transparent}.incident-card:hover{background:#f3f4f6}.incident-card.severity-high{border-left-color:#ef4444}.incident-card.severity-medium{border-left-color:#f59e0b}.incident-card.severity-low{border-left-color:#10b981}.incident-card__icon,.incident-card__marker{font-size:20px;flex-shrink:0;margin-top:2px}.incident-card__content{flex:1;min-width:0}.incident-card__type{font-size:12px;font-weight:600;color:#1f2937}.incident-card__location{font-size:11px;color:#6b7280;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.incident-card__delay{font-size:10px;color:#9ca3af;margin-top:3px}.incident-card__delay strong{color:#ef4444}.incidents-empty{text-align:center;padding:30px 10px;color:#6b7280;font-size:13px}.incidents-empty__icon{font-size:36px;margin-bottom:8px;display:block}.key-routes{display:flex;flex-direction:column;gap:8px}.key-route{display:flex;align-items:center;gap:10px;font-size:13px;color:#4b5563}.key-route__badge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}.key-route__badge--autoroute{background:#1d4ed8}.key-route__badge--nationale{background:#dc2626}.key-route__badge--departementale{background:#f59e0b;color:#1f2937}.key-route__name{font-size:12px}.trafic-zones-section{padding:40px 24px;background:#fff}.trafic-zones-title{font-size:22px;font-weight:700;color:#1f2937;text-align:center;margin:0 0 30px}.trafic-zones-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto}.trafic-zone-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:20px;transition:box-shadow .2s}.trafic-zone-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}.trafic-zone-card__icon{font-size:28px;margin-bottom:10px}.trafic-zone-card__name{font-size:15px;font-weight:700;color:#1f2937;margin:0 0 8px}.trafic-zone-card__desc{font-size:13px;color:#6b7280;line-height:1.5;margin:0 0 10px}.trafic-zone-card__peak{font-size:11px;font-weight:600;color:#ba1d41;background:#fde8e8;padding:4px 10px;border-radius:6px;display:inline-block}.trafic-admin-notice{background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:14px 24px;font-size:13px;text-align:center}.trafic-admin-notice code{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px}.trafic-admin-notice a{color:#ba1d41;font-weight:600}.incident-card__marker{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;border:2px solid transparent}.incident-card__meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}.incident-card__delay{font-size:11px;color:#dc2626;font-weight:600}.incident-card__length{font-size:10px;color:#6b7280}.incident-card__road{display:inline-block;background:#1d4ed8;color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;margin-top:4px}.incident-marker-wrap{background:none !important;border:none !important}.incident-map-marker{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:var(--marker-bg,#fff);border:2.5px solid var(--marker-color,#6b7280);box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 2px rgba(255,255,255,.8);transition:transform .2s}.incident-map-marker:hover{transform:scale(1.15)}.incident-map-marker__icon{font-size:18px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}.incident-map-marker__pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--marker-color,#ef4444);opacity:0;animation:incidentPulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes incidentPulse{0%{transform:scale(.85);opacity:.7}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}.incident-cross-marker{background:none !important;border:none !important}.cross-icon{width:20px;height:20px;border-radius:50%;background:#991b1b;color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);border:2px solid #fff}.trafic-popup-wrapper .leaflet-popup-content-wrapper{border-radius:12px !important;box-shadow:0 8px 30px rgba(0,0,0,.18) !important;padding:0 !important;overflow:hidden}.trafic-popup-wrapper .leaflet-popup-content{margin:0 !important;padding:0 !important;font-size:13px !important;line-height:1.5 !important;min-width:200px}.trafic-popup-wrapper .leaflet-popup-tip{box-shadow:0 4px 10px rgba(0,0,0,.12) !important}.trafic-popup{padding:0}.trafic-popup__header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f8fafc;border-bottom:3px solid #e5e7eb;font-weight:700;font-size:14px;color:#1f2937}.trafic-popup__icon{font-size:20px}.trafic-popup__type{font-weight:700;color:#1f2937}.trafic-popup__location{padding:10px 16px 6px;color:#4b5563;font-size:12px;display:flex;align-items:flex-start;gap:6px}.trafic-popup__locicon{flex-shrink:0;color:#9ca3af;margin-top:1px}.trafic-popup__meta{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 14px}.trafic-popup__tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600}.trafic-popup__tag--delay{background:#fef2f2;color:#dc2626}.trafic-popup__tag--length{background:#f0fdf4;color:#16a34a}.trafic-popup__tag--road{background:#1d4ed8;color:#fff}.trafic-adblock-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:adblockFadeIn .3s ease}.trafic-adblock-overlay--hiding{animation:adblockFadeOut .3s ease forwards}@keyframes adblockFadeIn{from{opacity:0}to{opacity:1}}@keyframes adblockFadeOut{from{opacity:1}to{opacity:0}}.trafic-adblock-modal{background:#fff;border-radius:20px;padding:40px 36px;max-width:480px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:adblockSlideUp .4s cubic-bezier(.16,1,.3,1)}@keyframes adblockSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.trafic-adblock-modal__icon{font-size:54px;margin-bottom:16px}.trafic-adblock-modal__title{font-size:22px;font-weight:800;color:#1f2937;margin:0 0 12px}.trafic-adblock-modal__text{font-size:14px;color:#6b7280;line-height:1.6;margin:0 0 24px}.trafic-adblock-modal__steps{text-align:left;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}.trafic-adblock-step{display:flex;align-items:center;gap:12px;font-size:14px;color:#374151;font-weight:500}.trafic-adblock-step__num{width:28px;height:28px;border-radius:50%;background:#ba1d41;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.trafic-adblock-modal__actions{display:flex;gap:10px;justify-content:center}.trafic-adblock-btn{padding:11px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s}.trafic-adblock-btn--primary{background:#ba1d41;color:#fff}.trafic-adblock-btn--primary:hover{background:#9c1835;box-shadow:0 4px 12px rgba(186,29,65,.3)}.trafic-adblock-btn--secondary{background:#f3f4f6;color:#6b7280}.trafic-adblock-btn--secondary:hover{background:#e5e7eb;color:#374151}.trafic-ctrl-btn.spinning svg{animation:spinRefresh .7s ease}@keyframes spinRefresh{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@media (max-width:1024px){.trafic-panel{width:320px;min-width:320px}}@media (max-width:768px){.trafic-body{flex-direction:column;height:auto}.trafic-map-container{height:60vh;min-height:400px}.trafic-panel{width:100% !important;min-width:100% !important;max-height:50vh;border-left:none;border-top:1px solid #e5e7eb}.trafic-panel.collapsed{max-height:0;border-top:none}.trafic-panel__toggle{top:-16px;left:50%;transform:translateX(-50%) rotate(90deg)}.trafic-panel.collapsed .trafic-panel__toggle{transform:translateX(-50%) rotate(-90deg);top:-40px;left:50%}.trafic-header__title{font-size:17px}.trafic-legend{bottom:10px;left:10px;padding:10px 14px;font-size:11px}.trafic-zones-grid{grid-template-columns:1fr}}