/* File: shapes_buttons.css - Styles for topology shape selection buttons */
/* Desc: Styles pour les boutons de sélection de forme, y compris les carrés de quotient. */
/* Version 1.3.8 */
/* Logs: */
/*   - v1.3.8: .topology-view-indicator — scale(2) origin bottom-right (déborde de sa case, coin bas-droit fixe) */
/*   - v1.3.7: indicateur Int/Ext sans border/fond/glow ; sélecteurs view-row/indicator déscopés de c5l1 (outils déplacés en C1L1) */
/*   - v1.3.6: .topology-view-btn — flex + img 18×18 (standard C5L1) ; retrait topology-tool-btn */
/*   - v1.3.5: .topology-view-row > button > img — sélecteur commun + flex-shrink:0 (miroir paysage) */
/*   - v1.3.4: .topology-tool-btn img — même gabarit 18×18 que vue Int/Ext (miroir X) */
/*   - v1.3.3: .topology-view-indicator — filter:none (couleurs PNG natives, pas cam-btn) */
/*   - v1.3.2: C5L1 topology-view-row — Int/Ext selected passif + ortho/persp à droite */
/*   - v1.3.1: .topology-view-indicator (logo passif Int/Ext) */
/*   - v1.3.0: .topology-c1l1-tools / .topology-c5l1-tools — colonnes ; .topology-tool-row / .topology-view-row */
/*   - v1.2.9: [data-show-transformations=true] → 100px 0fr 100px (panneau plus étroit en % seul). */
/*   - v1.2.8: .topology-grid colonnes 33% 0fr ; gap/padding en JS inline. */
/*   - v1.2.6: C5L1 — img cameraAway/Center 18×18 dans boutons carrés 28×28. */
/*   - v1.2.5: Ext./Int. C5L1 — carrés 28×28 inline (alignés sur #saisonBtn). */
/*   - v1.2.4: .topology-c5l1-tools — boutons Ext./Int. empilés (texte, 2 lignes). */
/*   - v1.2.3: Rotations cardinales/diagonales — sélecteur double (.with-direction.direction-*::before),
             suppression du bloc reset redondant ; down=0°, right=90°, up=180°, left=270°. */
/*   - v1.2.2: isolation:isolate sur .transformation-with-direction — le ::before (z-index:-1,
             flèche directionJ.png) était rendu derrière le fond du panneau (invisible) ;
             le contexte d'empilement propre le confine dans la cellule, derrière le glyphe. */
/*   - v1.2.1: 4 cardinales (left/right/up/down) : reset top/left/width/height explicite pour
             éviter tout conflit de cascade avec les overrides des classes diagonales. */
/*   - v1.2.0: down=-90° (180°) ; nouvelles classes diagonal-135 / diagonal-minus-135. */
/*   - v1.1.9: Ajout .transformation-direction-diagonal-135 (↗) et -minus-135 (↘) pour
             diagonales bas-droite / haut-droite (orientation correcte des fonds directionJ.png). */
/*   - v1.1.8: .topology-placeholder — retrait border/background (pas de chip) : juste le glyphe
             jaune visible sur la flèche PNG derrière ; min-width+nowrap+overflow-visible pour
             que les composites longs comme (≈⧉)² s'affichent ; font-size 0.95em. */
/*   - v1.1.7: .transformation-with-direction — suppression `background-color: transparent !important` */
/*   - v1.1.6: .topology-placeholder couleur/bordure/fond type intro (jaune --theme-band-text) ; monospace */
/*   - v1.1.3: .topology-icon-container flex:1 + min-height — évite effondrement hauteur avec .quotient-container absolute */
/*   - v1.1.2: .quotient-container border-color var(--page-bg) — bords non quotientés fond page */
/*   - v1.1.1: .topology-placeholder texte blanc + flèches transformations inversées pour fond sombre */
/*   - Suppression des styles left-controls, right-controls et left-shapes-grid inutilisés */

/* Cellules « transformation » (symboles ≈, ⇌, …) — lisibles sur panneau sombre
   v1.1.8 : juste le glyphe en jaune — plus de chip (border/bg) pour laisser voir la flèche
            PNG derrière ; white-space nowrap + overflow visible pour que (≈⧉)² s'affiche. */
.topology-placeholder {
  min-width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-band-text, #fbc02d);
  font-size: 0.95em;
  font-weight: bold;
  font-family: 'Courier New', 'Cambria Math', 'Times New Roman', monospace, serif;
  background: transparent;
  border: none;
  margin: auto;
  padding: 0 3px;
  position: relative;
  overflow: visible;
  white-space: nowrap;
  box-sizing: border-box;
  pointer-events: auto; /* override l'héritage none de .panel-floating — requis pour les tooltips JS */
  cursor: default;
}

.topology-placeholder:hover {
  color: #fff;
}



.topology-c1l1-tools,
.topology-c5l1-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.topology-tool-row,
.topology-view-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.topology-view-row .topology-view-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}

.topology-view-row .topology-view-btn img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
}

/* Logo passif Int/Ext — pas un bouton : aucun border/fond/glow.
   Zoom ×2 ancré sur le coin bas-droit : la case du tableau garde sa taille,
   seul le rendu déborde (haut-gauche). */
.topology-view-indicator {
  opacity: 1;
  cursor: default;
  filter: none;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;
  transform: scale(2);
  transform-origin: bottom right;
  position: relative;
  z-index: 2;
}

.topology-view-indicator img {
  filter: none;
}

.topology-view-stack .topology-view-btn {
  flex-shrink: 0;
}

.topology-view-stack .topology-view-btn img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
}

/* Zone de l’icône dans le bouton Topologie (parent des .quotient-container en absolute) */
.topology-icon-container {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Styles visuels (border/bg/hover/selected) → boutons.css */
.topology-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  width: 70px;
  height: 70px;
  min-height: 70px;
  overflow: hidden;
}

/* Carré (plane) : plus petit → réduit la hauteur de la ligne 0 (auto + place-items:center)
   donc la hauteur de la fenêtre Topologie, et le carré « remonte ». Reste centré sur sa
   colonne ; les transformations (autres lignes) ne bougent pas relativement aux surfaces. */
.topology-option[data-tooltip-trad="plane"] {
  width: 46px;
  height: 46px;
  min-height: 46px;
  /* marge négative : remonte le carré dans la zone de titre (centre, libre) ET réduit
     d'autant la hauteur de la ligne 0 → fenêtre plus courte. z-index pour passer au-dessus du titre. */
  margin-top: -26px;
  position: relative;
  z-index: 5;
  overflow: visible; /* ne pas rogner le cadre noir du quotient */
}
.topology-option[data-tooltip-trad="plane"] .topology-icon-container {
  /* conteneur carré pour que le cadre noir (□ quotient, plainBorderColor #000) reste un carré net */
  width: 36px;
  height: 36px;
  min-height: 36px;
  flex: 0 0 auto;
}

/* Élévation au survol — spécifique topology */
.topology-option:hover {
  transform: translateY(-2px);
}

/* Cacher le radio natif */
.topology-option input[type="radio"], .topology-option input[type="checkbox"] {
  display: none;
}

/* Légère amplification quand sélectionné — spécifique topology */
.topology-option:has(input[type="radio"]:checked),
.topology-option:has(input[type="checkbox"]:checked) {
  transform: scale(1.04);
}

.topology-option:has(input[type="radio"]:checked) .topology-visual,
.topology-option:has(input[type="checkbox"]:checked) .topology-visual {
  background: transparent;
  border: none;
  color: #3498db;
}

.topology-option .topology-visual {
  position: relative;
  z-index: 2;
}

.topology-visual {
  font-size: 22px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cross-pattern {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;
}

.cross-top, .cross-left, .cross-center, .cross-right, .cross-bottom {
    font-size: 12px;
    line-height: 1;
    margin: -3px;
    padding: 0;
    color: #eaeaea;
}

.cross-top {grid-column: 3;grid-row: 1;}
.cross-left { grid-column: 1; grid-row: 3; }
.cross-center { grid-column: 3; grid-row: 3; font-size: 18px; }
.cross-right { grid-column: 5; grid-row: 3; }
.cross-bottom { grid-column: 3; grid-row: 5;margin-top: 2px; }

/* === Quotient DIV Visualization === */
.topology-icon-container > .quotient-container {
    display: block;
    box-sizing: border-box;
}

/* === Image PNG centrée dans les bordures quotient (iconRegistry) === */
/* Taille de base = surfaces à 2 cercles (disk, sphere) ; modifier --large pour les autres. */
.topology-center-image {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.topology-center-image--large {
    width: 42px;
    height: 42px;
}

.quotient-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: none;
    border-style: solid;
    border-width: 3px;
    border-color: var(--page-bg); /* Bords non quotientés = fond page (aligné JS + WebGL) */
    z-index: 1;
    box-sizing: border-box;
}

/* Cercle plus petit que le carré */
.quotient-container.circle {
    width: 65%;
    height: 65%;
}

/* Rectangle 2:1 pour "plan" (surface plane sans identification) */
.quotient-container.rect {
    width: 90%;
    height: 45%;
}

/* Carrés / rect : pas de cadre plein — uniquement 4 segments (JS appendFourTopoEdges) */
.quotient-container.topo-four-edges {
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
}

.topo-edge {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}

.topo-edge[data-topo-edge="top"] {
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.topo-edge[data-topo-edge="bottom"] {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.topo-edge[data-topo-edge="left"] {
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
}

.topo-edge[data-topo-edge="right"] {
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
}

.topology-option:hover .quotient-container {
}

.quotient-side {
  position: absolute;
  z-index: 2;
  border-radius: 2px;
}
.quotient-side.side-top {
  top: 0; left: 0; right: 0; height: 5px; width: 100%;
}
.quotient-side.side-bottom {
  bottom: 0; left: 0; right: 0; height: 5px; width: 100%;
}
.quotient-side.side-left {
  left: 0; top: 0; bottom: 0; width: 5px; height: 100%;
}
.quotient-side.side-right {
  right: 0; top: 0; bottom: 0; width: 5px; height: 100%;
}



/* === Images de fond pour les transformations avec directions === */
/* v1.1.7 : ne plus écraser le fond jaune (.topology-placeholder) — laisser le chip visible
   comme dans intro ; la flèche de direction (::before, z-index:-1, opacity:0.3) reste visible
   sous la teinte jaune translucide */
.transformation-with-direction {
  position: relative;
  overflow: hidden;
  /* Contexte d'empilement propre : confine le ::before z-index:-1 DANS la cellule
     (sinon le -1 passe derrière le fond du panneau → flèche invisible). */
  isolation: isolate;
}

.transformation-with-direction::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../interface/directionJ.png');
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  /* Teinte amber (var --topology-selected #fbc02d) :
     brightness(0) normalise le PNG en noir pur,
     invert(1) → blanc, puis sepia+saturate+hue-rotate → amber */
  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(8deg);
  opacity: 0.35;
}

/* Rotation directionJ.png — sélecteur double = priorité sur la règle ::before de base.
   Image de référence : flèche vers le bas = 0°. */
.transformation-with-direction.transformation-direction-down::before {
  transform: rotate(0deg);
}
.transformation-with-direction.transformation-direction-right::before {
  transform: rotate(90deg);
}
.transformation-with-direction.transformation-direction-up::before {
  transform: rotate(180deg);
}
.transformation-with-direction.transformation-direction-left::before {
  transform: rotate(270deg);
}

/* Diagonales — taille agrandie + rotation (sélecteur double obligatoire) */
.transformation-with-direction.transformation-direction-diagonal-45::before {
  top: -17%;
  left: -15%;
  width: 133%;
  height: 133%;
  transform: rotate(45deg);
}
.transformation-with-direction.transformation-direction-diagonal-minus-45::before {
  top: -20%;
  left: -20%;
  width: 133%;
  height: 133%;
  transform: rotate(-45deg);
}
.transformation-with-direction.transformation-direction-diagonal-135::before {
  top: -17%;
  left: -15%;
  width: 133%;
  height: 133%;
  transform: rotate(135deg);
}
.transformation-with-direction.transformation-direction-diagonal-minus-135::before {
  top: -20%;
  left: -20%;
  width: 133%;
  height: 133%;
  transform: rotate(-135deg);
}


.topology-grid {
  grid-template-columns: 33% 0fr 33% 0fr 33%;
}

.topology-grid[data-show-transformations="true"] {
  grid-template-columns: 100px 0fr 100px 0fr 100px;
  width: max-content;
  max-width: min(95vw, 640px);
}