/* ============================================================================ minecraft.fr · « État des services » — composant mcfr-status Statique, sans JS (le JS reste de l'amélioration progressive). À charger APRÈS system.css (tokens de base) + home.css (header/footer). theme-dark.css gère le thème sombre via [data-theme="dark"] ; ici on ajoute seulement les tokens d'état (4 couleurs) en clair ET sombre. Préfixe .mcfr- pour ne jamais entrer en collision avec le thème du site. ============================================================================ */ /* ---------------------------------------------------------------- tokens --- */ :root { /* — 4 états — (clair) */ --mcfr-ok: #2FA85A; --mcfr-ok-bg: #E7F5EC; --mcfr-ok-ink: #155F31; --mcfr-degraded: #E0972A; --mcfr-deg-bg: #FBF0D8; --mcfr-deg-ink: #82540A; --mcfr-down: #D8412A; --mcfr-down-bg: #FBE4DE; --mcfr-down-ink: #8E2414; --mcfr-unknown: #AEB6B0; --mcfr-unk-bg: #ECEFEC; --mcfr-unk-ink: #5E6862; /* — tooltip (sombre sur clair) — */ --mcfr-tip-bg: #181F1D; --mcfr-tip-ink: #EAF1EE; --mcfr-tip-mut: #9AA6A0; /* — grille des graphes — */ --mcfr-grid: rgba(30,36,34,.10); } [data-theme="dark"] { --mcfr-ok: #43C277; --mcfr-ok-bg: #15311F; --mcfr-ok-ink: #7FE0A4; --mcfr-degraded: #F0BE61; --mcfr-deg-bg: #2F2611; --mcfr-deg-ink: #F6D79A; --mcfr-down: #F0664A; --mcfr-down-bg: #331813; --mcfr-down-ink: #F7A28E; --mcfr-unknown: #5A655F; --mcfr-unk-bg: #1E2724; --mcfr-unk-ink: #9AA6A0; --mcfr-tip-bg: #0B0F0E; --mcfr-tip-ink: #EAF1EE; --mcfr-tip-mut: #8A968F; --mcfr-grid: rgba(255,255,255,.07); } /* couleur résolue par état — utilisée partout via currentColor des swatches */ [data-state="operational"] { --mcfr-c: var(--mcfr-ok); --mcfr-c-bg: var(--mcfr-ok-bg); --mcfr-c-ink: var(--mcfr-ok-ink); } [data-state="degraded"] { --mcfr-c: var(--mcfr-degraded); --mcfr-c-bg: var(--mcfr-deg-bg); --mcfr-c-ink: var(--mcfr-deg-ink); } [data-state="down"] { --mcfr-c: var(--mcfr-down); --mcfr-c-bg: var(--mcfr-down-bg); --mcfr-c-ink: var(--mcfr-down-ink); } [data-state="unknown"] { --mcfr-c: var(--mcfr-unknown); --mcfr-c-bg: var(--mcfr-unk-bg); --mcfr-c-ink: var(--mcfr-unk-ink); } /* ---------------------------------------------------------------- shell ---- */ .mcfr-status { font-family: var(--mc-sans); color: var(--mc-ink); padding: 30px 0 46px; } .mcfr-status *, .mcfr-status *::before, .mcfr-status *::after { box-sizing: border-box; } /* petite légende d'état réutilisable : carré pixel + libellé */ .mcfr-swatch { width: 12px; height: 12px; flex: 0 0 auto; background: var(--mcfr-c, var(--mcfr-unknown)); box-shadow: inset -3px -3px 0 rgba(0,0,0,.20); } [data-theme="dark"] .mcfr-swatch { box-shadow: inset -3px -3px 0 rgba(0,0,0,.35); } /* pastille d'état (point coloré blocky) */ .mcfr-dot { display: inline-block; width: var(--d,14px); height: var(--d,14px); flex: 0 0 auto; background: var(--mcfr-c, var(--mcfr-unknown)); border: 2px solid var(--mc-edge); box-shadow: inset -3px -3px 0 rgba(0,0,0,.22); } [data-state="operational"] .mcfr-dot.is-pulse, .mcfr-dot.is-pulse[data-state="operational"] { animation: none; } /* =========================================================================== 1 · EN-TÊTE DE STATUT GLOBAL =========================================================================== */ .mcfr-status__head { margin: 0 0 22px; } .mcfr-status__eyebrow { font-family: var(--mc-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px; } .mcfr-status__eyebrow::before { content:""; width: 11px; height: 11px; background: var(--mc-tq); box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); } /* bandeau principal — fond teinté selon l'état du conteneur */ .mcfr-banner { position: relative; display: flex; align-items: center; gap: 20px; padding: 22px 26px; border: 2px solid var(--mc-edge); box-shadow: var(--mc-sh); background: var(--mcfr-c-bg, var(--mc-surface)); overflow: hidden; } .mcfr-banner::before { content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--mcfr-c, var(--mcfr-unknown)); } .mcfr-banner__pastille { width: 38px; height: 38px; flex: 0 0 auto; margin-left: 6px; background: var(--mcfr-c, var(--mcfr-unknown)); border: 2px solid var(--mc-edge); box-shadow: inset -5px -5px 0 rgba(0,0,0,.22); } .mcfr-banner__txt { min-width: 0; flex: 1 1 auto; } .mcfr-banner__msg { font-family: var(--mc-display); font-weight: 700; font-size: clamp(22px, 3vw, 31px); line-height: 1.04; color: var(--mc-ink); margin: 0; letter-spacing: .005em; } .mcfr-banner__sub { font-size: 13px; color: var(--mc-ink-2); margin: 7px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .mcfr-banner__sub .sep { width: 4px; height: 4px; background: var(--mc-line-2); flex: 0 0 auto; } .mcfr-banner__sub b { color: var(--mc-ink); font-weight: 700; } .mcfr-banner__count { flex: 0 0 auto; text-align: right; padding-left: 18px; border-left: 2px dotted var(--mc-line-2); align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .mcfr-banner__count .n { font-family: var(--mc-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--mc-ink); } .mcfr-banner__count .n b { color: var(--mcfr-ok); } .mcfr-banner__count .l { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-muted); margin-top: 5px; } /* légende globale des 4 états */ .mcfr-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 14px 2px 0; } .mcfr-legend .it { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mc-ink-2); } .mcfr-legend .it .mcfr-swatch { box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); } /* =========================================================================== 2 · GRILLE DE CARTES DE SERVICES =========================================================================== */ .mcfr-section-bar { display: flex; align-items: center; gap: 12px; font-family: var(--mc-display); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--mc-ink); margin: 36px 0 16px; } .mcfr-section-bar .tq { width: 15px; height: 15px; background: var(--mc-tq); border: 2px solid var(--mc-edge); flex: 0 0 auto; } .mcfr-section-bar::after { content:""; flex: 1 1 auto; height: 3px; background: var(--mc-strong); } .mcfr-section-bar .hint { flex: 0 0 auto; font-family: var(--mc-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--mc-muted); } .mcfr-services { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .mcfr-service { display: flex; flex-direction: column; background: var(--mc-surface); border: 2px solid var(--mc-edge); box-shadow: var(--mc-sh); } .mcfr-service__top { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px 13px; } .mcfr-service__icon { width: 46px; height: 46px; flex: 0 0 auto; border: 2px solid var(--mc-edge); box-shadow: var(--mc-sh-sm); display: grid; place-items: center; background: var(--mc-bone); color: var(--mc-ink); position: relative; } .mcfr-service__icon svg { width: 26px; height: 26px; display: block; } /* petit liseré d'état en bas/droite de l'icône */ .mcfr-service__icon::after { content:""; position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; background: var(--mcfr-c, var(--mcfr-unknown)); border: 2px solid var(--mc-surface); } .mcfr-service__id { flex: 1 1 auto; min-width: 0; } .mcfr-service__name { font-family: var(--mc-display); font-weight: 700; font-size: 18px; line-height: 1.06; color: var(--mc-ink); margin: 1px 0 0; } .mcfr-service__desc { font-size: 12.5px; line-height: 1.45; color: var(--mc-muted); margin: 5px 0 0; } /* pastille libellée (état) */ .mcfr-service__pill, .mcfr-pill { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-family: var(--mc-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .02em; padding: 5px 10px; border: 2px solid var(--mc-edge); background: var(--mcfr-c-bg); color: var(--mcfr-c-ink); white-space: nowrap; box-shadow: var(--mc-sh-sm); } .mcfr-pill .mcfr-dot { --d: 10px; box-shadow: inset -2px -2px 0 rgba(0,0,0,.22); } /* ligne de métriques : latence + dispo 30 j */ .mcfr-service__metrics { display: flex; gap: 0; border-top: 2px solid var(--mc-line); } .mcfr-metric { flex: 1 1 0; padding: 11px 16px; min-width: 0; } .mcfr-metric + .mcfr-metric { border-left: 2px solid var(--mc-line); } .mcfr-metric .k { font-family: var(--mc-display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-muted); display: block; } .mcfr-metric .v { font-family: var(--mc-display); font-weight: 700; font-size: 21px; line-height: 1.1; color: var(--mc-ink); margin-top: 3px; display: flex; align-items: baseline; gap: 6px; } .mcfr-metric .v .u { font-size: 12px; font-weight: 700; color: var(--mc-muted); } .mcfr-metric .v.is-state { color: var(--mcfr-c-ink); } .mcfr-metric .trend { font-family: var(--mc-sans); font-size: 10.5px; font-weight: 700; color: var(--mc-muted); } .mcfr-metric .trend.up { color: var(--mcfr-down); } .mcfr-metric .trend.dn { color: var(--mcfr-ok); } /* sparkline 24 h */ .mcfr-spark { padding: 12px 16px 6px; border-top: 2px solid var(--mc-line); } .mcfr-spark__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; } .mcfr-spark__head .lb { font-family: var(--mc-display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-muted); } .mcfr-spark__head .rg { font-size: 10.5px; color: var(--mc-muted); } .mcfr-spark__head .rg b { color: var(--mc-ink-2); font-weight: 700; } .mcfr-chart.is-spark { display: block; width: 100%; } .mcfr-chart.is-spark svg { width: 100%; height: 40px; display: block; } /* =========================================================================== 3 · BANDE D'HISTORIQUE 90 JOURS (intégrée à la carte) =========================================================================== */ .mcfr-uptime { padding: 11px 16px 14px; border-top: 2px solid var(--mc-line); } .mcfr-uptime-strip { display: flex; align-items: stretch; gap: 2px; height: 34px; } /* mobile : défilement horizontal */ .mcfr-uptime-strip.is-scroll { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--mc-line-2) transparent; } .mcfr-uptime-cell { position: relative; flex: 1 1 0; min-width: 4px; padding: 0; border: 0; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; font: inherit; } .mcfr-uptime-cell .bar { display: block; width: 100%; height: 100%; background: var(--mcfr-c, var(--mcfr-unknown)); transition: filter .12s ease, transform .12s ease; } [data-state="unknown"].mcfr-uptime-cell .bar { background: repeating-linear-gradient(135deg, var(--mcfr-unknown) 0 2px, transparent 2px 5px), var(--mcfr-unk-bg); } .mcfr-uptime-cell:hover .bar, .mcfr-uptime-cell:focus-visible .bar { filter: brightness(1.12); transform: scaleY(1.08); } .mcfr-uptime-cell:focus-visible { outline: 2px solid var(--mc-tq); outline-offset: 2px; z-index: 4; } /* info-bulle CSS pure */ .mcfr-uptime-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(5px); width: 210px; padding: 11px 12px; background: var(--mcfr-tip-bg); border: 2px solid var(--mc-edge); box-shadow: 4px 4px 0 rgba(0,0,0,.45); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 30; } .mcfr-uptime-cell:hover .mcfr-uptime-tip, .mcfr-uptime-cell:focus-visible .mcfr-uptime-tip, .mcfr-uptime-cell:focus .mcfr-uptime-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* repli près des bords */ .mcfr-uptime-cell[data-edge="start"] .mcfr-uptime-tip { left: -8px; transform: translateY(5px); } .mcfr-uptime-cell[data-edge="start"]:hover .mcfr-uptime-tip, .mcfr-uptime-cell[data-edge="start"]:focus-visible .mcfr-uptime-tip, .mcfr-uptime-cell[data-edge="start"]:focus .mcfr-uptime-tip { transform: translateY(0); } .mcfr-uptime-cell[data-edge="end"] .mcfr-uptime-tip { left: auto; right: -8px; transform: translateY(5px); } .mcfr-uptime-cell[data-edge="end"]:hover .mcfr-uptime-tip, .mcfr-uptime-cell[data-edge="end"]:focus-visible .mcfr-uptime-tip, .mcfr-uptime-cell[data-edge="end"]:focus .mcfr-uptime-tip { transform: translateY(0); } /* flèche */ .mcfr-uptime-tip::after { content:""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--mcfr-tip-bg); } .mcfr-uptime-cell[data-edge="start"] .mcfr-uptime-tip::after { left: 14px; transform: none; } .mcfr-uptime-cell[data-edge="end"] .mcfr-uptime-tip::after { left: auto; right: 14px; transform: none; } .mcfr-uptime-tip__date { display: block; font-family: var(--mc-display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--mcfr-tip-ink); margin-bottom: 6px; } .mcfr-uptime-tip__state { display: flex; align-items: center; gap: 7px; font-size: 11.5px; line-height: 1.35; color: var(--mcfr-tip-ink); } .mcfr-uptime-tip__state .ic { width: 10px; height: 10px; flex: 0 0 auto; background: var(--mcfr-c, var(--mcfr-ok)); box-shadow: inset -2px -2px 0 rgba(0,0,0,.25); } .mcfr-uptime-tip__down { display: block; font-size: 11px; color: var(--mcfr-down); font-weight: 700; margin-top: 6px; } .mcfr-uptime-tip__inc { display: block; font-size: 10.5px; line-height: 1.4; color: var(--mcfr-tip-mut); margin-top: 6px; padding-top: 6px; border-top: 1px dotted rgba(255,255,255,.16); } /* légende sous la bande : 90 jours · % centré · Aujourd'hui */ .mcfr-uptime-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 8px; font-size: 11px; color: var(--mc-muted); } .mcfr-uptime-meta .l { text-align: left; } .mcfr-uptime-meta .r { text-align: right; } .mcfr-uptime-meta .c { text-align: center; font-weight: 700; color: var(--mc-ink-2); } .mcfr-uptime-meta .c b { color: var(--mc-ink); } /* =========================================================================== 4 · GRAPHE DE TEMPS DE RÉPONSE (panneau dédié) =========================================================================== */ .mcfr-metrics-panel { background: var(--mc-surface); border: 2px solid var(--mc-edge); box-shadow: var(--mc-sh); } .mcfr-mp__head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 16px 18px 14px; border-bottom: 2px solid var(--mc-edge); } .mcfr-mp__title { min-width: 0; flex: 1 1 auto; } .mcfr-mp__title .lb { font-family: var(--mc-display); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); display: block; } .mcfr-mp__title .nm { font-family: var(--mc-display); font-weight: 700; font-size: 21px; line-height: 1.06; color: var(--mc-ink); margin-top: 3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mcfr-mp__now { flex: 0 0 auto; text-align: right; } .mcfr-mp__now .v { font-family: var(--mc-display); font-weight: 700; font-size: 40px; line-height: .9; color: var(--mcfr-c-ink, var(--mc-ink)); } .mcfr-mp__now .v .u { font-size: 16px; color: var(--mc-muted); } .mcfr-mp__now .l { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-muted); margin-top: 4px; } /* onglets CSS pur (radio + label) */ .mcfr-mp__radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .mcfr-mp__tabs { display: inline-flex; gap: 0; border: 2px solid var(--mc-edge); box-shadow: var(--mc-sh-sm); margin: 14px 18px 0; } .mcfr-mp__tabs label { font-family: var(--mc-display); font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--mc-ink-2); background: var(--mc-surface); padding: 8px 16px; cursor: pointer; user-select: none; } .mcfr-mp__tabs label + label { border-left: 2px solid var(--mc-edge); } .mcfr-mp__tabs label:hover { background: var(--mc-bone); } .mcfr-mp__views { padding: 12px 18px 18px; position: relative; } .mcfr-mp__view { display: none; } .mcfr-mp__view svg { width: 100%; height: auto; display: block; } /* bascule via :checked — l'ordre des radios doit précéder tabs + views */ #mcfr-rg-day:checked ~ .mcfr-mp__tabs label[for="mcfr-rg-day"], #mcfr-rg-week:checked ~ .mcfr-mp__tabs label[for="mcfr-rg-week"], #mcfr-rg-month:checked ~ .mcfr-mp__tabs label[for="mcfr-rg-month"] { background: var(--mc-tq); color: #06231E; } #mcfr-rg-day:checked ~ .mcfr-mp__views .mcfr-mp__view[data-range="day"], #mcfr-rg-week:checked ~ .mcfr-mp__views .mcfr-mp__view[data-range="week"], #mcfr-rg-month:checked ~ .mcfr-mp__views .mcfr-mp__view[data-range="month"] { display: block; } .mcfr-mp__radio:focus-visible ~ .mcfr-mp__tabs label[for="mcfr-rg-day"], .mcfr-mp__radio:focus-visible ~ .mcfr-mp__tabs { outline: 2px solid var(--mc-tq); outline-offset: 2px; } .mcfr-chart text { font-family: var(--mc-sans); } .mcfr-chart .ax { fill: var(--mc-muted); font-size: 11px; } .mcfr-chart .gl { stroke: var(--mcfr-grid); stroke-width: 1; } .mcfr-chart .area { fill: var(--mcfr-c, var(--mcfr-ok)); opacity: .14; } .mcfr-chart .line { fill: none; stroke: var(--mcfr-c, var(--mcfr-ok)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .mcfr-chart .dot { fill: var(--mc-surface); stroke: var(--mcfr-c, var(--mcfr-ok)); stroke-width: 2.5; } .mcfr-chart .band { fill: var(--mcfr-degraded); opacity: .10; } .mcfr-chart .bandln { stroke: var(--mcfr-degraded); stroke-width: 1.5; stroke-dasharray: 4 4; } .mcfr-chart .bandtx { fill: var(--mcfr-deg-ink); font-size: 10.5px; font-weight: 700; } /* table accessible masquée */ .mcfr-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* =========================================================================== 5 · JOURNAL D'INCIDENTS =========================================================================== */ .mcfr-incidents { background: var(--mc-surface); border: 2px solid var(--mc-edge); box-shadow: var(--mc-sh); } .mcfr-incidents__empty { display: flex; align-items: center; gap: 13px; padding: 22px 20px; } .mcfr-incidents__empty .ic { width: 30px; height: 30px; flex: 0 0 auto; background: var(--mcfr-ok-bg); border: 2px solid var(--mc-edge); display: grid; place-items: center; color: var(--mcfr-ok-ink); } .mcfr-incidents__empty .tx { font-family: var(--mc-sans); } .mcfr-incidents__empty .tx b { display: block; font-family: var(--mc-display); font-weight: 700; font-size: 15px; color: var(--mc-ink); } .mcfr-incidents__empty .tx span { font-size: 12.5px; color: var(--mc-muted); } .mcfr-incident { display: grid; grid-template-columns: 92px 1fr; gap: 0; border-bottom: 2px solid var(--mc-line); } .mcfr-incident:last-child { border-bottom: 0; } .mcfr-incident__date { padding: 16px 14px; border-right: 2px solid var(--mc-line); text-align: center; background: var(--mc-bone); } .mcfr-incident__date .d { font-family: var(--mc-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--mc-ink); } .mcfr-incident__date .m { font-family: var(--mc-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-muted); margin-top: 4px; } .mcfr-incident__date .y { font-size: 11px; color: var(--mc-muted); margin-top: 2px; } .mcfr-incident__body { padding: 14px 16px 15px; min-width: 0; } .mcfr-incident__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .mcfr-incident__hd .ti { font-family: var(--mc-display); font-weight: 700; font-size: 16px; line-height: 1.1; color: var(--mc-ink); margin: 0; flex: 1 1 auto; min-width: 0; } .mcfr-incident__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mc-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border: 2px solid var(--mc-edge); white-space: nowrap; } .mcfr-incident__status.resolved { background: var(--mcfr-ok-bg); color: var(--mcfr-ok-ink); } .mcfr-incident__status.ongoing { background: var(--mcfr-down-bg); color: var(--mcfr-down-ink); } .mcfr-incident__status .mcfr-dot { --d: 9px; } .mcfr-incident__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; } .mcfr-incident__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--mc-ink-2); background: var(--mc-bone); border: 1px solid var(--mc-line-2); padding: 2px 8px; } .mcfr-incident__tag .mcfr-swatch { width: 9px; height: 9px; } .mcfr-incident__tag.dur { color: var(--mc-muted); } .mcfr-incident__log { margin: 0; padding: 0; list-style: none; } .mcfr-incident__log li { position: relative; padding: 0 0 9px 18px; font-size: 13px; line-height: 1.5; color: var(--mc-ink-2); } .mcfr-incident__log li::before { content:""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--mc-tq); } .mcfr-incident__log li:last-child { padding-bottom: 0; } .mcfr-incident__log li b { font-family: var(--mc-display); font-weight: 700; color: var(--mc-ink); font-size: 12px; letter-spacing: .02em; margin-right: 6px; } .mcfr-incident__log li.up::before { background: var(--mcfr-down); } .mcfr-incident__log li.res::before { background: var(--mcfr-ok); } /* =========================================================================== 6 · PIED DE COMPOSANT =========================================================================== */ .mcfr-foot { margin-top: 26px; display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; border: 2px dashed var(--mc-line-2); background: var(--mc-bone); } .mcfr-foot .ic { width: 24px; height: 24px; flex: 0 0 auto; border: 2px solid var(--mc-line-2); display: grid; place-items: center; color: var(--mc-muted); font-family: var(--mc-display); font-weight: 700; } .mcfr-foot p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--mc-muted); } .mcfr-foot p b { color: var(--mc-ink-2); } /* =========================================================================== SWITCH DE THÈME (dans le header du site) =========================================================================== */ .mcfr-theme { display: inline-flex; align-items: center; gap: 0; margin-left: 10px; border: 2px solid var(--mc-dark-line); box-shadow: 3px 3px 0 #000; flex: 0 0 auto; } .mcfr-theme button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mc-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8A968F; background: var(--mc-dark-2); border: 0; padding: 7px 11px; cursor: pointer; } .mcfr-theme button + button { border-left: 2px solid var(--mc-dark-line); } .mcfr-theme button .gl { width: 11px; height: 11px; background: currentColor; box-shadow: inset -3px -3px 0 rgba(0,0,0,.25); } .mcfr-theme button[aria-pressed="true"] { background: var(--mc-tq); color: #06231E; } .mcfr-theme button:hover { color: #EAF1EE; } .mcfr-theme button[aria-pressed="true"]:hover { color: #06231E; } /* =========================================================================== RESPONSIVE — mobile-first (~380 px) ; desktop = 2 colonnes max =========================================================================== */ @media (max-width: 760px) { .mcfr-status { padding: 20px 0 36px; } .mcfr-banner { flex-wrap: wrap; gap: 14px; padding: 18px 18px 18px 22px; } .mcfr-banner__count { padding-left: 0; border-left: 0; border-top: 2px dotted var(--mc-line-2); padding-top: 12px; width: 100%; text-align: left; flex-direction: row; align-items: baseline; gap: 10px; } .mcfr-services { grid-template-columns: 1fr; } .mcfr-mp__head { padding: 14px 16px 12px; } .mcfr-mp__now .v { font-size: 33px; } .mcfr-mp__tabs { margin: 12px 16px 0; } .mcfr-mp__views { padding: 12px 14px 16px; } .mcfr-uptime-tip { width: 180px; } /* défilement horizontal de la bande 90 j sur petit écran */ .mcfr-uptime-strip { overflow-x: auto; overflow-y: visible; padding-top: 60px; margin-top: -60px; } .mcfr-uptime-cell { min-width: 5px; } }