familiai_mediation_augmentee

17,00 

Présenter un service de médiation familiale assistée par IA avec un positionnement radical et éthique (PWYW).

UGS : familiai_mediation_augmentee Catégorie :

Fiche Descriptive Complète : FAMILIAI | Médiation Augmentée

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template familiai_mediation_augmentee.html

Version 1.0.0

Date de création 16/03/2026

Auteur / Designer Refoia Jeremy Tech (Inspiré par le style Brutaliste)

Type de page Landing Page Vitrine

Objectif principal Présenter un service de médiation familiale assistée par IA avec un positionnement radical et éthique (PWYW).

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une expérience utilisateur brutaliste et technologique. Il casse les codes traditionnels de la médiation (souvent douce et colorée) pour afficher une neutralité algorithmique « froide » et efficace. Il structure l’information via une barre de données défilante, une section Hero à fort impact visuel, et une grille de services claire.

📌 Public cible (Persona)

👤 Couples en séparation recherchant une solution rapide, neutre et économique.

👤 Utilisateurs technophiles sensibles à l’usage de l’IA dans le domaine juridique/social.

👤 Personnes à budget limité attirées par le modèle « Pay-What-You-Want ».

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 Sémantique.

Framework CSS : CSS Pur (Custom Properties/Variables).

Design System : Brutalisme (Bordures épaisses, angles droits, typographie monospace).

Responsive : Oui (Grid Layout avec bascule en colonne via Media Queries).

Browsers ciblés : Chrome, Firefox, Safari, Edge.

📦 Dépendances / Assets

Polices : Courier New, Courier, monospace (Polices système).

Couleurs : Noir (#000), Blanc (#fff), Bleu Électrique IA (#0000ff).

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 system_status str ✅ État du système (ex: MEDIATION_AUGMENTED).

2 marquee_text str ✅ Texte défilant dans la data-strip (actualités/stats).

3 binary_art text ❌ Bloc de code binaire/ASCII pour l’esthétique IA.

4 features_list array ✅ Liste des 3 piliers (IA, Brutalisme, PWYW).

🧱 STRUCTURE DU FICHIER — DOM

familiai_mediation_augmentee.html

📌 : Meta-données, styles CSS encapsulés (Variables :root).

📌 :

🏗️

: Navigation minimaliste (Logo FAMILIAI.SYS + Liens anchor).

🏗️

: Marquee (bandeau défilant) pour l’effet « temps réel ».

🏗️

:

Côté gauche : Titre

massif avec effet outline-text et bouton CTA à ombre portée.

Côté droit : Bloc

 simulant une console de diagnostic IA.

🏗️

: 3 colonnes (.card) présentant les arguments clés.

🏗️

: Informations légales, encodage (AES-256) et copyright.

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs

CSS

:root {

--bg: #ffffff; /* Pureté, clarté */

--text: #000000; /* Autorité, lisibilité */

--accent: #0000ff; /* Technologie, Intelligence Artificielle */

}

📐 Principes de Design

Zéro Arrondi : border-radius: 0 !important;

Bordures Fortes : 6px solid #000 pour les séparations majeures.

Interactivité : Animation blink sur le statut et translation 6px au clic sur les boutons pour un effet physique "old-school".

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Responsive Réduire la largeur < 768px La grille Hero et les Cards passent sur une seule colonne. 2 Animation Marquee Observer le bandeau bleu Le texte défile en boucle infinie de droite à gauche. 3 Interaction Bouton Cliquer sur "Lancer" Effet de translation et réduction de l'ombre portée. 4 Accessibilité Tabulation clavier Les liens du menu et le bouton CTA sont focusables. 📌 INSTRUCTIONS SPÉCIALES Esthétique : Ne surtout pas ajouter d'images lisses ou de dégradés. Le design doit rester "brut". Typographie : Conserver le Courier New pour renforcer l'aspect "rapport de machine". Performance : Aucun script externe n'est requis. Le template est ultra-léger (< 10kb). Fiche générée par — Agent IA Refoia Jeremy Tech Usage : Documentation Front-End / Projet FAMILIAI 2026

Avis

Il n’y a pas encore d’avis.

Soyez le premier à laisser votre avis sur “familiai_mediation_augmentee”

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *