/* Écran /taxonomies du registre (lot L4, conception §8.1, §8.5, §8.6).
   Charte Carac : Poppins pour les titres, Inter pour le texte, jetons --navy, --teal,
   --teal-d, --mint, --brume, --bleu, et --orange réservé aux alertes. Polices servies à
   plat par /static (CSP font-src 'self'), aucune ressource externe.
   Points de rupture (D9) : 1180 px et plus, trois colonnes ; 900 à 1179,98 px, compact ;
   moins de 900 px, empilé par étapes et navigation horizontale. Cibles (D7) : 36 px en vue
   dense, 44 px sous 900 px ; aucun texte sous 12 px. Aucun état par la seule couleur :
   chaque pastille porte une icône et un libellé. */

@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url('/static/poppins-600.woff2') format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url('/static/poppins-700.woff2') format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url('/static/inter-400.woff2') format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url('/static/inter-500.woff2') format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url('/static/inter-600.woff2') format("woff2")}

:root{
  --navy:#071C42;
  --teal:#3DCAB1;
  --teal-d:#2FB39C;
  --mint:#E4F7F2;
  --brume:#E9EEF6;
  --bleu:#0D66C2;
  --orange:#E8732A;
  --ardoise:#41618C;
  --blanc:#FFFFFF;
  --bord:rgba(7,28,66,.14);
  --bord-champ:rgba(7,28,66,.32);
  --fond-alerte:#FFF3EA;
  --fond-info:#E8F1FB;
  --fond-brouillon:#F1F3F6;
  --bord-brouillon:#8A94A3;
  --fd:"Poppins",system-ui,sans-serif;
  --fb:"Inter",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:14px}
body{margin:0;font:400 14px/1.45 var(--fb);color:var(--navy);background:var(--brume)}
h1,h2,h3{font-family:var(--fd);color:var(--navy)}
h1{font-weight:700;font-size:22px;margin:0 0 12px}
h2{font-weight:600;font-size:17px;margin:0 0 8px}
h3{font-weight:600;font-size:15px;margin:14px 0 6px}
p{margin:6px 0}
a{color:var(--bleu)}

:focus-visible{outline:3px solid var(--teal);outline-offset:2px;box-shadow:0 0 0 2px var(--navy)}
/* Un champ date garde l'anneau quand le focus passe sur son bouton de calendrier interne :
   l'hôte ne correspond plus alors qu'à :focus-within (mesuré dans Chromium). */
input[type="date"]:focus-within{outline:3px solid var(--teal);outline-offset:2px;box-shadow:0 0 0 2px var(--navy)}
.contenu:focus{outline:none}

/* Lien d'évitement : hors de l'écran jusqu'au focus clavier. */
.evitement{position:absolute;left:12px;top:-120px;z-index:100;display:inline-flex;align-items:center;
  min-height:44px;min-width:44px;padding:0 16px;border-radius:8px;background:var(--navy);color:var(--blanc);
  font-weight:600;text-decoration:none}
.evitement:focus{top:12px}

.visuellement-cache{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ---------- En-tête ---------- */
.entete{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:6px 16px;background:var(--navy);color:var(--blanc)}
.marque{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--blanc);text-decoration:none}
.marque-logo{display:block;height:18px;width:auto}
.badge-app{display:inline-flex;align-items:center;height:18px;margin-left:8px;padding:0 6px;border:1.5px solid var(--teal);
  border-radius:4px;color:var(--teal);font:700 12px/1 var(--fd);text-transform:uppercase;letter-spacing:.06em}
.titre-app{flex:1 1 auto;min-width:0;margin:0;font:600 15px/1.3 var(--fd)}
.qui{font-size:13px;color:var(--mint);overflow-wrap:anywhere}

/* ---------- Boutons et champs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:36px;padding:0 14px;
  border:1px solid var(--bord-champ);border-radius:8px;background:var(--blanc);color:var(--navy);font:500 14px/1.2 var(--fb);
  cursor:pointer;text-align:center}
.btn:hover{border-color:var(--teal-d)}
.btn:disabled{cursor:not-allowed;background:var(--fond-brouillon);color:var(--ardoise);border-style:dashed}
.btn-principal{background:var(--teal);border-color:var(--teal-d);color:var(--navy);font-weight:600}
.btn-principal:hover{background:var(--teal-d)}
.btn-clair{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.55)}
.btn-clair:hover{border-color:var(--blanc)}
.btn-petit{font-size:13px;padding:0 10px}

label{display:block;margin:10px 0 4px;font-weight:500;font-size:13px}
input[type="text"],input[type="search"],input[type="password"],input[type="date"],input[type="file"],select,textarea{
  display:block;width:100%;max-width:100%;min-height:36px;padding:6px 10px;border:1px solid var(--bord-champ);border-radius:8px;
  background:var(--blanc);color:var(--navy);font:400 14px/1.4 var(--fb)}
select[multiple]{min-height:96px}
textarea{resize:vertical}
input[readonly]{background:var(--fond-brouillon)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border:2px solid var(--orange)}
fieldset{min-width:0;margin:10px 0;padding:6px 12px 8px;border:1px solid var(--bord);border-radius:10px}
legend{padding:0 4px;font-weight:600;font-size:14px}
.choix{display:flex;align-items:center;gap:8px;min-height:36px;margin:0;font-weight:400;font-size:14px;cursor:pointer}
.choix input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--teal-d)}
.choix input:disabled + span{color:var(--ardoise)}
.role-requis{font-size:12px;color:var(--ardoise)}

.erreur:empty{display:none}
.erreur{margin:8px 0;padding:8px 12px;border-left:4px solid var(--orange);border-radius:6px;background:var(--fond-alerte);
  color:var(--navy);font-size:13px;overflow-wrap:anywhere}
.erreur::before{content:"⚠ ";font-weight:700}
.discret{color:var(--ardoise);font-size:13px}
.annonce,.annonce-locale{margin:0 0 12px;padding:8px 12px;border-left:4px solid var(--teal-d);border-radius:6px;background:var(--mint);
  font-size:13px;overflow-wrap:anywhere}
.annonce::before,.annonce-locale::before{content:"ℹ ";font-weight:700}
/* Régions aria-live TOUJOURS rendues : vides, elles sont masquées visuellement mais restent dans
   l'arbre d'accessibilité, sinon le texte qui y arrive n'est pas annoncé de façon fiable. */
.annonce:empty,.annonce-locale:empty{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.annonce:empty::before,.annonce-locale:empty::before{content:none}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ---------- Pastilles : icône ET libellé, jamais la seule couleur ---------- */
/* Retour à la ligne permis : l'état de la chaîne du journal ou le badge NON VÉRIFIÉE sont
   des phrases, qui débordaient de 61 px à 390 px en une seule ligne. */
.pastille{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:1px 8px;border:1px solid;border-radius:12px;
  color:var(--navy);font-size:12px;font-weight:600;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.pastille-icone{font-size:12px}
.pastille-ok{background:var(--mint);border-color:var(--teal-d)}
.pastille-alerte{background:var(--fond-alerte);border-color:var(--orange)}
.pastille-info{background:var(--fond-info);border-color:var(--bleu)}
.pastille-brouillon{background:var(--fond-brouillon);border-color:var(--bord-brouillon)}

/* ---------- Mise en page générale (empilée par défaut) ---------- */
.cadre{display:grid;grid-template-columns:minmax(0,1fr)}
.navigation{min-width:0;overflow-x:auto;background:var(--blanc);border-bottom:1px solid var(--bord)}
.nav-liste{display:flex;gap:4px;margin:0;padding:8px 16px;list-style:none}
.nav-entree{display:flex;align-items:center;gap:8px;min-height:36px;min-width:36px;padding:0 12px;border:1px solid transparent;
  border-radius:8px;background:transparent;color:var(--navy);font:500 14px/1.2 var(--fb);white-space:nowrap;cursor:pointer;text-align:left}
.nav-entree:hover{border-color:var(--bord)}
/* Vue courante : le trait gauche de 4 px reste visible en navigation compacte, où le texte
   est masqué et où fond et graisse ne suffiraient plus (aucun état par la seule couleur). */
.nav-entree[aria-current="page"]{border-color:var(--teal-d);border-left:4px solid var(--navy);background:var(--mint);font-weight:600}
.nav-entree[aria-current="page"] .nav-icone{color:var(--teal-d)}
.nav-icone{display:inline-block;width:20px;text-align:center;font-size:16px}

.contenu{min-width:0;padding:16px}
.vue-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.carte{min-width:0;margin-bottom:16px;padding:14px 16px;border:1px solid var(--bord);border-radius:12px;background:var(--blanc)}
.panneau{max-width:560px;margin:24px auto;padding:20px;border:1px solid var(--bord);border-radius:12px;background:var(--blanc)}
.message-acces{font-weight:600}
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 16px}
.deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.colonne{min-width:0}
.barre-outils{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin-bottom:12px}
.barre-outils .actions{margin-top:0}
.champ{display:flex;flex-direction:column;flex:1 1 180px;min-width:min(100%,160px)}
.champ label{margin-top:0}
.liste-phrases{margin:0;padding-left:18px}
.liste-phrases li{margin:4px 0;overflow-wrap:anywhere}
.liste-historique{margin:0;padding-left:20px;font-size:13px}
.liste-historique li{margin:3px 0;overflow-wrap:anywhere}
.fiche{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 12px;margin:0}
.fiche dt{font-weight:600;font-size:13px;color:var(--ardoise)}
.fiche dd{margin:0;overflow-wrap:anywhere}
.defilement{max-width:100%;overflow-x:auto}
.tableau{width:100%;border-collapse:collapse;font-size:13px}
.tableau th,.tableau td{padding:6px 8px;border-bottom:1px solid var(--bord);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.tableau th{font-weight:600;color:var(--ardoise)}
/* Ligne ouverte : fond, graisse, trait à gauche et flèche, jamais la seule couleur. */
.tableau tr[aria-current="true"] td{background:var(--mint);font-weight:600}
.tableau tr[aria-current="true"] td:first-child{box-shadow:inset 4px 0 0 var(--navy)}
.tableau tr[aria-current="true"] td:first-child::before{content:"▶ ";font-size:12px}
.rapport{font-size:13px;overflow-wrap:anywhere}
.rapport ul{padding-left:18px}

/* ---------- Listes de boutons (codes, concepts, profils) ---------- */
.liste-boutons,.liste-concepts,.liste-ordonnable,.cibles,.liste-suggestions{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.liste-boutons,.liste-concepts{max-height:460px;overflow-y:auto;padding:2px 4px 2px 2px}
.item-liste,.code-item,.concept-bouton,.vue-bouton{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:100%;min-height:36px;
  padding:6px 10px;border:1px solid var(--bord);border-radius:8px;background:var(--blanc);color:var(--navy);font:400 14px/1.3 var(--fb);
  text-align:left;cursor:pointer}
.item-liste:hover,.code-item:hover,.concept-bouton:hover,.vue-bouton:hover{border-color:var(--teal-d)}
.item-liste[aria-pressed="true"],.code-item[aria-pressed="true"],.concept-bouton[aria-pressed="true"]{border:2px solid var(--teal-d);background:var(--mint)}
.item-liste[aria-pressed="true"]::before,.code-item[aria-pressed="true"]::before{content:"▶";font-size:12px}
.code-exact{font-family:var(--mono);font-weight:600}
.code-libelle{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.concept{display:flex;gap:6px;align-items:stretch}
.concept .concept-bouton{flex:1 1 auto;min-width:0}
.concept .choisir{flex:none}
/* Rangée épinglée des collisions : bornée, défilante. Sans borne, 16 collisions (grille ADEME complète contre
   sa grille mini) recouvraient toute la liste des codes. Rien n'est masqué (D5) : le compteur reste affiché
   et chaque collision reste atteignable. Sélecteur à deux classes : il l'emporte aussi sous 900 px. */
.rangee-fixe .liste-epinglee{max-height:9.5rem;overflow-y:auto}
.triplet{margin:6px 0;font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}

/* ---------- Studio ---------- */
.progression{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:4px 0 12px}
progress{width:min(100%,320px);height:12px;accent-color:var(--teal-d)}
.etapes{display:none}
.etape{min-height:36px;padding:0 12px;border:1px solid var(--bord-champ);border-radius:8px;background:var(--blanc);color:var(--navy);
  font:500 13px/1.2 var(--fb);cursor:pointer;white-space:nowrap}
.etape[aria-pressed="true"]{border:2px solid var(--navy);font-weight:600}
.etape[aria-pressed="true"]::before{content:"● "}
.studio{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.stu-colonne{min-width:0;padding:12px;border:1px solid var(--bord);border-radius:12px;background:var(--blanc)}
.filtres{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.filtre{min-height:36px;min-width:36px;padding:0 12px;border:1px solid var(--bord-champ);border-radius:999px;background:var(--blanc);
  color:var(--navy);font:500 13px/1.2 var(--fb);cursor:pointer}
.filtre[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--blanc)}
.filtre[aria-pressed="true"]::before{content:"✓ "}
.rangee-fixe{position:sticky;top:0;z-index:2;margin:8px 0;padding:6px 10px;border:1px solid var(--orange);border-radius:8px;background:var(--fond-alerte)}
.rangee-fixe-texte{margin:2px 0;font-weight:600;font-size:13px}
.rangee-fixe-texte::before{content:"⚠ "}
.zone-depot{min-height:96px;margin:8px 0;padding:8px 10px;border:2px dashed var(--teal-d);border-radius:10px}
.zone-depot.survol{border-style:solid;background:var(--mint)}
.cible{padding:8px;border:1px solid var(--bord);border-radius:8px;background:var(--blanc)}
.cible-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.cible-nom{font-weight:600;overflow-wrap:anywhere}
.cible-relation{margin:6px 0}
.groupe-choix{display:block}
.suggestions{margin-top:12px}
.suggestion{padding:8px;border:1px solid var(--bord);border-radius:8px;font-size:13px;overflow-wrap:anywhere}
.pre-rattachement h4{margin:12px 0 4px;font-size:14px}
.pre-statut{font-weight:600}
.pre-justification{margin:4px 0 0}
.restitution{margin:8px 0 0;font-size:13px;overflow-wrap:anywhere}
.restitution:empty{display:none}

/* ---------- Arbre des nomenclatures ---------- */
.arbre,.arbre ul{margin:0;padding:0;list-style:none}
.arbre ul{padding-left:18px}
.arbre [role="treeitem"]{margin:2px 0;border-radius:6px}
.noeud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:36px;padding:4px 8px;border:1px solid transparent;border-radius:6px;cursor:pointer;overflow-wrap:anywhere}
.noeud:hover{border-color:var(--bord)}
[role="treeitem"][aria-expanded="false"] > .noeud::before{content:"▸";width:12px}
[role="treeitem"][aria-expanded="true"] > .noeud::before{content:"▾";width:12px}
[role="treeitem"][aria-selected="true"] > .noeud{border:2px solid var(--teal-d);background:var(--mint);font-weight:600}

/* ---------- Profils ---------- */
.vue-profil{display:flex;gap:6px;align-items:stretch}
.vue-profil .vue-bouton{flex:1 1 auto;min-width:0}
.vue-profil.glisse{opacity:.6}
.vue-profil.survol .vue-bouton{border-style:dashed;border-color:var(--teal-d)}
.apercu-client{margin:0;padding-left:20px}
.apercu-client li{margin:4px 0;overflow-wrap:anywhere}
.trace{display:block;font-family:var(--mono);font-size:12px;color:var(--ardoise)}

/* ---------- Versions et publication (lot L5) ---------- */
/* Bannière d'alerte : bordure épaisse, trait gauche, graisse et symbole, jamais la seule couleur. */
.banniere{margin:8px 0;padding:10px 12px;border:2px solid var(--orange);border-left-width:6px;border-radius:8px;
  background:var(--fond-alerte);color:var(--navy);font-weight:600;overflow-wrap:anywhere}
.liste-phases{margin:0 0 8px;padding-left:22px}
.liste-phases li{margin:4px 0;overflow-wrap:anywhere}
.empreinte,.code-act{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.code-act{margin:8px 0;font-weight:600}
.code-act:empty{display:none}

/* ---------- Comparer deux nomenclatures (lot C, V6, §7.2 a §7.8) ---------- */
/* Vue de bureau concue pour 900 px et plus. En dessous, le bandeau l'annonce ; la table reste dans
   son conteneur defilant, sans defilement horizontal du corps (§7.8). */
.cmp-bandeau{margin:8px 0;padding:8px 12px;border:1px solid var(--bleu);border-left-width:5px;border-radius:8px;
  background:var(--fond-info);font-size:13px}
.cmp-bandeau::before{content:"ℹ ";font-weight:700}
/* Voie et sens d'une cible : le texte les dit, jamais la seule couleur. « Via concept » n'est pas une
   equivalence, et le libelle doit le rappeler a chaque ligne. */
.cmp-cible{display:block;margin:2px 0;overflow-wrap:anywhere}
.cmp-voie{color:var(--ardoise);font-size:12px}
.cmp-concepts{display:block;font-family:var(--mono);font-size:12px;color:var(--ardoise);overflow-wrap:anywhere}
/* Restitution : PERTE nomme toujours les codes concurrents, SANS OBJET dit qu'il n'y a rien a perdre. */
.cmp-perte{font-weight:600}
.cmp-ligne-ouverte td{background:var(--mint);font-weight:600}
.cmp-ligne-ouverte td:first-child{box-shadow:inset 4px 0 0 var(--navy)}

/* ---------- Arbre des concepts (lot C, V5, §7.7) ---------- */
/* Meme mecanique ARIA que l'arbre des nomenclatures : le chevron et le cadre de selection portent
   l'etat, jamais la couleur seule. */
#con-arbre ul{padding-left:18px}

/* ---------- 900 px et plus : deux colonnes dans les vues de liste ---------- */
@media (min-width: 900px){
  .deux-colonnes{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
}

/* ---------- 900 à 1179,98 px : compact ---------- */
@media (min-width: 900px) and (max-width: 1179.98px){
  .cadre{grid-template-columns:76px minmax(0,1fr)}
  .navigation{overflow-x:visible;border-right:1px solid var(--bord);border-bottom:0}
  .nav-liste{flex-direction:column;padding:8px 10px;position:sticky;top:0}
  .nav-entree{justify-content:center;width:54px;min-height:44px;padding:0}
  .nav-texte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .contenu{padding:14px 12px}
  .studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
  .stu-colonne{padding:10px}
}

/* ---------- 1180 px et plus : trois colonnes ---------- */
@media (min-width: 1180px){
  .cadre{grid-template-columns:236px minmax(0,1fr)}
  .navigation{overflow-x:visible;border-right:1px solid var(--bord);border-bottom:0}
  .nav-liste{flex-direction:column;padding:12px;position:sticky;top:0}
  .nav-entree{width:100%}
  .studio{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.05fr)}
}

/* ---------- Moins de 900 px : empilé par étapes, cibles de 44 px ---------- */
@media (max-width: 899.98px){
  .contenu{padding:12px}
  .entete{padding:4px 12px}
  .titre-app{flex-basis:100%;order:3}
  .btn,.filtre,.etape,.nav-entree,.item-liste,.code-item,.concept-bouton,.vue-bouton,.noeud,.choix,.marque,
  input[type="text"],input[type="search"],input[type="password"],input[type="date"],input[type="file"],select,textarea{min-height:44px}
  .btn,.filtre,.etape,.nav-entree{min-width:44px}
  .etapes{display:flex;gap:6px;margin:0 0 10px;overflow-x:auto}
  .studio .stu-colonne{display:none}
  .studio[data-etape="source"] [data-colonne="source"],
  .studio[data-etape="concepts"] [data-colonne="concepts"],
  .studio[data-etape="relation"] [data-colonne="relation"]{display:block}
  .fiche{grid-template-columns:minmax(0,1fr)}
  .liste-boutons,.liste-concepts{max-height:none}
}

/* ---------- Pied de page : version, build, date ---------- */
/* La page est une colonne de toute la hauteur : le pied reste en bas, même sous un contenu court. */
body{min-height:100vh;display:flex;flex-direction:column}
body>.cadre{flex:1 0 auto}
.pied-version{padding:8px 16px;font-size:12px;color:var(--ardoise);text-align:right}