/* VigiCrécy® Sidebar — v2.1.11
 *
 * Changelog v2.1.11 :
 *   - h2 agrandi à 1.4em (était 1.15em) pour un vrai titre de fiche visible.
 *   - h3 agrandi à 1.15em (était 1.05em) pour hiérarchie claire h2 > h3 > h4.
 *   - Suppression du font-size:14px fixe sur .vcs-panel-body h2/h3 qui
 *     écrasait la cascade des multiplicatrices em.
 *
 * Changelog v2.1.9 :
 *   - Contenu de la sidebar collé en haut du panneau.
 *
 * Changelog v2.1.2 :
 *   - Correction cascade font-size sur tous les descendants.
 *
 * Changelog v2.1.1 :
 *   - Paliers de taille de police : 13/15/18.
 *
 * Changelog v2.1.0 :
 *   - Aide contextuelle : onglets, sections, barre de taille de police,
 *     encadrés, tableaux. Charte VigiCrécy® officielle.
 *
 * Changelog v2.0.0 :
 *   - Aide contextuelle : socle REST + injection dynamique par layer.
 */

/* ── Onglet fixe — toujours visible sur le bord droit ───────────────────── */
#vcs-toggle {
    position: fixed;
    right: 0;
    top: 67%;
    transform: translateY(-50%);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 28px;
    padding: 16px 0;
    border: none;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    box-shadow: -2px 0 8px rgba(0,0,0,.2);
    transition: width .2s;
    pointer-events: auto;
}

#vcs-toggle:hover {
    width: 32px;
}

.vcs-toggle-label {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .05em;
    white-space: nowrap;
}

.vcs-toggle-arrow {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: transform .3s;
}

.vcs-open .vcs-toggle-arrow { transform: rotate(180deg); }

/* ── Panneau — se déplie depuis la droite ────────────────────────────────── */
#vcs-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    bottom: 0;
    z-index: 1009;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    transition: right .3s ease;
    pointer-events: auto;
}

#vcs-panel.vcs-open {
    right: 0;
}

/* Header panneau — v2.1.3 : masqué (le titre passe dans le corps) */
.vcs-panel-header {
    display: none !important;
}

/* v2.1.3 : conservé pour rétrocompat du code PHP qui génère encore
   l'élément, mais tous ses descendants sont invisibles */
.vcs-panel-title,
.vcs-panel-close {
    display: none !important;
}

/* Bouton masquer carte — v2.1.3 : masqué */
.vcs-map-toggle-wrap {
    display: none !important;
}

.vcs-hide-map-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 12px;
    background: #f0f7ff;
    border: 1.5px solid #c8e0f5;
    border-radius: 8px;
    color: #016AB1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.vcs-hide-map-btn:hover {
    background: #dceeff;
    border-color: #016AB1;
}

.vcs-hide-map-btn.vcs-map-hidden {
    background: #fff3e0;
    border-color: #ff9800;
    color: #e65100;
}

/* Corps — v2.1.9 : padding-top retiré, le contenu commence tout en haut
   du panneau (qui lui-même est positionné sous la TopBar par le JS).
   La barre fontsize porte son propre padding-top pour se décoller. */
.vcs-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}

.vcs-panel-body h2,
.vcs-panel-body h3 {
    color: #016AB1;
    margin: 12px 0 6px;
}

/* La taille des h2/h3/h4 dans .vch-aide-contextuelle est gérée par les
   règles en em plus bas (relatives à la taille de police du conteneur
   qui change selon A-/A/A+). */

.vcs-panel-body p { margin: 0 0 8px; }
.vcs-panel-body ul { padding-left: 18px; margin: 0 0 8px; }

/* Footer */
.vcs-panel-footer {
    padding: 8px 14px;
    border-top: 1px solid #eef2f7;
    flex-shrink: 0;
    text-align: center;
}

/* Onglet suit le panneau à l'ouverture */
#vcs-toggle.vcs-open {
    right: 310px;
}

#vcs-toggle {
    transition: right .3s ease, width .2s;
}

/* ── Carte masquée ───────────────────────────────────────────────────────── */
.vcs-map-hidden-state { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   v2.1.0 : Aide contextuelle — onglets, taille de police, encadrés
   ════════════════════════════════════════════════════════════════════════ */

/* Conteneur racine de l'aide contextuelle */
.vch-aide-contextuelle {
    text-align: justify;
    font-size: 15px;
}

/* 3 paliers de taille de police — v2.1.2 : règles renforcées qui
   ciblent explicitement tous les enfants pour battre la spécificité
   de .vcs-panel-body et des titres */
.vch-aide-contextuelle.vch-fs-small,
.vch-aide-contextuelle.vch-fs-small p,
.vch-aide-contextuelle.vch-fs-small li,
.vch-aide-contextuelle.vch-fs-small td,
.vch-aide-contextuelle.vch-fs-small th,
.vch-aide-contextuelle.vch-fs-small .vch-section,
.vch-aide-contextuelle.vch-fs-small .vch-encadre { font-size: 13px; }

.vch-aide-contextuelle.vch-fs-normal,
.vch-aide-contextuelle.vch-fs-normal p,
.vch-aide-contextuelle.vch-fs-normal li,
.vch-aide-contextuelle.vch-fs-normal td,
.vch-aide-contextuelle.vch-fs-normal th,
.vch-aide-contextuelle.vch-fs-normal .vch-section,
.vch-aide-contextuelle.vch-fs-normal .vch-encadre { font-size: 15px; }

.vch-aide-contextuelle.vch-fs-large,
.vch-aide-contextuelle.vch-fs-large p,
.vch-aide-contextuelle.vch-fs-large li,
.vch-aide-contextuelle.vch-fs-large td,
.vch-aide-contextuelle.vch-fs-large th,
.vch-aide-contextuelle.vch-fs-large .vch-section,
.vch-aide-contextuelle.vch-fs-large .vch-encadre { font-size: 18px; }

/* Titres : taille proportionnelle à la taille courante via em
   v2.1.11 : h2 agrandi de 1.15em → 1.4em (titre de fiche plus visible)
            h3 agrandi de 1.05em → 1.15em (sous-titre bien distinct) */
.vch-aide-contextuelle.vch-fs-small h2,
.vch-aide-contextuelle.vch-fs-normal h2,
.vch-aide-contextuelle.vch-fs-large h2 { font-size: 1.4em; }

.vch-aide-contextuelle.vch-fs-small h3,
.vch-aide-contextuelle.vch-fs-normal h3,
.vch-aide-contextuelle.vch-fs-large h3 { font-size: 1.15em; }

.vch-aide-contextuelle.vch-fs-small h4,
.vch-aide-contextuelle.vch-fs-normal h4,
.vch-aide-contextuelle.vch-fs-large h4 { font-size: 1em; font-weight: 600; }

/* Barre de taille de police — alignée à droite
   v2.1.9 : padding 60px 0 8px (valeur validée par Bruno pour décaler
   la barre du sommet du panneau qui est sous la TopBar) */
.vch-aide-contextuelle .vch-fontsize-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 60px 0 8px;
    border-bottom: 1px solid #D6EAF8;
}

.vch-aide-contextuelle .vch-fontsize-bar span {
    font-size: 12px;
    color: #1A2E4A;
    margin-right: 4px;
}

.vch-aide-contextuelle .vch-fontsize-bar button {
    background: #EEF4FB;
    color: #1A2E4A;
    border: 1px solid #6B9FCC;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    padding: 3px 10px;
    line-height: 1;
}

.vch-aide-contextuelle .vch-fontsize-bar button[data-vch-size="small"]  { font-size: 13px; }
.vch-aide-contextuelle .vch-fontsize-bar button[data-vch-size="normal"] { font-size: 15px; }
.vch-aide-contextuelle .vch-fontsize-bar button[data-vch-size="large"]  { font-size: 18px; }

.vch-aide-contextuelle .vch-fontsize-bar button:hover {
    background: #D6EAF8;
}

.vch-aide-contextuelle .vch-fontsize-bar button.vch-size-active {
    background: #3B6CB7;
    color: #fff;
    border-color: #3B6CB7;
}

/* Barre d'onglets */
.vch-aide-contextuelle .vch-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid #3BBFB0;
    margin-bottom: 16px;
}

.vch-aide-contextuelle .vch-tab {
    background: #D6EAF8;
    color: #1A2E4A;
    border: none;
    padding: 8px 14px;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
}

.vch-aide-contextuelle .vch-tab:hover {
    background: #C0DCF0;
}

.vch-aide-contextuelle .vch-tab.vch-tab-active {
    background: #3B6CB7;
    color: #fff;
}

/* Sections : une seule visible à la fois */
.vch-aide-contextuelle .vch-section {
    display: none;
}

.vch-aide-contextuelle .vch-section.vch-section-active {
    display: block;
}

/* Mise en forme du contenu — titres (taille via em, voir règles ci-dessus)
   v2.1.3 : text-align: left explicite pour annuler le justify hérité */
.vch-aide-contextuelle h2 {
    color: #1A2E4A;
    margin-top: 0;
    margin-bottom: 16px;
    text-align: left;
}

.vch-aide-contextuelle h3 {
    color: #3B6CB7;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: left;
}

.vch-aide-contextuelle h4 {
    color: #1A2E4A;
    margin-top: 12px;
    margin-bottom: 6px;
    text-align: left;
}

/* Tableaux */
.vch-aide-contextuelle table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.vch-aide-contextuelle th {
    text-align: left;
    padding: 8px;
    color: #1A2E4A;
    background: #D6EAF8;
    font-weight: 600;
}

.vch-aide-contextuelle td {
    padding: 8px;
    text-align: left;
}

/* Encadrés colorés (info, règle) */
.vch-aide-contextuelle .vch-encadre {
    padding: 12px 16px;
    margin: 12px 0;
    text-align: justify;
}

.vch-aide-contextuelle .vch-encadre-info {
    background: #EEF4FB;
    border-left: 4px solid #3BBFB0;
}

.vch-aide-contextuelle .vch-encadre-regle {
    background: #D6EAF8;
    border-left: 4px solid #3B6CB7;
}

.vch-aide-contextuelle .vch-encadre p {
    margin: 0;
}

/* Paragraphes et listes dans le contenu */
.vch-aide-contextuelle p {
    margin: 0 0 10px;
}

.vch-aide-contextuelle ul {
    padding-left: 18px;
    margin: 0 0 10px;
}

.vch-aide-contextuelle ul li {
    margin-bottom: 4px;
}