@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=block');

/* Charte Skill'earn, reprise du site (oklch) */
:root {
  --night: oklch(14% 0.05 290);
  --night-2: oklch(19% 0.05 290);
  --night-rule: oklch(32% 0.07 290);
  --on-night: oklch(96% 0.01 290);
  --on-night-2: oklch(78% 0.04 290);
  --on-night-3: oklch(66% 0.035 290);
  --violet: oklch(72% 0.16 293);
  --holo: oklch(88% 0.15 180);
  --signal: oklch(86% 0.16 172);
  --human: oklch(80% 0.12 85);
  /* déclinaisons foncées pour le blanc (texte > 4,5:1) */
  --ink: oklch(18% 0.06 290);
  --ink-2: oklch(42% 0.04 290);
  --ink-3: oklch(60% 0.03 290);
  --violet-d: oklch(45% 0.19 293);
  --human-d: oklch(50% 0.11 65);
  --machine-d: oklch(47% 0.09 195);
  --rule: oklch(89% 0.02 290);
  --soft: oklch(97.5% 0.01 290);
  --grad: linear-gradient(90deg, #9a67fe, #23a9ff 45%, #00e0df 75%, #00fac2);
  --display: 'Bricolage Grotesque', 'Geist', sans-serif;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--ink); background: #fff; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 7pt; letter-spacing: 0.04em; text-transform: uppercase; color: var(--violet-d); }
.night .label { color: var(--holo); }

/* Pastilles de type : humain, machine, IA */
.t { display: inline-block; width: 1.9mm; height: 1.9mm; border-radius: 50%; margin-right: 1.2mm; vertical-align: 0.1mm; }
.t-h { background: var(--human-d); } .t-m { background: var(--machine-d); } .t-ia { background: var(--violet-d); } .t-sk { background: var(--grad); }
.night .t-h { background: var(--human); } .night .t-m { background: var(--holo); } .night .t-ia { background: var(--violet); }
.legende { font-family: var(--mono); font-size: 6.8pt; color: var(--ink-2); }
.legende span + span { margin-left: 3mm; }

/* Photo avec anneau holo */
.avatar { position: relative; border-radius: 50%; padding: 0.9mm; background: conic-gradient(from 200deg, #9a67fe, #23a9ff, #00e0df, #00fac2, #9a67fe); box-shadow: 0 0 9mm oklch(88% 0.15 180 / 0.28); }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 0.8mm solid var(--night); }

/* Conversation d'ouverture */
.chat { background: var(--night-2); border: 0.5pt solid var(--night-rule); border-radius: 3mm; padding: 3.2mm 4mm; }
.chat .who { font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.04em; color: var(--on-night-3); margin-right: 2mm; }
.chat .q { color: var(--on-night-2); font-size: 9.5pt; }
.chat .a { margin-top: 2mm; font-family: var(--display); font-weight: 600; font-size: 16pt; line-height: 1.15; color: var(--on-night); }
.chat .a .who { color: var(--holo); font-family: var(--mono); font-weight: 400; font-size: 7.5pt; vertical-align: 1.2mm; }
.chat .a2 { margin-top: 1.6mm; font-size: 9pt; line-height: 1.4; color: var(--on-night-2); }
.caret { display: inline-block; width: 0.55em; height: 0.95em; background: var(--holo); vertical-align: -0.12em; margin-left: 0.12em; }

/* Chiffres */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }
.kpis strong { display: block; font-family: var(--display); font-weight: 800; font-size: 25pt; line-height: 1; color: var(--on-night); font-variant-numeric: tabular-nums; }
.kpis span { display: block; margin-top: 1.2mm; font-size: 8pt; line-height: 1.3; color: var(--on-night-2); }

/* Workflows : irritant → intervention → livrable */
.flow { display: grid; grid-template-columns: 1fr 8mm 1.2fr 8mm 1fr; align-items: stretch; }
.node { position: relative; border: 0.6pt solid var(--rule); border-radius: 2.4mm; padding: 2mm 2.6mm 2.2mm; background: #fff; font-size: 8.5pt; line-height: 1.35; }
.node .k { display: block; font-family: var(--mono); font-size: 6.5pt; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.8mm; }
.node h3 { font-size: 10pt; line-height: 1.2; font-weight: 600; }
.node .tools { display: block; margin-top: 0.8mm; font-family: var(--mono); font-size: 7pt; color: var(--ink-2); }
.node.core { border-width: 0.9pt; }
.node.core.h { border-color: var(--human-d); } .node.core.m { border-color: var(--machine-d); } .node.core.ia { border-color: var(--violet-d); }
.node.out { background: var(--soft); }
.node.out .k::before { content: "◆ "; color: var(--violet-d); }
.edge { position: relative; }
.edge::before { content: ""; position: absolute; left: 0.8mm; right: 1.6mm; top: 50%; height: 0.8pt; background: var(--grad); background-size: 200% 100%; }
.edge::after { content: ""; position: absolute; right: 0.6mm; top: calc(50% - 1mm); border: 1mm solid transparent; border-left: 1.4mm solid #00e0df; border-right: 0; }
.edge i { position: absolute; left: 0; top: calc(50% - 0.9mm); width: 1.8mm; height: 1.8mm; border-radius: 50%; background: #fff; border: 0.6pt solid var(--violet-d); }

/* Pile technique en couches */
.stack { display: grid; gap: 1.4mm; }
.layer { display: grid; grid-template-columns: 25mm 1fr; align-items: center; border: 0.6pt solid var(--rule); border-left: 1.2mm solid var(--c); border-radius: 1.6mm; padding: 1.5mm 2.2mm; }
.layer .label { color: var(--ink-2); font-size: 6.5pt; }
.chips { display: flex; flex-wrap: wrap; gap: 1mm; }
.chip { font-family: var(--mono); font-size: 7pt; line-height: 1; padding: 0.9mm 1.5mm; border-radius: 1mm; background: var(--soft); border: 0.5pt solid var(--rule); }

/* Tableau des jurys */
.data { width: 100%; border-collapse: collapse; font-size: 8.3pt; line-height: 1.3; }
.data th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 6.5pt; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); padding: 0 2mm 1mm 0; border-bottom: 0.6pt solid var(--ink); }
.data td { padding: 1.1mm 2mm 1.1mm 0; border-bottom: 0.5pt solid var(--rule); vertical-align: top; }
.data td:last-child { color: var(--ink-2); white-space: nowrap; padding-right: 0; }
.id { font-family: var(--mono); font-size: 7.3pt; font-weight: 500; padding: 0.6mm 1.2mm; border-radius: 0.8mm; background: var(--night); color: var(--holo); white-space: nowrap; }

/* Méthode, le voyage en 4 étapes */
.voyage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; position: relative; padding-top: 4.5mm; }
.voyage::before { content: ""; position: absolute; left: 1.2mm; right: 0; top: 1.3mm; height: 0.9pt; background: var(--grad); }
.voyage > div { position: relative; font-size: 8.3pt; line-height: 1.35; color: var(--ink-2); }
.voyage > div::before { content: ""; position: absolute; left: 0; top: -4.2mm; width: 2.4mm; height: 2.4mm; border-radius: 50%; background: #fff; border: 0.8pt solid var(--violet-d); }
.voyage .label { display: block; }
.voyage b { display: block; color: var(--ink); font-size: 9.3pt; margin: 0.4mm 0 0.5mm; }

/* Cartes portes */
.porte { border: 0.6pt solid var(--rule); border-radius: 2.4mm; padding: 2.6mm 3mm; font-size: 8.3pt; line-height: 1.38; color: var(--ink-2); }
.porte .tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2mm; }
.porte h3 { font-size: 10.5pt; color: var(--ink); }
.porte img { height: 6mm; width: auto; }
.porte .lien { display: block; margin-top: 1mm; font-family: var(--mono); font-size: 7.3pt; color: var(--violet-d); }
.qr { text-align: center; font-family: var(--mono); font-size: 6.5pt; color: var(--ink-2); }
.qr svg { display: block; width: 24mm; height: 24mm; margin: 0 auto 1mm; }