/* Discovery : mise en page, au-dessus des tokens et composants du design system (thème clair Monochrome). */
body { min-height: 100vh; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-space-4); flex-wrap: wrap;
  padding: var(--pf-space-3) var(--pf-space-6); background: var(--pf-color-surface); border-bottom: var(--pf-border-width) solid var(--pf-color-border); }
.marque { font-weight: 750; color: var(--pf-color-text) !important; text-decoration: none; letter-spacing: -.02em; }
.marque span { color: var(--pf-color-muted); font-weight: 500; }
.modules { display: flex; gap: var(--pf-space-2); }
.module { font-size: var(--pf-text-small); padding: var(--pf-space-1) var(--pf-space-3); border-radius: var(--pf-radius-control); color: var(--pf-color-muted); }
.module.actif { background: var(--pf-color-selection); color: var(--pf-color-action); font-weight: 650; }
main { max-width: var(--pf-content-max); margin: 0 auto; padding: var(--pf-space-6) var(--pf-space-4) var(--pf-space-12); display: grid; gap: var(--pf-space-4); }
main:focus { outline: none; }
.titre { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pf-space-4); flex-wrap: wrap; }
.titre h1 { margin-bottom: var(--pf-space-2); }
.titre p { margin: 0; }
.perimetre code { margin-right: var(--pf-space-1); }
a[aria-disabled=true] { pointer-events: none; opacity: .5; }

.formulaire { display: grid; gap: var(--pf-space-6); max-width: 52rem; }
.groupe { border: var(--pf-border-width) solid var(--pf-color-border); border-radius: var(--pf-radius-control); padding: var(--pf-space-4); margin: 0; display: grid; gap: var(--pf-space-3); }
.groupe legend, .groupe summary { font-weight: 650; padding: 0 var(--pf-space-1); cursor: default; }
details.groupe summary { cursor: pointer; }
.domaine { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--pf-space-3); align-items: end; }
.bornes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--pf-space-3); }
@media (max-width: 40rem) { .domaine { grid-template-columns: 1fr; } }

.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--pf-space-3); }
.tuile { background: var(--pf-color-surface); border: var(--pf-border-width) solid var(--pf-color-border); border-radius: var(--pf-radius-panel);
  padding: var(--pf-space-4); display: grid; gap: var(--pf-space-1); align-content: start; }
.tuile strong { font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em; }
.tuile span:last-child { font-size: var(--pf-text-small); color: var(--pf-color-muted); }
.tuile.principale { grid-column: span 2; border-color: var(--pf-color-action); box-shadow: inset 3px 0 var(--pf-color-action); }
.tuile.secondaire { background: var(--pf-color-canvas); }
@media (max-width: 40rem) { .tuile.principale { grid-column: auto; } }
.regle { margin: 0; }
progress { width: 100%; accent-color: var(--pf-color-action); }

.onglets { border-bottom: var(--pf-border-width) solid var(--pf-color-border); padding: 0 var(--pf-space-2); }
.filtres { display: flex; flex-wrap: wrap; gap: var(--pf-space-3); align-items: flex-end; padding: var(--pf-space-4); }
.filtres .pf-field { flex: 1 1 11rem; }
.filtres .pf-field:first-child { flex: 3 1 16rem; }
.resultat, .aide { margin: 0; padding: 0 var(--pf-space-4); }
.aide { padding-top: var(--pf-space-4); }
.pagination { justify-content: center; padding: var(--pf-space-4); }
.pf-table td code { overflow-wrap: anywhere; }
.pf-table .pf-row-button { min-height: 0; padding: 0; text-align: left; white-space: normal; }
.vignette { width: 4rem; height: 3rem; object-fit: cover; border-radius: 4px; background: var(--pf-color-subtle); display: block; }
.problemes { padding: 0 var(--pf-space-8) var(--pf-space-6); font-size: var(--pf-text-small); }

dialog#fiche { width: min(46rem, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; padding: 0; border: 0;
  border-left: var(--pf-border-width) solid var(--pf-color-border); background: var(--pf-color-surface); color: var(--pf-color-text); }
dialog#fiche::backdrop { background: rgb(32 32 36 / .35); }
.fiche-tete { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: var(--pf-space-3) var(--pf-space-6);
  background: var(--pf-color-surface); border-bottom: var(--pf-border-width) solid var(--pf-color-border); z-index: 1; }
#fiche-corps { padding: var(--pf-space-6); }
#fiche-corps h2 { overflow-wrap: anywhere; }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: var(--pf-space-2) var(--pf-space-4); font-size: var(--pf-text-label); }
.infos dt { color: var(--pf-color-muted); }
.infos dd { margin: 0; overflow-wrap: anywhere; }
.capture { margin: var(--pf-space-6) 0; max-height: 36rem; overflow: auto; border: var(--pf-border-width) solid var(--pf-color-border); border-radius: var(--pf-radius-control); }
.capture figcaption { padding: var(--pf-space-2); }
.liens { list-style: none; padding: 0; margin: var(--pf-space-2) 0 var(--pf-space-4); display: grid; gap: var(--pf-space-2); }
.liens li { display: grid; gap: 2px; overflow-wrap: anywhere; }
#fiche-corps details summary { cursor: pointer; font-weight: 600; padding: var(--pf-space-2) 0; }
.groupe > .pf-button { justify-self: start; }
.bornes { align-items: end; }
.connexion { min-height: 100vh; display: grid; place-items: center; }
.connexion form { width: min(24rem, 100%); }
.entete-actions { display: flex; align-items: center; gap: var(--pf-space-3); }
.erreurs-liste { list-style: none; margin: 0; padding: 0 var(--pf-space-4) var(--pf-space-4); display: grid; gap: var(--pf-space-3); }
.erreurs-liste li { border-bottom: var(--pf-border-width) solid var(--pf-color-border); padding-bottom: var(--pf-space-3); overflow-wrap: anywhere; }
.bandeau-env { background: var(--pf-color-check-bg); color: var(--pf-color-check); text-align: center; font-size: var(--pf-text-small); font-weight: 650; padding: var(--pf-space-1); }
a.module:not([href]) { opacity: .5; }
a.module[href] { text-decoration: none; }

/* Sitemap */
.arbre, .arbre ul { list-style: none; margin: 0; padding: 0; }
.arbre { padding: var(--pf-space-2) var(--pf-space-4) var(--pf-space-6); }
.arbre ul { margin-left: var(--pf-space-4); padding-left: var(--pf-space-3); border-left: var(--pf-border-width) solid var(--pf-color-border); }
.arbre summary { cursor: pointer; padding: 2px 0; }
.arbre .feuille { padding: 2px 0 2px 1.1rem; }
.noeud { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--pf-space-1) var(--pf-space-2); }
.noeud .pf-row-button { min-height: 0; padding: 0; text-align: left; white-space: normal; font-weight: 600; }
.noeud--section .pf-row-button, .noeud--rubrique .pf-row-button { font-weight: 450; }
.noeud-type { font-size: var(--pf-text-small); color: var(--pf-color-muted); min-width: 4.5rem; }
.noeud--langue .noeud-type, .noeud--langue .pf-row-button { color: var(--pf-color-action); }
.menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--pf-space-6); padding: var(--pf-space-4); }
.menus h3 { margin-top: 0; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pf-space-2); }
.menu .menu { margin: var(--pf-space-2) 0 0 var(--pf-space-4); }
.menu li { display: grid; gap: 2px; }
.menu .pf-row-button { min-height: 0; padding: 0; text-align: left; justify-self: start; }
.correction { border-top: var(--pf-border-width) solid var(--pf-color-border); padding: var(--pf-space-3) 0; }
.correction .pf-button { justify-self: start; }
.corrections { padding: var(--pf-space-4); }
.arbre .compte { display: inline-block; min-width: 1.4rem; padding: 0 var(--pf-space-1); border-radius: 999px; background: var(--pf-color-subtle); color: var(--pf-color-muted); text-align: center; }

/* Canevas (repris du visualiseur de parcours du proto) */
.canevas-outils { padding: var(--pf-space-3) var(--pf-space-4) 0; flex-wrap: wrap; align-items: center; }
.canevas-echelle { min-width: 3.5rem; text-align: center; }
.canevas-aide { margin-left: auto; }
.canevas { position: relative; overflow: hidden; height: min(68vh, 44rem); margin: var(--pf-space-3) var(--pf-space-4) var(--pf-space-4);
  border: var(--pf-border-width) solid var(--pf-color-border); border-radius: var(--pf-radius-control); background: var(--pf-color-canvas);
  background-image: radial-gradient(var(--pf-color-border) 1px, transparent 1px); background-size: 22px 22px; cursor: grab; touch-action: none; }
.canevas.glisse { cursor: grabbing; }
.canevas:focus-visible { outline: 2px solid var(--pf-color-focus); outline-offset: 2px; }
.canevas-scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.canevas-liaisons { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.canevas-liaisons path { fill: none; stroke: var(--pf-color-control-border); stroke-width: 1.5; }
.canevas-liaisons marker path { fill: var(--pf-color-control-border); stroke: none; }
.canevas-liaisons rect { fill: var(--pf-color-surface); stroke: var(--pf-color-border); }
.canevas-liaisons text { font-size: 11px; fill: var(--pf-color-text); font-family: inherit; }
.canevas-noeud { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; text-align: left; overflow: hidden;
  background: var(--pf-color-surface); color: var(--pf-color-text); border: var(--pf-border-width) solid var(--pf-color-border); border-radius: 8px; cursor: pointer; font: inherit; }
.canevas-noeud:hover { border-color: var(--pf-color-control-border); }
.canevas-noeud.selectionne { border-color: var(--pf-color-action); box-shadow: 0 0 0 2px var(--pf-color-action); }
.canevas-noeud:focus-visible { outline: 2px solid var(--pf-color-focus); outline-offset: 2px; }
.carte-type { color: var(--pf-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-titre { font-weight: 650; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.carte--langue { background: var(--pf-color-selection); border-color: var(--pf-color-action); }
.carte--rubrique { border-style: dashed; }
.carte--section { background: var(--pf-color-origin-bg); }
.carte--cassee { background: var(--pf-color-error-bg); border-color: var(--pf-color-error); }
.etape-tete { display: flex; justify-content: space-between; align-items: center; gap: 4px; color: var(--pf-color-muted); }
.etape-image { width: 100%; height: 118px; object-fit: cover; object-position: top; border-radius: 4px; background: var(--pf-color-subtle); display: block; }
.etape-image--vide { display: grid; place-items: center; color: var(--pf-color-muted); font-weight: 650; }
.etape-titre { font-weight: 650; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.etape--ecart { border-color: var(--pf-color-error); box-shadow: inset 0 3px var(--pf-color-error); }
.etape--non-rejouee { opacity: .55; }
.etape--defilement { background: var(--pf-color-origin-bg); }
.barre-vue { justify-content: space-between; flex-wrap: wrap; }
.barre-vue .pf-button[aria-pressed=true] { background: var(--pf-color-selection); border-color: var(--pf-color-action); color: var(--pf-color-action); }

/* Parcours */
.chemin { padding: var(--pf-space-4); border-bottom: var(--pf-border-width) solid var(--pf-color-border); display: grid; gap: var(--pf-space-3); }
.etapes-ligne { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pf-space-2); align-items: stretch; }
.etapes-ligne li { display: grid; gap: 2px; padding: var(--pf-space-2) var(--pf-space-3); border: var(--pf-border-width) solid var(--pf-color-border); border-radius: var(--pf-radius-control); background: var(--pf-color-surface); }
.etapes-ligne li.fleche { border: 0; background: none; padding: 0; align-self: center; color: var(--pf-color-muted); }
.constructeur { margin: 0; padding: var(--pf-space-2) var(--pf-space-4) var(--pf-space-2) var(--pf-space-8); display: grid; gap: var(--pf-space-2); }
.constructeur li { display: flex; flex-wrap: wrap; gap: var(--pf-space-1) var(--pf-space-3); align-items: baseline; }
.preuves { padding: 0 var(--pf-space-4); }
.ecartes { padding: 0 var(--pf-space-4) var(--pf-space-4); }
.ecartes summary { cursor: pointer; font-weight: 600; padding: var(--pf-space-2) 0; }
@media (max-width: 40rem) { .canevas { height: 60vh; margin: var(--pf-space-2); } .canevas-aide { display: none; } }

/* Vérification (agent) */
.discussion { list-style: none; margin: 0; padding: var(--pf-space-2) var(--pf-space-4); display: grid; gap: var(--pf-space-3); }
.message { max-width: 46rem; padding: var(--pf-space-2) var(--pf-space-3); border-radius: var(--pf-radius-control); border: var(--pf-border-width) solid var(--pf-color-border); }
.message p { margin: var(--pf-space-1) 0 0; overflow-wrap: anywhere; }
.message--humain { justify-self: end; background: var(--pf-color-selection); border-color: transparent; }
.message--agent { background: var(--pf-color-surface); }
.message--systeme { background: var(--pf-color-canvas); font-size: var(--pf-text-small); }
.jauge { display: inline-flex; align-items: center; gap: var(--pf-space-2); }
.jauge progress { width: 8rem; }
.aide-ia { margin: 0 var(--pf-space-4); }