/**
 * LE PANNEAU LATÉRAL — css/admin-panneau.css (moteur commun, étape B, 2026-10-22) — js/admin-panneau.js
 * ---------------------------------------------------------------------------
 * Une seule forme de panneau dans tout le CMS : l'Historique s'y ouvre, et le Visuel y ouvrira ses réglages, à droite,
 * SANS voile — la page reste en place et utilisable à gauche (décision de Patrick, docs/PLAN-MOTEUR-COMMUN.md).
 * Né du panneau de l'Historique (css/admin-historique.css, 2026-10-21), dont il reprend le dessin. Chargée aussi par
 * admin/composer.php, qui n'a ni les variables --ad-* ni les boutons de l'administration : chaque valeur porte son repli.
 */
.adm-panneau[hidden] { display: none; }
.adm-panneau {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1150;               /* sous le panneau d'aide (1200), qui peut le recouvrir */
    display: flex;
    flex-direction: column;
    width: min(460px, 100vw);
    background: var(--ad-bg, #fff);
    border-left: 1px solid var(--ad-border, #dfe3ea);
    box-shadow: var(--ad-shadow-lg, 0 12px 40px rgba(15,18,24,.18));
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ad-text, #1f2430);
}
.adm-panneau:focus { outline: none; }
/* Focalisé au clavier à l'ouverture, le panneau dit où l'on est (audit clavier du 2026-10-23, TAB-21). */
.adm-panneau:focus-visible { outline: 2px solid var(--ad-accent, #4F7A17); outline-offset: -2px; }
.adm-panneau__tete {
    display: flex;
    align-items: center;
    gap: var(--ad-space-2, 8px);
    flex: 0 0 auto;
    padding: var(--ad-space-3, 12px) var(--ad-space-4, 16px);
    border-bottom: 1px solid var(--ad-border, #dfe3ea);
}
.adm-panneau__nom { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 600; font-size: var(--ad-fs-lg, 1.1rem);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-panneau__outils { display: flex; align-items: center; gap: var(--ad-space-1, 4px); flex: 0 0 auto; }
.adm-panneau__outils:empty { display: none; }
.adm-panneau__outils form { margin: 0; }
.adm-panneau__x {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border: 1px solid var(--ad-btn-bd, #828a96);
    border-radius: var(--ad-r-sm, 6px);
    background: var(--ad-bg, #fff);
    color: var(--ad-text, #1f2430);
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.adm-panneau__x:hover { background: var(--ad-btn-bg, #f1f3f6); border-color: var(--ad-btn-bd-h, #4b5260); }
/* AGRANDIR : un bouton de l'en-tête étend le panneau à toute la fenêtre, pour un contenu dense (Patrick, 2026-10-22). */
.adm-panneau__large {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--ad-btn-bd, #828a96);
    border-radius: var(--ad-r-sm, 6px);
    background: var(--ad-bg, #fff);
    color: var(--ad-text, #1f2430);
    cursor: pointer;
}
.adm-panneau__large:hover { background: var(--ad-btn-bg, #f1f3f6); border-color: var(--ad-btn-bd-h, #4b5260); }
.adm-panneau--large { left: 0; width: auto; border-left: 0; }
.adm-panneau--large .adm-panneau__corps > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.adm-panneau__etat { flex: 0 0 auto; padding: 0 var(--ad-space-4, 16px); font-size: var(--ad-fs-sm, 13px); color: var(--ad-text-mute, #6b7280); }
.adm-panneau__etat:not(:empty) { padding-top: var(--ad-space-2, 8px); }
.adm-panneau__etat.is-erreur { color: var(--ad-danger, #b42318); }
.adm-panneau__corps { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
                      padding: var(--ad-space-3, 12px) var(--ad-space-4, 16px) var(--ad-space-5, 24px); }

/* LA PAGE RESTE VISIBLE : sur un écran large, le contenu se retire de la largeur du panneau au lieu de passer
   dessous. Sur un écran étroit, le panneau prend tout l'écran (« Fermer » en haut). */
@media (min-width: 1100px) {
    body.admin-body--panneau:not(.admin-body--panneau-large) .admin-content { margin-right: min(460px, 100vw); }
}
@media (max-width: 719px) {
    /* left: 0 plutôt que 100vw : la fenêtre de mise en page d'un téléphone peut être plus large que l'écran. */
    .adm-panneau { left: 0; width: auto; border-left: 0; }
    .adm-panneau__large { display: none; }   /* déjà toute la largeur */
}

/* LA CARTE D'UN COMPOSANT dans le panneau — pour le Visuel (étape B2) ; la Liste ouvre ses composants sur place
   (décision de Patrick, 2026-10-22). Le corps déplacé tel quel ; la barre « Enregistrer » en pied, collée au bas. */
.adm-panneau--carte .admin-block__body { display: block !important; padding: 0; border: 0; box-shadow: none; }
.adm-panneau--carte .editor-savebar {
    position: sticky; left: auto; bottom: 0; transform: none;
    margin: var(--ad-space-3, 12px) 0 0; justify-content: flex-end; border-radius: var(--ad-r-md, 8px);
}

/* Les boutons du panneau de l'Historique, dessinés ici pour l'éditeur Visuel (sans les feuilles de l'administration). */
.adm-panneau--historique .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--ad-btn-bd, #828a96); border-radius: var(--ad-r-sm, 6px);
    background: var(--ad-bg, #fff); color: var(--ad-text, #1f2430);
    font: 600 var(--ad-fs-sm, 13px)/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer;
}
.adm-panneau--historique .btn:hover { background: var(--ad-btn-bg, #f1f3f6); }
.adm-panneau--historique .btn--primary { background: var(--ad-accent, #ad5c25); border-color: var(--ad-accent, #ad5c25); color: #fff; }
.adm-panneau--historique .btn--primary:hover { background: var(--ad-accent, #ad5c25); filter: brightness(.95); }
.adm-panneau--historique .lt-icon { display: inline-block; width: 16px; height: 16px; stroke: currentColor; flex: 0 0 auto; vertical-align: middle; }
.adm-panneau--historique { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--ad-fs-sm, 13px); color: var(--ad-text, #1f2430); }
.adm-panneau--historique .admin-form__hint { margin: 0 0 var(--ad-space-2, 8px); color: var(--ad-text-mute, #6b7280); }
.adm-panneau--historique .admin-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ad-bg-sunk, #f4f5f7); color: var(--ad-text-mute, #6b7280); font-size: var(--ad-fs-xs, 12px); }


/* =============================================================================
   LE VISUEL DANS LE PANNEAU (moteur commun, étape B2) — js/admin-composer.js
   =============================================================================
   La carte d'un composant, les réglages d'une section ou d'une ligne, la fenêtre d'ajout : la barre de la carte
   (état de l'enregistrement, Dupliquer, Supprimer) monte dans l'en-tête du panneau ; dessous, les réglages fréquents
   puis l'éditeur complet, dans son cadre (admin/blocks.php?solo=). La coquille du Visuel n'a pas les feuilles de la
   page (css/admin-composer-cadre.css) : tout est dessiné ici. */
.adm-panneau--visuel .adm-panneau__corps { padding: 0; }
.adm-panneau--visuel .aw-c-depliage { display: block; margin: 0; border: 0; background: #f6f7f9; }
.adm-panneau--visuel .aw-c-depliage__barre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-panneau--visuel .aw-c-depliage__nom,
.adm-panneau--visuel .aw-c-depliage__fermer { display: none; }   /* le nom et « Fermer » sont ceux du panneau */
.adm-panneau--visuel .aw-c-depliage__etat { font-size: 12px; color: var(--ad-text-mute, #6b7280); }
.adm-panneau--visuel .aw-c-depliage__etat.is-erreur { color: var(--ad-danger, #b42318); font-weight: 700; }
.adm-panneau--visuel .aw-c-depliage__geste {
    padding: 5px 10px; border: 1px solid var(--ad-btn-bd, #828a96); border-radius: var(--ad-r-sm, 6px);
    background: var(--ad-bg, #fff); color: var(--ad-text, #1f2430);
    font: 600 12px/18px system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer;
}
.adm-panneau--visuel .aw-c-depliage__geste:hover { background: var(--ad-btn-bg, #f1f3f6); }
/* En icônes (2026-10-28) : un carré, l'icône au centre ; armée, la corbeille dit « Supprimer ? ». */
.adm-panneau--visuel .aw-c-depliage__geste { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; height: 32px; padding: 0 7px; }
.adm-panneau--visuel .aw-c-depliage__geste svg { width: 17px; height: 17px; flex: none; }
.adm-panneau--visuel .aw-c-depliage__geste--danger:hover,
.adm-panneau--visuel .aw-c-depliage__geste.is-arme { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.adm-panneau--visuel .aw-c-depliage__cadre {
    display: block; width: 100%; height: 320px; border: 0; background: #f6f7f9;
}
/* Une fenêtre de l'éditeur (médiathèque, lien, icônes) est ouverte : le cadre prend tout l'écran le temps qu'elle l'est. */
.adm-panneau--visuel .aw-c-depliage--plein .aw-c-depliage__cadre {
    position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2147483647; background: transparent;
}
/* Les réglages fréquents, en tête : le même dessin que dans la page. */
.adm-panneau--visuel .aw-c-frequents {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px;
    padding: 10px 16px; background: #fff7ed; border-bottom: 1px solid #fed7aa;
    font: 500 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2430;
}
.adm-panneau--visuel .aw-c-frequents__champ { display: inline-flex; flex-direction: column; gap: 3px;
    font: 600 11px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #7c2d12; }
.adm-panneau--visuel .aw-c-frequents__champ select {
    min-width: 8rem; max-width: 14rem; padding: 5px 8px;
    border: 1px solid #fdba74; border-radius: 6px; background: #fff; color: #1f2430;
    font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer;
}
/* LE PANNEAU NE COUVRE JAMAIS LA PAGE DU VISUEL (Patrick, 2026-10-22) : dès qu'il y a la place d'un panneau à côté
   d'une page, elle se retire de sa largeur — on voit toujours ce qu'on compose. Sur téléphone, il prend l'écran. */
@media (min-width: 720px) {
    body.compo-body.admin-body--panneau:not(.admin-body--panneau-large) .compo-cadre { margin-right: min(460px, 100vw); }
}