:root{--noir: #1A1A1A;--anthracite: #2D2D2D;--gris-fonce: #4A4A4A;--gris-texte: #555555;--gris-clair: #E8E8E8;--gris-fond: #F5F5F5;--blanc: #FFFFFF;--badge-green: #2E7D32;--badge-green-bg: #E8F5E9;--badge-orange: #E65100;--badge-orange-bg: #FFF3E0;--badge-gray: #757575;--badge-gray-bg: #EEEEEE;--shadow-card: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);--shadow-card-hover: 0 8px 24px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .08);--radius: 6px;--transition: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Calibri,Segoe UI,sans-serif;background-color:var(--gris-fond);color:var(--gris-texte);min-height:100vh}#root{display:flex;flex-direction:column;min-height:100vh}.header{background-color:var(--anthracite);color:var(--blanc);padding:1.5rem 2rem;display:flex;align-items:center;gap:1.25rem}.header__logo{height:40px;width:auto;flex-shrink:0}.header__text{display:flex;flex-direction:column;gap:.15rem}.header__title{font-size:1.35rem;font-weight:700;letter-spacing:.02em;line-height:1.2}.header__subtitle{font-size:.85rem;font-weight:400;opacity:.7;letter-spacing:.03em}.main{flex:1;padding:2rem;max-width:1200px;width:100%;margin:0 auto}.state-message{text-align:center;padding:4rem 1rem;color:var(--gris-fonce);font-size:.95rem}.state-message--error{color:var(--badge-orange)}.app-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:640px){.app-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.app-grid{grid-template-columns:repeat(3,1fr)}}.card{background:var(--blanc);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:1.25rem 1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;text-decoration:none;color:inherit;border:1px solid transparent}.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background-color:var(--card-color, var(--gris-clair));border-radius:var(--radius) 0 0 var(--radius);transition:width .2s ease}.card--live{cursor:pointer}.card--live:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px);border-color:var(--gris-clair)}.card--live:hover:before{width:6px}.card--live:hover .badge--green{background-color:#c8e6c9}.card--unavailable{opacity:.65;cursor:default}.card--coming-soon{opacity:.5;cursor:default}.card--coming-soon:hover{box-shadow:0 2px 6px #00000014,0 1px 3px #0000000f}.card--maintenance{opacity:.7;cursor:default}.card--maintenance:hover{box-shadow:0 2px 6px #00000014,0 1px 3px #0000000f}.card__header{display:flex;align-items:center;gap:.75rem}.card__icon{width:36px;height:36px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background-color:var(--gris-fond)}.card__icon svg{width:20px;height:20px}.card__name{font-size:1rem;font-weight:600;color:var(--noir);line-height:1.3}.card__description{font-size:.85rem;color:var(--gris-texte);line-height:1.5}.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.25rem .65rem;border-radius:100px;width:fit-content;letter-spacing:.01em}.badge--green{background-color:var(--badge-green-bg);color:var(--badge-green);transition:background-color .2s ease}.badge--orange{background-color:var(--badge-orange-bg);color:var(--badge-orange)}.badge--gray{background-color:var(--badge-gray-bg);color:var(--badge-gray)}.footer{text-align:center;padding:1.5rem 2rem;font-size:.78rem;color:var(--gris-fonce);border-top:1px solid var(--gris-clair);background-color:var(--blanc);letter-spacing:.01em}