/*
 * File: intro-page.css - Page introduction Topologicon (intro.html)
 * Desc: Corps, cartes, diagrammes ; bande titre + variables globales dans site-shared.css
 * Version 1.6.0
 * Copyright 2025 DNAvatar.org - Arnaud Maignan
 * Licensed under Apache License 2.0 with Commons Clause.
 * Date: April 20, 2026 UTC+1
 * Logs:
 *   - v1.6.0: §1 — grille Topologie interactive remplacée par icons/surfaces.png ; CSS #introQuotientRoot / .topology-grid--intro retiré
 *   - v1.5.6: §2 — retrait carte « Noms » pleine ligne (◰ en fiche dédiée) ; intro quotient + tableau invariants : min-height grille (≤480px), défilement horizontal tableau ; placeholders intro = chip jaune comme panneau
 *   - v1.5.5: §2.b — buildIntroCharGridTable (5×7 = §1) ; .intro-topology-section partagé quotient + invariants ; fiches .intro-surface-char-cell
 *   - v1.5.4: §2.b — .intro-surface-char-grid (cases portrait aspect-ratio 3/4, invariants) ; .char-table conservé en commentaire intro.html
 *   - v1.5.3: Cartes invariants §2 — .intro-char-cards (serif, ≠ sans-serif index) ; glyphes .intro-char-card-glyph ; grille 200px
 *   - v1.5.2: Grille compacte sans transfo — column-gap / row-gap (X et Y indépendants) à la place de gap unique
 *   - v1.5.1: PNG intro — taille sur [data-center-icon] (% du quotient) ; img 100 % (fix % sur img + span abs auto)
 *   - v1.5.0: PNG intro — disk/sphere taille actuelle ; autres min(52cqmin,90px) + clamp repli
 *   - v1.4.9: Fix sans transfo — grid 5 col × 7 lignes (régression 7 cols = logos décalés)
 *   - v1.4.8: Grille intro non-compact — gap ×2 ; compact inchangé
 *   - v1.4.7: Tangentes dans .topo-edge (flex) ; .topology-option--intro overflow:visible (glyphes vs bandes fines)
 *   - v1.4.6: Cercle intro — .quotient-container.circle 100% (barres bord cellule) ; noyau 65% géré par JS (.topology-quotient-circle-core)
 *   - v1.4.5: Cercle quotient intro 65% (comme panneau) ; overlays ↑→⇒✂ compacts au bord du carré
 *   - v1.4.4: Intro — grille reste 4/5 (gaps inclus sur le bloc) ; carré quotient via grid+wrap inscrit (plus de 1:1 sur toute la grille)
 *   - v1.4.3: Intro — padding/bordure boutons annulés, quotient 100%, grille 1:1 si pas de transfo (cellules carrées), hover sans translate
 *   - v1.4.2: Intro .topology-option--intro remplit la cellule (stretch grille, override 70px shapes_buttons, wrap 100%)
 *   - v1.4.1: Intro grille aspect-ratio 4/5 (hauteur = largeur×5/4) ; sans transfo → pistes intermédiaires 0, cellules max
 *   - v1.4.0: Intro = même grille 5×7 que index (.topology-grid--intro) ; buildTopologyGridTable unique ; CSS compact / bords
 *   - v1.3.1: Grille 3×4 + mid vide ; compact = pas de cadre grille, width 100% / height auto, pochette JPG masquée
 *   - v1.3.0: Grille 4×2 diagrammes (renderTopologyIcon) ; shapes_buttons pour quotients ; overlays tangentes ; figure pochette hors tableau
 *   - v1.2.1: Grille intro — grid-template-areas (pochette 2×2 stable) ; cellules centrées ; sans sous-titres côté JS
 *   - v1.2.0: @import topology-quotient-shared.css ; wrap + bande transformations ; diagrammes hors fichier
 *   - v1.1.0: Grille 3×4 intro (quotient + image centrale 2×2) — esprit panneau Topologie compact (gap, carrés max)
 *   - v1.0.0: Extraction depuis intro.html ; alias --band-* → --theme-band-* ; footer aligné palette signature
 */

@import url('topology-quotient-shared.css');
@import url('shapes_buttons.css');

:root {
  --text: #ccc;
  --text-bright: #eee;
  --link: #fbc02d;
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.08);
  --edge-w: 5px;
  --edge-mid: calc(var(--edge-w) / 2);
  --band-bg: var(--theme-band-bg);
  --band-border: var(--theme-band-border);
  --band-text: var(--theme-band-text);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--page-bg);
  color: var(--text);
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 5px;
}

h2 {
  color: var(--band-text);
  font-size: 1.4rem;
  margin: 2.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(251, 192, 45, 0.25);
}
h2:first-of-type {
  margin-top: 0;
}
h3.sub {
  color: var(--text-bright);
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

p.intro {
  color: var(--text-bright);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  transition: transform 0.2s, border-color 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 192, 45, 0.3);
}

.card img {
  width: 100px;
  height: auto;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--page-bg);
}

.card-body h3 {
  color: var(--text-bright);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.card-body h3 .orient {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 0.3em;
}
.card-body .quotient {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--link);
  margin-bottom: 0.3rem;
}
.card-body p {
  font-size: 0.85rem;
  line-height: 1.45;
}

/* §2 Caractéristiques : pas la même police que index (body sans-serif dans main.css) — serif / notation math */
.surfaces.intro-char-cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.intro-char-cards .card {
  flex-direction: column;
  text-align: center;
}

.intro-char-cards,
.intro-char-cards .card-body h3,
.intro-char-cards .card-body p {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.intro-char-card-glyph {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--text-bright);
  margin-bottom: 0.35rem;
}

.intro-char-card-glyph--names {
  font-size: 1.45rem;
  letter-spacing: 0.03em;
}

/* §2.b — conteneur tableau invariants (mobile : tableau défilable) */
#introCharGridRoot {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#introCharGridRoot {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* §2.b — fiches invariants dans la même grille 5×7 que §1 (hauteur des cellules = présentation globale) */
.intro-topology-section .intro-surface-char-cell {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.35rem 0.32rem 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.intro-surface-char-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 0.2rem;
  padding-bottom: 0.18rem;
  border-bottom: 1px solid rgba(251, 192, 45, 0.22);
  text-align: center;
  line-height: 1.15;
}

.intro-surface-char-list {
  list-style: none;
  margin: 0;
  padding: 0px 15px 0px 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 0.68rem;
  line-height: 1.1;
}

.intro-surface-char-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.1rem 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.07);
}

.intro-surface-char-list li:last-child {
  border-bottom: none;
}

.intro-surface-char-k {
  color: var(--band-text);
  font-weight: 600;
  flex-shrink: 0;
}

.intro-surface-char-v {
  color: var(--text-bright);
  font-weight: 600;
  text-align: right;
}

.schema {
  text-align: center;
  margin: 1.5rem 0;
  padding: 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.schema .caption {
  font-size: 0.85rem;
  color: var(--text);
  margin-top: 0.8rem;
}

.intro-quotient-wrap--compact {
  max-width: none;
  width: 100%;
  margin: 1.5rem 0;
}

html[data-intro-compact='1'] #introCoverFigure {
  display: none;
}

.intro-cover-figure {
  margin: 1.25rem auto 1.5rem;
  max-width: min(100%, 520px);
  text-align: center;
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-sizing: border-box;
}

.intro-cover-figure img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.intro-quotient-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(100%, 960px);
  margin: 1.5rem auto;
}

.intro-transform-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-sizing: border-box;
  font-size: clamp(0.75rem, 2.2vw, 0.9rem);
}

.intro-transform-strip[hidden] {
  display: none !important;
}

.intro-transform-chip {
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(251, 192, 45, 0.28);
  color: var(--band-text);
  background: rgba(251, 192, 45, 0.07);
  font-family: 'Courier New', monospace;
  line-height: 1.2;
}

.intro-transform-chip--lg {
  font-size: 1.15rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
  font-size: 0.85rem;
}
.legend span {
  color: var(--text-bright);
}
.leg-swatch {
  display: inline-block;
  width: 20px;
  height: 5px;
  border-radius: 2px;
  vertical-align: middle;
}

.char-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.char-table th,
.intro-char-table th {
  color: var(--band-text);
  border-bottom: 2px solid rgba(251, 192, 45, 0.3);
  padding: 0.5rem 0.8rem;
  text-align: left;
  font-size: 0.85rem;
}

/* Ligne titre "Noms des surfaces" — centrée, fond légèrement distinct */
.intro-char-table .intro-char-title-row {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 0.8rem 0.35rem;
  border-bottom: 1px solid rgba(251, 192, 45, 0.15);
  color: var(--text-bright);
}

/* Ligne en-têtes colonnes — alignée gauche comme les données */
.intro-char-table .intro-char-header-row th {
  text-align: left;
  font-weight: 600;
}
.char-table td,
.intro-char-table td {
  padding: 0.4rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-bright);
}

@media (max-width: 420px) {
  .intro-char-table th,
  .intro-char-table td {
    padding: 0.28rem 0.4rem;
    font-size: 0.72rem;
  }
}
.char-table td:first-child {
  font-weight: bold;
}
.char-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.char-table .orient-yes,
.intro-surface-char-cell .orient-yes {
  color: #44dd88;
}
.char-table .orient-no,
.intro-surface-char-cell .orient-no {
  color: #ff6688;
}
.char-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.8rem 0 1.2rem;
}
.char-key {
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(251, 192, 45, 0.35);
  border-radius: 999px;
  color: var(--band-text);
  font-size: 0.82rem;
  background: rgba(251, 192, 45, 0.08);
  font-family: 'Courier New', monospace;
}

.flow-arrow {
  display: inline-block;
  padding: 0.15rem 1rem;
  margin: 0 0.3rem;
  border-radius: 4px;
  font-weight: bold;
  color: var(--text-bright);
  vertical-align: middle;
}
.flow-arrow.orient {
  background: linear-gradient(90deg, #2196f3, #4caf50);
}
.flow-arrow.nonorient {
  background: linear-gradient(90deg, #e91e63, #ff9800);
}
.flow-arrow.cross {
  background: linear-gradient(90deg, #4caf50, #e91e63);
}

.transformations-img {
  text-align: center;
  margin: 1.5rem auto;
}
.transformations-img img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  display: block;
  margin: 0 auto;
}

.homotopy-list {
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.homotopy-list > div {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.homotopy-list dt {
  flex-shrink: 0;
  width: 3.2rem;
  text-align: center;
}
.homotopy-list dd {
  font-size: 0.88rem;
  color: var(--text-bright);
  margin: 0;
}

.enter {
  text-align: center;
  margin-top: 2rem;
}
.enter a {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--band-bg);
  color: var(--band-text);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 8px;
  border: 2px solid var(--band-border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.enter a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(217, 35, 15, 0.4);
}

.site-footer {
  text-align: center;
  padding: 1rem;
  color: var(--carte-title-color);
  text-shadow: var(--carte-title-text-shadow);
  font-family: 'Times New Roman', Times, serif;
}