/*
  File: main.css - Styles principaux pour l'interface topologique
  Desc: En français, dans l'architecture, je suis les styles principaux pour l'interface de visualisation topologique avec layout responsive
  Version 2.58.14 (#titleCarte une ligne — nowrap)
  Author: DNAvatar.org - Arnaud Maignan
  Date: [April 20, 2026] [UTC+1]
  Logs:
    - #titleCarte.title-carte white-space nowrap (titre surface+texture sur une ligne)
    - Tactile : #isometriesPanel masqué — #algebrePanel réaffiché (liste invariants)
    - .touch-device .panel-floating .panel-title letter-spacing 0.5em (titres fenêtres — desktop : normal dans panel-manager)
    - Tactile : .topology-grid display none seulement quand panneau replié — dépliage = grille visible
    - Tactile : shapePanel même largeur que texturesAndControlsPanel (panel-touch.js)
    - #introHelpLink : bas-droit bandeau #titleCarte (touch = desktop, plus de bouton flottant)
    - html/body height max 100dvh overflow hidden ; .simulation-grid flex 1 1 0% + min-height 0 ; .center-area min-height 0
    - .site-footer : color/text-shadow/font hérités par la signature (plus de ref aux classes internes)
    - #titleCarte.title-carte : fond rouge bandeau + bordure --theme-band-border (override panel-legend debug)
    - :root --carte-title-color / --carte-title-text-shadow — héritage titleCarte
    - body min-height 100vh + flex column ; .simulation-grid flex:1 au lieu de height 100vh−header — footer plus hors écran
    - .site-footer : zone signature (script dnavatar.org), centré, padding bas de page
    - --page-bg #1a1a2e : html, body, canvas, .simulation-grid (aligné clearColor Three.js)
    - :root --theme-band-bg/border/text pour réutiliser la palette .title-container (ex. légende Transformations)
    - title-left: symétrie axe vertical (scaleX) + contre-miroir enfants pour contenu lisible
    - Nettoyage CSS: suppression des styles external-controls et bottom-controls inutilisés
    - Suppression des colonnes left-controls et right-controls vides
    - Grille simulation: une seule colonne 1fr pour le canvas plein écran
    - Canvas aligné en haut: justify-content: flex-start au lieu de center
    - .quotient-container (#908) : retrait width/height 100% et flex — évite conflit hiérarchie / grille topologie (shapes_buttons)
*/

/* Déclaration des polices locales */
@font-face {
    font-family: "MyKomikaFont"; /* Nom personnalisé pour éviter les conflits */
    src: url("/fonts/KomikaHand.ttf") format("truetype");
}

@font-face {
    font-family: "Viner Hand ITC";
    src: url("/fonts/VINERIT0.TTF") format("truetype");
}

@font-face {
    font-family: "Yuji Hentaigana Akari";
    src: url("/fonts/YujiHentaiganaAkari.ttf") format("truetype");
}

/*
  File: css.css - Styles for isometric topology viewer
  Desc: En français, dans l'architecture, je suis les styles pour l'interface de projection isométrique avec système multi-cartes
  Version 2.53.0 (CSS refactoring)
  Author: DNAvatar.org - Arnaud Maignan
  Date: [June 08, 2025] [16:05 UTC+1]
  Logs:
    - Extracted shape button styles into shapes_buttons.css
    - MOVE ENTRE BOUTONS: Interface move entre 2D/Grille avec align-items: flex-end
    - RÉORGANISATION INTERFACE: 2D/Grille encadrent move, textures en dessous + cache misère 2D
    - INTERFACE TEXTURES DYNAMIQUE: Support multi-lignes avec flex-wrap et min-height adaptative
    - INTERFACE CAMÉRA DESCENDUE: Position bottom -60px + spacer 80x80px dans section textures
    - INTERFACE CAMÉRA À CHEVAL: Position bottom -15px pour être à cheval sur le bord du canvas
    - INTERFACE CAMÉRA SUR MAP: Position bottom center sur la map avec transparence et bordures renforcées
    - INTERFACE TRANSLATION CAMÉRA: Grille 3x3 avec boutons flèches directionnelles et bouton reset centre
    - OVERLAY CANVAS: Position absolute uniquement sur canvas avec capture taille exacte
    - SÉLECTION COHÉRENTE: :has() pour bouton entier bleu + texte transparent, comme les shapes
    - v2.3.0: Ajout cadres boutons topologiques + centrage vertical amélioré
    - Updated styles for canvas-based rendering
    - Added controls styling
*/

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

:root {
    --header-height: clamp(
        70px,
        22vw,
        110px
    ); /* responsive : 360→79px 430→95px 480→106px 600+→110px */
    --page-bg: #1a1a2e; /* Fond page + zone simulation (identique au clearColor WebGL) */
    /* Bande titre / thème Lanturlu (réutilisable panneaux, ex. légende Transformations) */
    --theme-band-bg: #d9230f;
    --theme-band-border: #a31a0b;
    --theme-band-text: #fbc02d;
    /* Couleur accent selection / glow — même jaune que le titre */
    --topology-selected: #fbc02d;
    --topology-selected-rgb: 251, 192, 45;
    /* Titre sous le canvas (#titleCarte) — réutilisé par le footer signature */
    --carte-title-color: rgb(251, 192, 45);
    --carte-title-text-shadow:
        rgb(163, 26, 11) 1px 1px 0px, rgba(0, 0, 0, 0.2) 2px 2px 4px;
}

/* === MASQUAGE DES BARRES DE SCROLL === */
/* Masquer toutes les barres de scroll */
html {
    background: var(--page-bg);
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
}

html,
body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Masquer les barres de scroll pour Webkit (Chrome, Safari, Edge) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
}

/* Masquer les barres de scroll sur tous les éléments */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

*::-webkit-scrollbar {
    display: none; /* Webkit */
}

body {
    margin: 0;
    font-family: sans-serif;
    background: var(--page-bg);
    text-align: center;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Signature DNAvatar — même intégration que logo-nonA/signature.html */
/*
 * Zone signature — tout passe par héritage CSS, aucune ref aux classes internes.
 * La signature (DNAvatar_signature.js) hérite color, font, text-shadow du parent.
 */
.site-footer {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 100%;
    text-align: center;
    /* padding: 10px 12px 18px; */
    margin: 0;
    box-sizing: border-box;
    background: var(--page-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    /* Hérité par la signature injectée dedans */
    color: var(--carte-title-color);
    text-shadow: var(--carte-title-text-shadow);
    font-family: "Times New Roman", Times, serif;
}
.site-footer a,
.site-footer a:visited {
    color: var(--carte-title-color);
    text-shadow: var(--carte-title-text-shadow);
}
.site-footer a:hover {
    color: var(--theme-band-text);
    text-shadow: none;
}

/* Élargir la zone titre pour éviter retours à la ligne en 1280px */
.title-container {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    align-items: stretch;
    padding: 0;
    background: var(--theme-band-bg); /* Rouge style "Anselme Lanturlu" */
    border-bottom: 5px solid var(--theme-band-border); /* Rouge plus foncé */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative; /* Nécessaire pour que z-index fonctionne */
    z-index: 10; /* Doit être supérieur à celui de .center-area */
    height: var(--header-height);
    min-height: 80px;
    flex-shrink: 0;
}

.title-left,
.title-center,
.title-right {
    flex: 1;
}

.title-center {
    text-align: center;
    padding-bottom: 10px;
}

.title-center .main-title {
    display: block;
    font-family: "Times New Roman", serif;
    font-size: calc(var(--header-height) * 0.3);
    line-height: 1;
    color: var(--theme-band-text);
    margin: 0;
    text-shadow:
        2px 2px 0px #a31a0b,
        3px 3px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 1px;
    font-weight: 700;
}

.title-center .main-title .title-line-1,
.title-center .main-title .title-line-2,
.title-center .main-title .title-line-3 {
    display: inline-block;
}

.title-line-1 {
    font-size: 0.5em;
    margin-bottom: 0.6em;
    display: block;
}

.title-line-2 {
    font-size: 0.9em;
}

.title-line-3 {
    font-size: 0.5em;
}

/* Style pour le lien du site dans title-right */
.title-site-link {
    display: flex;
    align-items: flex-end; /* aligné en bas dans la zone titre */
    justify-content: flex-end;
    order: 1;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: right;
    white-space: nowrap;
    font-size: calc(var(--header-height) * 0.105);
    height: 100%;
}

.site-link {
    color: #82d7ff;
    text-decoration: none;
    /* font-size: 0.8em; */
    /* font-weight: normal; */
}

.site-link:hover {
    text-decoration: underline;
    color: #003366;
}

.title-left {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end; /* colle au bas de .title-container */
    align-self: stretch; /* occupe toute la hauteur du titre */
    height: calc(var(--header-height) * 0.8);
    margin-top: calc(
        var(--header-height) * 0.17
    ); /* ≈19px sur 110px, scale avec la hauteur */
    margin-left: calc(var(--header-height) * 1.2);
    /* Symétrie miroir (axe vertical) : inverse l’ordre visuel gauche/droite */
    transform: scaleX(-1);
    transform-origin: center center;
}

/* Contre-miroir : image et sélecteur restent lisibles (pas inversés en pixels) */

.lanturlu-img {
    height: calc(var(--header-height) * 0.86);
    width: auto;
    margin-right: 0px;
    margin-bottom: -4px;
}

/* Positionnement du sélecteur de langues vertical */
#languageSelectorRight {
    margin-left: -5px;
}

/* Sélecteur de langues à gauche dans la zone rouge */
.lang-selector-left {
    display: flex;
    /* gap: 6px; */
    align-items: center;
    padding: 0px;
    margin: 0;
    margin-bottom: -14px;
}

.lang-selector-left .lang-flag {
    font-size: calc(var(--header-height) * 0.16);
    cursor: pointer;
    /* padding: 3px; */
    /* border-radius: 3px; */
    border: 4px solid transparent;
    /* transition: all 0.2s ease; */
    background: transparent;
}

.lang-selector-left .lang-flag:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
}

.lang-selector-left .lang-flag[data-lang="fr"] {
    border-color: #fbc02d;
    background: rgba(251, 192, 45, 0.2);
}

/* Style pour la langue active dans le sélecteur de gauche */
.lang-selector-left .lang-flag.active {
    border-color: #a31a0b;
    /* background: rgba(251, 192, 45, 0.3); */
    /* box-shadow: 0 0 8px rgba(251, 192, 45, 0.4); */
}

.title-right {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 5px;
    height: 90%;
}

/* Conteneur PDF avec cadre */
.pdf-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    /* border: 2px solid #ddd; */
    /* border-radius: 12px; */
    /* background: linear-gradient(145deg, #f8f9fa, #e9ecef); */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

/* URL du site au-dessus du bouton PDF */
.pdf-site-url {
    font-size: 0.7em;
    text-align: center;
}

.pdf-site-url a {
    color: #2196f3;
    text-decoration: none;
    font-weight: 500;
}

.pdf-site-url a:hover {
    text-decoration: underline;
}

#siteUrlLink {
    font-family: Arial, sans-serif;
    font-weight: 300;
    font-size: 0.85em;
    background-color: rgba(255, 150, 50, 0.3);
    padding-left: 5px;
    padding-right: 5px;
}

/* Bouton PDF agrandi */
.pdf-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pdf-icon {
    width: auto;
    height: calc(var(--header-height) * 0.9);
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Drapeaux réduits sous le bouton PDF */
.pdf-label {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.pdf-label .lang-flag {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 2px 4px;
    transition: all 0.2s ease;
}

.pdf-label .lang-flag:hover {
    border-color: #2196f3;
    transform: scale(1.1);
}

/* Ligne avec bouton PDF et drapeau courant */
.pdf-button-row {
    display: flex;
    order: 2;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
    height: 96%;
    /* gap: 10px; */
}

.pdf-lang-flag {
    font-size: 1.5em;
}

/* Drapeau de la langue courante à droite du bouton PDF */
.current-lang-flag {
    font-size: 1.2em;
    padding: 4px 6px;
    border: 2px solid #2196f3;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

/* Sélecteur de langues en bas */
.language-selector-bottom {
    display: flex;
    justify-content: flex-start;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: calc((100vw - 1200px) / 2 + 10px);
    margin-bottom: 0;
}

#langSelector {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lang-flag {
    /* font-size: 1.3em; */
    /* cursor: pointer; */
    /* border: 2px solid transparent; */
    border-radius: 6px;
    padding: 0px 3px;
    /* transition: all 0.3s ease; */
}

.lang-flag:hover {
    border-color: #fbc02d;
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.1);
}

select {
    padding: 8px 12px;
    font-size: 16px;
    margin-bottom: 20px;
    border: 2px solid #333;
    border-radius: 4px;
    background: white;
}

/* Canvas styles moved to consolidated section below */

.controls {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.controls label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    color: #333;
}

.controls input[type="range"] {
    margin-top: 8px;
    width: 150px;
}

.info-panel {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mouse-help {
    margin-top: 10px;
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
}

canvas:not(.drag-debug-overlay) {
    background: white;
    margin: 0;
    display: block;
    cursor: grab;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0; /* flex: bloque min-height:auto qui laisse canvas.height (Three.js) imposer sa taille intrinsèque */
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
}

canvas:active {
    cursor: grabbing;
}

/* CACHE MISÈRE : Overlay UNIQUEMENT sur le canvas */
#loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* 🎯 RESTAURATION: Transparent pour l'image de capture */
    z-index: 10;
    display: none;
    pointer-events: none;
}

#loading-overlay.active {
    display: block;
}

/* Image de capture canvas (taille exacte du canvas) */
#loading-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- STYLES DES BOUTONS DE FORMES (maintenant dans css/shapes_buttons.css) --- */

.topology-name {
    font-size: 12px;
    text-align: center;
    color: #2c3e50;
    transition: all 0.3s ease;
}

.selected-topology {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin: 10px 0 5px 0;
}

.selected-projection {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #7f8c8d;
    margin: 0 0 20px 0;
    font-style: italic;
}

.title-carte {
    flex: 0 0 auto;
    text-align: center;
    font-family: "Times New Roman", serif;
    font-size: 1.5em;
    color: var(--carte-title-color);
    text-shadow: var(--carte-title-text-shadow);
    margin: 10px 0;
    position: relative;
    z-index: 1000;
}

/* Bandeau sous le canvas : même rouge que .title-container (Lanturlu) */
#titleCarte.title-carte {
    background: var(--theme-band-bg) !important;
    border-bottom: 3px solid var(--theme-band-border);
    margin: 0;
    padding: 12px 52px 12px 20px !important;
    min-height: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

/* Bouton intro 🧮 dans le bandeau (tant qu’il est enfant de #titleCarte — pas tactile flottant) */
#titleCarte.title-carte #introHelpLink.intro-math-btn {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 5;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 18px;
    line-height: 1;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--carte-title-color);
    cursor: pointer;
    touch-action: manipulation;
    visibility: visible;
    opacity: 1;
}
#titleCarte.title-carte #introHelpLink.intro-math-btn:hover {
    border-color: rgba(255, 255, 255, 0.55);
    animation: none;
}

/* Pulsation accent sur le border — bouton 🧮 */
@keyframes boulier-pulse {
    0%,
    100% {
        box-shadow:
            0 0 3px 1px rgba(var(--topology-selected-rgb, 251, 192, 45), 0.25),
            0 0 6px 2px rgba(var(--topology-selected-rgb, 251, 192, 45), 0.1);
    }
    50% {
        box-shadow:
            0 0 8px 3px rgba(var(--topology-selected-rgb, 251, 192, 45), 0.85),
            0 0 16px 6px rgba(var(--topology-selected-rgb, 251, 192, 45), 0.4);
    }
}

#titleCarte.title-carte #introHelpLink.intro-math-btn {
    animation: boulier-pulse 1.2s ease-in-out infinite;
}
.touch-device #introHelpLink.sel-btn.intro-math-btn {
    animation: boulier-pulse 1.2s ease-in-out infinite;
}

.simulation-grid {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne pour le canvas */
    grid-template-rows: 1fr; /* Prend toute la hauteur disponible */
    align-items: stretch; /* Étire les colonnes sur toute la hauteur */
    gap: 0; /* Supprimer l'espacement */
    width: 100%;
    max-width: none; /* Supprimer la limitation de largeur */
    margin: 0; /* Supprimer les marges */
    flex: 1 1 0%;
    min-height: 0; /* flex : laisser rétrécir pour ne pas pousser titre/footer hors 100dvh */
    overflow: hidden;
    background: var(--page-bg);
}

.center-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligner en haut au lieu de centrer */
    background: transparent;
    position: relative; /* Pour positionnement absolu de l'overlay */
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Canvas élargi ×1.2 : buffer 10% de chaque côté, clippé par overflow:hidden du parent */
#canvas {
    position: absolute;
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    display: block;
    z-index: 1;
    background-color: #1a1a2e;
}

/* Viseur rifle-scope 2D — centré sur la zone visible (pas sur le canvas décalé) */
#aim-crosshair {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    pointer-events: none;
    z-index: 5;
    display: none; /* caché par défaut, affiché par setAxesVisible() */
}

/* Fond texturé derrière le canvas */
.center-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../interface/texture.png");
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* === PROJECTIONS === */
.projection-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.projection-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.projection-option:hover {
    background: linear-gradient(145deg, #f8f9fa, #e3f2fd);
    border-color: #bbb;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.projection-option input[type="radio"] {
    display: none;
}

.projection-option input[type="radio"]:checked + .projection-visual {
    background: linear-gradient(145deg, #e3f2fd, #bbdefb);
    border: 1px solid #3498db;
    color: #3498db;
    font-weight: bold;
    box-shadow: 0 1px 4px rgba(52, 152, 219, 0.3);
}

.projection-visual {
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* === CONTRÔLES CONSOLIDÉS === */
.top-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.debug-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: #7f8c8d;
}

.debug-info span {
    padding: 3px 8px;
    background: #ecf0f1;
    border-radius: 4px;
    border: 1px solid #bdc3c7;
    display: flex;
    align-items: center;
    gap: 4px;
}

.debug-info input[type="number"] {
    width: 50px;
    padding: 2px 4px;
    border: 1px solid #bdc3c7;
    border-radius: 3px;
    font-size: 11px;
    text-align: center;
    background: white;
}

.debug-info button {
    padding: 2px 4px;
    border: 1px solid #bdc3c7;
    border-radius: 3px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 10px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.debug-info button:hover {
    background: #e9ecef;
    transform: scale(1.1);
}

.controls-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 14px;
}

.controls-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #2c3e50;
}

.controls-row button {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    background: #ecf0f1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.controls-row button:hover {
    background: #d5dbdb;
    transform: translateY(-1px);
}

/* === SÉLECTION DES CARTES === */
.map-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 15px 0;
    padding: 12px 8px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    min-height: 40px;
}

/* Forcer la hauteur des boutons reinit et grille dans la section textures */
.map-selection .topology-option {
    height: 24px;
    width: 24px;
    padding: 2px;
}

.map-selection .topology-visual {
    font-size: 12px;
}

.map-label {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.map-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 13px;
    column-gap: 8px;
    min-height: 40px;
    max-width: 55%;
}

.map-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    max-height: 30px;
}

.map-option:hover {
    background: linear-gradient(145deg, #f8f9fa, #e3f2fd);
    border-color: #bbb;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.map-option input[type="radio"],
.map-option input[type="checkbox"] {
    display: none;
}

/* Changer la couleur de TOUT le bouton map quand sélectionné */
.map-option:has(input[type="radio"]:checked),
.map-option:has(input[type="checkbox"]:checked) {
    background: linear-gradient(145deg, #e3f2fd, #bbdefb);
    border: 2px solid #3498db;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

/* Garder le texte de la map transparent quand sélectionné */
.map-option:has(input[type="radio"]:checked) .map-name,
.map-option:has(input[type="checkbox"]:checked) .map-name {
    background: transparent;
    border: none;
    color: #3498db;
}

.map-name {
    font-size: 11px;
    font-weight: 500;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s ease;
    border: none;
    color: #2c3e50;
    max-height: 30px;
}

/* 🎯 Étape 2: Conteneur pour textures + 3 boutons debug avec drag */
/* SUPPRIMÉ : Styles déplacés vers panel-texture.css avec classes génériques */

/* === ESPACE RÉSERVÉ POUR INTERFACE MOVE === */
/* Nouvelle organisation interface */
.control-row-top {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 15px;
}

.control-row-single {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    padding: 5px;
    max-height: 40px;
}

.control-row-single .map-option {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
}

.control-row-single .map-option .map-name {
    font-size: 16px;
}

/* Interface move entre boutons 2D/Grille avec alignement bottom */
.camera-translation-center {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Griser interface move en mode 2D */
.camera-translation-center.disabled {
    pointer-events: none;
    filter: grayscale(100%);
}

.camera-translation-center .translation-grid {
    display: grid;
    grid-template-columns: repeat(3, 20px);
    grid-template-rows: repeat(3, 20px);
    gap: 2px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 4px;
    border: 2px solid rgba(52, 152, 219, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.camera-translation-center .translation-grid button {
    width: 20px;
    height: 20px;
    border: 1px solid #bdc3c7;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
}

.camera-translation-center .translation-grid button:hover {
    background: #3498db;
    color: white;
    border-color: #2980b9;
    transform: scale(1.1);
}

.camera-translation-center .translation-grid button:active {
    transform: scale(0.95);
    background: #2980b9;
}

/* Bouton centre spécial */
.camera-translation-center #camCenter {
    background: #e74c3c;
    color: white;
    border-color: #c0392b;
}

.camera-translation-center #camCenter:hover {
    background: #c0392b;
    transform: scale(1.15);
}

/* === INTERFACE MOVE FLOTTANTE === */

/* === QUOTIENT (héritage SVG) — centrage seul ; largeur/hauteur → css/shapes_buttons.css (.quotient-container / .circle / .rect) */
.quotient-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: transform 0.2s ease-in-out;
}

.quotient-svg {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.topology-option:hover .quotient-container {
    transform: translate(-50%, -50%) scale(1.1);
}

.topology-option .topology-visual {
    margin-bottom: 0;
}

/* --- STYLES QUOTIENT (maintenant dans css/shapes_buttons.css) --- */

.main-title-line1 {
    display: inline;
    font-size: 1.5em;
    font-weight: 700;
    white-space: normal !important;
    word-break: break-word;
}

/* Styles pour les boutons header gauche sélectionnés */

/* === Homogénéisation des polices interface (titre, carte, boutons textures) === */
.title-center .main-title,
.selected-projection,
.title-carte,
.map-options,
.map-option,
.map-option .map-name,
.pdf-site-url,
.pdf-button {
    font-family: "Times New Roman", serif !important;
    letter-spacing: 0.5px;
}

.map-option .map-name {
    font-size: 0.8em;
    color: #d9230f;
    font-weight: bold;
}

.selected-projection,
.title-carte {
    font-size: 1.1em;
    color: #fbc02d;
    text-shadow:
        1px 1px 0px #a31a0b,
        2px 2px 4px rgba(0, 0, 0, 0.2);
    margin: 8px 0 0 0;
}

/* === RESPONSIVE MOBILE (≤480px) ===
   Règle : layout brutal, pas de footer, header compact qui scale avec la largeur.
   On utilise vw (= largeur) plutôt que vmin pour les écrans portrait :
   sur 430×932 vmin=430 mais vw=430 → même résultat ; sur paysage vw > vmin.
   22vw : 360px→79px | 430px→95px | 480px→106px — max 110px = valeur desktop.
   Tout le header utilise déjà calc(var(--header-height) * X) — on change juste la variable.
*/
/* === PETIT ÉCRAN (≤480px) — détecté par JS → classe .small-screen sur <html> === */
/* Petit écran : footer visible — la signature passe en mode compact (aéroport) automatiquement */
.small-screen .site-footer {
    display: block;
}
.small-screen .title-left {
    height: calc(var(--header-height) * 0.9);
}
/* Drapeaux : tailles réduites + resserrées pour tenir dans le mât court */
.small-screen .flag.rank-0 .flag-emoji {
    font-size: 1.9em !important;
    margin-left: 0 !important;
}
.small-screen .flag.rank-1 .flag-emoji {
    font-size: 1.4em !important;
}
.small-screen .flag.rank-2 .flag-emoji {
    font-size: 1.2em !important;
}
.small-screen .flag.rank-3 .flag-emoji {
    font-size: 1em !important;
}
.small-screen .flag.rank-4 .flag-emoji {
    font-size: 0.8em !important;
}
/* Titre carte (sous canvas) : masqué aussi sur petit écran */
.small-screen #titleCarte {
    display: none;
}

/* === ÉCRAN TACTILE (téléphone / tablette) === */
.touch-device {
    --touch-toolbar-radius: 8px;
}

.touch-device #isometriesPanel {
    display: none !important;
}

/* Titre surface+texture : visible sur touch même si small-screen le masque */
.touch-device #titleCarte {
    display: block;
}

/* Signature : visible sur touch même si small-screen la masque */
.touch-device .site-footer {
    display: block;
    transform-origin: center top;
}

/* Blocage paysage sur touch */
#landscape-block {
    display: none;
    position: fixed;
    inset: 0;
    background: #1a1a2e;
    color: #fbc02d;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    font-size: 1.4rem;
    text-align: center;
    gap: 1rem;
}
.touch-device #landscape-block {
    display: none; /* portrait : caché */
}
/* Paysage touch : header, footer, titleCarte invisibles pour maximiser le canvas */
@media screen and (orientation: landscape) {
    .touch-device .title-container,
    .touch-device .site-footer,
    .touch-device #titleCarte {
        display: none !important;
    }
}

/* Paysage autorisé sur touch — landscape-block désactivé */
/* @media screen and (orientation: landscape) {
  .touch-device #landscape-block {
    display: flex;
  }
} */

/* Titre cliquable = toggle collapse sur touch */
.touch-device .panel-title.touch-toggle {
    cursor: pointer;
    user-select: none;
    padding: 5px 12px;
    white-space: nowrap;
    /* Flex toujours actif pour que ::before (▲▼) et le contenu restent sur une seule ligne */
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Titre toujours au-dessus du contenu du panneau → le tap de fermeture l'atteint */
    position: relative;
    z-index: 10;
}

/* Collapsed touch : cacher tout sauf le titre (display:none pour ne pas contribuer au max-content) */
.touch-device .panel-floating.collapsed > :not(.panel-title),
.touch-device
    .panel-floating.collapsed-vertical
    > :not(.panel-title):not(.drag-handle) {
    display: none !important;
}

/* Garder le titre visible même en collapsed (remplace le rôle du ::: caché) */
.touch-device .panel-floating.collapsed > .touch-toggle,
.touch-device .panel-floating.collapsed > .panel-title {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* Hauteur auto : spécificité (0,4,0) > panel-manager.css drag-zone-top rule (0,3,0) */
.touch-device .panel-floating.drag-zone-top.collapsed-vertical {
    height: auto !important;
}

/* Padding symétrique sur le titre replié — bat panel-manager.css (0,2,0) */
.touch-device .panel-floating.collapsed-vertical > .panel-title {
    padding: 8px 12px !important;
    border-bottom: none !important;
}

/* Suppression du délai 300ms touch sur les titres cliquables */
.touch-device .panel-title.touch-toggle {
    touch-action: manipulation;
}

/* ── Touch : panneau Texture — même grille 3×N que desktop (panel-texture.css) ── */
.touch-device #texturesAndControlsPanel {
    width: fit-content !important;
}
.touch-device #texturesAndControlsPanel .map-options {
    display: grid !important;
    grid-template-columns: repeat(3, 70px) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    max-width: none !important;
    row-gap: 13px !important;
    column-gap: 20px !important;
    padding: 23px !important;
    box-sizing: border-box !important;
    align-items: start !important;
    justify-items: center !important;
    /* Annule le chevauchement desktop (panel-texture.css margin-top:-24px z-index:5) :
       sinon la grille passe par-dessus la barre de titre et intercepte le tap de fermeture. */
    margin-top: 0 !important;
    position: static !important;
    z-index: auto !important;
}
.touch-device #texturesAndControlsPanel .map-option-vertical {
    width: auto !important;
    max-width: none !important;
    min-width: unset !important;
    max-height: none !important;
    padding: 3px !important;
}

/* Tactile : masquer la grille seulement en replié — sinon le panneau ne « gagne » aucune hauteur au dépliage */
.touch-device #shapePanel.collapsed .topology-grid {
    display: none !important;
}

/* Spécificité ID (1,3,0) > display:grid !important (1,2,0) sur #texturesAndControlsPanel .map-options */
.touch-device #texturesAndControlsPanel.collapsed .map-options,
.touch-device #texturesAndControlsPanel.collapsed-vertical .map-options {
    display: none !important;
}

/* min-height: 343px empêche le panneau de rétrécir au collapse → fond verre reste étalé */
.touch-device #texturesAndControlsPanel.collapsed,
.touch-device #texturesAndControlsPanel.collapsed-vertical {
    min-height: 0 !important;
    height: auto !important;
}

/* ── Touch : flèches indicateurs sur les titres de panneaux ────────────────── */
/* texturesAndControlsPanel (haut) : ▼ replié → ▲ déplié */
.touch-device #texturesAndControlsPanel .panel-title.touch-toggle::before {
    content: "▼ ";
    font-size: 0.65em;
    opacity: 0.6;
    vertical-align: middle;
}
.touch-device
    #texturesAndControlsPanel:not(.collapsed):not(.collapsed-vertical)
    .panel-title.touch-toggle::before {
    content: "▲ ";
}
/* shapePanel (bas) : ▲ replié → ▼ déplié */
.touch-device #shapePanel .panel-title.touch-toggle::before {
    content: "▲ ";
    font-size: 0.65em;
    opacity: 0.6;
    vertical-align: middle;
}
.touch-device
    #shapePanel:not(.collapsed):not(.collapsed-vertical)
    .panel-title.touch-toggle::before {
    content: "▼ ";
}

/* Glow clignotant sur les titres de panneaux fermés */
@keyframes touch-panel-glow {
    0%,
    100% {
        box-shadow: 0 0 5px 1px rgba(100, 150, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 13px 4px rgba(100, 150, 255, 0.72);
    }
}
.touch-device .panel-floating.collapsed .panel-title.touch-toggle,
.touch-device .panel-floating.collapsed-vertical .panel-title.touch-toggle {
    animation: touch-panel-glow 2.4s ease-in-out infinite;
    border-radius: 6px;
}
.touch-device
    .panel-floating:not(.collapsed):not(.collapsed-vertical)
    .panel-title.touch-toggle {
    animation: none;
    box-shadow: none;
}

/* ── Touch : titre Texture splitté (🗺️ Scénario gauche | 🌼 Texture droite) ── */
.panel-title.texture-split-title {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between !important; /* surpasse justify-content:center du touch-toggle */
    align-items: center;
    width: 100%;
    gap: 6px;
    box-sizing: border-box;
    text-align: left !important; /* annule text-align:center du touch-toggle */
}
.texture-title-left {
    white-space: nowrap;
    flex: 1;
}
.texture-title-right {
    display: flex;
    margin-right: 5px;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Libellés de titre empilés : pictogramme au-dessus, mot en dessous ────────
   Scénario / Texture (#texturesAndControlsPanel) + Topologie (#shapePanel). */
.title-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start; /* picto et mot calés à gauche, l'un sous l'autre */
    line-height: 1.05;
    gap: 1px;
}
.title-stack-icon {
    font-size: 1.05em;
    line-height: 1;
}
.title-stack-word {
    font-size: 0.8em;
    letter-spacing: normal;
}
/* Bloc Texture : calé à droite → la fleur 🌼 s'aligne sur le bord droit du mot */
.texture-title-label.title-stack {
    align-items: flex-end;
}
.topology-panel-title-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start; /* picto et mot calés à gauche */
    line-height: 1.05;
    text-align: left;
    letter-spacing: normal;
    font-size: 0.8em;
}

/* Bouton grille dans le titre touch */
.texture-title-grid-btn {
    padding: 2px 5px;
    font-size: 13px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.texture-title-grid-btn.selected {
    background: rgba(60, 80, 180, 0.55);
    border-color: rgba(120, 160, 255, 0.65);
}

/* Icône PNG inline dans un titre de panneau — même hauteur que le texte UTF-8 */
.panel-title-icon-png {
    height: 1.4em; /* légèrement plus grand que 1em pour être lisible */
    width: auto;
    vertical-align: middle;
    margin-right: 4px;
    display: inline-block;
    pointer-events: none;
    /* Pas de filtre : on garde les couleurs d'origine de l'icône (cyan/rose/bleu) */
    opacity: 0.92;
}
/* Icône empilée au-dessus du mot « Topologie » : pas de marge droite, un peu plus grande */
.topology-panel-title-text .panel-title-icon-png {
    height: 1.7em;
    margin: 0 0 1px 0;
}