/* identifiable · data viz · v2
   Couche additive au système de design : tokens et primitives pour
   l'infographie éditoriale du cabinet.

   Le système suit cinq principes tirés d'un audit des référentiels de
   Pentagram (IBM Data Visualization Guidelines, Deloitte Insights) :
   1. la charte est un système (gabarits + règles), pas une image ;
   2. un seul élément est doctrinal : le vert menthe au verdict ;
   3. trois registres typographiques séparés par fonction : Schibsted
      au titre, Hanken au corps et à la note, Spline Sans Mono au chiffre ;
   4. la trame est visible et idéologique : le bordereau d'évaluation
      (l'analogue identifiable du grand livre de Deloitte et de la carte
      perforée d'IBM) ;
   5. le mouvement sert la compréhension : révélation en ordre de lecture
      (règles, axes, marques, puis note), jamais décorative.

   Charger après identifiable.css. */

:root{
  /* gamme séquentielle pétrole : six paliers, du clair au foncé.
     Cool et neutre (jamais teintée de chaud) : c'est l'encre du système. */
  --dv-seq-1:#D3DAD8; --dv-seq-2:#AEBAB9; --dv-seq-3:#869695;
  --dv-seq-4:#5D7377; --dv-seq-5:#33545C; --dv-seq-6:#09333F;
  /* gamme catégorielle : tints froids de l'encre, pas de couleur décorative.
     Le vert reste réservé au verdict ; aucune teinte chaude. */
  --dv-cat-1:#09333F; --dv-cat-2:#5B7480; --dv-cat-3:#94A9AE;
  --dv-cat-4:#33545C; --dv-cat-5:#C7CFCC; --dv-cat-6:#26F7B2;
  /* gamme divergente : bas (alerte) / pivot (neutre) / haut (verdict) */
  --dv-div-low:#C2483B; --dv-div-mid:#AEBAB9; --dv-div-high:#26F7B2;
  /* signal d'alerte : la seule teinte chaude sémantique du registre encre
     (sous le plancher, interdit). Jamais décorative. */
  --dv-alert:#C2483B;
  /* palette catégorielle étendue : quand une variable a des catégories,
     elles reçoivent une palette dédiée, large et accessible (registre IBM
     Data Viz). La couleur encode, elle ne décore pas. Ancrée sur le
     pétrole, en tons joaillerie harmonisés ; le vert menthe et le rouge
     d'alerte en sont exclus (réservés aux signaux). */
  --dv-c1:#09333F; /* pétrole   */ --dv-c2:#0E7C84; /* sarcelle  */
  --dv-c3:#3E91C7; /* ciel      */ --dv-c4:#3F4E9D; /* indigo    */
  --dv-c5:#7E4A86; /* prune     */ --dv-c6:#C25C84; /* rose      */
  --dv-c7:#D7A02E; /* ambre     */ --dv-c8:#5E8C5A; /* sauge     */
  /* déclinaisons claires pour fonds clairs / surbrillances douces */
  --dv-c1-soft:#9FB0B4; --dv-c2-soft:#7FC0C4; --dv-c3-soft:#A9D2E8;
  --dv-c4-soft:#A9AFD6; --dv-c5-soft:#C9A9CE; --dv-c6-soft:#E6B6C9;
  --dv-c7-soft:#E8D199; --dv-c8-soft:#B5CDB2;
  /* axes et grille */
  --dv-axis:#C0C7C4; --dv-axis-dark:#2F515A;
  --dv-grid:#E2E2DC; --dv-grid-dark:#1E4A55;
  /* annotation : la couleur de l'œil qui guide, jamais le verdict */
  --dv-annot:#5B7480; --dv-annot-on-dark:#94A9AE;
  --dv-threshold:#26F7B2; --dv-threshold-on-light:#0A6354;
  /* surface de figure */
  --dv-surface:#FFFFFF; --dv-surface-soft:#FBF8F0;
  --dv-surface-dark:#09333F; --dv-surface-deep:#06262F;
  /* registre clair : la feuille de rapport réglée */
  --dv-report-bg:#F4F1E9; --dv-report-rule:rgba(9,51,63,.055);
  --dv-report-ink:#09333F; --dv-report-muted:#9BA9A8;
}

/* ── Anatomie d'une figure ──────────────────────────────────────── */
/* Une figure se lit verticalement : sourcille, titre, sous-titre,
   la carte, l'axe, la légende, la note de source. Aucun pas n'est
   facultatif. */
.dv-figure{
  background:var(--dv-surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,32px);
  display:flex; flex-direction:column; gap:18px;
}
.dv-figure.is-dark{background:var(--dv-surface-dark);color:var(--id-text-on-dark);border-color:var(--id-petrol-600)}
.dv-figure.is-soft{background:var(--dv-surface-soft);border-color:#E5DFCE}
.dv-figure.is-bone{background:var(--id-bone);border-color:#D8D3C7}

.dv-head{display:flex;flex-direction:column;gap:6px}
.dv-eyebrow{
  font-family:var(--id-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dv-annot);
}
.is-dark .dv-eyebrow{color:var(--dv-annot-on-dark)}
.dv-title{
  font-family:var(--id-disp);font-weight:700;font-size:clamp(18px,1.9vw,22px);
  line-height:1.2;letter-spacing:-.01em;
}
.dv-sub{font-size:14px;line-height:1.5;color:var(--id-text-secondary);max-width:62ch}
.is-dark .dv-sub{color:var(--id-petrol-200)}

.dv-canvas{
  position:relative;
  width:100%;
}
.dv-canvas svg{width:100%;height:auto;display:block}

.dv-legend{
  display:flex;flex-wrap:wrap;gap:14px 22px;
  font-family:var(--id-mono);font-size:11px;letter-spacing:.06em;
  color:var(--id-text-secondary);
}
.is-dark .dv-legend{color:var(--id-petrol-200)}
.dv-legend .key{display:inline-flex;align-items:center;gap:8px}
.dv-legend .swatch{
  width:14px;height:6px;border-radius:2px;background:var(--dv-cat-1);
  display:inline-block;flex:none;
}
.dv-legend .swatch.dot{width:9px;height:9px;border-radius:50%}
.dv-legend .swatch.line{height:0;border-top:2px dashed var(--dv-threshold);background:transparent}

.dv-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  border-top:1px solid var(--line);padding-top:12px;
  font-family:var(--id-mono);font-size:11px;letter-spacing:.08em;
  color:var(--id-text-secondary);
}
.is-dark .dv-foot{border-color:var(--id-petrol-600);color:var(--dv-annot-on-dark)}
.dv-foot .source{max-width:60ch}
.dv-foot .mark{display:inline-flex;align-items:center;gap:6px;color:var(--id-petrol)}
.is-dark .dv-foot .mark{color:var(--id-bone)}
.dv-foot .mark::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--id-green-vivid);
}

/* ── SVG : règles partagées ─────────────────────────────────────── */
.dv-svg{font-family:var(--id-mono)}
.dv-svg .axis{stroke:var(--dv-axis);stroke-width:1}
.dv-svg .axis-dark{stroke:var(--dv-axis-dark)}
.dv-svg .grid{stroke:var(--dv-grid);stroke-width:1}
.dv-svg .grid-dark{stroke:var(--dv-grid-dark)}
.dv-svg .tick{
  font-family:var(--id-mono);font-size:10.5px;font-weight:500;
  fill:var(--id-text-secondary);letter-spacing:.04em;
}
.dv-svg .tick-dark{fill:var(--dv-annot-on-dark)}
.dv-svg .label{
  font-family:var(--id-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;fill:var(--id-text-secondary);
}
.dv-svg .label-dark{fill:var(--dv-annot-on-dark)}
.dv-svg .value{
  font-family:var(--id-mono);font-size:12px;font-weight:500;
  fill:var(--id-text-primary);
}
.dv-svg .value-dark{fill:var(--id-bone)}
.dv-svg .callout{
  font-family:var(--id-text);font-size:12.5px;line-height:1.4;
  fill:var(--id-text-primary);font-weight:500;
}
.dv-svg .callout-dark{fill:var(--id-bone)}
.dv-svg .annot-line{stroke:var(--dv-annot);stroke-width:1;fill:none;stroke-dasharray:3 3}
.dv-svg .annot-line-dark{stroke:var(--dv-annot-on-dark)}
.dv-svg .threshold{stroke:var(--dv-threshold);stroke-width:1.5;fill:none;stroke-dasharray:5 4}

/* ── Les deux voix de l'annotation ──────────────────────────────── */
/* La machine parle en mono (.label, .value, .tick) : étiquettes, cotes,
   axes. L'analyste parle en Hanken (.note) : la lecture humaine du
   graphique, la phrase qui dit où regarder. Les deux voix ne partagent
   jamais la même chasse. C'est le pendant de la voix manuscrite de
   Deloitte, transposé dans une typographie de marque. */
.dv-svg .note{
  font-family:var(--id-text);font-size:13px;line-height:1.35;
  font-weight:500;fill:var(--id-petrol);
}
.dv-svg .note-dark{fill:var(--id-bone)}
.dv-svg .note-sub{
  font-family:var(--id-mono);font-size:10.5px;letter-spacing:.06em;
  fill:var(--dv-annot);
}
.dv-svg .note-sub-dark{fill:var(--dv-annot-on-dark)}
.dv-svg .note-lead{stroke:var(--dv-annot);stroke-width:1;fill:none}
.dv-svg .note-lead-dark{stroke:var(--dv-annot-on-dark)}
.dv-svg .note-dot{fill:var(--dv-annot)}
.dv-svg .note-dot-dark{fill:var(--dv-annot-on-dark)}

/* ── La trame doctrinale : le bordereau d'évaluation ────────────── */
/* La règle réglée du graphique : des lignes de cote horizontales, façon
   feuille de notation, sur lesquelles les marques se posent. La trame est
   l'analogue identifiable du grand livre (Deloitte) et de la carte
   perforée (IBM) : tout ce que le cabinet montre se mesure sur un
   bordereau. */
.dv-svg .rule{stroke:var(--dv-grid);stroke-width:1}
.dv-svg .rule-dark{stroke:var(--dv-grid-dark)}
.dv-svg .rule-strong{stroke:var(--id-petrol);stroke-width:1.5}
.dv-svg .rule-strong-dark{stroke:var(--id-petrol-400)}
.dv-svg .gutter{
  font-family:var(--id-mono);font-size:10px;font-weight:500;
  fill:var(--dv-annot);letter-spacing:.04em;
}
.dv-svg .gutter-dark{fill:var(--dv-annot-on-dark)}

/* primitives de remplissage */
.dv-svg .seq-1{fill:var(--dv-seq-1)} .dv-svg .seq-2{fill:var(--dv-seq-2)}
.dv-svg .seq-3{fill:var(--dv-seq-3)} .dv-svg .seq-4{fill:var(--dv-seq-4)}
.dv-svg .seq-5{fill:var(--dv-seq-5)} .dv-svg .seq-6{fill:var(--dv-seq-6)}
.dv-svg .cat-1{fill:var(--dv-cat-1)} .dv-svg .cat-2{fill:var(--dv-cat-2)}
.dv-svg .cat-3{fill:var(--dv-cat-3)} .dv-svg .cat-4{fill:var(--dv-cat-4)}
.dv-svg .cat-5{fill:var(--dv-cat-5)} .dv-svg .cat-6{fill:var(--dv-cat-6)}
.dv-svg .verdict{fill:var(--id-green)}
.dv-svg .verdict-stroke{stroke:var(--id-green);fill:none}
.dv-svg .alert{fill:var(--dv-alert)}
.dv-svg .alert-stroke{stroke:var(--dv-alert);fill:none}
.dv-svg .bone{fill:var(--id-bone)}
/* palette catégorielle étendue : fills + strokes */
.dv-svg .c1{fill:var(--dv-c1)} .dv-svg .c2{fill:var(--dv-c2)}
.dv-svg .c3{fill:var(--dv-c3)} .dv-svg .c4{fill:var(--dv-c4)}
.dv-svg .c5{fill:var(--dv-c5)} .dv-svg .c6{fill:var(--dv-c6)}
.dv-svg .c7{fill:var(--dv-c7)} .dv-svg .c8{fill:var(--dv-c8)}
.dv-svg .s1{stroke:var(--dv-c1);fill:none} .dv-svg .s2{stroke:var(--dv-c2);fill:none}
.dv-svg .s3{stroke:var(--dv-c3);fill:none} .dv-svg .s4{stroke:var(--dv-c4);fill:none}
.dv-svg .s5{stroke:var(--dv-c5);fill:none} .dv-svg .s6{stroke:var(--dv-c6);fill:none}
.dv-svg .s7{stroke:var(--dv-c7);fill:none} .dv-svg .s8{stroke:var(--dv-c8);fill:none}

/* texture éditoriale : trame de points pétrole, motif additif */
.dv-svg .dot-grid{fill:var(--id-petrol);opacity:.10}
.dv-svg .dot-grid-light{fill:var(--id-bone);opacity:.14}

/* ── Composition éditoriale : la planche illustration ───────────── */
/* Inspirée du registre Deloitte Insights : une seule métaphore par
   surface, formes plates, deux couleurs plus un accent rare. */
.dv-board{
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:16/9;
  display:block;
  position:relative;
}
.dv-board svg{width:100%;height:100%;display:block}
.dv-board.is-square{aspect-ratio:1}

/* ── Grille de figures dans un article ──────────────────────────── */
.dv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.dv-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:860px){
  .dv-grid-2,.dv-grid-3{grid-template-columns:1fr}
}

/* ── Carte d'exemple (la planche d'un référentiel) ──────────────── */
.dv-card{
  background:var(--id-white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s3);
  display:flex;flex-direction:column;gap:14px;
}
.dv-card .name{
  font-family:var(--id-disp);font-weight:700;font-size:17px;
  line-height:1.2;letter-spacing:-.005em;
}
.dv-card .role{font-size:13.5px;line-height:1.5;color:var(--id-text-secondary)}
.dv-card .ratio-16-9{aspect-ratio:16/9}
.dv-card .ratio-1-1{aspect-ratio:1}
.dv-card .ratio-3-2{aspect-ratio:3/2}
.dv-card svg{width:100%;height:100%;display:block;border-radius:10px}

/* ── Le cadre bordereau (figure doctrinale) ─────────────────────── */
/* La figure se présente comme une feuille de notation : en-tête séparé
   par un double filet, code de formulaire en mono, pied signé. Le cadre
   porte la même idée que la trame réglée du graphique : c'est un
   bordereau, pas une affiche. */
.dv-figure.is-ledger{padding:0;gap:0;overflow:hidden}
.dv-figure.is-ledger .dv-head{
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px) 16px;
  border-bottom:2px solid var(--id-petrol);
  position:relative;
}
.dv-figure.is-ledger.is-dark .dv-head{border-bottom-color:var(--id-petrol-400)}
.dv-figure.is-ledger .dv-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--id-petrol);
}
.dv-figure.is-ledger.is-dark .dv-head::after{background:var(--id-petrol-400)}
.dv-figure.is-ledger .dv-canvas{padding:clamp(18px,2.2vw,28px) clamp(20px,2.4vw,32px) 4px}
.dv-figure.is-ledger .dv-legend{padding:0 clamp(20px,2.4vw,32px) 16px}
.dv-figure.is-ledger .dv-foot{margin:0 clamp(20px,2.4vw,32px) clamp(20px,2.4vw,30px)}
/* code de formulaire : la cote du bordereau, en vert texte (verdict) */
.dv-form-code{
  font-family:var(--id-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--id-green-text);
}
.is-dark .dv-form-code{color:var(--id-green)}

/* ── Le registre clair : la feuille de rapport ──────────────────── */
/* Les référentiels Deloitte Insights et IBM posent leur infographie de
   rapport sur une feuille claire réglée, encre sombre, un seul accent.
   Le registre clair d'identifiable suit la même logique : fond bone,
   lignes réglées discrètes, encre pétrole, vert au verdict. Le registre
   sombre (pétrole) reste pour les ruptures de section et les héros ; le
   clair est le format de travail, plus lisible pour les graphiques denses. */
.dv-ruled{
  background-color:var(--dv-report-bg);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent 13px,
    var(--dv-report-rule) 13px, var(--dv-report-rule) 14px);
}
.dv-figure.is-report{
  background-color:var(--dv-report-bg);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent 13px,
    var(--dv-report-rule) 13px, var(--dv-report-rule) 14px);
  border-color:#D8D3C7;color:var(--dv-report-ink);
}
.dv-figure.is-report .dv-sub{color:var(--id-text-secondary)}
.dv-figure.is-report.is-ledger .dv-head{border-bottom-color:var(--id-petrol)}
.dv-figure.is-report.is-ledger .dv-head::after{background:var(--id-petrol)}
.dv-figure.is-report .dv-foot{border-top-color:#D8D3C7}

/* le chapeau italique (standfirst) : la voix éditoriale, registre Deloitte,
   transposée dans la typo de marque (Hanken italique, pas de serif) */
.dv-dek{
  font-family:var(--id-text);font-style:italic;font-size:15px;line-height:1.45;
  color:var(--id-text-secondary);max-width:54ch;
}

/* axe de référence nommé : Goal, Moyenne, Plancher (le seuil qui parle) */
.dv-svg .ref-line{stroke:var(--id-petrol);stroke-width:1}
.dv-svg .ref-dotted{stroke:var(--id-petrol);stroke-width:1;stroke-dasharray:2 3;fill:none}
.dv-svg .ref-label{font-family:var(--id-disp);font-weight:700;font-size:12px;fill:var(--id-petrol)}

/* primitives supplémentaires (issues de l'audit des référentiels) */
.dv-svg .bubble-a{fill:var(--id-petrol)}                 /* série de référence */
.dv-svg .bubble-b{fill:var(--dv-report-muted)}           /* série de comparaison */
.dv-svg .dumbbell{stroke:var(--id-slate);stroke-width:2} /* la tige de l'haltère */
.dv-svg .cell-on{fill:var(--id-petrol)}                  /* matrice : atteint */
.dv-svg .cell-off{fill:none;stroke:var(--id-slate);stroke-width:1.2} /* matrice : non atteint */
.dv-svg .waffle-on{fill:var(--id-green)}                 /* part au verdict */
.dv-svg .waffle-mid{fill:var(--id-slate)}                /* part en route */
.dv-svg .waffle-low{fill:var(--dv-div-low)}              /* part sous le plancher */

/* ── Animation : révélation en ordre de lecture ─────────────────── */
/* Le mouvement enseigne la lecture, il ne décore pas. La règle entre,
   puis l'axe, puis les marques (en cascade), puis la note arrive en
   dernier : on lit le graphique avant de l'annoter. Déclenché au
   défilement par .reveal.in (assets/identifiable.js). */
.dv-draw{stroke-dasharray:1200;stroke-dashoffset:1200}
@media(prefers-reduced-motion:no-preference){
  .reveal.in .dv-draw{animation:dv-draw 1.6s var(--id-ease) .5s forwards}
  /* étapes de lecture : règle → axe → marque → note */
  .dv-stage .r-rule,.dv-stage .r-axis,.dv-stage .r-mark,.dv-stage .r-note{opacity:0}
  .reveal.in .dv-stage .r-rule{animation:dv-fade .45s var(--id-ease) forwards}
  .reveal.in .dv-stage .r-axis{animation:dv-fade .45s var(--id-ease) .3s forwards}
  .reveal.in .dv-stage .r-mark{animation:dv-rise .5s var(--id-ease) forwards}
  .reveal.in .dv-stage .r-mark.d1{animation-delay:.7s}
  .reveal.in .dv-stage .r-mark.d2{animation-delay:.8s}
  .reveal.in .dv-stage .r-mark.d3{animation-delay:.9s}
  .reveal.in .dv-stage .r-mark.d4{animation-delay:1s}
  .reveal.in .dv-stage .r-mark.d5{animation-delay:1.1s}
  .reveal.in .dv-stage .r-mark.d6{animation-delay:1.2s}
  .reveal.in .dv-stage .r-note{animation:dv-fade .6s var(--id-ease) 1.5s forwards}
}
@media(prefers-reduced-motion:reduce){
  .dv-draw{stroke-dashoffset:0}
}
@keyframes dv-draw{to{stroke-dashoffset:0}}
@keyframes dv-fade{to{opacity:1}}
@keyframes dv-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.dv-stage .r-mark{transform-box:fill-box;transform-origin:center}

/* ── Échelle de bandes (réutilisable) ───────────────────────────── */
.dv-scale{position:relative;padding:32px 0 48px;width:100%}
.dv-scale .track{position:relative;display:flex;height:48px;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.dv-scale .band{display:flex;align-items:center;justify-content:center;font-family:var(--id-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--id-bone);padding:0 6px;text-align:center}
/* échelle de posture : rampe séquentielle froide, du clair au pétrole.
   Pas d'alerte ni de chaud ; le repère vert (la broche) porte le seuil. */
.dv-scale .band.b1{background:var(--dv-seq-2);color:#1B2B2E}
.dv-scale .band.b2{background:var(--dv-seq-3);color:#13212A}
.dv-scale .band.b3{background:var(--dv-seq-4);color:var(--id-bone)}
.dv-scale .band.b4{background:var(--id-petrol-800);color:var(--id-bone)}
.dv-scale .marks{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--id-mono);font-size:10.5px;letter-spacing:.08em;color:var(--id-text-secondary);text-transform:uppercase}
.dv-scale .pin{position:absolute;top:24px;height:64px;width:2px;background:var(--id-green-vivid);z-index:2}
.dv-scale .pin .lbl{position:absolute;top:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--id-mono);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--id-green-text)}
.dv-scale .pin .ind{position:absolute;top:90px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--id-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--id-green-text)}