Aucune évaluation pour cette classe
Créez votre première évaluation pour cette classe
```
---
## 📱 Adaptation Responsive
### 🖥️ Breakpoints
```css
/* Mobile First Approach */
/* xs: 0px - 639px */ /* Mobile */
/* sm: 640px - 767px */ /* Mobile large */
/* md: 768px - 1023px */ /* Tablette */
/* lg: 1024px - 1279px */ /* Desktop */
/* xl: 1280px+ */ /* Large desktop */
```
### 📱 Mobile (< 768px)
#### **Layout Changes**
- **Grid**: `grid-cols-1` (stack vertical)
- **Cards**: Pleine largeur avec `rounded-lg` (bordures réduites)
- **Padding**: Réduit à `p-4` au lieu de `p-6`
- **Navigation**: Tabs en scroll horizontal
- **Actions**: Stack vertical des action cards
#### **Touch Optimizations**
```css
/* Zones de touch plus grandes */
.trimester-tab {
min-height: 44px; /* Apple guidelines */
min-width: 44px;
}
/* Feedback tactile */
.trimester-tab:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
/* Disable hover effects */
@media (hover: none) and (pointer: coarse) {
.stats-card:hover {
transform: none;
transition-duration: 0.15s;
}
}
```
### 📱 Tablette (768px - 1023px)
#### **Layout Adaptatif**
- **Grid**: `md:grid-cols-2` (2 colonnes)
- **Statistics**: Grid 2x2 pour les cards principales
- **Navigation**: Tabs centrés avec plus d'espacement
- **Hover**: Effets réduits mais présents
### 🖥️ Desktop (1024px+)
#### **Enhancements**
```css
/* Effets avancés activés */
.stats-card:hover {
transform: translateY(-6px) scale(1.02);
}
/* Grilles optimisées */
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
/* Animations plus prononcées */
.trimester-tab:not(.active):hover {
transform: translateY(-3px) scale(1.05);
}
```
---
## ⚡ Animations et Micro-interactions
### 🌊 Système de Transitions
#### **Design Tokens**
```css
:root {
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
```
#### **Usage Pattern**
```css
/* Standard pour la plupart des interactions */
.transition-all.duration-300 {
transition: all var(--transition-normal);
}
/* Rapide pour les feedbacks immédiats */
.transition-colors.duration-150 {
transition: color var(--transition-fast),
background-color var(--transition-fast);
}
```
### 🎯 Animations de Chargement
#### **Cascade d'Apparition**
```javascript
animateInitialLoad() {
const elements = [...this.elements.trimesterTabs, ...this.elements.statsCards];
elements.forEach((element, index) => {
element.style.opacity = '0';
element.style.transform = 'translateY(30px)';
setTimeout(() => {
element.style.transition = 'opacity 300ms ease-out, transform 300ms ease-out';
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}, index * 50); // 50ms de délai entre chaque élément
});
}
```
#### **Animation des Nombres**
```javascript
// Compteur animé avec easing
animateNumber(element, targetValue, duration = 1000) {
const startValue = parseFloat(element.textContent) || 0;
const startTime = Date.now();
const animate = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
// Cubic ease-out: 1 - (1-t)³
const easeOut = 1 - Math.pow(1 - progress, 3);
const currentValue = startValue + (targetValue - startValue) * easeOut;
element.textContent = isInteger ? Math.round(currentValue) : currentValue.toFixed(1);
if (progress < 1) requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
}
```
### 🔄 Transitions entre États
#### **Changement de Trimestre**
```javascript
async animateTrimesterTransition() {
const content = this.elements.statsContent;
// Animation de sortie
content.style.opacity = '0.6';
content.style.transform = 'translateY(10px)';
content.style.transition = 'opacity 300ms ease-out, transform 300ms ease-out';
await new Promise(resolve => setTimeout(resolve, 150));
// Animation d'entrée
content.style.opacity = '1';
content.style.transform = 'translateY(0)';
}
```
#### **Expansion de Cards**
```css
@keyframes cardExpand {
from {
height: 0;
opacity: 0;
transform: translateY(-10px);
}
to {
height: auto;
opacity: 1;
transform: translateY(0);
}
}
```
### 💫 Effets Avancés
#### **Shimmer Effect (Tabs)**
```css
.trimester-tab::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
transition: left 500ms ease;
}
.trimester-tab:hover::before {
left: 100%;
}
```
#### **Ripple Effect (Mobile)**
```javascript
addRippleEffect(element, touch) {
const ripple = document.createElement('span');
const rect = element.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = (touch.clientX - rect.left - size/2) + 'px';
ripple.style.top = (touch.clientY - rect.top - size/2) + 'px';
ripple.className = 'ripple';
element.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
}
```
```css
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
animation: ripple 0.6s ease-out;
pointer-events: none;
}
@keyframes ripple {
from {
opacity: 0.6;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(2);
}
}
```
---
## ♿ Accessibilité Visuelle
### 🎯 Principes WCAG 2.1
#### **Contraste des Couleurs**
- **AA Standard**: Minimum 4.5:1 pour le texte normal
- **AAA Enhanced**: Minimum 7:1 pour le texte important
- **Large Text**: Minimum 3:1 pour texte ≥18pt ou gras ≥14pt
#### **Vérifications Automatiques**
```css
/* Vérification des contrastes */
.text-green-900 /* #14532d sur #ffffff = 13.64:1 ✅ AAA */
.text-orange-800 /* #9a3412 sur #ffffff = 6.94:1 ✅ AAA */
.text-purple-800 /* #6b21a8 sur #ffffff = 8.33:1 ✅ AAA */
.text-gray-600 /* #4b5563 sur #ffffff = 7.23:1 ✅ AAA */
```
### 🎨 Support High Contrast
```css
@media (prefers-contrast: high) {
.stats-card {
border: 2px solid #1f2937;
background: #ffffff;
}
.trimester-tab.active {
background: #1f2937;
color: #ffffff;
border: 2px solid #1f2937;
}
.trimester-tab:not(.active) {
background: #ffffff;
color: #1f2937;
border: 2px solid #6b7280;
}
}
```
### ♿ Navigation Clavier
#### **Focus Visible Amélioré**
```css
.trimester-tab:focus-visible,
.stats-card-header:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
border-radius: 0.75rem;
}
```
#### **Navigation Logique**
```javascript
handleKeyboardNavigation(event) {
if (event.target.matches('[data-trimester-tab]')) {
switch (event.key) {
case 'ArrowLeft':
// Naviguer vers l'onglet précédent
break;
case 'ArrowRight':
// Naviguer vers l'onglet suivant
break;
case 'Enter':
case ' ':
event.target.click();
break;
}
}
}
```
### 📢 ARIA et Screen Readers
#### **Tabs Navigation**
```html