:root {
  --fond: #000;
  --trait: #fff;
  --texte: #fff;
  --discret: #8a8a8a;
  --tres-discret: #2a2a2a;
  --police: 'Fragment Mono', ui-monospace, Menlo, monospace;
  --mono: var(--police);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.45 var(--police);
}

a { color: inherit; }

button, input, select {
  font: inherit;
  color: inherit;
}

.bouton {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.bouton:hover { background: var(--trait); color: var(--fond); }
.bouton.discret { border-color: var(--tres-discret); color: var(--discret); }
.bouton.discret:hover { border-color: var(--trait); background: var(--fond); color: var(--texte); }

.champ {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--discret);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
}
.champ:focus { border-color: var(--trait); }

.etiquette {
  font: 11px/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--discret);
}

kbd {
  font: 11px var(--mono);
  border: 1px solid var(--tres-discret);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--discret);
}

/* ---------- Connexion & liste des projets ---------- */

.entete .compte { display: flex; align-items: center; gap: 6px; }
.entete .compte .etiquette { margin-right: 6px; }
.bouton-icone {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--tres-discret);
  border-radius: 6px;
  cursor: pointer;
}
.bouton-icone[hidden] { display: none; }
.bouton-icone:hover { border-color: var(--trait); }
.bouton-icone svg { width: 16px; height: 16px; fill: none; stroke: var(--trait); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 16px;
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}
.marque { font: 15px var(--mono); letter-spacing: 0.02em; }

.boite {
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 24px;
}

.connexion { max-width: 360px; margin: 18vh auto 0; padding: 0 16px; }
.connexion form { display: grid; gap: 14px; }
.connexion label { display: grid; gap: 6px; }
.erreur { color: #ff6b6b; min-height: 1.4em; margin: 0; }

.nouveau { display: flex; gap: 8px; margin-bottom: 28px; }
.erreur-import { margin: -16px 0 24px; font-size: 13px; color: #ff6b6b; }
.erreur-import[hidden] { display: none; }
#depot {
  position: fixed;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--trait);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  z-index: 50;
  pointer-events: none;
}
#depot[hidden] { display: none; }

.page.large { max-width: 1120px; }

/* Cartes des projets : aperçu cadré du canvas, nom, nombre de panels, date, outils. */
.projets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.carte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--trait);
  border-radius: 10px;
  overflow: hidden;
}
.carte .vignette {
  display: block;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--tres-discret);
}
/* Survol : double trait, comme un panel sélectionné dans l'éditeur. */
.carte { transition: box-shadow 0.12s; }
.carte:hover, .carte:focus-within { box-shadow: 0 0 0 1.5px var(--fond), 0 0 0 3px var(--trait); }
.apercu { display: block; width: 100%; height: 100%; }
.apercu rect { fill: var(--fond); stroke: var(--trait); stroke-width: 1; vector-effect: non-scaling-stroke; }
.apercu .fil { fill: none; stroke: var(--trait); stroke-width: 1; vector-effect: non-scaling-stroke; }
.apercu text { fill: var(--texte); font: 13px var(--police); }
.apercu .fil.discret { opacity: 0.35; }
.apercu .blob { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte .pied { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; }
.carte .textes { flex: 1; min-width: 0; display: grid; gap: 2px; }
.carte .nom { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte .nom:hover { text-decoration: underline; }
.carte .meta { font-size: 11px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outils-carte {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.outils-carte:hover, .outils-carte[aria-expanded="true"] { border-color: var(--trait); }
.outils-carte svg { width: 16px; height: 16px; fill: var(--trait); }
.projets .vide {
  grid-column: 1 / -1;
  border: 1px dashed var(--discret);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  color: var(--discret);
}

/* ---------- Comptes ---------- */

.lien-discret, a.bouton { text-decoration: none; }
.inviter .erreur:empty { display: none; }
.note { font-size: 12px; color: var(--discret); }
select.champ { width: auto; appearance: none; padding-right: 26px; cursor: pointer;
  background: var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff'/%3E%3C/svg%3E") no-repeat right 10px center / 9px; }
.inviter { display: grid; gap: 12px; margin-bottom: 28px; }
.inviter form { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 8px; }
@media (max-width: 640px) { .inviter form { grid-template-columns: 1fr; } }
.lien-a-copier p { margin: 0 0 8px; font-size: 13px; }
.ligne-lien { display: flex; gap: 8px; }
.ligne-lien .champ { font-size: 12px; }
.comptes { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.comptes li {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 10px 8px 10px 16px;
}
.comptes li.inactif { border-color: var(--tres-discret); color: var(--discret); }
.comptes .identite { flex: 1; min-width: 0; display: grid; gap: 2px; }
.comptes .nom, .comptes .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comptes .meta { font-size: 11px; color: var(--discret); }
.comptes .statut { font-size: 11px; color: var(--discret); white-space: nowrap; }
.comptes .role { padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
@media (max-width: 640px) { .comptes .statut { display: none; } }
.menu button:disabled { opacity: 0.35; cursor: default; }
.menu button:disabled:hover { background: none; color: inherit; }
.connexion .boite p { margin: 0; }
.connexion .boite .bouton { justify-self: start; text-decoration: none; }
.connexion .boite:not(form) { display: grid; gap: 14px; }

/* ---------- Éditeur ---------- */

body.editeur { overflow: hidden; overscroll-behavior: none; }

#canvas {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: var(--fond);
  cursor: default;
  touch-action: none;
  user-select: none;
}
#canvas.panoramique { cursor: grab; }
#canvas.panoramique.actif { cursor: grabbing; }

#monde {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

#fils {
  position: absolute;
  left: -50000px;
  top: -50000px;
  width: 100000px;
  height: 100000px;
  overflow: visible;
  pointer-events: none;
}
#fils path { fill: none; stroke: var(--trait); stroke-linecap: round; }
#fils .fil { stroke-width: 1.6; }
#fils .zone { stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
#fils .fil.selection { stroke-width: 3.5; }
#fils .fil.estompe { opacity: 0.15; }
#fils .fil.provisoire { stroke-dasharray: 5 5; }
#fils .fil.provisoire.retrait { stroke-dasharray: 1 5; }
#fils .fil.a-retirer { opacity: 0.2; }
/* Affichage des fils d'une entrée, comme dans Grasshopper. */
#fils .fil.discret { stroke-width: 1; opacity: 0.35; }
#fils .fil.masque { stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; }
/* Groupes en blobs. */
#fils .blob { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: fill; cursor: default; }
#fils .blob:hover { fill: rgba(255, 255, 255, 0.07); }
#fils .blob.selection { stroke: var(--trait); }
#fils .nom-groupe { fill: var(--discret); font: 12px var(--police); }
#fils .guide { stroke: var(--trait); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; vector-effect: non-scaling-stroke; }
/* Écart égal à celui des voisins : trait plein fléché, dans chaque écart concerné. */
#fils .guide.ecart { stroke-dasharray: none; opacity: 0.9; }

.panel {
  position: absolute;
  min-height: 34px;
  background: var(--fond);
  border: 1.5px solid var(--trait);
  border-radius: 8px;
  cursor: default;
}
.panel.selection { box-shadow: 0 0 0 1.5px var(--fond), 0 0 0 3px var(--trait); }
.panel.estompe { opacity: 0.2; }
.panel.trouve { box-shadow: 0 0 0 1.5px var(--fond), 0 0 0 3px var(--trait); }

/* Relais : petit point de passage sur un fil. */
.panel.relais { min-height: 0; height: 18px; border-radius: 50%; }
.panel.relais .texte, .panel.relais .bord { display: none; }
.panel.relais .grip { width: 9px; height: 9px; margin-top: -4.5px; }
.panel.relais .grip.entree { left: -5.5px; }
.panel.relais .grip.sortie { right: -5.5px; }

/* Branche repliée : « +N » après la sortie ; un clic la déplie. */
.panel .repli {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  padding: 1px 6px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--fond);
  color: var(--texte);
  font: 11px var(--police);
  cursor: pointer;
  white-space: nowrap;
}
.panel .repli:hover { background: var(--trait); color: var(--fond); }

.panel .texte {
  padding: 8px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.45 var(--police);
  min-height: 1.45em;
}
.panel .texte:empty::before { content: '…'; color: var(--discret); }

.panel textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--texte);
  font: 13px/1.45 var(--police);
  user-select: text;
}

/* Points de connexion : à mi-hauteur, sur les bords gauche et droit. */
.grip {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border: 1.5px solid var(--trait);
  border-radius: 50%;
  background: var(--fond);
  cursor: crosshair;
}
.grip::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.grip.entree { left: -6.5px; }
.grip.sortie { right: -6.5px; }
.grip.relie { background: var(--trait); }
.grip:hover, .grip.cible { background: var(--trait); transform: scale(1.35); }

.panel.mesure {
  visibility: hidden;
  width: max-content;
  left: -100000px;
  top: -100000px;
}
.panel.mesure .texte, .panel.mesure .valeur { white-space: pre; }

/* Type liste : une entrée par ligne, numérotée, comme un Panel Grasshopper
   sans « Multiline Data ». */
.panel.liste .texte { padding: 0; }
.panel .ligne { display: flex; border-top: 1px solid var(--tres-discret); }
.panel .ligne:first-child { border-top: 0; }
.panel .indice {
  flex: none;
  box-sizing: content-box;
  white-space: nowrap;
  padding: 3px 8px 3px 10px;
  text-align: right;
  color: var(--discret);
}
/* Filet entre indices et contenu : sur toute la hauteur du panel, même quand
   une hauteur fixée dépasse celle du texte. */
.panel.liste::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--colonne);
  width: 1px;
  background: var(--tres-discret);
  pointer-events: none;
}
.panel.liste:has(textarea)::before { display: none; }
.panel .valeur {
  flex: 1;
  min-width: 0;
  padding: 3px 12px 3px 9px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.panel .valeur:empty::before { content: '\200b'; }
.panel.liste .texte:empty { padding: 8px 12px; }

/* Bords de redimensionnement : droite (largeur), bas (hauteur), coin (les deux).
   Double-clic : le cadre épouse le texte. Les points de connexion passent devant. */
.bord { position: absolute; }
.bord.droite { top: 0; bottom: 8px; right: -5px; width: 9px; cursor: ew-resize; }
.bord.bas { left: 0; right: 8px; bottom: -5px; height: 9px; cursor: ns-resize; }
.bord.coin { right: -6px; bottom: -6px; width: 14px; height: 14px; cursor: nwse-resize; }

#lasso {
  position: fixed;
  border: 1px dashed var(--trait);
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  display: none;
}

/* Barre du haut */
.barre {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 10;
}
.barre > * { pointer-events: auto; }
.barre .espace { flex: 1; pointer-events: none; }
.barre .pastille {
  background: var(--fond);
  border: 1px solid var(--tres-discret);
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.barre a.pastille.icone { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; }
.barre .pastille.icone svg { width: 16px; height: 16px; fill: none; stroke: var(--trait); stroke-width: 1.2; }
.barre a.pastille:hover, .barre button.pastille:hover { border-color: var(--trait); cursor: pointer; }
#nom-projet { min-width: 40px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; outline: none; }
#nom-projet:focus { border-color: var(--trait); }
#etat { font: 11px var(--mono); color: var(--discret); border: 0; }
#etat.erreur { color: #ff6b6b; }

.zoom { font: 11px var(--mono); color: var(--discret); white-space: nowrap; }
.outils .zoom { min-width: 5ch; padding: 0 4px 0 6px; text-align: right; font-variant-numeric: tabular-nums; }
.outils .texte-outil { font-size: 13px; color: var(--texte); }

/* Recherche ⌘K */
#recherche {
  position: fixed;
  top: 14vh;
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 10px;
  z-index: 20;
  overflow: hidden;
}
#recherche[hidden] { display: none; }
#recherche input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--tres-discret);
  background: transparent;
  padding: 14px 16px;
  outline: none;
  font-size: 15px;
}
#resultats { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
#resultats li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--discret);
}
#resultats li.actif { background: var(--trait); color: var(--fond); }
#resultats li mark { background: none; color: inherit; text-decoration: underline; }
#resultats .rien { cursor: default; }

/* Aide */
#aide {
  position: fixed;
  right: 16px;
  bottom: 62px;
  background: var(--fond);
  border: 1px solid var(--tres-discret);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  z-index: 10;
}
#aide[hidden] { display: none; }
#aide dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0 0; }
#aide dt { text-align: right; white-space: nowrap; }
#aide dd { margin: 0; color: var(--discret); }

#bandeau {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--trait);
  color: var(--fond);
  border-radius: 8px;
  padding: 8px 14px;
  z-index: 30;
  display: flex;
  gap: 12px;
  align-items: center;
}
#bandeau[hidden] { display: none; }
#bandeau button { background: var(--fond); color: var(--trait); border: 0; border-radius: 5px; padding: 4px 10px; cursor: pointer; }

/* Barre d'alignement : visible en sélection multiple */
.outils {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--fond);
  border: 1px solid var(--tres-discret);
  border-radius: 8px;
  z-index: 10;
}
.outils[hidden] { display: none; }
.outils button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.outils button:hover:not(:disabled) { border-color: var(--trait); }
.outils button:disabled { opacity: 0.3; cursor: default; }
.outils svg { width: 16px; height: 16px; fill: none; stroke: var(--trait); stroke-width: 1.2; }
.outils svg .plein { fill: var(--trait); stroke: none; }
.outils.bas-droite { left: auto; right: 16px; transform: none; }
.outils .separateur { width: 1px; height: 18px; margin: 0 4px; background: var(--tres-discret); }

/* Menu du clic droit */
.menu {
  position: fixed;
  z-index: 30;
  min-width: 220px;
  padding: 4px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
}
.menu[hidden] { display: none; }
.menu button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 10px 6px 8px;
  background: none;
  border: 0;
  border-radius: 5px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}
.menu button:hover { background: var(--trait); color: var(--fond); }
.menu .coche { width: 1ch; }
.menu hr { border: 0; border-top: 1px solid var(--tres-discret); margin: 4px 2px; }
.menu [aria-checked="true"] .coche::before { content: '✓'; }
.menu .detail { margin-left: auto; color: var(--discret); font-size: 11px; }
.menu button:hover .detail { color: inherit; }

/* Mode présentation : lecture seule, interface réduite à l'essentiel */
#presentation .sortir, body.presentation #presentation .entrer { display: none; }
body.presentation #presentation .sortir { display: block; }
body.presentation .barre,
body.presentation #aligner,
body.presentation #menu,
body.presentation #recherche,
body.presentation #aide,
body.presentation #bandeau,
body.presentation .outils.bas-droite > :not(.garde) { display: none; }
body.presentation .outils.bas-droite { opacity: 0.4; transition: opacity 0.2s; }
body.presentation .outils.bas-droite:hover { opacity: 1; }
body.presentation #monde,
body.presentation #fils { user-select: none; -webkit-user-select: none; }
body.presentation .panel { cursor: grab; }
body.presentation .panel.selection { border-color: var(--trait); box-shadow: none; }
body.presentation .grip,
body.presentation .bord,
body.presentation .zone,
body.presentation .blob { pointer-events: none; }
body.presentation .bord { display: none; }
body.presentation #canvas.actif { cursor: grabbing; }