/* ================================================================
   SERIOUSCRAFT — Design System · Structure
   Version : 1.0
   Complément de sc-text-elements.css (texte & badges).
   Ce fichier couvre : layout, nav, hero, cards, tables,
   timeline, debrief, template, footer.
   Usage : <link rel="stylesheet" href="sc-structure.css">
   ================================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color: var(--sc-text);
  background: #fff;
  line-height: 1.6;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVIGATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-nav {
  background: var(--sc-navy);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sc-nav-logo {
  color: white;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
}
.sc-nav-links { display: flex; gap: 20px; }
.sc-nav-links a {
  color: var(--sc-navy-muted);
  font-size: 13px;
  text-decoration: none;
  transition: color .12s;
}
.sc-nav-links a:hover { color: white; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO — base commune
   Variantes visuelles gérées par classes modificatrices
   sur .sc-hero dans chaque page.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-hero {
  background: var(--sc-navy);
  color: white;
  padding: 56px 40px 48px;
  position: relative;
  overflow: hidden;
}

/* Halo décoratif — présent dans toutes les variantes */
.sc-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(157, 197, 25, .06);
  pointer-events: none;
}

.sc-hero-inner { position: relative; z-index: 1; }

.sc-hero h1 {
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 16px;
}

/* Sous-titre du hero : <h1>TITRE<span class="sc-sub">SOUS-TITRE</span></h1> */
.sc-hero h1 .sc-sub {
  display: block;
  font-size: clamp(24px, 4vw, 44px);
  color: var(--sc-green);
  font-weight: 300;
  letter-spacing: .02em;
}
.sc-hero h1 .sc-sub--red {
  color: var(--sc-red-dark);
  letter-spacing: .04em;
  margin-top: 4px;
}

.sc-hero-tagline {
  font-size: 17px;
  color: var(--sc-navy-muted);
  max-width: 540px;
  margin-bottom: 24px;
  line-height: 1.6;
}

.sc-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO — variantes (modificateurs)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Grille blueprint (the-blueprint) */
.sc-hero--grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(157,197,25,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,197,25,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Fond très sombre — legacy style (legacy-city) */
.sc-hero--dark { background: #141830; }

/* Contours topographiques (expedition) */
.sc-hero--topo::before {
  background:
    radial-gradient(ellipse 600px 300px at 80% 60%, rgba(157,197,25,.05) 0%, transparent 70%),
    radial-gradient(ellipse 300px 300px at 20% 80%, rgba(157,197,25,.04) 0%, transparent 60%);
  width: auto; height: auto;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE — conteneur principal
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.sc-section { margin-top: 56px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PARADOX BLOCK
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-paradox {
  background: var(--sc-navy);
  border-radius: var(--sc-radius);
  padding: 24px 28px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.sc-paradox-inner { position: relative; z-index: 1; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-table-wrap {
  overflow-x: auto;
  margin-top: 24px;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-border);
}
.sc-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sc-table-wrap thead { background: var(--sc-bg-sec); }
.sc-table-wrap th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--sc-border);
}
.sc-table-wrap td {
  padding: 10px 14px;
  color: var(--sc-text-sec);
  border-bottom: 1px solid var(--sc-border);
  vertical-align: top;
}
.sc-table-wrap tr:last-child td { border-bottom: none; }
.sc-table-wrap tbody tr:hover { background: var(--sc-bg-sec); }
.sc-table-wrap td:first-child {
  font-weight: 500;
  color: var(--sc-text);
  font-family: monospace;
  font-size: 12px;
}
.sc-table-wrap td:nth-child(2) {
  color: var(--sc-navy);
  font-weight: 500;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS — niveaux, missions, circuits, features, phases
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.sc-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
}

.sc-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--sc-bg-sec);
  border-bottom: 1px solid var(--sc-border);
}

.sc-card-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  min-width: 68px;
}

.sc-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-text);
  flex: 1;
}

.sc-card-body {
  padding: 16px 18px;
}

/* Variante 2 colonnes — circuits, features */
.sc-card-body--2col {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sc-col-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  margin-bottom: 8px;
}

/* Ligne de composants (pills) */
.sc-compo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

/* Insight full-width en bas d'une card 2col */
.sc-card-insight-full { grid-column: 1 / -1; }

/* Card avec accent de couleur (twist, graal…) */
.sc-card--amber { border-color: var(--sc-amber); }
.sc-card--red   { border-color: var(--sc-red-dark); }
.sc-card--green { border-color: var(--sc-green); }
.sc-card--navy  { border-color: var(--sc-navy); }

.sc-card-header--amber { background: var(--sc-amber-bg); }
.sc-card-header--red   { background: var(--sc-red-bg); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPRINT BLOCK — mécanique sprint (circuit-break, velocity)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-sprint-block {
  border: 2px solid var(--sc-green);
  border-radius: var(--sc-radius);
  overflow: hidden;
  margin-top: 16px;
}

.sc-sprint-header {
  background: var(--sc-green);
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sc-navy);
}

.sc-sprint-body { padding: 14px 18px; }

.sc-sprint-item {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--sc-text-sec);
  line-height: 1.5;
}
.sc-sprint-item::before {
  content: '▸';
  color: var(--sc-green);
  flex-shrink: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPECIAL BLOCKS — ritual, rule, interface, dilemma…
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Bloc borduré avec header coloré — règle, rituel, contrat */
.sc-block {
  border-radius: var(--sc-radius);
  overflow: hidden;
  margin-top: 28px;
}
.sc-block--navy  { border: 2px solid var(--sc-navy); }
.sc-block--green { border: 2px solid var(--sc-green); }
.sc-block--red   { border: 2px solid var(--sc-red-dark); }
.sc-block--amber { border: 2px solid var(--sc-amber); }
.sc-block--gold  { border: 2px solid #BA7517; }

.sc-block-header {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-block-header--navy  { background: var(--sc-navy); }
.sc-block-header--green { background: var(--sc-green); }
.sc-block-header--red   { background: var(--sc-red-dark); }
.sc-block-header--amber { background: var(--sc-amber-dark); }
.sc-block-header--gold  { background: #BA7517; }

.sc-block-header-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: white;
}
.sc-block-header--green .sc-block-header-text { color: var(--sc-navy); }

.sc-block-header-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.2);
  color: white;
  font-weight: 500;
}

/* Texte italique discret aligné à droite dans un header de bloc */
.sc-block-header-sub {
  margin-left: auto;
  font-size: 10px;
  color: rgba(255, 255, 255, .65);
  font-style: italic;
  white-space: nowrap;
}

/* Avatar circulaire à initiale dans un header de bloc (Elian, persona, auteur…) */
.sc-block-header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: 13px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Annonce italique de grande taille à l'intérieur d'un bloc
   (utilisé pour le dilemme refactoring de legacy-city) */
.sc-block-announce {
  padding: 20px;
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  border-bottom: 1px solid var(--sc-border);
}
.sc-block-announce--amber {
  background: var(--sc-amber-bg);
  color: var(--sc-amber-dark);
  border-bottom-color: rgba(239, 159, 39, .3);
}
.sc-block-announce--red {
  background: var(--sc-red-bg);
  color: var(--sc-red-dark);
  border-bottom-color: rgba(163, 45, 45, .25);
}
.sc-block-header--green .sc-block-header-badge {
  background: rgba(26,31,92,.15);
  color: var(--sc-navy);
}

.sc-block-body { padding: 18px 20px; }

.sc-block-foot {
  border-top: 1px solid var(--sc-border);
  padding: 12px 20px;
  font-size: 12px;
  color: var(--sc-text-sec);
  background: var(--sc-bg-sec);
  font-style: italic;
  line-height: 1.55;
}

/* Grille 2 colonnes à l'intérieur d'un bloc */
.sc-block-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.sc-block-col { padding: 18px 20px; }
.sc-block-col:first-child { border-right: 1px solid var(--sc-border); }

.sc-block-col-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.sc-rule-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--sc-text-sec);
  line-height: 1.5;
}
.sc-rule-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.sc-rule-dot--green { background: var(--sc-green); }
.sc-rule-dot--red   { background: var(--sc-red-dark); }
.sc-rule-dot--gray  { background: var(--sc-text-ter); }

/* Étapes numérotées (blueprint ritual) */
.sc-steps { display: flex; flex-direction: column; }
.sc-step {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sc-border);
}
.sc-step:last-child { border-bottom: none; }
.sc-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sc-navy);
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.sc-step-content { flex: 1; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.sc-role {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 16px;
}

.sc-role-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 4px;
}

.sc-role-count {
  font-size: 20px;
  font-weight: 600;
  color: var(--sc-navy);
  margin-bottom: 6px;
}

/* Modificateurs de couleur */
.sc-role--navy   { border-color: var(--sc-navy); }
.sc-role--blue   { border-color: var(--sc-blue-dark); }
.sc-role--green  { border-color: var(--sc-green); }
.sc-role--amber  { border-color: var(--sc-amber-dark); }
.sc-role--red    { border-color: var(--sc-red-dark); }
.sc-role--dashed { border-style: dashed; }

.sc-role--navy   .sc-role-name  { color: var(--sc-navy); }
.sc-role--blue   .sc-role-name  { color: var(--sc-blue-dark); }
.sc-role--green  .sc-role-name  { color: var(--sc-green-dark); }
.sc-role--amber  .sc-role-name  { color: var(--sc-amber-dark); }
.sc-role--red    .sc-role-name  { color: var(--sc-red-dark); }
.sc-role--navy   .sc-role-count { color: var(--sc-navy); }
.sc-role--blue   .sc-role-count { color: var(--sc-blue-dark); }
.sc-role--green  .sc-role-count { color: var(--sc-green-dark); }
.sc-role--amber  .sc-role-count { color: var(--sc-amber-dark); }
.sc-role--red    .sc-role-count { color: var(--sc-red-dark); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TIMELINE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-timeline { margin-top: 24px; }

.sc-tl-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 16px;
}

.sc-tl-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-navy);
  font-variant-numeric: tabular-nums;
  padding: 16px 0;
  text-align: right;
}

.sc-tl-body {
  border-left: 2px solid var(--sc-border);
  padding: 16px 0 16px 20px;
  position: relative;
}
.sc-tl-body::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 22px;
  width: 8px;
  height: 8px;
  background: white;
  border: 2px solid var(--sc-border);
  border-radius: 50%;
}

/* Highlights — modificateurs sur .sc-tl-item */
.sc-tl-item--green .sc-tl-body::before { border-color: var(--sc-green);    background: var(--sc-green); }
.sc-tl-item--green .sc-tl-body        { border-left-color: var(--sc-green); }
.sc-tl-item--amber .sc-tl-body::before { border-color: var(--sc-amber);    background: var(--sc-amber); }
.sc-tl-item--amber .sc-tl-body        { border-left-color: var(--sc-amber); }
.sc-tl-item--red   .sc-tl-body::before { border-color: var(--sc-red-dark); background: var(--sc-red-dark); }
.sc-tl-item--red   .sc-tl-body        { border-left-color: var(--sc-red-dark); }
.sc-tl-item--navy  .sc-tl-body::before { border-color: var(--sc-navy);     background: var(--sc-navy); }
.sc-tl-item--navy  .sc-tl-body        { border-left-color: var(--sc-navy); }
.sc-tl-item--gold  .sc-tl-body::before { border-color: #BA7517;           background: #BA7517; }
.sc-tl-item--gold  .sc-tl-body        { border-left-color: #BA7517; }
.sc-tl-item--teal  .sc-tl-body::before { border-color: #1D9E75;           background: #1D9E75; }
.sc-tl-item--teal  .sc-tl-body        { border-left-color: #1D9E75; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DEBRIEF LIST
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-debrief {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-debrief-item {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 16px 18px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEMPLATE BOX & TIP BOX
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-template {
  background: var(--sc-bg-sec);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 18px 20px;
  margin-top: 24px;
}

.sc-tip {
  background: var(--sc-amber-bg);
  border: 1px solid rgba(239, 159, 39, .3);
  border-radius: var(--sc-radius);
  padding: 18px 20px;
  margin-top: 20px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOW — process flow horizontal avec flèches
   Utilisé pour : system diagrams (the-blueprint), legacy maps, pipelines.
   Génère N colonnes alternant .sc-flow-step et .sc-flow-arrow.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-flow {
  margin-top: 28px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
}
.sc-flow-header {
  background: var(--sc-bg-sec);
  padding: 12px 18px;
  border-bottom: 1px solid var(--sc-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
}
.sc-flow-grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  align-items: stretch;
}
.sc-flow-grid--2 { grid-template-columns: 1fr 48px 1fr; }
.sc-flow-grid--4 { grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr; }

.sc-flow-step { padding: 20px 18px; }
.sc-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sc-bg-sec);
  gap: 4px;
  padding: 8px 0;
}
.sc-flow-arrow-line { width: 2px; flex: 1; background: var(--sc-border); }
.sc-flow-arrow-glyph { font-size: 16px; color: var(--sc-text-ter); line-height: 1; }

/* Helpers texte spécifiques au flow */
.sc-flow-step-sub {
  font-size: 11px;
  color: var(--sc-text-ter);
  margin-bottom: 10px;
  font-style: italic;
}

/* Spec / interface optionnelle en pied de step */
.sc-flow-spec {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px dashed rgba(186, 117, 23, .5);
  border-radius: var(--sc-radius-sm);
  font-size: 11px;
  color: var(--sc-gold);
  font-family: monospace;
}
.sc-flow-spec-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-gold);
  margin-bottom: 3px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPARE — grille 2 cartes de comparaison
   Utilisé pour : twist outcomes (mod/coup), before/after, scénarios A/B.
   Variantes : .sc-compare-card--green / --red / --amber / --navy.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.sc-compare-card {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  padding: 14px;
}
.sc-compare-card--green { background: var(--sc-green-bg); }
.sc-compare-card--red   { background: var(--sc-red-bg); }
.sc-compare-card--amber { background: var(--sc-amber-bg); }
.sc-compare-card--blue  { background: var(--sc-blue-bg); }

.sc-compare-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sc-compare-card--green .sc-compare-label { color: var(--sc-green-dark); }
.sc-compare-card--red   .sc-compare-label { color: var(--sc-red-dark); }
.sc-compare-card--amber .sc-compare-label { color: var(--sc-amber-dark); }
.sc-compare-card--blue  .sc-compare-label { color: var(--sc-blue-dark); }

.sc-compare-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 6px;
}
.sc-compare-desc {
  font-size: 12px;
  color: var(--sc-text-sec);
  line-height: 1.55;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FEATURE GRID — grille de cartes avec gros point/numéro
   Utilisé pour : interface contracts, blocs d'or, key features.
   Couleur d'accent paramétrable via .sc-feat-grid--gold / --navy / --green.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  --sc-feat-accent: var(--sc-navy);
}
.sc-feat-grid--gold  { --sc-feat-accent: var(--sc-gold); }
.sc-feat-grid--green { --sc-feat-accent: var(--sc-green-dark); }
.sc-feat-grid--navy  { --sc-feat-accent: var(--sc-navy); }
.sc-feat-grid--2 { grid-template-columns: 1fr 1fr; }
.sc-feat-grid--4 { grid-template-columns: repeat(4, 1fr); }

.sc-feat-card {
  background: var(--sc-bg-sec);
  border-radius: var(--sc-radius-sm);
  padding: 14px;
  border: 1px solid var(--sc-border);
}
.sc-feat-point {
  font-size: 20px;
  font-weight: 700;
  color: var(--sc-feat-accent);
  margin-bottom: 4px;
}
.sc-feat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 6px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ZONE GRID — carte du monde avec cellule centrale spéciale
   Utilisé pour : world map (expedition), legacy districts.
   Pattern : 3 colonnes, 6 cellules max, cellule .--center forcée
   à la colonne 2 avec fond navy.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-zone-grid {
  margin-top: 28px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
}
.sc-zone-grid-header {
  background: var(--sc-bg-sec);
  padding: 12px 18px;
  border-bottom: 1px solid var(--sc-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-text-ter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sc-zone-grid-header-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--sc-teal-bg);
  color: var(--sc-teal-dark);
  text-transform: none;
  letter-spacing: 0;
}
.sc-zone-grid-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sc-border);
}
.sc-zone-cell {
  padding: 18px 16px;
  background: white;
}
.sc-zone-cell--center {
  grid-column: 2;
  background: var(--sc-navy);
}
.sc-zone-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}
/* Sur la cellule centrale (fond navy), les textes communs deviennent clairs */
.sc-zone-cell--center .sc-tl-title         { color: white; }
.sc-zone-cell--center .sc-flow-step-sub    { color: var(--sc-navy-muted); }
.sc-zone-cell--center .sc-step-desc        { color: rgba(255, 255, 255, .7); }
.sc-zone-grid-foot {
  padding: 12px 18px;
  background: var(--sc-bg-sec);
  font-size: 12px;
  color: var(--sc-text-sec);
  line-height: 1.55;
  font-style: italic;
  border-top: 1px solid var(--sc-border);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FACILITATOR GRID — grille d'observation, fond navy
   Utilisé pour : grille d'observation facilitateur (expedition),
   guide animation, checklists pédagogiques.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-fac-grid {
  background: var(--sc-navy);
  border-radius: var(--sc-radius);
  padding: 20px 22px;
  margin-top: 24px;
}
.sc-fac-grid-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-navy-muted);
  margin-bottom: 14px;
}
.sc-fac-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sc-fac-item {
  background: rgba(255, 255, 255, .05);
  border-radius: var(--sc-radius-sm);
  padding: 10px 14px;
}
.sc-fac-q {
  font-size: 12px;
  font-weight: 500;
  color: white;
  margin-bottom: 4px;
  line-height: 1.45;
}
.sc-fac-note {
  font-size: 11px;
  color: var(--sc-navy-muted);
  line-height: 1.45;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLOR SWATCH — petit carré de couleur en tête de cellule
   Utilisé pour : zones cartographiées (first-commit), légendes,
   identification visuelle d'une catégorie. La couleur est fournie
   via inline style ou utility class.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--sc-radius-sm);
  margin-bottom: 10px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COUNTER WALL — métrique visuelle en carrés (legacy-city debt wall)
   Pattern réutilisable pour toute jauge de progression ou compteur
   d'incidents. Variantes de couleur via .sc-counter--red/--amber.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-counter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  --sc-counter-color: var(--sc-red-dark);
}
.sc-counter--red    { --sc-counter-color: var(--sc-red-dark); }
.sc-counter--amber  { --sc-counter-color: var(--sc-amber-dark); }
.sc-counter--green  { --sc-counter-color: var(--sc-green-dark); }
.sc-counter--navy   { --sc-counter-color: var(--sc-navy); }

.sc-counter-block {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: var(--sc-counter-color);
}
.sc-counter-block--ghost {
  background: var(--sc-bg-ter);
  border: 1px dashed var(--sc-border);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO COMPASS — décor secondaire optionnel (expedition)
   Lettre / glyphe en filigrane positionné en haut à droite du hero.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-hero-compass {
  position: absolute;
  top: 32px;
  right: 40px;
  font-size: 64px;
  opacity: .06;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--sc-green);
  font-family: serif;
  z-index: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-footer {
  background: var(--sc-navy);
  color: var(--sc-navy-muted);
  padding: 32px 40px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.sc-footer a { color: var(--sc-navy-muted); text-decoration: none; }
.sc-footer a:hover { color: white; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
  .sc-hero            { padding: 40px 20px 32px; }
  .sc-page            { padding: 0 16px 60px; }
  .sc-card-body--2col { grid-template-columns: 1fr; }
  .sc-block-2col      { grid-template-columns: 1fr; }
  .sc-block-col:first-child { border-right: none; border-bottom: 1px solid var(--sc-border); }
  .sc-roles           { grid-template-columns: 1fr 1fr; }

  /* Flow : passe en pile verticale */
  .sc-flow-grid,
  .sc-flow-grid--2,
  .sc-flow-grid--4    { grid-template-columns: 1fr; }
  .sc-flow-arrow      {
    flex-direction: row;
    height: 40px;
    border-top: 1px solid var(--sc-border);
    border-bottom: 1px solid var(--sc-border);
  }
  .sc-flow-arrow-line { width: auto; height: 2px; flex: 1; }

  /* Compare : une colonne */
  .sc-compare         { grid-template-columns: 1fr; }

  /* Feature grid : une colonne */
  .sc-feat-grid,
  .sc-feat-grid--2,
  .sc-feat-grid--4    { grid-template-columns: 1fr; }

  /* Zone grid : une colonne */
  .sc-zone-grid-cells { grid-template-columns: 1fr; }
  .sc-zone-cell--center { grid-column: 1; }

  /* Facilitator grid : une colonne */
  .sc-fac-items       { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .sc-roles           { grid-template-columns: 1fr; }
}