/* ========================================================== FITZUNIVERSE — SOCLE COMMUN DE L'ESPACE ÉTUDIANT (2026-08-23) ========================================================== Source unique des composants partagés par les treize pages de l'espace connecté : dashboard, profil, compte, candidatures, documents et les sept outils Fitz. POURQUOI CE FICHIER EXISTE -------------------------- Le même composant y était recopié d'une feuille à l'autre, à l'identique, sous des noms différents : — le parcours de candidature (`.application-journey` et ses seize règles `.journey-*`) existait DEUX FOIS dans dashboard.css et applications.css, à UNE déclaration près (une marge basse d'un côté seulement) — écart invisible au lecteur, et impossible à maintenir volontairement ; — la pastille d'icône était écrite HUIT FOIS sous huit noms (`.stat-card-icon`, `.tool-card-icon`, `.doc-card-icon`, `.profile-section-icon`, `.apps-stat-icon`, `.ai-style-card-icon`, `.ai-page-header-icon`, `.upgrade-nudge-icon`) pour deux variantes réelles : neutre et ambre ; — le survol de carte, l'intro de page, le titre de carte, le fond de modale, le squelette de chargement et le panneau de verre étaient dupliqués de la même façon. Le squelette l'était deux fois AVEC ses @keyframes, ce qui faisait deux animations homonymes en concurrence dans le même document dès qu'une page chargeait les deux feuilles. C'est l'espace où l'étudiant passe le plus de temps et où il enchaîne les pages sans transition : une correction faite sur l'une doit valoir pour toutes. Autant de copies garantissaient l'inverse. CONVENTION DE NOMMAGE --------------------- Les nouveaux noms sont en `.app-*`. Les anciens noms propres à chaque page sont conservés en ALIAS dans les listes de sélecteurs : ils sont écrits dans les HTML et dans les JS qui fabriquent ces éléments, et les renommer partout n'apporterait rien que cet alias ne donne déjà, pour un risque de régression bien réel sur du code qui fonctionne. Toute NOUVELLE règle s'écrit sous le nom `.app-*`. Le parcours fait exception : il garde ses noms `.journey-*`, qui sont déjà les mêmes des deux côtés et que js/application-journey.js émet tels quels. Il n'y avait rien à unifier, seulement une copie à supprimer. ORDRE DE CHARGEMENT ------------------- css/base.css → css/app-shell.css → dashboard.css → css/ai-suite.css → .css → css/app-typography.css Ce fichier vient juste après base.css : les feuilles de page gardent donc le dernier mot sur ce qui leur est propre. RÈGLE ----- Ne jamais redéfinir un de ces composants dans une feuille de page. Ce qui est propre à une page reste chez elle ; ce que plusieurs pages partagent vit ici. ========================================================== */ /* ========================================================== 1. SURFACES ========================================================== La carte de contenu et son survol. Le survol était identique sur les trois familles de cartes (statistique, outil, document) : il n'en reste qu'une définition. Le déplacement se fait à -8px avec l'ombre `--shadow-lg` et un liseré accent à 35 % d'opacité — assez pour que la carte réponde, pas assez pour qu'une grille entière se mette à sauter. ========================================================== */ .app-card{ display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:var(--radius-lg); background:var(--background); border:1px solid var(--border-color); box-shadow:var(--shadow-xs); transition:var(--transition); } /* Survol — partagé. Anciennement .stat-card:hover, a.tool-card:hover et .doc-card:hover, à l'identique. */ .app-card-lift:hover, .stat-card:hover, a.tool-card:hover, .doc-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); /* Ambre et non violet (2026-08-27) — même oubli que .card--featured et les autres liserés violets recensés ce jour-là dans le reste de l'espace étudiant. */ border-color:rgba(233,163,25,.35); } /* Le survol ne doit pas déplacer la carte pour qui a demandé moins de mouvement : l'ombre et le liseré suffisent à signaler la cible. */ @media (prefers-reduced-motion: reduce){ .app-card-lift:hover, .stat-card:hover, a.tool-card:hover, .doc-card:hover{ transform:none; } } /* ========================================================== 2. GLYPHES ========================================================== La pastille d'icône. Deux variantes seulement, et c'est voulu : — NEUTRE (`--text-muted`) : tout ce que fait le site lui-même, une statistique, un document, une section de profil ; — FITZ (`--amber-700`) : ce que fait Fitz, et rien d'autre. L'ambre est la couleur d'identité de Fitz, celle du badge défini dans base.css. Un glyphe ambre sur une carte qui n'est pas la sienne dilue ce repère : c'est la seule règle à retenir ici. Aucun fond, aucun cadre, aucune pastille pleine — l'icône se pose sur la surface de la carte. C'est ce qui distingue une interface qui respire d'un tableau de bord d'administration. ========================================================== */ .app-glyph, .stat-card-icon, .tool-card-icon, .doc-card-icon, .profile-section-icon, .apps-stat-icon, .ai-style-card-icon, .ai-attachment-chip-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); } .app-glyph--fitz, .upgrade-nudge-icon, .coach-card-icon, .ai-page-header-icon, .ai-locked-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--amber-700); } /* ========================================================== 3. TITRES ET INTRODUCTIONS ========================================================== L'en-tête de section — un titre, une phrase qui dit à quoi sert la page. Il était écrit trois fois (`.apps-intro`, `.docs-intro`, `.ivp-intro`) avec les mêmes valeurs. La ligne de texte est bornée à 640px : au-delà, l'œil perd le début de la ligne suivante. ========================================================== */ .app-intro h2, .apps-intro h2, .docs-intro h2, .ivp-intro h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h4); line-height:var(--lh-snug); color:var(--text-color); margin-bottom:4px; } .app-intro p, .apps-intro p, .docs-intro p, .ivp-intro p{ font-size:var(--fs-small); line-height:1.5; color:var(--text-light); max-width:640px; } /* Titre de carte — anciennement quatre règles identiques. */ .app-card-title, .app-card-top h3, .apps-modal-head h3, .doc-card h3, .cpr-result-head h3{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h4); color:var(--text-color); } /* ========================================================== 4. PARCOURS DE CANDIDATURE ========================================================== Le repère central de l'espace étudiant : où en est cette candidature, et quelle est l'étape suivante. Il est rendu par js/application-journey.js, en sur le tableau de bord (chaque étape mène à sa page) et en