mediatech_ia_mediation

Fiche Descriptive Complète

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template mediatech_ia_mediation.html

Version 1.0.0

Date de création 16/03/2026

Auteur / Designer Mediatech Industries

Type de page Dashboard de Médiation Assistée par IA

Objectif principal Monitorer une session de médiation en temps réel avec analyse algorithmique.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une interface de type « Brutalisme Digital » (Neo-Brutalism) pour une application de médiation de conflits. Il affiche des données analytiques en temps réel (tension verbale, points de blocage), des suggestions automatiques générées par une IA pour résoudre les litiges, un status log technique et un volet économique (CA prévisionnel).

📌 Public cible (Persona)

👤 Médiateurs professionnels : Pour obtenir une aide à la décision neutre.

👤 Analystes de données : Pour surveiller les pics émotionnels durant les échanges.

👤 Parties en conflit : (Consultation restreinte) pour visualiser les points de blocage objectifs.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique

Framework CSS : Tailwind CSS (via CDN)

Polices : Google Fonts (Space Grotesk pour le corps, Syne pour les titres)

Design Style : Neo-Brutalist (Bordures épaisses, ombres portées franches, couleurs saturées)

Responsive : ✅ Oui (Grille adaptative 1 col mobile / 3 cols desktop)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 verbal_tension int ✅ Oui Pourcentage de tension (ex: 88%)

2 blocking_points str ✅ Oui Texte décrivant les sujets de blocage

3 ai_suggestion str ✅ Oui Phrase de conseil générée par l’algorithme

4 is_ai_active bool ✅ Oui État du pulse d’animation (Status Live)

5 project_revenue float ❌ Non Chiffre d’affaires prévu pour la barre de progression

🧱 STRUCTURE DU FICHIER — DOM

mediatech_ia_mediation.html

│

├── 📌 (Config SEO, Fonts, Styles Brutalistes)

│

└── 📌 (.grid-bg pour le motif de fond)

│

├── 🏗️

(Logo Mediatech_01 & Navigation uppercase)

│

├── 🏗️

(Grid layout)

│ ├── 🧱 section (Col-span 2)

│ │ ├── div (Analyse Sémantique : Tension & Blocs)

│ │ └── div (Suggestion Algorithme – Fond Jaune Alerte)

│ │

│ └── aside (Sidebar)

│ ├── div (Status Live avec animation .ia-pulse)

│ └── div (Économie : Progress bar du CA)

│

└── 🏗️