/* === HYPERONYMIE – layout harmonisé avec fleurs / intensité === */

/* Wrapper global de la carte */
.hyperonymie-wrapper {
    padding-bottom: 1rem;
}

/* Deux colonnes : arbre + sidebar */
.hyperonymie-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Conteneur de l’aperçu (fond blanc + bord arrondi) */
.hyperonymie-canvas-container {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7f0;
    padding: 0.75rem;
}

/* ============================= */
/*      ZONE D’APERÇU (ARBRE)    */
/* ============================= */

.hyperonymie-canvas {
    position: relative;
    width: 100%;
    height: 580px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px dashed #e5e7f0;
    overflow: auto;
    padding: 0.75rem;
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;   /* aligné à gauche, scroll horizontal */
}

/* Racine de l’arbre */
.hyper-tree-root {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;               /* espacement confortable */
    min-width: max-content;    /* évite la compression */
}

/* Un nœud (hyperonyme ou hyponyme) */
.hyper-node {
    min-width: 120px;
    max-width: 220px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #f3f4ff;
    border: 1px solid #4f46e5;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.hyper-node:hover {
    background: #e0e7ff;
}

/* Bloc enfant : trait vertical + rangée d’enfants */
.hyper-children-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Trait vertical qui descend du parent vers la rangée des hyponymes */
.hyper-node-connector {
    width: 0;
    height: 16px;
    border-left: 2px solid #4b5563;
    margin: 6px auto 0;           /* ⬅️ 6px de marge sous le nœud : trait un peu plus long visuellement */
}

/* Rangée d’hyponymes (horizontale) */
.hyper-children-row {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2rem;
    padding-top: 10px;      /* place pour la barre horizontale */
    box-sizing: border-box;
}

/* ❌ On désactive totalement l'ancienne ligne pleine largeur */
.hyper-children-row::before {
    content: none;
}


/* Enveloppe de chaque hyponyme (petit segment vertical + nœud) */
/* Enveloppe de chaque hyponyme (petit segment vertical + nœud + éventuels enfants) */
.hyper-child-wrapper {
    position: relative;
    padding-top: 10px;          /* place pour le segment vertical */
    
    /* ⬇️ NOUVEAU : on centre le nœud et, si présent, son sous-arbre */
    display: flex;
    flex-direction: column;
    align-items: center;        /* le .hyper-node et le .hyper-children-block en dessous
                                   sont centrés horizontalement */
}


/* Trait vertical depuis la barre horizontale vers le nœud */
.hyper-child-wrapper::before {
    content: "";
    position: absolute;
    top: -8px;              /* léger chevauchement => joint parfait */
    left: 50%;
    width: 0;
    height: 18px;           /* trait plus long pour arriver exactement à la ligne */
    border-left: 2px solid #4b5563;
    transform: translateX(-50%);
}

/* Ligne horizontale calculée en JS (entre le 1er et le dernier hyponyme) */
.hyper-children-line {
    position: absolute;
    top: 0;                        /* même “niveau” que les traits verticaux qui remontent */
    height: 0;
    border-top: 2px solid #4b5563; /* trait visible */
    box-sizing: border-box;
    pointer-events: none;          /* ne gêne pas les clics */
}


/* ============================= */
/*            SIDEBAR            */
/* ============================= */

.hyperonymie-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hyperonymie-panel {
    border-radius: 14px;
    border: 1px solid #e5e7f0;
    background: #f9fafb;
    padding: 0.75rem 0.85rem;
}

.hyperonymie-panel h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

/* ============================= */
/*    ÉDITEUR DE NŒUDS (liste)  */
/* ============================= */

.hyper-node-editor {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.hyper-node-editor .field-input {
    flex: 1;
}

.hyper-node-editor-actions {
    display: flex;
    gap: 0.25rem;
}

/* Indentation visuelle selon le niveau */
.hyper-node-level-0 {
    margin-left: 0;
}

.hyper-node-level-1 {
    margin-left: 0.8rem;
}

.hyper-node-level-2 {
    margin-left: 1.6rem;
}

.hyper-node-level-3,
.hyper-node-level-4 {
    margin-left: 2.4rem;
}

/* Petits boutons (+ / ×) */
.btn-icon {
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    padding: 0 0.35rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-icon:hover {
    background: #e5e7eb;
}

/* ============================= */
/*        PANEL INTERCONNEX.     */
/* ============================= */

.hyperonymie-links-panel {
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e5e7f0;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
}

/* ============================= */
/*          RESPONSIVE           */
/* ============================= */

@media (max-width: 900px) {
    .hyperonymie-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hyperonymie-canvas {
        height: 480px;
    }
}

/* ============================= */
/*            IMPRESSION         */
/* ============================= */

@media print {
    @page {
        size: A4 landscape;
        margin: 1cm;
    }

    header,
    footer,
    .app-header,
    .app-footer,
    .hyperonymie-sidebar,
    .breadcrumb {
        display: none !important;
    }

    .app-main {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    /* Forcer l’affichage de la vue hyperonymie pendant l’impression */
    #view-corpus-hyperonymie {
        display: block !important;
    }

    /* Le cadre arbre : on enlève la hauteur fixe et le scroll
       pour que l’arbre puisse se découper sur plusieurs pages. */
    .hyperonymie-canvas.hyper-printing {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
        padding: 0.4cm !important;
    }
}