/* ========================================================================== lf-ops.css - Systeme de design "Terminal OPS" Liberty Fly Refonte front brutaliste (handoff Claude Design, 22 juil 2026). Systeme partage site-wide : tokens 2 themes (dark defaut / light) + composants. Themes : data-lf-theme="light|dark" sur (ou un conteneur) prime sur prefers-color-scheme. Voir lf-ops.js pour les comportements (theme/clock/radar). Police : IBM Plex Mono (self-host a prevoir), fallback mono systeme. ========================================================================== */ /* IBM Plex Mono self-host (SIL OFL), poids 400/500/600/700 */ @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-400.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-500.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-600.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-700.woff2") format("woff2")} :root{ --bg:#080c09;--bg2:#0a100c;--panel:#0a100c;--line:#1c2e20;--line2:#12211a; --ink:#eafff0;--txt:#8fbf9c;--dim:#6b8f74;--faint:#4a6b52; --acc:#46e07a;--accText:#04120a;--amb:#ffb000; --bullLine:#3a3116;--bullBg:#0d0f07;--bullTitle:#ffd873;--bullTxt:#a89a6b; } :root[data-lf-theme="light"]{ --bg:#f1f4ee;--bg2:#e9eee6;--panel:#fbfcf9;--line:#c4d1c2;--line2:#e2e9df; --ink:#122b1c;--txt:#4a6b55;--dim:#5f7a66;--faint:#7a937f; --acc:#136d38;--accText:#f1f4ee;--amb:#b06e00; --bullLine:#d8c99a;--bullBg:#f7f2df;--bullTitle:#5c4a10;--bullTxt:#7a6830; } @media (prefers-color-scheme:light){ :root:not([data-lf-theme]){ --bg:#f1f4ee;--bg2:#e9eee6;--panel:#fbfcf9;--line:#c4d1c2;--line2:#e2e9df; --ink:#122b1c;--txt:#4a6b55;--dim:#5f7a66;--faint:#7a937f; --acc:#136d38;--accText:#f1f4ee;--amb:#b06e00; --bullLine:#d8c99a;--bullBg:#f7f2df;--bullTitle:#5c4a10;--bullTxt:#7a6830; } } /* --- Racine terminal (scope de la refonte, evite de heurter le CSS existant) --- */ .lf-ops{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;background:var(--bg);color:var(--txt);min-height:100vh; /* Pont de compat : anciennes variables --lf-* (lexique.css, changelogs, contenus BDD) mappees sur les tokens ops */ --lf-text:var(--ink);--lf-text-secondary:var(--txt);--lf-muted:var(--dim);--lf-label:var(--faint); --lf-primary:var(--acc);--lf-gold:var(--amb);--lf-amber:var(--amb); --lf-surface:var(--panel);--lf-surface-2:var(--panel);--lf-surface-3:var(--bg2); --lf-separator:var(--line);--lf-border:var(--line); --lf-fids-muted:var(--dim);--lf-fids-border:var(--line2);--lf-fids-success:var(--acc); } /* Pont de compat classes historiques (stats-panel / fd-info / stats-kpi : changelogs, vues non migrees) */ .lf-ops .stats-panel{border:1px solid var(--line);background:var(--panel)} .lf-ops .stats-panel-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--ink);text-transform:uppercase} .lf-ops .fd-info-row{display:flex;justify-content:space-between;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line2);font-size:12px} .lf-ops .fd-info-row:last-child{border-bottom:none} .lf-ops .fd-info-label{color:var(--dim);letter-spacing:.04em;font-weight:600} .lf-ops .fd-info-value{color:var(--txt);line-height:1.65} .lf-ops .stats-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;border:1px solid var(--line);background:var(--panel)} .lf-ops .stats-kpi{text-align:center;padding:14px 10px;border-right:1px solid var(--line)} .lf-ops .stats-kpi:last-child{border-right:none} .lf-ops .stats-kpi-value{font-size:20px;font-weight:700;color:var(--ink)} .lf-ops .stats-kpi-label{font-size:9.5px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;margin-top:4px} .lf-ops .lf-system-alert{border:1px solid var(--line);border-left:2px solid var(--acc);background:var(--bg2);padding:12px 14px;font-size:12px;line-height:1.6;color:var(--txt)} .lf-ops .mb-4{margin-bottom:22px} .lf-ops .mb-1{margin-bottom:6px} .lf-ops *{box-sizing:border-box} .lf-ops a{color:inherit;text-decoration:none} .lf-ops a:hover{opacity:.75} .lf-mono{font-variant-numeric:tabular-nums} @keyframes lfblink{0%,49%{opacity:1}50%,100%{opacity:.15}} @keyframes lftick{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes lfsweep{from{transform:rotate(0)}to{transform:rotate(360deg)}} .lf-blink{animation:lfblink 1s step-end infinite} @media (prefers-reduced-motion:reduce){.lf-ops *{animation-duration:0s!important}} .lf-wrap{max-width:1280px;margin:0 auto} /* --- Topbar --- */ .lf-topbar{display:flex;align-items:center;gap:20px;padding:10px 28px;border-bottom:1px solid var(--line);background:var(--bg2);font-size:11px;letter-spacing:.08em;flex-wrap:wrap} .lf-logo{font-weight:700;color:var(--acc)} .lf-fnav{display:flex;gap:16px;color:var(--dim);flex-wrap:wrap} .lf-fnav a.on{color:var(--acc)} .lf-tright{margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .lf-tsw{display:flex;gap:2px;border:1px solid var(--line)} .lf-tsw button{background:transparent;color:var(--dim);border:none;font:600 10px inherit;letter-spacing:.08em;padding:5px 9px;cursor:pointer} .lf-tsw button[aria-pressed="true"]{background:var(--acc);color:var(--accText)} .lf-clock{display:flex;gap:8px;align-items:center;color:var(--acc);font-weight:600} .lf-btn-line{border:1px solid var(--line);padding:5px 12px;font-weight:600;color:var(--txt)} /* --- Hero + radar --- */ .lf-hero{display:grid;grid-template-columns:1fr minmax(280px,400px);gap:40px;padding:56px 28px 40px;align-items:center} .lf-kicker{font-size:11px;letter-spacing:.3em;color:var(--dim);margin-bottom:18px} .lf-h1{margin:0;font-size:92px;line-height:.95;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .lf-h1 .u{color:var(--acc);animation:lfblink 1.1s step-end infinite} .lf-tag{margin:22px 0 30px;font-size:15px;color:var(--txt);letter-spacing:.12em} .lf-cta{display:flex;gap:14px;flex-wrap:wrap} .lf-cta a{font-size:13px;letter-spacing:.1em;padding:14px 26px;font-weight:700} .lf-cta .go{background:var(--acc);color:var(--accText)} .lf-cta .alt{background:transparent;border:1px solid var(--line);color:var(--acc);font-weight:600} .lf-radar{position:relative;width:340px;height:340px;justify-self:center;max-width:100%} .lf-radar .c{position:absolute;border-radius:50%} .lf-radar .c0{inset:0;border:1px solid var(--line);background:var(--bg2)} .lf-radar .c1{inset:56px;border:1px solid var(--line2)} .lf-radar .c2{inset:112px;border:1px solid var(--line2)} .lf-radar .vx{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line2)} .lf-radar .hx{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line2)} .lf-radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70deg,transparent 360deg);animation:lfsweep 4s linear infinite} .lf-blip{position:absolute;width:6px;height:6px} .lf-radar cap{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.25em;color:var(--faint)} /* --- Bandeau stats --- */ .lf-stats{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)} .lf-stat{padding:18px 20px;border-right:1px solid var(--line);min-width:0} .lf-stat:last-child{border-right:none} .lf-stat .v{font-size:26px;font-weight:700;color:var(--ink)} .lf-stat .l{font-size:10px;letter-spacing:.2em;color:var(--dim);margin-top:4px} /* --- Ticker --- */ .lf-ticker{background:var(--bg2);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;font-size:11px;letter-spacing:.12em;padding:9px 0} .lf-ticker .run{display:inline-block;animation:lftick 26s linear infinite} .lf-ticker .run span{margin:0 22px;color:var(--txt)} .lf-ticker .run .m{color:var(--amb)} /* --- Flight board + bulletin --- */ .lf-board-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:24px;padding:32px 28px} .lf-sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px} .lf-sec-h .t{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--ink)} .lf-sec-h .m{font-size:10px;color:var(--dim)} .lf-fb{border:1px solid var(--line);background:var(--panel)} .lf-fb-row{display:grid;grid-template-columns:64px 1.2fr 52px 22px 52px 1.4fr 70px;column-gap:10px;align-items:center;padding:9px 14px;font-size:12px} .lf-fb-head{font-size:10px;color:var(--faint);letter-spacing:.1em;border-bottom:1px solid var(--line)} .lf-fb-body .lf-fb-row{border-bottom:1px solid var(--line2)} .lf-st-live{color:var(--acc);font-weight:700} .lf-st-land{color:var(--amb);font-weight:700} .lf-cs{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lf-ap{color:var(--txt)}.lf-arr{color:var(--dim);text-align:center} .lf-acf{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lf-tm{color:var(--dim);text-align:right}.lf-tm.now{color:var(--acc)} .lf-fb-links{display:flex;gap:20px;padding:12px 14px;font-size:11px;letter-spacing:.08em} .lf-fb-links .a1{color:var(--acc)}.lf-fb-links .a2{color:var(--dim)} .lf-bull{border:1px solid var(--bullLine);background:var(--bullBg);padding:20px} .lf-bull .h{font-size:10px;letter-spacing:.2em;color:var(--amb);margin-bottom:10px} .lf-bull .t{font-size:17px;font-weight:700;color:var(--bullTitle);margin-bottom:10px;text-wrap:balance} .lf-bull .b{font-size:12px;line-height:1.7;color:var(--bullTxt)} .lf-bull .f{margin-top:14px;padding-top:12px;border-top:1px solid var(--bullLine);font-size:12px;font-weight:700;color:var(--amb)} /* --- Missions --- */ .lf-sect{padding:8px 28px 34px} .lf-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .lf-mcard{border:1px dashed var(--line);background:var(--panel);padding:18px} .lf-mcard .r{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--acc);margin-bottom:8px} .lf-mcard .t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;text-wrap:balance} .lf-mcard .d{font-size:11.5px;line-height:1.65;color:var(--dim);margin-bottom:12px} .lf-mcard .fly{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--acc)} /* --- 3 etapes --- */ .lf-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .lf-step{padding:26px 28px;border-right:1px solid var(--line)} .lf-step:last-child{border-right:none} .lf-step .n{font-size:22px;font-weight:700;color:var(--acc)} .lf-step .t{font-size:13px;font-weight:700;color:var(--ink);margin:8px 0 6px;letter-spacing:.06em} .lf-step .x{font-size:11.5px;line-height:1.6;color:var(--dim)} /* --- Footer --- */ .lf-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;background:var(--bg2);border-top:1px solid var(--line);padding:12px 28px 0;font-size:10px;letter-spacing:.12em} .lf-foot-links a{color:var(--dim)} .lf-foot-links a:hover{color:var(--acc);opacity:1} .lf-foot{display:flex;justify-content:space-between;background:var(--bg2);border-top:1px solid var(--line);padding:12px 28px 14px;font-size:10px;letter-spacing:.15em;color:var(--faint);flex-wrap:wrap;gap:8px} .lf-foot-links + .lf-foot{border-top:none;padding-top:8px} /* --- Composants pages de contenu (listings, tables) --- */ .lf-page{padding:34px 28px 48px} .lf-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px} .lf-eyebrow{font-size:11px;letter-spacing:.3em;color:var(--dim);margin-bottom:8px} .lf-page-title{margin:0;font-size:34px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1;text-wrap:balance} .lf-page-meta{font-size:11px;letter-spacing:.15em;color:var(--dim)} .lf-page-meta b{color:var(--acc)} .lf-lede{font-size:12.5px;line-height:1.75;color:var(--dim);max-width:75ch;margin:0 0 22px} .lf-table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)} .lf-table{width:100%;border-collapse:collapse;font-size:12.5px} .lf-table thead th{font-size:10px;letter-spacing:.12em;color:var(--faint);text-align:left;font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap} .lf-table th.num,.lf-table td.num{text-align:right;font-variant-numeric:tabular-nums} .lf-table tbody td{padding:10px 14px;border-bottom:1px solid var(--line2);color:var(--txt)} .lf-table tbody tr:last-child td{border-bottom:none} .lf-table tbody tr.clik{cursor:pointer;transition:background .12s} .lf-table tbody tr.clik:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)} .lf-table td.rank{color:var(--faint);font-variant-numeric:tabular-nums;width:48px} .lf-table td.cs{color:var(--ink);font-weight:700} .lf-table td.rp{color:var(--acc);font-weight:700} .lf-cta{margin:34px 0 8px;border:1px dashed var(--line);background:var(--panel);padding:26px 24px;text-align:center} .lf-cta .t{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px} .lf-cta .s{font-size:12px;color:var(--dim);margin-bottom:16px} .lf-cta a{display:inline-block;background:var(--acc);color:var(--accText);font-weight:700;font-size:13px;letter-spacing:.08em;padding:12px 24px} .lf-empty{text-align:center;color:var(--dim);padding:40px;font-size:12px;letter-spacing:.1em} /* --- Cartes listing (tours / missions / lignes / awards) --- */ .lf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:26px} .lf-grid.sm{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} .lf-card{position:relative;display:block;border:1px dashed var(--line);background:var(--panel);padding:16px;transition:border-color .12s} a.lf-card:hover{opacity:1;border-color:var(--acc)} .lf-card.ctr{text-align:center} .lf-card .img{display:block;width:calc(100% + 32px);max-width:none;margin:-16px -16px 14px;height:150px;object-fit:cover;border-bottom:1px solid var(--line);filter:saturate(.85)} .lf-card .emb{display:block;width:72px;height:72px;object-fit:contain;margin:0 auto 10px} .lf-card .k{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--acc);margin-bottom:8px} .lf-card .k .amb{color:var(--amb)} .lf-card .t{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:8px;text-wrap:balance} .lf-card .d{font-size:11.5px;line-height:1.65;color:var(--dim);margin-bottom:10px} .lf-card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:10.5px;letter-spacing:.06em;color:var(--dim)} .lf-card.ctr .meta{justify-content:center} .lf-card .meta b{color:var(--txt);font-weight:600} .lf-card .meta .rp{color:var(--acc);font-weight:700} .lf-card .corner{position:absolute;top:10px;right:12px;font-size:9.5px;letter-spacing:.1em;color:var(--faint)} .lf-card .lgo{width:18px;height:18px;object-fit:contain;background:#fff;vertical-align:-4px;margin-right:6px} .lf-badge{display:inline-block;border:1px solid var(--line);padding:2px 7px;font-size:9.5px;font-weight:600;letter-spacing:.1em;color:var(--dim)} .lf-badge.acc{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)} .lf-badge.amb{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 45%,transparent)} /* --- Paire ICAO (lignes commerciales) --- */ .lf-route{display:flex;align-items:center;gap:12px;margin-bottom:10px} .lf-route .ap .i{font-size:17px;font-weight:700;color:var(--ink)} .lf-route .ap .c{font-size:9.5px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px} .lf-route .mid{flex:1;text-align:center;font-size:9.5px;letter-spacing:.12em;color:var(--faint)} .lf-route .mid .ar{display:block;font-size:12px;color:var(--dim)} /* --- En-tete de groupe / section de page --- */ .lf-group-h{display:flex;align-items:baseline;gap:12px;margin:30px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--line)} .lf-group-h:first-of-type{margin-top:6px} .lf-group-h .t{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--ink);text-transform:uppercase} .lf-group-h .n{font-size:10px;color:var(--faint);letter-spacing:.1em;margin-left:auto;white-space:nowrap} .lf-group-d{font-size:11.5px;color:var(--dim);margin:0 0 14px;max-width:75ch} /* --- Filtres (selects) --- */ .lf-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px} .lf-filters select{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--txt);background:var(--panel);border:1px solid var(--line);border-radius:0;padding:8px 10px;cursor:pointer} /* --- Pagination --- */ .lf-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 20px} .lf-pager a,.lf-pager span{border:1px solid var(--line);min-width:34px;text-align:center;padding:7px 10px;font-size:11px;font-weight:600;color:var(--dim)} .lf-pager .on{background:var(--acc);color:var(--accText);border-color:var(--acc)} /* --- Formulaires (auth, filtres avances) --- */ .lf-narrow{max-width:520px;margin:0 auto} .lf-form label{display:block;font-size:10px;letter-spacing:.15em;color:var(--dim);margin-bottom:5px;text-transform:uppercase} .lf-form input,.lf-form textarea,.lf-form select{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:0;padding:10px 12px;margin-bottom:14px} .lf-form input:focus,.lf-form textarea:focus,.lf-form select:focus{outline:none;border-color:var(--acc)} .lf-form input::placeholder,.lf-form textarea::placeholder{color:var(--faint)} .lf-form button[type=submit]{width:100%;background:var(--acc);color:var(--accText);border:none;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;padding:13px 22px;cursor:pointer} .lf-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media(max-width:600px){.lf-form .grid2{grid-template-columns:1fr}} .lf-alert{border:1px solid var(--line);border-left:2px solid var(--acc);background:var(--bg2);padding:12px 14px;font-size:12px;line-height:1.6;color:var(--txt);margin-bottom:16px} .lf-alert.err{border-left-color:#ff4d4d} .lf-alert.warn{border-left-color:var(--amb)} .lf-alert ul{margin:0;padding-left:18px} .lf-alert a{color:var(--acc)} /* --- Boutons en contexte page (hors hero) --- */ .lf-btns{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 4px} .lf-btns a{font-size:12px;letter-spacing:.08em;padding:12px 22px;font-weight:700} .lf-btns .go{background:var(--acc);color:var(--accText)} .lf-btns .alt{background:transparent;border:1px solid var(--line);color:var(--acc);font-weight:600} /* --- FAQ (details/summary natif) --- */ .lf-faq{border:1px solid var(--line);background:var(--panel);margin-bottom:24px} .lf-faq details{border-bottom:1px solid var(--line2)} .lf-faq details:last-child{border-bottom:none} .lf-faq summary{cursor:pointer;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--ink);list-style:none} .lf-faq summary::-webkit-details-marker{display:none} .lf-faq summary::before{content:"[+] ";color:var(--acc);font-weight:700} .lf-faq details[open] summary::before{content:"[-] "} .lf-faq .a{padding:0 14px 14px 38px;font-size:12px;line-height:1.7;color:var(--dim)} /* --- Fiche cle/valeur --- */ .lf-kv{border:1px solid var(--line);background:var(--panel);margin-bottom:24px} .lf-kv .row{display:flex;justify-content:space-between;gap:16px;padding:9px 14px;border-bottom:1px solid var(--line2);font-size:12px;align-items:baseline} .lf-kv .row:last-child{border-bottom:none} .lf-kv .k{color:var(--dim);letter-spacing:.06em;flex-shrink:0} .lf-kv .v{color:var(--ink);text-align:right} .lf-kv .v a{color:var(--acc)} /* --- Timeline terminal ([x] fait / [>] en cours) --- */ .lf-tl{border:1px solid var(--line);background:var(--panel);margin-bottom:24px} .lf-tl .it{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line2);font-size:12px} .lf-tl .it:last-child{border-bottom:none} .lf-tl .mk{color:var(--acc);font-weight:700;flex-shrink:0} .lf-tl .mk.cur{color:var(--amb)} .lf-tl .vt{font-weight:700;color:var(--ink);margin-bottom:2px} .lf-tl .vt .now{color:var(--amb);font-size:10px;letter-spacing:.12em;margin-left:6px} .lf-tl .vd{color:var(--dim);line-height:1.6;font-size:11.5px} /* --- Pages de detail (tour / mission / pilote) --- */ .lf-stats.fit{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-left:1px solid var(--line);border-right:1px solid var(--line);margin-bottom:24px} .lf-banner{display:block;width:100%;max-height:260px;object-fit:cover;border:1px solid var(--line);margin-bottom:22px;filter:saturate(.85)} .lf-panel{border:1px solid var(--line);background:var(--panel);padding:18px 20px;margin-bottom:22px} .lf-panel .h{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--acc);margin-bottom:10px;text-transform:uppercase} .lf-panel .h.amb{color:var(--amb)} .lf-panel .b{font-size:12.5px;line-height:1.75;color:var(--txt)} .lf-2col{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-bottom:8px} .lf-legs{border:1px solid var(--line);background:var(--panel)} .lf-leg{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line2);font-size:12px} .lf-leg:last-child{border-bottom:none} .lf-leg .n{width:34px;flex-shrink:0;color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums} .lf-leg .rt{flex:1;min-width:0} .lf-leg .icao{font-weight:700;color:var(--ink)} .lf-leg .ar{color:var(--faint);margin:0 6px} .lf-leg .city{font-size:10px;color:var(--dim);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lf-leg .m{font-size:10.5px;color:var(--dim);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .lf-leg-sec{padding:12px 14px 8px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--amb);text-transform:uppercase} .lf-leg-sec .s{display:block;font-weight:400;letter-spacing:.04em;color:var(--dim);text-transform:none;margin-top:3px} .lf-leg-alt{padding:8px 14px;border-bottom:1px solid var(--line2);border-left:2px solid var(--amb);font-size:10.5px;line-height:1.6;color:var(--amb);background:color-mix(in srgb,var(--amb) 5%,transparent)} .lf-award-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .lf-award-tile{width:58px;height:58px;border:1px dashed var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center} .lf-award-tile img{width:44px;height:44px;object-fit:contain} .lf-live{border:1px solid var(--acc);background:var(--panel);margin-bottom:24px} .lf-live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em} .lf-live-head .t{color:var(--acc);font-weight:700;display:flex;align-items:center;gap:8px} .lf-live-head .ph{color:var(--amb);font-weight:700} .lf-live-body{display:grid;grid-template-columns:1fr 280px} .lf-live-map{min-height:220px} .lf-live-info{padding:14px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line)} .lf-live-route{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.06em} .lf-live-route .ar{color:var(--faint);font-weight:400} .lf-live-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:10px;letter-spacing:.08em;color:var(--dim)} .lf-live-metrics b{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums} /* --- Live map (classes attendues par le JS de live_map.php, stylees ops) --- */ .lf-ops .d-none{display:none!important} .lf-ops .badge{display:inline-block;border:1px solid var(--line);padding:2px 7px;font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--dim);border-radius:0} .lf-ops .text-bg-primary,.lf-ops .text-bg-success{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)} .lf-ops .text-bg-warning{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 45%,transparent)} .lf-ops .text-bg-danger{color:#ff4d4d;border-color:rgba(255,77,77,.45)} .lf-ops .text-bg-info{color:var(--txt)} .lf-ops .text-bg-secondary{color:var(--dim)} .lf-ops .lf-pill{display:inline-block;border:1px solid var(--line);padding:4px 10px;font-size:10.5px;letter-spacing:.08em;color:var(--acc);font-weight:600} .lf-map-shell{border:1px solid var(--line);background:var(--panel);margin-bottom:24px} .lf-map-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)} .lf-map-bar .left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.08em;color:var(--dim)} .lf-map-bar .left .t{font-weight:700;color:var(--ink);letter-spacing:.15em;text-transform:uppercase} .lf-map-bar .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .lf-map-bar select{font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:0;padding:7px 9px;cursor:pointer} .lf-map-bar .bt{background:transparent;border:1px solid var(--line);color:var(--txt);font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.08em;padding:7px 12px;cursor:pointer} .lf-map-bar .bt.lf-active{background:var(--acc);color:var(--accText);border-color:var(--acc)} .lf-map-bar .bt:disabled{opacity:.35;cursor:default} .lf-livemap-layout{display:flex;gap:14px;padding:14px} .lf-livemap-main{flex:1;min-width:0} #lf-map{height:clamp(420px,60vh,760px);border:1px solid var(--line);background:var(--bg2)} .lf-map-hint{font-size:10.5px;color:var(--faint);letter-spacing:.04em;margin-top:8px} .lf-livemap-sidebar{width:300px;flex-shrink:0;overflow-y:auto;max-height:clamp(520px,60vh,800px);background:var(--bg2);border:1px solid var(--line)} .lf-livemap-sidebar input{width:100%;box-sizing:border-box;font-family:inherit;font-size:11.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:0;padding:7px 10px} .lf-flight-card{padding:8px 10px;border-bottom:1px solid var(--line2);cursor:pointer;transition:background .12s;font-size:12px} .lf-flight-card:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)} .lf-flight-card.is-selected{background:color-mix(in srgb,var(--acc) 10%,transparent);border-left:2px solid var(--acc)} .lf-progress{height:6px;background:var(--line2);overflow:hidden} .lf-progress-bar{height:100%;background:var(--acc);transition:width .8s ease} #lf-flight-panel-wrap{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease} #lf-flight-panel-wrap.is-open{max-height:520px;opacity:1} .lf-fp{border-top:1px solid var(--line);padding:14px} .lf-fp .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;font-size:10px;letter-spacing:.08em;color:var(--dim);margin-top:12px} .lf-fp .metrics b{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums} .lf-type{display:inline-block;padding:2px 7px;font-size:9.5px;letter-spacing:.12em;font-weight:700;border:1px solid var(--line)} .lf-type-tour{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 45%,transparent)} .lf-type-mission{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)} .lf-type-pax{color:var(--txt)} .lf-type-free{color:var(--dim)} .lf-ops .marker-plane svg,.lf-ops .marker-plane svg *{fill:var(--acc)!important;stroke:var(--acc)!important} .lf-ops .marker-parked svg,.lf-ops .marker-parked svg *{fill:var(--amb)!important;stroke:var(--amb)!important} .lf-ops .leaflet-marker-icon.lf-sig-ok{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 70%,transparent))} .lf-ops .leaflet-marker-icon.lf-sig-weak{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--amb) 75%,transparent))} .lf-ops .leaflet-marker-icon.lf-sig-stale{filter:drop-shadow(0 0 6px rgba(255,77,77,.75))} @media(max-width:991px){.lf-livemap-layout{flex-direction:column}.lf-livemap-sidebar{width:100%;max-height:280px}} /* --- Responsive --- */ @media(max-width:900px){ .lf-2col{grid-template-columns:1fr} .lf-live-body{grid-template-columns:1fr}.lf-live-info{border-left:none;border-top:1px solid var(--line)} .lf-hero{grid-template-columns:1fr;gap:26px}.lf-h1{font-size:64px} .lf-stats{grid-template-columns:repeat(3,1fr)}.lf-stat:nth-child(3){border-right:none} .lf-board-row{grid-template-columns:1fr} .lf-mgrid,.lf-steps{grid-template-columns:1fr}.lf-step{border-right:none;border-bottom:1px solid var(--line)} .lf-fb-row{grid-template-columns:58px 1fr 44px 16px 44px 70px;column-gap:8px;font-size:11px} .lf-acf{display:none} } @media(max-width:560px){.lf-h1{font-size:46px}.lf-stats{grid-template-columns:repeat(2,1fr)}.lf-stat:nth-child(2){border-right:none}}