/* Modifier et supprimer : éditeur dans la page, bouton à maintenir, fenêtre de confirmation, annulation dans la notification.
   Gestes inspirés de la cuisine de dqnamo (Hold to Confirm, Dynamic Button), aux couleurs d'AutoSEO. */

/* Bouton à maintenir : le rouge remplit le bouton pendant l'appui, reflue quand on relâche */
.hold-btn { position: relative; isolation: isolate; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  color: var(--negative); border-color: var(--pill-negative-bg); }
.hold-btn:hover:not(:disabled) { background: var(--pill-negative-bg); border-color: var(--pill-negative-bg); }
.hold-label, .hold-fill { display: inline-flex; align-items: center; gap: 8px; }
.hold-fill {
  position: absolute; inset: 0; z-index: 1; justify-content: center; background: var(--negative); color: #fff;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
.hold-btn.is-holding .hold-fill { clip-path: inset(0 0 0 0); transition: clip-path 1.4s linear; }
.hold-btn.is-done .hold-fill { clip-path: inset(0 0 0 0); transition: none; }
.hold-btn.is-holding { transform: scale(0.98); }

/* Fenêtre de confirmation (élément dialog natif : Échap ferme, le focus reste dedans) */
.dialog {
  width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--radius-card); background: var(--surface); color: var(--text);
  box-shadow: var(--float-shadow); /* taste-skill-ignore : fenêtre au premier plan */
}
.dialog[open] { animation: dialog-in var(--medium) var(--ease-out); }
.dialog::backdrop { background: rgba(10, 14, 12, 0.42); animation: fade-in var(--medium) var(--ease-out); }
.dialog-title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.dialog-text { margin-top: 8px; color: var(--body); font-size: 14.5px; line-height: 1.55; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

/* Notification avec « Annuler » : la barre du bas montre le temps qui reste */
.toast { overflow: hidden; }
.toast-action { flex: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--accent-ink); }
.toast-action:hover { text-decoration: underline; }
.toast-time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform-origin: left; animation: toast-time linear forwards; }

/* Éditeur : barre collée en haut, titre et texte modifiables tels qu'on les lit */
.editor { padding: 0; overflow: clip; }
.edit-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--raised);
}
.edit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Outils groupés par usage (blocs, style, listes, ajouts), séparés par un filet */
.tool-group { display: inline-flex; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--border); }
.tool-group:last-child { border-right: 0; }
.tool { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--body); font: inherit; font-size: 13.5px; cursor: pointer; }
.tool:hover { background: var(--active); color: var(--text); }
.tool.is-on { background: var(--surface); color: var(--accent-ink); box-shadow: var(--relief); }
.tool-bold { font-weight: 700; }
.tool-italic { font-style: italic; font-family: var(--serif); }
/* Image collée ou déposée : visible tout de suite, pâle tant qu'elle part chez AutoSEO */
.prose.is-editing img[data-upload] { opacity: 0.55; outline: 2px dashed var(--accent); outline-offset: 2px; }
.prose.is-editing img { cursor: pointer; }
.prose.is-dropping { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); } /* taste-skill-ignore : zone de dépôt */
.media-drop { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--control); border-radius: var(--radius-card); color: var(--accent-ink); cursor: pointer; }
.media-drop > span { display: grid; gap: 2px; color: var(--text); }
.media-drop:hover, .media-drop.is-over, .media-drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.media-preview { display: block; max-width: 100%; max-height: 220px; margin: 0 auto; border-radius: var(--radius-control); }
@media (max-width: 560px) {
  .edit-bar { padding: 8px 10px; }
  .tool { padding: 0 8px; }
}
.edit-status { flex: 1; min-width: 120px; font-size: var(--fs-small); color: var(--muted); }
.edit-status.is-dirty { color: var(--pill-warning-ink); }
.edit-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.edit-title {
  display: block; width: 100%; padding: 28px 48px 0; border: 0; background: transparent; color: var(--text);
  font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.25; outline: none; resize: none; overflow: hidden;
}
.edit-title:focus-visible { box-shadow: inset 3px 0 0 var(--accent); } /* taste-skill-ignore : repère de focus */
.prose.is-editing { outline: none; caret-color: var(--accent); }
.prose.is-editing:focus-visible { box-shadow: inset 3px 0 0 var(--accent); } /* taste-skill-ignore : repère de focus */
.reader-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.reader-tools .btn:last-child { color: var(--negative); }
.menu-item.is-danger { color: var(--negative); }
.publish-stale, .score-stale { color: var(--pill-warning-ink); }

/* Tampon « En ligne » : il se pose d'un geste au moment de la mise en ligne */
.stamp {
  display: inline-grid; justify-items: center; padding: 4px 12px 5px; border: 2px solid var(--accent); border-radius: 6px;
  outline: 1px solid var(--accent); outline-offset: 2px; /* taste-skill-ignore : double cadre du tampon */
  color: var(--accent-ink); text-decoration: none; line-height: 1.15; transform: rotate(-4deg);
}
.stamp-main { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.stamp-date { font-size: 11.5px; font-weight: 500; }
.stamp.is-fresh { animation: stamp-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

/* Historique des versions */
.versions { display: grid; gap: 10px; }
.versions .card-head { margin-bottom: 0; }
.version-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.version { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: var(--radius-control); }
.version:not(.is-current):hover { background: var(--raised); }
.version.is-current { background: var(--accent-soft); }
.version-main { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 14px; }
.dialog-wide { width: min(720px, calc(100vw - 32px)); max-height: min(84vh, 920px); }
.dialog-wide[open] { display: flex; flex-direction: column; }
.version-title { margin-top: 4px; font-family: var(--serif); font-size: 22px; }
.version-body { flex: 1; min-height: 0; overflow: auto; margin-top: 12px; padding: 0 4px; font-size: 16px; }

@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-4deg) scale(1.9); }
  55% { opacity: 1; transform: rotate(-4deg) scale(0.92); }
  75% { transform: rotate(-4deg) scale(1.03); }
  100% { transform: rotate(-4deg) scale(1); }
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 640px) {
  .edit-bar { padding: 8px 12px; }
  .edit-title { padding: 20px 20px 0; font-size: 22px; }
  .dialog-actions .btn { flex: 1; }
  .leave-editor .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .leave-editor .dialog-actions .btn { width: 100%; }
}

/* Champs enregistrés avec l’article : les aperçus ne sont pas une publication. */
.presentation-fields { padding: 16px 24px; }
.presentation-fields summary { cursor: pointer; font-weight: 600; }
.presentation-inputs { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; display: grid; gap: 16px; }
.presentation-inputs .field, .presentation-inputs .input { min-width: 0; width: 100%; }
.presentation-inputs h3 { font-size: 16px; margin: 8px 0 0; }
.presentation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.presentation-image { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.search-preview { display: grid; gap: 8px; padding: 16px; background: var(--raised); overflow-wrap: anywhere; }
.presentation-warnings { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.search-preview .search-title { font-size: 18px; font-weight: 600; color: var(--text); }
.article-presentation { display: grid; gap: 14px; }
@media (max-width: 640px) { .presentation-fields { padding: 16px 20px; } }
.edit-error { padding: 16px 24px 0; }

/* Éditeur sur téléphone : outils et liens assez grands pour le doigt */
@media (max-width: 640px) {
  .tool { min-height: 44px; min-width: 44px; }
  .editor-links .link, .editor-links summary { display: inline-flex; align-items: center; min-height: 44px; }
  .presentation-fields summary { display: flex; align-items: center; min-height: 44px; }
}

/* Défaire et Refaire : deux flèches, nommées pour les lecteurs d'écran ; la fenêtre de confirmation aère sa phrase */
.tool-icon { display: inline-grid; place-items: center; padding: 0 8px; }
.tool-redo svg { transform: scaleX(-1); }
.leave-editor p { margin-top: 8px; color: var(--body); font-size: 14.5px; line-height: 1.55; }