# =============================================================================
# components.yaml — Composants atomiques Pernod Ricard Sliding
# Projet : Sliding Design System
# Usage  : lu par render_engine.py pour assembler les layouts
# Source : PR Template officiel + galerie 28 layouts
# =============================================================================
# PRINCIPE
# Chaque composant est une brique réutilisable positionnée par render_engine.py.
# Un layout (layouts.yaml) est un assemblage de composants + règles de placement.
# Un composant déclare :
#   - ses champs JSON attendus (requis / optionnels)
#   - ses contraintes (min/max items, longueurs de texte)
#   - ses paramètres visuels (couleurs, tailles, positions relatives)
#   - ses références theme.yaml
# =============================================================================

meta:
  version: "1.0"
  date: "2026-05-14"
  total_components: 22
  categories:
    - structure        # titre, sous-titre, barre d'accent, footer, fond
    - texte            # bullets, paragraphe, citation, message clé
    - donnees          # kpi_card, big_stat, tableau, chart
    - visuel           # formes, diagrammes, pyramide, circulaire
    - process          # étapes, chevrons, gantt, timeline
    - acteurs          # orgchart node, raci cell, decision node


# =============================================================================
# CATÉGORIE : STRUCTURE
# Composants présents sur (presque) tous les slides
# =============================================================================

components:

  # ---------------------------------------------------------------------------
  # C01 — slide_background
  # Fond coloré du slide. Toujours le premier composant instancié.
  # ---------------------------------------------------------------------------
  slide_background:
    id: C01
    category: structure
    description: "Fond plein ou dégradé du slide. Définit le contexte visuel global."
    used_by_layouts:
      - tous
    fields:
      required:
        color:
          type: string
          description: "Couleur de fond — référencer theme.colors"
          examples: ["#ffffff", "#000a32", "#d9d9c4"]
      optional:
        color_right:
          type: string
          description: "Couleur du panneau droit pour les splits diagonaux"
          default: null
        diagonal_split:
          type: boolean
          description: "Active la partition diagonale (cover, section_divider)"
          default: false
        diagonal_angle_deg:
          type: integer
          description: "Angle de la diagonale en degrés"
          default: 15
    render:
      type: rectangle_fill
      position: full_slide
      z_index: 0


  # ---------------------------------------------------------------------------
  # C02 — slide_title
  # Titre principal du slide. Présent sur tous les layouts sauf cover (traitement spécial).
  # ---------------------------------------------------------------------------
  slide_title:
    id: C02
    category: structure
    description: "Titre action du slide (formulation So What). 2 lignes max."
    used_by_layouts:
      - default_bullets
      - two_cols_text
      - key_message
      - executive_summary
      - kpi_grid
      - big_stat
      - comparison_table
      - chart_callout
      - benchmark
      - matrix_2x2
      - pyramid
      - circular_diagram
      - from_to
      - boxes_grid
      - numbered_steps
      - process_arrow
      - gantt_timeline
      - yearly_timeline
      - phases_timeline
      - org_chart
      - raci_table
      - decision_tree
      - recommendation_card
    fields:
      required:
        text:
          type: string
          max_chars: 80
          description: "Titre du slide — formulation affirmative, jamais thématique"
      optional:
        subtitle:
          type: string
          max_chars: 60
          description: "Sous-titre ou date"
          default: null
    constraints:
      max_lines: 2
      max_chars_per_line: 45
    render:
      font: "theme.typography.display"
      size_pt: "theme.typography.sizes.slide_title"
      color_on_white: "theme.colors.text.on_white"
      color_on_dark: "theme.colors.text.on_dark"
      position_left_cm: 1.8      # décalé pour laisser place à la barre d'accent
      position_top_cm: 0.5
      width_cm: 27.0
      bold: true
      subtitle_font: "theme.typography.body"
      subtitle_size_pt: "theme.typography.sizes.slide_subtitle"
      subtitle_color: "theme.colors.text.subtitle"
      subtitle_margin_top_cm: 0.15
      z_index: 2


  # ---------------------------------------------------------------------------
  # C03 — accent_bar
  # Barre verticale rose à gauche du titre. Signature PR.
  # ---------------------------------------------------------------------------
  accent_bar:
    id: C03
    category: structure
    description: "Barre verticale rose, signature graphique PR. Alignée à gauche du titre."
    used_by_layouts: "voir theme.signature.accent_bar.visible_on"
    fields: {}          # aucun champ JSON — paramètres fixes dans theme.yaml
    render:
      color: "theme.colors.primary.rose"
      width_cm: "theme.signature.accent_bar.width_cm"
      position_left_cm: "theme.signature.accent_bar.position_left_cm"
      # hauteur = hauteur du titre (calculée dynamiquement)
      height_dynamic: true
      z_index: 2


  # ---------------------------------------------------------------------------
  # C04 — pr_footer
  # Footer bas de slide : numéro, séparateur, logo, "Pernod Ricard", tagline.
  # ---------------------------------------------------------------------------
  pr_footer:
    id: C04
    category: structure
    description: "Footer standard PR. Numéro de slide + logo + DATA GOVERNANCE DATA MANAGEMENT."
    fields:
      auto:
        slide_number:
          type: integer
          description: "Injecté automatiquement par render_engine.py"
    render:
      height_cm: "theme.signature.footer.height_cm"
      position_bottom: true
      background: "theme.signature.footer.background"
      border_top_color: "theme.signature.footer.border_top_color"
      elements: "theme.signature.footer.elements"
      z_index: 10


  # ---------------------------------------------------------------------------
  # C05 — pr_logo_topbar
  # Logo soleil Pernod Ricard, top-left, slides à fond clair.
  # ---------------------------------------------------------------------------
  pr_logo_topbar:
    id: C05
    category: structure
    description: "Logo PR (icône soleil) top-left. Slides fond blanc/clair uniquement."
    fields: {}
    render:
      file: "theme.assets.logo_sun"
      position_left_cm: "theme.signature.logo_topbar.position_left_cm"
      position_top_cm: "theme.signature.logo_topbar.position_top_cm"
      height_cm: "theme.signature.logo_topbar.height_cm"
      z_index: 3


# =============================================================================
# CATÉGORIE : TEXTE
# =============================================================================

  # ---------------------------------------------------------------------------
  # C06 — bullet_list
  # Liste à puces hiérarchisée, 3 niveaux. Composant texte le plus fréquent.
  # ---------------------------------------------------------------------------
  bullet_list:
    id: C06
    category: texte
    description: "Liste à puces 1 à 3 niveaux. Bullet L1 gros, L2/L3 réduits et indentés."
    used_by_layouts:
      - default_bullets
      - two_cols_text
      - process_arrow   # sous les chevrons
    fields:
      required:
        items:
          type: array
          min_items: 1
          max_items: 10
          item_schema:
            texte:
              type: string
              max_chars: 120
            niveau:
              type: integer
              values: [1, 2, 3]
            sous_items:
              type: array
              optional: true
              max_items: 4
    constraints:
      max_total_lines: 14       # au-delà, render_engine tronque avec "…"
      max_chars_l1: 100
      max_chars_l2: 90
      max_chars_l3: 80
    render:
      l1:
        marker: "theme.bullets.level_1.marker"
        indent_cm: "theme.bullets.level_1.indent_cm"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.bullet_l1"
        color: "theme.colors.text.on_white"
        space_before_pt: "theme.bullets.level_1.space_before_pt"
      l2:
        marker: "theme.bullets.level_2.marker"
        indent_cm: "theme.bullets.level_2.indent_cm"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.bullet_l2"
        color: "theme.colors.text.body"
        space_before_pt: "theme.bullets.level_2.space_before_pt"
      l3:
        marker: "theme.bullets.level_3.marker"
        indent_cm: "theme.bullets.level_3.indent_cm"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.bullet_l3"
        color: "theme.colors.text.body"
        space_before_pt: "theme.bullets.level_3.space_before_pt"


  # ---------------------------------------------------------------------------
  # C07 — text_paragraph
  # Bloc de texte libre (non structuré en bullets). Usage : executive_summary,
  # from_to description, org_chart légendes.
  # ---------------------------------------------------------------------------
  text_paragraph:
    id: C07
    category: texte
    description: "Bloc de texte libre. Titre de bloc optionnel en couleur accent."
    used_by_layouts:
      - executive_summary
      - two_cols_text
      - from_to
    fields:
      optional:
        titre_bloc:
          type: string
          max_chars: 40
          description: "Titre de bloc (Situation / Complication / Résolution…)"
          default: null
        titre_couleur:
          type: string
          description: "Couleur du titre de bloc — hex ou référence theme"
          default: "theme.colors.primary.dark_blue"
      required:
        contenu:
          type: string
          max_chars: 400
    constraints:
      max_lines: 8
    render:
      titre_font: "theme.typography.body"
      titre_size_pt: "theme.typography.sizes.heading_1"
      titre_bold: true
      body_font: "theme.typography.body"
      body_size_pt: "theme.typography.sizes.body"
      body_color: "theme.colors.text.body"
      line_spacing: "theme.typography.line_spacing.normal"


  # ---------------------------------------------------------------------------
  # C08 — quote_block
  # Citation pleine slide. Fond crème, guillemet serif décoratif, attribution.
  # ---------------------------------------------------------------------------
  quote_block:
    id: C08
    category: texte
    description: "Citation isolée. Fond crème, guillemets Cormorant bleu, attribution discrète."
    used_by_layouts:
      - key_message
    fields:
      required:
        citation:
          type: string
          max_chars: 220
          description: "Texte de la citation ou du message clé"
      optional:
        auteur:
          type: string
          max_chars: 60
          default: null
        fonction:
          type: string
          max_chars: 60
          default: null
    render:
      background: "theme.colors.backgrounds.slide_warm"
      guillemet_font: "theme.typography.display"
      guillemet_size_pt: 72
      guillemet_color: "theme.colors.primary.bright_blue"
      text_font: "theme.typography.display"
      text_size_pt: 22
      text_color: "theme.colors.primary.dark_blue"
      text_style: "normal"
      attribution_font: "theme.typography.body"
      attribution_size_pt: 10
      attribution_color: "theme.colors.text.body"
      accent_bar_left: true     # barre rose verticale à gauche du bloc


# =============================================================================
# CATÉGORIE : DONNÉES
# =============================================================================

  # ---------------------------------------------------------------------------
  # C09 — kpi_card
  # Carte KPI individuelle : header coloré + gros chiffre + label + sous-titre.
  # Instanciée N fois par kpi_grid selon le nombre d'items.
  # ---------------------------------------------------------------------------
  kpi_card:
    id: C09
    category: donnees
    description: "Carte KPI unitaire. Header couleur cycle, valeur en rose, label, sous-titre."
    used_by_layouts:
      - kpi_grid
    fields:
      required:
        titre:
          type: string
          max_chars: 30
          description: "Label de l'indicateur (header de la carte)"
        valeur:
          type: string
          max_chars: 12
          description: "Valeur affichée en gros (ex: 78%, +25M€, -30%)"
      optional:
        sous_titre:
          type: string
          max_chars: 60
          description: "Contexte de la valeur"
          default: null
        couleur:
          type: string
          description: "Couleur du header — si null, utilise theme.colors.cycle"
          default: null
    render:
      header:
        height_cm: 0.6
        color: "cycle_auto"     # tourne dans theme.colors.cycle si couleur=null
        text_font: "theme.typography.body"
        text_size_pt: "theme.typography.sizes.body_small"
        text_color: "#ffffff"
        text_bold: true
      body:
        background: "theme.colors.backgrounds.content_area"
        valeur_font: "theme.typography.display"
        valeur_size_pt: "theme.typography.sizes.kpi_value"
        valeur_color: "theme.colors.primary.rose"
        valeur_bold: true
        label_font: "theme.typography.body"
        label_size_pt: "theme.typography.sizes.body_small"
        label_color: "theme.colors.text.body"
    grid_rules:
      # render_engine calcule position/taille de chaque carte selon le total
      2: { cols: 2, rows: 1 }
      3: { cols: 3, rows: 1 }
      4: { cols: 2, rows: 2 }
      5: { cols: 3, rows: 2 }   # 5e carte centrée sur la 2e ligne
      6: { cols: 3, rows: 2 }


  # ---------------------------------------------------------------------------
  # C10 — big_stat_display
  # Chiffre unique très grand, centré. Contexte sous le chiffre.
  # ---------------------------------------------------------------------------
  big_stat_display:
    id: C10
    category: donnees
    description: "Un seul chiffre en très grand format centré. Impact maximal."
    used_by_layouts:
      - big_stat
    fields:
      required:
        valeur:
          type: string
          max_chars: 10
          description: "Chiffre à afficher (ex: 85%, 2.4Bn€, ×3)"
      optional:
        label:
          type: string
          max_chars: 80
          description: "Phrase de contexte sous le chiffre"
          default: null
        source:
          type: string
          max_chars: 60
          description: "Source de la donnée"
          default: null
    render:
      valeur_font: "theme.typography.display"
      valeur_size_pt: "theme.typography.sizes.big_stat"
      valeur_color: "theme.colors.primary.rose"
      valeur_bold: true
      valeur_align: center
      label_font: "theme.typography.body"
      label_size_pt: "theme.typography.sizes.body"
      label_color: "theme.colors.text.body"
      label_align: center
      source_size_pt: "theme.typography.sizes.body_small"
      source_color: "theme.colors.text.caption"
      vertical_center: true


  # ---------------------------------------------------------------------------
  # C11 — data_table
  # Tableau structuré : header bleu foncé, lignes alternées clair/blanc.
  # Usage : comparison_table, raci_table (en mode texte).
  # ---------------------------------------------------------------------------
  data_table:
    id: C11
    category: donnees
    description: "Tableau générique. Header dark blue, lignes alternées, bordures fines."
    used_by_layouts:
      - comparison_table
      - benchmark
    fields:
      required:
        headers:
          type: array
          min_items: 2
          max_items: 6
          item_type: string
          max_chars_each: 30
        rows:
          type: array
          min_items: 1
          max_items: 8
          item_type: array    # chaque row = liste de cellules
          max_cols: 6
          max_chars_cell: 60
      optional:
        col_widths:
          type: array
          description: "Largeurs relatives des colonnes (somme = 1.0)"
          default: null       # si null → répartition automatique égale
        highlight_col:
          type: integer
          description: "Index de colonne à surligner (ex: notre offre)"
          default: null
    constraints:
      max_cols: 6
      max_rows: 8
    render:
      header:
        background: "theme.colors.primary.dark_blue"
        text_color: "#ffffff"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.body_small"
        bold: true
        height_cm: 0.65
      rows:
        odd_background: "#ffffff"
        even_background: "theme.colors.backgrounds.content_area"
        text_color: "theme.colors.text.body"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.body_small"
        row_height_cm: 0.55
        border_color: "theme.signature.footer.border_top_color"
        border_width: 0.02
      highlight_col_background: "theme.colors.backgrounds.highlight_box"


  # ---------------------------------------------------------------------------
  # C12 — chart_placeholder
  # Zone réservée pour un graphique (bar/line/pie). render_engine génère
  # un graphique python-pptx ou insère une image si fournie.
  # ---------------------------------------------------------------------------
  chart_placeholder:
    id: C12
    category: donnees
    description: "Zone graphique. Bar chart par défaut. Accompagné d'un callout."
    used_by_layouts:
      - chart_callout
    fields:
      required:
        chart_type:
          type: string
          values: [bar, line, pie, donut]
          default: bar
        data:
          type: array
          description: "Séries de données [{label, valeur}] ou [{label, serie1, serie2}]"
          min_items: 2
          max_items: 8
      optional:
        axis_x_label:
          type: string
          default: null
        axis_y_label:
          type: string
          default: null
        couleurs:
          type: array
          description: "Couleurs des séries — si null, utilise theme.colors.cycle"
          default: null
    render:
      bar_color_default: "theme.colors.cycle"
      bar_gap_pct: 20
      axis_font_size: "theme.typography.sizes.body_small"
      axis_color: "theme.colors.text.body"
      gridlines_color: "theme.signature.footer.border_top_color"


  # ---------------------------------------------------------------------------
  # C13 — callout_box
  # Encadré d'insight (fond jaune wheat, bordure maize). Accompagne chart_placeholder.
  # ---------------------------------------------------------------------------
  callout_box:
    id: C13
    category: donnees
    description: "Boîte d'insight jaune. Titre en rose, corps en texte normal."
    used_by_layouts:
      - chart_callout
    fields:
      required:
        insight:
          type: string
          max_chars: 200
          description: "Message clé de l'insight"
      optional:
        titre_insight:
          type: string
          max_chars: 40
          default: null
    render:
      background: "theme.colors.backgrounds.highlight_box"
      border_color: "theme.colors.secondary.maize_yellow"
      border_width: "theme.shapes.callout_box.border_width"
      padding_cm: "theme.shapes.callout_box.padding_cm"
      titre_font: "theme.typography.body"
      titre_size_pt: "theme.typography.sizes.heading_2"
      titre_color: "theme.colors.primary.rose"
      titre_bold: true
      body_font: "theme.typography.body"
      body_size_pt: "theme.typography.sizes.body"
      body_color: "theme.colors.text.body"


# =============================================================================
# CATÉGORIE : VISUEL (frameworks)
# =============================================================================

  # ---------------------------------------------------------------------------
  # C14 — benchmark_bar
  # Barre horizontale graduée pour un critère/acteur. Instanciée N×M fois.
  # ---------------------------------------------------------------------------
  benchmark_bar:
    id: C14
    category: donnees
    description: "Barre horizontale pour benchmark. Étiquette critère à gauche, barres acteurs."
    used_by_layouts:
      - benchmark
    fields:
      required:
        critere:
          type: string
          max_chars: 40
        valeurs:
          type: array
          min_items: 2
          max_items: 4
          item_schema:
            acteur:
              type: string
              max_chars: 20
            score:
              type: number
              min: 0
              max: 100
      optional:
        couleurs_acteurs:
          type: array
          description: "Couleurs pour chaque acteur — si null, cycle auto"
          default: null
    constraints:
      max_criteres: 6
      max_acteurs: 4
    render:
      critere_width_cm: 4.0
      bar_height_cm: 0.35
      bar_gap_cm: 0.15
      bar_colors_default:
        - "theme.colors.primary.bright_blue"
        - "theme.colors.primary.rose"
        - "theme.colors.secondary.barley_green"
        - "theme.colors.secondary.maize_yellow"
      critere_font_size: "theme.typography.sizes.body_small"
      critere_color: "theme.colors.text.body"


  # ---------------------------------------------------------------------------
  # C15 — matrix_bubble
  # Bulle positionnée sur une matrice 2×2. Instanciée N fois.
  # ---------------------------------------------------------------------------
  matrix_bubble:
    id: C15
    category: visuel
    description: "Bulle sur matrice. Position (x,y) normalisée [0-100]. Taille optionnelle."
    used_by_layouts:
      - matrix_2x2
    fields:
      required:
        label:
          type: string
          max_chars: 25
        x:
          type: number
          min: 0
          max: 100
          description: "Position axe X normalisée (0 = low, 100 = high)"
        y:
          type: number
          min: 0
          max: 100
          description: "Position axe Y normalisée (0 = low, 100 = high)"
      optional:
        taille:
          type: number
          min: 1
          max: 5
          default: 2
          description: "Taille relative de la bulle (1=petite, 5=grande)"
        couleur:
          type: string
          default: null
    constraints:
      max_bubbles: 8
    render:
      bubble_min_diameter_cm: 0.5
      bubble_max_diameter_cm: 1.4
      bubble_opacity: 0.75
      label_font_size: "theme.typography.sizes.body_small"
      label_color: "theme.colors.primary.dark_blue"
      axis_color: "theme.colors.primary.dark_blue"
      axis_stroke: 0.06
      quadrant_line_color: "theme.colors.text.body"
      quadrant_line_dash: [0.15, 0.1]


  # ---------------------------------------------------------------------------
  # C16 — pyramid_level
  # Niveau de pyramide. Instancié N fois du haut vers le bas.
  # ---------------------------------------------------------------------------
  pyramid_level:
    id: C16
    category: visuel
    description: "Un niveau de pyramide. Largeur proportionnelle au rang. Callout latéral optionnel."
    used_by_layouts:
      - pyramid
    fields:
      required:
        label:
          type: string
          max_chars: 30
          description: "Texte inscrit dans le niveau"
        rang:
          type: integer
          min: 1
          description: "1 = sommet (le plus petit), N = base (le plus large)"
      optional:
        description:
          type: string
          max_chars: 80
          description: "Callout latéral explicatif"
          default: null
        couleur:
          type: string
          default: null
    constraints:
      min_levels: 3
      max_levels: 5
    render:
      colors_default:
        - "theme.colors.primary.bright_blue"    # rang 1 — sommet
        - "theme.colors.primary.dark_blue"      # rang 2
        - "theme.colors.secondary.cool_blue"    # rang 3
        - "theme.colors.secondary.maize_yellow" # rang 4
        - "theme.colors.bright_warm"            # rang 5 — base
      label_font: "theme.typography.body"
      label_size_pt: "theme.typography.sizes.body_small"
      label_bold: true
      callout_line_color: "theme.colors.text.body"
      callout_font_size: "theme.typography.sizes.body_small"
      callout_color: "theme.colors.text.body"
      level_height_cm: 0.8


  # ---------------------------------------------------------------------------
  # C17 — circular_segment
  # Segment de diagramme circulaire + entrée de légende. Instancié N fois.
  # ---------------------------------------------------------------------------
  circular_segment:
    id: C17
    category: visuel
    description: "Segment du diagramme circulaire. Logo PR en médaillon central."
    used_by_layouts:
      - circular_diagram
    fields:
      required:
        label:
          type: string
          max_chars: 30
        description:
          type: string
          max_chars: 80
      optional:
        couleur:
          type: string
          default: null
        poids:
          type: number
          min: 1
          max: 10
          default: 1
          description: "Poids relatif du segment (1 = égal aux autres)"
    constraints:
      min_segments: 3
      max_segments: 6
    render:
      colors_default:
        - "theme.colors.primary.bright_blue"
        - "theme.colors.secondary.maize_yellow"
        - "theme.colors.primary.dark_blue"
        - "theme.colors.primary.bright_warm"
        - "theme.colors.secondary.cool_blue"
        - "theme.colors.secondary.barley_green"
      center_logo: true
      center_logo_file: "theme.assets.logo_sun"
      center_circle_color: "#ffffff"
      center_circle_diameter_cm: 1.5
      donut_outer_cm: 3.5
      legend_font_size: "theme.typography.sizes.body_small"
      legend_dot_diameter_cm: 0.3
      legend_position: right


  # ---------------------------------------------------------------------------
  # C18 — from_to_pair
  # Une paire FROM → TO. Instanciée N fois dans le layout from_to.
  # ---------------------------------------------------------------------------
  from_to_pair:
    id: C18
    category: visuel
    description: "Une ligne de transformation FROM (atténué) → TO (affirmé). Flèche cuivre."
    used_by_layouts:
      - from_to
    fields:
      required:
        from:
          type: string
          max_chars: 60
          description: "État actuel / situation de départ"
        to:
          type: string
          max_chars: 60
          description: "État cible / situation d'arrivée"
    constraints:
      min_pairs: 2
      max_pairs: 5
    render:
      from_font: "theme.typography.body"
      from_size_pt: "theme.typography.sizes.body"
      from_color: "theme.colors.semantic.from_color"
      from_opacity: 0.6
      arrow_char: "›"
      arrow_color: "theme.colors.semantic.arrow_color"
      arrow_size_pt: 14
      to_font: "theme.typography.body"
      to_size_pt: "theme.typography.sizes.body"
      to_color: "theme.colors.semantic.to_color"
      to_bold: true
      row_height_cm: 0.55
      separator_color: "theme.signature.footer.border_top_color"


# =============================================================================
# CATÉGORIE : PROCESS
# =============================================================================

  # ---------------------------------------------------------------------------
  # C19 — step_item
  # Étape numérotée verticale. Badge carré bleu + titre + description.
  # ---------------------------------------------------------------------------
  step_item:
    id: C19
    category: process
    description: "Étape numérotée. Badge carré dark blue, titre bold, description corps."
    used_by_layouts:
      - numbered_steps
    fields:
      required:
        numero:
          type: integer
          min: 1
          max: 6
        titre:
          type: string
          max_chars: 50
      optional:
        description:
          type: string
          max_chars: 120
          default: null
    constraints:
      min_steps: 2
      max_steps: 6
    render:
      badge:
        size_cm: "theme.shapes.step_badge.size_cm"
        fill: "theme.shapes.step_badge.fill"
        text_color: "theme.shapes.step_badge.text_color"
        font: "theme.shapes.step_badge.font"
        size_pt: "theme.shapes.step_badge.font_size_pt"
      titre_font: "theme.typography.body"
      titre_size_pt: "theme.typography.sizes.heading_2"
      titre_color: "theme.colors.primary.dark_blue"
      titre_bold: true
      desc_font: "theme.typography.body"
      desc_size_pt: "theme.typography.sizes.body"
      desc_color: "theme.colors.text.body"
      row_height_cm: 0.75
      separator: true
      separator_color: "theme.signature.footer.border_top_color"


  # ---------------------------------------------------------------------------
  # C20 — chevron_step
  # Chevron horizontal de process. 2 à 5 chevrons + triangle terminal.
  # ---------------------------------------------------------------------------
  chevron_step:
    id: C20
    category: process
    description: "Chevron process. Actif = dark blue / rose. Inactif = hague grey. Dernier = triangle."
    used_by_layouts:
      - process_arrow
    fields:
      required:
        label:
          type: string
          max_chars: 20
        rang:
          type: integer
          min: 1
          description: "Position dans la séquence"
      optional:
        duree:
          type: string
          max_chars: 15
          default: null
        actif:
          type: boolean
          default: false
          description: "Phase courante — mise en avant visuelle"
        bullets:
          type: array
          max_items: 4
          item_type: string
          max_chars_each: 60
          default: null
        terminal:
          type: boolean
          default: false
          description: "Si true → forme triangle fermé (dernier chevron)"
    constraints:
      min_steps: 2
      max_steps: 5
    render:
      fill_inactive: "theme.shapes.chevron.fill_default"
      fill_active: "theme.shapes.chevron.fill_active"
      text_inactive: "theme.shapes.chevron.text_default"
      text_active: "theme.shapes.chevron.text_active"
      height_cm: "theme.shapes.chevron.height_cm"
      tip_width_cm: "theme.shapes.chevron.tip_width_cm"
      label_font: "theme.typography.display"
      label_size_pt: 14
      label_bold: true
      duree_size_pt: "theme.typography.sizes.body_small"
      bullet_size_pt: "theme.typography.sizes.body_small"
      bullet_color: "theme.colors.text.body"


  # ---------------------------------------------------------------------------
  # C21 — gantt_bar
  # Barre de tâche Gantt. Position et largeur calculées depuis start/end.
  # ---------------------------------------------------------------------------
  gantt_bar:
    id: C21
    category: process
    description: "Barre de tâche Gantt. Couleur par workstream. Décalage double-ligne possible."
    used_by_layouts:
      - gantt_timeline
    fields:
      required:
        start:
          type: string
          format: "YYYY-MM"
          description: "Mois de début (ex: 2026-05)"
        end:
          type: string
          format: "YYYY-MM"
          description: "Mois de fin (ex: 2026-08)"
      optional:
        label:
          type: string
          max_chars: 30
          default: null
        couleur:
          type: string
          default: null
          description: "Couleur de la barre — si null, couleur du workstream parent"
        row:
          type: integer
          values: [1, 2]
          default: 1
          description: "Ligne 1 (principale) ou 2 (décalée) dans le workstream"
    render:
      bar_height_cm: 0.28
      bar_radius: 0
      row_gap_cm: 0.08
      label_inside: false       # texte affiché sous la barre si trop court
      label_font_size: "theme.typography.sizes.body_small"


  # ---------------------------------------------------------------------------
  # C22 — timeline_milestone
  # Jalon sur une timeline horizontale (yearly ou phases).
  # ---------------------------------------------------------------------------
  timeline_milestone:
    id: C22
    category: process
    description: "Jalon sur axe temporel. Cercle sur l'axe, année au-dessus, description dessous."
    used_by_layouts:
      - yearly_timeline
    fields:
      required:
        annee:
          type: string
          max_chars: 10
          description: "Label de date (ex: 2025, Q1 2026)"
        label:
          type: string
          max_chars: 40
      optional:
        description:
          type: string
          max_chars: 80
          default: null
        actif:
          type: boolean
          default: false
          description: "Jalon courant — cercle en rose"
    constraints:
      min_milestones: 3
      max_milestones: 6
    render:
      circle_diameter_cm: 0.28
      circle_fill_default: "theme.colors.primary.dark_blue"
      circle_fill_active: "theme.colors.primary.rose"
      axis_color: "theme.colors.text.body"
      axis_stroke_cm: 0.04
      arrow_tip: true           # flèche → à droite de l'axe
      annee_font: "theme.typography.display"
      annee_size_pt: 13
      annee_color_default: "theme.colors.primary.bright_blue"
      annee_color_active: "theme.colors.primary.rose"
      annee_bold: true
      label_font: "theme.typography.body"
      label_size_pt: "theme.typography.sizes.body_small"
      label_color: "theme.colors.primary.dark_blue"
      desc_font: "theme.typography.body"
      desc_size_pt: "theme.typography.sizes.body_small"
      desc_color: "theme.colors.text.body"


# =============================================================================
# CATÉGORIE : ACTEURS
# =============================================================================

  # ---------------------------------------------------------------------------
  # C23 — org_node
  # Nœud d'organigramme. Couleur selon niveau hiérarchique.
  # ---------------------------------------------------------------------------
  org_node:
    id: C23
    category: acteurs
    description: "Box d'organigramme. Couleur par niveau. Connexions orthogonales auto."
    used_by_layouts:
      - org_chart
    fields:
      required:
        label:
          type: string
          max_chars: 35
        niveau:
          type: integer
          min: 1
          max: 4
          description: "1 = racine, 2 = managers, 3 = équipe, 4 = sous-équipe"
      optional:
        sous_label:
          type: string
          max_chars: 30
          default: null
    constraints:
      max_total_nodes: 20
    render:
      colors_by_level:
        1: "theme.colors.primary.dark_blue"       # racine
        2: "theme.colors.secondary.barley_green"  # niveau 2
        3: "theme.colors.secondary.cool_blue"     # niveau 3
        4: "theme.colors.primary.bright_warm"     # niveau 4
      text_colors_by_level:
        1: "#ffffff"
        2: "#ffffff"
        3: "theme.colors.primary.dark_blue"
        4: "theme.colors.primary.dark_blue"
      box_height_cm: 0.65
      box_min_width_cm: 2.5
      box_radius: 0
      font: "theme.typography.body"
      size_pt: "theme.typography.sizes.body_small"
      bold: true
      connector_color: "theme.colors.text.body"
      connector_width_cm: 0.03
      connector_style: orthogonal


  # ---------------------------------------------------------------------------
  # C24 — raci_cell
  # Cellule de matrice RACI. Pastille colorée selon le rôle (R/A/C/I).
  # ---------------------------------------------------------------------------
  raci_cell:
    id: C24
    category: acteurs
    description: "Cellule RACI. Pastille circulaire : R/A en vert, C/I en bleu clair."
    used_by_layouts:
      - raci_table
    fields:
      required:
        role:
          type: string
          values: ["R", "A", "C", "I", ""]
          description: "R=Responsible, A=Accountable, C=Consulted, I=Informed, ''=vide"
    render:
      R:
        fill: "theme.colors.semantic.responsible"
        opacity: 1.0
        text_color: "#ffffff"
      A:
        fill: "theme.colors.semantic.accountable"
        opacity: 1.0
        text_color: "#ffffff"
      C:
        fill: "theme.colors.semantic.consulted"
        opacity: 1.0
        text_color: "theme.colors.primary.dark_blue"
      I:
        fill: "theme.colors.semantic.informed"
        opacity: 0.45
        text_color: "theme.colors.primary.dark_blue"
      empty:
        fill: "transparent"
        text_color: "transparent"
      circle_diameter_cm: 0.35
      font: "theme.typography.body"
      size_pt: "theme.typography.sizes.body_small"
      bold: true
      row_header:
        background: "theme.colors.backgrounds.content_area"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.body_small"
        color: "theme.colors.text.body"
      col_header:
        background: "theme.colors.primary.dark_blue"
        text_color: "#ffffff"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.body_small"
        bold: true
        height_cm: 0.65
      row_separator_color: "theme.signature.footer.border_top_color"


  # ---------------------------------------------------------------------------
  # C25 — decision_node
  # Nœud d'arbre de décision. Question (rect arrondi), options (rect clair).
  # Connexions avec labels YES/NO.
  # ---------------------------------------------------------------------------
  decision_node:
    id: C25
    category: acteurs
    description: "Nœud d'arbre de décision. Question centrale, branches YES/NO, options terminales."
    used_by_layouts:
      - decision_tree
    fields:
      required:
        type:
          type: string
          values: [question, branch, option]
          description: "question = nœud racine, branch = nœud intermédiaire, option = feuille"
        label:
          type: string
          max_chars: 80
      optional:
        branch_label:
          type: string
          values: ["YES", "NO", null]
          default: null
          description: "Label sur le connecteur entrant"
        actif:
          type: boolean
          default: false
          description: "Branche recommandée — mise en avant en rose"
    render:
      question:
        fill: "theme.colors.backgrounds.content_area"
        border_color: "theme.colors.text.body"
        border_width: 0.03
        radius: 0.15
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.body_small"
        color: "theme.colors.primary.dark_blue"
      branch:
        fill: "theme.colors.primary.bright_warm"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.body_small"
        color: "theme.colors.primary.dark_blue"
        radius: 0.15
      branch_actif:
        fill: "theme.colors.primary.rose"
        opacity: 0.7
      option:
        fill: "theme.colors.backgrounds.content_area"
        font: "theme.typography.body"
        size_pt: "theme.typography.sizes.body_small"
        color: "theme.colors.primary.dark_blue"
        radius: 0.15
      connector_color: "theme.colors.text.body"
      connector_width: 0.03
      branch_label_font_size: "theme.typography.sizes.body_small"
      branch_label_bold: true
      branch_label_color: "theme.colors.text.body"


  # ---------------------------------------------------------------------------
  # C26 — recommendation_sidebar
  # Panneau gauche jaune de recommendation_card.
  # Numéro circulaire + titre vertical + résumé + flèche + CTA.
  # ---------------------------------------------------------------------------
  recommendation_sidebar:
    id: C26
    category: acteurs
    description: "Sidebar jaune de carte recommandation. Numéro, titre, résumé, CTA."
    used_by_layouts:
      - recommendation_card
    fields:
      required:
        numero:
          type: integer
          min: 1
          max: 9
        titre:
          type: string
          max_chars: 30
          description: "Intitulé court de la recommandation"
      optional:
        resume:
          type: string
          max_chars: 120
          description: "Résumé en 1-2 phrases"
          default: null
        cta:
          type: string
          max_chars: 30
          description: "Call to action — texte du bouton bas"
          default: null
    render:
      background: "theme.shapes.recommendation_sidebar.fill"
      width_cm: "theme.shapes.recommendation_sidebar.width_cm"
      numero_circle:
        fill: "theme.colors.primary.dark_blue"
        diameter_cm: 0.9
        text_color: "#ffffff"
        font: "theme.typography.display"
        size_pt: 18
      titre_font: "theme.typography.display"
      titre_size_pt: "theme.typography.sizes.heading_1"
      titre_color: "theme.colors.primary.dark_blue"
      titre_bold: true
      resume_font: "theme.typography.body"
      resume_size_pt: "theme.typography.sizes.body_small"
      resume_color: "theme.colors.text.body"
      arrow_color: "theme.colors.primary.dark_blue"
      cta_fill: "theme.colors.primary.dark_blue"
      cta_text_color: "#ffffff"
      cta_font_size: "theme.typography.sizes.body_small"
      cta_bold: true


# =============================================================================
# INDEX DE RÉFÉRENCE CROISÉE
# layouts → composants utilisés
# =============================================================================

layout_to_components:
  cover_split:          [C01, C04]              # pas de C02/C03 — traitement spécial cover
  section_divider:      [C01, C04]
  agenda:               [C01, C02, C03, C04, C05]
  content_marker:       [C01, C04]
  end_slide:            [C01, C04]
  default_bullets:      [C01, C02, C03, C04, C05, C06]
  two_cols_text:        [C01, C02, C03, C04, C05, C06, C07]
  key_message:          [C01, C02, C03, C04, C08]
  executive_summary:    [C01, C02, C03, C04, C05, C07]
  kpi_grid:             [C01, C02, C03, C04, C05, C09]
  big_stat:             [C01, C02, C03, C04, C05, C10]
  comparison_table:     [C01, C02, C03, C04, C05, C11]
  chart_callout:        [C01, C02, C03, C04, C05, C12, C13]
  benchmark:            [C01, C02, C03, C04, C05, C14]
  matrix_2x2:           [C01, C02, C03, C04, C05, C15]
  pyramid:              [C01, C02, C03, C04, C05, C16]
  circular_diagram:     [C01, C02, C03, C04, C05, C17]
  from_to:              [C01, C02, C03, C04, C05, C07, C18]
  boxes_grid:           [C01, C02, C03, C04, C05, C11]
  numbered_steps:       [C01, C02, C03, C04, C05, C19]
  process_arrow:        [C01, C02, C03, C04, C05, C20]
  gantt_timeline:       [C01, C02, C03, C04, C05, C21]
  yearly_timeline:      [C01, C02, C03, C04, C05, C22]
  phases_timeline:      [C01, C02, C03, C04, C05, C22]
  org_chart:            [C01, C02, C03, C04, C05, C23]
  raci_table:           [C01, C02, C03, C04, C05, C24]
  decision_tree:        [C01, C02, C03, C04, C05, C25]
  recommendation_card:  [C01, C02, C04, C06, C26]