/* ============================================
   📱 XMIND-MOBILE.CSS
   Responsive pour la page carte mentale (xmind.html)
   Mobile-first, puis tablette
   ============================================ */

/* ===== CIBLES TACTILES — tout appareil à doigt, indépendant de la largeur =====
   Contrairement aux sections ci-dessous (limitées à max-width: 500/768px),
   ceci s'applique aussi aux tablettes (iPad, Android ~768-1366px) qui reçoivent
   par ailleurs le layout desktop : un .toggle-btn de 20px reste trop petit pour
   un doigt même sur un grand écran tactile. */
@media (pointer: coarse) {
    /* right: -30px (28px de largeur + 2px de marge) place le bouton
       ENTIÈREMENT à l'extérieur du nœud — avec -14px (la moitié de sa
       largeur), il mordait de 14px vers l'intérieur, ce qui dépassait le
       padding droit des nœuds profonds (depth-2: 14px, depth-3: 12px...) et
       venait chevaucher le texte. Indépendant de la profondeur, donc plus
       robuste qu'un ajustement au cas par cas du padding. */
    .toggle-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
        right: -30px;
    }

    /* Variante gauche (branches à gauche de la racine, layout clockwise) :
       même logique, décalage symétrique pour rester hors du nœud. Sans ça,
       le bouton gardait le -10px du desktop mais avec la largeur 28px du
       mobile — un chevauchement encore pire (18px) que côté droit. */
    .branch-left .toggle-btn.toggle-left,
    .branch-left > .node > .toggle-btn,
    .layout-map-clockwise .branches-left .toggle-btn {
        right: auto;
        left: -30px;
    }

    /* Boutons de la racine : offsets desktop posés en !important, donc
       nécessite !important ici aussi pour les surcharger sur mobile. */
    .toggle-root-left {
        left: -30px !important;
    }
    .toggle-root-right {
        right: -30px !important;
    }

    /* Bouton "Copier" du popup de note (note-hover-popup.js) : 14px sur desktop
       (taille du texte, cf. xmind-style.css) — trop petit pour un doigt, même
       traitement que .toggle-btn ci-dessus. */
    .note-popup-copy-btn {
        width: 28px;
        height: 28px;
    }

    /* Connecteur "@" à enfant unique (dataset.inlineLabelBefore, xmind.js) :
       le texte posé sur ce trait (.inline-edge-label) chevauche le bouton
       +/- du nœud parent. Sur desktop le bouton reste collé/quasi dans le
       nœud (right/left: -10px) ; sur mobile il en est sorti entièrement
       (right/left: -30px, 28px de large, cf. règle .toggle-btn plus haut) et
       mord directement sur le début du trait, là où le texte est censé
       commencer. On rallonge ce trait pour compenser (marge JS existante de
       26px, cf. xmind.js:1684-1691 + l'espace pris par le bouton sorti).
       !important nécessaire : la marge de base est posée en style inline
       par xmind.js, plus spécifique qu'une règle de classe normale. */
    .branch:has(> .node-wrapper > .node[data-inline-label-before]),
    .branch:has(> .node[data-inline-label-before]) {
        margin-left: 56px !important;
        margin-right: 56px !important;
    }
}

/* ===== MOBILE ≤ 768px ===== */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    /* --- Titre plus compact --- */
    .xmind-title {
        font-size: 1.2rem;
        margin: 12px 12px 6px;
    }

    /* --- Parent du container : hauteur = viewport - header mobile - bottom nav --- */
    .hero-left {
        height: calc(100dvh - 160px) !important;
        min-height: unset !important;
    }

    /* --- Conteneur principal : remplit son parent (hors fullscreen) --- */
    .xmind-container:not(.simulated-fullscreen):not(:fullscreen) {
        min-height: unset !important;
        height: 100% !important;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        touch-action: none; /* Empêcher scroll/zoom navigateur, géré par JS */
    }

    /* --- Barre de contrôles : multi-lignes, pas de scroll horizontal --- */
    .xmind-controls {
        padding: 8px 10px;
        gap: 6px;
        overflow-x: hidden !important;
        flex-wrap: wrap !important;
    }

    .xmind-controls button:not(.zoom-btn):not(.search-btn) {
        padding: 6px 10px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Slider de zoom plus compact */
    .zoom-slider-container {
        padding: 5px 10px;
        gap: 6px;
        flex-shrink: 0;
    }

    .zoom-slider {
        width: 90px;
    }

    .zoom-label {
        font-size: 12px;
    }

    #zoomLevel {
        font-size: 12px;
        min-width: 40px;
        margin-left: 4px;
    }

    /* --- Recherche desktop : cachée sur mobile --- */
    .search-bar {
        display: none !important;
    }

    /* Bouton loupe mobile — mêmes dimensions que les autres boutons */
    .mobile-search-trigger {
        display: inline-flex !important;
    }

    .mobile-search-trigger:active {
        transform: scale(0.97);
    }

    /* Popup de recherche mobile — fixé en bas à droite. bottom: 92px pour
       passer au-dessus de la bottom-nav (.sidebar, common-mobile.css) : elle
       occupe les ~80 derniers px du viewport (bottom: 12px + max-height 68px),
       60px la faisait chevaucher d'une vingtaine de px. */
    .mobile-search-popup {
        display: none;
        position: fixed;
        bottom: 92px;
        right: 16px;
        z-index: 100000;
        background: var(--mm-ctrl-bg, #f0f0f0);
        border: 1px solid var(--mm-ctrl-border, rgba(0,0,0,0.12));
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
        width: calc(100vw - 32px);
        max-width: 360px;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-search-popup.open {
        display: flex;
    }

    .mobile-search-popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-bottom: 1px solid var(--mm-ctrl-border, rgba(0,0,0,0.08));
        gap: 8px;
    }

    .mobile-search-popup-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--mm-btn-color, #666);
        flex-shrink: 0;
    }

    .mobile-search-popup-nav {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-search-close {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--mm-btn-color, #666);
        padding: 4px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-search-close:active {
        background: var(--mm-btn-hover-bg, rgba(0,0,0,0.08));
    }

    .mobile-search-popup-body {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 10px 12px;
    }

    .mobile-search-popup-body .search-input {
        min-width: 0 !important;
        width: 100%;
        flex: 1;
        font-size: 13px;
        padding: 6px 8px;
    }

    .mobile-search-popup-header .search-btn {
        flex-shrink: 0;
    }

    .mobile-search-popup-header .search-count {
        font-size: 11px;
        min-width: 36px;
        flex-shrink: 0;
        text-align: center;
    }

    /* --- Nœuds : tailles réduites --- */
    .node {
        padding: 8px 12px;
        margin: 5px;
        font-size: 12px;
    }

    .node.depth-0 {
        font-size: 14px;
        padding: 12px 18px;
    }

    .node.depth-1 {
        font-size: 13px;
        padding: 10px 16px;
    }

    .node.depth-2 {
        font-size: 12px;
        padding: 8px 14px;
    }

    .node.depth-3 {
        font-size: 11px;
        padding: 7px 12px;
    }

    .node.depth-4 {
        font-size: 10px;
        padding: 6px 10px;
    }

    /* Branches : gap et margin-left identiques au desktop (24px / 60px, cf.
       xmind-style.css) — pas réduits, malgré le nom de ce commentaire à
       l'origine : le gap réserve la place de .node-labels (position
       absolute, ne compte pas dans la hauteur flex), et margin-left laisse
       la place aux étiquettes inline sur le connecteur (.inline-edge-label,
       positionnée au milieu géométrique du connecteur — avec un connecteur
       trop court, la même étiquette déborde sur le nœud parent). Aucune des
       deux ne rétrécit sur mobile (font-size fixes), donc les réduire fait
       chevaucher. */
    .children-container {
        margin-left: 60px;
        gap: 24px;
    }

    #mindmap-content {
        padding: 15px;
    }

    /* Toggle bouton plus grand pour le tactile — voir le bloc
       @media (pointer: coarse) plus haut pour l'explication du -30px
       (entièrement hors du nœud, quelle que soit la profondeur). */
    .toggle-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
        right: -30px;
    }

    .branch-left .toggle-btn.toggle-left,
    .branch-left > .node > .toggle-btn,
    .layout-map-clockwise .branches-left .toggle-btn {
        right: auto;
        left: -30px;
    }

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

    /* Plein écran */
    .fullscreen-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Fullscreen mobile */
    .xmind-container:fullscreen .xmind-controls {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .xmind-container:fullscreen .zoom-slider {
        width: 80px;
    }

    /* Popup recherche en plein écran */
    .xmind-container:fullscreen .mobile-search-popup,
    .xmind-container.simulated-fullscreen .mobile-search-popup {
        bottom: 10px;
    }

    /* Layout clockwise : empiler */
    .layout-map-clockwise .mindmap-global-container {
        flex-direction: column;
        gap: 12px;
    }

    .layout-map-clockwise .central-root .node {
        padding: 12px 20px;
        font-size: 16px;
    }

    /* Anciennement "margin: 12px 0 0 0" (les 4 côtés, y compris margin-left
       à 0) — pensé pour un empilement vertical qui ne s'applique plus : le
       layout reste horizontal sur mobile (xmind-override.css force
       flex-direction: row/row-reverse même <1200px, pour ne pas casser le
       calcul JS des connecteurs lors d'un zoom navigateur). Avec margin-left
       à 0, le connecteur parent → enfant devient trop court pour loger une
       étiquette inline (.inline-edge-label) sans déborder sur le nœud
       parent. Repris des valeurs desktop (xmind-style.css:1338-1350).  */
    .layout-map-clockwise .branches-left .children-container {
        margin-left: 0;
        margin-right: 50px;
    }

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

    /* Empty message */
    .empty-message {
        font-size: 15px;
        padding: 30px;
    }
}

/* ===== PETIT MOBILE ≤ 480px ===== */
@media (max-width: 480px) {

    .xmind-container:not(.simulated-fullscreen):not(:fullscreen) {
        min-height: unset !important;
        height: 100% !important;
    }

    .xmind-controls {
        padding: 6px 8px;
        gap: 4px;
        overflow-x: hidden !important;
        flex-wrap: wrap !important;
    }

    .xmind-controls button:not(.zoom-btn):not(.search-btn) {
        padding: 5px 8px;
        font-size: 11px;
    }

    .search-input {
        min-width: 0 !important;
        width: 100%;
        flex: 1;
        font-size: 12px;
    }

    .search-bar {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
    }

    .zoom-slider {
        width: 70px;
    }

    .node {
        padding: 6px 10px;
        font-size: 11px;
    }

    .node.depth-0 {
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Même raison qu'au bloc ≤500px ci-dessus : gap et margin-left alignés
       sur le desktop pour ne pas chevaucher les étiquettes de note et les
       étiquettes inline sur connecteur. */
    .children-container {
        margin-left: 60px;
        gap: 24px;
    }

    #mindmap-content {
        padding: 10px;
    }
}

/* ===== TABLETTE 769px – 1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    .xmind-container {
        min-height: 500px;
    }

    .xmind-controls {
        padding: 10px 14px;
    }

    .search-input {
        min-width: 250px;
    }

    .zoom-slider {
        width: 120px;
    }

    .node.depth-0 {
        font-size: 16px;
    }
}

/* ===== ORIENTATION PAYSAGE MOBILE ===== */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    .xmind-container:not(.simulated-fullscreen):not(:fullscreen) {
        height: calc(100dvh - 60px) !important;
        min-height: 250px;
    }

    /* Controls multi-lignes, ultra compact */
    .xmind-controls {
        padding: 4px 8px;
        gap: 4px;
        overflow-x: hidden !important;
        flex-wrap: wrap !important;
    }

    .xmind-controls button:not(.zoom-btn):not(.search-btn) {
        padding: 4px 8px;
        font-size: 11px;
    }

    /* Search bar compact pour tenir sur la 1ère ligne avec le zoom slider */
    .search-bar {
        flex-basis: auto;
        width: auto;
        flex-shrink: 1;
    }
}

/* ===== PRÉFÉRENCE : réduire les animations ===== */
@media (prefers-reduced-motion: reduce) {

    .node,
    .xmind-container,
    .toggle-btn,
    .zoom-slider::-webkit-slider-thumb {
        transition: none !important;
    }

    @keyframes pulse {

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