/* ================================================================
   SERIOUSCRAFT — Legacy Aliases (DEPRECATED)
   Mappe les anciens noms de classes non-préfixés vers les nouveaux
   .sc-* afin que les wireframes existants (Workbook/*.html) continuent
   à fonctionner pendant la phase de migration.
   À RETIRER une fois les 7 wireframes refactorisés.

   Chargement conditionnel : la constante SC_RTE_LEGACY (true par
   défaut dans seriouscraft-rte-styles.php) contrôle l'enqueue.
   ================================================================ */


/* ━━━ 1. LABELS / EYEBROWS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-label   { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-text-ter); margin-bottom: 12px; }
.paradox-label   { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-navy-muted); margin-bottom: 10px; }
.tl-phase        { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-text-ter); margin-bottom: 3px; }
.debrief-num     { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-ter); margin-bottom: 6px; }
.template-label  { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-green-dark); margin-bottom: 10px; }
.tip-label       { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-amber-dark); margin-bottom: 8px; }


/* ━━━ 2. CORPS DE TEXTE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-title   { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--sc-text); margin-bottom: 8px; line-height: 1.2; }
.section-intro   { display: block; font-size: 15px; color: var(--sc-text-sec); line-height: 1.7; max-width: 680px; }
.paradox-text    { display: block; font-size: 17px; font-style: italic; line-height: 1.65; color: white; }
.tl-title        { display: block; font-size: 14px; font-weight: 600; color: var(--sc-text); margin-bottom: 6px; }
.tl-desc         { display: block; font-size: 13px; color: var(--sc-text-sec); line-height: 1.6; }
.tl-sub          { display: block; font-size: 11px; color: var(--sc-text-sec); line-height: 1.5; }
.debrief-q       { display: block; font-size: 14px; font-weight: 500; color: var(--sc-text); margin-bottom: 6px; line-height: 1.5; }
.debrief-arrow   { display: block; font-size: 12px; color: var(--sc-text-ter); padding-left: 12px; border-left: 2px solid var(--sc-border); line-height: 1.55; }
.template-item   { display: flex; gap: 8px; font-size: 13px; color: var(--sc-text-sec); margin-bottom: 6px; line-height: 1.5; }
.template-item::before { content: '🗺️'; font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.phase-desc,
.mission-desc,
.level-desc,
.circuit-desc    { display: block; font-size: 13px; color: var(--sc-text-sec); line-height: 1.65; margin-bottom: 10px; }
.role-desc       { display: block; font-size: 12px; color: var(--sc-text-sec); line-height: 1.55; }
.step-title      { display: block; font-size: 13px; font-weight: 600; color: var(--sc-text); margin-bottom: 3px; }
.step-desc       { display: block; font-size: 12px; color: var(--sc-text-sec); line-height: 1.55; }
.icard-spec      { display: block; font-size: 11px; color: var(--sc-text-sec); line-height: 1.5; font-family: monospace; }
.tip-text        { display: block; font-size: 13px; color: var(--sc-text-sec); line-height: 1.65; }
.elian-note-text { display: block; font-size: 12px; color: var(--sc-text-sec); line-height: 1.55; font-style: italic; }
.elian-note-warn { display: block; margin-top: 8px; font-size: 11px; color: var(--sc-amber-dark); }


/* ━━━ 3. PILLS & BADGES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-green); border: 1px solid rgba(157, 197, 25, .3); padding: 4px 12px; border-radius: 20px; }
.hero-badge::before { content: '●'; font-size: 8px; }

.meta-pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.75); }
.meta-pill.accent { border-color: rgba(157, 197, 25, .5); color: var(--sc-green); }

.tl-note { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: 20px; }
.note-green  { background: var(--sc-green-bg);   color: var(--sc-green-dark); }
.note-amber  { background: var(--sc-amber-bg);   color: var(--sc-amber-dark); }
.note-navy   { background: var(--sc-blue-bg);    color: var(--sc-blue-dark); }
.note-red    { background: var(--sc-red-bg);     color: var(--sc-red-dark); }
.note-gold   { background: var(--sc-gold-bg);    color: var(--sc-gold); }
.note-teal   { background: var(--sc-teal-bg);    color: var(--sc-teal-dark); }
.note-purple { background: var(--sc-purple-bg);  color: var(--sc-purple-dark); }

.tl-pill { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 10px; margin-top: 4px; }
.pill-navy  { background: #E8EAF6;              color: var(--sc-navy); }
.pill-green { background: var(--sc-green-bg);   color: var(--sc-green-dark); }
.pill-amber { background: var(--sc-amber-bg);   color: var(--sc-amber-dark); }
.pill-red   { background: var(--sc-red-bg);     color: var(--sc-red-dark); }
.pill-teal  { background: var(--sc-teal-bg);    color: var(--sc-teal-dark); }
.pill-gray  { background: var(--sc-bg-ter);     color: var(--sc-text-sec); }

.debrief-for { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; margin-bottom: 6px; }
.for-senior { background: var(--sc-blue-bg);   color: var(--sc-blue-dark); }
.for-junior { background: var(--sc-green-bg);  color: var(--sc-green-dark); }
.for-all    { background: var(--sc-bg-ter);    color: var(--sc-text-sec); }

.zone-tag { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.tag-forest  { background: var(--sc-green-bg);  color: var(--sc-green-dark); }
.tag-mine    { background: var(--sc-bg-ter);    color: var(--sc-text-sec); }
.tag-village { background: var(--sc-blue-bg);   color: var(--sc-blue-dark); }
.tag-lake    { background: var(--sc-teal-bg);   color: var(--sc-teal-dark); }
.tag-tower   { background: var(--sc-amber-bg);  color: var(--sc-amber-dark); }

.compo-pill,
.component-pill { display: inline-block; font-family: monospace; font-size: 11px; padding: 3px 9px; background: var(--sc-bg-sec); border: 1px solid var(--sc-border); border-radius: 20px; color: var(--sc-text-sec); }

.phase-badge,
.mission-badge,
.level-badge,
.circuit-badge,
.feature-badge,
.diag-badge,
.tier-badge,
.ritual-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.badge-gate { background: var(--sc-navy); color: white; }
.badge-must,
.badge-demo,
.badge-trivial,
.badge-easy,
.b-monitor { background: var(--sc-green-bg); color: var(--sc-green-dark); }
.badge-build,
.badge-real,
.badge-target,
.badge-tricky,
.b-sensor { background: var(--sc-blue-bg); color: var(--sc-blue-dark); }
.badge-int,
.badge-doc,
.badge-graal,
.b-actuator { background: var(--sc-amber-bg); color: var(--sc-amber-dark); }
.badge-bonus,
.badge-stretch { background: var(--sc-bg-ter); color: var(--sc-text-sec); }
.badge-hard { background: var(--sc-red-bg); color: var(--sc-red-dark); }
.ritual-badge { background: var(--sc-green); color: var(--sc-navy); }


/* ━━━ 4. CALLOUTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.phase-insight,
.circuit-insight,
.mission-insight,
.level-insight { display: block; padding: 10px 14px; background: var(--sc-navy); border-radius: var(--sc-radius-sm); font-size: 12px; color: var(--sc-navy-muted); font-style: italic; line-height: 1.5; margin-top: 10px; }
.phase-rule { display: block; padding: 10px 14px; background: var(--sc-amber-bg); border: 1px solid rgba(239, 159, 39, .3); border-radius: var(--sc-radius-sm); font-size: 12px; color: var(--sc-amber-dark); line-height: 1.5; margin-top: 10px; }
.twist-announce { display: block; font-size: 16px; font-style: italic; color: var(--sc-red-dark); font-weight: 500; padding: 14px 16px; background: white; border-radius: var(--sc-radius-sm); border-left: 3px solid var(--sc-red-dark); margin-bottom: 16px; }
.step-block { display: block; margin-top: 8px; background: var(--sc-bg-sec); border-radius: var(--sc-radius-sm); padding: 8px 12px; font-size: 12px; color: var(--sc-text-sec); font-style: italic; }