01 · Palette

Couleurs officielles

Maximum 2 couleurs de fond par support : un sombre (--vsl-bg) et un clair (--vsl-bg-cream). L'or n'est jamais utilisé en aplat de fond — uniquement en accents typographiques, règles décoratives, et CTA.

02 · Typographie

Système typographique

Deux familles, un usage clair. Le Cormorant Garamond porte le ton éditorial (titres, mots-clés en italique or). L'Inter porte la fonction (corps, UI, chiffres, footer, eyebrow).

03 · Frame

Le frame IDLB.EU · 1920 × 1080

Tout support visuel IDLB part de ce gabarit. Header signature en haut, contenu éditorial à gauche, zone caméra (ou portrait, ou imagerie) à droite, logo IDLB.EU et footer thématique en bas. Cliquez sur Afficher le repère pour visualiser la grille.

04 · Anatomie

Anatomie du frame

Sept éléments fixes. Aucun n'est optionnel sur les slides courantes (sauf cover et clôture).

① Stage

section.slide · 1920×1080 · padding 96px 720px 96px 120px · le padding droit réserve la colonne caméra/visuel.

② Header signature

.sl-top · top 56 / left 120 · IDLB en Cormorant italique or + baseline « INVEST · DEVELOPMENT · LEARN · BUILD » en Inter 24/0.28em uppercase.

③ Règle décorative

.sl-rule-gold · 80×3 px · or vif · introduit le titre. Optionnelle mais standard sur les slides éditoriales.

④ Titre éditorial

.sl-h1 ou .sl-h2 · Cormorant 96–140px · 1 mot-clé en italique or par titre maximum.

⑤ Corps / bullets

.sl-lead ou .sl-bullets · Inter 32–38px · max 36–38ch · couleur ink-soft, mots-clés en or.

⑥ Zone caméra ou visuel

.cam-frame · 560×560 · top 80 / right 80 · sur la version Tella ce frame est masqué (la caméra est incrustée en post-prod plein-écran).

⑦ Logo IDLB.EU

.sl-logo · 200px · bas-droite · monochrome (clair sur sombre, sombre sur crème).

⑧ Footer thématique

.sl-bot · bottom 48 · pagination NN / 43 + THÈME : XXX · Label · Inter 24px / 0.25em uppercase. Toute la ligne dans la même police (règle v1.1).

05 · Grille

Grille & espacements

Le frame fonctionne sur une grille à deux colonnes asymétriques. Les valeurs sont fixes (pas responsive) puisque le stage est mis à l'échelle par deck-stage.js.

06 · Code

Code HTML de référence

Squelette à copier-coller pour toute nouvelle slide. Charge shared/brand.css pour les variables, et deck-stage.js pour la mise à l'échelle. Chaque slide est un <section class="slide"> autonome.

<!-- Frame slide IDLB.EU · 1920×1080 -->
<section class="slide" data-screen-label="02 Presentation">

  <!-- ① Logo IDLB.EU -->
  <img class="sl-logo mono-light"
       src="shared/logo-idlb-eu-master.png" alt="">

  <!-- ② Header signature -->
  <div class="sl-top">
    <span class="brand">IDLB</span>
    <span>Invest · Development · Learn · Build</span>
  </div>

  <!-- ③ Règle or + ④ Titre -->
  <div class="sl-rule-gold"></div>
  <h1 class="sl-h1">
    Titre principal.<br><em>Mot-clé italique or.</em>
  </h1>

  <!-- ⑤ Corps -->
  <ul class="sl-bullets">
    <li><span>Point clé un</span></li>
    <li><span>Point clé deux</span></li>
  </ul>

  <!-- ⑥ Zone caméra (à supprimer pour Tella plein écran) -->
  <div class="cam-frame">
    <span class="cam-frame-label">Caméra</span>
    <span class="cam-frame-size">560 × 560 px</span>
  </div>

  <!-- ⑧ Footer thématique -->
  <div class="sl-bot">
    <span>02 / 43</span>
    <span class="num">THÈME : INTRODUCTION · Qui je suis</span>
  </div>

</section>

07 · Déclinaisons

Décliner le frame pour d'autres pages

Le même gabarit accueille les pages de capture, les slides masterclass, les pages d'information. Seuls le contenu éditorial et le module dans la colonne droite changent — le header, le footer, le logo et la palette restent identiques.

08 · Garde-fous

Règles & interdits

Le système IDLB est défini autant par ce qu'il fait que par ce qu'il refuse. Les écarts doivent être documentés en commentaire /* EXCEPTION STANDARD-IDLB : raison */.