La validation des outils de mesure :

[code] :root{ --mx-radius: 16px; --mx-border: #e9e9f2; --mx-text: #1f2937; --mx-muted: #4b5563; --mx-shadow: 0 10px 24px rgba(0,0,0,0.07); } /* Carte / .mx-card{ margin: 18px 0 28px; border: 1px solid var(--mx-border); border-radius: var(--mx-radius); overflow: hidden; background: #fff; box-shadow: var(--mx-shadow); } / Bandeau (couleur spécifique par échelle) / .mx-card__header{ padding: 14px 16px; color: #0f172a; } .mx-card__title{ margin: 0 0 6px 0; font-size: 1.05rem; font-weight: 800; line-height: 1.2; } .mx-card__meta{ margin: 0; font-size: 0.95rem; color: rgba(15, 23, 42, 0.88); line-height: 1.35; } .mx-card__meta strong{ font-weight: 800; } / Tableau / .mx-table{ width: 100%; border-collapse: collapse; background: #fff; } .mx-table th, .mx-table td{ padding: 12px 14px; border-bottom: 1px solid #f0f0f7; vertical-align: top; line-height: 1.4; color: var(--mx-text); } .mx-table thead th{ text-transform: uppercase; font-size: 0.85rem; letter-spacing: .03em; color: var(--mx-muted); background: #fafafe; } .mx-table tbody tr:last-child td{ border-bottom: none; } / Colonne code / .mx-code{ width: 130px; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 800; font-size: 0.95rem; border-right: 1px solid #f1f1f8; } / Zébrage + hover / .mx-table tbody tr:nth-child(odd) td{ background: #ffffff; } .mx-table tbody tr:nth-child(even) td{ background: #fcfcff; } .mx-table tbody tr:hover td{ filter: brightness(0.985); } / Pastille colorée à gauche du code / .mx-code span{ display: inline-flex; align-items: center; gap: 8px; } .mx-dot{ width: 10px; height: 10px; border-radius: 999px; display: inline-block; box-shadow: 0 0 0 3px rgba(255,255,255,0.75); } / Variantes de couleurs (1 par concept) / .mx-confco .mx-card__header{ background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 45%, #ffffff 100%); } .mx-confco .mx-dot{ background: #2563eb; } .mx-confaff .mx-card__header{ background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 45%, #ffffff 100%); } .mx-confaff .mx-dot{ background: #16a34a; } .mx-att .mx-card__header{ background: linear-gradient(135deg, #ffe4e6 0%, #fff1f2 45%, #ffffff 100%); } .mx-att .mx-dot{ background: #e11d48; } .mx-int .mx-card__header{ background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 45%, #ffffff 100%); } .mx-int .mx-dot{ background: #7c3aed; } / Responsive : cartes */ @media (max-width: 720px){ .mx-table thead{ display:none; } .mx-table, .mx-table tbody, .mx-table tr, .mx-table td{ display:block; width:100%; } .mx-table tr{ border-bottom: 1px solid #f0f0f7; } .mx-table tr:last-child{ border-bottom:none; } .mx-table td{ border-bottom:none; } .mx-code{ border-right:none; width:100%; padding-bottom: 4px; } } [/code] [/code] [/code] [/code] [/code]