/* --------------------------------------------------------------------- * Variables de contraste — pilotées par la classe posée sur * (voir wa-iro-colors.php : body_class ajoute iro-dark ou iro-light) * Le JS du chart lit --wa-ink / --wa-track directement sur le canvas. * ------------------------------------------------------------------- */ body.iro-light { --wa-ink: #111; --wa-track: rgba(0, 0, 0, 0.1); color: #111; } body.iro-dark { --wa-ink: #fff; --wa-track: rgba(255, 255, 255, 0.1); color: #fff; } .iro-page h1, .iro-page h2, .iro-page h3, .iro-page h4, .iro-page h5, .iro-page h6 { color: inherit !important; } .iro-light .iro-info a { text-decoration: underline dashed; color: #111; } .iro-light .iro-info a:hover { color: rgba(0, 0, 0, 0.3); } .iro-dark .iro-info a { text-decoration: underline dashed; color: #fff; } .iro-dark .iro-info a:hover { color: rgba(255, 255, 255, 0.3); } .chart { margin: 2rem 0; } .chart .chart-list { display: flex; list-style: none; margin: 0; padding: 0; justify-content: center; gap: clamp(1rem, 0.8009rem + 1.0619vw, 2.5rem); } .chart .chart-list li { display: flex; flex-direction: column; align-items: center; flex-basis: 100px; position: relative; text-align: center; font-size: inherit; color: inherit; } .chart .chart-list .title { display: block; position: absolute; top: -2em; width: 100%; text-transform: uppercase; line-height: 2; } .chart .chart-list canvas { display: block; width: 100px; height: 100px; box-sizing: border-box; /* le canvas hérite de --wa-ink / --wa-track depuis body.iro-dark / .iro-light */ color: inherit; } .chart .chart-list .label { font-variant-numeric: tabular-nums; position: absolute; top: 50%; width: 100%; transform: translateY(-50%); letter-spacing: .2em; } @media (max-width: 767px) { .chart .chart-list li { flex-basis: 32%; } .chart .chart-list canvas { width: 72px; height: 72px; } }