Design Handoff - EGS Gallois Sisal¶

Checklist pour les Développeurs¶

1. Assets¶

• Images : Toutes les images doivent être exportées en WebP optimisé.
  • Hero : 1920x1080px (Max 200kb).
  • Cartes : 600x400px (Max 80kb).
• Icônes : Format SVG uniquement. Utiliser currentColor pour la couleur de remplissage afin qu'elles s'adaptent au texte parent.
• Logos : SVG pour le logo vectoriel.

2. Styles Globaux¶

• Importer variables.css en premier.
• Utiliser reset.css pour normaliser les navigateurs.
• Ne jamais coder en dur les couleurs hexadécimales dans les composants, toujours utiliser var(--color-name).

3. Comportements Interactifs¶

• Hover : Transition CSS 0.3s ease sur tous les éléments interactifs.
• Focus : Outline visible de 2px solid var(--color-egs-pear) pour l'accessibilité clavier.
• Scroll : Le header doit devenir opaque (background-color: var(--color-egs-main)) après 50px de scroll.

4. Spécifications Techniques¶

• Framework : HTML5 / CSS3 (Vanilla).
• JS : ES6 Modules (pour le Quiz).
• Compatibilité : Chrome, Firefox, Safari, Edge (Dernières 2 versions).

Outils¶

• Figma : Lien vers le fichier maquette (à insérer).
• Tokens : Voir Guidelines/DesignSystem/tokens.json.