# ============================================================
# COMPONENTS V2 — Design System "PR Editorial"
# ============================================================
# Composants unifiés : un composant = une fonction du moteur.
# Tous les layouts assemblent ces briques — aucun style local.
# ============================================================

components:

  # C-CARD : carte standard (fond chaud, coins arrondis, ombre)
  card:
    fill: theme.backgrounds.card
    corner_radius: 0.06
    shadow: theme.card_style.shadow
    padding_cm: 0.9

  # C-BADGE : rond numéroté (motif cercle)
  badge:
    shape: circle
    fill: theme.primary.navy          # surchargé par couleur de cycle si série
    text_color: theme.text.on_dark
    font: display
    sizes:                            # diamètres en cm
      s: 1.27                         # légende
      m: 1.73                         # exec summary
      l: 2.29                         # numbered steps
      xl: 3.30                        # recommendation sidebar

  # C-HEADERBAND : bandeau d'en-tête de carte / colonne
  header_band:
    height_cm: 2.16
    font: body
    size: 18
    bold: true
    text_color: theme.text.on_dark

  # C-STAT : chiffre en grand
  stat:
    color: theme.accent.coral
    font: display
    bold: true

  # C-GHOST-NUMBER : numéro géant des dividers
  ghost_number:
    color: theme.primary.navy_light
    font: display
    size: 250

  # C-SQUARE-MARK : puce carrée corail (default_bullets)
  square_mark:
    size_cm: 0.56
    fill: theme.accent.coral

  # C-ARROW : flèche de liaison (risques -> solutions)
  arrow:
    char: "→"
    color: theme.accent.coral
    size: 22

  # C-DECOR-CIRCLES : cercles décoratifs hors-champ (cover / end)
  decor_circles:
    cover:
      - {x: 25.9, y: -4.1, d: 13.2, color: theme.primary.navy_light}
      - {x: 29.0, y:  9.7, d:  9.1, color: theme.accent.coral}
      - {x: 23.9, y: 13.7, d:  3.6, color: theme.secondary.glacier}
    end:
      - {x: -4.6, y: 11.7, d: 11.7, color: theme.primary.navy_light}
      - {x: 30.2, y: -3.3, d:  8.1, color: theme.accent.coral}

  # C-DASHLINE : ligne pointillée de connexion (timeline)
  dash_line:
    color: theme.text.muted
    width_pt: 1.25
    dash: dash