1267 lines
43 KiB
YAML
1267 lines
43 KiB
YAML
# =============================================================================
|
||
# 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]
|