/* ============================================================
   LEV ARTICLES – organigramme.css
   Shortcode : [lev_articles_organigramme]
   Plugin : LutryEnVie · https://lutryenvie.ch
   ============================================================ */

/* ── Variables couleurs (fallback autonome, Safari) ─────────
   Valeurs canoniques dans style.css du thème.               */
:root {
    --lev-cat-activites:       rgba(237, 125,  50, 1);
    --lev-cat-activites-light: rgba(237, 145,  84, 1);
    --lev-cat-activites-dark:  rgba(200,  90,  20, 1);
    --lev-cat-gestion:         rgba(255, 192,   1, 1);
    --lev-cat-gestion-light:   rgba(255, 207,  70, 1);
    --lev-cat-gestion-dark:    rgba(200, 145,   0, 1);
    --lev-cat-decision:        rgba(112, 173,  71, 1);
    --lev-cat-decision-light:  rgba(150, 220, 103, 1);
    --lev-cat-decision-dark:   rgba( 80, 130,  50, 1);
}


/* ── 1. Conteneur global ─────────────────────────────────── */

.lev-org-wrapper {
    font-size:   0.9rem;
    margin:      1.5rem 0;
    box-sizing:  border-box;
}


/* ── 2. Pilule — base ────────────────────────────────────── */

.lev-org-pill {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0.45rem 1.4rem;
    border-radius:   57px;
    font-weight:     400;
    font-size:       1.88rem;
    color:           black;
    line-height:     1.3;
    box-sizing:      border-box;
}

.lev-org-pill-text {
    text-align: center;
}

/* Pilule grande (Assemblée générale, Groupe habitants) */
.lev-org-pill-lg {
    font-size: 1.88rem;
    min-width: 230px;
}

/* Pilule avec image mise en avant */
.lev-org-has-img {
    justify-content: flex-start;
    padding:         0px 1.2rem 0px 0px;
    gap:             0.8rem;
}

.lev-org-has-img .lev-org-pill-text {
    flex:       1;
    text-align: center;
}

.lev-org-pill-img {
    width:         113px;
    height:        113px;
    border-radius: 57px;   /* = 113px / 2 → cercle parfait */
    object-fit:    cover;
    flex-shrink:   0;
    display:       block;
}


/* ── 3. Couleurs par catégorie ───────────────────────────── */

.lev-org-pill-decision {
    background: radial-gradient(var(--lev-cat-decision) 0%, var(--lev-cat-decision-light) 100%);
}

.lev-org-pill-gestion {
    background: radial-gradient(var(--lev-cat-gestion) 0%, var(--lev-cat-gestion-light) 100%);
}

.lev-org-pill-activites {
    background: radial-gradient(var(--lev-cat-activites) 0%, var(--lev-cat-activites-light) 100%);
}


/* ── 4. Connecteur vertical autonome (usage externe éventuel) */

.lev-org-connector {
    width:       2px;
    height:      1.4rem;
    background:  #bbb;
    flex-shrink: 0;
    align-self:  center;
}


/* ── 5. Grille principale — Assemblée générale + gestion + activités ── */
/*                                                             */
/*  Colonne 1 (1fr)  │  Colonne 2 (auto)  │  Colonne 3 (1fr) */
/*  ─────────────────┼────────────────────┼──────────────────*/
/*  gestion gauche   │  Groupe habitants  │  gestion droite   */
/*                   │  (+ gestion mid)   │                   */
/*  ─────────────────┴────────────────────┴──────────────────*/
/*  activités gauche │   (vide)           │  activités droite */
/*                                                             */
/*  Le gap entre les deux colonnes d'activités coincide       */
/*  exactement avec le centre de la colonne "Groupe hab."     */

.lev-org-main-grid {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap:            1rem;
    row-gap:               0;
    width:                 fit-content;
    min-width:             min(100%, 720px);
    margin:                0 auto;          /* centre la grille → colonne 2 au centre de la page */
    align-items:           start;
}

/* Colonnes latérales (gestion gauche/droite et activités) */
.lev-org-side-col {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    padding:        0.35rem 0;
}

.lev-org-side-col .lev-org-pill {
    width: 100%;
}

/* Colonne centrale : Groupe habitants + éventuel item gestion */
.lev-org-center-col {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    align-items:    center;
    padding:        0.35rem 0;
}

/* Séparateur interne entre gestion et activités :
   line verticale centrée sur la colonne 2              */
.lev-org-inner-sep {
    grid-column: 1 / -1;
    height:      1.4rem;
    display:     flex;
    justify-content: center;
    display:        none;
}

.lev-org-inner-sep::before {
    content:    '';
    display:    block;
    width:      2px;
    background: #bbb;
}


/* ── 7. Impression ───────────────────────────────────────── */

@media print {

    /* Grille : 100% de la zone imprimable, sans débordement */
    .lev-org-main-grid {
        width:      100% !important;
        min-width:  0    !important;
        margin:     0    !important;
        column-gap: 0.4rem !important;
        row-gap:    20px    !important;
    }

    /* Pilule base : police réduite, padding compact           */
    .lev-org-pill {
        font-size:     12pt  !important;
        padding:       3px 8px !important;
        border-radius: 40px !important;
        box-sizing:    border-box !important;
        max-width:     100% !important;
        margin: 	0px 0px 10px 0px ;
    }

    /* Grande pilule : on force sur une seule ligne            */
    .lev-org-pill-lg {
        font-size:   12pt   !important;
        white-space: nowrap !important;
        min-width:   0     !important;
    }

    /* Pilule avec image : padding gauche serré               */
    .lev-org-has-img {
        padding: 0px 8px 0px 0px !important;
        gap:     6px !important;
    }

    /* Image réduite pour l'impression                        */
    .lev-org-pill-img {
        width:         70px !important;
        height:        70px !important;
        border-radius: 35px !important;
    }

    /* Colonnes latérales : pas de débordement                */
    .lev-org-side-col,
    .lev-org-center-col {
        gap: 4px !important;
        padding: 2px 0 !important;
    }

    /* Séparateurs */
    .lev-org-inner-sep {
        height: 0.8rem !important;
    }
    .lev-org-connector,
    .lev-org-inner-sep::before { background: #999 !important; }

    /* Tout sur une seule page                                */
    .lev-org-wrapper {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Couleurs */
    .lev-org-pill-decision  { background: var(--lev-cat-decision)  !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .lev-org-pill-gestion   { background: var(--lev-cat-gestion)   !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .lev-org-pill-activites { background: var(--lev-cat-activites) !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


/* ── 8. Mobile (< 540px) ─────────────────────────────────── */

@media (max-width: 540px) {
    .lev-org-main-grid {
        grid-template-columns: 1fr;
    }
    .lev-org-center-col {
        align-items: stretch;
    }
    .lev-org-center-col .lev-org-pill,
    .lev-org-pill-lg {
        min-width: unset;
        width: 100%;
    }
    .lev-org-inner-sep {
        justify-content: flex-start;
    }
    .lev-org-inner-sep::before {
        margin-left: auto;
        margin-right: auto;
    }
}