/* DAX Lab gd.solutions | interface neutre à la charte gd.solutions */
:root {
  --navy: #364554;
  --orange: #EF572C;
  --texte: #22272B;
  --attenue: #64748B;
  --doux: #F1F5F9;
  --bord: #E2E8F0;
  --fond: #FFFFFF;
  --ok: #15803D;
  --ok-fond: #F0FDF4;
  --erreur: #B91C1C;
  --erreur-fond: #FEF2F2;
  --serie-1: #364554;
  --serie-2: #EF572C;
  --serie-3: #64748B;
  --serie-4: #94A3B8;
  --rayon: 8px;
  --police: "Inter", "Segoe UI", Calibri, system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 14px; line-height: 1.5; }
body.integre { background: transparent; }
button { font: inherit; cursor: pointer; }

.nb { max-width: 1180px; margin: 0 auto; padding: 16px; }
.nb-entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 14px; }
.nb-marque { font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.nb-marque span { color: var(--orange); }
.nb-titre { font-weight: 600; flex: 1; min-width: 200px; }
.nb-entete select { font: inherit; padding: 4px 8px; border: 1px solid var(--bord); border-radius: 6px; background: #fff; }
.nb-mesures-page { font-size: 12px; color: var(--attenue); }

.btn { border: 1px solid var(--bord); background: #fff; color: var(--texte); padding: 5px 12px; border-radius: 6px; font-size: 13px; }
.btn:hover { border-color: var(--navy); }
.btn-principal { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.btn-principal:hover { filter: brightness(0.95); border-color: var(--orange); }
.btn-discret { border-color: transparent; background: transparent; color: var(--attenue); }
.btn-discret:hover { color: var(--navy); border-color: var(--bord); }
.btn[aria-pressed="true"] { background: var(--doux); border-color: var(--navy); color: var(--navy); }

/* Cellules */
.cellule { border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 14px; background: #fff; overflow: hidden; }
.cellule-texte { border: none; padding: 2px 4px; }
.cellule-texte h2 { color: var(--navy); font-size: 18px; margin: 10px 0 6px; }
.cellule-texte h3 { color: var(--navy); font-size: 15px; margin: 10px 0 4px; }
.cellule-texte p, .cellule-texte ul { margin: 6px 0; }
.cellule-texte code, .inline-code { font-family: var(--mono); font-size: 12.5px; background: var(--doux); padding: 1px 5px; border-radius: 4px; }
.cellule-barre { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--doux); border-bottom: 1px solid var(--bord); }
.cellule-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); }
.cellule-type::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); margin-right: 6px; vertical-align: 1px; }
.cellule-consigne { font-size: 13px; color: var(--attenue); flex: 1; }
.cellule-etat { font-size: 12px; color: var(--attenue); }
.raccourci { font-size: 11px; color: var(--attenue); }

/* Éditeur : textarea transparente au-dessus d'un bloc coloré */
.editeur { position: relative; font-family: var(--mono); font-size: 13px; line-height: 1.55; }
.editeur pre, .editeur textarea { margin: 0; padding: 10px 12px; white-space: pre-wrap; word-wrap: break-word; font: inherit; tab-size: 4; min-height: 46px; }
.editeur pre { position: absolute; inset: 0; pointer-events: none; color: var(--texte); overflow: hidden; }
.editeur textarea { position: relative; width: 100%; border: none; outline: none; resize: vertical; background: transparent; color: transparent; caret-color: var(--texte); display: block; overflow: hidden; }
.editeur textarea:focus { box-shadow: inset 3px 0 0 var(--orange); }
.tk-mot { color: #1D4ED8; font-weight: 600; }
.tk-fn { color: #7C3AED; }
.tk-chaine { color: #B45309; }
.tk-nombre { color: #0F766E; }
.tk-mesure { color: var(--orange); }
.tk-colonne { color: var(--navy); font-weight: 600; }
.tk-com { color: #94A3B8; font-style: italic; }

.sortie { border-top: 1px solid var(--bord); padding: 10px 12px; }
.sortie:empty { display: none; }
.message-erreur { background: var(--erreur-fond); color: var(--erreur); padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.message-ok { background: var(--ok-fond); color: var(--ok); padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.cartes-valeurs { display: flex; flex-wrap: wrap; gap: 10px; }
.carte-valeur { border: 1px solid var(--bord); border-radius: 6px; padding: 8px 14px; min-width: 160px; }
.carte-valeur .nom { font-size: 12px; color: var(--attenue); }
.carte-valeur .val { font-size: 22px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.info { font-size: 12px; color: var(--attenue); margin-top: 6px; }

/* Tableaux de résultats */
.tableau-res { overflow: auto; max-height: 420px; }
table.res { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
table.res th, table.res td { padding: 5px 10px; border-bottom: 1px solid var(--bord); text-align: left; white-space: nowrap; }
table.res th { position: sticky; top: 0; background: var(--doux); color: var(--navy); font-weight: 600; z-index: 1; }
table.res td.num, table.res th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Rapport */
.rapport { display: grid; grid-template-columns: 1fr 280px; min-height: 420px; }
.rapport.sans-volet { grid-template-columns: 1fr; }
.canevas { padding: 12px; background: #FAFBFC; border-right: 1px solid var(--bord); min-width: 0; }
.rapport.sans-volet .canevas { border-right: none; }
.segments { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.segment { background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 6px 8px; min-width: 150px; }
.segment-titre { font-size: 12px; font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; gap: 8px; }
.segment-titre button { border: none; background: none; color: var(--attenue); font-size: 11px; padding: 0 0 0 8px; }
.segment-titre button:hover { color: var(--orange); }
.segment-valeurs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.puce { border: 1px solid var(--bord); background: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.puce[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.visuels { display: grid; gap: 12px; }
/* Visuels empilés : une matrice a besoin de toute la largeur */
.visuels.deux { grid-template-columns: minmax(0, 1fr); }
.visuel { background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 8px 10px 10px; position: relative; min-width: 0; }
.visuel.actif { outline: 2px solid var(--orange); outline-offset: -1px; }
.visuel-titre { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.visuel-titre .duree { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--attenue); }
.visuel-filtre { font-size: 11px; color: var(--orange); }
.chargement { color: var(--attenue); font-size: 13px; padding: 20px 0; text-align: center; }

table.matrice { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
table.matrice th, table.matrice td { padding: 4px 9px; border-bottom: 1px solid #EEF2F6; white-space: nowrap; }
table.matrice thead th { color: var(--navy); font-weight: 600; text-align: right; border-bottom: 2px solid var(--navy); }
table.matrice thead th.entete-ligne { text-align: left; }
table.matrice td.num { text-align: right; font-variant-numeric: tabular-nums; cursor: pointer; }
table.matrice td.num:hover { background: #FFF4EF; }
table.matrice td.selectionne { background: #FFE7DD !important; box-shadow: inset 0 0 0 1px var(--orange); }
table.matrice tr.niveau-1 th { font-weight: 600; }
table.matrice tr.niveau-1 td { font-weight: 600; }
table.matrice tr.niveau-2 th { padding-left: 26px; font-weight: 400; }
table.matrice tr.total th, table.matrice tr.total td { font-weight: 700; border-top: 2px solid var(--navy); background: var(--doux); }
table.matrice td.col-total { background: #F8FAFC; font-weight: 600; }
table.matrice th.entete-ligne-cle { text-align: left; cursor: pointer; }
table.matrice th.entete-ligne-cle:hover { color: var(--orange); }
.repli { display: inline-block; width: 14px; color: var(--attenue); }

svg.graphique { width: 100%; height: auto; display: block; overflow: visible; }
svg.graphique text { font-family: var(--police); font-size: 11px; fill: var(--attenue); }
svg.graphique .barre { cursor: pointer; }
svg.graphique .barre:hover { opacity: 0.85; }
svg.graphique .estompe { opacity: 0.25; }
.legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--attenue); margin-bottom: 4px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Volet de droite */
.volet { padding: 10px 12px; font-size: 13px; overflow: auto; max-height: 760px; }
.volet h4 { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--attenue); }
.volet h4:first-child { margin-top: 0; }
.types-visuel { display: flex; gap: 6px; }
.puits { border: 1px dashed #CBD5E1; border-radius: 6px; padding: 5px; min-height: 34px; margin-bottom: 6px; background: #fff; }
.puits.survol { border-color: var(--orange); background: #FFF4EF; }
.puits-titre { font-size: 12px; font-weight: 600; color: var(--navy); margin: 8px 0 3px; display: flex; justify-content: space-between; }
.puits-titre button { border: none; background: none; color: var(--orange); font-size: 12px; padding: 0; }
.champ { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 4px; background: var(--doux); margin: 2px 0; font-size: 12.5px; }
.champ .x { margin-left: auto; border: none; background: none; color: var(--attenue); padding: 0 2px; }
.champ .x:hover { color: var(--erreur); }
.vide { color: #94A3B8; font-size: 12px; padding: 2px 4px; }
.donnees details { margin: 2px 0; }
.donnees summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 2px 0; }
.donnees .item { padding: 1px 6px 1px 16px; cursor: grab; border-radius: 4px; font-size: 12.5px; }
.donnees .item:hover { background: var(--doux); }
.donnees .item.mesure::before { content: "Σ "; color: var(--orange); font-weight: 700; }
.donnees .item.session { color: var(--orange); }
.choix-champ { position: absolute; z-index: 20; background: #fff; border: 1px solid var(--bord); border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); max-height: 280px; overflow: auto; min-width: 220px; padding: 4px; }
.choix-champ div { padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 12.5px; }
.choix-champ div:hover { background: var(--doux); }
.choix-champ .groupe { font-weight: 700; color: var(--navy); cursor: default; }
.choix-champ .groupe:hover { background: none; }

/* Panneaux pédagogiques */
.panneaux { border-top: 1px solid var(--bord); }
.panneau { padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.panneau:last-child { border-bottom: none; }
.panneau h5 { margin: 0 0 6px; font-size: 12px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.05em; }
pre.code { background: var(--doux); border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; overflow: auto; margin: 0; white-space: pre; }
.contexte-liste { margin: 0; padding-left: 18px; }
.contexte-liste li { margin: 2px 0; }
.etiquette { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--doux); color: var(--navy); margin-left: 4px; }
.etiquette.orange { background: #FFE7DD; color: #9A3412; }

/* Exercice */
.verdict { display: flex; gap: 10px; align-items: flex-start; }
.verdict .coche { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.verdict .croix { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--erreur); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }

@media (max-width: 820px) {
  .rapport { grid-template-columns: 1fr; }
  .canevas { border-right: none; border-bottom: 1px solid var(--bord); }
  .nb { padding: 10px; }
}