/* ====================================== */
/* STYLES SPÉCIFIQUES POUR XMIND.HTML */
/* ====================================== */

/* ===== LAYOUT CLOCKWISE (GAUCHE/DROITE) ===== */
.mindmap-global-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 40px;
    min-width: max-content;
    position: relative;
    /* Pour les nœuds flottants positionnés absolument */
}

.layout-map-clockwise .mindmap-global-container {
    flex-direction: row;
}

.branches-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* 26px : assez pour une étiquette (quasi collée au nœud) sur une seule
       ligne, sans chevaucher le frère suivant. gap ne s'applique qu'ENTRE
       des éléments — un nœud sans frère (enfant unique de son parent) n'en
       profite jamais, donc ça ne fausse pas align-items:center dans ce cas
       (cf. .branch). */
    gap: 26px;
}

.branches-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
}

.central-root {
    margin: 0 30px;
    flex-shrink: 0;
}

/* Branches vers la gauche */
.branch-left {
    flex-direction: row-reverse;
}

.branch-left>.children-container {
    margin-left: 0;
    margin-right: 60px;
    align-items: flex-end;
}

.branch-left .toggle-btn.toggle-left,
.branch-left>.node>.toggle-btn {
    right: auto;
    left: -10px;
}

.children-left {
    margin-left: 0;
    margin-right: 60px;
}

/* ===== NODE WRAPPER (for node + labels vertical layout) ===== */
.node-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ===== LABELS ===== */
/* Position absolue (hors du flux) : les étiquettes ne doivent PAS peser dans
   la hauteur du wrapper, sinon align-items:center (sur .branch, voir plus
   bas) centre le wrapper NŒUD+ÉTIQUETTES face aux enfants au lieu du nœud
   seul — un nœud à étiquette(s) semble alors décalé par rapport à ses
   enfants (ou à son parent). L'espace qu'elles auraient occupé en flux
   normal est réservé via le `gap` de .children-container / .branches-left /
   .branches-right (gap ne s'applique qu'ENTRE éléments, donc un enfant
   unique n'en profite jamais et ça ne fausse pas le centrage dans ce cas). */
.node-labels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    /* légèrement plus grand gap entre labels eux-mêmes */
    justify-content: flex-start;
    /* align left */
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -3px;
    /* chevauche légèrement le bord du nœud pour vraiment coller */
    z-index: 2;
    width: 100%;
    padding-left: 8px;
    box-sizing: border-box;
}

/* Habillage visuel (couleurs, pastille) fourni par .rf-ref-badge et ses
   modificateurs .rf-type-verset/.rf-type-hadith (public/refs-sidebar.css) —
   identique à la pastille de la page Références. */
.node-label {
    cursor: pointer;
}

/* .rf-ref-badge (partagée avec la page Références, refs-sidebar.css) met le
   texte en majuscules — inoffensif là-bas (juste "31:20"), mais ici le texte
   brut de l'étiquette xmind peut être une phrase complète ("Ibn 'Abbas sur
   [31:20]") qu'il ne faut pas transformer. Sélecteur à 2 classes : plus
   spécifique que .rf-ref-badge seule, nécessaire car refs-sidebar.css se
   charge après xmind-style.css (cssPaths, pages/xmind.js) et gagnerait sinon
   la cascade à spécificité égale. */
.node-label.rf-ref-badge {
    text-transform: none;
}

/* ===== NOTE POPUP (survol/tap sur une étiquette) ===== */
.note-hover-popup {
    position: fixed;
    z-index: 1000;
    max-width: 260px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    background: var(--note-popup-bg, white);
    color: var(--text-primary, #333);
    border: 1px solid var(--note-popup-border, rgba(26, 82, 56, 0.3));
    border-radius: var(--card-radius, 10px);
    box-shadow: var(--note-popup-shadow, 0 4px 14px rgba(0, 0, 0, 0.15));
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    /* pointer-events: none par défaut (masqué) ; réactivé sur .visible pour
       permettre la sélection/copie du texte — voir note-hover-popup.js pour
       la logique qui garde le popup ouvert quand la souris passe dessus. */
    pointer-events: none;
    user-select: text;
    /* Bouton Copier aligné en ligne avec le texte (pas flottant dans un coin) */
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.note-popup-text {
    white-space: pre-wrap;
    flex: 1;
    min-width: 0;
}

/* Bouton "Copier" : même taille/couleur que le texte du popup (pas le style
   pastille de .rf-copy-btn — demandé explicitement ici), juste aligné à côté. */
.note-popup-copy-btn {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, color 0.15s;
}

.note-popup-copy-btn:hover {
    opacity: 0.7;
}

.note-popup-copy-btn.copy-btn-done {
    color: var(--accent, #1A5238);
}

.note-hover-popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Flèche reliant le popup à son étiquette — même technique que .callout::before
   sur cette page, pour rester cohérent avec l'autre popup déjà présent ici. */
.note-hover-popup::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
}

.note-hover-popup.popup-arrow-bottom::after {
    /* popup au-dessus de l'étiquette : pointe vers le bas */
    bottom: -12px;
    border-top-color: var(--note-popup-bg, white);
}

.note-hover-popup.popup-arrow-top::after {
    /* popup en dessous de l'étiquette : pointe vers le haut */
    top: -12px;
    border-bottom-color: var(--note-popup-bg, white);
}

/* Distinction verset/hadith — mêmes couleurs que la pastille .rf-type-verset /
   .rf-type-hadith (public/refs-sidebar.css), pour que le popup reste
   visuellement rattaché à l'étiquette colorée qui l'a ouvert. La flèche reste
   neutre (couleur du fond) quelle que soit la position, pour ne pas
   surcharger — seul le bandeau du haut porte la couleur du type. */
.note-hover-popup.rf-type-verset {
    border-top: 3px solid var(--accent);
}

.note-hover-popup.rf-type-hadith {
    border-top: 3px solid var(--accent-gold);
}

/* ===== CALLOUTS ===== */
.callout {
    position: relative;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 6px;
    /* réduire distance entre callout et noeud */
    padding: 8px 12px;
    background: var(--callout-bg, linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%));
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-size: 12px;
    color: var(--callout-color, #856404);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 220px;
    align-self: center;
}

.callout::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -12px;
    /* pointe vers le bas (callout au-dessus du noeud) */
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--callout-bg, #ffc107);
}

.callout-content {
    font-weight: 500;
}

/* ===== SUMMARIES ===== */
/* Couleur d'accent des résumés (accolade + badge) : verte sur les thèmes
   clairs, or sur le thème noir — même logique que la palette des nœuds
   normaux (colorPalettes dans xmind.js), pour rester cohérent avec le site. */
:root {
    --xmind-summary-accent: #1A5238;
}

body.theme-noir {
    --xmind-summary-accent: #b89e14;
}

.summary-bracket-container {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
    /* none par défaut (l'accolade décorative n'a pas besoin d'intercepter les
       clics) — mais .summary-topic-branch (la vraie branche interactive
       qu'il héberge : nœuds, boutons plier/déplier, popups) réactive les
       événements souris ci-dessous, sinon ils traversent jusqu'à ce qu'il y
       a derrière. */
    pointer-events: none;
}

.summary-bracket {
    flex-shrink: 0;
}

.summary-topic-branch {
    pointer-events: auto;
}

.summary-bracket path,
.summary-bracket line {
    stroke: var(--xmind-summary-accent);
}

/* Nœud d'un topic "résumé" (ex: "Problème :") : un badge distinct des
   nœuds normaux — pas une couleur de profondeur classique — pour signaler
   que c'est un point de regroupement, pas un topic du plan normal. */
.node.node-summary-topic {
    background: var(--panel-light, #fff) !important;
    border: 2px solid var(--xmind-summary-accent) !important;
    border-radius: var(--card-radius, 16px) !important;
    color: var(--xmind-summary-accent) !important;
    /* .summary-bracket-container (position:absolute, sans largeur explicite)
       est positionné via un simple "left" — sans "right", sa largeur
       "auto" se calcule en shrink-to-fit dans l'espace RESTANT jusqu'au
       bord du bloc englobant (.layout-map-clockwise). Si ce nœud tombe près
       du bord droit de la carte, cet espace restant peut être minuscule
       (~65px vu en pratique), et le texte se retrouve compressé sur
       plusieurs lignes étroites au lieu d'utiliser max-width normalement.
       width: max-content force le nœud à se dimensionner sur son propre
       contenu, indépendamment de cette contrainte de position — max-width
       (ci-dessus, hérité de .node) continue de s'appliquer normalement. */
    width: max-content;
}

.node.node-summary-topic .node-content {
    font-style: italic;
    font-weight: 600;
    color: var(--xmind-summary-accent);
}

.in-summary {
    position: relative;
}

/* ===== NŒUD "ÉTIQUETTE DE BRANCHE" (@titre) ===== */
/* Un topic XMind dont le titre commence par "@" n'est pas rendu comme un
   nœud : il devient un simple point de passage invisible (les enfants
   continuent de s'y accrocher pour le layout), et son texte s'affiche via
   .inline-edge-label au-dessus du trait parent → nœud (voir drawConnections()). */
.node.node-inline-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 4px !important;
    min-width: 4px !important;
    height: 4px !important;
    min-height: 4px !important;
    overflow: visible !important;
}

.node.node-inline-label .node-content {
    display: none;
}

.inline-edge-label {
    position: absolute;
    transform: translate(-50%, -100%);
    margin-top: -6px;
    font-size: 12px;
    font-style: italic;
    color: var(--text-secondary, #666);
    white-space: nowrap;
    pointer-events: none;
    z-index: 6;
}

body.theme-noir .inline-edge-label {
    color: var(--text-secondary, #b0b0b0);
}

/* ===== BOUNDARIES ===== */
.boundary-overlay {
    position: absolute;
    border: 2px solid #4DD0E1;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 0;
    background: rgba(77, 208, 225, 0.08);
    box-shadow: 0 0 0 1px rgba(77, 208, 225, 0.3);
    transition: all 0.3s ease;
}

.boundary-title {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #4DD0E1;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.in-boundary {
    position: relative;
}

/* Styles spécifiques pour la carte mentale */
.xmind-container {
    width: 100%;
    height: calc(100vh - 120px) !important;
    /* iOS Safari : dvh = hauteur visible nette (sans la barre d'adresse).
       Déclarée APRÈS 100vh : les navigateurs modernes (Safari ≥ 15.4) prennent dvh,
       les anciens gardent le fallback 100vh. */
    height: calc(100dvh - 120px) !important;
    min-height: 700px;
    background: var(--panel);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    cursor: grab;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* ── Correctifs iOS — nécessaires TOUTES orientations et TOUS appareils.
       La media query xmind-mobile.css ne couvre que ≤ 768px, ce qui exclut
       iPhone paysage (~844-932px) et iPad (768-1024px).
       touch-action: none ici garantit qu'iOS laisse le JS gérer pan/zoom. */
    touch-action: none;
    overscroll-behavior: none;

    /* ── Variables contrôles mindmap — alignées sur le style notes ── */
    --mm-ctrl-bg: #f0f0f0;
    --mm-ctrl-border: rgba(0,0,0,0.08);
    --mm-btn-bg: rgba(0,0,0,0.04);
    --mm-btn-border: rgba(0,0,0,0.10);
    --mm-btn-color: #666;
    --mm-btn-hover-bg: rgba(0,0,0,0.08);
    --mm-btn-hover-color: #333;
    --mm-btn-hover-border: rgba(0,0,0,0.18);
    --mm-text-dim: #888;
    --mm-slider-track: rgba(0,0,0,0.12);
    --mm-thumb-ring: #f0f0f0;
}

/* ── Filigrane logo en arrière-plan des cartes mentales ── */
.xmind-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* tuiles décalées en quinconce — tile avec padding intégré, logo à ~200px */
    background-image: url('/assets/brand/logo-watermark-tile.svg'), url('/assets/brand/logo-watermark-tile.svg');
    background-repeat: repeat;
    background-size: 440px 194px;
    background-position: 0 0, 220px 97px;
    transform: rotate(-22deg);
    pointer-events: none;
    z-index: 0;
    filter: grayscale(1) brightness(0.4);
    opacity: 0.05;
}
body.theme-noir .xmind-container::before {
    filter: none;
    opacity: 0.05;
}

body.theme-blanc .xmind-container {
    --mm-ctrl-bg: #f0f0f0;
    --mm-ctrl-border: rgba(0,0,0,0.08);
    --mm-btn-bg: rgba(0,0,0,0.04);
    --mm-btn-border: rgba(0,0,0,0.10);
    --mm-btn-color: #666;
    --mm-btn-hover-bg: rgba(0,0,0,0.08);
    --mm-btn-hover-color: #333;
    --mm-btn-hover-border: rgba(0,0,0,0.18);
    --mm-text-dim: #888;
    --mm-slider-track: rgba(0,0,0,0.12);
    --mm-thumb-ring: #f0f0f0;
}

body.theme-beige .xmind-container {
    --mm-ctrl-bg: #e2cc9f;
    --mm-ctrl-border: rgba(196,165,114,0.3);
    --mm-btn-bg: rgba(0,0,0,0.04);
    --mm-btn-border: rgba(196,165,114,0.3);
    --mm-btn-color: #6B5B45;
    --mm-btn-hover-bg: rgba(0,0,0,0.08);
    --mm-btn-hover-color: #3B2F20;
    --mm-btn-hover-border: rgba(196,165,114,0.5);
    --mm-text-dim: #8B7355;
    --mm-slider-track: rgba(196,165,114,0.3);
    --mm-thumb-ring: #e2cc9f;
}

body.theme-noir .xmind-container {
    --mm-ctrl-bg: var(--panel, #1a2628);
    --mm-ctrl-border: rgba(255,255,255,0.08);
    --mm-btn-bg: rgba(255,255,255,0.06);
    --mm-btn-border: rgba(255,255,255,0.12);
    --mm-btn-color: rgba(255,255,255,0.6);
    --mm-btn-hover-bg: rgba(255,255,255,0.12);
    --mm-btn-hover-color: rgba(255,255,255,0.9);
    --mm-btn-hover-border: rgba(255,255,255,0.2);
    --mm-text-dim: var(--text-secondary, #b0b8bc);
    --mm-slider-track: rgba(255,255,255,0.15);
    --mm-thumb-ring: var(--panel, #1a2628);
}

.xmind-container.grabbing {
    cursor: grabbing;
}

/* Mode plein écran — !important nécessaire pour battre la règle de base
   .xmind-container { height: calc(100vh - 120px) !important }.
   Quand deux règles ont !important, la spécificité décide :
   .simulated-fullscreen (0,2,0) > .xmind-container seul (0,1,0). */
.xmind-container:fullscreen,
.xmind-container.simulated-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
}

.xmind-container.simulated-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    min-height: unset !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
}

/* .simulated-fullscreen (repli CSS iOS) ne peut jamais masquer le chrome
   Safari (barre d'adresse/barre d'outils) — une marge sur les 4 côtés évite
   que le contenu (barre de contrôles comprise) soit collé à ce chrome, pour
   qu'il reste bien visible en entier. Pas nécessaire pour :fullscreen natif
   (chrome déjà masqué). box-sizing:border-box (global) évite tout dépassement
   du width/height 100vw/100dvh défini plus haut. Les descendants position:
   absolute (.xmind-controls) se calent sur la boîte de padding, donc
   n'ont besoin d'aucun offset séparé pour hériter de cette marge. */
.xmind-container.simulated-fullscreen {
    padding: 20px !important;
}

.xmind-container:fullscreen .xmind-controls,
.xmind-container.simulated-fullscreen .xmind-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mm-ctrl-border, rgba(0,0,0,0.08));
    z-index: 10000;
    transition: opacity 0.3s, transform 0.3s;
}

/* padding sur .xmind-container ne s'applique PAS à ses enfants position:
   absolute (leur containing block est le padding box, qui INCLUT le
   padding — top:0/left:0/right:0 reste donc collé au bord réel, padding
   ou pas), donc la bande garde sa position de base (haut/gauche/droite à
   0) pour occuper tout l'espace jusqu'aux bords — plus de vide visible
   dans les coins. C'est son PROPRE padding (et non plus un décalage de
   position) qui pousse les contrôles à 20px des bords réels, comme avant.
   Étendu au plein écran NATIF (:fullscreen) — cette règle ne visait que le
   repli simulated-fullscreen, laissant les boutons collés à 8px du bord
   réel en natif alors que l'OS (iPadOS) réserve une zone en haut de l'écran
   (safeAreaInsets.top constaté à 32px dans les logs [FS-DEBUG]) — les
   boutons empiétaient sur cette zone, rendant leur tap peu fiable
   (signalement "1er bouton tape, les suivants ne répondent plus", en plein
   écran uniquement). max() garde au moins 28px même si l'inset est plus
   petit/absent (desktop, anciens iOS). */
.xmind-container:fullscreen .xmind-controls,
.xmind-container.simulated-fullscreen .xmind-controls {
    padding: max(28px, env(safe-area-inset-top, 28px)) 32px 8px;
    justify-content: center;
    /* Fond opaque (.xmind-controls de base) + padding agrandi ci-dessus =
       grand bandeau plein-largeur en plein écran — transparent ici : les
       boutons (qui ont déjà leur propre fond, cf. --mm-btn-bg) flottent
       directement sur la carte mentale au lieu d'un bandeau plaqué dessus.
       Couvre Xmind ET Bibliothèque, qui partagent .xmind-container. */
    background: transparent;
    border-bottom: none;
}

/* Auto-hide en plein écran */
.xmind-container:fullscreen .xmind-controls.controls-hidden,
.xmind-container.simulated-fullscreen .xmind-controls.controls-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}

.xmind-container:fullscreen #mindmap-wrapper,
.xmind-container.simulated-fullscreen #mindmap-wrapper {
    flex: 1;
    width: 100%;
    height: auto;
    /* PAS de overflow:hidden ici (contrairement à avant) : le pan/zoom
       (updateTransform() dans xmind.js) applique son transform DIRECTEMENT
       sur #mindmap-wrapper, pas sur un enfant interne dédié. Or overflow:hidden
       clippe dans l'espace LOCAL de l'élément avant que son propre transform
       ne soit appliqué — le SVG (bien plus grand que la boîte du wrapper)
       se retrouvait donc rogné à la fenêtre locale du wrapper avant même
       d'être déplacé/zoomé, laissant en pratique seulement le coin
       haut-gauche du contenu jamais visible, quel que soit le pan/zoom.
       overflow:visible (valeur de base, cf. règle #mindmap-wrapper plus bas)
       n'a pas ce problème puisque #container a lui-même overflow:hidden et
       clippe déjà au viewport réel. */
    min-height: 100%;
}

.fullscreen-btn {
    background: var(--mm-btn-bg, rgba(0,0,0,0.04));
    color: var(--mm-btn-color, #666);
    padding: 6px 12px;
    border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.10));
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.fullscreen-btn:hover {
    background: var(--mm-btn-hover-bg, rgba(0,0,0,0.08));
    color: var(--mm-btn-hover-color, #333);
    border-color: var(--mm-btn-hover-border, rgba(0,0,0,0.18));
}

/* Bouton loupe mobile — caché sur desktop */
.mobile-search-trigger {
    display: none;
}

/* Popup de recherche mobile — caché sur desktop */
.mobile-search-popup {
    display: none;
}

/* Animation de zoom sur noeud */
.node {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    margin: 8px;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    background: var(--panel-light, white);
    border: 2px solid var(--border-color, #ddd);
    /* Test : largeur fixe, texte sur plusieurs lignes au lieu de déborder */
    max-width: 400px;
    white-space: normal;
    word-wrap: break-word;
}

.node:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.node.focused {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
    animation: pulse 1.5s ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.2);
    }
}

/* Tailles selon la hiérarchie */
.node.depth-0 {
    font-size: 18px;
    padding: 16px 28px;
    font-weight: 700;
    border-width: 3px;
}

.node.depth-1 {
    font-size: 16px;
    padding: 14px 24px;
    font-weight: 600;
    border-color: #4CAF50;
}

.node.depth-2 {
    font-size: 14px;
    padding: 12px 20px;
    font-weight: 500;
    border-color: #2196F3;
}

.node.depth-3 {
    font-size: 13px;
    padding: 10px 18px;
    font-weight: 500;
    border-color: #FF9800;
}

.node.depth-4 {
    font-size: 12px;
    padding: 8px 16px;
    font-weight: 400;
    border-color: #9C27B0;
}

.node-content {
    font-weight: inherit;
    font-size: inherit;
    color: var(--text-primary, #333);
    text-align: center;
}

/* Pastille "(n)" : cercle doré centré sur le coin haut-gauche du nœud. */
.node-badge {
    position: absolute;
    top: -9px;
    left: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #c9a24b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    z-index: 5;
}

/* Case hors du nœud (texte riche XMind en petite police, ex. "-Jugement :-") :
   pastille .rf-ref-badge au-dessus, alignée à droite — symétrique de
   .node-labels (en bas à gauche). */
.node-subtitle {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: -5px; /* petit écart avec le bord du nœud (entre -3px = trop loin et -7px = collé) */
    padding-left: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* La case reprend la couleur de fond du thème (var(--panel), celle de la carte) via le style .rf-ref-badge par défaut :
   aucune couleur imposée ici. */

.toggle-btn {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icône + / − (SVG centré, cf. setToggleIcon dans xmind.js). */
.toggle-btn svg {
    display: block;
    width: 60%;
    height: 60%;
    pointer-events: none;
}

.toggle-btn:hover {
    background: #2d7055;
    transform: translateY(-50%) scale(1.1);
}

.xmind-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--mm-ctrl-bg, #f0f0f0);
    border-bottom: 1px solid var(--mm-ctrl-border, rgba(0,0,0,0.08));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* .xmind-container (ancêtre direct) pose touch-action:none pour laisser le
       JS gérer pan/pinch-zoom du canevas — mais l'effet réel de touch-action
       lors d'un toucher se calcule par intersection avec TOUS les ancêtres,
       donc les boutons ici héritaient de cette restriction. Sur WebKit/iOS,
       touch-action:none sur un ancêtre peut rendre la synthèse du click
       après touchend/touchmove peu fiable pour les enfants interactifs même
       quand le pan/zoom lui-même est bien exclu en JS (setupTouchPanZoom
       exclut déjà .xmind-controls, cf. zoom-pan-helpers.js) — signalement
       "boutons qui ne répondent pas du tout, dedans/dehors plein écran".
       manipulation restaure le tap/scroll natifs pour cette zone précise. */
    touch-action: manipulation;
}

/* Overrides thèmes explicites pour la barre de contrôles */
body.theme-noir .xmind-controls {
    background: var(--panel, #1a2628);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.theme-beige .xmind-controls {
    background: #e2cc9f;
    border-bottom-color: rgba(196, 165, 114, 0.3);
}

.xmind-controls button:not(.zoom-btn):not(.search-btn) {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.12));
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    background: var(--mm-btn-bg, rgba(0,0,0,0.04));
    color: var(--mm-btn-color, #666);
}

.xmind-controls button:not(.zoom-btn):not(.search-btn):hover {
    background: var(--mm-btn-hover-bg, rgba(0,0,0,0.08));
    color: var(--mm-btn-hover-color, #333);
    border-color: var(--mm-btn-hover-border, rgba(0,0,0,0.18));
}

.xmind-controls button:not(.zoom-btn):not(.search-btn):active {
    transform: scale(0.97);
}

/* Slider de zoom */
.zoom-slider-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mm-btn-bg, rgba(0,0,0,0.04));
    border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.10));
    border-radius: 6px;
    position: relative;
}

body.theme-noir .zoom-slider-container {
    background: rgba(255, 255, 255, 0.06); /* #FFFFFF0F */
    border-color: rgba(255, 255, 255, 0.12);
}

body.theme-beige .zoom-slider-container {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(196, 165, 114, 0.3);
}

.zoom-slider-container * {
    flex-shrink: 0;
}

.zoom-slider {
    width: 120px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mm-slider-track, rgba(0,0,0,0.12));
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 2px solid var(--mm-thumb-ring, rgba(240,240,240,0.95));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

.zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.zoom-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 2px solid var(--mm-thumb-ring, rgba(240,240,240,0.95));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

.zoom-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
}

.zoom-label {
    font-size: 12px;
    color: var(--mm-text-dim, #888);
    font-weight: 500;
    min-width: 16px;
    text-align: center;
}

/* Boutons zoom +/- */
.zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.10));
    background: var(--mm-btn-bg, rgba(0,0,0,0.04));
    color: var(--mm-btn-color, #666);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
    user-select: none;
}

.zoom-btn:hover {
    background: var(--mm-btn-hover-bg, rgba(0,0,0,0.08));
    color: var(--mm-btn-hover-color, #333);
    border-color: var(--mm-btn-hover-border, rgba(0,0,0,0.18));
    transform: scale(1.15);
}

.zoom-btn:active {
    transform: scale(0.9);
}

/* Boutons icônes plier/déplier */
.expand-btn,
.collapse-btn {
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#zoomLevel {
    margin-left: 6px;
    font-weight: 600;
    font-size: 12px;
    min-width: 40px;
    color: var(--mm-text-dim, #888);
}

#mindmap-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 100%;
    overflow: visible;
    cursor: grab;
    transform-origin: top left;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Promotion en calque GPU dédié PENDANT un geste actif (drag/pinch/molette)
   seulement — posé/retiré par JS (cf. zoom-pan-helpers.js) plutôt que fixe
   en CSS : sans ça, le pan/zoom (transform à chaque frame, cf.
   updateTransform() dans xmind.js/mindmap-core.js) peut forcer un repaint
   complet du contenu (box-shadow/gradients sur chaque nœud) plutôt qu'une
   simple recomposition — surtout sensible dézoomé, quand beaucoup de nœuds
   sont visibles à l'écran en même temps. Laissé actif en permanence, la
   texture de calque mise en cache dégrade la netteté du texte/traits une
   fois redimensionnée (net au repos, mais visiblement flou dézoomé) — d'où
   le retrait dès le geste terminé, une fois immobile.
   */
#mindmap-wrapper.will-change-transform {
    will-change: transform;
}

#mindmap-wrapper.grabbing {
    cursor: grabbing;
    transition: none;
}

/* Pendant un drag actif (souris), le contenu défile sous un curseur resté
   globalement fixe à l'écran — le navigateur recalcule alors le :hover de
   chaque nœud qui passe dessous, déclenchant sa transition box-shadow/scale
   (cf. .node:hover) et donc un repaint. Dézoomé, beaucoup plus de nœuds
   défilent sous le curseur par seconde qu'zoomé → beaucoup plus de repaints
   pendant un déplacement rapide, perçu comme des saccades. Le survol des
   nœuds ne sert à rien pendant un pan (on ne clique pas dessus), donc on le
   désactive le temps du drag ; restauré automatiquement au relâchement
   (retrait de .grabbing, cf. endDrag() dans zoom-pan-helpers.js). */
#mindmap-wrapper.grabbing .node,
#mindmap-wrapper.grabbing .toggle-btn {
    pointer-events: none;
}

#mindmap-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
    transform-origin: top left;
}

/* Keep stroke width visually constant while scaling the wrapper */
#mindmap-svg path,
#mindmap-svg line {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#mindmap-content {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 30px;
    min-width: max-content;
    min-height: max-content;
    transform-origin: top left;
}

.children-container {
    display: flex;
    flex-direction: column;
    /* 24px : assez pour une étiquette (quasi collée au nœud) sur une seule
       ligne, sans chevaucher le frère suivant (gap, pas margin — ne
       s'applique qu'ENTRE des éléments, donc un enfant unique n'en profite
       jamais et ça ne fausse pas align-items:center dans ce cas,
       cf. .branch). */
    gap: 24px;
    margin-left: 60px;
    position: relative;
    /* Sans ça, le défaut flex (stretch) étire chaque .branch enfant à la
       largeur du frère le plus large du groupe — invisible à l'œil (pas de
       fond sur .branch) mais mesuré tel quel par drawSummaries() via
       getBoundingClientRect(), qui tire alors l'accolade et le nœud-résumé
       très loin des nœuds réellement affichés. */
    align-items: flex-start;
}

.children-container.collapsed {
    display: none !important;
}

.branch {
    display: flex;
    align-items: center;
    position: relative;
}

/* Style spécial pour les topics flottants */
.floating-topic {
    border-left: 3px dashed #FF6B6B;
    padding-left: 15px;
    margin-top: 15px;
}

.floating-topic>.node {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%) !important;
    border: 2px dashed #FF6B6B !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

/* Topics flottants à côté de la racine */
.floating-topic-root {
    position: relative;
}

/* Container des nœuds flottants (positionnement absolu) */
.floating-topics-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.floating-topic-root>.node {
    background: linear-gradient(135deg, #fff9f0 0%, #ffe8d6 100%) !important;
    border: 2px solid #FF9800 !important;
    box-shadow: 0 3px 12px rgba(255, 152, 0, 0.25);
    font-weight: 600;
}

/* removed floating pin icon */

.empty-message {
    text-align: center;
    color: var(--muted, #999);
    font-size: 18px;
    padding: 50px;
}

/* ===== Recherche dans la carte mentale ===== */
.search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

.search-input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.12));
    min-width: 0;
    flex: 1 1 240px;
    max-width: 400px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    background: var(--mm-btn-bg, rgba(0,0,0,0.04));
    color: var(--mm-btn-hover-color, #333);
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--mm-btn-border, rgba(0,0,0,0.12));
    background: var(--mm-btn-bg, rgba(0,0,0,0.04));
    cursor: pointer;
    font-size: 10px;
    transition: all 0.15s ease;
    color: var(--mm-btn-color, #666);
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

.search-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.search-btn:hover {
    background: var(--mm-btn-hover-bg, rgba(0,0,0,0.08));
    color: var(--mm-btn-hover-color, #333);
    border-color: var(--mm-btn-hover-border, rgba(0,0,0,0.18));
    transform: scale(1.15);
}

.search-btn:active {
    transform: scale(0.9);
}

.search-count {
    font-size: 11px;
    color: var(--mm-text-dim, #888);
    min-width: 44px;
    text-align: center;
    font-weight: 500;
}

/* Overrides thèmes explicites — champ de recherche et boutons nav */
body.theme-noir .search-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

body.theme-noir .search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

body.theme-noir .search-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

body.theme-noir .search-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

body.theme-noir .search-count {
    color: rgba(255, 255, 255, 0.5);
}

body.theme-beige .search-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(196, 165, 114, 0.3);
    color: #3B2F20;
}

body.theme-beige .search-input::placeholder {
    color: #8B7355;
}

body.theme-beige .search-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(196, 165, 114, 0.3);
    color: #6B5B45;
}

body.theme-beige .search-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(196, 165, 114, 0.5);
    color: #3B2F20;
}

body.theme-beige .search-count {
    color: #8B7355;
}

/* Highlight des résultats */
.node.search-match {
    box-shadow: 0 4px 12px rgba(45, 112, 85, 0.12);
    border-color: var(--accent, #2d7055);
    transform: scale(1.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.node.search-active {
    box-shadow: 0 6px 18px rgba(45, 112, 85, 0.2);
    border-width: 3px;
    transform: scale(1.06);
    background: #fffbea;
}

.search-hit {
    background: #fffb8f;
    padding: 0 0;
    display: inline;
    border-radius: 3px;
    transition: background 0.12s ease, color 0.12s ease;
}

.search-hit.active-hit {
    background: #ffb84d;
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Badge indiquant la structure XMind détectée */
#structureBadge {
    position: absolute;
    top: 18px;
    right: 110px;
    z-index: 150;
    background: rgba(45, 112, 85, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    font-family: 'Inter', sans-serif;
}

/* Layout helpers (approximations) */
.layout-map #mindmap-content {
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.layout-map .branch {
    flex-direction: column;
    align-items: center;
}

.layout-map .children-container {
    margin-left: 0;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.layout-tree #mindmap-content {
    justify-content: flex-start;
    align-items: flex-start;
}

.layout-tree .branch {
    flex-direction: row;
}

.layout-logic-left .branch {
    flex-direction: row-reverse;
}

.layout-logic-right .branch {
    flex-direction: row;
}

.layout-timeline-horizontal #mindmap-content {
    flex-direction: row;
}

.layout-timeline-vertical #mindmap-content {
    flex-direction: column;
}

.layout-timeline-vertical .branch {
    flex-direction: column;
    align-items: center;
}

.layout-timeline-vertical .children-container {
    margin-left: 0;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
}

.layout-timeline-vertical .branch>.node {
    margin: 0 auto;
}

.layout-timeline-vertical .toggle-btn {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -14px;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    font-size: 14px;
    border-radius: 50%;
}

.layout-grid .children-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* Root node emphasised */
.root-node {
    transform: scale(1.06);
    border-width: 3px;
    font-size: 16px;
    padding: 14px 24px;
    background: var(--panel-light, #fffdf0);
}

/* Debug visual mode */
.xmind-debug .branch {
    outline: 2px dashed rgba(255, 127, 80, 0.25);
    background: rgba(255, 255, 255, 0.01);
}

.xmind-debug .children-container {
    outline: 1px dashed rgba(100, 149, 237, 0.15);
    padding: 6px;
}

.xmind-debug .node {
    box-shadow: 0 0 0 2px rgba(34, 139, 34, 0.06) inset;
}

.xmind-debug .branch::before {
    content: attr(data-depth);
    position: absolute;
    left: 6px;
    top: 6px;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    border-radius: 8px;
}

/* Floating debug toggle button */
#layoutDebugBtn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    background: #222;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

#layoutDebugBtn.active {
    background: #2d7055;
}

/* ===== LAYOUT MAP CLOCKWISE SPECIFIQUE ===== */
.layout-map-clockwise #mindmap-content {
    justify-content: center;
    align-items: center;
}

.layout-map-clockwise .mindmap-global-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.layout-map-clockwise .branches-left .branch {
    flex-direction: row-reverse;
}

.layout-map-clockwise .branches-left .children-container {
    margin-left: 0;
    margin-right: 50px;
}

.layout-map-clockwise .branches-right .branch {
    flex-direction: row;
}

.layout-map-clockwise .branches-right .children-container {
    margin-left: 50px;
    margin-right: 0;
}

/* Toggle button position pour les branches gauches */
.layout-map-clockwise .branches-left .toggle-btn {
    right: auto;
    left: -10px;
}

/* Toggle buttons pour la racine en layout clockwise */
.toggle-root-left {
    right: auto !important;
    left: -15px !important;
}

.toggle-root-right {
    right: -15px !important;
    left: auto !important;
}

/* Couleurs des branches selon le niveau - inspirées de XMind */
.layout-map-clockwise .branches-left>.branch:nth-child(1)>.node {
    border-color: #E18BEE;
    background: #fdf4ff;
}

.layout-map-clockwise .branches-left>.branch:nth-child(2)>.node {
    border-color: #6FD0F9;
    background: #f0f9ff;
}

.layout-map-clockwise .branches-right>.branch:nth-child(1)>.node {
    border-color: #FF6B6B;
    background: #fff5f5;
}

.layout-map-clockwise .branches-right>.branch:nth-child(2)>.node {
    border-color: #FF9F69;
    background: #fff8f5;
}

.layout-map-clockwise .branches-right>.branch:nth-child(3)>.node {
    border-color: #97D3B6;
    background: #f5fdf9;
}

.layout-map-clockwise .branches-right>.branch:nth-child(4)>.node {
    border-color: #88E2D7;
    background: #f0fdfa;
}

/* Style amélioré pour la racine centrale */
.layout-map-clockwise .central-root .node {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 3px solid var(--text-primary, #333);
    padding: 18px 32px;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Toggle button unique pour la racine centrale */
.layout-map-clockwise .central-root .toggle-root-all {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

/* Branches left/right collapsed */
.layout-map-clockwise .branches-left.collapsed,
.layout-map-clockwise .branches-right.collapsed {
    display: none !important;
}

/* Responsive pour le layout clockwise */
/* ====================================== */
/* XMIND — Thèmes et racine */
/* ====================================== */

/* Theme Noir: racine + boutons dorés */
body.theme-noir .toggle-btn {
    background: var(--accent-gold);
    color: #000;
}

body.theme-noir .toggle-btn:hover {
    background: var(--accent-gold-light);
}

body.theme-noir .central-root .node {
    background: var(--accent-gold) !important;  /* racine dorée */
    border-color: var(--accent-gold) !important;
}

/* Thèmes clairs: racine verte (du site) */
body.theme-blanc .central-root .node,
body.theme-beige .central-root .node {
    background: #1a5238 !important;  /* vert */
    border-color: #1a5238 !important;
}

@media (max-width: 1200px) {
    .layout-map-clockwise .mindmap-global-container {
        flex-direction: column;
        gap: 20px;
    }

    .layout-map-clockwise .branches-left,
    .layout-map-clockwise .branches-right {
        align-items: center;
    }

    .layout-map-clockwise .branches-left .branch,
    .layout-map-clockwise .branches-right .branch {
        flex-direction: column;
    }

    .layout-map-clockwise .branches-left .children-container,
    .layout-map-clockwise .branches-right .children-container {
        margin: 20px 0 0 0;
    }
}

@media (max-width: 500px) and (pointer: coarse) {
    .xmind-container {
        height: calc(100dvh - 275px) !important;
        min-height: unset !important;
    }
}