/* dr-systeme.css · tokens et utilitaires du design system Diag Reprise.
   Généré par concaténation des tokens livrés par Claude Design (v2 du 06/08/2026),
   dans l'ordre de leur styles.css. Fichier partagé par accueil.html et
   rapport-v2.html : une seule source de vérité visuelle dans le repo. */

/* ---- tokens/fonts.css ---- */
/* Polices Diag Reprise.
   Libre Franklin    : display, titres de chapitre, logotype.
   Instrument Sans     : corps, interface, libellés.
   IBM Plex Sans       : données chiffrées (tabular figures irréprochables).
   Hébergement actuel : Google Fonts. Pour un self host, remplacer cet
   @import par des @font-face pointant des .woff2 dans assets/fonts/. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap");

/* ---- tokens/colors.css ---- */
:root{
  /* Marine, la couleur d'autorité */
  --dr-marine-900:#071630;
  --dr-marine-800:#0E2249;
  --dr-marine-700:#16305F;
  --dr-marine-600:#24437C;

  /* Bleu électrique, l'accent produit */
  --dr-bleu:#2B59FF;
  --dr-bleu-press:#1E46E0;
  --dr-bleu-doux:#9DB3E8;
  /* Texte sur fond marine, ajoutés le 09/08/2026 (audit design). Le système
     décrit le marine comme couleur d'autorité mais ne disait nulle part ce qui
     s'écrit dessus : trois gris étaient donc écrits en dur au fil des pages,
     pour un seul rôle en réalité (#dbe4f7 sept fois, plus #b9c6de dans le pied
     de page, à sept unités de distance de couleur l'un de l'autre). Deux rôles
     suffisent : le texte secondaire courant, et la mention plus discrète
     (avertissement légal, fine print). */
  --dr-marine-texte-secondaire:#DBE4F7;
  --dr-marine-texte-mention:#8FA0BE;
  --dr-bleu-pale:#E8EEFF;
  --dr-bleu-bord:#CCD9FF;

  /* Neutres */
  --dr-encre:#131B2E;
  --dr-gris:#5A6478;
  --dr-gris-clair:#9AA3B5;
  --dr-gris-inactif:#B7BFCE;
  --dr-ligne:#E3E7EF;
  --dr-ligne-forte:#C9D2E2;
  --dr-rail:#EDF0F6;
  --dr-fond:#F6F8FC;
  --dr-blanc:#FFFFFF;

  /* Sémantiques, alignées sur les 5 bandes de score */
  --dr-vert-fonce:#0B6B47;
  --dr-vert:#1FA06A;
  --dr-orange:#E8850C;
  /* Texte sur fond orange-tint, ajouté le 09/08/2026 (audit design) : deux
     pages assombrissaient l'orange à la main pour la même pastille de
     vigilance, #8a5200 et #8A4B00, à sept unités l'une de l'autre. Même trou
     de spécification que le texte sur marine : le système avait --dr-vert-fonce
     et --dr-rouge-fonce pour ce rôle sur les deux autres teintes sémantiques,
     pas d'équivalent orange. */
  --dr-orange-fonce:#8A4B00;
  --dr-rouge:#D6392B;
  --dr-rouge-fonce:#8C1B1B;
  --dr-vert-tint:#E7F6EF;
  --dr-vert-bord:#C3E8D6;
  --dr-orange-tint:#FDF3E4;
  --dr-orange-bord:#F6DFB8;
  --dr-rouge-tint:#FBEAE8;
  --dr-rouge-bord:#F3CBC5;

  /* Alias sémantiques */
  --dr-text-fort:var(--dr-marine-800);
  --dr-text-body:var(--dr-encre);
  --dr-text-doux:var(--dr-gris);
  --dr-text-faible:var(--dr-gris-clair);
  --dr-text-accent:var(--dr-bleu);
  --dr-text-inverse:var(--dr-blanc);
  --dr-surface-app:var(--dr-fond);
  --dr-surface-carte:var(--dr-blanc);
  --dr-surface-rail:var(--dr-rail);
  --dr-surface-marine:linear-gradient(135deg,var(--dr-marine-800),var(--dr-marine-700));
  --dr-bordure-carte:var(--dr-ligne);
  --dr-bordure-forte:var(--dr-ligne-forte);
  --dr-focus:var(--dr-bleu);

  /* Bandes de score, invariant produit 5 paliers */
  --dr-bande-1:var(--dr-rouge-fonce); /* 0 à 19   */
  --dr-bande-2:var(--dr-rouge);       /* 20 à 39  */
  --dr-bande-3:var(--dr-orange);      /* 40 à 59  */
  --dr-bande-4:var(--dr-vert);        /* 60 à 74  */
  --dr-bande-5:var(--dr-vert-fonce);  /* 75 à 100 */

  /* Gravité des signaux */
  --dr-gravite-serieux:var(--dr-rouge);
  --dr-gravite-modere:var(--dr-orange);
  --dr-gravite-clarifier:var(--dr-gris-clair);
}
/* Déclinaison impression A4 paysage : même famille, encres économes.
   Fond blanc pur, aplats de couleur réservés aux marqueurs, contrastes
   qui tiennent la photocopie noir et blanc. */
.dr-print{
  --dr-surface-app:#FFFFFF;
  --dr-surface-carte:#FFFFFF;
  --dr-surface-rail:#EEF1F6;
  --dr-ligne:#D8DEE9;
  --dr-bleu-doux:#8FA6DB;
  --dr-text-body:#141824;
}

/* ---- tokens/typography.css ---- */
:root{
  --dr-font-display:'Libre Franklin',system-ui,sans-serif;
  --dr-font-body:'Instrument Sans',system-ui,sans-serif;
  --dr-font-data:'IBM Plex Sans','Instrument Sans',system-ui,sans-serif;

  /* Display et titres, Libre Franklin */
  --dr-display-1:800 46px/1.06 var(--dr-font-display);
  --dr-display-2:800 34px/1.12 var(--dr-font-display);
  --dr-titre-1:800 25px/1.15 var(--dr-font-display);
  --dr-titre-2:700 19px/1.2 var(--dr-font-display);
  --dr-titre-3:700 15px/1.25 var(--dr-font-display);

  /* Corps, Instrument Sans */
  --dr-lead:400 17px/1.5 var(--dr-font-body);
  --dr-corps:400 15.5px/1.6 var(--dr-font-body);
  --dr-corps-s:400 13.5px/1.55 var(--dr-font-body);
  --dr-legende:400 12px/1.45 var(--dr-font-body);
  --dr-micro:600 10.5px/1.3 var(--dr-font-body);
  --dr-libelle:700 10.5px/1.3 var(--dr-font-body);

  /* Données, IBM Plex Sans en tabular */
  --dr-chiffre-xxl:700 52px/1 var(--dr-font-data);
  --dr-chiffre-xl:700 38px/1 var(--dr-font-data);
  --dr-chiffre-l:700 22px/1.1 var(--dr-font-data);
  --dr-chiffre-m:700 14px/1.2 var(--dr-font-data);
  --dr-chiffre-s:700 11px/1.2 var(--dr-font-data);

  --dr-suivi-titre:-.02em;
  --dr-suivi-kicker:.12em;
  --dr-suivi-libelle:.05em;
}
/* Tout ce qui porte un chiffre comparable doit s'aligner en colonne. */
.dr-num{font-family:var(--dr-font-data);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0}
.dr-kicker{font:700 12px/1.2 var(--dr-font-data);font-variant-numeric:tabular-nums;letter-spacing:var(--dr-suivi-kicker);text-transform:uppercase;color:var(--dr-bleu)}
.dr-libelle{font:var(--dr-libelle);letter-spacing:var(--dr-suivi-libelle);text-transform:uppercase;color:var(--dr-gris)}

/* ---- tokens/spacing.css ---- */
:root{
  /* Échelle relevée sur les maquettes de référence, valeurs exactes
     conservées (pas d'arrondi sur une grille de 4). */
  --dr-espace-2:2px;
  --dr-espace-4:4px;
  --dr-espace-6:6px;
  --dr-espace-8:8px;
  --dr-espace-11:11px;
  --dr-espace-13:13px;
  --dr-espace-17:17px;
  --dr-espace-22:22px;
  --dr-espace-28:28px;
  --dr-espace-36:36px;
  --dr-espace-44:44px;
  --dr-espace-56:56px;
  --dr-espace-74:74px;

  --dr-carte-padding:22px 24px;
  --dr-carte-padding-compact:15px 18px;
  --dr-gouttiere:11px;
  --dr-largeur-lecture:660px;
  --dr-largeur-page:1180px;
  --dr-largeur-panneau:330px;
  --dr-hauteur-barre:52px;
}

/* ---- tokens/radii.css ---- */
:root{
  --dr-rayon-xs:5px;
  --dr-rayon-s:8px;
  --dr-rayon-bouton:9px;
  --dr-rayon-m:11px;
  --dr-rayon-l:14px;
  --dr-rayon-xl:16px;
  --dr-rayon-pilule:99px;
  --dr-rayon-barre:5px;
}

/* ---- tokens/elevation.css ---- */
:root{
  /* Ombres marine, jamais noires : les ombres portent la teinte d'encre. */
  --dr-ombre-panneau:0 14px 40px -22px rgba(14,34,73,.18);
  --dr-ombre-carte-survol:0 10px 26px -16px rgba(14,34,73,.30);
  --dr-ombre-flottant:0 10px 30px -12px rgba(14,34,73,.30);
  --dr-ombre-page:0 18px 50px -22px rgba(20,24,36,.35);
  --dr-bord-carte:1px solid var(--dr-ligne);
  --dr-bord-pointille:1px dashed var(--dr-ligne-forte);
  --dr-flou-barre:blur(10px); /* @kind other */
}

/* ---- tokens/motion.css ---- */
:root{
  --dr-ease:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --dr-ease-pop:cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --dr-duree-etat:.15s; /* @kind other */
  --dr-duree-court:.4s; /* @kind other */
  --dr-duree-reveal:.6s; /* @kind other */
  --dr-duree-jauge:.9s; /* @kind other */
  --dr-duree-trace:1.5s; /* @kind other */
  --dr-transition-etat:all var(--dr-duree-etat) ease;
  --dr-transition-jauge:width var(--dr-duree-jauge) var(--dr-ease);
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dr-duree-etat:0s; /* @kind other */
    --dr-duree-court:0s; /* @kind other */
    --dr-duree-reveal:0s; /* @kind other */
    --dr-duree-jauge:0s; /* @kind other */
    --dr-duree-trace:0s; /* @kind other */
  }
}

/* Squelette de chargement des visualisations. La classe est portée par
   les barres de EmptyState : jamais de sélecteur d'élément nu, sans quoi
   la règle couperait les animations de tout le système. */
.dr-squelette{animation:dr-squelette-pulse 1.4s ease-in-out infinite}
@keyframes dr-squelette-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.dr-squelette{animation:none}}

/* ---- tokens/dataviz.css ---- */
:root{
  /* Séries. Ordre imposé : une série de plus prend la couleur suivante,
     jamais une teinte inventée. */
  --dr-serie-1:var(--dr-marine-800);
  --dr-serie-2:var(--dr-bleu);
  --dr-serie-3:var(--dr-bleu-doux);
  --dr-serie-4:#C7D2EA;

  /* Comparaison vous contre secteur */
  --dr-secteur-fond:var(--dr-rail);
  --dr-secteur-iqr:linear-gradient(90deg,#DDE5F4,#B9C9EC); /* @kind color */
  --dr-secteur-mediane:var(--dr-gris);
  --dr-vous-neutre:var(--dr-bleu);
  --dr-vous-bon:var(--dr-vert);
  --dr-vous-mauvais:var(--dr-rouge);

  /* Sens de variation */
  --dr-variation-hausse:var(--dr-vert);
  --dr-variation-baisse:var(--dr-rouge);
  --dr-variation-stable:var(--dr-gris);

  /* Jauges continues */
  --dr-jauge-usure:linear-gradient(90deg,#1FA06A,#E8850C 55%,#D6392B); /* @kind color */
  --dr-jauge-plage:linear-gradient(90deg,#B9C9EC,var(--dr-bleu));
  --dr-grille:#EFF2F7;
  --dr-axe:var(--dr-ligne);
}

/* ---- tokens/breakpoints.css ---- */
:root{
  /* Trois largeurs seulement. Le rapport se lit surtout sur mobile et
     sur portable ; la troisième colonne n'existe qu'au delà de 1180. */
  --dr-bp-mobile:620px;   /* @kind other */
  --dr-bp-tablette:980px; /* @kind other */
  --dr-bp-large:1180px;   /* @kind other */

  --dr-touche-min:44px;
  --dr-hauteur-barre-mobile:56px;
}

/* ---- tokens/responsive.css ---- */
/* Déclinaison mobile.
   Les composants sont écrits en styles inline, donc les adaptations
   qui dépendent de la largeur passent par ces classes utilitaires,
   posées par les kits sur les conteneurs. */

/* Grilles qui se replient
   minmax(0, ...) sur CHAQUE piste, à CHAQUE palier (11/08/2026, bug du
   slider horizontal remonté trois fois par le fondateur, attribué à tort
   au header puis au panneau collant). Une piste de grille déclarée en
   simple `1fr` (sans minmax) hérite d'un minimum automatique égal au
   min-content de son contenu : si UNE cellule porte un texte ou un
   nombre insécable plus large que la piste, la grille entière refuse de
   descendre sous cette largeur et pousse .page, main et le body au-delà
   du viewport. `minmax(0,1fr)` annule ce plancher et laisse le contenu
   s'ellipser ou s'empiler plutôt que forcer la page à déborder. Preuve
   du mécanisme : mesuré via Playwright, viewport 390px, rapport.html
   ?demo=goeland, .dr-disposition en simple `1fr` sous 980px forçait
   main à 437px de large. */
.dr-grille-6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dr-gouttiere)}
.dr-grille-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--dr-gouttiere)}
.dr-disposition{display:grid;grid-template-columns:minmax(0,1fr) var(--dr-largeur-panneau);gap:var(--dr-espace-44);align-items:start}

@media (max-width:1180px){
  .dr-disposition{gap:var(--dr-espace-28)}
}
@media (max-width:980px){
  .dr-disposition{grid-template-columns:minmax(0,1fr);gap:var(--dr-espace-22)}
  /* Le panneau de score passe au-dessus du récit et se colle en haut. */
  .dr-disposition>.dr-panneau{order:-1;position:sticky;top:var(--dr-hauteur-barre-mobile);z-index:40}
}
@media (max-width:620px){
  .dr-grille-6,.dr-grille-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-grille-2.dr-pile{grid-template-columns:minmax(0,1fr)}
  /* Toute cible tactile tient 44 px, sans exception. */
  .dr-tactile{min-height:var(--dr-touche-min);display:inline-flex;align-items:center}
}

/* Panneau de score : plein détail en colonne, résumé collé en haut
   dès que la troisième colonne disparaît. */
@media (max-width:980px){
  .dr-panneau{border-radius:var(--dr-rayon-m);padding:13px 16px}
  /* minmax(0,1fr) et non 1fr, même raison que les grilles ci-dessus
     (11/08/2026) : la piste porte le libellé du verdict, texte non maîtrisé.
     Une piste `1fr` garde son plancher min-content et pousse le panneau, donc
     la page, au-delà du viewport. Restées nues jusqu'ici parce que la chasse
     au slider horizontal avait visé les grilles de contenu, pas le panneau. */
  .dr-panneau-tete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;align-items:center}
  .dr-panneau-tete h3{grid-column:1/-1}
  .dr-panneau-reglette{grid-column:2;align-self:center}
  .dr-panneau-detail{display:none}
}
@media (min-width:981px){
  .dr-panneau-reglette{display:none}
}

/* Barre de chapitres : les libellés tombent, les traits restent. */
@media (max-width:980px){
  .dr-chapitres{height:var(--dr-hauteur-barre-mobile);padding:0 14px;gap:6px}
  .dr-chapitre-libelle{display:none}
  .dr-chapitre{gap:0}
  .dr-chapitres-actions .dr-secondaire{display:none}
}
@media (max-width:620px){
  .dr-chapitres-actions>*:not(:last-child){display:none}
  /* minmax(0,1fr) : une colonne unique n'échappe pas au plancher min-content,
     un nombre ou un terme insécable la fait déborder comme une grille à
     plusieurs pistes (11/08/2026, même famille que ci-dessus). */
  .dr-signal-dl{grid-template-columns:minmax(0,1fr)!important;gap:1px 0!important}
  .dr-signal-dl dt{margin-top:7px}
}

/* ---- tokens/base.css ---- */
body{background:var(--dr-surface-app);color:var(--dr-text-body);font:var(--dr-corps);-webkit-font-smoothing:antialiased}
a{color:var(--dr-bleu);text-decoration:none}
a:hover{color:var(--dr-bleu-press);text-decoration:underline}
:focus-visible{outline:2px solid var(--dr-focus);outline-offset:2px}

/* ============================= PIED DE PAGE UNIFIE =============================
   09/08/2026, décision fondateur : les pieds de page étaient un patchwork
   d'un jour à l'autre selon la page (parfois une seule ligne de texte gris
   sans marque, parfois rien du tout : rapport.html portait un pied complet,
   avec sa mise en garde et ses liens, resté invisible en display:none dur
   depuis sa création, corrigé séparément). Ce bloc fournit la STRUCTURE
   INTERNE commune (marque + liens + mention optionnelle) que chaque page
   place dans son propre conteneur .int, dont la largeur reste celle de sa
   mise en page (760, 860, 960 ou 1180px selon la page) : on unifie le
   contenu, pas la largeur de chaque gabarit. */
.dr-pied-haut{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.dr-pied-marque{display:inline-flex;align-items:center;gap:7px;font:800 13.5px/1 var(--dr-font-display);
  color:var(--dr-marine-800)}
.dr-pied-marque b{color:var(--dr-bleu);font-weight:800}
.dr-pied-liens{display:flex;flex-wrap:wrap;gap:5px 16px}
.dr-pied-liens a{font:400 12.5px/1.5 var(--dr-font-body);color:var(--dr-gris)}
.dr-pied-liens a:hover{color:var(--dr-bleu);text-decoration:underline}
.dr-pied-mention{font:400 11.5px/1.6 var(--dr-font-body);color:var(--dr-gris);margin-top:14px;max-width:78ch}