/* =========================================================================
   Éditeur — refonte du 25/09/2026.
   Chargé APRÈS editor.css et editor-mobile.css : il ne fait que compléter.
   - Le chrome du téléphone (écrit « nuit ») suit désormais le thème : ses
     jetons --nuit* sont ramenés sur les jetons clair/sombre du site.
   - La feuille de la salle, les tables et les places restent BLANCHES dans
     les deux modes : c'est le document qu'on imprime.
   - Nouveaux éléments : jauge « prêt à imprimer », état de sauvegarde,
     reprise d'un brouillon, règles « qui avec qui », import commenté,
     édition d'un invité sur place.
   ========================================================================= */
html.ts body.page-editor, html.ts body { background: var(--lin); color: var(--encre); }
html.ts .mbar, html.ts .feuillet, html.ts .flotte, html.ts .canvas-controls {
    --nuit: var(--surface-2); --nuit-2: var(--surface); --nuit-3: var(--lin-2);
    --border-nuit: var(--filet); --border-nuit-2: var(--filet-2);
    --text-nuit: var(--encre); --text-nuit-light: var(--encre-3);
}
@media (max-width: 768px) {
    html.ts .flotte .toolbar-btn, html.ts .canvas-controls { background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--ombre-carte); }
    html.ts .feuillet-poignee i { background: var(--filet-2); }
    html.ts .fp-champs input::placeholder { color: var(--encre-3); }
    html.ts #btn-autoplace { color: var(--laiton-texte); }
}
html.ts .editor-toolbar { border-bottom: 1px solid var(--filet); }
html.ts .editor-sidebar { border-color: var(--filet); }
html.ts .editor-sidebar input, html.ts .editor-sidebar select, html.ts .editor-sidebar textarea,
html.ts .editor-toolbar input { background: var(--surface-2); color: var(--encre); border-color: var(--filet-2); }
html.ts .editor-sidebar input::placeholder, html.ts .editor-sidebar textarea::placeholder { color: var(--encre-3); }
html.ts .guest-item { color: var(--encre); }
html.ts .guest-item:hover { background: var(--surface-2); }

/* ─── Jauge « prêt à imprimer » ─── */
.toolbar-center { position: relative; overflow: visible; gap: 12px; flex: 0 0 auto; }
/* La jauge ne rétrécit pas : c'est la barre qui sacrifie ses libellés (ajusterBarre, editor.js). */
.jauge {
    min-width: 196px; justify-content: flex-start;
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid var(--filet-2); background: var(--surface); color: var(--encre);
    border-radius: 999px; padding: 7px 14px 7px 10px; cursor: pointer;
    font: 600 12.5px/1 var(--font); white-space: nowrap;
}
.jauge:hover { border-color: var(--encre-3); }
.jauge-barre { width: 54px; height: 6px; border-radius: 99px; background: var(--lin-2); overflow: hidden; flex: none; }
.jauge-barre i { display: block; height: 100%; width: 0; background: var(--laiton); border-radius: 99px; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.jauge--pret { border-color: var(--sauge); color: var(--sauge); }
.jauge--pret .jauge-barre i { background: var(--sauge); }
.jauge-panneau {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    width: 300px; background: var(--surface); color: var(--encre); border: 1px solid var(--filet);
    border-radius: 14px; box-shadow: var(--ombre-carte); padding: 16px 18px; z-index: 60;
}
.jauge-titre { font: 700 14px/1.2 var(--font-display); margin: 0 0 10px; }
.jauge-etapes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.jauge-etapes li { display: flex; gap: 10px; align-items: flex-start; color: var(--encre-2); }
.jauge-etapes li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--filet-2); }
.jauge-etapes li.fait { color: var(--encre-3); text-decoration: line-through; text-decoration-color: var(--filet-2); }
.jauge-etapes li.fait::before { border-color: var(--sauge); background: var(--sauge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }
.jauge-panneau .toolbar-stats { display: flex; border-top: 1px solid var(--filet); padding-top: 10px; color: var(--encre-3); }
.etat-sauvegarde { font-size: 12px; color: var(--encre-3); white-space: nowrap; }
.etat-sauvegarde--ok::before { content: "✓ "; color: var(--sauge); }
.etat-sauvegarde--alerte { color: var(--alerte); }
@media (max-width: 1640px) { .etat-sauvegarde { display: none; } }

/* ─── Reprise d'un brouillon ─── */
.reprise {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 40;
    width: min(520px, calc(100% - 32px)); background: var(--surface); color: var(--encre);
    border: 1px solid var(--filet); border-left: 4px solid var(--laiton);
    border-radius: 14px; box-shadow: var(--ombre-carte); padding: 14px 16px;
    display: grid; gap: 12px; font-size: 14px; line-height: 1.45;
}
.reprise-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
    .reprise { animation: reprise-entre .35s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes reprise-entre { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ─── Règles « qui avec qui » ─── */
.regles-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.regles-compte[hidden] { display: none; }
.regles-compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--laiton); color: #12141A; font-size: 11px; font-weight: 700; margin-left: 6px; }
.incompat-pair--together em { color: var(--sauge); font-style: normal; font-weight: 700; }
.incompat-pair--avoid em { color: var(--alerte); font-style: normal; font-weight: 700; }

/* ─── Import ─── */
.import-aide { display: block; font-size: 12.5px; line-height: 1.45; color: var(--encre-2); margin: 10px 0 6px; }
.import-apercu { font-size: 12.5px; color: var(--sauge); min-height: 1.2em; margin: 6px 0 8px; }

/* ─── Invités : liens, menus, édition sur place ─── */
.guest-lien { font: 700 11px/1 var(--font); color: var(--sauge); border: 1px solid var(--sauge); border-radius: 99px; padding: 2px 5px; flex: none; }
.guest-regime { font-size: 10.5px; font-weight: 600; color: var(--laiton-texte); background: var(--laiton-pale); border-radius: 99px; padding: 2px 7px; flex: none; white-space: nowrap; }
.guest-edit { border: 0; background: none; color: var(--encre-3); cursor: pointer; padding: 4px; border-radius: 6px; opacity: 0; flex: none; display: inline-grid; place-items: center; }
.guest-item:hover .guest-edit, .guest-item:focus-within .guest-edit { opacity: 1; }
@media (hover: none) { .guest-edit { opacity: 1; } }
.guest-edit:hover { color: var(--encre); background: var(--surface-2); }
.guest-item.en-edition { display: block; cursor: default; background: var(--surface-2); padding: 10px; border-radius: 10px; }
.guest-edition { display: grid; gap: 8px; }
.guest-edition-actions { display: flex; justify-content: flex-end; gap: 8px; }
#guest-regime { max-width: 130px; }
@media (prefers-reduced-motion: reduce) { .jauge-barre i { transition: none; } }

/* 26/09 — l'étiquette de la salle, posée sur le cadre du canevas (hors zoom). */
.salle-etiquette.salle-etiquette--cadre {
    position: absolute; left: 12px; top: 12px; bottom: auto; margin: 0; z-index: 6;
    font: 600 12px/1 var(--font); letter-spacing: .01em; text-transform: none; opacity: 1;
    color: var(--encre-2); background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--filet); border-radius: 999px; padding: 7px 12px;
    max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
    box-shadow: var(--ombre-carte);
}
.salle-etiquette--cadre .salle-etiquette__apercu { color: var(--laiton-texte); font-weight: 600; }
@media (max-width: 768px) { .salle-etiquette.salle-etiquette--cadre { top: 10px; left: 10px; max-width: calc(100% - 80px); font-size: 11.5px; } }

/* Colonne Invités : le menu ne se tronque plus (« Menu cla: »). La ligne passe
   sur deux rangs : groupe + menu, puis le bouton. */
.sidebar-section--ajout .form-row:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sidebar-section--ajout #btn-add-guest { grid-column: 1 / -1; width: 100%; justify-content: center; gap: 6px; }
.sidebar-section--ajout #btn-add-guest em { display: inline !important; font-style: normal; }
.sidebar-section--ajout .form-row:last-child select { min-width: 0; width: 100%; text-overflow: ellipsis; }
#guest-regime { max-width: none; }
.toolbar-field input.date-fr { width: 112px; font-variant-numeric: tabular-nums; }
.date-fr[aria-invalid="true"] { border-color: var(--alerte) !important; }
.sidebar-section--ajout .form-row:last-child select { padding-left: 8px; padding-right: 22px; font-size: 13px; }

/* ═══ Passe « minimalisme » (26/09) : l'essentiel d'abord, le reste replié ═══ */
.sidebar-section--ajout .form-row--ajouter { display: block; }
.sidebar-section--ajout .form-row--ajouter #btn-add-guest { width: 100%; }
.affiner { margin-top: 8px; }
.affiner summary, .affiner-salle summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--encre-2); padding: 6px 2px; border-radius: 6px;
}
.affiner summary::-webkit-details-marker, .affiner-salle summary::-webkit-details-marker { display: none; }
.affiner summary::after, .affiner-salle summary::after { content: "+"; font-weight: 400; color: var(--encre-3); margin-left: auto; }
.affiner[open] summary::after, .affiner-salle[open] summary::after { content: "–"; }
.affiner-valeur { font-weight: 400; color: var(--encre-3); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.affiner[open] .form-row { margin-top: 6px; }
.affiner-salle summary { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.affiner-salle[open] summary { margin-bottom: 8px; }
.canvas-empty-state #btn-empty-add { margin-top: 8px; }
.canvas-empty-state #btn-empty-liste { font-size: 15px; padding: 12px 20px; }