/* ============================================================================
   Studio de documents (.sdo-*) — la liste des modèles et l'éditeur
   ----------------------------------------------------------------------------
   L'éditeur tient trois volets côte à côte : la STRUCTURE (blocs dans l'ordre,
   ceux d'une colonne en retrait), l'INSPECTEUR (réglages du bloc choisi ou de la
   page), l'APERÇU (le PDF que l'API compose). Sous 1100 px, ils s'empilent.
   ============================================================================ */

/* ---- Liste des modèles ---------------------------------------------------- */
.appgrid .sdo-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appgrid .sdo-type { background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .sdo-type-tete {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px;
    border-bottom: 1px solid var(--et-hairline); font-size: var(--et-fs-tete); font-weight: 700; color: var(--et-ink);
}
.appgrid .sdo-type-tete > i { color: var(--et-form-blue-encre); }
.appgrid .sdo-type-tete .mx-pastille { margin-left: auto; font-weight: 600; }
.appgrid .sdo-liste { list-style: none; margin: 0; padding: 0; }
.appgrid .sdo-modele {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px;
    border-bottom: 1px solid var(--et-rang);
}
.appgrid .sdo-modele:last-child { border-bottom: 0; }
.appgrid .sdo-modele.est-defaut { background: var(--et-tint); }
.appgrid .sdo-modele-nom { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--et-lien); text-decoration: none; }
.appgrid .sdo-modele-nom:hover { text-decoration: underline; }
.appgrid .sdo-modele-meta { font-size: 12px; color: var(--et-muted); }
.appgrid .sdo-modele-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.appgrid .sdo-vide { padding: 14px 12px; color: var(--et-muted); font-size: 13px; }
.appgrid .sdo-vide.est-erreur { color: var(--et-danger-ink); }

/* ---- Éditeur -------------------------------------------------------------- */
.appgrid .sdo-titre { margin: 0; }
.appgrid .sdo-nom { font-size: 20px; font-weight: 700; max-width: 520px; }

.appgrid .sdo-studio {
    display: grid; grid-template-columns: 280px 340px minmax(0, 1fr); gap: 12px; align-items: start;
}
.appgrid .sdo-volet { background: var(--et-surface); border: 1px solid var(--et-hairline); min-width: 0; }
.appgrid .sdo-volet-tete {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--et-hairline);
    font-size: var(--et-fs-tete); font-weight: 700; color: var(--et-ink);
}
.appgrid .sdo-volet-tete > i { color: var(--et-form-blue-encre); }

/* Structure */
.appgrid .sdo-structure { position: sticky; top: 8px; }
.appgrid .sdo-arbre { list-style: none; margin: 0; padding: 4px 0; max-height: 62vh; overflow-y: auto; }
.appgrid .sdo-arbre-ligne { display: flex; align-items: center; padding-left: calc(var(--niveau, 0) * 16px); }
.appgrid .sdo-noeud {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-align: left;
    border: 0; background: transparent; font-size: 13px; color: var(--et-ink); cursor: pointer;
}
.appgrid .sdo-noeud > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .sdo-noeud > i { color: var(--et-muted); }
.appgrid .sdo-noeud:hover { background: var(--et-survol); }
.appgrid .sdo-noeud.est-choisi { background: var(--et-tint); font-weight: 600; box-shadow: inset 3px 0 0 var(--et-form-blue); }
.appgrid .sdo-cadenas-ico { margin-left: auto; color: var(--et-muted); font-size: 12px; }
.appgrid .sdo-noeud-actions { display: inline-flex; flex: none; padding-right: 4px; }
.appgrid .sdo-ico {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--et-muted); cursor: pointer; padding: 0;
}
.appgrid .sdo-ico:hover:not(:disabled) { background: var(--et-survol); color: var(--et-lien); }
.appgrid .sdo-ico.est-danger:hover:not(:disabled) { color: var(--et-danger-ink); }
.appgrid .sdo-ico:disabled { color: var(--et-faint); cursor: default; }
.appgrid .sdo-ico:focus-visible, .appgrid .sdo-noeud:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.appgrid .sdo-ajout { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--et-hairline); }
.appgrid .sdo-ajout > .mx-select { flex: 1; min-width: 0; }

/* Inspecteur */
.appgrid .sdo-cadenas { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--et-muted); }
.appgrid .sdo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; }
.appgrid .sdo-champ { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--et-muted); min-width: 0; }
.appgrid .sdo-champ.est-large { grid-column: 1 / -1; }
.appgrid .sdo-champ .mx-input, .appgrid .sdo-champ .mx-select { font-weight: 400; }
.appgrid .sdo-case { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--et-ink); cursor: pointer; }
.appgrid .sdo-couleur { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.appgrid .sdo-couleur > input[type=color] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--et-bord-champ); background: var(--et-surface); }
.appgrid .sdo-couleur-val { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink); }
.appgrid .sdo-colonnes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.appgrid .sdo-colonnes > li { display: flex; align-items: center; gap: 4px; }
.appgrid .sdo-colonnes .mx-input { min-width: 0; }
.appgrid .sdo-court { width: 64px; flex: none; }
.appgrid .sdo-col-nom { flex: 1; font-size: 13px; font-weight: 400; color: var(--et-ink); }

/* Aperçu */
.appgrid .sdo-apercu { position: sticky; top: 8px; }
.appgrid .sdo-apercu-note { font-size: 12px; font-weight: 400; color: var(--et-muted); }
.appgrid .sdo-apercu-cadre { height: 76vh; background: var(--et-surface-2); }
.appgrid .sdo-apercu-iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1100px) {
    .appgrid .sdo-studio { grid-template-columns: minmax(0, 1fr); }
    .appgrid .sdo-structure, .appgrid .sdo-apercu { position: static; }
    .appgrid .sdo-types { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
    /* La règle tactile du produit : une cible d'au moins 44 px. */
    .appgrid .sdo-ico { width: 44px; height: 44px; }
    .appgrid .sdo-noeud { min-height: 44px; }
}
@media (max-width: 560px) {
    .appgrid .sdo-grille { grid-template-columns: minmax(0, 1fr); }
}