2026-07-09 22:03:15 +02:00
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1.0" >
< title > Sliding Design System v2 — Pernod Ricard< / title >
2026-07-16 19:31:14 +02:00
< link rel = "icon" type = "image/svg+xml" href = "/static/favicon.svg" >
2026-07-09 22:03:15 +02:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link href = "https://fonts.googleapis.com/css2?family=Cambria&family=Inter:wght@300;400;500;600&display=swap" rel = "stylesheet" >
< style >
: root { --navy : #061033 ; --navy2 : #10204D ; --coral : #F4795B ; --glacier : #8FA9D0 ; --slate : #46505A ; --card : #F4F1EC ; --bg : #faf8f4 ; --bo : #e8e2d6 ; --t1 : #1a1a1a ; --t2 : #6b6b6b ; --t3 : #9a9a9a }
* { margin : 0 ; padding : 0 ; box-sizing : border-box }
body { font-family : Inter , sans-serif ; background : var ( - - bg ) ; color : var ( - - t1 ) ; font-weight : 300 ; -webkit- font-smoothing : antialiased }
header { background : var ( - - navy ) ; color : #fff ; padding : 80 px 60 px 60 px ; position : relative ; overflow : hidden }
header :: after { content : "" ; position : absolute ; right : -80 px ; top : -80 px ; width : 340 px ; height : 340 px ; border-radius : 50 % ; background : var ( - - navy2 ) ; opacity : .5 }
header :: before { content : "" ; position : absolute ; right : 120 px ; bottom : -60 px ; width : 160 px ; height : 160 px ; border-radius : 50 % ; background : var ( - - coral ) ; opacity : .85 }
. eyebrow { font-size : 11 px ; letter-spacing : .3 em ; text-transform : uppercase ; color : var ( - - glacier ) ; margin-bottom : 24 px ; font-weight : 500 ; position : relative ; z-index : 2 }
h1 { font-family : Cambria , serif ; font-size : 60 px ; font-weight : 700 ; line-height : 1.05 ; letter-spacing : -.02 em ; margin-bottom : 24 px ; position : relative ; z-index : 2 }
. lead { font-size : 17 px ; line-height : 1.6 ; color : rgba ( 255 , 255 , 255 , .75 ) ; max-width : 680 px ; position : relative ; z-index : 2 }
. hmeta { display : flex ; gap : 60 px ; margin-top : 50 px ; padding-top : 30 px ; border-top : 1 px solid rgba ( 255 , 255 , 255 , .15 ) ; position : relative ; z-index : 2 }
. mi { display : flex ; flex-direction : column ; gap : 4 px }
. ml { font-size : 10 px ; letter-spacing : .2 em ; text-transform : uppercase ; color : var ( - - glacier ) }
. mv { font-family : Cambria , serif ; font-size : 28 px ; font-weight : 700 }
. charte { padding : 70 px 60 px ; background : #fff ; border-bottom : 1 px solid var ( - - bo ) }
. se { font-size : 11 px ; letter-spacing : .3 em ; text-transform : uppercase ; color : var ( - - coral ) ; font-weight : 600 ; margin-bottom : 14 px }
. st { font-family : Cambria , serif ; font-size : 40 px ; font-weight : 700 ; line-height : 1.1 ; color : var ( - - navy ) ; margin-bottom : 30 px }
. cr { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 140 px , 1 fr ) ) ; gap : 12 px ; max-width : 900 px }
. cc { border-radius : 8 px ; overflow : hidden ; border : 1 px solid var ( - - bo ) }
. cs { height : 60 px }
. cm { padding : 8 px 12 px ; background : #fff }
. cn { font-size : 12 px ; font-weight : 500 }
. chx { font-size : 10 px ; color : var ( - - t3 ) ; font-family : monospace ; margin-top : 2 px }
. family { padding : 60 px }
. family : nth-child ( even ) { background : #fff }
. fh { margin-bottom : 36 px }
. lg { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 360 px , 1 fr ) ) ; gap : 24 px }
. lc { background : #fff ; border : 1 px solid var ( - - bo ) ; border-radius : 10 px ; padding : 24 px ; transition : all .25 s ; display : flex ; flex-direction : column ; box-shadow : 0 1 px 3 px rgba ( 6 , 16 , 51 , .04 ) }
. lc : hover { transform : translateY ( -3 px ) ; box-shadow : 0 12 px 36 px rgba ( 6 , 16 , 51 , .10 ) ; border-color : var ( - - coral ) }
2026-07-16 19:31:14 +02:00
. wf-thumb { margin : 0 0 14 px ; border : 1 px solid #ECE9E2 ; border-radius : 8 px ; overflow : hidden ; background : #fff }
. wf-thumb svg { display : block ; width : 100 % ; height : auto }
2026-07-09 22:03:15 +02:00
. lc-head { display : flex ; justify-content : space-between ; align-items : center ; margin-bottom : 14 px }
. lcode { background : var ( - - navy ) ; color : #fff ; font-size : 10 px ; font-weight : 600 ; padding : 3 px 9 px ; border-radius : 4 px ; letter-spacing : .1 em ; font-family : monospace }
. lmode { font-size : 10 px ; font-weight : 600 ; padding : 3 px 10 px ; border-radius : 20 px ; letter-spacing : .05 em }
. lc h3 { font-family : Cambria , serif ; font-size : 23 px ; font-weight : 700 ; color : var ( - - navy ) ; margin-bottom : 10 px }
. hint { font-size : 13.5 px ; line-height : 1.55 ; color : var ( - - t2 ) ; margin-bottom : 18 px ; flex : 1 }
. fields { border-top : 1 px solid var ( - - bo ) ; padding-top : 14 px ; display : flex ; flex-direction : column ; gap : 8 px }
. frow { display : flex ; gap : 10 px ; align-items : baseline }
. flab { font-size : 9 px ; letter-spacing : .15 em ; text-transform : uppercase ; color : var ( - - t3 ) ; min-width : 48 px ; font-weight : 600 }
. frow code { font-size : 11.5 px ; font-family : monospace ; color : var ( - - slate ) ; line-height : 1.4 }
. frow code . req { color : var ( - - coral ) }
footer { padding : 50 px 60 px ; background : var ( - - navy ) ; color : rgba ( 255 , 255 , 255 , .6 ) ; font-size : 13 px ; text-align : center }
@ media ( max-width : 640px ) { header , . charte , . family { padding : 40 px 24 px } h1 { font-size : 40 px } . lg { grid-template-columns : 1 fr } }
< / style >
< / head >
< body >
< header >
< div class = "eyebrow" > Pernod Ricard · Data Governance< / div >
< h1 > Sliding Design System v2< / h1 >
< p class = "lead" > Catalogue des layouts disponibles dans le pipeline de génération automatique de présentations. Design system « PR Editorial » : navy dominant, accent corail, grille fixe et centrage vertical systématique.< / p >
< div class = "hmeta" >
< div class = "mi" > < span class = "ml" > Layouts< / span > < span class = "mv" > 31< / span > < / div >
< div class = "mi" > < span class = "ml" > Familles< / span > < span class = "mv" > 18< / span > < / div >
< div class = "mi" > < span class = "ml" > Version< / span > < span class = "mv" > 2.0< / span > < / div >
< / div >
< / header >
< section class = "charte" >
< div class = "se" > Palette< / div >
< h2 class = "st" > Charte chromatique< / h2 >
< div class = "cr" > < div class = "cc" > < div class = "cs" style = "background:#061033" > < / div > < div class = "cm" > < div class = "cn" > Navy< / div > < div class = "chx" > #061033< / div > < / div > < / div > < div class = "cc" > < div class = "cs" style = "background:#10204D" > < / div > < div class = "cm" > < div class = "cn" > Navy light< / div > < div class = "chx" > #10204D< / div > < / div > < / div > < div class = "cc" > < div class = "cs" style = "background:#F4795B" > < / div > < div class = "cm" > < div class = "cn" > Coral< / div > < div class = "chx" > #F4795B< / div > < / div > < / div > < div class = "cc" > < div class = "cs" style = "background:#8FA9D0" > < / div > < div class = "cm" > < div class = "cn" > Glacier< / div > < div class = "chx" > #8FA9D0< / div > < / div > < / div > < div class = "cc" > < div class = "cs" style = "background:#46505A" > < / div > < div class = "cm" > < div class = "cn" > Slate< / div > < div class = "chx" > #46505A< / div > < / div > < / div > < div class = "cc" > < div class = "cs" style = "background:#F4F1EC" > < / div > < div class = "cm" > < div class = "cn" > Card< / div > < div class = "chx" > #F4F1EC< / div > < / div > < / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Ouverture< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L01< / span >
< span class = "lmode" style = "background:#061033;color:#ffffff" > Sombre< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#061033" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < circle cx = "300" cy = "20" r = "46" fill = "#10204D" opacity = "1.0" / > < circle cx = "288" cy = "150" r = "30" fill = "#F4795B" opacity = "0.9" / > < circle cx = "250" cy = "150" r = "14" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "20" y = "74" width = "40" height = "4" rx = "1" fill = "#F4795B" opacity = "1.0" / > < rect x = "20" y = "88" width = "150" height = "16" rx = "2" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "20" y = "120" width = "96" height = "8" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > cover_split< / h3 >
< p class = "hint" > Slide de couverture. titre = titre de la présentation, sous_titre = tagline en une phrase.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, sous_titre< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Synthèse< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L05< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "160" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "54" width = "96" height = "108" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "36" cy = "74" r = "9" fill = "#061033" opacity = "1.0" / > < rect x = "32" y = "96" width = "72" height = "7" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "32" y = "112" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "124" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "136" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "112" y = "54" width = "96" height = "108" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "128" cy = "74" r = "9" fill = "#061033" opacity = "1.0" / > < rect x = "124" y = "96" width = "72" height = "7" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "124" y = "112" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "124" y = "124" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "124" y = "136" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "204" y = "54" width = "96" height = "108" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "220" cy = "74" r = "9" fill = "#061033" opacity = "1.0" / > < rect x = "216" y = "96" width = "72" height = "7" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "216" y = "112" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "216" y = "124" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "216" y = "136" width = "72" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "54" width = "96" height = "4" rx = "2" fill = "#F4795B" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > executive_summary< / h3 >
< p class = "hint" > Synthèse SCR. Titre = So What. 3 cartes pleine largeur : situation, complication, resolution (1-2 phrases chacune).< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, situation, complication, resolution< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, situation, complication, resolution< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 2 layouts< / div >
< h2 class = "st" > Structure< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L03< / span >
< span class = "lmode" style = "background:#061033;color:#ffffff" > Sombre< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#061033" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < circle cx = "300" cy = "150" r = "40" fill = "#10204D" opacity = "1.0" / > < rect x = "20" y = "78" width = "20" height = "20" rx = "2" fill = "#F4795B" opacity = "1.0" / > < rect x = "20" y = "104" width = "130" height = "14" rx = "2" fill = "#FFFFFF" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > section_divider< / h3 >
< p class = "hint" > Transition de section. titre = nom de la section. Le numéro est incrémenté automatiquement par le moteur.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L40< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "140" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < circle cx = "32" cy = "52" r = "10" fill = "#061033" opacity = "1.0" / > < rect x = "50" y = "47" width = "180" height = "9" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "230" y = "47" width = "60" height = "9" rx = "3" fill = "#C9CDD3" opacity = "0.6" / > < circle cx = "32" cy = "84" r = "10" fill = "#F4795B" opacity = "1.0" / > < rect x = "50" y = "79" width = "180" height = "9" rx = "3" fill = "#061033" opacity = "1.0" / > < rect x = "230" y = "79" width = "60" height = "9" rx = "3" fill = "#C9CDD3" opacity = "0.6" / > < circle cx = "32" cy = "116" r = "10" fill = "#061033" opacity = "1.0" / > < rect x = "50" y = "111" width = "180" height = "9" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "230" y = "111" width = "60" height = "9" rx = "3" fill = "#C9CDD3" opacity = "0.6" / > < circle cx = "32" cy = "148" r = "10" fill = "#061033" opacity = "1.0" / > < rect x = "50" y = "143" width = "180" height = "9" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "230" y = "143" width = "60" height = "9" rx = "3" fill = "#C9CDD3" opacity = "0.6" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > agenda< / h3 >
< p class = "hint" > Sommaire du deck : à placer en slide 2 pour toute présentation de plus de 15 minutes. sections = liste de {label, numero?, duree?, actif?}, 2 à 8 entrées. actif: true met la section en corail (utile pour les rappels d'agenda en cours de deck). duree (ex "10 min") s'affiche à droite en discret.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, sections< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, sections< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 6 layouts< / div >
< h2 class = "st" > Données< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L10< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "90" y = "66" width = "140" height = "40" rx = "4" fill = "#F4795B" opacity = "1.0" / > < rect x = "110" y = "116" width = "100" height = "8" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "134" y = "132" width = "52" height = "5" rx = "2" fill = "#C9CDD3" opacity = "0.6" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > big_stat< / h3 >
< p class = "hint" > Un chiffre héro plein écran. valeur = le chiffre (ex "78%"), description = ce qu'il signifie, source = référence.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, valeur, description, source< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, valeur< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L09< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "56" width = "96" height = "100" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "32" y = "74" width = "50" height = "22" rx = "3" fill = "#F4795B" opacity = "1.0" / > < rect x = "32" y = "104" width = "70" height = "6" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "32" y = "118" width = "56" height = "6" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "112" y = "56" width = "96" height = "100" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "124" y = "74" width = "50" height = "22" rx = "3" fill = "#061033" opacity = "1.0" / > < rect x = "124" y = "104" width = "70" height = "6" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "124" y = "118" width = "56" height = "6" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "204" y = "56" width = "96" height = "100" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "216" y = "74" width = "50" height = "22" rx = "3" fill = "#061033" opacity = "1.0" / > < rect x = "216" y = "104" width = "70" height = "6" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "216" y = "118" width = "56" height = "6" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > kpi_grid< / h3 >
< p class = "hint" > 2 à 6 cartes KPI. items = [{label, valeur, description}]. valeur en grand corail, label en en-tête, description en source.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, items< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, items< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L42< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "40" y = "110" width = "32" height = "40" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "92" y = "80" width = "32" height = "70" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "144" y = "95" width = "32" height = "55" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "196" y = "60" width = "32" height = "90" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "248" y = "88" width = "32" height = "62" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "30" y = "150" width = "270" height = "2" rx = "0" fill = "#46505A" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > bar_chart< / h3 >
< p class = "hint" > Comparaison de valeurs par catégories — graphique NATIF éditable. Max 8 catégories × < / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, categories, series, unite, source, horizontal< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, categories, series< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L43< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "30" y = "150" width = "270" height = "2" rx = "0" fill = "#46505A" opacity = "1.0" / > < polyline points = "40,130 100,96 160,110 220,70 288,84" fill = "none" stroke = "#061033" stroke-width = "2.5" / > < circle cx = "288" cy = "84" r = "5" fill = "#F4795B" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > line_chart< / h3 >
< p class = "hint" > Évolution temporelle — graphique NATIF éditable. Max 12 points × < / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, points_x, series, unite, source< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, points_x, series< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L44< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "110" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < circle cx = "100" cy = "106" r = "40" fill = "none" stroke = "#061033" stroke-width = "18" / > < path d = "M100 66 A40 40 0 0 1 138 118" fill = "none" stroke = "#F4795B" stroke-width = "18" / > < circle cx = "210" cy = "84" r = "6" fill = "#061033" opacity = "1.0" / > < rect x = "224" y = "80" width = "76" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "210" cy = "108" r = "6" fill = "#F4795B" opacity = "1.0" / > < rect x = "224" y = "104" width = "76" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "210" cy = "132" r = "6" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "224" y = "128" width = "76" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > donut_split< / h3 >
< p class = "hint" > Répartition d'un tout : anneau à gauche + légende détaillée à droite. 2 à 6 segments = {label, valeur} (nombres sans guillemets). valeur_centrale (optionnelle) s'affiche au centre de l'anneau (ex : total « 120 M€ »). Couleurs = cycle PR imposé.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, segments, valeur_centrale, source< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, segments< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L45< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "140" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "30" y = "150" width = "270" height = "2" rx = "0" fill = "#46505A" opacity = "1.0" / > < rect x = "40" y = "80" width = "34" height = "70" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "94" y = "80" width = "34" height = "34" rx = "2" fill = "#F4795B" opacity = "1.0" / > < rect x = "148" y = "60" width = "34" height = "40" rx = "2" fill = "#F4795B" opacity = "1.0" / > < rect x = "202" y = "44" width = "34" height = "30" rx = "2" fill = "#F4795B" opacity = "1.0" / > < rect x = "256" y = "60" width = "34" height = "90" rx = "2" fill = "#061033" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > waterfall< / h3 >
< p class = "hint" > Pont de valeur (waterfall) : expliquer un écart entre deux montants par des variations successives. depart et arrivee = {label, valeur} ; marches = liste de {label, delta} SIGNÉ (positif ou négatif, max 8). Le moteur calcule les cumuls — ne jamais fournir de cumul. Idéal pour : évolution de budget, pont d'effectifs, décomposition d'un résultat.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, depart, marches, arrivee, unite, source< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, depart, marches, arrivee< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 3 layouts< / div >
< h2 class = "st" > Comparaison< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L07< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "170" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "44" width = "132" height = "120" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "20" y = "44" width = "132" height = "26" rx = "6" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "58" width = "132" height = "12" rx = "0" fill = "#061033" opacity = "1.0" / > < rect x = "32" y = "52" width = "70" height = "10" rx = "3" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "32" y = "84" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "99" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "114" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "129" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "168" y = "44" width = "132" height = "120" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "168" y = "44" width = "132" height = "26" rx = "6" fill = "#F4795B" opacity = "1.0" / > < rect x = "168" y = "58" width = "132" height = "12" rx = "0" fill = "#F4795B" opacity = "1.0" / > < rect x = "180" y = "52" width = "70" height = "10" rx = "3" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "180" y = "84" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "180" y = "99" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "180" y = "114" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "180" y = "129" width = "100" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > two_cols_text< / h3 >
< p class = "hint" > Deux colonnes en cartes avec en-tête coloré. left/right = {titre, bullets[]}. Gauche = navy, droite = corail.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, left, right< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, left, right< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L34< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "150" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "48" width = "280" height = "20" rx = "4" fill = "#061033" opacity = "1.0" / > < rect x = "24" y = "52" width = "84" height = "12" rx = "2" fill = "#FFFFFF" opacity = "0.5" / > < rect x = "116" y = "52" width = "84" height = "12" rx = "2" fill = "#FFFFFF" opacity = "0.5" / > < rect x = "208" y = "52" width = "84" height = "12" rx = "2" fill = "#FFFFFF" opacity = "0.5" / > < rect x = "20" y = "72" width = "280" height = "18" rx = "2" fill = "#FFFFFF" opacity = "1.0" stroke = "#E3E0D9" stroke-width = "1" / > < rect x = "30" y = "77" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "122" y = "77" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "214" y = "77" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "94" width = "280" height = "18" rx = "2" fill = "#F4F1EC" opacity = "1.0" stroke = "#E3E0D9" stroke-width = "1" / > < rect x = "30" y = "99" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "122" y = "99" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "214" y = "99" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "116" width = "280" height = "18" rx = "2" fill = "#FFFFFF" opacity = "1.0" stroke = "#E3E0D9" stroke-width = "1" / > < rect x = "30" y = "121" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "122" y = "121" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "214" y = "121" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "138" width = "280" height = "18" rx = "2" fill = "#F4F1EC" opacity = "1.0" stroke = "#E3E0D9" stroke-width = "1" / > < rect x = "30" y = "143" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "122" y = "143" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "214" y = "143" width = "64" height = "7" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > comparison_table< / h3 >
< p class = "hint" > Tableau structuré multi-critères. headers = liste de colonnes (1ère = critères). rows = [{label, values: []}] ou listes plates. Max 5 colonnes, 8 lignes.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, headers, rows< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, headers, rows< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L46< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "60" y = "54" width = "42" height = "22" rx = "2" fill = "#D6DCEA" opacity = "1.0" / > < rect x = "106" y = "54" width = "42" height = "22" rx = "2" fill = "#9FB0D0" opacity = "1.0" / > < rect x = "152" y = "54" width = "42" height = "22" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "198" y = "54" width = "42" height = "22" rx = "2" fill = "#10204D" opacity = "1.0" / > < rect x = "244" y = "54" width = "42" height = "22" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "58" width = "32" height = "12" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "60" y = "80" width = "42" height = "22" rx = "2" fill = "#9FB0D0" opacity = "1.0" / > < rect x = "106" y = "80" width = "42" height = "22" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "152" y = "80" width = "42" height = "22" rx = "2" fill = "#10204D" opacity = "1.0" / > < rect x = "198" y = "80" width = "42" height = "22" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "244" y = "80" width = "42" height = "22" rx = "2" fill = "#D6DCEA" opacity = "1.0" / > < rect x = "20" y = "84" width = "32" height = "12" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "60" y = "106" width = "42" height = "22" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "106" y = "106" width = "42" height = "22" rx = "2" fill = "#10204D" opacity = "1.0" / > < rect x = "152" y = "106" width = "42" height = "22" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "198" y = "106" width = "42" height = "22" rx = "2" fill = "#D6DCEA" opacity = "1.0" / > < rect x = "244" y = "106" width = "42" height = "22" rx = "2" fill = "#9FB0D0" opacity = "1.0" / > < rect x = "20" y = "110" width = "32" height = "12" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "60" y = "132" width = "42" height = "22" rx = "2" fill = "#10204D" opacity = "1.0" / > < rect x = "106" y = "132" width = "42" height = "22" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "152" y = "132" width = "42" height = "22" rx = "2" fill = "#D6DCEA" opacity = "1.0" / > < rect x = "198" y = "132" width = "42" height = "22" rx = "2" fill = "#9FB0D0" opacity = "1.0" / > < rect x = "244" y = "132" width = "42" height = "22" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "20" y = "136" width = "32" height = "12" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > heatmap_table< / h3 >
< p class = "hint" > Tableau à intensité : évaluer plusieurs items sur plusieurs critères. headers = colonnes (max 6) ; rows = {label, scores} avec score ENTIER de 0 (faible) à 4 (fort), max 8 lignes. Le moteur traduit chaque score en teinte de navy — aucune autre donnée. Idéal pour : maturité, couverture fonctionnelle, cartographie de risques.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, headers, rows, legende< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, headers, rows< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Message< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L08< / span >
< span class = "lmode" style = "background:#061033;color:#ffffff" > Sombre< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#061033" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "40" y = "70" width = "240" height = "14" rx = "2" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "70" y = "92" width = "180" height = "14" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "130" y = "120" width = "60" height = "6" rx = "2" fill = "#F4795B" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > key_message< / h3 >
< p class = "hint" > Message clé en citation plein écran. message = la phrase forte, detail = sous-texte optionnel.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > message, detail< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > message< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 2 layouts< / div >
< h2 class = "st" > Concept< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L17< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "130" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < circle cx = "144" cy = "108" r = "22" fill = "#061033" opacity = "1.0" / > < circle cx = "93" cy = "137" r = "22" fill = "#46505A" opacity = "1.0" / > < circle cx = "93" cy = "79" r = "22" fill = "#8FA9D0" opacity = "1.0" / > < circle cx = "110" cy = "108" r = "14" fill = "#F4795B" opacity = "1.0" / > < circle cx = "210" cy = "70" r = "6" fill = "#061033" opacity = "1.0" / > < rect x = "224" y = "66" width = "76" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "210" cy = "100" r = "6" fill = "#46505A" opacity = "1.0" / > < rect x = "224" y = "96" width = "76" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "210" cy = "130" r = "6" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "224" y = "126" width = "76" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > circular_diagram< / h3 >
< p class = "hint" > 3 à 6 valeurs en cercles + légende à droite. segments = [{label, description, couleur?}].< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, segments< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, segments< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L41< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "110" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "115" y = "132" width = "90" height = "20" rx = "2" fill = "#F4795B" opacity = "1.0" / > < rect x = "85" y = "108" width = "150" height = "20" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "55" y = "84" width = "210" height = "20" rx = "2" fill = "#46505A" opacity = "1.0" / > < rect x = "25" y = "60" width = "270" height = "20" rx = "2" fill = "#061033" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > pyramid< / h3 >
< p class = "hint" > Argumentation pyramidale : la conclusion au sommet, les fondations à la base. niveaux = liste de {label, description?}, EXACTEMENT 3 ou 4 niveaux, du sommet vers la base. Largeurs d'étages fixes gérées par le moteur. Idéal pour : message clé et ses appuis, hiérarchie stratégie/tactiques/moyens.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, niveaux< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, niveaux< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Texte structuré< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L06< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "150" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "66" width = "8" height = "8" rx = "1" fill = "#F4795B" opacity = "1.0" / > < rect x = "38" y = "66" width = "250" height = "8" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "94" width = "8" height = "8" rx = "1" fill = "#F4795B" opacity = "1.0" / > < rect x = "38" y = "94" width = "250" height = "8" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "122" width = "8" height = "8" rx = "1" fill = "#F4795B" opacity = "1.0" / > < rect x = "38" y = "122" width = "250" height = "8" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > default_bullets< / h3 >
< p class = "hint" > Liste de points clés. Si texte au format "Mot : explication", le moteur met le mot en gras navy. Max 5 bullets. bullets = [{niveau, texte}].< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, bullets< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, bullets< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 3 layouts< / div >
< h2 class = "st" > Process< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L19< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "150" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "52" width = "280" height = "28" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "38" cy = "66" r = "11" fill = "#061033" opacity = "1.0" / > < rect x = "60" y = "62" width = "200" height = "8" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "86" width = "280" height = "28" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "38" cy = "100" r = "11" fill = "#061033" opacity = "1.0" / > < rect x = "60" y = "96" width = "200" height = "8" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "20" y = "120" width = "280" height = "28" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "38" cy = "134" r = "11" fill = "#061033" opacity = "1.0" / > < rect x = "60" y = "130" width = "200" height = "8" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > numbered_steps< / h3 >
< p class = "hint" > Étapes en cartes pleine largeur avec badge rond numéroté. steps = [{numero, titre, description}].< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, steps< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, steps< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L36< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "140" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < polygon points = "20,80 90,80 106,104 90,128 20,128 36,104" fill = "#061033" / > < polygon points = "120,80 190,80 206,104 190,128 120,128 136,104" fill = "#F4795B" / > < polygon points = "220,80 290,80 306,104 290,128 220,128 236,104" fill = "#061033" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > process_arrow< / h3 >
< p class = "hint" > Flux horizontal de 3 à 6 étapes. steps = [{titre, description}]. Badges numérotés corail, couleurs cycle alternées. Max 6 étapes.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, steps< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, steps< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L47< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "110" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < polygon points = "40.0,58 280.0,58 266.0,80 54.0,80" fill = "#061033" / > < polygon points = "70.0,84 250.0,84 236.0,106 84.0,106" fill = "#10204D" / > < polygon points = "100.0,110 220.0,110 206.0,132 114.0,132" fill = "#8FA9D0" / > < polygon points = "125.0,136 195.0,136 181.0,158 139.0,158" fill = "#F4795B" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > funnel< / h3 >
< p class = "hint" > Entonnoir de conversion : volumes décroissants d'étape en étape. etapes = {label, valeur, description?} du haut vers le bas, 3 à 5 étages. Largeurs proportionnelles aux valeurs (plancher de lisibilité), dernier étage corail. Idéal pour : pipeline commercial, adoption, qualification progressive.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, etapes, source< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, etapes< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 2 layouts< / div >
< h2 class = "st" > Planning< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L23< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "150" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "74" width = "96" height = "44" rx = "6" fill = "#061033" opacity = "1.0" / > < rect x = "116" y = "94" width = "16" height = "4" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "40" y = "126" width = "56" height = "6" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "112" y = "74" width = "96" height = "44" rx = "6" fill = "#46505A" opacity = "1.0" / > < rect x = "208" y = "94" width = "16" height = "4" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "132" y = "126" width = "56" height = "6" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "204" y = "74" width = "96" height = "44" rx = "6" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "224" y = "126" width = "56" height = "6" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > phases_timeline< / h3 >
< p class = "hint" > Phases reliées par une ligne pointillée. phases = [{label, periode}]. Couleurs du cycle theme.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, phases< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, phases< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L32< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "140" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "56" width = "60" height = "10" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "130" y = "56" width = "120" height = "12" rx = "3" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "82" width = "60" height = "10" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "180" y = "82" width = "90" height = "12" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "20" y = "108" width = "60" height = "10" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "240" y = "108" width = "100" height = "12" rx = "3" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "134" width = "60" height = "10" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "160" y = "134" width = "130" height = "12" rx = "3" fill = "#8FA9D0" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > gantt_timeline< / h3 >
< p class = "hint" > Gantt par workstreams. periods = liste de labels (ex ["Juin","Juil"]). workstreams = [{label, tasks: [{label, start, end}]}]. start/end = index dans periods (0-based). Max 3 workstreams, 4 tâches chacun.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, periods, workstreams< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, periods, workstreams< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Acteurs & décision< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L28< / span >
< span class = "lmode" style = "background:#8FA9D0;color:#061033" > Panel< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "150" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "48" width = "190" height = "116" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "20" y = "48" width = "190" height = "6" rx = "3" fill = "#F4795B" opacity = "1.0" / > < circle cx = "40" cy = "72" r = "10" fill = "#061033" opacity = "1.0" / > < rect x = "60" y = "66" width = "130" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "60" y = "82" width = "130" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "60" y = "98" width = "130" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "60" y = "114" width = "130" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "228" y = "48" width = "72" height = "116" rx = "6" fill = "#061033" opacity = "1.0" / > < rect x = "240" y = "70" width = "48" height = "8" rx = "3" fill = "#8FA9D0" opacity = "1.0" / > < rect x = "240" y = "92" width = "48" height = "7" rx = "3" fill = "#33436A" opacity = "1.0" / > < rect x = "240" y = "105" width = "48" height = "7" rx = "3" fill = "#33436A" opacity = "1.0" / > < rect x = "240" y = "118" width = "48" height = "7" rx = "3" fill = "#33436A" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > recommendation_card< / h3 >
< p class = "hint" > Carte de recommandation. Sidebar = numero + titre + cta. Corps = headline + bullets.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > numero, titre, cta, headline, bullets< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, headline, bullets< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Clôture< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L30< / span >
< span class = "lmode" style = "background:#061033;color:#ffffff" > Sombre< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#061033" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < circle cx = "300" cy = "24" r = "40" fill = "#F4795B" opacity = "0.9" / > < circle cx = "30" cy = "150" r = "46" fill = "#10204D" opacity = "1.0" / > < rect x = "96" y = "74" width = "128" height = "14" rx = "2" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "120" y = "100" width = "80" height = "8" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > end_slide< / h3 >
< p class = "hint" > Slide de fin. message = phrase de conclusion.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > message< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > message< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Transformation< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L31< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "150" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "50" width = "120" height = "100" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "20" y = "50" width = "120" height = "6" rx = "3" fill = "#061033" opacity = "1.0" / > < rect x = "32" y = "70" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "86" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "102" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "32" y = "118" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "176" y = "50" width = "120" height = "100" rx = "6" fill = "#F4F1EC" opacity = "1.0" / > < rect x = "176" y = "50" width = "120" height = "6" rx = "3" fill = "#46505A" opacity = "1.0" / > < rect x = "188" y = "70" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "188" y = "86" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "188" y = "102" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "188" y = "118" width = "90" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "160" cy = "100" r = "10" fill = "#F4795B" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > from_to_pairs< / h3 >
< p class = "hint" > Transformation avant/après en paires alignées. pairs = [{from, to}]. label_from/label_to = en-têtes colonnes. Max 5 paires. Idéal pour tangibiliser un changement.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, pairs, label_from, label_to< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, pairs< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Historique< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L33< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "130" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "100" width = "280" height = "3" rx = "0" fill = "#061033" opacity = "1.0" / > < circle cx = "40" cy = "101" r = "7" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "116" width = "40" height = "6" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "120" cy = "101" r = "7" fill = "#F4795B" opacity = "1.0" / > < rect x = "100" y = "116" width = "40" height = "6" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "200" cy = "101" r = "7" fill = "#061033" opacity = "1.0" / > < rect x = "180" y = "116" width = "40" height = "6" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < circle cx = "280" cy = "101" r = "7" fill = "#061033" opacity = "1.0" / > < rect x = "260" y = "116" width = "40" height = "6" rx = "2" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > yearly_timeline< / h3 >
< p class = "hint" > Frise chronologique horizontale. milestones = [{annee, label, actif?}]. actif = true pour le jalon courant (corail). Labels alternent haut/bas. Max 6 jalons.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, milestones< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, milestones< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Gouvernance< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L35< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "48" width = "280" height = "18" rx = "4" fill = "#061033" opacity = "1.0" / > < rect x = "20" y = "70" width = "80" height = "16" rx = "2" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "130" cy = "78" r = "7" fill = "#061033" opacity = "0.85" / > < circle cx = "174" cy = "78" r = "7" fill = "#F4795B" opacity = "0.85" / > < circle cx = "218" cy = "78" r = "7" fill = "#46505A" opacity = "0.85" / > < circle cx = "262" cy = "78" r = "7" fill = "#8FA9D0" opacity = "0.85" / > < rect x = "20" y = "92" width = "80" height = "16" rx = "2" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "130" cy = "100" r = "7" fill = "#061033" opacity = "0.85" / > < circle cx = "174" cy = "100" r = "7" fill = "#F4795B" opacity = "0.85" / > < circle cx = "218" cy = "100" r = "7" fill = "#46505A" opacity = "0.85" / > < circle cx = "262" cy = "100" r = "7" fill = "#8FA9D0" opacity = "0.85" / > < rect x = "20" y = "114" width = "80" height = "16" rx = "2" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "130" cy = "122" r = "7" fill = "#061033" opacity = "0.85" / > < circle cx = "174" cy = "122" r = "7" fill = "#F4795B" opacity = "0.85" / > < circle cx = "218" cy = "122" r = "7" fill = "#46505A" opacity = "0.85" / > < circle cx = "262" cy = "122" r = "7" fill = "#8FA9D0" opacity = "0.85" / > < rect x = "20" y = "136" width = "80" height = "16" rx = "2" fill = "#F4F1EC" opacity = "1.0" / > < circle cx = "130" cy = "144" r = "7" fill = "#061033" opacity = "0.85" / > < circle cx = "174" cy = "144" r = "7" fill = "#F4795B" opacity = "0.85" / > < circle cx = "218" cy = "144" r = "7" fill = "#46505A" opacity = "0.85" / > < circle cx = "262" cy = "144" r = "7" fill = "#8FA9D0" opacity = "0.85" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > raci_table< / h3 >
< p class = "hint" > Matrice RACI. roles = liste de rôles. tasks = [{label, raci: [R/A/C/I]}]. R=Responsable(corail), A=Autorité(navy), C=Consulté(slate), I=Informé(muted). Max 4 rôles, 8 tâches.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, roles, tasks< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, roles, tasks< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Organisation< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L37< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < rect x = "130" y = "52" width = "60" height = "26" rx = "4" fill = "#061033" opacity = "1.0" / > < rect x = "60" y = "120" width = "56" height = "26" rx = "4" fill = "#F4F1EC" opacity = "1.0" stroke = "#E3E0D9" stroke-width = "1" / > < line x1 = "160" y1 = "78" x2 = "88" y2 = "120" stroke = "#061033" stroke-width = "1.5" / > < rect x = "140" y = "120" width = "56" height = "26" rx = "4" fill = "#F4F1EC" opacity = "1.0" stroke = "#E3E0D9" stroke-width = "1" / > < line x1 = "160" y1 = "78" x2 = "168" y2 = "120" stroke = "#061033" stroke-width = "1.5" / > < rect x = "220" y = "120" width = "56" height = "26" rx = "4" fill = "#F4F1EC" opacity = "1.0" stroke = "#E3E0D9" stroke-width = "1" / > < line x1 = "160" y1 = "78" x2 = "248" y2 = "120" stroke = "#061033" stroke-width = "1.5" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > org_chart< / h3 >
< p class = "hint" > Organigramme hiérarchique max 3 niveaux. root = {label, children: [{label, children?: [{label}]}]}. Max 4 enfants directs, 3 petits-enfants par enfant.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, root< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, root< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 1 layout< / div >
< h2 class = "st" > Priorisation< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L38< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "16" width = "120" height = "12" rx = "2" fill = "#061033" opacity = "1.0" / > < line x1 = "160" y1 = "46" x2 = "160" y2 = "170" stroke = "#46505A" stroke-width = "1.5" / > < line x1 = "24" y1 = "108" x2 = "296" y2 = "108" stroke = "#46505A" stroke-width = "1.5" / > < circle cx = "92" cy = "78" r = "16" fill = "#061033" opacity = "0.9" / > < circle cx = "228" cy = "78" r = "16" fill = "#F4795B" opacity = "0.9" / > < circle cx = "92" cy = "140" r = "16" fill = "#46505A" opacity = "0.9" / > < circle cx = "228" cy = "140" r = "16" fill = "#8FA9D0" opacity = "0.9" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > matrix_2x2< / h3 >
< p class = "hint" > Matrice effort/impact. axis_x/axis_y = {label, low, high}. quadrants = {top_left, top_right, bottom_left, bottom_right}. items = [{label, x, y}] avec x/y de 0 à 100. Max 8 items.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, axis_x, axis_y, quadrants, items< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, items< / code > < / div >
< / div >
< / div > < / div >
< / section >
< section class = "family" >
< div class = "fh" >
< div >
< div class = "se" > 2 layouts< / div >
< h2 class = "st" > Visuel< / h2 >
< / div >
< / div >
< div class = "lg" >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L50< / span >
< span class = "lmode" style = "background:#f4f1ec;color:#061033" > Clair< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "20" y = "44" width = "130" height = "120" rx = "4" fill = "#8FA9D0" opacity = "0.5" / > < line x1 = "20" y1 = "164" x2 = "150" y2 = "44" stroke = "#8FA9D0" stroke-width = "1.5" / > < line x1 = "20" y1 = "44" x2 = "150" y2 = "164" stroke = "#8FA9D0" stroke-width = "1.5" / > < rect x = "168" y = "44" width = "130" height = "14" rx = "2" fill = "#061033" opacity = "1.0" / > < circle cx = "176" cy = "78" r = "3" fill = "#F4795B" opacity = "1.0" / > < rect x = "184" y = "74" width = "108" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "184" y = "91" width = "108" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "184" y = "108" width = "108" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < rect x = "184" y = "125" width = "108" height = "7" rx = "3" fill = "#C9CDD3" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > image_split< / h3 >
< p class = "hint" > Image d'appui sur 40 % de la slide (side: left par défaut, right possible) + titre et points clés (max 4 bullets). À utiliser quand une image du dossier assets/ du projet illustre le propos ; image = nom de fichier exact tel que listé par /lire. legende (optionnelle) s'affiche sur un bandeau navy sous l'image.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, image, bullets, side, legende< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, image, bullets< / code > < / div >
< / div >
< / div >
< div class = "lc" >
< div class = "lc-head" >
< span class = "lcode" > L51< / span >
< span class = "lmode" style = "background:#061033;color:#ffffff" > Sombre< / span >
< / div >
2026-07-16 19:31:14 +02:00
< div class = "wf-thumb" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 180" class = "wf" > < rect x = "0" y = "0" width = "320" height = "180" rx = "8" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "0.5" y = "0.5" width = "319" height = "179" rx = "8" fill = "none" stroke = "#E3E0D9" / > < rect x = "0" y = "0" width = "320" height = "180" rx = "4" fill = "#8FA9D0" opacity = "0.5" / > < line x1 = "0" y1 = "180" x2 = "320" y2 = "0" stroke = "#8FA9D0" stroke-width = "1.5" / > < line x1 = "0" y1 = "0" x2 = "320" y2 = "180" stroke = "#8FA9D0" stroke-width = "1.5" / > < rect x = "0" y = "120" width = "320" height = "60" rx = "0" fill = "#061033" opacity = "0.82" / > < rect x = "20" y = "134" width = "150" height = "12" rx = "2" fill = "#FFFFFF" opacity = "1.0" / > < rect x = "20" y = "152" width = "90" height = "7" rx = "2" fill = "#8FA9D0" opacity = "1.0" / > < / svg > < / div >
2026-07-09 22:03:15 +02:00
< h3 > image_full< / h3 >
< p class = "hint" > Ouverture de chapitre visuelle : image plein cadre + voile navy + titre display blanc. Alternative à section_divider quand un asset du projet s'y prête. image = nom de fichier exact de assets/.< / p >
< div class = "fields" >
< div class = "frow" > < span class = "flab" > Champs< / span > < code > titre, image, sous_titre< / code > < / div >
< div class = "frow" > < span class = "flab" > Requis< / span > < code class = "req" > titre, image< / code > < / div >
< / div >
< / div > < / div >
< / section >
< footer >
2026-07-16 19:31:14 +02:00
Généré automatiquement depuis layouts_v2.yaml · 16/07/2026 · 31 layouts
2026-07-09 22:03:15 +02:00
< / footer >
< / body >
< / html >
