/*
 * Page « Statut des services » — rendu v2 (refonte 01/08/2026).
 *
 * Transposition de la maquette `proposition-statut-services.html`. Toutes les
 * classes sont préfixées `mcfr-` : la maquette utilisait des noms nus (.card,
 * .chart, .tab…) qui entreraient en collision avec le thème Extra.
 *
 * Les tokens --mc-* viennent de mcfr-base.css (couche autonome) ou du thème
 * hôte. Chaque valeur porte un repli pour rester lisible si un token manque.
 */

.mcfr-v2 {
	font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif);
	color: var(--mc-ink, #1E2422);
	--mcfr-rep: var(--mc-rep, #2E7DB0);
	--mcfr-rep-soft: rgba(46, 125, 176, .16);
	--mcfr-axis: var(--mc-axis, #5A6B63);
	--mcfr-gridline: var(--mc-grid, rgba(0, 0, 0, .09));
}

[data-theme="dark"] .mcfr-v2 {
	--mcfr-rep: #4FB0E0;
	--mcfr-rep-soft: rgba(79, 176, 224, .22);
	--mcfr-axis: #8A968F;
	--mcfr-gridline: rgba(255, 255, 255, .08);
}

/* Couleur d'accent et teintes de la gemme, dérivées de l'état — un seul point
   de vérité, et tout suit automatiquement le rafraîchissement live. */
.mcfr-v2 [data-state="ok"]      { --mcfr-c: var(--mc-ok, var(--mcfr-ok, #2FA46E));   --mcfr-gem-l: #6FD49C; --mcfr-gem-d: #2FA46E; }
.mcfr-v2 [data-state="warn"]    { --mcfr-c: var(--mc-warn, var(--mcfr-degraded, #BA7517)); --mcfr-gem-l: #FAC775; --mcfr-gem-d: #BA7517; }
.mcfr-v2 [data-state="down"]    { --mcfr-c: var(--mc-down, var(--mcfr-down, #A32D2D)); --mcfr-gem-l: #F09595; --mcfr-gem-d: #A32D2D; }
.mcfr-v2 [data-state="unknown"] { --mcfr-c: var(--mc-muted, #6B756F); --mcfr-gem-l: #C7CFCB; --mcfr-gem-d: #8A968F; }

/* ─── Carte générique ─────────────────────────────────────────────────── */

.mcfr-v2 .mcfr-card {
	background: var(--mc-surface, #FFFFFF);
	border: 3px solid var(--mc-edge, #1E2422);
	box-shadow: var(--mc-sh, 4px 4px 0 #1E2422);
	margin: 0 0 26px;
}

.mcfr-v2 .mcfr-card__hd {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-bottom: 3px solid var(--mc-edge, #1E2422);
	background: var(--mc-bone, #F4F1EA);
}

.mcfr-v2 .mcfr-card__hd h2 {
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0;
	color: var(--mc-ink, #1E2422);
}

.mcfr-v2 .mcfr-sub { font-size: 12px; color: var(--mc-muted, #6B756F); margin-left: auto; }
.mcfr-v2 .mcfr-card__bd { padding: 18px; }
.mcfr-v2 .mcfr-empty { font-size: 13.5px; color: var(--mc-muted, #6B756F); margin: 0; padding: 6px 0; line-height: 1.5; }

/* ─── 1 · Verdict ─────────────────────────────────────────────────────── */

.mcfr-v2 .mcfr-verdict { border-color: var(--mcfr-c); box-shadow: 4px 4px 0 var(--mcfr-c); }
.mcfr-v2 .mcfr-verdict__top { display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px 18px; }
.mcfr-v2 .mcfr-verdict__gem { flex: 0 0 auto; margin-top: 2px; line-height: 0; }
.mcfr-v2 .mcfr-verdict__txt { flex: 1 1 auto; min-width: 0; }

.mcfr-v2 .mcfr-verdict__title {
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(19px, 3vw, 25px);
	line-height: 1.2;
	margin: 0 0 6px;
	color: var(--mcfr-c);
}

.mcfr-v2 .mcfr-verdict__sub { font-size: 14px; color: var(--mc-ink-2, #3C4742); line-height: 1.5; margin: 0; }
.mcfr-v2 .mcfr-verdict__stamp { font-size: 12px; color: var(--mc-muted, #6B756F); margin: 9px 0 0; line-height: 1.5; }
.mcfr-v2 .mcfr-pulse { width: 7px; height: 7px; background: var(--mcfr-c); display: inline-block; margin-right: 7px; vertical-align: 1px; }

/* Les deux sources */
.mcfr-v2 .mcfr-sources { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--mc-edge, #1E2422); }
.mcfr-v2 .mcfr-src { padding: 14px 18px; display: flex; gap: 11px; align-items: flex-start; }
.mcfr-v2 .mcfr-src + .mcfr-src { border-left: 3px solid var(--mc-edge, #1E2422); }
.mcfr-v2 .mcfr-src__ico { flex: 0 0 auto; margin-top: 1px; line-height: 0; color: var(--mcfr-c); }
.mcfr-v2 .mcfr-src + .mcfr-src .mcfr-src__ico { color: var(--mcfr-rep); }

.mcfr-v2 .mcfr-src__k {
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
	color: var(--mc-muted, #6B756F); margin: 0 0 3px;
}

.mcfr-v2 .mcfr-src__v { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0; }
.mcfr-v2 .mcfr-src__n { font-size: 12px; color: var(--mc-muted, #6B756F); margin: 3px 0 0; line-height: 1.4; }

@media (max-width: 560px) {
	.mcfr-v2 .mcfr-sources { grid-template-columns: 1fr; }
	.mcfr-v2 .mcfr-src + .mcfr-src { border-left: 0; border-top: 3px solid var(--mc-edge, #1E2422); }
}

/* ─── 2 · Signalement ─────────────────────────────────────────────────── */

.mcfr-v2 .mcfr-report2 { border-top: 3px solid var(--mc-edge, #1E2422); background: var(--mc-bone, #F4F1EA); }
.mcfr-v2 .mcfr-report2__hd { padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.mcfr-v2 .mcfr-report2__q {
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	font-weight: 600; font-size: 15px; margin: 0; flex: 1 1 240px;
}

.mcfr-v2 .mcfr-report2__q small {
	display: block;
	font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif);
	font-weight: 400; font-size: 12.5px; color: var(--mc-muted, #6B756F); margin-top: 3px;
}

/* Sélecteur volontairement spécifique : le thème Extra réinitialise <button>. */
.mcfr-v2 .mcfr-report2 .mcfr-btn-report {
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
	background: var(--mc-tq, #1AA995); color: #0F1412;
	border: 3px solid var(--mc-edge, #1E2422);
	box-shadow: var(--mc-sh-sm, 3px 3px 0 #1E2422);
	border-radius: 0;
	padding: 11px 18px; cursor: pointer;
	display: inline-flex; align-items: center; gap: 9px;
	transition: transform .08s, box-shadow .08s;
	line-height: 1.2;
}

.mcfr-v2 .mcfr-report2 .mcfr-btn-report:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--mc-shadow, #1E2422); background: var(--mc-tq, #1AA995); color: #0F1412; }
.mcfr-v2 .mcfr-report2 .mcfr-btn-report:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--mc-shadow, #1E2422); }
.mcfr-v2 .mcfr-report2 .mcfr-btn-report[disabled] { opacity: .55; cursor: default; transform: none; }

/* Le panneau est rendu MASQUÉ par le serveur (attribut hidden) : aucun
   clignotement au chargement. C'est le bouton qui l'ouvre, et un <noscript>
   inline le ré-affiche quand JavaScript est absent. */
.mcfr-v2 .mcfr-report2__panel { padding: 0 18px 18px; border-top: 1px solid var(--mc-line, #E3DFD5); margin: 0; }
.mcfr-v2 .mcfr-report2__panel[hidden] { display: none; }
.mcfr-v2 .mcfr-report2__lead { font-size: 13px; color: var(--mc-ink-2, #3C4742); margin: 14px 0 12px; }

/* Piège à robots : hors flux, invisible, jamais rempli par un humain. */
.mcfr-v2 .mcfr-report2__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.mcfr-v2 .mcfr-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }

.mcfr-v2 .mcfr-choices .mcfr-choice {
	text-align: left;
	background: var(--mc-surface, #FFFFFF);
	border: 2px solid var(--mc-line-2, #CFCABD);
	border-radius: 0;
	padding: 11px 12px; cursor: pointer;
	font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif);
	color: var(--mc-ink, #1E2422);
	display: flex; flex-direction: column; gap: 3px;
	box-shadow: none;
}

.mcfr-v2 .mcfr-choices .mcfr-choice:hover { border-color: var(--mc-tq, #1AA995); box-shadow: 3px 3px 0 var(--mc-tq, #1AA995); background: var(--mc-surface, #FFFFFF); }
.mcfr-v2 .mcfr-choices .mcfr-choice:focus-visible { outline: 2px solid var(--mc-tq, #1AA995); outline-offset: 2px; }
.mcfr-v2 .mcfr-choice b { font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif); font-size: 13.5px; font-weight: 600; }
.mcfr-v2 .mcfr-choice span { font-size: 11.5px; color: var(--mc-muted, #6B756F); line-height: 1.35; }
.mcfr-v2 .mcfr-choice__cnt { font-size: 11px; color: var(--mcfr-rep); font-weight: 600; }
.mcfr-v2 .mcfr-choice__cnt[hidden] { display: none; }

.mcfr-v2 .mcfr-report2__done { display: none; padding: 16px 18px; border-top: 1px solid var(--mc-line, #E3DFD5); gap: 11px; align-items: flex-start; }
.mcfr-v2 .mcfr-report2__done.is-on { display: flex; }
.mcfr-v2 .mcfr-report2__done p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.mcfr-v2 .mcfr-report2__done b { font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif); }

/* ─── 3 · Graphique des signalements ──────────────────────────────────── */

.mcfr-v2 .mcfr-chart2 {
	width: 100%; height: auto; display: block; overflow: visible;
	font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif);
}

.mcfr-v2 .mcfr-gl { stroke: var(--mcfr-gridline); stroke-width: 1; }
.mcfr-v2 .mcfr-ax { fill: var(--mcfr-axis); font-size: 10.5px; }
.mcfr-v2 .mcfr-bar { fill: var(--mcfr-rep); }
.mcfr-v2 .mcfr-bar.is-hot { fill: var(--mc-warn, var(--mcfr-degraded, #BA7517)); }
.mcfr-v2 .mcfr-bar.is-crit { fill: var(--mc-down, var(--mcfr-down, #A32D2D)); }
.mcfr-v2 .mcfr-baseband { fill: var(--mcfr-axis); opacity: .10; }
.mcfr-v2 .mcfr-baseln { stroke: var(--mcfr-axis); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; opacity: .75; }

.mcfr-v2 .mcfr-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; font-size: 12px; color: var(--mc-muted, #6B756F); }
.mcfr-v2 .mcfr-lg { width: 11px; height: 11px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.mcfr-v2 .mcfr-lg--rep { background: var(--mcfr-rep); }
.mcfr-v2 .mcfr-lg--base { background: var(--mcfr-axis); opacity: .25; }
.mcfr-v2 .mcfr-lg--hot { background: var(--mc-warn, var(--mcfr-degraded, #BA7517)); }
.mcfr-v2 .mcfr-lg--crit { background: var(--mc-down, var(--mcfr-down, #A32D2D)); }

/* ─── Graphique de temps de réponse (générateur partagé) ──────────────────
 *
 * Le rendu v2 réutilise MCFR_Status_SVG pour les sparklines et le graphe de
 * latence. Ces éléments portent des classes NON préfixées (.area, .line, .gl…)
 * définies à l'origine dans statut.css, que le v2 ne charge plus : sans les
 * règles ci-dessous, les tracés retombent sur le noir de remplissage par
 * défaut du SVG, et le tableau de données destiné aux lecteurs d'écran
 * s'affiche en clair sur toute la hauteur de la page.
 * ---------------------------------------------------------------------- */

.mcfr-v2 .mcfr-chart { display: block; width: 100%; }
.mcfr-v2 .mcfr-chart svg { width: 100%; height: auto; display: block; }
.mcfr-v2 .mcfr-chart.is-spark svg { height: 40px; }
.mcfr-v2 .mcfr-chart text { font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif); }

.mcfr-v2 .mcfr-chart .ax { fill: var(--mc-muted, #6B756F); font-size: 11px; }
.mcfr-v2 .mcfr-chart .gl { stroke: var(--mcfr-gridline); stroke-width: 1; }
.mcfr-v2 .mcfr-chart .area { fill: var(--mcfr-c, var(--mc-ok, var(--mcfr-ok, #2FA46E))); opacity: .14; }
.mcfr-v2 .mcfr-chart .line { fill: none; stroke: var(--mcfr-c, var(--mc-ok, var(--mcfr-ok, #2FA46E))); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mcfr-v2 .mcfr-chart .dot { fill: var(--mc-surface, #FFFFFF); stroke: var(--mcfr-c, var(--mc-ok, var(--mcfr-ok, #2FA46E))); stroke-width: 2.5; }
.mcfr-v2 .mcfr-chart .band { fill: var(--mc-warn, var(--mcfr-degraded, #BA7517)); opacity: .10; }
.mcfr-v2 .mcfr-chart .bandln { stroke: var(--mc-warn, var(--mcfr-degraded, #BA7517)); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.mcfr-v2 .mcfr-chart .bandtx { fill: var(--mc-warn, var(--mcfr-degraded, #BA7517)); font-size: 10.5px; font-weight: 700; }

.mcfr-v2 .mcfr-chart .mcfr-chart__reports .bar { fill: var(--mcfr-rep); opacity: .85; }
.mcfr-v2 .mcfr-chart .mcfr-chart__reports .bar:hover { opacity: 1; }
.mcfr-v2 .mcfr-chart .mcfr-chart__legend .lg-sw { fill: var(--mcfr-rep); }
.mcfr-v2 .mcfr-chart .mcfr-chart__legend .lg-tx { fill: var(--mc-muted, #6B756F); font-size: 10.5px; }

/* Sparkline de la ligne de service : largeur bornée, sinon elle pousse la
   grille du résumé et écrase le nom du service. */
.mcfr-v2 .mcfr-svc2__spark { width: 110px; }
.mcfr-v2 .mcfr-svc2__spark .mcfr-chart.is-spark svg { height: 30px; }

/* Message « Données insuffisantes » du générateur : sans règle, il retombe sur
   le noir de remplissage par défaut du SVG et disparaît en thème sombre. */
.mcfr-v2 .mcfr-chart__empty { fill: var(--mc-muted, #6B756F); font-size: 13px; }

/* Tableau de données du graphe : réservé aux lecteurs d'écran. */
.mcfr-v2 .mcfr-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ─── 4 · Répartition ─────────────────────────────────────────────────── */

.mcfr-v2 .mcfr-split { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mcfr-v2 .mcfr-split li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 13.5px; }
.mcfr-v2 .mcfr-split li::before { content: none; }
.mcfr-v2 .mcfr-split__lbl { font-weight: 600; }
.mcfr-v2 .mcfr-split__pct { font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif); font-size: 13px; color: var(--mc-muted, #6B756F); font-variant-numeric: tabular-nums; }
.mcfr-v2 .mcfr-split__track { grid-column: 1 / -1; display: block; height: 12px; background: var(--mcfr-rep-soft); border: 1px solid var(--mc-line, #E3DFD5); }
.mcfr-v2 .mcfr-split__fill { display: block; height: 100%; background: var(--mcfr-rep); }

/* ─── 5 · Services ────────────────────────────────────────────────────── */

.mcfr-v2 .mcfr-svc2 { border-top: 1px solid var(--mc-line, #E3DFD5); }
.mcfr-v2 .mcfr-svc2:first-of-type { border-top: 0; }

.mcfr-v2 .mcfr-svc2 > summary {
	list-style: none; cursor: pointer;
	display: grid; grid-template-columns: auto 1fr auto auto;
	gap: 12px; align-items: center; padding: 13px 18px;
}

.mcfr-v2 .mcfr-svc2 > summary::-webkit-details-marker { display: none; }
.mcfr-v2 .mcfr-svc2 > summary::marker { content: ""; }
.mcfr-v2 .mcfr-svc2 > summary:hover { background: var(--mc-bone, #F4F1EA); }
.mcfr-v2 .mcfr-svc2 > summary:focus-visible { outline: 2px solid var(--mc-tq, #1AA995); outline-offset: -2px; }

.mcfr-v2 .mcfr-sq { width: 14px; height: 14px; flex: 0 0 auto; background: var(--mcfr-c); display: block; }
.mcfr-v2 .mcfr-svc2__name { min-width: 0; }
.mcfr-v2 .mcfr-svc2__name b { font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif); font-weight: 600; font-size: 14.5px; display: block; }
.mcfr-v2 .mcfr-svc2__name span { font-size: 12px; color: var(--mc-muted, #6B756F); display: block; line-height: 1.35; margin-top: 2px; }
.mcfr-v2 .mcfr-svc2__spark { flex: 0 0 auto; line-height: 0; }

.mcfr-v2 .mcfr-svc2__num {
	text-align: right;
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.mcfr-v2 .mcfr-svc2__num small {
	display: block;
	font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif);
	font-size: 11px; color: var(--mc-muted, #6B756F); font-weight: 400; letter-spacing: 0;
}

.mcfr-v2 .mcfr-svc2__more { padding: 2px 18px 18px; }
.mcfr-v2 .mcfr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0 0 14px; }
.mcfr-v2 .mcfr-kpi { border: 2px solid var(--mc-line, #E3DFD5); padding: 9px 11px; }
.mcfr-v2 .mcfr-kpi b { display: block; font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif); font-size: 16px; }
.mcfr-v2 .mcfr-kpi span { font-size: 11px; color: var(--mc-muted, #6B756F); text-transform: uppercase; letter-spacing: .06em; }

.mcfr-v2 .mcfr-days { display: flex; gap: 2px; margin: 12px 0 0; }
.mcfr-v2 .mcfr-days i { flex: 1 1 auto; height: 22px; background: var(--mc-ok, var(--mcfr-ok, #2FA46E)); min-width: 2px; }
.mcfr-v2 .mcfr-days i[data-state="warn"] { background: var(--mc-warn, var(--mcfr-degraded, #BA7517)); }
.mcfr-v2 .mcfr-days i[data-state="down"] { background: var(--mc-down, var(--mcfr-down, #A32D2D)); }
.mcfr-v2 .mcfr-days i[data-state="unknown"] { background: repeating-linear-gradient(135deg, var(--mc-muted, #6B756F) 0 2px, transparent 2px 5px), var(--mc-line, #E3DFD5); }
.mcfr-v2 .mcfr-days-lg { display: flex; justify-content: space-between; font-size: 11px; color: var(--mc-muted, #6B756F); margin-top: 5px; }

@media (max-width: 600px) {
	.mcfr-v2 .mcfr-svc2 > summary { grid-template-columns: auto 1fr auto; gap: 9px 10px; padding: 12px 14px; }
	.mcfr-v2 .mcfr-svc2__spark { display: none; }
}

/* ─── 6 · Incidents ───────────────────────────────────────────────────── */

.mcfr-v2 .mcfr-inc { list-style: none; margin: 0; padding: 0; }

.mcfr-v2 .mcfr-inc li {
	display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
	align-items: baseline; padding: 11px 0;
	border-top: 1px solid var(--mc-line, #E3DFD5); font-size: 13.5px;
}

.mcfr-v2 .mcfr-inc li:first-child { border-top: 0; }
.mcfr-v2 .mcfr-inc li::before { content: none; }
.mcfr-v2 .mcfr-inc__d,
.mcfr-v2 .mcfr-inc__dur {
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	font-size: 12px; color: var(--mc-muted, #6B756F); white-space: nowrap; font-variant-numeric: tabular-nums;
}

.mcfr-v2 .mcfr-inc__tag {
	display: inline-block; font-size: 10.5px;
	font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
	text-transform: uppercase; letter-spacing: .06em;
	padding: 1px 6px; margin-left: 7px;
	border: 1px solid var(--mc-line-2, #CFCABD); color: var(--mc-muted, #6B756F);
}

@media (max-width: 520px) {
	.mcfr-v2 .mcfr-inc li { grid-template-columns: 1fr auto; }
	.mcfr-v2 .mcfr-inc__d { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.mcfr-v2 .mcfr-report2 .mcfr-btn-report { transition: none; }
}