654 lines
62 KiB
HTML
654 lines
62 KiB
HTML
<!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>
|
||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
||
<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:80px 60px 60px;position:relative;overflow:hidden}
|
||
header::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:var(--navy2);opacity:.5}
|
||
header::before{content:"";position:absolute;right:120px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:var(--coral);opacity:.85}
|
||
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--glacier);margin-bottom:24px;font-weight:500;position:relative;z-index:2}
|
||
h1{font-family:Cambria,serif;font-size:60px;font-weight:700;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px;position:relative;z-index:2}
|
||
.lead{font-size:17px;line-height:1.6;color:rgba(255,255,255,.75);max-width:680px;position:relative;z-index:2}
|
||
.hmeta{display:flex;gap:60px;margin-top:50px;padding-top:30px;border-top:1px solid rgba(255,255,255,.15);position:relative;z-index:2}
|
||
.mi{display:flex;flex-direction:column;gap:4px}
|
||
.ml{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--glacier)}
|
||
.mv{font-family:Cambria,serif;font-size:28px;font-weight:700}
|
||
.charte{padding:70px 60px;background:#fff;border-bottom:1px solid var(--bo)}
|
||
.se{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--coral);font-weight:600;margin-bottom:14px}
|
||
.st{font-family:Cambria,serif;font-size:40px;font-weight:700;line-height:1.1;color:var(--navy);margin-bottom:30px}
|
||
.cr{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;max-width:900px}
|
||
.cc{border-radius:8px;overflow:hidden;border:1px solid var(--bo)}
|
||
.cs{height:60px}
|
||
.cm{padding:8px 12px;background:#fff}
|
||
.cn{font-size:12px;font-weight:500}
|
||
.chx{font-size:10px;color:var(--t3);font-family:monospace;margin-top:2px}
|
||
.family{padding:60px}
|
||
.family:nth-child(even){background:#fff}
|
||
.fh{margin-bottom:36px}
|
||
.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px}
|
||
.lc{background:#fff;border:1px solid var(--bo);border-radius:10px;padding:24px;transition:all .25s;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(6,16,51,.04)}
|
||
.lc:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(6,16,51,.10);border-color:var(--coral)}
|
||
.wf-thumb{margin:0 0 14px;border:1px solid #ECE9E2;border-radius:8px;overflow:hidden;background:#fff}
|
||
.wf-thumb svg{display:block;width:100%;height:auto}
|
||
.lc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
|
||
.lcode{background:var(--navy);color:#fff;font-size:10px;font-weight:600;padding:3px 9px;border-radius:4px;letter-spacing:.1em;font-family:monospace}
|
||
.lmode{font-size:10px;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.05em}
|
||
.lc h3{font-family:Cambria,serif;font-size:23px;font-weight:700;color:var(--navy);margin-bottom:10px}
|
||
.hint{font-size:13.5px;line-height:1.55;color:var(--t2);margin-bottom:18px;flex:1}
|
||
.fields{border-top:1px solid var(--bo);padding-top:14px;display:flex;flex-direction:column;gap:8px}
|
||
.frow{display:flex;gap:10px;align-items:baseline}
|
||
.flab{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);min-width:48px;font-weight:600}
|
||
.frow code{font-size:11.5px;font-family:monospace;color:var(--slate);line-height:1.4}
|
||
.frow code.req{color:var(--coral)}
|
||
footer{padding:50px 60px;background:var(--navy);color:rgba(255,255,255,.6);font-size:13px;text-align:center}
|
||
@media(max-width:640px){header,.charte,.family{padding:40px 24px}h1{font-size:40px}.lg{grid-template-columns:1fr}}
|
||
</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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<h3>bar_chart</h3>
|
||
<p class="hint">Comparaison de valeurs par catégories — graphique NATIF éditable. Max 8 catégories × 3 séries. series = liste de {label, values} ; values = nombres SANS guillemets, alignés sur categories. horizontal: true pour des barres (libellés longs). unite (ex M€) et source optionnels. Couleurs imposées : navy, coral, glacier.</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>
|
||
<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>
|
||
<h3>line_chart</h3>
|
||
<p class="hint">Évolution temporelle — graphique NATIF éditable. Max 12 points × 3 séries. points_x = libellés d'axe (mois, années...) ; series = {label, values}, nombres sans guillemets. Le dernier point de la première série est automatiquement mis en valeur (corail).</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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
Généré automatiquement depuis layouts_v2.yaml · 16/07/2026 · 31 layouts
|
||
</footer>
|
||
</body>
|
||
</html> |