/* ================================================================
   SERIOUSCRAFT — Design System · Éléments Texte
   Usage   : Classes pour modules Texte & Code de DIVI 5
   Version : 2.0 — préfixage .sc-* généralisé
   Fichiers source :
     expedition.html · first-commit.html · legacy-city.html
     the-blueprint.html · velocity.html · circuit_break_workshop_design.html
     six_formats_serious_craft.html · seriouscraft-workshopes.css
   ================================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. CUSTOM PROPERTIES
   Préfixe --sc- pour éviter tout conflit avec DIVI / WordPress
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Palette principale */
  --sc-navy:        #1A1F5C;
  --sc-navy-muted:  #8898CC;
  --sc-green:       #9DC519;
  --sc-green-dark:  #3B6D11;
  --sc-green-bg:    #EAF3DE;
  --sc-amber:       #EF9F27;
  --sc-amber-bg:    #FAEEDA;
  --sc-amber-dark:  #854F0B;
  --sc-blue-bg:     #E6F1FB;
  --sc-blue-dark:   #0C447C;
  --sc-red-bg:      #FCEBEB;
  --sc-red-dark:    #A32D2D;
  --sc-gold:        #BA7517;
  --sc-gold-bg:     #FAEEDA;
  --sc-teal-bg:     #E1F5EE;
  --sc-teal-dark:   #085041;
  --sc-purple-bg:   #EEEDFE;
  --sc-purple-dark: #3C3489;

  /* Texte */
  --sc-text:        #1a1a18;
  --sc-text-sec:    #5F5E5A;
  --sc-text-ter:    #888780;

  /* UI */
  --sc-border:      rgba(0, 0, 0, 0.1);
  --sc-bg-sec:      #f8f7f4;
  --sc-bg-ter:      #F1EFE8;
  --sc-radius:      10px;
  --sc-radius-sm:   6px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. LABELS / EYEBROWS
   Usage : <p class="sc-section-label">Ancrage Serious Gaming</p>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Label de section — gris neutre */
.sc-section-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  margin-bottom: 12px;
}

/* Label sur fond sombre (paradox, ritual-header, etc.) */
.sc-paradox-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-navy-muted);
  margin-bottom: 10px;
}

/* Label de phase — timeline */
.sc-tl-phase {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  margin-bottom: 3px;
}

/* Numérotation debrief — "01", "02"… */
.sc-debrief-num {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  margin-bottom: 6px;
}

/* Label template — vert */
.sc-template-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-green-dark);
  margin-bottom: 10px;
}

/* Label astuce facilitateur — amber */
.sc-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
   Usage : <p class="sc-section-intro">…</p>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Titre de section */
.sc-section-title {
  display: block;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--sc-text);
  margin-bottom: 8px;
  line-height: 1.2;
}

/* Texte d'introduction de section */
.sc-section-intro {
  display: block;
  font-size: 15px;
  color: var(--sc-text-sec);
  line-height: 1.7;
  max-width: 680px;
}

/* Citation / paradoxe — italic sur fond navy */
.sc-paradox-text {
  display: block;
  font-size: 17px;
  font-style: italic;
  line-height: 1.65;
  color: white;
}

/* Titre timeline */
.sc-tl-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 6px;
}

/* Description timeline */
.sc-tl-desc {
  display: block;
  font-size: 13px;
  color: var(--sc-text-sec);
  line-height: 1.6;
}

/* Sous-titre timeline (circuit_break) */
.sc-tl-sub {
  display: block;
  font-size: 11px;
  color: var(--sc-text-sec);
  line-height: 1.5;
}

/* Question de debrief */
.sc-debrief-q {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-text);
  margin-bottom: 6px;
  line-height: 1.5;
}

/* Réponse / mapping debrief — bordure gauche */
.sc-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;
}

/* Item liste avec icône cartographie */
.sc-template-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--sc-text-sec);
  margin-bottom: 6px;
  line-height: 1.5;
}
.sc-template-item::before {
  content: '🗺️';
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Description — phase / mission / niveau / circuit (normalisés) */
.sc-phase-desc,
.sc-mission-desc,
.sc-level-desc,
.sc-circuit-desc {
  display: block;
  font-size: 13px;
  color: var(--sc-text-sec);
  line-height: 1.65;
  margin-bottom: 10px;
}

/* Description de rôle */
.sc-role-desc {
  display: block;
  font-size: 12px;
  color: var(--sc-text-sec);
  line-height: 1.55;
}

/* Titre d'étape numérotée */
.sc-step-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 3px;
}

/* Description d'étape */
.sc-step-desc {
  display: block;
  font-size: 12px;
  color: var(--sc-text-sec);
  line-height: 1.55;
}

/* Spécification d'interface — monospace (the-blueprint) */
.sc-icard-spec {
  display: block;
  font-size: 11px;
  color: var(--sc-text-sec);
  line-height: 1.5;
  font-family: monospace;
}

/* Texte astuce facilitateur */
.sc-tip-text {
  display: block;
  font-size: 13px;
  color: var(--sc-text-sec);
  line-height: 1.65;
}

/* Note d'Elian — legacy-city */
.sc-elian-note-text {
  display: block;
  font-size: 12px;
  color: var(--sc-text-sec);
  line-height: 1.55;
  font-style: italic;
}
.sc-elian-note-warn {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--sc-amber-dark);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. PILLS & BADGES — <span> inline
   Usage : <span class="sc-tl-note sc-note-green">✓ Objectif</span>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Badge hero — puce verte, sur fond navy */
.sc-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;
}
.sc-hero-badge::before {
  content: '●';
  font-size: 8px;
}
/* Variante rouge — utilisée pour les ateliers "dette / héritage" (legacy-city) */
.sc-hero-badge--red {
  color: var(--sc-red-dark);
  border-color: rgba(163, 45, 45, .35);
}

/* Pills héro — sur fond sombre */
.sc-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);
}
.sc-meta-pill.sc-accent {
  border-color: rgba(157, 197, 25, .5);
  color: var(--sc-green);
}
.sc-meta-pill.sc-large {
  border-color: rgba(255, 255, 255, .25);
}
.sc-meta-pill.sc-red {
  border-color: rgba(163, 45, 45, .4);
  color: var(--sc-red-dark);
}

/* Accent inline pour le texte du hero (ex: point vert dans EXPEDITION.) */
.sc-hero-accent {
  color: var(--sc-green);
}

/* Signal italique discret pour les role cards (expedition) */
.sc-role-signal {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--sc-text-ter);
  font-style: italic;
}

/* Label "émerge quand" en haut des role cards (expedition) */
.sc-role-emerges {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  margin-bottom: 4px;
}

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

/* Pills compactes — circuit_break (taille réduite, radius serré) */
.sc-tl-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
}
.sc-pill-navy  { background: #E8EAF6;              color: var(--sc-navy); }
.sc-pill-green { background: var(--sc-green-bg);   color: var(--sc-green-dark); }
.sc-pill-amber { background: var(--sc-amber-bg);   color: var(--sc-amber-dark); }
.sc-pill-red   { background: var(--sc-red-bg);     color: var(--sc-red-dark); }
.sc-pill-teal  { background: var(--sc-teal-bg);    color: var(--sc-teal-dark); }
.sc-pill-gray  { background: var(--sc-bg-ter);     color: var(--sc-text-sec); }

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

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

/* Pill technique monospace */
.sc-compo-pill,
.sc-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);
}

/* ── Badges de statut — structure commune ────────────────────── */
.sc-phase-badge,
.sc-mission-badge,
.sc-level-badge,
.sc-circuit-badge,
.sc-feature-badge,
.sc-diag-badge,
.sc-tier-badge,
.sc-ritual-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Navy — gate / validation */
.sc-badge-gate {
  background: var(--sc-navy);
  color: white;
}

/* Vert — must, demo, trivial, easy, monitor */
.sc-badge-must,
.sc-badge-demo,
.sc-badge-trivial,
.sc-badge-easy,
.sc-b-monitor {
  background: var(--sc-green-bg);
  color: var(--sc-green-dark);
}

/* Bleu — build, real, target, tricky, sensor */
.sc-badge-build,
.sc-badge-real,
.sc-badge-target,
.sc-badge-tricky,
.sc-b-sensor {
  background: var(--sc-blue-bg);
  color: var(--sc-blue-dark);
}

/* Amber — int, doc, graal, actuator */
.sc-badge-int,
.sc-badge-doc,
.sc-badge-graal,
.sc-b-actuator {
  background: var(--sc-amber-bg);
  color: var(--sc-amber-dark);
}

/* Neutre — bonus, stretch */
.sc-badge-bonus,
.sc-badge-stretch {
  background: var(--sc-bg-ter);
  color: var(--sc-text-sec);
}

/* Rouge — hard */
.sc-badge-hard {
  background: var(--sc-red-bg);
  color: var(--sc-red-dark);
}

/* Rouge plein × blanc — alerte / interruption planifiée */
.sc-badge-alert {
  background: var(--sc-red-dark);
  color: white;
}

/* Vert vif sur navy — ritual */
.sc-ritual-badge {
  background: var(--sc-green);
  color: var(--sc-navy);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. CALLOUTS — blocs texte avec fond coloré
   Usage : <div class="sc-phase-insight">…</div>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Insight — fond navy, italic (phase, circuit, mission, level) */
.sc-phase-insight,
.sc-circuit-insight,
.sc-mission-insight,
.sc-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;
}

/* Règle — fond amber */
.sc-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;
}

/* Annonce / twist — italic, bordure gauche rouge */
.sc-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;
}

/* Bloc step — fond sec, italic (the-blueprint) */
.sc-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;
}

/* Boîte coût/bénéfice colorée — utilisée dans les comparaisons (legacy-city dilemme) */
.sc-cost-box {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--sc-radius-sm);
  font-size: 12px;
  line-height: 1.5;
}
.sc-cost-box--green { background: var(--sc-green-bg); color: var(--sc-green-dark); }
.sc-cost-box--red   { background: var(--sc-red-bg);   color: var(--sc-red-dark); }
.sc-cost-box--amber { background: var(--sc-amber-bg); color: var(--sc-amber-dark); }

/* Callout "dette" — petit encart rouge avec bordure gauche, à l'intérieur d'une card
   (legacy-city : feature-debt). Optionnellement .sc-card-insight-full pour spanner 2 colonnes. */
.sc-feature-debt {
  display: block;
  padding: 10px 14px;
  background: var(--sc-red-bg);
  border-radius: var(--sc-radius-sm);
  font-size: 12px;
  color: var(--sc-red-dark);
  line-height: 1.5;
  border-left: 3px solid var(--sc-red-dark);
}

/* Item de liste à flèche → (legacy-city : règles du compteur de dette) */
.sc-arrow-item {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--sc-text-sec);
  line-height: 1.5;
}
.sc-arrow-item::before {
  content: '→';
  color: var(--sc-text-ter);
  flex-shrink: 0;
}