/* =========================================================================
   style.css — Feuille de style de l'application "Plan de classe"
   ========================================================================= */

:root {
  /* Interface */
  --ui-bg: #eef1f6;
  --ui-panel: #ffffff;
  --ui-border: #d5dae4;
  --ui-text: #1f2733;
  --ui-muted: #6b7688;
  --ui-accent: #3b6ef5;
  --ui-accent-d: #2c56cf;
  --ui-danger: #e4443b;
  --ui-shadow: 0 2px 10px rgba(25, 38, 66, .12);

  /* Salle — thème CLASSIQUE (par défaut) */
  --wall: #efe6d2;          /* murs crème */
  --wall-line: #d8caa8;
  --floor: #d9c3a0;         /* parquet */
  --floor-line: #c8ad82;

  /* Dimensions par défaut (surchargées dynamiquement par main.js) */
  --room-w: 658px;
  --room-h: 568px;
}

/* Thème SCIENCES */
.room.science {
  --wall: #ffffff;
  --wall-line: #dfe6ee;
  --floor: #cfd6dd;         /* carrelage gris */
  --floor-line: #b9c2cc;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ui-text);
  background: var(--ui-bg);
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ============================ BARRE D'OUTILS ============================ */
.toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
  z-index: 20;
}
/* Première ligne : logo à gauche, zone de renseignement (nom/type de salle)
   au milieu, puis 3D / plein écran / langue à droite. Trois colonnes à la
   taille de leur contenu et justify-content:space-between : l'espace libre est
   réparti à parts égales de part et d'autre de la colonne du milieu, qui est
   donc centrée entre le titre et le groupe d'icônes (et non dans toute la
   largeur, le titre étant plus étroit que ce groupe).
   align-items:stretch → tout prend la hauteur de la zone de saisie. */
.tb-top { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: stretch; gap: 12px; }
.tb-top > .brand { align-items: center; justify-self: start; }
.tb-top-center { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 12px; }
.tb-top-right { justify-self: end; display: flex; align-items: stretch; gap: 10px; }
/* Deuxième ligne : tous les outils (peut passer à la ligne) */
.tb-main { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
/* Barre de zoom rejetée à droite de la deuxième ligne */
.tb-main .pod-zoom { margin-left: auto; }
/* Bloc central de la 2e ligne : largeur et décalage recopiés de .tb-top-center
   (syncToolbarWidths) pour que la disquette et l'appareil photo soient dans
   l'alignement du groupe salle. L'excédent de place est absorbé par la liste
   des plans enregistrés. */
.tb-mid { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; box-sizing: border-box; }
.tb-mid .toolbar-group { gap: 6px; }
.tb-mid > .toolbar-group.actions { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.tb-mid > .toolbar-group.arrange { flex: 0 0 auto; }
.tb-mid .actions > .pod-load { flex: 1 1 auto; min-width: 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  cursor: default;
}
.brand .logo { display: inline-flex; }
.brand .logo-svg { display: block; width: 46px; height: 46px; }

.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-group.actions { flex-wrap: wrap; }

/* Salle / disposition / classe d'un côté, largeur / longueur de l'autre :
   chaque groupe de champs sur son propre fond commun */
.fields-id,
.size-fields {
  background: #eef1f6;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 3px 12px 5px;
}
/* Curseur type de salle : deux icônes explicites (classe / sciences),
   agrandi à la hauteur de la zone de saisie de la 1re ligne. */
.tb-top .seg-room { align-self: stretch; }
.tb-top .seg-room .seg-opt { height: 100%; padding: 0 15px; }
.tb-top .seg-room .tb-ico { width: 26px; height: 26px; }
.seg-room .seg-opt.active { background: var(--ui-accent); }

/* Vue 3D, plein écran et langue : même hauteur que la zone de saisie */
.tb-top-right #view3dBtn { align-self: stretch; padding: 0 16px; }
.tb-top-right #view3dBtn .cube-ico { width: 26px; height: 26px; }
.tb-top-right #fullscreenBtn { align-self: stretch; padding: 0 16px; }
.tb-top-right #fullscreenBtn .fs-ico { width: 26px; height: 26px; }
.tb-top-right .lang-picker { align-self: stretch; }
.tb-top-right .lang-current { height: 100%; padding: 0 14px; }
.tb-top-right .lang-current .flag { width: 32px; height: 21px; }

/* Icône SVG générique de la barre d'outils */
.tb-ico { width: 18px; height: 18px; display: block; }
.toolbar .fields { gap: 12px; }

.field {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--ui-muted);
  gap: 2px;
}
/* Libellé centré au-dessus de son champ */
.field > span { text-align: center; }
.field input {
  font-size: 13px;
  color: var(--ui-text);
  padding: 5px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  /* Élargis pour que le groupe salle couvre la largeur des outils du dessous
     (leurs bords sont mis en correspondance par syncToolbarWidths). */
  width: 150px;
  background: #fff;
  text-align: center;        /* saisie centrée dans le champ */
}
.field.small input { width: 66px; }
.size-fields { gap: 10px; }

.btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
  background: #f4f6fa;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: #e9edf5; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.btn-accent:hover { background: var(--ui-accent-d); }
/* Teinte bleutée : met en évidence sans le faux air de bouton actif */
.btn-tint { background: #eaf0ff; border-color: #cdd9fb; color: var(--ui-accent-d); }
.btn-tint:hover { background: #dbe5ff; }
.btn-danger { background: #fff; border-color: #f0c3c0; color: var(--ui-danger); }
.btn-danger:hover { background: #fdeceb; }
.select { padding-right: 6px; }

/* « Pod » : une icône et son contrôle réunis sur un fond commun.
   Hauteur fixée pour que toute la ligne d'outils reste homogène, quel que
   soit le contenu du pod (icône SVG, emoji, curseur segmenté, liste…). */
.pod {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: #eef1f6;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  box-sizing: border-box;
  height: 38px;
}
.pod-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  box-sizing: border-box;
  height: 30px;
  padding: 0 7px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--ui-text);
  font-size: 16px; line-height: 1;
}
.pod-icon:hover { background: rgba(20,32,54,.08); }
.pod-icon:active { transform: translateY(1px); }
.pod-icon-static { cursor: default; color: var(--ui-muted); }
.pod-icon-static:hover { background: transparent; }
.pod-select {
  border: none; background: transparent;
  font-size: 12.5px; color: var(--ui-text);
  box-sizing: border-box; height: 30px;
  padding: 0 4px; cursor: pointer;
  /* Prend la place disponible dans son pod : plus d'espace mort entre le
     libellé et la flèche. Le menu déroulant, lui, reste dimensionné par le
     navigateur sur le plus long des intitulés. */
  flex: 1 1 auto; width: 100%; min-width: 70px;
}
.pod-select:focus { outline: none; }

/* Curseur segmenté à deux positions (icône à gauche / à droite) */
.seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  box-sizing: border-box; height: 24px;
  padding: 0 7px; border-radius: 6px;
  cursor: pointer; color: var(--ui-muted);
}
.seg-opt .tb-ico { width: 16px; height: 16px; }
.seg-opt:hover { color: var(--ui-text); }
.seg-opt.active {
  background: var(--ui-accent); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* Teintes : rouge = effacer, bleu = placement aléatoire */
.pod-danger { background: #fcecea; border-color: #f0c3c0; }
.pod-danger .pod-icon { color: var(--ui-danger); }
.pod-danger .seg-opt.active { background: var(--ui-danger); }
.pod-accent { background: #eaf0ff; border-color: #cdd9fb; }
.pod-accent .pod-icon { color: var(--ui-accent-d); }

/* Pod du zoom : loupe + slider + pourcentage, resserrés et curseur affiné */
.pod-zoom { gap: 3px; padding: 3px 8px 3px 6px; }
/* Le curseur occupe la place restante : la largeur du pod est calée sur celle
   du groupe de boutons de la première ligne (voir syncZoomPodWidth). */
.pod-zoom input[type="range"] {
  flex: 1 1 auto;
  min-width: 60px;
  width: 104px;
  height: 12px;              /* moins épais */
  margin: 0;
}
.pod-zoom .zoom-val { margin-left: 1px; }

/* Sélecteur de langue avec drapeaux (SVG) */
.lang-picker { position: relative; }
.lang-current { display: flex; align-items: center; justify-content: center; }
.flag {
  width: 22px; height: 15px;
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.flag svg { display: block; width: 100%; height: 100%; }
.lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  box-shadow: var(--ui-shadow);
  padding: 5px;
  z-index: 40;
  min-width: 0;
  display: flex; gap: 4px;
}
.lang-menu[hidden] { display: none; }
.lang-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}
.lang-opt:hover { background: #eef2fa; }

/* ============================ ESPACE DE TRAVAIL ============================ */
.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* --------- Palette latérale --------- */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-border);
  overflow-y: auto;
  padding: 14px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.palette-section h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-muted);
}

/* Contrôle « 2 temps » du mode conception */
.design-steps {
  display: none;
  gap: 4px;
  background: #eef1f6;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  padding: 3px;
}
body.mode-design .design-steps { display: flex; }
.step-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px 6px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui-muted);
  cursor: pointer;
}
.step-btn.active {
  background: var(--ui-panel);
  color: var(--ui-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: #fbfcfe;
  cursor: grab;
  font-size: 11px;
  text-align: center;
  color: var(--ui-text);
  user-select: none;
  transition: border-color .12s, box-shadow .12s, transform .05s;
}
.palette-item:hover { border-color: var(--ui-accent); box-shadow: 0 2px 8px rgba(59,110,245,.15); }
.palette-item:active { cursor: grabbing; transform: scale(.97); }

/* Vignettes de la palette */
.thumb { width: 48px; height: 34px; border-radius: 4px; position: relative; }
.thumb-simple { width: 34px; background: #c98b52; border: 2px solid #a86a34; }
.thumb-double { width: 56px; background: #c98b52; border: 2px solid #a86a34; }
.thumb-paillasse1 { width: 34px; height: 26px; background: #8a9bb0; border: 2px solid #5f7085; }
.thumb-paillasse { width: 56px; height: 26px; background: #8a9bb0; border: 2px solid #5f7085; }
.thumb-paillasse3 { width: 62px; height: 26px; background: #8a9bb0; border: 2px solid #5f7085; }
.thumb-blackboard { height: 16px; background: #22472f; border: 2px solid #6b4a2a; }
.thumb-whiteboard { height: 16px; background: #f7f9fc; border: 2px solid #b9c2cc; }
.thumb-tni { height: 16px; background: #123a63; border: 2px solid #0c2947; }
.thumb-window { height: 12px; background: #bfe3f5; border: 2px solid #7fb4d6; }
.thumb-door { width: 22px; height: 30px; background: #b5804a; border: 2px solid #86592c; }
.thumb-desk { width: 46px; height: 24px; background: #8a6a45; border: 2px solid #5d472e; }
.thumb-armoire { width: 40px; height: 22px; background: linear-gradient(#9a774d,#7d5f3b); border: 2px solid #5d472e; }
.thumb-armoire::after { content: ""; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px; background: #5d472e; transform: translateX(-50%); }
.thumb-armoire1 { width: 22px; height: 22px; background: linear-gradient(#9a774d,#7d5f3b); border: 2px solid #5d472e; }
.thumb-armoire1::after { content: ""; position: absolute; right: 3px; top: 50%; width: 2px; height: 8px; background: #5d472e; transform: translateY(-50%); }

.students-list { display: flex; flex-direction: column; gap: 6px; }
.student-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: #f2f7ff;
  cursor: grab;
  font-size: 13px;
  user-select: none;
}
.student-chip::before { content: "👤"; font-size: 13px; }
.student-chip:hover { border-color: var(--ui-accent); }
.student-chip:active { cursor: grabbing; }
/* Croix « retirer de la liste » à droite de la puce */
.chip-remove {
  margin-left: auto;
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e4e9f2;
  color: var(--ui-muted);
  font-size: 13px; font-weight: 700;
  line-height: 17px; text-align: center;
  cursor: pointer;
}
.chip-remove:hover { background: var(--ui-danger); color: #fff; }

/* Ajout manuel d'un élève */
.student-add { display: flex; gap: 6px; margin-bottom: 8px; }
.student-add input {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--ui-text);
  padding: 6px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 7px; background: #fff;
}
.student-add .btn { padding: 6px 11px; font-size: 16px; line-height: 1; }

.hint { font-size: 11.5px; color: var(--ui-muted); line-height: 1.4; margin: 4px 0 0; }
/* Mode conception en deux temps :
   ① Aménagement → tables + éléments ; ② Élèves → tables + liste d'élèves */
body.mode-design.step-1 #section-students { display: none; }
/* Étape ② : on ne propose plus d'ajouter des tables ni des meubles,
   la salle a été aménagée à l'étape ①. */
body.mode-design.step-2 #section-elements,
body.mode-design.step-2 #section-tables { display: none; }

/* Bouton « Importer » (liste d'élèves .txt) : flèche + libellé, sous la
   zone d'ajout d'un élève. */
.import-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 8px;
}

/* Filtrage des tables selon le type de salle :
   - salle classique : tables simples/doubles uniquement
   - salle de sciences : paillasses uniquement */
body.room-classic .palette-item[data-room="science"],
body.room-science .palette-item[data-room="classic"] { display: none; }

/* ============================ SCÈNE / PLAN ============================ */
.stage {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 20% 20%, #e7ebf3, #dbe1ec 70%);
  display: grid;
  place-items: safe center;
  padding: 30px;
}
.canvas-wrap { position: relative; }
/* La salle est mise à l'échelle depuis son coin haut-gauche par le zoom 2D */
.room { transform-origin: 0 0; }

.room {
  position: relative;
  width: var(--room-w);
  height: var(--room-h);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--floor-line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--floor-line) 39px 40px),
    var(--floor);
  border: 14px solid var(--wall);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(20,32,58,.28), inset 0 0 0 1px var(--wall-line);
  outline: 1px solid var(--wall-line);
}

/* Items déposés dans la salle */
.item {
  position: absolute;
  top: 0; left: 0;
  transform-origin: center center;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.item.dragging { cursor: grabbing; z-index: 50 !important; }
.item.selected .item-body { box-shadow: 0 0 0 2px var(--ui-accent), 0 4px 14px rgba(0,0,0,.25); }

.item-body {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: visible;
  box-shadow: 0 3px 7px rgba(0,0,0,.22);
}

/* Etiquette prénom : toujours horizontale (contre-pivotée par JS) */
.item-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
  color: #3a2a17;
  pointer-events: none;
  text-align: center;
  max-width: 120px;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ---- Aspect des tables ---- */
.item[data-type="simple"] .item-body,
.item[data-type="double"] .item-body {
  background: linear-gradient(#d59a5f, #c4844a);
  border: 2px solid #9c6a34;
}
.item[data-type="paillasse1"] .item-body,
.item[data-type="paillasse"] .item-body,
.item[data-type="paillasse3"] .item-body {
  background: linear-gradient(#9aa9bd, #7d8da2);
  border: 2px solid #5f7085;
}
/* Chaise(s) : petit rectangle en haut de la table */
.chair {
  position: absolute;
  background: #6f5638;
  border: 1px solid #4c3a24;
  border-radius: 3px;
}

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

/* Fenêtre : vitrage translucide (50 %), le mur reste visible au travers */
.item[data-type="window"] .item-body {
  background: repeating-linear-gradient(90deg,#cdeafe 0 18px,#a9d4f0 18px 20px);
  border: 3px solid #7fb4d6;
  opacity: .5;
}
.item[data-type="door"] .item-body {
  background: linear-gradient(#c08a52,#a5713d);
  border: 2px solid #7c5327;
  border-radius: 4px 4px 0 0;
}
.item[data-type="door"] .item-body::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: #f5d27a; transform: translateY(-50%);
}
.item[data-type="desk"] .item-body {
  background: linear-gradient(#9a774d,#7d5f3b);
  border: 2px solid #543f27;
}
.item[data-type="desk"] .item-label { color: #fff4e2; }
/* En salle de sciences, le bureau du prof est une paillasse (gris labo) */
body.room-science .item[data-type="desk"] .item-body {
  background: linear-gradient(#9aa9bd, #7d8da2);
  border: 2px solid #5f7085;
}
body.room-science .item[data-type="desk"] .item-label { color: #22303c; text-shadow: 0 1px 0 rgba(255,255,255,.45); }

/* Armoire : bois en salle classique, blanche en salle de sciences.
   Un liseré central évoque les deux portes. */
.item[data-type="armoire"] .item-body,
.item[data-type="armoire1"] .item-body {
  background: linear-gradient(#9a774d,#7d5f3b);
  border: 2px solid #543f27;
}
/* Armoire 2 portes : séparation au milieu. 1 porte : poignée sur le côté. */
.item[data-type="armoire"] .item-body::after {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px;
  width: 2px; background: rgba(0,0,0,.35); transform: translateX(-50%);
}
.item[data-type="armoire1"] .item-body::after {
  content: ""; position: absolute; right: 5px; top: 50%;
  width: 2px; height: 10px; background: rgba(0,0,0,.35); transform: translateY(-50%);
}
.item[data-type="armoire"] .item-label,
.item[data-type="armoire1"] .item-label { color: #fff4e2; }
body.room-science .item[data-type="armoire"] .item-body,
body.room-science .item[data-type="armoire1"] .item-body {
  background: linear-gradient(#eef1f5,#dbe1e9);
  border: 2px solid #c3ccd8;
}
body.room-science .item[data-type="armoire"] .item-body::after,
body.room-science .item[data-type="armoire1"] .item-body::after { background: rgba(0,0,0,.18); }
body.room-science .item[data-type="armoire"] .item-label,
body.room-science .item[data-type="armoire1"] .item-label { color: #22303c; text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* Affichage comportement/groupe sur le plan (option de placement) */
.item-label.beh-r { color: #d23b3b !important; }
.item-label.beh-g { color: #1f9d4d !important; }
.grp-badge {
  position: absolute;
  top: -9px; right: -9px;
  min-width: 15px; height: 15px;
  box-sizing: border-box;
  padding: 0 3px;
  border-radius: 999px;
  background: #33415a;
  color: #fff;
  font-size: 10px; font-weight: 700;
  line-height: 15px; text-align: center;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ---- Table non assignée (mode conception avec élèves à placer) ---- */
.item.ghosted .item-body { opacity: .4; }
.item.drop-target .item-body { box-shadow: 0 0 0 3px var(--ui-accent); opacity: .85; }

/* Rectangle de sélection multiple */
.selection-box {
  position: absolute;
  border: 1.5px dashed var(--ui-accent);
  background: rgba(43, 108, 214, .12);
  z-index: 55;
  pointer-events: none;
  border-radius: 3px;
}

/* ============================ POIGNÉES / CONTRÔLES ============================ */
.handle {
  position: absolute;
  display: none;
  z-index: 60;
}
.item.selected .handle { display: flex; }

.handle-delete {
  top: -12px; right: -12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ui-danger);
  color: #fff;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border: 2px solid #fff;
}
.handle-delete svg { width: 12px; height: 12px; display: block; }
.handle-rotate {
  top: -34px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: #fff;
  align-items: center; justify-content: center;
  font-size: 13px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border: 2px solid #fff;
}
.handle-rotate:active { cursor: grabbing; }
/* Placée au coin haut-gauche « local » : sur les tables élèves (pivotées à
   180°) elle apparaît donc en bas, avec la croix et la rotation, en laissant
   le bord haut libre pour les pastilles de réservation. */
.handle-seat {
  top: -11px; left: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #2f9e6f;
  color: #fff;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border: 2px solid #fff;
}
.handle-resize {
  bottom: -10px; right: -10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ui-accent);
  cursor: nwse-resize;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.handle-resize::before { content: "⤡"; font-size: 11px; color: var(--ui-accent); }
/* La poignée de redimensionnement suit la rotation, pas l'étiquette */
.item:not(.resizable) .handle-resize { display: none !important; }

/* Croix « retirer l'élève » au-dessus d'une place occupée (survol / sélection).
   display est piloté par JS (none si la place est vide). */
.seat-remove {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ui-danger);
  color: #fff;
  align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  border: 1px solid #fff;
  z-index: 55;
  transition: opacity .12s;
}
.seat-remove svg { width: 9px; height: 9px; display: block; }
.item:hover .seat-remove,
.item.selected .seat-remove { opacity: 1; pointer-events: auto; }

/* Pastilles « place réservée » : une par place, au-dessus de chaque élève,
   pour désigner qui (gauche / centre / droite) accueillera de préférence un
   élève rouge ou vert. La couleur de la table ne change pas. Position calculée
   en JS (updateTargetTags). Ne sont AFFICHÉES que si l'option « places
   réservées » est cochée dans « Réglages du placement » (body.show-targets) :
   grises au survol / sélection tant qu'aucune couleur n'est choisie, colorées
   et toujours visibles sinon. */
.target-tag {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #b7c0cf;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  cursor: pointer;
  z-index: 58;
  display: none;
}
.target-tag.t-r { background: #e0403a; }
.target-tag.t-g { background: #22a559; }
/* Place bloquée : pastille sombre barrée d'une croix */
.target-tag.t-x { background: #3b4252; }
.target-tag.t-x::before,
.target-tag.t-x::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.target-tag.t-x::before { transform: translateY(-50%) rotate(45deg); }
.target-tag.t-x::after  { transform: translateY(-50%) rotate(-45deg); }

/* Voile d'une place bloquée : hachures grises sur sa part de la table, avec
   une croix au centre. Toujours visible (indépendant de l'option
   d'affichage des pastilles) : une place interdite doit se voir sur le plan. */
.seat-block {
  position: absolute;
  top: 50%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: none;
  pointer-events: none;
  z-index: 12;
  border-radius: 4px;
  background:
    linear-gradient(#6b7280, #6b7280) center/13px 2.5px no-repeat,
    linear-gradient(#6b7280, #6b7280) center/2.5px 13px no-repeat,
    repeating-linear-gradient(45deg,
      rgba(70, 78, 92, .30) 0 5px,
      rgba(70, 78, 92, .06) 5px 10px);
}
/* Option active : toutes les pastilles restent visibles (plus besoin de
   survoler ou de sélectionner la table pour les voir ou les modifier). */
body.show-targets .target-tag { display: block; }

/* ============================ VUE 3D ============================ */
.modal {
  position: fixed;
  inset: 0;
  background: #0d1420;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.modal.hidden { display: none; }
.modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: #131c2b;
  color: #e6ecf5;
  border-bottom: 1px solid #24314a;
  flex-wrap: wrap;
}
/* Barre de la vue 3D : le logo remplace le titre « Vue 3D » */
.modal-title { display: flex; align-items: center; gap: 10px; }
.modal-logo { width: 38px; height: 38px; display: block; }
.modal-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.range-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #aeb9cc; }
/* Bouton à icône + libellé (ex. « Exporter la vue ») */
.btn-ico-txt { display: inline-flex; align-items: center; gap: 7px; }
.modal-controls .hint { color: #8a97ad; }

/* Choix des couleurs mur / sol (RVB) dans la vue 3D */
.colors3d-wrap { position: relative; }
.colors3d-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #1b2536; border: 1px solid #2c3a52; border-radius: 10px;
  padding: 12px; z-index: 130;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 10px;
}
.colors3d-panel.hidden { display: none; }
.color-row { display: flex; align-items: center; gap: 8px; color: #dbe3f0; font-size: 12px; }
.color-lbl { width: 34px; font-weight: 600; }
.color-swatch {
  width: 26px; height: 22px; border-radius: 5px;
  border: 1px solid #4a5a76; flex: none; padding: 0; cursor: pointer;
  background: none; -webkit-appearance: none; appearance: none;
}
.color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-swatch::-moz-color-swatch { border: none; border-radius: 4px; }
.rgb { display: flex; align-items: center; gap: 3px; color: #9fb0c8; }
.rgb input {
  width: 46px; padding: 3px 5px;
  background: #0f1826; color: #eaf0f8;
  border: 1px solid #33425c; border-radius: 6px; font-size: 12px;
}

.scene-viewport {
  flex: 1;
  overflow: hidden;
  perspective: 1400px;
  display: grid;
  place-items: center;
  cursor: grab;
  background:
    radial-gradient(circle at 50% 30%, #1c2740, #0d1420 70%);
}
.scene-viewport:active { cursor: grabbing; }
.scene {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .05s linear;
}
.face { position: absolute; transform-style: preserve-3d; }

/* ============================ ZOOM 2D (dans la barre d'outils) ======== */
.zoom-val { font-size: 12px; color: var(--ui-muted); width: 34px; text-align: right; }

/* ============================ ARRANGEMENT / OPTIONS ============================ */
.check {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ui-text);
  cursor: pointer; white-space: nowrap;
}
.check input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--ui-accent); }
.fs-icon { font-size: 16px; line-height: 1; }
/* Icône mixité fille / garçon (le libellé passe en info-bulle) */
.mix-icon { font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: -1px; }
.mix-f { color: #c2367f; }
.mix-m { color: #2f6bd6; }
/* Boutons-icônes : carrés, glyphe centré, libellé en info-bulle */
.icon-btn {
  font-size: 16px;
  line-height: 1;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center; justify-content: center;
}

/* ============================ FENÊTRE MODALE (carte centrée) ============================ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(13, 20, 32, .55);
  z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.overlay.hidden { display: none; }
.modal-card {
  background: var(--ui-panel);
  color: var(--ui-text);
  border-radius: 14px;
  padding: 20px 22px;
  width: min(460px, 94vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.card-title { font-size: 18px; font-weight: 700; margin-bottom: 2px; }

/* Interrupteur on/off (tri par sexe) */
.switch-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; margin: 6px 0 2px; }
.switch-row input { display: none; }
.switch-track {
  width: 40px; height: 22px; border-radius: 999px; background: #c7cfda;
  position: relative; transition: background .15s; flex: none;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .15s;
}
.switch-row input:checked + .switch-track { background: var(--ui-accent); }
.switch-row input:checked + .switch-track .switch-thumb { transform: translateX(18px); }

/* Colonnes de la liste de placement */
.plist-head, .gender-row {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) auto auto auto;
  gap: 10px; align-items: center;
}
.plist-head {
  padding: 0 10px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ui-muted);
}
.plist-head .ph-sex, .plist-head .ph-beh, .plist-head .ph-grp { text-align: center; }
.gender-list {
  margin: 8px 0 12px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.gender-row {
  padding: 6px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
}
.gender-row .g-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gender-row .g-opts { display: flex; gap: 12px; justify-content: center; }
.gender-row .g-opts label { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.g-girl { color: #c2367f; }
.g-boy { color: #2f6bd6; }
/* Masque la colonne « sexe » quand le tri par sexe est désactivé */
.gender-list.no-gender .g-opts { visibility: hidden; }

/* Pastilles de comportement (rouge / bleu / vert) */
.b-opts { display: flex; gap: 7px; justify-content: center; }
.bdot {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.bdot-r { background: #e0483d; }
.bdot-b { background: #3f7de0; }
.bdot-g { background: #2f9e57; }
.bdot.sel { border-color: #1f2733; box-shadow: 0 0 0 2px #fff inset, 0 2px 5px rgba(0,0,0,.3); }

.grp-sel {
  font-size: 13px; padding: 3px 4px; border-radius: 7px;
  border: 1px solid var(--ui-border); background: #fff; color: var(--ui-text); cursor: pointer;
}

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* Boîte de dialogue interne (prompt / confirmation) */
.modal-ask { width: min(400px, 94vw); }
.ask-msg { font-size: 15px; line-height: 1.4; margin: 2px 0 14px; }
.ask-input {
  width: 100%; box-sizing: border-box; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--ui-border); border-radius: 9px;
  background: #fff; color: var(--ui-text); margin-bottom: 14px;
}
.ask-input:focus { outline: none; border-color: var(--ui-accent); }
.ask-input.hidden { display: none; }

/* Fenêtre « Que voulez-vous enregistrer ? » */
.save-choices { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.save-choices .btn { padding: 12px 14px; font-size: 14px; text-align: left; }
.save-choices .btn small { display: block; font-weight: 500; opacity: .8; font-size: 12px; margin-top: 2px; }

/* ============================ CRÉDITS ============================ */
.credits {
  position: fixed;
  bottom: 8px; right: 14px;
  font-size: 11px;
  color: var(--ui-muted);
  opacity: .75;
  pointer-events: none;
  z-index: 15;
  white-space: nowrap;
}
/* Crédits visibles aussi dans la vue 3D (par-dessus le fond sombre du modal) */
.credits-3d {
  position: absolute;
  bottom: 10px; right: 16px;
  font-size: 11px;
  color: #aeb9cc;
  opacity: .8;
  pointer-events: none;
  z-index: 110;
  white-space: nowrap;
}

/* ============================ TOAST ============================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2733;
  color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 200;
  opacity: 1;
  transition: opacity .3s;
}
.toast.hidden { opacity: 0; pointer-events: none; }

/* ============================ ÉCRAN D'ACCUEIL ============================
   Affiché au chargement : son bouton fournit le geste utilisateur qui autorise
   le plein écran, pour entrer directement dans l'interface en plein écran. */
.welcome {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #1b4332, #123026 55%, #0d2019);
}
.welcome.hidden { display: none; }
.welcome-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 10px;
  color: #eaf3ee;
}
.welcome-logo { width: 108px; height: 108px; display: block; }
.welcome-title {
  margin: 6px 0 0;
  font-size: 34px; font-weight: 800; letter-spacing: .2px;
}
.welcome-sub { margin: 0; font-size: 15px; color: #bcd6c8; max-width: 34ch; }
.welcome-btn {
  margin-top: 14px;
  padding: 12px 34px;
  font-size: 16px; font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
}
.welcome-hint { margin: 2px 0 0; font-size: 12.5px; color: #8fb3a0; }
.welcome-credits { margin: 22px 0 0; font-size: 12px; color: #6f9583; }

/* ============================ DIVERS ============================ */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #c2cad8; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a9b4c6; background-clip: content-box; }