/* ============================================
   CÉRÉMONIE LAÏQUE — module wedding-ceremony.js
   Aligné sur le design system éditorial (tokens + joy hues).
   ============================================ */

.ceremony-cockpit { animation: page-enter .4s ease both; }

.ceremony-header { margin-bottom: var(--space-4); }
.ceremony-header-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.ceremony-share-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--color-border, #e5e2dc);
  border-radius: 999px; cursor: pointer; font-size: 13px; user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ceremony-share-toggle.is-on {
  background: var(--joy-sage-tint, #eef3ec); border-color: var(--joy-sage-ink, #6b8f71); color: var(--joy-sage-ink, #4b6b52); font-weight: 600;
}
.ceremony-share-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Suggestions des mariés (revue WP) */
.ceremony-suggestions { border-color: var(--joy-gold-ink, #b8965a); }
.ceremony-sugg-badge { background: var(--joy-gold-ink, #b8965a); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.ceremony-sugg-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ceremony-sugg {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border-light, #ece8e1); border-radius: var(--radius-sm, 8px);
  background: var(--joy-gold-tint, #f7f0e2);
}
.ceremony-sugg-main { flex: 1; min-width: 0; }
.ceremony-sugg-kind { font-size: 11.5px; font-weight: 600; color: var(--joy-gold-ink, #8a6a2c); }
.ceremony-sugg-title { font-weight: 500; margin-top: 2px; }
.ceremony-sugg-detail { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
.ceremony-sugg-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ceremony-sub {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: var(--space-2) 0 0;
  max-width: 60ch;
}

/* KPIs */
.ceremony-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ceremony-kpi {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-3);
  text-align: center;
}
.ceremony-kpi-num {
  font-family: var(--font-heading, serif);
  font-size: 1.6rem;
  color: var(--color-primary, #8B6F5E);
  line-height: 1.1;
}
.ceremony-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Cartes de section */
.ceremony-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.ceremony-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.ceremony-card-title {
  font-family: var(--font-heading, serif);
  font-size: 1.15rem;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.ceremony-card-head .ceremony-card-title { margin-bottom: 0; }
.ceremony-card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.ceremony-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ceremony-empty {
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-style: italic;
  padding: var(--space-3) 0;
}

/* Écran d'activation */
.ceremony-empty-activate {
  text-align: center;
  max-width: 460px;
  margin: var(--space-8) auto;
  padding: var(--space-6);
}
.ceremony-empty-glyph { font-size: 44px; margin-bottom: var(--space-2); }
.ceremony-empty-activate h2 { font-family: var(--font-heading, serif); margin: 0 0 var(--space-2); }
.ceremony-empty-activate p { color: var(--color-text-muted); line-height: 1.55; margin: 0 0 var(--space-4); }

/* Déroulé */
.ceremony-script { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* Refonte handoff : chaque séquence = rail médaillon (relié en timeline) +
   carte de contenu blanche + cluster d'actions. */
.ceremony-seq {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  position: relative;
  padding: 4px 0;
}
/* Fil vertical reliant les médaillons. */
.ceremony-seq:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px; top: 50px; bottom: -10px;
  width: 2px; border-radius: 2px;
  background: var(--color-border-light, #ece8e1);
}
.ceremony-seq-rail { display: flex; align-items: flex-start; justify-content: center; width: 44px; flex-shrink: 0; padding-top: 4px; }
.ceremony-seq-medal {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--seq-tint, #f3efe9);
  border: 1.5px solid color-mix(in srgb, var(--seq-ink, #8B6F5E) 45%, transparent);
  color: var(--seq-ink, #8B6F5E);
  position: relative; z-index: 1; flex-shrink: 0;
}
.ceremony-seq-medal svg { width: 19px; height: 19px; }

/* Carte de contenu. */
.ceremony-seq-body {
  flex: 1; min-width: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: 10px;
  padding: 13px 16px;
  transition: box-shadow .15s, border-color .15s;
}
.ceremony-seq-body:hover { box-shadow: 0 6px 20px rgba(30, 26, 23, .07); border-color: var(--muted-2, #cbc3b8); }
.ceremony-seq.is-locked .ceremony-seq-body { border-color: color-mix(in srgb, var(--seq-ink, #8B6F5E) 40%, var(--color-border-light)); }
.ceremony-seq-has-contrib .ceremony-seq-body { box-shadow: inset 3px 0 0 var(--joy-rose-ink, #A26B74); }
.ceremony-seq-flash .ceremony-seq-body { animation: ceremonySeqFlash 2.4s ease; }

.ceremony-seq-num { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; color: var(--muted-2, #A79E95); }
.ceremony-seq-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ceremony-seq-kind {
  font-size: 11px;
  font-weight: 600;
  color: var(--seq-ink, #8B6F5E);
  background: var(--seq-tint, #f3efe9);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ceremony-seq-dur { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.ceremony-seq-title { font-size: 15px; font-weight: 500; margin-top: 4px; color: var(--color-text); }
.ceremony-seq-speaker { font-size: 12.5px; color: var(--color-text-muted); }
.ceremony-seq-notes { font-size: 12.5px; color: var(--color-text-muted); margin-top: 4px; font-style: italic; }
.ceremony-seq-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; align-self: flex-start; padding-top: 6px; }
.ceremony-seq-move-group { display: flex; flex-direction: column; gap: 0; }
.ceremony-seq-move {
  border: none; background: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 10px; line-height: 1; padding: 1px 3px;
}
.ceremony-seq-move:disabled { opacity: .25; cursor: default; }
.ceremony-seq-move:hover:not(:disabled) { color: var(--seq-ink, #8B6F5E); }

/* Intervenants */
.ceremony-parts { display: flex; flex-direction: column; gap: var(--space-2); }
.ceremony-part {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: var(--radius-sm, 8px);
}
.ceremony-part-main { flex: 1; min-width: 0; }
.ceremony-part-name { font-weight: 500; color: var(--color-text); }
.ceremony-part-role { font-size: 12.5px; color: var(--color-text-muted); }
.ceremony-part-text { font-size: 12.5px; color: var(--color-text-muted); margin-top: 4px; font-style: italic; }
.ceremony-part-status {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pt-ink, #8B6F5E);
  background: var(--pt-tint, #f3efe9);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ceremony-part-actions { display: flex; gap: 4px; }

/* Rituels */
.ceremony-rituals { display: flex; flex-direction: column; gap: var(--space-2); }
.ceremony-ritual {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: var(--radius-sm, 8px);
}
.ceremony-ritual.is-done { opacity: .62; }
.ceremony-ritual.is-done .ceremony-ritual-name { text-decoration: line-through; }
.ceremony-ritual-check { display: flex; align-items: center; padding-top: 2px; }
.ceremony-ritual-body { flex: 1; min-width: 0; }
.ceremony-ritual-name { font-weight: 500; color: var(--color-text); }
.ceremony-ritual-desc { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.45; }
.ceremony-ritual-mat { font-size: 12px; color: var(--joy-sage-ink, #4b6b52); margin-top: 4px; }
.ceremony-ritual-notes { font-size: 12px; color: var(--color-text-muted); font-style: italic; margin-top: 3px; }

/* Bibliothèque de rituels (picker) */
.ceremony-ritual-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.ceremony-ritual-preset {
  text-align: left;
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface, #fff);
  padding: var(--space-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .15s ease, background .15s ease;
}
.ceremony-ritual-preset:hover { border-color: var(--joy-rose-ink, #b56b7a); background: var(--joy-rose-tint, #f7ecef); }
.ceremony-ritual-preset-ico { font-size: 20px; }
.ceremony-ritual-preset-label { font-weight: 600; font-size: 14px; }
.ceremony-ritual-preset-desc { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

/* Textes & lectures */
.ceremony-texts { display: flex; flex-direction: column; gap: var(--space-2); }
.ceremony-text {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: var(--radius-sm, 8px);
}
.ceremony-text-main { flex: 1; min-width: 0; }
.ceremony-text-title { font-weight: 500; color: var(--color-text); }
.ceremony-text-dur { font-weight: 400; font-size: 12px; color: var(--color-text-muted); }
.ceremony-text-meta { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
.ceremony-text-excerpt { font-size: 12.5px; color: var(--color-text-muted); font-style: italic; margin-top: 4px; line-height: 1.45; }

/* Musiques */
.ceremony-musics { display: flex; flex-direction: column; gap: var(--space-2); }
.ceremony-music {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: var(--radius-sm, 8px);
}
.ceremony-music-moment {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--joy-sage-ink, #4b6b52);
  background: var(--joy-sage-tint, #eef3ec);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ceremony-music-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ceremony-music-title { font-weight: 500; color: var(--color-text); }
.ceremony-music-artist { font-size: 12.5px; color: var(--color-text-muted); }
.ceremony-music-notes { font-size: 12px; color: var(--color-text-muted); font-style: italic; }

@media (max-width: 720px) {
  .ceremony-kpis { grid-template-columns: repeat(2, 1fr); }
  .ceremony-form-grid { grid-template-columns: 1fr; }
  .ceremony-ritual-picker { grid-template-columns: 1fr; }
  .ceremony-music { flex-wrap: wrap; }
}

/* ============================================================
   PHASE 1 — Conducteur opérationnel : planning, statuts, alertes,
   cartes de séquence dépliables. (Identité joy/editorial conservée.)
   ============================================================ */

/* Résumé planning au-dessus du déroulé */
.ceremony-sched-summary {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--color-border-light, #ece8e1);
}
.ceremony-sched-summary strong { color: var(--color-text); }
.ceremony-inline-alert, .ceremony-warn-count { color: var(--joy-apricot-ink, #C4956A); font-weight: 600; }

/* Marge « form hint » inline dans les labels de la modale */
.form-hint-inline { font-weight: 400; font-size: 11px; color: var(--color-text-muted); }

/* En-tête cliquable (résumé) de la séquence */
.ceremony-seq-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: none;
  border: none;
  padding: 2px 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.ceremony-seq-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--seq-ink, #8B6F5E);
  white-space: nowrap;
}
.ceremony-seq-summary .ceremony-seq-title { margin-top: 0; flex: 1; min-width: 90px; }
.ceremony-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--st-ink, #8B6F5E);
  background: var(--st-tint, #f3efe9);
}
.ceremony-seq-alertdot {
  font-size: 11px;
  font-weight: 700;
  color: var(--joy-apricot-ink, #C4956A);
  background: color-mix(in srgb, var(--joy-apricot-ink) 14%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ceremony-seq-chevron { color: var(--color-text-muted); transition: transform 0.2s ease; flex-shrink: 0; }
.ceremony-seq.is-open .ceremony-seq-chevron { transform: rotate(180deg); }
.ceremony-seq.is-locked { opacity: 0.92; }
.ceremony-seq.is-locked .ceremony-seq-title { text-decoration: none; }

/* Détail déplié */
.ceremony-seq-detail { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border-light, #ece8e1); }
.ceremony-seq-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin-bottom: 8px; }
.ceremony-seq-field { display: flex; flex-direction: column; gap: 1px; }
.ceremony-seq-field-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.ceremony-seq-field-v { font-size: 13px; color: var(--color-text); }
.ceremony-seq-shared, .ceremony-seq-private { font-size: 12.5px; color: var(--color-text); margin-top: 6px; line-height: 1.45; }
.ceremony-seq-tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: middle;
  background: var(--joy-sky-tint, #dbeaf0); color: var(--joy-sky-ink, #5E7B8B);
}
.ceremony-seq-tag-lock { background: var(--joy-plum-tint, #e8dced); color: var(--joy-plum-ink, #8B6B9E); }
.ceremony-seq-private { padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--joy-plum-ink) 6%, transparent); }
.ceremony-seq-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ceremony-seq-alert { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ceremony-seq-alert.is-warn { background: color-mix(in srgb, var(--joy-apricot-ink) 12%, transparent); color: var(--joy-apricot-ink, #C4956A); }
.ceremony-seq-alert.is-info { background: color-mix(in srgb, var(--joy-sky-ink) 12%, transparent); color: var(--joy-sky-ink, #5E7B8B); }
.ceremony-seq-detail-empty { font-size: 12px; font-style: italic; color: var(--color-text-muted); }

@media (max-width: 600px) {
  .ceremony-seq-summary { gap: 6px; }
  .ceremony-seq-summary .ceremony-seq-dur { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ceremony-seq-chevron { transition: none; }
}

/* ============================================================
   PHASE 2 — Liens séquence ↔ bibliothèques (sans duplication)
   ============================================================ */
.ceremony-link-section {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: 10px;
  background: var(--color-bg-subtle, #fbf8f3);
}
.ceremony-link-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ceremony-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light, #ece8e1);
  background: var(--surface, #fff);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ceremony-link-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
/* État sélectionné : `.on` posé au rendu + `:has(input:checked)` pour le suivi
   LIVE au clic (la case est masquée, sinon aucun retour visuel). Re-cliquer
   désélectionne. */
.ceremony-link-chip.on,
.ceremony-link-chip:has(input:checked) {
  border-color: var(--accent, #8B6F5E);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent, #8B6F5E);
  font-weight: 600;
}
/* Si `.on` était posé au rendu mais la case est décochée, on retire le highlight. */
.ceremony-link-chip.on:has(input:not(:checked)) {
  border-color: var(--color-border-light, #ece8e1);
  background: var(--surface, #fff);
  color: inherit;
  font-weight: 400;
}
.ceremony-link-chip:hover { border-color: var(--accent, #8B6F5E); }
.ceremony-link-chip:focus-within { outline: 2px solid var(--accent, #8B6F5E); outline-offset: 1px; }
.ceremony-link-empty { font-size: 12px; font-style: italic; color: var(--color-text-muted); margin: 2px 0 0; }

/* Entête d'un groupe relié : label + bouton « + Nouveau » (création inline) */
.ceremony-link-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 5px; }
.ceremony-link-head .form-label { margin: 0; }
.ceremony-link-add {
  font: inherit; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--joy-gold-ink, #b8965a);
  background: transparent; color: var(--joy-gold-ink, #8a6a2c);
  transition: background .12s, border-color .12s;
}
.ceremony-link-add:hover { background: var(--joy-gold-tint, #f5ead4); border-style: solid; }
.ceremony-link-add .ui-ico { color: currentColor; }

/* Mini-formulaire de création inline (dans la modale de séquence) */
.ceremony-inline-create {
  margin-top: 8px; padding: 10px; border-radius: 8px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--joy-gold-ink, #b8965a);
}
.ceremony-inline-create[hidden] { display: none; }
.ceremony-inline-create-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ceremony-inline-create-fields .form-input,
.ceremony-inline-create-fields .form-select { flex: 1 1 160px; min-width: 130px; margin: 0; }
.ceremony-inline-create-actions { display: flex; gap: 8px; }

/* Affichage des éléments reliés dans le détail d'une séquence */
.ceremony-seq-links { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ceremony-seq-links-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); flex-shrink: 0; min-width: 74px; }
.ceremony-seq-linkchips { display: flex; flex-wrap: wrap; gap: 5px; }
.ceremony-seq-linkchip {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--seq-tint, #f3efe9);
  color: var(--seq-ink, #8B6F5E);
  font-weight: 600;
}
.ceremony-seq-materials { font-size: 12.5px; color: var(--color-text); }

/* ============================================================
   Mode d'affichage Édition ⇄ Aperçu (ex-vues multiples)
   ============================================================ */
.ceremony-viewswitch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}
.ceremony-viewbtn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light, #ece8e1);
  background: var(--surface, #fff);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ceremony-viewbtn:hover { border-color: var(--accent, #8B6F5E); color: var(--color-text); }
.ceremony-viewbtn.on {
  background: var(--accent, #8B6F5E);
  border-color: var(--accent, #8B6F5E);
  color: #fff;
}
.ceremony-viewbtn:focus-visible { outline: 2px solid var(--accent, #8B6F5E); outline-offset: 2px; }

/* Cadre en lecture seule (vues non-WP) */
.ceremony-cadre-ro {
  margin: var(--space-3) 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-bg-subtle, #fbf8f3);
  border: 1px solid var(--color-border-light, #ece8e1);
  font-size: 13.5px;
  color: var(--color-text);
}

/* Étoile « moment fort » (vues DJ / photo) */
.ceremony-seq-star { color: var(--joy-gold-ink, #B8965A); margin-right: 5px; font-size: 13px; }

/* ============================================================
   Fil conducteur — étiquettes d'étapes (logique de remplissage)
   ============================================================ */
.ceremony-step { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); }
.ceremony-step:first-of-type { margin-top: 0; }
.ceremony-step-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, serif); font-size: 15px; font-weight: 600;
  background: var(--joy-gold-tint, #f5ead4); color: var(--joy-gold-ink, #8a6a2c);
  border: 1px solid var(--joy-gold-ink, #b8965a);
}
.ceremony-step-title { font-family: var(--font-heading, serif); font-size: 1.15rem; color: var(--color-text); line-height: 1.2; }
.ceremony-step-sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 1px; }

/* Cadre repliable (<details>) */
.ceremony-cadre { padding: 0; overflow: hidden; }
.ceremony-cadre > .ceremony-form-grid,
.ceremony-cadre > .form-group { margin-left: var(--space-4); margin-right: var(--space-4); }
.ceremony-cadre > .form-group:last-child { margin-bottom: var(--space-4); }
.ceremony-cadre-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.ceremony-cadre-summary::-webkit-details-marker { display: none; }
.ceremony-cadre-summary:hover { background: var(--color-bg-subtle, #fbf8f3); }
.ceremony-cadre-summary-txt { font-size: 13.5px; color: var(--color-text); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ceremony-cadre-summary-txt .ui-ico { vertical-align: -2px; }
.ceremony-cadre-summary-hint {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
.ceremony-cadre-chevron { transition: transform .18s ease; }
.ceremony-cadre[open] .ceremony-cadre-chevron { transform: rotate(180deg); }

/* ============================================================
   Étape 3 — Ingrédients regroupés (sous-onglets)
   ============================================================ */
.ceremony-ingnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.ceremony-ingtab {
  font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--color-border-light, #ece8e1);
  background: var(--color-surface, #fff); color: var(--color-text-muted);
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.ceremony-ingtab .ui-ico { color: currentColor; }
.ceremony-ingtab:hover { border-color: var(--accent, #8B6F5E); color: var(--color-text); }
.ceremony-ingtab.on {
  background: var(--joy-gold-tint, #f5ead4); border-color: var(--joy-gold-ink, #b8965a);
  color: var(--joy-gold-ink, #8a6a2c);
}
.ceremony-ingtab-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--joy-gold-ink, #b8965a); color: #fff;
}
.ceremony-ingtab:not(.on) .ceremony-ingtab-count { background: var(--color-text-muted, #8a7f72); }

/* ============================================================
   PHASE 5 — Contribution externe (affichage WP + modale)
   ============================================================ */
.ceremony-seq-tag-ext { background: var(--joy-sage-tint, #dde3cc); color: var(--joy-sage-ink, #7A8D6B); }
.ceremony-seq-contrib {
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--joy-sage-ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--joy-sage-ink) 22%, transparent);
}
.ceremony-contrib-line { font-size: 12.5px; color: var(--color-text); margin-top: 3px; }

/* ============================================================
   REFONTE « Déroulé » (handoff) — contribution lisible + badge de lien
   dynamique 3 états. Adapté aux tokens joy (accent contribution = rose).
   ============================================================ */

/* Titre de séquence plus lisible : serif italique. */
.ceremony-seq-title { font-family: var(--serif, Georgia, serif); font-style: italic; font-weight: 500; }

/* Séquence ayant reçu une contribution : liseré rose + flash à l'arrivée. */
.ceremony-seq-has-contrib { box-shadow: inset 3px 0 0 var(--joy-rose-ink, #A26B74); }
.ceremony-seq-flash { animation: ceremonySeqFlash 2.4s ease; }
@keyframes ceremonySeqFlash {
  0%, 100% { box-shadow: inset 3px 0 0 var(--joy-rose-ink, #A26B74); }
  15% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--joy-rose-ink) 48%, transparent); }
  60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--joy-rose-ink) 22%, transparent); }
}

/* Encart contribution — REPLIABLE (details/summary) : replié = juste le titre
   animé « Contribution externe » pour ne pas surcharger le déroulé. */
.ceremony-contrib {
  margin-top: 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--joy-rose-ink) 32%, transparent);
  background: color-mix(in srgb, var(--joy-rose-tint, #F1E1DF) 60%, var(--surface, #fff));
  overflow: hidden;
}
.ceremony-contrib.is-new { border-color: var(--joy-rose-ink, #A26B74); box-shadow: 0 0 0 1px var(--joy-rose-ink, #A26B74); }
.ceremony-contrib-head {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px;
}
.ceremony-contrib-head::-webkit-details-marker { display: none; }
.ceremony-contrib-head:hover { background: color-mix(in srgb, var(--joy-rose-ink) 7%, transparent); }
.ceremony-contrib-head-main {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--joy-rose-ink, #A26B74);
}
.ceremony-contrib-head-main > svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Titre toujours en douce respiration ; nouvelle contribution = clignote. */
.ceremony-contrib-title { animation: ceremony-contrib-breathe 2.6s ease-in-out infinite; }
@keyframes ceremony-contrib-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.ceremony-contrib.is-new .ceremony-contrib-head-main { animation: ceremony-contrib-blink 1.1s steps(1, end) infinite; }
@keyframes ceremony-contrib-blink { 0%, 100% { color: var(--joy-rose-ink, #A26B74); } 50% { color: color-mix(in srgb, var(--joy-rose-ink) 40%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .ceremony-contrib-title, .ceremony-contrib.is-new .ceremony-contrib-head-main { animation: none; }
}
.ceremony-contrib-chevron { flex-shrink: 0; color: var(--joy-rose-ink, #A26B74); transition: transform .18s ease; }
.ceremony-contrib[open] .ceremony-contrib-chevron { transform: rotate(180deg); }
.ceremony-contrib-who { text-transform: none; letter-spacing: 0; font-weight: 500; color: color-mix(in srgb, var(--joy-rose-ink) 80%, var(--ink)); }
.ceremony-contrib-new {
  text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: 800;
  color: #fff; background: var(--joy-rose-ink, #A26B74);
  padding: 2px 7px; border-radius: 999px; margin-left: 2px;
}
.ceremony-contrib-body { padding: 2px 15px 13px; }
.ceremony-contrib-actions { margin-top: 12px; }
.ceremony-contrib-revoke {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--joy-apricot-ink, #B8874A);
  background: var(--surface, #fff);
  border: 1px solid color-mix(in srgb, var(--joy-apricot-ink) 40%, transparent);
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  transition: background .15s, transform .12s;
}
.ceremony-contrib-revoke:hover { background: color-mix(in srgb, var(--joy-apricot-ink) 12%, var(--surface)); transform: translateY(-1px); }
.ceremony-contrib-revoke svg { width: 12px; height: 12px; }
.ceremony-contrib-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ceremony-contrib-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-soft, var(--color-text)); }
.ceremony-contrib-list li > svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.ceremony-contrib-list li.done > svg { color: var(--joy-sage-ink, #6F8A63); }
.ceremony-contrib-list li.declined > svg { color: var(--joy-apricot-ink, #B8874A); }
.ceremony-contrib-quote {
  font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 13.5px;
  color: var(--ink, #1E1A17);
  background: var(--surface, #fff);
  border-left: 3px solid var(--joy-rose-ink, #A26B74);
  border-radius: 0 5px 5px 0; padding: 8px 12px; margin-top: 7px;
}
.ceremony-contrib-warn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-size: 11.5px; font-weight: 700; color: var(--joy-apricot-ink, #B8874A);
}
.ceremony-contrib-warn svg { width: 13px; height: 13px; }
/* U1 : intégrer un texte déposé → bibliothèque Textes. */
.ceremony-contrib-apply {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--joy-rose-ink, #A26B74);
  background: var(--surface, #fff);
  border: 1px solid color-mix(in srgb, var(--joy-rose-ink) 40%, transparent);
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  transition: background .15s, transform .12s;
}
.ceremony-contrib-apply:hover { background: color-mix(in srgb, var(--joy-rose-ink) 10%, var(--surface)); transform: translateY(-1px); }
.ceremony-contrib-applied {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--joy-sage-ink, #6F8A63);
}
.ceremony-contrib-applied svg { width: 12px; height: 12px; }

/* U2 — Panneau « Liens de contribution ». */
.cx-panel { display: flex; flex-direction: column; gap: 8px; }
.cx-panel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--color-border-light, #ece8e1);
  border-radius: 10px;
  background: var(--color-bg-subtle, #fbf8f3);
}
.cx-panel-main { flex: 1; min-width: 0; }
.cx-panel-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cx-panel-top strong { font-size: 14px; color: var(--color-text); }
.cx-panel-email { font-size: 12px; color: var(--color-text-muted); }
.cx-panel-status { font-size: 10.5px; }
.cx-panel-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.cx-panel-used { color: var(--color-text-muted); }
.cx-panel-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* Séquences couvertes par un lien multi (pastilles, état par séquence). */
.cx-panel-seqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cx-panel-seqchip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--color-border-light, #ece8e1);
  background: var(--surface, #fff); color: var(--color-text-muted);
}
.cx-panel-seqchip svg { width: 11px; height: 11px; }
.cx-panel-seqchip.is-got { border-color: color-mix(in srgb, var(--joy-sage-ink) 40%, transparent); background: var(--joy-sage-tint, #E1E8D9); color: var(--joy-sage-ink, #6F8A63); font-weight: 600; }
.cx-panel-seqchip.is-decl { border-color: color-mix(in srgb, var(--joy-apricot-ink) 40%, transparent); color: var(--joy-apricot-ink, #B8874A); }
.cx-panel-viewed { color: var(--joy-sage-ink, #6F8A63); }
.cx-panel-viewed svg { width: 11px; height: 11px; vertical-align: -1px; }
.cx-panel-unviewed { color: var(--color-text-muted); font-style: italic; }

/* F2 — sélecteur de modèles de cérémonie. */
.ceremony-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ceremony-tpl-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px 15px; border-radius: 10px;
  border: 1px solid var(--color-border-light, #ece8e1);
  background: var(--color-bg-subtle, #fbf8f3); cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.ceremony-tpl-card:hover { border-color: var(--joy-rose-ink, #A26B74); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,26,23,.07); }
.ceremony-tpl-card strong { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 16px; color: var(--color-text); }
.ceremony-tpl-desc { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }
.ceremony-tpl-count { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--joy-rose-ink, #A26B74); margin-top: 2px; }
@media (max-width: 560px) { .ceremony-tpl-grid { grid-template-columns: 1fr; } }

/* U5 — garde-fou horaire (note « dans le temps »). */
.ceremony-ok-note { color: var(--joy-sage-ink, #6F8A63); font-weight: 600; }

/* U6 — glisser-déposer des séquences (poignée = médaillon). */
.ceremony-seq-rail[draggable="true"] { cursor: grab; }
.ceremony-seq-rail[draggable="true"]:active { cursor: grabbing; }
.ceremony-seq-dragging { opacity: .45; }
.ceremony-seq-dropzone .ceremony-seq-body {
  box-shadow: 0 0 0 2px var(--joy-sage-ink, #6F8A63);
  border-color: var(--joy-sage-ink, #6F8A63);
}

/* Badge de lien — 3 états (inactif / partagé / nouvelle contribution). */
.ceremony-linkbadge {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line, rgba(0,0,0,.14));
  background: var(--surface, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted, #7A716A); cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.ceremony-linkbadge:hover { border-color: var(--muted); color: var(--ink); }
.ceremony-linkbadge svg { width: 15px; height: 15px; }
.ceremony-linkbadge.shared {
  border-color: color-mix(in srgb, var(--joy-rose-ink) 40%, transparent);
  background: var(--joy-rose-tint, #F1E1DF);
  color: var(--joy-rose-ink, #A26B74);
  animation: cerGlowBreathe 2.6s ease-in-out infinite;
}
.ceremony-linkbadge.newdata {
  border-color: var(--joy-rose-ink, #A26B74);
  color: var(--joy-rose-ink, #A26B74);
  animation: cerRingPulse 1.4s ease-in-out infinite;
}
/* Contribution reçue et déjà consultée : état « posé », sans animation. */
.ceremony-linkbadge.received {
  border-color: color-mix(in srgb, var(--joy-sage-ink) 40%, transparent);
  background: var(--joy-sage-tint, #E9EFE4);
  color: var(--joy-sage-ink, #6F8A63);
}
.ceremony-linkbadge-ping {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--joy-rose-ink, #A26B74);
  border: 2px solid var(--surface, #fff);
  animation: cerDotBlink .9s ease-in-out infinite;
}
@keyframes cerGlowBreathe { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--joy-rose-ink) 35%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes cerRingPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--joy-rose-ink) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes cerDotBlink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.2); } }

/* Légende des états = FILTRES cliquables (activer/désactiver). */
.ceremony-legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted, #7A716A);
  background: var(--color-bg-subtle, #FBF9F3);
  border: 1px solid var(--line, rgba(0,0,0,.1));
  border-radius: 6px; padding: 8px 10px; margin: 4px 0 14px;
}
.ceremony-legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 11.5px; color: var(--muted, #7A716A);
  background: transparent; border: 1px solid transparent;
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ceremony-legend-item:hover { border-color: var(--line, rgba(0,0,0,.15)); color: var(--color-text); }
/* Filtre actif = pilule inversée (sombre). */
.ceremony-legend-item.on {
  background: var(--ink, #2a2520); border-color: var(--ink, #2a2520); color: #fff; font-weight: 600;
}
.ceremony-legend-item.on .ceremony-linkbadge-sm { background: rgba(255,255,255,.16); }
.ceremony-legend-count {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--color-text);
}
.ceremony-legend-item.on .ceremony-legend-count { background: rgba(255,255,255,.22); color: #fff; }
.ceremony-legend-reset {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--joy-apricot-ink, #B8874A);
  background: transparent; border: none; cursor: pointer; padding: 4px 6px;
}
.ceremony-legend-reset:hover { text-decoration: underline; }
.ceremony-legend-reset svg { width: 11px; height: 11px; }
.ceremony-linklike {
  font: inherit; color: var(--joy-apricot-ink, #B8874A); font-weight: 600;
  background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;
}
.ceremony-linkbadge-sm { width: 20px; height: 20px; cursor: inherit; }
.ceremony-linkbadge-sm svg { width: 10px; height: 10px; }
.ceremony-linkbadge-sm .ceremony-linkbadge-ping { width: 7px; height: 7px; top: -2px; right: -2px; }

@media (prefers-reduced-motion: reduce) {
  .ceremony-seq-flash,
  .ceremony-linkbadge.shared,
  .ceremony-linkbadge.newdata,
  .ceremony-linkbadge-ping { animation: none; }
}
.ceremony-contrib-active {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--joy-sage-ink) 30%, transparent);
  border-radius: 10px;
  background: var(--color-bg-subtle, #fbf8f3);
}
.ceremony-contrib-url { display: flex; gap: 8px; align-items: center; }
.ceremony-contrib-url input { flex: 1; font-size: 12px; }