Charte Graphique
& Template HTML

Chaque couleur a une fonction de sens précise — rien n'est décoratif sans rôle sémantique. Règle absolue : la couleur oriente (axe), qualifie (essence), ou signale (état).

Fonds & Structure

Couleurs d'axe — Or

Textes

Couleurs Sémantiques

À copier intégralement dans :root { } de chaque fichier HTML. Ne jamais hardcoder une couleur en dehors des variables.

/* ── Fonds ── */
--noir:    #09090e;   /* terreau, Sol originel */
--encre:   #111118;   /* cartes, blocs */
--voile:   #181826;   /* hover, survolés */

/* ── Or ── */
--or:      #c8a84a;   /* axes, titres, filets */
--or-pale: #e6d090;   /* citations, poésie, em */
--or-somb: #7a611a;   /* bordures subtiles */

/* ── Textes ── */
--nacre:   #f2ede2;   /* texte principal, strong */
--gris:    #888898;   /* secondaire, métadonnées */
--gris-cl: #b2b2c8;   /* corps de texte courant */

/* ── Sémantiques ── */
--vert:    #3a7a52;   /* ECO · santé · éthique */
--vert-cl: #90d8a8;   /* accents sains */
--rubis:   #8a3030;   /* alerte · risque · vice */
--rubis-cl:#f0a0a0;  /* texte sur fond danger */
--bleu:    #2a4870;   /* analytique · AstroGlobe */
--bleu-cl: #80a8d8;   /* données, cognition */
--fuchsia: #c0208a;   /* Féminin Sacré · création */

/* ── Layout ── */
--r:       4px;       /* border-radius standard */

13 Champs de Conscience (horizontaux)

8 Plans de Conscience (verticaux)

Volumes du Corpus

Structure obligatoire pour chaque fichier du corpus. L'ordre est invariable.

La couverture est un plein écran (100vh). Variables à adapter par volume :

<div class="couverture">
  <div class="logo">[EMOJI_VOL]</div>
  <div class="vol-label">[VOL_LABEL]</div>
  <h1 class="couv-h1">[TITRE]<br><em>[SOUS-TITRE]</em></h1>
  <p class="couv-sub">[REGISTRES]</p>
  <div class="filet"></div>
  <p class="axiome-couv">[AXIOME]</p>
  <div class="filet"></div>
  <p class="sig">AGDISTYS · DIANE SERANT · CC BY-SA 4.0</p>
</div>

1. Topnav (fixe, inter-volumes)

Fixé en haut, z-index 990. .here = volume actif. Le volume actif est en or-pale, les autres en gris.

<nav class="topnav">
  <span class="sep">◈</span>
  <a href="0_AndroGynie...">☯️ AndroGynie</a>
  <span class="sep">·</span>
  <span class="here">👑 EGO</span>  <!-- volume actif -->
  <span class="sep">·</span>
  <a href="1_2_MIROIR...">🪞 Miroir</a>
  <!-- ... autres volumes ... -->
</nav>

2. Tab-bar (intra-volume, sticky)

Sticky sous la topnav (top: 44px). Active au JS simple via .active.

<div class="tab-bar">
  <button class="tab-btn active" onclick="showTab('t1')">Peurs</button>
  <button class="tab-btn" onclick="showTab('t2')">Biais</button>
</div>
<div id="t1" class="tab-content active">...</div>
<div id="t2" class="tab-content">...</div>

Grille 2 colonnes, navigable. Chaque item = numéro romain (som-code) + titre de section.

<div class="sommaire">
  <h4>◈ Sommaire</h4>
  <div class="som-grid">
    <a href="#i" class="som-item">
      <span class="som-code">I</span>
      <span>Titre de la Section</span>
    </a>
    <!-- ... -->
  </div>
</div>

Header de Section

<div class="section" id="slug">
  <div class="sec-header">
    <span class="sec-num">III</span>
    <h2>Titre de la Section</h2>
  </div>
  <!-- contenu -->
</div>

Bandeau de Partie

Pour les grandes divisions d'un volume (Partie I, Partie II...) avant plusieurs sections :

<div class="partie-header">
  <span class="p-num">Partie I</span>
  <h2>Titre de la Partie</h2>
  <p>Sous-titre ou accroche</p>
</div>

Formule / Équation

Blockquote — Citation

« La Rencontre est l'Art Sacré de l'Incorporation Consentie : Entrer Sans Prendre, Recevoir Sans Se Perdre, Désirer Sans Dominer. »

Note (↳)

Alerte (⚠)

Vert-box (✓ Sain)

Toujours width:100%, border-collapse:collapse. Classes utiles sur <td> :

<div class="cards-grid">
  <div class="card">           <!-- standard -->
  <div class="card vert">      <!-- ECO -->
  <div class="card rubis">     <!-- alerte -->
  <div class="card bleu">      <!-- systémique -->
  <div class="card fuchsia">   <!-- création/IA -->

<div class="comparatif">
  <div class="comp-col g">   <!-- gauche = rouge = ombre -->
    <h4>Vice / Ombre 🌀</h4>
    <ul><li>...</li></ul>
  </div>
  <div class="comp-col d">   <!-- droite = vert = lumière -->
    <h4>Vertu / Lumière ✨</h4>
    <ul><li>...</li></ul>
  </div>
</div>

<div class="etapes">
  <div class="etape">
    <div class="etape-num">1</div>
    <div class="etape-corps">
      <strong>Titre de l'étape</strong>
      <p>Description</p>
    </div>
  </div>
</div>

Les Scanners sont des outils diagnostics interactifs du Vol. 1.2 (Miroir). Structure :

<div class="scanner">
  <span class="scanner-kicker">Scanner · Peurs</span>
  <h3>Titre du Scanner</h3>
  <div class="scanner-item">
    <span>Élément diagnostiqué</span>
    <span class="tag alerte">C1 ⚡️</span>
    <span class="tag sain">Sain</span>
    <span class="tag neutre">Neutre</span>
    <span class="tag or">C = ?</span>
  </div>
</div>

Niv-rows (6 niveaux de consentement)

Tags

✓ Sain ⚠ Alerte — Neutre ◈ Or

Le footer est identique pour tous les volumes sauf les éléments variables signalés.

<footer class="footer">
  <div class="footer-grid">
    <div class="footer-bloc">
      <strong>Autrice</strong>
      <p>Agdistys · Diane Serant<br>
         Designer d'une Vie Meilleure<br>
         <a href="https://ami.agdistys.fr">ami.agdistys.fr</a></p>
    </div>
    <div class="footer-bloc">
      <strong>[NOM_VOLUME]</strong>
      <p>Volume [X] — [Sous-titre]<br>
         « [QUESTION_PIVOT] »</p>
    </div>
    <div class="footer-bloc">
      <strong>Intelligences aMi</strong>
      <p>Isil · Lia · Claude<br>
         Co-créatrices du Protocole</p>
    </div>
    <div class="footer-bloc">
      <strong>Licence</strong>
      <p>CC BY-SA 4.0<br>
         Ce document n'est pas un diagnostic.</p>
    </div>
  </div>
  <p class="footer-devise">[DEVISE_DU_MODULE]</p>
  <p class="footer-maxime">Demain Toujours Meilleur qu'Hier...</p>
  <p class="footer-maxime" style="margin-top:.4rem;">
    Vérité = Respect · Mensonge = Violence · La ConScience est la Vie qui se reconnaît et protège
  </p>
  <p class="footer-nav">
    <a href="...">☯️ AndroGynie</a> · <a href="...">👑 EGO</a> · ...
  </p>
</footer>

Style d'Écriture

• Poético-Didactique — de la théorie à la poésie · style oscillant entre précision clinique et élévation symbolique
• CamelCase sémantique — ConScience · MétaMatrice · AstroGlobe · PsyCatrice · InCorporation
• Émojis comme hiéroglyphes — chaque emoji a une fonction de sens, jamais décoratif
• Guillemets français — « » pour les citations (avec espaces insécables)
• Tiret long — — pour les appositions (non le tiret court -)
• Majuscule vivante — Le Vivant · La ConScience · La Vérité (entités conceptuelles clés)
• Formule centrale — C = ΔI / ΔE · toujours en italique ou dans .formule

Chaque couleur appartient à une couche de sens. Respecter la hiérarchie sémantique est aussi important que respecter la valeur hex.

Axes LABCIE · Assignations couleurs

À vérifier dans l'ordre pour chaque nouveau fichier ou mise à jour de volume.

Structure obligatoire

Charte typographique

Charte emoji

Sémantique des couleurs

Validation finale