/* ============================================================
   TNI — feuille de style (v1.2, menus compacts)
   Thèmes : clair / sombre / vert pastel / bleu pastel
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}

/* ---------- Thèmes ---------- */
body[data-theme="clair"] {
  --panel: #f4f6f9;
  --panel2: #ffffff;
  --text: #1f2630;
  --muted: #66707d;
  --border: #d3d9e0;
  --accent: #1976d2;
  --accent-text: #ffffff;
  --shadow: 0 2px 8px rgba(0,0,0,.14);
}
body[data-theme="sombre"] {
  --panel: #22262c;
  --panel2: #2c3138;
  --text: #e8eaee;
  --muted: #9aa3ad;
  --border: #3c434c;
  --accent: #4f9cf0;
  --accent-text: #0d1117;
  --shadow: 0 2px 10px rgba(0,0,0,.55);
}
body[data-theme="vert"] {
  --panel: #e6f2e8;
  --panel2: #f7fbf8;
  --text: #25402f;
  --muted: #6c8a77;
  --border: #c5ddcc;
  --accent: #69a583;
  --accent-text: #ffffff;
  --shadow: 0 2px 8px rgba(60,110,80,.18);
}
body[data-theme="bleu"] {
  --panel: #e7eff7;
  --panel2: #f6fafd;
  --text: #243749;
  --muted: #6b8094;
  --border: #c6d9e7;
  --accent: #74a4cc;
  --accent-text: #ffffff;
  --shadow: 0 2px 8px rgba(60,90,120,.18);
}

/* ---------- Profil d'affichage (Général → Modèle) ---------- */
body {
  --ui-titre: 8px;
  --ui-font: 14px;
  --ui-left-w: 250px;
  --ui-right-w: 220px;
  --ui-btn: 38px;
  --ui-radius: 12px;
  --ui-opacity: 0.9;
}

.hidden { display: none !important; }

/* ============ ÉCRAN DE CONNEXION ============
   Les couleurs de cet écran sont écrites en dur, sans variable de thème :
   l'accueil précède le choix du cours, donc l'habillage de l'utilisateur
   n'est pas encore appliqué. Vert du logo : #1b4332 / #74c69d. */
#login {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #1b4332, #123026 55%, #0d2019);
}
.login-card {
  width: 320px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  color: #eaf3ee;
}
.login-logo { width: 108px; height: 108px; display: block; }
.login-title { margin: 6px 0 0; font-size: 34px; font-weight: 800; letter-spacing: 4px; }
.login-sub { margin: 0; font-size: 15px; color: #bcd6c8; max-width: 34ch; }

.login-form { width: 100%; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
#login label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: #bcd6c8; text-align: left;
}
#login input, #login select {
  width: 100%; padding: 9px 10px; font-size: 15px;
  border: 1px solid #35735a; border-radius: 8px;
  background: rgba(255, 255, 255, .06); color: #eaf3ee;
  font-family: inherit;
}
#login input::placeholder { color: #6f9583; }
#login input:focus, #login select:focus {
  outline: none; border-color: #74c69d; box-shadow: 0 0 0 3px rgba(116, 198, 157, .25);
}
/* la liste déroulée est dessinée par le système : fond clair imposé,
   sinon les noms de cours ressortent blanc sur blanc sous Windows */
#login select option { background: #ffffff; color: #1f2630; }

.login-error { color: #ffb4ae; margin: 0; font-size: 14px; }
/* #login en tête : sinon .btn.primary (couleur d'accent du thème) l'emporte */
#login .login-btn {
  margin-top: 4px; width: 100%;
  padding: 12px 34px; font-size: 16px; font-weight: 700; border-radius: 10px;
  background: #2d6a4f; border-color: #2d6a4f; color: #ffffff;
}
#login .login-btn:hover { background: #35805e; filter: none; }
/* « Accès libre » : bouton secondaire (contour), moins appuyé que « Entrer » */
#login #loginFreeBtn { background: transparent; border: 2px solid #2d6a4f; color: #cfeadd; font-weight: 600; }
#login #loginFreeBtn:hover { background: rgba(45,106,79,.35); }
.login-opt { font-weight: 400; font-size: 12px; color: #8fb3a0; }
.login-hint { margin: 2px 0 0; font-size: 12.5px; color: #8fb3a0; }
.login-credits { margin: 22px 0 0; font-size: 12px; color: #6f9583; }

/* ============ STRUCTURE ============ */
#viewport {
  position: fixed; inset: 0; z-index: 0;
  background: #ffffff;
  touch-action: none;
  overflow: hidden;
  cursor: grab;
}
#world {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0;
}
.layer { position: absolute; left: 0; top: 0; }
.layer svg.strokes {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  overflow: visible; pointer-events: none;
}
.layer .items { position: absolute; left: 0; top: 0; }

/* Curseur selon l'outil */
body.tool-select #viewport { cursor: default; }
body.tool-pan #viewport { cursor: grab; }
body.tool-pen #viewport, body.tool-high #viewport, body.tool-chalk #viewport { cursor: crosshair; }
body.tool-eraser #viewport { cursor: none; }
body.tool-pen .item, body.tool-high .item, body.tool-chalk .item, body.tool-eraser .item,
body.tool-pan .item { pointer-events: none; }
/* outil Texte : clic = nouvelle zone ; les textes existants restent
   cliquables (modification directe), le reste est traversé */
body.tool-text #viewport { cursor: text; }
body.tool-text .item { pointer-events: none; }
body.tool-text .item.i-text, body.tool-text .item.i-word { pointer-events: auto; cursor: text; }

#eraserCursor {
  position: fixed; z-index: 5; pointer-events: none;
  border: 2px solid #e53935; border-radius: 50%;
  background: rgba(229,57,53,.12);
  transform: translate(-50%, -50%);
}

/* ============ PANNEAUX (compacts) ============ */
.ui { z-index: 10; color: var(--text); font-size: var(--ui-font); }

/* Deux lignes : les outils de tracé sur la première, les réglages (taille,
   couleurs, annuler) sur la seconde. Le logo tient la hauteur des deux. */
#topbar {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--ui-radius); padding: 4px 8px; box-shadow: var(--shadow);
  opacity: var(--ui-opacity);
  max-width: calc(100vw - 440px);
}
.topbar-lignes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.topbar-ligne {
  display: flex; align-items: center; gap: 5px;
  /* jamais de 3e ligne ; space-between : les deux lignes remplissent la même
     largeur, donc les bords des icônes du haut s'alignent sur ceux du bas */
  flex-wrap: nowrap; justify-content: space-between;
}
/* 2e ligne : trois groupes (taille / couleurs / annuler-refaire-corbeille) ;
   écart un peu plus grand entre les groupes (chiffre ↔ pastille couleur) */
.topbar-ligne2 { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.tb-grp { display: flex; align-items: center; gap: 5px; }
/* annuler / rétablir / corbeille : ~20% plus petits (surclasse .tool-btn) */
.tool-btn.nav-btn {
  width: calc(var(--ui-btn) * 0.8); height: calc(var(--ui-btn) * 0.8);
  font-size: calc(var(--ui-btn) * 0.8 * 0.48);
}
.topbar-logo {
  display: flex; align-items: center; flex: none;
  padding: 0; border: none; background: none; cursor: pointer;
}
.topbar-logo svg { width: calc(var(--ui-btn) * 1.44); height: calc(var(--ui-btn) * 1.44); display: block; }
.topbar-logo:hover { filter: brightness(1.1); }
.topbar-logo:active { transform: scale(.95); }
/* colonne de boutons superposés à droite : étirée sur la hauteur de la barre
   et répartie (même écart en haut, en bas et entre les deux boutons) */
.topbar-side { display: flex; flex-direction: column; flex: none; align-self: stretch; justify-content: space-evenly; }
.brand-btn {
  width: 27px; height: 27px; padding: 3px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel2);
  color: var(--text); cursor: pointer;
}
.brand-btn:hover { background: var(--hover, rgba(0,0,0,.06)); }
.brand-btn:active { transform: scale(.94); }
.brand-btn[aria-pressed="true"] { border-color: var(--accent, #1e88e5); color: var(--accent, #1e88e5); }
.brand-btn svg { width: 100%; height: 100%; display: block; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sep-haute { height: calc(var(--ui-btn) * 1.7); }

/* petit repère « appui long = menu » (coin bas-droit d'un bouton d'outil) */
.tool-btn.has-pop { position: relative; }
.tool-btn.has-pop::after {
  content: ""; position: absolute; right: 3px; bottom: 3px;
  border: 3px solid transparent; border-right-color: var(--muted); border-bottom-color: var(--muted);
}
/* menu contextuel d'un outil (stylo → stylo / craie) */
.tool-pop {
  position: fixed; z-index: 60; padding: 4px; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
}
.tool-pop-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: none; border-radius: 7px;
  background: none; color: var(--text); cursor: pointer; font-size: var(--ui-font); text-align: left; white-space: nowrap;
}
.tool-pop-item:hover { background: var(--panel2); }
.tool-pop-item.active { background: var(--accent); color: var(--accent-text); }
.tool-pop-item .ico { width: 1.2em; height: 1.2em; }

/* lien des crédits (dialogue « dire ») */
.dlg-lien a { display: inline-block; font-weight: 700; color: var(--accent, #1e88e5);
  text-decoration: none; border-bottom: 1px solid currentColor; }
.dlg-lien a:hover { filter: brightness(1.15); }
/* fenêtre « à propos » (clic sur le logo) : logo, crédits et lien centrés */
.modal.dlg-apropos .dlg-logo { display: flex; justify-content: center; margin: 4px 0 10px; }
.modal.dlg-apropos .dlg-logo.hidden { display: none; }
.modal.dlg-apropos .dlg-logo svg { width: 96px; height: 96px; }
.modal.dlg-apropos .dlg-texte, .modal.dlg-apropos .dlg-lien { text-align: center; }

/* Masquer les menus : les deux colonnes glissent vers l'extérieur (effet doux). */
#leftPanel, #rightPanel { transition: transform .35s ease, opacity .35s ease; will-change: transform; }
body.panneaux-caches #leftPanel { transform: translateX(calc(-100% - 12px)); opacity: 0; pointer-events: none; }
body.panneaux-caches #rightPanel { transform: translateX(calc(100% + 12px)); opacity: 0; pointer-events: none; }
#leftPanel {
  position: fixed; left: 6px; top: 6px; bottom: 6px; width: var(--ui-left-w);
  overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}
#rightPanel {
  position: fixed; right: 6px; top: 6px; bottom: 6px; width: var(--ui-right-w);
  overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}

.panel-box {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--ui-radius); box-shadow: var(--shadow); overflow: hidden;
  flex-shrink: 0;
  opacity: var(--ui-opacity);
}
.panel-box h3 {
  margin: 0; padding: var(--ui-titre) 10px; font-size: calc(var(--ui-font) - 3px); text-transform: uppercase;
  letter-spacing: .5px; cursor: pointer; background: var(--panel2);
  border-bottom: 1px solid var(--border);
}
.panel-box h3::after { content: " ▾"; float: right; color: var(--muted); }
.panel-box.collapsed h3::after { content: " ▸"; }
.panel-box.collapsed .box-body { display: none; }
.box-body { padding: 7px 8px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Volets internes (sub) ---------- */
.sub {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel2); overflow: hidden;
}
.sub > h4 {
  margin: 0; padding: calc(var(--ui-titre) * 0.8) 8px; font-size: calc(var(--ui-font) - 3px); font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); cursor: pointer;
}
.sub > h4::after { content: " ▸"; float: right; }
.sub.open > h4::after { content: " ▾"; }
.sub > .sub-body { display: none; padding: 6px 8px; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); }
.sub.open > .sub-body { display: flex; }

.row { display: flex; gap: 5px; align-items: center; }
.row.center { justify-content: center; }
.row.right { justify-content: flex-end; }
.row.nowrap { flex-wrap: nowrap; }
.hint { font-size: calc(var(--ui-font) - 4px); color: var(--muted); margin: 0; line-height: 1.3; }

/* ---------- Icônes SVG ---------- */
/* Taille en em : une icône suit la taille de texte de son bouton, donc
   les modèles Confort / Compact / Mini et les styles de design.css la
   redimensionnent sans règle supplémentaire. La couleur vient de
   currentColor : sur .tool-btn.active, l'icône passe en blanc toute
   seule. pointer-events:none — le clic vise toujours le bouton. */
.ico {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.18em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; flex: none;
}
/* trait constant quelle que soit la taille affichée */
.ico { vector-effect: non-scaling-stroke; }

/* --- Variantes de jeu d'icônes (réglage « Mon profil » → Icônes) ---
   Le jeu « epais » réutilise les dessins du jeu « trait » : seule
   l'épaisseur change ici. Les jeux « plein » et « emoji » n'ont aucun
   contour — leurs symboles sont entièrement remplis. */
body[data-icones="epais"] .ico { stroke-width: 2.7; }
body[data-icones="plein"] .ico,
body[data-icones="emoji"] .ico { fill: currentColor; stroke: none; }
/* les émojis en couleur ne doivent pas être repeints par currentColor ;
   seuls les signes monochromes (✕ ↶ ＋) héritent de la couleur du texte */
body[data-icones="emoji"] .ico text { fill: currentColor; }
/* Jeu « duotone » (BASE/js/icons.js) : voile et détails dans les verts du
   logo. Le contour vert forêt n'est posé qu'en Glass (design clair pour
   lequel il a été dessiné) ; ailleurs il suit la couleur du texte, ce qui
   reste lisible sur les boutons sombres (skeuomorphisme, réalisme…). */
body[data-icones="duo"] {
  --duo-trait: currentColor; --duo-teinte: #74c69d; --duo-accent: #40916c;
  --duo-teinte-op: .45; --duo-fort-op: .6;
}
body[data-icones="duo"][data-design="glass"] { --duo-trait: #1b4332; }
/* sur un fond d'accent, tout passe à la couleur du texte (blanc) */
body[data-icones="duo"] .tool-btn.active,
body[data-icones="duo"] .tool-pop-item.active,
body[data-icones="duo"] .btn.primary,
body[data-icones="duo"] .btn.active,
body[data-icones="duo"] .fmt.active {
  --duo-trait: currentColor; --duo-teinte: currentColor; --duo-accent: currentColor;
  --duo-teinte-op: .32; --duo-fort-op: .45;
}
/* boutons à libellé (« ＋ Nouveau ») : l'icône précède le texte */
.btn .ico { margin-right: .4em; }
.btn .ico:only-child { margin-right: 0; }
/* barre d'outils : icône seule, centrée */
.tool-btn { display: inline-flex; align-items: center; justify-content: center; }
.tool-btn .ico { width: 1.25em; height: 1.25em; vertical-align: 0; }

/* ---------- Boutons & champs ---------- */
.btn {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: calc(var(--ui-radius) * 0.7);
  background: var(--panel2); color: var(--text); font-size: calc(var(--ui-font) - 1px); cursor: pointer;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.btn.small { padding: 3px 7px; font-size: calc(var(--ui-font) - 2px); }
.btn.wide { width: 100%; }

/* Boutons du volet « Général » : icône bien détachée du libellé,
   texte en capitales pour l'harmonie avec les titres */
.gen-btn { display: flex; align-items: center; gap: 12px; text-align: left; padding: 7px 12px; }
.gen-btn .ico { width: 1.35em; height: 1.35em; margin-right: 0; flex: none; }
.gen-btn span { text-transform: uppercase; letter-spacing: .02em; }
#themeContentSelect { text-transform: uppercase; }

select, input[type="text"], input[type="number"], textarea {
  padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel2); color: var(--text); font-size: calc(var(--ui-font) - 1px); width: 100%;
  font-family: inherit;
}
textarea { resize: vertical; }

/* ---------- Barre d'outils stylet ---------- */
.tool-btn {
  width: var(--ui-btn); height: var(--ui-btn); font-size: calc(var(--ui-btn) * 0.48); line-height: 1;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel2); color: var(--text); cursor: pointer;
}
.tool-btn:hover { filter: brightness(1.07); }
.tool-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.size-lab { display: flex; align-items: center; gap: 2px; font-size: 12px; }
/* course plus courte : la graduation ne va plus que jusqu'à 60, et c'est
   cette seconde ligne qui fixait la largeur de toute la barre */
.size-lab input[type="range"] { width: 62px; }
#sizeVal { min-width: 18px; text-align: right; }
.swatch {
  width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; display: inline-block; vertical-align: middle; margin: 0 1px;
}
.swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
#colorPick { width: 27px; height: 27px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel2); cursor: pointer; }

/* ---------- Paramètres de l'objet (bas, centre) ----------
   Boîte UNIQUE, largeur de la barre d'outils (fixée par props.js) :
   un bandeau d'onglets choisit la section, le corps n'affiche qu'elle.  */
#objbar {
  position: fixed; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; z-index: 10;
  box-sizing: border-box; max-width: calc(100vw - 24px);
  padding: 6px; border: 1px solid var(--border); border-radius: var(--ui-radius);
  background: var(--panel); box-shadow: var(--shadow); opacity: var(--ui-opacity);
}
/* bandeau : onglets (à gauche) + bouton réduire (à droite) */
#objbarHead { display: flex; align-items: center; gap: 6px; }
#objbarTabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; min-width: 0; }
.objtab {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel2); color: var(--muted); cursor: pointer;
  font-size: calc(var(--ui-font) - 2px); font-weight: 600; white-space: nowrap;
}
.objtab:hover { filter: brightness(1.07); }
.objtab.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
#objbarCollapse { flex: none; }
/* corps : seule la section de l'onglet actif s'affiche */
#objbarBody > .sub { display: none; border: none; box-shadow: none; background: transparent; border-radius: 0; }
#objbarBody > .sub.objtab-active { display: block; }
#objbarBody > .sub > h4 { display: none; }                       /* remplacé par l'onglet */
#objbarBody > .sub > .sub-body { border-top: none; padding: 2px; }
#objbarBody .row { flex-wrap: wrap; }
/* réduit : on masque le corps, on ne garde que le bandeau d'onglets */
#objbar.reduit #objbarBody { display: none; }

#objbar select { width: auto; }
#objbar input[type="range"] { width: 90px; }
#objbar input[type="color"] {
  width: 27px; height: 27px; padding: 2px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--panel2); cursor: pointer;
}
#fontSizeVal { min-width: 20px; font-size: 12px; text-align: right; }
/* boutons de mise en forme du texte (gras, italique, souligné, barré, surlignage) */
#objTextSec .fmt { min-width: 30px; }
#objTextSec .fmt.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* fiche d'un texte documenté (auteur, date, source, statut) */
.fiche { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 620px; }
.fiche-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; }
.fiche dt { margin: 0; color: var(--muted); font-weight: 700; font-size: calc(var(--ui-font) - 3px);
  text-transform: uppercase; letter-spacing: .3px; }
.fiche dd { margin: 0; color: var(--text); font-size: calc(var(--ui-font) - 1px); line-height: 1.35; }

/* ---------- Miniature / zoom ---------- */
#minimap {
  width: 100%; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; cursor: pointer; display: block; touch-action: none;
}
#zoomVal { min-width: 44px; text-align: center; font-size: 12px; }
#zoomSlider { flex: 1; min-width: 0; }

/* ---------- Calques ---------- */
#layerList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#layerList li {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 5px; padding: 3px 6px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
  cursor: pointer; font-size: 12px; flex-wrap: wrap;
}
#layerList .lopacity { width: 100%; order: 10; height: 12px; }
#layerList li.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#layerList .lname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#layerList .leye, #layerList .ldel { cursor: pointer; background: none; border: none; font-size: 13px; padding: 0; color: var(--text); }
#layerList .lmove { cursor: grab; background: none; border: none; font-size: 14px; padding: 0 2px; color: var(--muted); touch-action: none; }
#layerList li.dragging { opacity: .75; border-style: dashed; z-index: 5; border-color: var(--accent); }
#layerList .leye.off { opacity: .3; }

/* ---------- Pages / fonds ---------- */
#pageVal { min-width: 36px; text-align: center; font-size: 12px; }
.page-thumb { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.bg-btn { background: none; border: 2px solid var(--border); border-radius: 7px; padding: 2px; cursor: pointer; }
.bg-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bg-prev { display: block; width: 26px; height: 20px; border-radius: 4px; }
.bg-blanc { background: #fff; border: 1px solid #ccc; }
.bg-noir { background: #15171a; }
.bg-vert { background: #2f5d43; }
.bg-lignes {
  background: #fff linear-gradient(to bottom, transparent 86%, #9ec5e8 86%, #9ec5e8 100%);
  background-size: 100% 8px; border: 1px solid #ccc;
}
.bg-quadrille {
  background-color: #fff;
  background-image: linear-gradient(#c9d4de 1px, transparent 1px), linear-gradient(90deg, #c9d4de 1px, transparent 1px);
  background-size: 8px 8px; border: 1px solid #ccc;
}
.bg-seyes {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, #e8b4cc 1px, transparent 1px),
    linear-gradient(#9ec5e8 1px, transparent 1px),
    linear-gradient(#dde9f4 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px, 10px 3px;
  border: 1px solid #ccc;
}
.bg-millimetre {
  background-color: #fff;
  background-image:
    linear-gradient(#cf7a4a 1px, transparent 1px),
    linear-gradient(90deg, #cf7a4a 1px, transparent 1px),
    linear-gradient(#ecb597 .5px, transparent .5px),
    linear-gradient(90deg, #ecb597 .5px, transparent .5px);
  background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;
  border: 1px solid #ccc;
}
.bg-musique {
  background-color: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, #6b7682 3px, #6b7682 4px);
  border: 1px solid #ccc;
}
#bgColorPick {
  width: 32px; height: 28px; padding: 2px; border: 2px solid var(--border);
  border-radius: 7px; background: var(--panel2); cursor: pointer;
}
#bgColorPick.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.slider-lab { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.slider-lab input[type="range"] { width: 100%; }
/* tous les curseurs prennent la couleur d'accent (profil ou design),
   au lieu du bleu par défaut du navigateur */
input[type="range"] { accent-color: var(--accent); }
/* bulle de valeur au survol / glissement d'un curseur (BASE/js/infobulle-curseur.js) */
.curseur-bulle {
  position: fixed; z-index: 100000; pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
  padding: 3px 8px; border-radius: 7px;
  background: rgba(20, 28, 24, .92); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  font: 600 12px/1.2 system-ui, sans-serif; white-space: nowrap;
  opacity: 0; transition: opacity .12s;
}
.curseur-bulle.visible { opacity: 1; }
.curseur-bulle::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(20, 28, 24, .92);
}

/* ---------- Bibliothèque ---------- */
#libTabs { display: flex; flex-wrap: wrap; gap: 3px; }
.lib-tab {
  padding: 2px 7px; font-size: 11px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer;
}
.lib-tab.active { background: var(--accent); color: var(--accent-text); border-color: transparent; }
/* Les deux listes — celle du cours et la commune — ont le même balisage,
   donc les mêmes règles. */
#libList, #comList { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
#libList li, #comList li {
  display: flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel2);
}
#libList .libname, #comList .libname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
#libList .libname:hover, #comList .libname:hover { color: var(--accent); }
#libList .libdel, #comList .libdel { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--text); }
.lib-empty { font-size: 11px; color: var(--muted); padding: 3px; }

/* Onglet Images : un aperçu vaut mieux qu'un nom de fichier. La liste
   s'allonge, sans quoi deux vignettes rempliraient déjà la hauteur. */
#libList.vignettes, #comList.vignettes { max-height: 280px; }
.libvign {
  width: 42px; height: 42px; flex: none; object-fit: cover;
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel);
}

/* ---------- Glisser un élément de la bibliothèque sur le tableau ----------
   pan-y : le doigt fait toujours défiler la liste de haut en bas ; c'est le
   mouvement horizontal, vers le tableau, qui emporte l'élément. */
#libList .libname, #comList .libname,
#libList .libvign, #comList .libvign {
  cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-drag: none;
}
#libList .libname:active, #comList .libname:active,
#libList .libvign:active, #comList .libvign:active { cursor: grabbing; }

.lib-fantome {
  position: fixed; z-index: 2000; pointer-events: none;
  transform: translate(12px, 12px);
  display: flex; align-items: center; gap: 6px;
  max-width: 240px; padding: 4px 8px;
  font-size: calc(var(--ui-font) - 2px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--accent); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.lib-fantome img { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 4px; }
.lib-fantome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* hors du tableau : le lâcher ne posera rien */
.lib-fantome.hors { border-color: #e53935; opacity: .55; }

/* ============ OBJETS SUR LE TABLEAU ============ */
.item { position: absolute; touch-action: none; }
.item.selected { outline: 2px dashed var(--accent); outline-offset: 3px; }
.item .item-del {
  position: absolute; top: -14px; right: -14px; width: 24px; height: 24px;
  border-radius: 50%; border: none; background: #e53935; color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; display: none; z-index: 3;
}
.item .item-resize {
  position: absolute; right: -10px; bottom: -10px; width: 18px; height: 18px;
  background: var(--accent); border-radius: 4px; cursor: nwse-resize; display: none; z-index: 3;
}
.item.selected .item-del, .item.selected .item-resize { display: block; }
.item .grip {
  position: absolute; left: 0; right: 0; top: -18px; height: 16px;
  background: var(--accent); border-radius: 5px 5px 0 0; cursor: move;
  display: none; opacity: .85;
}
.item.selected .grip { display: block; }

.item.i-text {
  min-width: 60px; max-width: 900px; padding: 8px 12px;
  background: rgba(255,255,253,.95); border: 1px solid #cfd6dd; border-radius: 8px;
  font-size: 24px; color: #1f2630; cursor: move; white-space: pre-wrap;
}
.item .txt { white-space: pre-wrap; }
.item .txt .txt-par { margin: 0; }
.item .txt .txt-par + .txt-par { margin-top: .5em; }
.item .txt[contenteditable="true"] { cursor: text; -webkit-user-select: text; user-select: text; }

.item.i-word {
  padding: 6px 14px; border-radius: 22px; font-size: 24px; font-weight: 600;
  background: #fff3c4; border: 2px solid #e0a800; color: #4e3b00; cursor: move;
  box-shadow: 0 2px 4px rgba(0,0,0,.2); white-space: nowrap;
}
.item.i-word.w-pronom { background: #cfe8ff; border-color: #2f7fd1; color: #0d3a66; }
.item.i-word.w-verbe { background: #ffd9d9; border-color: #d14b4b; color: #6e1212; }
.item.i-word .txt { white-space: nowrap; }

.item.i-image img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.item.i-image { cursor: move; }
.item.i-media audio, .item.i-media video, .item.i-media iframe {
  width: 100%; display: block; border: none; background: #000; border-radius: 6px;
}
.item.i-media video, .item.i-media iframe { height: 100%; }

/* ---------- Tableau (outil) ---------- */
.item.i-table { background: transparent; }
.tbl { display: grid; position: relative; background: rgba(255,255,255,.96); }
.tbl .cell {
  border: 1px solid #5a6470; padding: 4px 6px; font-size: 18px; color: #1f2630;
  overflow: hidden; outline: none; -webkit-user-select: text; user-select: text;
}
.tbl .cell.selcell {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background-image: linear-gradient(rgba(25,118,210,.14), rgba(25,118,210,.14));
}
.tbl-h {
  position: absolute; z-index: 2; background: transparent;
}
.tbl-h.col { width: 10px; cursor: col-resize; top: 0; }
.tbl-h.row { height: 10px; cursor: row-resize; left: 0; }
.tbl-h:hover { background: rgba(25,118,210,.35); }
.tbl-add {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: var(--accent); color: var(--accent-text);
  font-size: 14px; line-height: 1; cursor: pointer; display: none; z-index: 3;
}
.item.selected .tbl-add { display: block; }
.tbl-add.addcol { right: -28px; top: calc(50% - 11px); }
.tbl-add.addrow { bottom: -28px; left: calc(50% - 11px); }

/* ============ MODALES ============ */
.modal-back {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px; width: 360px; max-width: 92vw;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 50px rgba(0,0,0,.4);
}
.modal h2 { margin: 0 0 4px; font-size: 18px; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* ---------- Dialogues intégrés : liste de choix ---------- */
.dlg-liste { display: flex; flex-direction: column; gap: 5px; max-height: 42vh; overflow-y: auto; }
.dlg-liste .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.dlg-detail { font-size: calc(var(--ui-font) - 3px); color: var(--muted); }

/* ============ PLAN DE CLASSE ============ */
.seat-wrap {
  background: var(--panel); border-radius: 14px; border: 1px solid var(--border);
  width: min(1100px, 94vw); height: min(700px, 90vh);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow);
}
.seat-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--panel2); border-bottom: 1px solid var(--border); color: var(--text);
}
.seat-bar .hint { flex: 1; }
#seatArea { position: relative; flex: 1; background: var(--panel2); overflow: hidden; }
.seat-board {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 50%; padding: 8px; text-align: center; border-radius: 6px;
  background: #2e7d32; color: #fff; font-weight: 700; letter-spacing: 3px;
}
/* Les trois mesures sont pilotées par #seatArea : un plan importé depuis
   le logiciel « Plan de classe » garde les proportions de la vraie salle,
   et les tables doivent rétrécir en conséquence pour ne pas se chevaucher. */
.seat {
  position: absolute; width: var(--seat-w, 110px); height: var(--seat-h, 64px);
  background: #fff8e1; border: 2px solid #c8a23a; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--seat-fs, 14px); font-weight: 600; color: #4e3b00; cursor: move;
  padding: 4px; touch-action: none; overflow: hidden;
}
.seat .seat-del {
  position: absolute; top: -10px; right: -10px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: #e53935; color: #fff;
  cursor: pointer; font-size: 12px; line-height: 1;
}

/* ---------- La salle importée (décor) ----------
   Contour, murs, sol et mobilier repris d'un plan créé avec le logiciel
   « Plan de classe » : mêmes couleurs, pour que l'enseignant reconnaisse
   sa salle. C'est un DÉCOR — pointer-events: none — le TNI n'offre aucun
   moyen d'y toucher : tout se modifie dans le logiciel d'origine. */
.salle {
  position: absolute;
  box-sizing: content-box;    /* la largeur est celle de l'intérieur, les murs s'ajoutent autour */
  border-style: solid;
  border-radius: 6px;
  pointer-events: none;
  --mur: #efe6d2; --mur-trait: #d8caa8; --sol: #d9c3a0; --sol-trait: #c8ad82;
  border-color: var(--mur);
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--carreau) - 1px), var(--sol-trait) calc(var(--carreau) - 1px) var(--carreau)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--carreau) - 1px), var(--sol-trait) calc(var(--carreau) - 1px) var(--carreau)),
    var(--sol);
  box-shadow: inset 0 0 0 1px var(--mur-trait), 0 0 0 1px var(--mur-trait);
}
/* salle de sciences : murs blancs, carrelage gris */
.salle[data-piece="science"] {
  --mur: #ffffff; --mur-trait: #dfe6ee; --sol: #cfd6dd; --sol-trait: #b9c2cc;
}

.meuble {
  position: absolute; transform-origin: center center;
  border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.22);
}
.meuble-nom {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-weight: 700; white-space: nowrap; line-height: 1;
  color: #3a2a17; text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.meuble[data-type="blackboard"] { background: #22472f; border: 2px solid #7a5230; }
.meuble[data-type="whiteboard"] { background: #f8fafc; border: 2px solid #aeb8c4; }
.meuble[data-type="tni"] { background: linear-gradient(#1b4a7a, #123a63); border: 2px solid #0c2947; }
.meuble[data-type="blackboard"] .meuble-nom,
.meuble[data-type="tni"] .meuble-nom { color: #eef4ff; text-shadow: none; }
.meuble[data-type="whiteboard"] .meuble-nom { color: #5a6472; text-shadow: none; }

/* Fenêtre : vitrage translucide, le mur reste visible au travers. */
.meuble[data-type="window"] {
  background: repeating-linear-gradient(90deg, #cdeafe 0 18px, #a9d4f0 18px 20px);
  border: 2px solid #7fb4d6; opacity: .55; box-shadow: none;
}
.meuble[data-type="door"] {
  background: linear-gradient(#c08a52, #a5713d);
  border: 2px solid #7c5327; border-radius: 4px 4px 0 0;
}
.meuble[data-type="desk"] { background: linear-gradient(#9a774d, #7d5f3b); border: 2px solid #543f27; }
.meuble[data-type="desk"] .meuble-nom { color: #fff4e2; }

/* Armoire : un liseré évoque les portes (deux battants, ou une poignée). */
.meuble[data-type="armoire"],
.meuble[data-type="armoire1"] { background: linear-gradient(#9a774d, #7d5f3b); border: 2px solid #543f27; }
.meuble[data-type="armoire"]::after {
  content: ""; position: absolute; left: 50%; top: 3px; bottom: 3px;
  width: 2px; background: rgba(0,0,0,.35); transform: translateX(-50%);
}
.meuble[data-type="armoire1"]::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 2px; height: 9px; background: rgba(0,0,0,.35); transform: translateY(-50%);
}
.meuble[data-type="armoire"] .meuble-nom,
.meuble[data-type="armoire1"] .meuble-nom { color: #fff4e2; }

/* En salle de sciences : bureau en paillasse grise, armoires blanches. */
.salle[data-piece="science"] .meuble[data-type="desk"] {
  background: linear-gradient(#9aa9bd, #7d8da2); border: 2px solid #5f7085;
}
.salle[data-piece="science"] .meuble[data-type="desk"] .meuble-nom { color: #22303c; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.salle[data-piece="science"] .meuble[data-type="armoire"],
.salle[data-piece="science"] .meuble[data-type="armoire1"] {
  background: linear-gradient(#eef1f5, #dbe1e9); border: 2px solid #c3ccd8;
}
.salle[data-piece="science"] .meuble[data-type="armoire"]::after,
.salle[data-piece="science"] .meuble[data-type="armoire1"]::after { background: rgba(0,0,0,.18); }
.salle[data-piece="science"] .meuble[data-type="armoire"] .meuble-nom,
.salle[data-piece="science"] .meuble[data-type="armoire1"] .meuble-nom { color: #22303c; text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* ---------- Aperçu des pages ----------
   Une planche de vignettes pour choisir sa page sans les feuilleter toutes. */
.pages-wrap {
  background: var(--panel); border-radius: 14px; border: 1px solid var(--border);
  width: min(1100px, 94vw); height: min(700px, 90vh);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow);
}
.pages-grille {
  flex: 1; overflow-y: auto; padding: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  /* max-content : sans cela, passé une dizaine de pages, les rangées se
     tassent pour tenir dans la fenêtre et les aperçus deviennent des
     bandeaux illisibles. Ici elles gardent leur hauteur et la planche défile. */
  grid-auto-rows: max-content;
  align-content: start;
  background: var(--panel2);
}
.page-vignette {
  position: relative; padding: 0; cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 2px solid var(--border); border-radius: 10px;
  overflow: hidden; line-height: 0;
}
.page-vignette:hover { border-color: var(--accent); }
.page-vignette.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.page-vignette canvas { width: 100%; height: auto; display: block; }
.page-num {
  display: block; padding: 5px 8px; text-align: left;
  font-size: calc(var(--ui-font) - 2px); line-height: 1.3;
  background: var(--panel2); border-top: 1px solid var(--border);
}
.page-vignette.active .page-num { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.page-num { cursor: pointer; }
.page-num .pnum { font-weight: 700; }
.page-num .ptitre.vide { opacity: .55; font-style: italic; }
.page-num .pcur { opacity: .8; font-style: italic; font-weight: 400; }
.page-titre-edit {
  width: auto; min-width: 60px; max-width: 80%; padding: 1px 5px; line-height: 1.2;
  border: 1px solid var(--accent); border-radius: 5px; font: inherit; color: var(--text); background: var(--panel);
}
/* le bouton du compteur « 3 / 12 » ouvre la même planche */
.page-val { min-width: 54px; }

/* ---------- Le plan de classe en relief ----------
   Pas de bibliothèque 3D : des <div> mis en volume par des transformations
   CSS, comme dans le logiciel « Plan de classe ». preserve-3d à chaque
   étage, sinon les faces s'aplatissent sur leur parent. */
.plan3d-wrap {
  background: var(--panel); border-radius: 14px; border: 1px solid var(--border);
  width: min(1100px, 94vw); height: min(700px, 90vh);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow);
}
.plan3d-scene {
  flex: 1; overflow: hidden;
  perspective: 1400px;
  display: grid; place-items: center;
  cursor: grab; touch-action: none;
  background: radial-gradient(circle at 50% 30%, #1c2740, #0d1420 70%);
}
.plan3d-scene:active { cursor: grabbing; }
.plan3d-monde { position: relative; transform-style: preserve-3d; }
.p3d-pan {
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.p3d-pave > .p3d-pan { border: 1px solid rgba(0,0,0,.15); }
.p3d-pave { left: 0; top: 0; }
.p3d-nom {
  color: #3a2a17; font-weight: 700; text-align: center;
  pointer-events: none; white-space: nowrap; overflow: hidden;
}

/* ---------- Profil : modale de configuration ---------- */
.model-choice.active { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.modal.modal-wide { width: 600px; }
/* La fenêtre « Configurer mon profil » ne grise pas le fond : on voit
   ainsi en direct l'effet des réglages sur les menus autour. */
#profileModal.modal-back { background: transparent; }

/* Volet désactivé (ex. Thème quand un design non classique est choisi) */
.design-locked { opacity: .45; pointer-events: none; filter: grayscale(0.4); }
.prof-cols { display: flex; gap: 16px; }
.prof-col { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.prof-h { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.nuancier { display: flex; flex-wrap: wrap; gap: 4px; }
.nuance { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(0,0,0,.18); cursor: pointer; padding: 0; }
.nuance.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Choix activités/outils + caméra/micro ---------- */
.choice-list { display: flex; flex-direction: column; gap: 5px; }
.choice-list label { display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }
.choice-list input[type="checkbox"] { width: auto; }
/* l'arrondi est porté par la vidéo, pas par un overflow:hidden de l'objet
   (qui rognait le ✕, la poignée d'étirement et la poignée de déplacement) */
.item.i-camera { background: #000; border-radius: 8px; }
.item.i-camera video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; border-radius: 8px; }
#micLevel { flex: 1; height: 10px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; background: var(--panel2); }
#micLevel span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #43a047, #fdd835, #e53935); transition: width .08s linear; }
#objbar select { max-width: 150px; }

/* ---------- Correctifs et lexique ---------- */
.choice-list label { flex-direction: row; align-items: center; }
.lex-chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow-y: auto; }
.lex-chip {
  padding: 3px 10px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); cursor: pointer; font-size: 13px;
}
.lex-chip:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.lex-roots { margin: 0; font-weight: 600; font-size: 13px; color: var(--accent); }
.lex-ety { margin: 0; font-size: 13px; max-height: 130px; overflow-y: auto; white-space: pre-wrap; }

/* ---------- Boutons centrés dans les fenêtres ---------- */
.modal .row.right { justify-content: center; }

/* ---------- Mesure d'angle & comptage ---------- */
.item.i-angle { width: 0; height: 0; }
.item.i-angle svg {
  overflow: visible; position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; pointer-events: none;
}
.angle-handle {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: grab; touch-action: none; z-index: 3;
}
.angle-handle.vertex { background: #e53935; }
.angle-val { font-size: 20px; font-weight: 700; min-width: 84px; text-align: center; color: var(--accent); }
.count-chip {
  min-width: 36px; height: 28px; border-radius: 14px; border: 2px solid transparent;
  color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; padding: 0 9px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.count-chip.active { border-color: #ffffff; box-shadow: 0 0 0 2px var(--accent); }
#countChips { flex-wrap: wrap; max-width: 380px; }
body.counting #viewport { cursor: crosshair; }
body.counting .item { pointer-events: none; }

/* ---------- Formes, surface, bibliothèques ---------- */
.item.i-shape { cursor: move; }
.item.i-shape svg { display: block; overflow: visible; pointer-events: none; }
#shapesBtn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* ---------- Flèche ---------- */
.item.i-arrow { width: 0; height: 0; }
.item.i-arrow svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.item.i-arrow .ar-hit { stroke: transparent; fill: none; cursor: move; }
/* pas de poignées visibles : elles surchargeaient le tableau.
   La flèche se déplace/sélectionne via sa zone de préhension (.ar-hit). */
.item.i-arrow .angle-handle { display: none; }
.item.i-arrow.selected .angle-handle { display: none; }
/* la flèche a une boîte de taille 0 à son point de départ : le cadre de
   sélection et la barre de préhension s'y entasseraient (points parasites).
   On les retire ; le bouton supprimer est déplacé au milieu par arrow.js. */
.item.i-arrow.selected { outline: none; }
.item.i-arrow .grip { display: none; }
/* bouton supprimer déplacé au milieu (arrow.js) et rendu INVISIBLE pour ne pas
   encombrer le tracé ; il réapparaît au survol pour rester utilisable. */
.item.i-arrow .item-del {
  width: 22px; height: 22px; font-size: 12px;
  background: transparent; color: transparent; border: none; box-shadow: none;
}
.item.i-arrow.selected .item-del:hover { background: #e53935; color: #fff; }
.ar-swatches { display: inline-flex; align-items: center; gap: 3px; }
body.tool-arrow #viewport { cursor: crosshair; }
body.tool-arrow .item { pointer-events: none; }
/* boutons bascule de la barre Flèche (trait/pointillé, rectiligne/incurvée) */
#objArrowSec .fmt.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
body.surfpick #viewport { cursor: crosshair; }
body.surfpick .item { pointer-events: none; }
#surfPick.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.lib-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lib-tabs .lib-tab { border-radius: 6px; text-align: center; padding: 4px 2px; font-size: 11px; }
.fr-theme.active { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.btn-list { display: flex; flex-direction: column; gap: 5px; }
.item.i-word.w-vert { background: #d7f5dd; border-color: #2e7d32; color: #1b4d27; }

/* ---------- Plan de classe : modes + boutons actifs ---------- */
.seat-mode.active { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 600; }
#countPause.active, #countErase.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* ================= Objet 3D (visionneuse .glb) ================= */
/* Pas d'overflow:hidden sur la fenêtre elle-même : il rognait le bouton ✕
   et la poignée d'étirement, posés à cheval sur les coins arrondis. Ce
   sont le canevas et la barre qui prennent l'arrondi (rayon intérieur =
   10 px - 1 px de bordure). */
.item.i-model3d {
  background: #14181f;
  border: 1px solid #3a4452;
  border-radius: 10px;
  /* contexte d'empilement propre : la légende (z-index) d'une fenêtre ne
     passe jamais par-dessus une autre fenêtre 3D posée devant elle */
  isolation: isolate;
}
.item.i-model3d .o3d-canvas { display: block; width: 100%; height: 100%; border-radius: 9px; }
/* la barre intérieure remplace la poignée générique (posée au-dessus) */
.item.i-model3d > .grip:not(.o3d-barre) { display: none; }
.item.i-model3d .o3d-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #cfd8e3; font-size: 14px; text-align: center; padding: 14px;
  pointer-events: none;
}
/* fond : transparent (défaut) / noir / blanc (l'objet flotte sur le tableau) */
.item.i-model3d.o3d-fond-blanc { background: #ffffff; border-color: #cfd6dd; }
.item.i-model3d.o3d-fond-blanc .o3d-msg { color: #4b5563; }
.item.i-model3d.o3d-fond-transparent { background: transparent; border-color: transparent; }
.item.i-model3d.o3d-fond-transparent.selected { border: 1px dashed rgba(110, 130, 160, .75); }

/* barre de déplacement discrète, en haut de la fenêtre, visible quand la
   fenêtre est sélectionnée (comme les poignées des autres objets).
   Sélecteur renforcé : elle porte la classe « grip » (pour le déplacement)
   mais pas son style. */
.item.i-model3d > .o3d-barre.grip {
  display: none; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 3;
  align-items: center; padding: 0 9px; box-sizing: border-box;
  background: rgba(12, 16, 22, .42); border: 0; border-radius: 9px 9px 0 0; opacity: 1; box-shadow: none;
  color: rgba(232, 237, 243, .88); font-size: 12px; cursor: move;
  user-select: none; touch-action: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s;
}
.item.i-model3d.selected > .o3d-barre.grip { display: flex; }
.item.i-model3d > .o3d-barre.grip:hover { background: rgba(12, 16, 22, .62); }
.item.i-model3d .o3d-nom {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 240px);
}

/* réglages en haut à droite : zoom, fond */
.item.i-model3d .o3d-ctrl {
  position: absolute; top: 3px; right: 6px; z-index: 4;
  display: flex; align-items: center; gap: 9px; height: 20px; padding: 0 8px;
  border-radius: 10px; background: rgba(12, 16, 22, .5); color: #e8edf3; font-size: 11px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.item.i-model3d .o3d-zoom-lab { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.item.i-model3d .o3d-zoom-lab svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
}
.item.i-model3d .o3d-zoom { width: 96px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.item.i-model3d .o3d-fond-btn {
  width: 16px; height: 16px; padding: 0; cursor: pointer; border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.item.i-model3d .o3d-fond-btn.noir { background: #14181f; }
.item.i-model3d .o3d-fond-btn.blanc { background: #ffffff; }
.item.i-model3d .o3d-fond-btn.transparent {
  background: repeating-conic-gradient(#c3cad3 0% 25%, #ffffff 0% 50%) 50% / 8px 8px;
}

/* ================= Manuscrit → texte ================= */
body.mode-ecriture #viewport { box-shadow: inset 0 0 0 3px var(--accent); }
.ecr-cand { font-weight: 600; }

/* pastille mémoire de couleur personnalisée */
.swatch.mem { border: 2px dashed var(--accent); }

/* bouton caméra en cours d'enregistrement (vidéo ou time-lapse) */
.btn.rec { background: #e53935; color: #fff; border-color: #e53935; }
#camRecTime { min-width: 58px; }
#camLapseInt { width: auto; }

/* ============ FENÊTRE BIBLIOTHÈQUE ⇄ ACTIVITÉS ============ */
/* Titre à deux onglets (remplace le titre + flèche de repli) */
.panel-box h3.tab-title { padding: 0; display: flex; gap: 0; }
.panel-box h3.tab-title::after { content: none; }
.tab-title .ptab {
  flex: 1; padding: var(--ui-titre) 6px; font: inherit;
  font-size: calc(var(--ui-font) - 3px); text-transform: uppercase; letter-spacing: .5px;
  background: var(--panel2); color: var(--muted); cursor: pointer;
  border: none; border-bottom: 2px solid transparent;
}
.tab-title .ptab:first-child { border-right: 1px solid var(--border); }
.tab-title .ptab:hover { color: var(--text); }
.tab-title .ptab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--panel); }

#biblioView, #activiteView { display: flex; flex-direction: column; gap: 6px; }
#activityList { display: flex; flex-direction: column; gap: 6px; }

/* rangée d'icônes de catégories */
.lib-cats { display: flex; gap: 3px; flex-wrap: wrap; }
.lib-cat {
  position: relative; flex: 1 1 0; min-width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel2);
  color: var(--muted); cursor: pointer;
}
.lib-cat:hover { color: var(--text); border-color: var(--accent); }
.lib-cat.active { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.lib-cat.vide { opacity: .45; }
.lib-cat-n {
  position: absolute; top: -5px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: var(--accent-text);
  font-size: 9px; line-height: 15px; text-align: center; font-weight: 700;
}
.lib-cat.active .lib-cat-n { background: var(--panel); color: var(--accent); }

/* bouton « Importer mes images » : couleur distincte (hors bibliothèque) */
.lib-import {
  position: relative; flex: 1 1 0; min-width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid #43a047; border-radius: 7px;
  background: #e8f5e9; color: #2e7d32;
}
.lib-import:hover { background: #43a047; color: #fff; }
.lib-import .cat-ico { width: 18px; height: 18px; }

.cat-ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lib-cat .cat-ico { width: 18px; height: 18px; }
.cat-ico.small { width: 16px; height: 16px; flex: none; color: var(--muted); }
.cat-ico.big { width: 46px; height: 46px; }

/* cadre d'aperçu (se glisse sur le tableau) */
.lib-preview {
  position: relative; height: 118px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel2);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;
}
.lib-preview:active { cursor: grabbing; }
.lib-preview.empty { cursor: default; }
.lib-preview.fond-noir { background: #000; }
.lib-preview.fond-video { background: #091710; }
.lib-preview.fond-blanc { background: #fff; }
.lib-preview.fond-blanc .lib-prev-text { color: #222; }
.lib-prev-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; pointer-events: none; }
.lib-prev-text {
  width: 100%; max-height: 100%; padding: 8px 10px; overflow: hidden;
  font-size: 12px; color: var(--text); white-space: pre-wrap;
}
.lib-prev-default { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--muted); }
.lib-prev-default span { font-size: 12px; }
.lib-prev-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 8px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.lib-prev-msg { font-size: 12px; color: var(--muted); }

/* liste des documents : 4 visibles + ascenseur ; « voir tout » déroule */
#libList {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px;
  max-height: 128px; overflow-y: auto;
}
#libList.expanded { max-height: 340px; }
.lib-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel2);
  font-size: 12px; cursor: grab; touch-action: pan-y; user-select: none;
}
.lib-row:active { cursor: grabbing; }
.lib-row.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lib-row .libname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lib-expand {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px; border: 1px dashed var(--border); border-radius: 6px;
  background: var(--panel2); color: var(--muted); cursor: pointer; font-size: 11px;
}
.lib-expand:hover { color: var(--text); border-color: var(--accent); }
.dbl-arrow {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .15s;
}
.lib-expand.ouvert .dbl-arrow { transform: rotate(180deg); }

/* légende de l'objet 3D (cadre fixe, en haut à gauche de la fenêtre) */
.item.i-model3d .o3d-leg {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  max-width: 44%; max-height: calc(100% - 16px); overflow: auto;
  background: rgba(20, 24, 31, .82); color: #e8edf3;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
  font-size: 13px; line-height: 1.25; padding: 4px 6px 6px;
}
.item.i-model3d.selected .o3d-leg { top: 34px; max-height: calc(100% - 42px); }
.item.i-model3d .o3d-leg.replie { padding-bottom: 4px; }
.item.i-model3d .o3d-leg.replie ul,
.item.i-model3d .o3d-leg.replie .o3d-leg-aide { display: none; }
/* objet non sélectionné : ni bouton « Légende » (repliée), ni barre de lecture (Ninos, 19 oct. 2026) ;
   une légende ouverte reste affichée */
.item.i-model3d:not(.selected) .o3d-leg.replie,
.item.i-model3d:not(.selected) .o3d-anim { display: none; }
.item.i-model3d .o3d-leg-tete {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: inherit; font: inherit; font-weight: 700; padding: 2px 2px 4px; cursor: pointer;
}
.item.i-model3d .o3d-leg ul { list-style: none; margin: 0; padding: 0; }
.item.i-model3d .o3d-leg li {
  display: flex; align-items: center; gap: 7px; padding: 2px 4px; border-radius: 5px; cursor: pointer;
}
.item.i-model3d .o3d-leg li:hover { background: rgba(255, 255, 255, .1); }
.item.i-model3d .o3d-leg.isole li { opacity: .55; }
.item.i-model3d .o3d-leg li.actif { opacity: 1; background: rgba(255, 255, 255, .18); font-weight: 600; }
.item.i-model3d .o3d-leg-pastille {
  flex: none; width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .35);
}
.item.i-model3d .o3d-leg-aide { margin-top: 4px; font-size: 11px; opacity: .65; }

/* ---- Choix de la langue : petits drapeaux (accueil et Mon profil, 19 oct. 2026) ---- */
.login-langues, .profil-langues { display: flex; gap: 8px; justify-content: center; margin: 6px 0 2px; }
.profil-langues { margin: 6px 0 0; }
.drapeau-langue { padding: 2px; line-height: 0; border: 2px solid transparent; border-radius: 6px;
  background: transparent; cursor: pointer; opacity: .6; transition: opacity .15s, border-color .15s, transform .15s; }
.drapeau-langue svg { width: 30px; height: 20px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.drapeau-langue:hover { opacity: 1; transform: translateY(-1px); }
.drapeau-langue.actif { opacity: 1; border-color: #74c69d; }