/* =========================================================
   app.css — Mise en page responsive 3 / 2 / 1 unités
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f4f5f7;
    color: #222;
}

.app-header {
    background: #2c3e50;
    color: #fff;
    padding: 10px 16px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-title {
    font-weight: 600;
}

/* Bouton « add » dans le bandeau du haut : icône claire sur fond sombre */
.app-header .btn-add {
    background: #fff;
    padding: 2px 6px;
    line-height: 0;
}
.app-header .add-menu {
    color: #222; /* le menu déroulant garde un fond clair, texte sombre */
}

/* Conteneur des unités : grille flexible */
.units-container {
    display: grid;
    gap: 10px;
    padding: 10px;
    height: calc(100vh - 44px);
}

/* --- Une unité (colonne) --- */
.unit {
    position: relative; /* ancre la fiche détail (position:absolute) */
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d9dce0;
    border-radius: 6px;
    overflow: hidden;
    min-height: 0; /* indispensable pour permettre le scroll interne */
}

/* Rangée de boutons d'actions (la plus haute) */
.unit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background: #eef1f4;
    border-bottom: 1px solid #d9dce0;
}

/* Rangée de gestion d'arbres (dessous) */
.unit-manage {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background: #f7f9fb;
    border-bottom: 1px solid #d9dce0;
}

/* Sélecteur d'arbre */
/* Bandeau d'état : fil d'Ariane (navigateur) ou nom du fichier ouvert */
.unit-status {
    padding: 5px 8px;
    background: #eef3f7;
    border-bottom: 1px solid #d9dce0;
    font-size: 0.82rem;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.crumb-link {
    color: #2980b9;
    cursor: pointer;
    text-decoration: none;
}
.crumb-link:hover {
    text-decoration: underline;
}
.crumb-sep {
    color: #99a3ad;
    margin: 0 2px;
}
.status-file {
    font-weight: 600;
    color: #2c3e50;
}

/* Bouton « home » */
.btn-home {
    border-color: #8e44ad;
    color: #6c3483;
    font-size: 1rem;
    padding: 4px 9px;
}

/* Bouton « loupe » (recherche) */
.btn-search {
    border-color: #16a085;
    color: #0e6b59;
    font-size: 1rem;
    padding: 4px 9px;
}

/* Bouton « add » (création) + menu déroulant des natures */
.add-wrap {
    position: relative;
    display: inline-block;
}
.btn-add {
    border-color: #e67e22;
    color: #b35418;
    padding: 3px 6px;
    line-height: 0;
    font-size: 1rem;
}
.add-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 160px;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #c2c8ce;
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    /* Liste serrée : on plafonne la hauteur et on rend défilable, car il
       peut y avoir de nombreuses natures dans ../atoms. */
    max-height: 70vh;
    overflow-y: auto;
    padding: 3px 0;
}
/* Une ligne = une nature : icône (facultative) + libellé, compacte. */
.add-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 4px 12px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
}
.add-menu-item:hover {
    background: #fdebd8;
}
.add-menu-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}
.add-menu-label {
    flex: 1 1 auto;
}
.add-menu-empty {
    padding: 8px 12px;
    font-size: 0.82rem;
    color: #888;
}

/* Navigateur de fichiers : icône + outils au survol */
.fb-icon {
    margin-right: 4px;
}
/* Icône de nature (image) devant un fichier composite : alignée au texte. */
.fb-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: text-bottom;
    margin-right: 4px;
}
/* Bouton « 🧩 » (nouvel objet composite) dans la rangée de gestion. */
.btn-composite {
    font-size: 1rem;
    line-height: 1;
    padding: 3px 8px;
}
/* Sélecteur de nature composite : réutilise les lignes du menu « ＋ ». */
.composite-picker {
    max-width: 320px;
}
.composite-list {
    padding: 4px 0;
    max-height: 60vh;
    overflow-y: auto;
}
.fb-tools {
    display: none;
    margin-left: 8px;
    white-space: nowrap;
}
.unit-tree a:hover .fb-tools {
    display: inline;
}
.fb-tool {
    cursor: pointer;
    margin-left: 4px;
    font-size: 0.85rem;
    opacity: 0.75;
}
.fb-tool:hover {
    opacity: 1;
}
.browser-empty {
    list-style: none;
    color: #8a929b;
    font-style: italic;
    padding: 8px;
}

/* Zone de l'arbre zTree (scrollable) */
.unit-tree {
    flex: 1 1 auto;
    overflow: auto;
    padding: 6px;
    min-height: 0;
}

/* Boutons */
.btn {
    border: 1px solid #b9c0c8;
    background: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background .15s;
}
.btn:hover {
    background: #e9eef3;
}
.btn-action {
    border-color: #2980b9;
    color: #1f5f88;
}

/* Conteneur des boutons d'action dynamiques */
.actions-holder {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* Bouton d'action n'affichant qu'une icône */
.btn-action-icon {
    padding: 3px 5px;
    line-height: 0;
}
.action-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    display: block;
}
.btn-manage {
    border-color: #27ae60;
    color: #1d7a44;
}

/* =========================================================
   Responsive : nombre d'unités selon orientation / largeur
   ========================================================= */

/* Par défaut (portrait mobile, étroit) : 1 unité */
.units-container {
    grid-template-columns: 1fr;
}
.unit:nth-child(n+2) {
    display: none; /* on masque unités 2 et 3 */
}

/* Paysage mobile (largeur moyenne) : 2 unités */
@media (orientation: landscape) and (min-width: 600px) {
    .units-container {
        grid-template-columns: 1fr 1fr;
    }
    .unit:nth-child(2) {
        display: flex; /* on réaffiche l'unité 2 */
    }
    .unit:nth-child(3) {
        display: none;
    }
}

/* Paysage PC (large) : 3 unités */
@media (orientation: landscape) and (min-width: 1100px) {
    .units-container {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .unit:nth-child(2),
    .unit:nth-child(3) {
        display: flex;
    }
}

/* Éditeur markdown (overlay) */
.editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.editor-overlay.open {
    display: flex;
}
.editor-box {
    background: #fff;
    width: min(800px, 92vw);
    height: min(80vh, 600px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.editor-box h3 {
    margin: 0;
    padding: 10px 14px;
    background: #2c3e50;
    color: #fff;
    font-size: 1rem;
}

/* Panneau de recherche */
.search-box {
    height: auto;
    max-height: 85vh;
}
.search-body {
    padding: 12px 14px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.search-label {
    font-size: 0.85rem;
    color: #444;
}
.search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #b9c0c8;
    border-radius: 4px;
    font-size: 0.95rem;
}
.search-types-wrap {
    border-top: 1px solid #e1e5e9;
    padding-top: 8px;
}
.search-types-tree {
    max-height: 280px;
    overflow: auto;
    margin: 6px 0 0;
    padding: 4px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
}
.editor-box textarea {
    flex: 1 1 auto;
    border: none;
    padding: 12px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9rem;
    resize: none;
    outline: none;
}
.editor-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid #d9dce0;
}

/* Repère indiquant qu'un nœud porte du texte (paragraphe) */
.node-has-content {
    display: inline-block;
    margin-left: 5px;
    color: #2980b9;
    font-weight: bold;
    cursor: help;
}

/* =========================================================
   Couleur de fond de la ZONE d'affichage de l'arbre
   Le fond de tout le conteneur ztree reflète ce qu'il montre :
   - navigateur / espace partagé  → --color-node-folder (répertoire)
   - résultats de recherche        → --color-search
   - composite ouvert              → --color-composite-<nature>
   Les nœuds eux-mêmes restent transparents (le fond de zone porte
   l'information). La classe est posée en JS par setZoneBackground().
   ========================================================= */
/* Fond neutre par défaut (composite sans couleur définie, ou base
   indisponible) : ivoire discret, remplacé dès qu'une classe zone-* précise
   s'applique. */
ul.ztree.unit-tree {
    background-color: var(--color-node-document, #fffff0);
    transition: background-color .15s;
}
ul.ztree.zone-folder {
    background-color: var(--color-node-folder, #d6ebff);
}
ul.ztree.zone-search {
    background-color: var(--color-search, #fff3cd);
}
/* Les classes zone-composite-<nature> sont générées dynamiquement dans
   index.php (une règle par nature de l'ENUM). */

/* Nœuds transparents par défaut : c'est le fond de ZONE qui colore l'arbre.
   (folder / document restent transparents en toute circonstance.) */
ul.ztree li a.node-folder,
ul.ztree li a.node-document {
    background-color: transparent;
}

/* ATOMES : à l'intérieur d'un composite, chaque atome reçoit son propre fond
   d'élément (--color-node-atomic), qui se détache du fond de zone de la nature.
   EXCEPTION : dans la zone de RÉSULTATS DE RECHERCHE, on laisse le fond de zone
   (--color-search) parler seul → atomes transparents. */
ul.ztree li a.node-atomic {
    background-color: var(--color-node-atomic, #d8f5d8);
    border-radius: 3px;
}
ul.ztree.zone-search li a.node-atomic {
    background-color: transparent;
}
/* Nœud PARAGRAPHE : texte libre du document, affiché comme du texte simple.
   Pas de puce d'ouverture (neutralisée en JS), présentation discrète pour le
   distinguer des titres et des références sans le rendre secondaire. */
ul.ztree li a.node-paragraphe {
    font-style: italic;
    color: #444;
}
ul.ztree li a.node-paragraphe .node_name {
    font-weight: normal;
}
/* Neutralise l'espace/curseur de la puce d'ouverture pour un paragraphe */
ul.ztree li span.button.ico_none {
    cursor: default;
    background: none;
    width: 18px;
}
/* La sélection zTree reste visible par-dessus la couleur de fond */
ul.ztree li a.curSelectedNode {
    background-color: #beebff;
}

/* =========================================================
   Fiche détail (recouvre l'arbre pour un élément atomique)
   ========================================================= */
.record-detail {
    position: absolute;
    inset: 0;
    background: #fffefb;
    z-index: 20;
    flex-direction: column;
    overflow: hidden;
}
.detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #2c3e50;
    color: #fff;
    flex: 0 0 auto;
}
.detail-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.detail-title {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-close {
    flex: 0 0 auto;
    padding: 2px 9px;
    background: #fff;
}
/* Bouton « Saisie » dans la barre de détail (à gauche de la croix) */
.detail-saisie {
    flex: 0 0 auto;
    padding: 2px 9px;
    background: #fff;
    margin-left: auto; /* pousse ce bouton + la croix à droite */
}
.detail-saisie + .detail-close {
    margin-left: 0;    /* la croix colle au bouton Saisie */
}

/* =========================================================
   Fenêtre modale (résultat de la Saisie)
   ========================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-box {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    width: min(90vw, 700px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    background: #f7f7f7;
}
.modal-title {
    flex: 1 1 auto;
    font-weight: bold;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal-close {
    flex: 0 0 auto;
    padding: 2px 9px;
    background: #fff;
}
.modal-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px;
    line-height: 1.5;
    color: #222;
}
/* Corps de modale contenant une iframe : pas de marge, l'iframe remplit tout */
.modal-body-iframe {
    padding: 0;
    overflow: hidden;
    display: flex;
}
.modal-iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 70vh;
    border: 0;
}
.detail-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 12px 14px;
    white-space: pre-wrap;
    line-height: 1.5;
    color: #222;
    font-size: 0.92rem;
}

/* =========================================================
   Panneau de contenu (sous l'arbre) : texte du nœud sélectionné
   ========================================================= */
.content-panel {
    flex: 0 0 auto;
    max-height: 38%;
    overflow: auto;
    border-top: 2px solid #d9dce0;
    background: #fafbfc;
    padding: 8px;
    font-size: 0.88rem;
}

.panel-empty {
    color: #8a929b;
    font-style: italic;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.panel-title {
    font-weight: 600;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-toggle {
    flex: 0 0 auto;
    font-size: 0.78rem;
    padding: 3px 9px;
    border-color: #2980b9;
    color: #1f5f88;
}

/* Texte en lecture : on respecte les sauts de ligne (paragraphes) */
.panel-text {
    white-space: pre-wrap;
    line-height: 1.45;
    color: #333;
}

.panel-editor {
    width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    border: 1px solid #b9c0c8;
    border-radius: 4px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
}

/* =========================================================
   MODE SOMBRE (bascule manuelle via le bouton 🌙)
   Activé par la classe « dark » sur <body>. On surcharge ici
   les grandes surfaces structurelles (page, header, panneaux,
   bordures, texte) ; les couleurs de ZONE liées aux natures
   (--color-*) restent pilotées par couleurs.json et sont
   simplement assombries d'un cran pour rester lisibles.
   ========================================================= */
body.dark {
    background: #1e1f22;
    color: #d6d8dc;
}

/* Bouton de bascule : discret dans le bandeau. */
.btn-theme {
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    padding: 2px 6px;
    margin-left: auto;   /* pousse le bouton à droite du bandeau */
}
body.dark .btn-theme {
    color: #ffd97a;
}

/* Bandeau du haut */
body.dark .app-header {
    background: #16181d;
    color: #e8eaed;
}

/* Panneaux clairs (unités, boîtes de recherche/édition, menus, modales) */
body.dark .unit,
body.dark .search-box,
body.dark .editor-box,
body.dark .modal-box,
body.dark .add-menu,
body.dark .panel,
body.dark .record-detail {
    background: #26282e;
    border-color: #3a3d44;
    color: #d6d8dc;
}

/* En-têtes/pieds internes des unités et boîtes */
body.dark .unit-actions,
body.dark .unit-manage,
body.dark .unit-status,
body.dark .search-header,
body.dark .editor-footer,
body.dark .modal-header {
    background: #2d3038;
    color: #d6d8dc;
}

/* Champs de saisie et zones de texte */
body.dark input,
body.dark textarea,
body.dark select {
    background: #1e1f22;
    color: #e8eaed;
    border-color: #3a3d44;
}

/* Boutons génériques */
body.dark .btn {
    background: #33363d;
    color: #e2e4e8;
    border-color: #4a4d55;
}
body.dark .btn:hover {
    background: #3d4048;
}

/* Menus déroulants : lignes au survol */
body.dark .add-menu-item:hover {
    background: #3a2f22;
}

/* Fil d'Ariane / liens */
body.dark a,
body.dark .crumb {
    color: #6cb6ff;
}

/* Nœuds de l'arbre : texte clair, survol discret */
body.dark ul.ztree li a {
    color: #d6d8dc;
}
body.dark ul.ztree li a:hover {
    background-color: rgba(255, 255, 255, .07);
}
body.dark ul.ztree li a.curSelectedNode {
    background-color: rgba(108, 182, 255, .25);
}

/* Zones colorées par nature : on assombrit d'un cran via un voile, pour
   garder la teinte informative tout en respectant le fond sombre. Le voile
   n'affecte pas les nœuds (qui gardent leur propre fond). */
body.dark ul.ztree.zone-folder,
body.dark ul.ztree.zone-search,
body.dark ul.ztree.unit-tree,
body.dark ul.ztree[class*="zone-composite-"] {
    background-blend-mode: multiply;
    background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55));
}

/* Atomes dans un composite : même principe, teinte préservée mais assombrie. */
body.dark ul.ztree li a.node-atomic {
    background-blend-mode: multiply;
    background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45));
    color: #eef0f3;
}

/* Overlays de modale : voile plus opaque sur fond sombre */
body.dark .modal-overlay,
body.dark .editor-overlay {
    background: rgba(0, 0, 0, .65);
}

/* Sélecteur de langue dans le bandeau (à côté de la bascule de thème). */
.lang-wrap {
    position: relative;
    display: inline-block;
}
.btn-lang {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 8px;
    letter-spacing: .5px;
}
.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 70px;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #c2c8ce;
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    padding: 3px 0;
}
.lang-menu .add-menu-item {
    justify-content: center;
    font-weight: 600;
    letter-spacing: .5px;
}
.lang-menu .lang-active {
    background: #eef3f7;
}
body.dark .lang-menu {
    background: #26282e;
    border-color: #3a3d44;
    color: #d6d8dc;
}
body.dark .lang-menu .lang-active {
    background: #33363d;
}

/* Bouton Préférences (⚙️) dans le bandeau. */
.btn-prefs {
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    padding: 2px 6px;
}

/* Panneau Préférences : liste de réglages dépliables. */
.prefs-box {
    max-width: 380px;
    width: 90%;
}
.prefs-list {
    padding: 6px 0;
    max-height: 70vh;
    overflow-y: auto;
}
.pref-item {
    border-bottom: 1px solid #eef1f4;
}
.pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding: 10px 16px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 0.92rem;
    text-align: left;
}
.pref-row:hover {
    background: #f7f9fb;
}
.pref-label {
    font-weight: 600;
}
.pref-value {
    color: #2980b9;
    white-space: nowrap;
}
.pref-options {
    padding: 2px 0 8px 0;
    background: #fafbfc;
}
.pref-options .add-menu-item {
    padding-left: 28px;
}

/* Mode sombre : panneau Préférences */
body.dark .btn-prefs {
    color: #d6d8dc;
}
body.dark .pref-item {
    border-bottom-color: #3a3d44;
}
body.dark .pref-row:hover {
    background: #2d3038;
}
body.dark .pref-value {
    color: #6cb6ff;
}
body.dark .pref-options {
    background: #22242a;
}

/* Menu de choix d'une valeur de réglage (arbre de préférences) : ancré sous
   le nœud cliqué. Réutilise .add-menu pour l'apparence. */
.pref-choix-menu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 40;
    min-width: 120px;
}

/* =========================================================
   Visionneuse PDF inline (diaporama d'un _cours affiché dans la zone)
   Recouvre l'emplacement de l'arbre ; barre d'outils + iframe PDF.
   ========================================================= */
.pdf-view {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;          /* permet à l'iframe de prendre la hauteur dispo */
    overflow: hidden;
}
.pdf-view-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #2d3038;
    color: #eef0f3;
    flex: 0 0 auto;
}
.pdf-view-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: auto;      /* pousse les boutons à droite */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdf-view-btn {
    flex: 0 0 auto;
    font-size: 0.82rem;
    padding: 3px 10px;
    text-decoration: none;
}
.pdf-view-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: #525659;     /* gris lecteur PDF */
}
.pdf-view-frame {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
}
.pdf-view-loading,
.pdf-view-error {
    margin: auto;
    padding: 20px;
    color: #fff;
    font-size: 0.95rem;
}
.pdf-view-error {
    color: #ffb4b4;
}

/* Mode sombre : la barre reste cohérente (déjà foncée). */
body.dark .pdf-view-bar {
    background: #16181d;
}

/* Menu contextuel (clic droit sur un nœud) : rendus d'un atome ou actions
   d'un composite. Positionné en absolu à l'emplacement du curseur. */
.context-menu {
    position: fixed;
    z-index: 100;
    min-width: 140px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.detail-code {
    margin: 0;
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    background: #f6f8fa;
    border-radius: 4px;
}
body.dark .detail-code {
    background: #1e1f22;
    color: #d6d8dc;
}

/* Éditeur de gabarit (admin) : modale avec sélecteur de format + textarea. */
.template-editor {
    max-width: 760px;
    width: 92%;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
}
.template-format {
    margin-left: auto;
    margin-right: 10px;
    padding: 3px 6px;
    font-size: 0.85rem;
}
.template-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    padding: 0;
}
.template-textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 320px;
    border: 0;
    padding: 14px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    background: #f6f8fa;
    color: #24292e;
}
.template-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid #e1e4e8;
}
.template-info {
    margin-right: auto;
    font-size: 0.82rem;
    color: #6a737d;
    font-family: ui-monospace, monospace;
}
.template-save {
    background: #2ea44f;
    color: #fff;
    padding: 5px 16px;
}
.detail-edit-template {
    margin-left: 8px;
    font-size: 0.82rem;
    padding: 2px 10px;
}
body.dark .template-textarea {
    background: #1e1f22;
    color: #d6d8dc;
}
body.dark .template-toolbar {
    border-top-color: #3a3d44;
}
body.dark .template-info {
    color: #9aa0a6;
}