/* Charte IA-XIOME : tokens, typographie et composants communs aux artefacts.
   Aucune ressource externe : les polices sont injectees en base64 par Artefact::Charte. */

:root {
  --bg: #F6F5F2; --surface: #FFFFFF; --elevated: #EFEDE8; --line: #D9D6CF; --line-soft: #E6E3DC;
  --ink: #17171A; --ink-2: #4E4E56; --ink-3: #8A8A93;
  --pink: #C13584; --purple: #5851DB; --pink-soft: rgba(193,53,132,.12); --purple-soft: rgba(88,81,219,.12);
  --amber: #B8861B; --amber-soft: rgba(184,134,27,.14); --green: #2E7D58; --green-soft: rgba(46,125,88,.14); --red: #E1306C;
  --s1: #5851DB; --s2: #C13584; --s3: #B8861B; --s4: #2E7D58; --s5: #8A8A93; --s6: #8F8AF0;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0F0F0F; --surface: #1A1A1A; --elevated: #242424; --line: #2E2E2E; --line-soft: #232323;
  --ink: #ECECEC; --ink-2: #A6A6A6; --ink-3: #6E6E6E;
  --pink-soft: rgba(193,53,132,.16); --purple-soft: rgba(88,81,219,.18);
  --amber: #D9A441; --amber-soft: rgba(217,164,65,.14); --green: #4CAF7D; --green-soft: rgba(76,175,125,.14);
  --s1: #8F8AF0; --s2: #D4509A; --s3: #D9A441; --s4: #4CAF7D; --s5: #9A9AA3; --s6: #5851DB;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0 0 .8em; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.logo { height: clamp(48px, 7vh, 84px); width: auto; display: block; margin: 0 0 1.4em; }
.eyebrow { font-family: var(--mono); font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin: 0 0 .6em; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--pink); }
.lead { color: var(--ink-2); font-size: 1.08em; max-width: 58ch; margin: .6em 0 0; }
.body { min-height: 0; }
.measure { max-width: 60ch; }
.mono { font-family: var(--mono); font-size: .82em; }
.small { font-size: .8em; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.src { font-family: var(--mono); font-size: .58em; color: var(--ink-3); margin: 0; }
.brand { position: fixed; top: 1.1em; right: 1.4em; font-family: var(--mono); font-size: .68em; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); z-index: 2; }
.brand b { color: var(--pink); font-weight: 500; }

/* Colonnes */
.cols { display: grid; gap: 3vw; align-items: start; }
.cols > .col { min-width: 0; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cols-5-4 { grid-template-columns: 5fr 4fr; }
.cols-4-5 { grid-template-columns: 4fr 5fr; }
.cols-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) { .cols-2, .cols-3, .cols-5-4, .cols-4-5, .cols-3-2 { grid-template-columns: 1fr; } }
.col { display: grid; gap: 1.1em; align-content: start; }

/* Blocs */
.bloc { min-width: 0; }
.big { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.12; text-wrap: balance; }
.num { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: 1; letter-spacing: -.02em; }

.texte > :first-child { margin-top: 0; }
.texte > :last-child { margin-bottom: 0; }
.texte h3, .texte h4 { font-family: var(--display); font-weight: 400; font-size: 1.45em; margin: 1em 0 .35em; }
.texte h4 { font-size: 1.2em; }
.texte ul, .texte ol { margin: 0 0 .8em; padding-left: 1.2em; }
.texte li { margin: .25em 0; }
.texte strong { font-weight: 600; }
.texte code { font-family: var(--mono); font-size: .88em; background: var(--elevated); border-radius: 4px; padding: .05em .35em; }
.texte pre { font-family: var(--mono); font-size: .82em; background: var(--elevated); border-radius: 8px; padding: .8em 1em; overflow-x: auto; }
.texte pre code { background: none; padding: 0; }
.texte blockquote { margin: 0 0 .8em; padding-left: 1em; border-left: 3px solid var(--line); color: var(--ink-2); }
.texte hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.texte table { border-collapse: collapse; font-size: .9em; margin: 0 0 .8em; }
.texte th, .texte td { border-bottom: 1px solid var(--line-soft); padding: .35em .8em .35em 0; text-align: left; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1em 1.3em; }
.panel.accent { border-color: transparent; background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft)); }
.panel h3 { font-family: var(--display); font-weight: 400; font-size: 1.45em; margin: 0 0 .35em; }
.panel .texte { font-size: .92em; }

.puces h3 { font-family: var(--display); font-weight: 400; font-size: 1.45em; margin: 0 0 .4em; }
.puces ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.puces li { position: relative; padding-left: 1.3em; }
.puces li::before { content: ""; position: absolute; left: .1em; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple)); }
.puces p { margin: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); gap: 1em; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1em 1.1em; min-width: 0; }
.kpi .num { font-size: clamp(2rem, 3.6vw, 3.6rem); overflow-wrap: anywhere; }
.kpi .lab { color: var(--ink-2); font-size: .85em; margin-top: .25em; }
.kpi .var { display: inline-flex; align-items: center; gap: .3em; margin-top: .55em; font-family: var(--mono); font-size: .74em; padding: .1em .6em; border-radius: 999px; background: var(--elevated); color: var(--ink-2); }
.kpi .var.favorable { background: var(--green-soft); color: var(--green); }
.kpi .var.defavorable { background: var(--amber-soft); color: var(--amber); }

.tag { display: inline-block; padding: .08em .6em; border-radius: 999px; font-size: .75em; font-weight: 500; letter-spacing: .02em; }
.tag.pink { background: var(--pink-soft); color: var(--pink); }
.tag.purple { background: var(--purple-soft); color: var(--purple); }
.tag.green { background: var(--green-soft); color: var(--green); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
:root[data-theme="dark"] .tag.purple { color: #8F8AF0; }

.citation { margin: 0; padding: .2em 0 .2em 1.3em; border-left: 3px solid transparent; border-image: linear-gradient(to bottom, var(--pink), var(--purple)) 1; }
.citation p { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.15; text-wrap: balance; margin: 0; }
.citation footer { font-family: var(--mono); font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: .8em; }

/* Tableau */
.carte { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1em 1.2em; margin: 0; }
.carte .c-titre { font-weight: 600; font-size: .95em; margin: 0 0 .6em; }
.carte .c-note { font-size: .78em; color: var(--ink-3); margin: .7em 0 0; }
.tableau-zone { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .88em; font-variant-numeric: tabular-nums; }
.tableau th { font-weight: 600; font-size: .86em; color: var(--ink-2); text-align: left; padding: .45em .9em .45em 0; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.tableau td { padding: .45em .9em .45em 0; border-bottom: 1px solid var(--line-soft); }
.tableau th:last-child, .tableau td:last-child { padding-right: 0; }
.tableau .droite { text-align: right; }
.tableau .centre { text-align: center; }
.tableau .gauche { text-align: left; }
.tableau tfoot td { font-weight: 600; border-top: 1.5px solid var(--ink); border-bottom: 0; }
.tableau tbody tr:last-child td { border-bottom: 1px solid var(--line-soft); }

/* Graphiques */
.serie-1 { --c: var(--s1); } .serie-2 { --c: var(--s2); } .serie-3 { --c: var(--s3); }
.serie-4 { --c: var(--s4); } .serie-5 { --c: var(--s5); } .serie-6 { --c: var(--s6); }
.serie-7 { --c: color-mix(in srgb, var(--s1) 55%, var(--surface)); }
.serie-8 { --c: color-mix(in srgb, var(--s2) 55%, var(--surface)); }
.serie-9 { --c: color-mix(in srgb, var(--s3) 55%, var(--surface)); }
.serie-10 { --c: color-mix(in srgb, var(--s4) 55%, var(--surface)); }
.positif { --c: var(--green); } .negatif { --c: var(--red); } .total { --c: var(--s1); }

.graphique { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1em 1.2em .9em; margin: 0; }
.graphique .g-titre { font-weight: 600; font-size: .95em; margin: 0 0 .6em; }
.g-zone { overflow-x: auto; }
.g-svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.g-zone .g-svg:not(.g-donut) { min-width: 30em; }
.g-svg text { fill: var(--ink-2); font-family: var(--mono); font-size: 11px; }
.g-svg .tick { text-anchor: end; }
.g-svg .cat { text-anchor: middle; }
.g-svg .val { text-anchor: middle; fill: var(--ink); font-weight: 500; }
.g-svg .grille { stroke: var(--line-soft); stroke-width: 1; }
.g-svg .grille.zero { stroke: var(--line); }
.g-svg .grille.zero.fort { stroke: var(--ink-2); stroke-width: 1.5; }
.g-svg .vide { text-anchor: middle; font-family: var(--body); font-size: 14px; fill: var(--ink-3); }
.g-svg .barre { fill: var(--c); }
.g-svg .barre:hover, .g-svg .part:hover { opacity: .82; }
.g-svg .seg { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.g-svg .part { fill: var(--c); stroke: var(--surface); stroke-width: 2; fill-rule: evenodd; }
.g-svg .courbe { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-svg .aire { fill: var(--c); opacity: .12; stroke: none; }
.g-svg .pt .hit { fill: transparent; }
.g-svg .pt .dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.g-svg .pt .dot.cache { opacity: 0; }
.g-svg .pt:hover .dot.cache { opacity: 1; }
.g-svg .liaison { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.g-svg .donut-total { font-family: var(--display); font-size: 30px; fill: var(--ink); text-anchor: middle; }
.g-svg .donut-total.long { font-size: 22px; }
.g-svg .donut-sous { text-anchor: middle; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; fill: var(--ink-3); }
.g-donut-zone > * { min-width: 0; }
.g-donut-zone { display: grid; grid-template-columns: 14em 1fr; gap: 1.4em; align-items: center; }
.g-donut-zone .g-svg { max-width: 14em; }
@media (max-width: 600px) { .g-donut-zone { grid-template-columns: 1fr; justify-items: center; } }
.legende { display: flex; flex-wrap: wrap; gap: .4em 1.3em; margin: .8em 0 0; padding: 0; list-style: none; font-size: .8em; color: var(--ink-2); }
.legende li { display: flex; align-items: center; gap: .5em; }
.legende .sw { flex: none; width: .8em; height: .8em; border-radius: 3px; background: var(--c); }
.legende.vertical { flex-direction: column; flex-wrap: nowrap; margin: 0; gap: .5em; font-size: .88em; }
.legende.vertical li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .5em; border-bottom: 1px solid var(--line-soft); padding-bottom: .4em; }
.legende.vertical .sw { align-self: center; }
.legende.vertical .detail { margin-left: auto; }
.graphique .g-note { font-size: .78em; color: var(--ink-3); margin: .7em 0 0; }
details.donnees { margin-top: .8em; font-size: .8em; }
details.donnees summary { cursor: pointer; font-family: var(--mono); font-size: .86em; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
details.donnees summary:hover { color: var(--ink); }
details.donnees .tableau-zone { margin-top: .6em; }
details.donnees .tableau { font-size: 1em; }

/* Pied */
.pied { font-family: var(--mono); font-size: .62em; line-height: 1.6; color: var(--ink-3); margin: 0; }
.pied span { white-space: nowrap; }

/* Impression : toujours les tokens clairs, quel que soit le theme choisi */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #FFFFFF; --surface: #FFFFFF; --elevated: #EFEDE8; --line: #D9D6CF; --line-soft: #E6E3DC;
    --ink: #17171A; --ink-2: #4E4E56; --ink-3: #6B6B73;
    --pink-soft: rgba(193,53,132,.12); --purple-soft: rgba(88,81,219,.12);
    --amber: #B8861B; --amber-soft: rgba(184,134,27,.14); --green: #2E7D58; --green-soft: rgba(46,125,88,.14);
    --s1: #5851DB; --s2: #C13584; --s3: #B8861B; --s4: #2E7D58; --s5: #8A8A93; --s6: #8F8AF0;
    color-scheme: light;
  }
  :root[data-theme="dark"] .tag.purple { color: var(--purple); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .g-zone, .tableau-zone { overflow: visible; }
}