/*
================================================================================
SYSTÈME CSS UNIFIÉ POUR SITE ÉDUCATIF HISTOIRE-GÉOGRAPHIE
================================================================================
Version 2.0 - Interface complète et optimisée
Auteur : Emile SNYERS / Assistant IA
Date : 2025-06-10
/* LICENCE ET CONDITIONS D'UTILISATION
----------------------------------------
Emile SNYERS - Tous droits réservés - 2025
📢Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
🚨Usage non commercial uniquement.
Type d'utilisation autorisée:
- Utilisation pour des projets éducatifs ou associatifs.
- Ne pas redistribuer sans autorisation.
Critères d'attribution d'une autorisation:
- Contribution à des projets éducatifs ou associatifs.
- L'entraide et le partage du savoir.
- Contribue à la promotion de l'éducation et de la culture.
----------------------------------------
*/
/*
================================================================================
UNIFIED CSS SYSTEM FOR HISTORY-GEOGRAPHY EDUCATIONAL WEBSITE
================================================================================
Version 2.0 - Complete and optimized interface
Author: Emile SNYERS / AI Assistant
Date: 2025-06-10
/* LICENSE AND TERMS OF USE
----------------------------------------
Emile SNYERS - All rights reserved - 2025
📢Any use requires prior authorization from the owner (Emile SNYERS).
🚨Non-commercial use only.
Type of authorized use:
- Use for educational or associative projects.
- Do not redistribute without authorization.
Authorization attribution criteria:
- Contribution to educational or associative projects.
- Mutual aid and knowledge sharing.
---------------------------------------- */
/*
================================================================================
歴史・地理教育サイトのための統一CSSシステム
================================================================================
バージョン 2.0 - 完全かつ最適化されたインターフェース
作者：Emile SNYERS / AIアシスタント
日付：2025-06-10
/* ライセンスと利用規約
----------------------------------------
Emile SNYERS - 全著作権所有 - 2025
📢いかなる使用も所有者（Emile SNYERS）の事前許可が必要です。
🚨非営利目的での使用に限ります。
許可されている使用タイプ：
- 教育またはアソシエイティブプロジェクトでの使用。
- 許可なく再配布しないでください。
許可付与基準：
- 教育またはアソシエイティブプロジェクトへの貢献。
- 相互援助と知識の共有。
---------------------------------------- */
/*
================================================================================
מערכת CSS מאוחדת לאתר חינוכי להיסטוריה-גיאוגרפיה
================================================================================
גרסה 2.0 - ממשק מלא ומותאם
מחבר: Emile SNYERS / עוזר בינה מלאכותית
תאריך: 2025-06-10
/* רישיון ותנאי שימוש
----------------------------------------
Emile SNYERS - כל הזכויות שמורות - 2025
📢כל שימוש דורש אישור מראש מהבעלים (Emile SNYERS).
🚨לשימוש לא מסחרי בלבד.
סוג השימוש המורשה:
- שימוש לפרויקטים חינוכיים או חברתיים.
- אין להפיץ מחדש ללא אישור.
קריטריונים להענקת אישור:
- תרומה לפרויקטים חינוכיים או חברתיים.
- עזרה הדדית ושיתוף ידע.
---------------------------------------- */
/*
Description : CSS unifié intégrant tous les composants éducatifs nécessaires
Compatibilité : Multi-écrans, système de thèmes dynamiques, IA-friendly
================================================================================
*/
/* ====================================================================*/
/* ====================================================================
VARIABLES CSS ÉTENDUES - SYSTÈME DE THÈMES COMPLET
==================================================================== */
:root {
/* === VARIABLES DE BASE (déjà existantes) === */
--theme-background: #faf0ce;
--theme-text: #2c3e50;
--theme-text-titre: #2c3e50;
--theme-primary: #c39b77;
--theme-secondary: #f2e3b3;
--theme-tertiary: #fef9e7;
--theme-quaternary: #f8f9fa;
--theme-header: #eed498;
--theme-footer: #eed498;
--theme-accent: #9a4c18;
/* === VARIABLES DE TAILLE DE POLICE CORRIGÉES (avec multiplicateur) === */
--font-size-multiplier: 1; /* Multiplicateur de taille de police, peut être ajusté pour l'accessibilité */
/* === VARIABLES DE TAILLE DE POLICE (avec multiplicateur d'accessibilité) === */
/* Les tailles de police ci-dessous utilisent un système de multiplicateur
qui permet d'ajuster facilement toutes les tailles de police du site
en modifiant simplement la variable --font-size-multiplier.
Cette approche est idéale pour l'accessibilité et les préférences utilisateur. */
--font-size-xs: calc(0.75rem * var(--font-size-multiplier)); /* 12px - Très petit texte, notes de bas de page */
--font-size-sm: calc(0.875rem * var(--font-size-multiplier)); /* 14px - Texte secondaire, légendes */
--font-size-base: calc(1rem * var(--font-size-multiplier)); /* 16px - Taille standard pour le texte principal */
--font-size-md: calc(1.125rem * var(--font-size-multiplier)); /* 18px - Texte légèrement plus grand */
--font-size-lg: calc(1.25rem * var(--font-size-multiplier)); /* 20px - Sous-titres, texte mis en avant */
--font-size-xl: calc(1.5rem * var(--font-size-multiplier)); /* 24px - Petits titres */
--font-size-2xl: calc(1.875rem * var(--font-size-multiplier)); /* 30px - Titres moyens */
--font-size-3xl: calc(2.25rem * var(--font-size-multiplier)); /* 36px - Grands titres */
--font-size-4xl: calc(3rem * var(--font-size-multiplier)); /* 48px - Très grands titres, en-têtes principaux */
--font-size-5xl: calc(4rem * var(--font-size-multiplier)); /* 64px - Texte géant, accroches visuelles */
/* Changer la valeur de --font-size-multiplier (ex: 1.2) pour augmenter toutes les tailles de police
ou la diminuer (ex: 0.9) pour réduire toutes les tailles proportionnellement */
/* === VARIABLES D'ESPACEMENT ÉTENDUES === */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-2xl: 2.5rem; /* 40px */
--spacing-3xl: 3rem; /* 48px */
--spacing-4xl: 4rem; /* 64px */
--spacing-5xl: 5rem; /* 80px */
/* === VARIABLES DE LAYOUT ET NAVIGATION === */
--main-max-width: 1000px;
--sidebar-width: 280px;
--sidebar-chapitre-width: 300px;
--header-height: 70px;
--transition-speed: 0.3s;
--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* === VARIABLES DE DESIGN === */
--border-radius-xs: 2px;
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
--border-radius-2xl: 24px;
--border-radius-full: 50%;
/* === VARIABLES D'OMBRES === */
--theme-header-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
--theme-section-shadow: 0 2px 5px rgba(0,0,0,0.1);
--theme-sidebar-shadow: 0 2px 6px rgba(0,0,0,0.2);
--theme-card-shadow: 0 4px 12px rgba(0,0,0,0.1);
--theme-modal-shadow: 0 20px 60px rgba(0,0,0,0.3);
/* === VARIABLES ÉDUCATIVES SPÉCIFIQUES === */
--timeline-line-width: 3px;
--flashcard-min-height: 200px;
--quiz-option-height: 50px;
--progress-bar-height: 8px;
/* === Z-INDEX SYSTÈME === */
--z-dropdown: 100;
--z-sidebar: 500;
--z-header: 600;
--z-modal: 1000;
--z-tooltip: 1100;
--z-notification: 1200;
}
/* ====================================================================*/
/* ====================================================================
/* ====================================================================*/
/* ====================================================================
/* ====================================================================
TITRES ET TEXTES
==================================================================== */
h1, h2, h3, h4, h5, h6 {
color: var(--theme-text-titre);
margin-bottom: 15px;
}
h1 {
font-size: var(--font-size-4xl); /* Maintenant utilise le multiplicateur */
margin-top: 0;
}
h2 {
font-size: var(--font-size-3xl); /* Maintenant utilise le multiplicateur */
border-bottom: 2px solid var(--theme-primary);
padding-bottom: 10px;
}
h3 {
font-size: var(--font-size-2xl); /* Maintenant utilise le multiplicateur */
margin-top: 20px;
color: var(--theme-primary);
}
h4 {
font-size: var(--font-size-xl); /* Maintenant utilise le multiplicateur */
margin-top: 15px;
color: var(--theme-t);
}
/* ====================================================================
PARAGRAPHES ET TEXTE DE BASE (CORRIGÉ)
==================================================================== */
p {
font-size: var(--font-size-base); /* Maintenant utilise le multiplicateur */
line-height: 1.6;
margin-bottom: var(--spacing-md);
font-family: var(--theme-font-family, 'Georgia', serif); /* Application de la police */
}
/* Liste-Reactifs-Detaille-Emile-SNYERS-V1 - Simplified with reduced spacing */
ul.Liste-Reactifs-Detaille-Emile-SNYERS-V1,
ol.Liste-Reactifs-Detaille-Emile-SNYERS-V1 {
font-size: var(--font-size-base);
font-family: var(--theme-font-family, 'Georgia', serif);
padding-left: var(--spacing-lg);
margin: var(--spacing-md) 0;
}
.Liste-Reactifs-Detaille-Emile-SNYERS-V1 li {
font-size: var(--font-size-base);
line-height: 1.4; /* Reduced from 1.6 */
margin-bottom: var(--spacing-xs); /* Reduced from spacing-sm */
padding-bottom: calc(var(--spacing-xs) / 2); /* Reduced by half */
transition: color var(--transition-speed) ease;
position: relative;
}
/* Subtle hover effect */
.Liste-Reactifs-Detaille-Emile-SNYERS-V1 li:hover {
transform: translateX(var(--spacing-xs));
background-color: rgba(var(--theme-primary-rgb, 195, 155, 119), 0.1);
padding-left: calc(var(--spacing-sm) + 0.25rem);
}
/* Style for unordered lists */
ul.Liste-Reactifs-Detaille-Emile-SNYERS-V1 li {
list-style-type: none;
position: relative;
padding-left: var(--spacing-md);
}
ul.Liste-Reactifs-Detaille-Emile-SNYERS-V1 li::before {
content: "•";
color: var(--theme-primary);
position: absolute;
left: 0;
}
/* Style for ordered lists */
ol.Liste-Reactifs-Detaille-Emile-SNYERS-V1 {
counter-reset: list-counter;
}
ol.Liste-Reactifs-Detaille-Emile-SNYERS-V1 li {
list-style-type: none;
counter-increment: list-counter;
padding-left: var(--spacing-md);
}
ol.Liste-Reactifs-Detaille-Emile-SNYERS-V1 li::before {
content: counter(list-counter) ".";
color: var(--theme-primary);
font-weight: normal;
position: absolute;
left: 0;
}
/* Style for nested lists - REDUCED SPACING */
.Liste-Reactifs-Detaille-Emile-SNYERS-V1 .Liste-Reactifs-Detaille-Emile-SNYERS-V1 {
margin-top: calc(var(--spacing-xs) / 2); /* Reduced by half */
margin-bottom: 0;
padding-left: var(--spacing-md); /* Reduced from spacing-lg */
}
/* Specific style for nested list items */
.Liste-Reactifs-Detaille-Emile-SNYERS-V1 .Liste-Reactifs-Detaille-Emile-SNYERS-V1 li {
margin-bottom: calc(var(--spacing-xs) / 2); /* Even smaller margin for nested items */
line-height: 1.3; /* Tighter line height for nested items */
}
/* Style for paragraph descriptions in lists */
.Liste-Reactifs-Detaille-Emile-SNYERS-V1 li p {
margin-top: calc(var(--spacing-xs) / 2); /* Reduced by half */
margin-bottom: 0;
font-size: calc(var(--font-size-sm) * var(--font-size-multiplier));
opacity: 0.9;
}
/* ====================================================================
BOUTONS SYSTÈME UNIFIÉ
==================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
border-radius: var(--border-radius-md);
font-size: var(--font-size-base);
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all var(--transition-speed) ease;
position: relative;
overflow: hidden;
min-height: 44px;
font-family: inherit;
}
.btn:focus {
outline: 2px solid var(--theme-primary);
outline-offset: 2px;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Variantes de boutons */
.btn-primary {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
}
.btn-primary:hover {
background: var(--theme-accent);
transform: translateY(-2px);
box-shadow: var(--theme-card-shadow);
}
.btn-secondary {
background: var(--theme-secondary);
color: var(--theme-button-secondary-text, var(--theme-text));
}
.btn-secondary:hover {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
border: 2px solid var(--theme-primary);
color: var(--theme-primary);
}
.btn-outline:hover {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
}
.btn-ghost {
background: transparent;
color: var(--theme-primary);
}
.btn-ghost:hover {
background: var(--theme-secondary);
}
/* Tailles de boutons */
.btn-xs {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-xs);
min-height: 32px;
}
.btn-sm {
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
min-height: 36px;
}
.btn-lg {
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-lg);
min-height: 52px;
}
.btn-block {
width: 100%;
}
/* ====================================================================
/* POINTS CLÉS ET MISE EN ÉVIDENCE
==================================================================== */
.key-points {
background: var(--theme-background);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
border-left: 5px solid var(--theme-primary);
}
.key-points h3 {
color: var(--theme-text);
margin-bottom: var(--spacing-md);
font-size: calc(var(--font-size-lg) * 2);
}
.key-points ul {
list-style: none;
padding: 0;
}
.key-points li {
position: relative;
padding-left: var(--spacing-xl);
margin-bottom: var(--spacing-sm);
line-height: 1.6;
}
.key-points li::before {
content: "🔑";
position: absolute;
left: 0;
top: 0;
font-size: var(--font-size-lg);
}
/* ====================================================================
VOTRE CSS AMÉLIORÉ - TABLEAUX RESPONSIVE
==================================================================== */
/* Variables nécessaires */
:root {
--table-transition: all 0.3s ease;
--table-card-gap: 1rem;
--table-card-radius: var(--border-radius-lg, 12px);
--card-item-padding: var(--spacing-sm, 0.5rem) 0;
--card-separator-margin: var(--spacing-xs, 0.25rem) 0;
--card-separator-style: 2px solid var(--theme-secondary);
--table-mobile-font-size: calc(0.9rem * var(--font-size-multiplier, 1));
}
/* CSS DE BASE - VOTRE STYLE DESKTOP CONSERVÉ */
.element-Du-Cours-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: var(--border-radius-md);
overflow: hidden;
border: 1px solid var(--theme-primary);
box-shadow: var(--theme-section-shadow);
margin: 20px auto;
font-size: var(--font-size-sm);
display: table;
transition: var(--table-transition);
}
.element-Du-Cours-table th {
background-color: var(--theme-primary);
color: var(--theme-button-primary-text, white);
text-align: left;
padding: 12px 15px;
font-size: var(--font-size-base);
font-family: var(--theme-font-family, 'Georgia', serif);
font-weight: 600;
}
.element-Du-Cours-table tr:first-child th:first-child {
border-top-left-radius: var(--border-radius-md);
}
.element-Du-Cours-table tr:first-child th:last-child {
border-top-right-radius: var(--border-radius-md);
}
.element-Du-Cours-table td {
padding: 10px 15px;
border-bottom: 1px solid var(--theme-secondary);
font-size: var(--font-size-sm);
font-family: var(--theme-font-family, 'Georgia', serif);
transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
}
.element-Du-Cours-table tr:nth-child(odd) {
background-color: var(--theme-background);
}
.element-Du-Cours-table tr:nth-child(even) {
background-color: var(--theme-tertiary);
}
.element-Du-Cours-table tr:last-child td:first-child {
border-bottom-left-radius: var(--border-radius-md);
}
.element-Du-Cours-table tr:last-child td:last-child {
border-bottom-right-radius: var(--border-radius-md);
}
.element-Du-Cours-table tr:hover {
background-color: var(--theme-secondary);
}
.element-Du-Cours-table td:hover {
transform: translateX(3px);
color: var(--theme-primary);
background-color: var(--theme-secondary);
}
/* MODE RESPONSIVE - CARTES AVEC BORDURES */
@media (max-width: 768px) {
.element-Du-Cours-table {
display: block;
border: none;
box-shadow: none;
margin: 0;
}
.element-Du-Cours-table caption {
display: block;
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--theme-text-titre);
margin-bottom: var(--spacing-md);
text-align: center;
padding: var(--spacing-md);
background: var(--theme-secondary);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
border: 3px solid var(--theme-primary);
border-bottom: none;
}
.element-Du-Cours-table thead {
display: none;
}
.element-Du-Cours-table tbody {
display: block;
}
.element-Du-Cours-table tr {
display: block;
background: var(--theme-tertiary);
border: 3px solid var(--theme-primary);
border-radius: var(--table-card-radius);
margin-bottom: var(--table-card-gap);
padding: var(--spacing-lg);
box-shadow: var(--theme-section-shadow);
transition: var(--table-transition);
}
.element-Du-Cours-table tr:hover {
transform: translateY(-3px);
box-shadow: var(--theme-card-shadow);
}
.element-Du-Cours-table td {
display: flex;
align-items: center;
padding: var(--card-item-padding);
border: none;
border-bottom: var(--card-separator-style);
text-align: left;
position: relative;
padding-left: 40%;
font-size: var(--table-mobile-font-size);
margin: var(--card-separator-margin);
min-height: 40px;
}
.element-Du-Cours-table td:last-child {
border-bottom: none;
margin-bottom: 0;
}
.element-Du-Cours-table td:before {
content: attr(data-label) ": ";
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: var(--card-item-padding);
font-weight: 700;
color: var(--theme-text-titre);
background: var(--theme-secondary);
width: 35%;
text-align: left;
font-size: var(--table-mobile-font-size);
border-right: 3px solid var(--theme-primary);
margin-right: var(--spacing-sm);
display: flex;
align-items: center;
border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
}
.element-Du-Cours-table td:hover {
background-color: var(--theme-background);
transform: translateX(5px);
color: var(--theme-primary);
}
.element-Du-Cours-table td:hover:before {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
}
}
/* MODE COMPACT */
@media (max-width: 576px) {
.element-Du-Cours-table tr {
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.element-Du-Cours-table td {
padding-left: 0;
text-align: center;
flex-direction: column;
min-height: 60px;
}
.element-Du-Cours-table td:before {
position: static;
display: block;
width: 100%;
text-align: center;
margin-bottom: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--theme-text-titre);
font-weight: 700;
border: 2px solid var(--theme-primary);
border-radius: var(--border-radius-md);
background: var(--theme-secondary);
margin-right: 0;
padding: var(--spacing-sm);
}
.element-Du-Cours-table td:hover:before {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
}
}
/* Classes utilitaires */
@media (max-width: 768px) {
.hide-mobile {
display: none !important;
}
}
@media (max-width: 576px) {
.hide-small {
display: none !important;
}
}
/* Animation */
@media (max-width: 768px) {
.element-Du-Cours-table tr {
animation: slideInUp 0.4s ease-out;
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ====================================================================
/* STATS ET STATISTIQUES
==================================================================== */
/* Cartes statistiques améliorées */
.stats-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
margin: var(--spacing-lg) 0;
justify-content: center;
}
.stat-card {
flex: 1 1 200px;
background: var(--theme-secondary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
text-align: center;
box-shadow: var(--theme-section-shadow);
transition: all var(--transition-speed) ease;
cursor: cell;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
transition: all 0.5s ease;
}
.stat-card:hover::before {
top: -150%;
left: -150%;
}
.stat-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: var(--theme-card-shadow);
background: var(--theme-primary);
color: white;
}
.stat-card:hover .stat-icon {
transform: rotateY(360deg);
}
.stat-card:hover .stat-value {
transform: scale(1.2);
}
.stat-icon {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-sm);
transition: transform 0.6s ease;
}
.stat-value {
font-size: var(--font-size-2xl);
font-weight: bold;
margin: var(--spacing-sm) 0;
transition: transform var(--transition-speed) ease;
}
.stat-label {
font-size: var(--font-size-sm);
opacity: 0.9;
}
/* Tooltips interactifs */
.tooltip {
position: absolute;
background: rgba(0,0,0,0.9);
color: white;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: var(--font-size-xs);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1000;
}
.tooltip.show {
opacity: 1;
}
/* Classes pour les filtres */
.filter-hidden {
display: none !important;
}
/* Animation désactivée */
.no-animation * {
animation: none !important;
transition: none !important;
}
/*
====================================================================
DOCUMENTATION: SNYERS CHART SYSTEM
====================================================================
This CSS defines a versatile charting system that can display various types of data
visualizations with interactive elements and responsive design.
USAGE:
1. BAR CHART EXAMPLE:
Monthly Sales 2023
All departments
2. PIE CHART EXAMPLE:
3. LINE CHART EXAMPLE:
FEATURES:
- Responsive designs that adapt to different screen sizes
- Interactive elements with hover effects
- Support for bar charts, pie charts, and line charts
- Customizable with CSS variables
- Print-friendly styling
- Accessible color contrast when using appropriate theme variables
CUSTOMIZATION:
You can adjust the appearance by modifying the CSS variables in your theme.
Key variables used include:
- --theme-primary, --theme-secondary, --theme-accent: Colors for chart elements
- --theme-text: Color for labels and text
- --theme-tertiary: Background color for containers
- --spacing-lg, --spacing-md, --spacing-sm: Spacing variables
- --border-radius-lg, --border-radius-sm: Border radius values
- --transition-speed: Animation speed for interactive elements
For dynamic charts, consider adding JavaScript functionality to generate
chart elements and calculate positioning based on actual data values.
*/
/* ====================================================================
GRAPHIQUES EN BARRES HORIZONTALES - AMÉLIORÉ
==================================================================== */
.snyers-horizontal-chart-container {
background-color: var(--theme-secondary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
box-shadow: var(--theme-section-shadow);
transition: all var(--transition-speed) ease;
opacity: 0;
transform: translateY(50px);
}
.snyers-horizontal-chart-container.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.snyers-horizontal-chart-container:hover {
box-shadow: var(--theme-card-shadow);
transform: translateY(-3px);
}
.snyers-horizontal-chart-title {
font-size: var(--font-size-xl);
color: var(--theme-text-titre);
margin-bottom: var(--spacing-md);
text-align: center;
font-weight: 600;
opacity: 0;
transform: translateY(-20px);
transition: all 0.6s ease;
}
.snyers-horizontal-chart-title.animate {
opacity: 1;
transform: translateY(0);
}
.snyers-horizontal-chart-subtitle {
font-size: var(--font-size-md);
color: var(--theme-accent);
margin-bottom: var(--spacing-lg);
text-align: center;
font-style: italic;
opacity: 0;
transform: translateY(-15px);
transition: all 0.6s ease 0.2s;
}
.snyers-horizontal-chart-subtitle.animate {
opacity: 1;
transform: translateY(0);
}
.snyers-horizontal-bar-chart {
max-width: 100%;
margin: var(--spacing-lg) 0;
}
.snyers-horizontal-bar-item {
display: flex;
align-items: center;
margin-bottom: var(--spacing-md);
transition: all var(--transition-speed) ease;
opacity: 0;
transform: translateX(-50px);
}
.snyers-horizontal-bar-item.animate {
opacity: 1;
transform: translateX(0);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.snyers-horizontal-bar-item:hover {
transform: translateX(8px);
}
.snyers-horizontal-bar-label {
width: 100px;
text-align: right;
padding-right: var(--spacing-md);
font-weight: 500;
font-size: var(--font-size-sm);
color: var(--theme-text);
}
.snyers-horizontal-bar-container {
flex-grow: 1;
background-color: var(--theme-tertiary);
height: 35px;
border-radius: var(--border-radius-sm);
overflow: hidden;
position: relative;
margin-right: var(--spacing-md);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.snyers-horizontal-bar-fill {
height: 100%;
display: flex;
align-items: center;
padding: 0 var(--spacing-sm);
color: white;
font-weight: 600;
font-size: var(--font-size-sm);
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
border-radius: var(--border-radius-sm);
width: 0%;
transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.snyers-horizontal-bar-fill::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 1s ease;
}
.snyers-horizontal-bar-fill.shine::after {
left: 100%;
}
.snyers-horizontal-bar-percentage {
min-width: 50px;
text-align: center;
font-weight: 600;
font-size: var(--font-size-sm);
color: var(--theme-text);
}
/* ====================================================================
GRAPHIQUES CIRCULAIRES - NOUVEAU ET AMÉLIORÉ
==================================================================== */
.snyers-pie-chart-container {
background-color: var(--theme-secondary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
box-shadow: var(--theme-section-shadow);
text-align: center;
opacity: 0;
transform: scale(0.8);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.snyers-pie-chart-container.animate {
opacity: 1;
transform: scale(1);
}
.snyers-pie-chart {
width: 300px;
height: 300px;
border-radius: 50%;
margin: 0 auto var(--spacing-lg) auto;
position: relative;
background: conic-gradient(
#70a54b 0% 0%,
#ff5ecf 0% 0%,
#5e87b8 0% 0%,
#bf5b17 0% 0%,
#bb3e4c 0% 0%
);
transition: all 1.5s ease;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
transform: rotate(-90deg);
cursor: pointer;
}
.snyers-pie-chart.animate {
background: conic-gradient(
#70a54b 0% 65%,
#ff5ecf 65% 78%,
#5e87b8 78% 85%,
#bf5b17 85% 92%,
#bb3e4c 92% 100%
);
}
.snyers-pie-chart::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background-color: var(--theme-background);
border-radius: 50%;
box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
/* Hover effect for pie chart */
.snyers-pie-chart:hover {
transform: rotate(-90deg) scale(1.05);
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.snyers-pie-chart:hover::after {
width: 110px;
height: 110px;
background-color: var(--theme-tertiary);
}
.snyers-chart-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.snyers-legend-item {
display: flex;
align-items: center;
margin: var(--spacing-xs);
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-md);
cursor: pointer;
position: relative;
}
.snyers-legend-item.animate {
opacity: 1;
transform: translateY(0);
}
.snyers-legend-item:hover {
background-color: var(--theme-tertiary);
transform: translateY(-3px);
box-shadow: var(--theme-section-shadow);
}
.snyers-legend-color {
width: 15px;
height: 15px;
border-radius: var(--border-radius-xs);
margin-right: var(--spacing-xs);
transition: transform 0.3s ease;
}
.snyers-legend-item:hover .snyers-legend-color {
transform: scale(1.3);
}
.snyers-legend-text {
font-size: var(--font-size-sm);
color: var(--theme-text);
}
/* Tooltip styling */
.snyers-chart-tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-md);
font-size: var(--font-size-sm);
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 100;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
white-space: nowrap;
max-width: 250px;
text-align: left;
}
.snyers-chart-tooltip.show {
opacity: 1;
transform: translateY(0);
}
/* Pie chart segment highlights */
.pie-segment {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.pie-segment:hover {
opacity: 0.3;
background: radial-gradient(circle at center, rgba(255,255,255,0.5) 30%, transparent 70%);
}
/* Mobile/touch specific styles */
@media (max-width: 768px) {
.snyers-pie-chart {
width: 250px;
height: 250px;
}
.snyers-pie-chart::after {
width: 100px;
height: 100px;
}
.snyers-pie-chart:hover {
transform: rotate(-90deg); /* No scale on mobile to preserve space */
}
/* Bigger touch targets for mobile */
.snyers-legend-item {
padding: var(--spacing-sm) var(--spacing-md);
margin: var(--spacing-xs) var(--spacing-sm);
}
.snyers-legend-color {
width: 20px;
height: 20px;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.snyers-pie-chart, .snyers-pie-chart:hover, .snyers-legend-item {
transition: none;
transform: none;
animation: none;
}
}
/* ====================================================================
GRAPHIQUES EN AIRES - NOUVEAU TYPE
==================================================================== */
.snyers-area-chart-container {
background-color: var(--theme-secondary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
box-shadow: var(--theme-section-shadow);
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.snyers-area-chart-container.animate {
opacity: 1;
transform: translateY(0);
}
.snyers-area-chart {
width: 100%;
height: 300px;
position: relative;
border-bottom: 2px solid var(--theme-primary);
border-left: 2px solid var(--theme-primary);
margin: var(--spacing-lg) 0;
overflow: hidden;
}
.snyers-area-path {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background: linear-gradient(to top,
rgba(212, 175, 55, 0.6) 0%,
rgba(212, 175, 55, 0.3) 50%,
rgba(212, 175, 55, 0.1) 100%);
transition: height 2s cubic-bezier(0.4, 0, 0.2, 1);
clip-path: polygon(
0% 100%,
10% 70%,
25% 80%,
40% 60%,
55% 45%,
70% 55%,
85% 30%,
100% 40%,
100% 100%
);
}
.snyers-area-path.animate {
height: 100%;
}
.snyers-area-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease 1s;
}
.snyers-area-line.animate {
opacity: 1;
}
.snyers-area-line::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--theme-primary);
clip-path: polygon(
0% 0%,
10% 30%,
25% 20%,
40% 40%,
55% 55%,
70% 45%,
85% 70%,
100% 60%,
100% 0%
);
}
/* Styles pour la deuxième ligne */
.snyers-area-path.secondary-area {
background: linear-gradient(to top,
rgba(75, 145, 220, 0.6) 0%,
rgba(75, 145, 220, 0.3) 50%,
rgba(75, 145, 220, 0.1) 100%);
clip-path: polygon(
0% 100%,
15% 60%,
30% 75%,
45% 50%,
60% 65%,
75% 40%,
90% 55%,
100% 35%,
100% 100%
);
z-index: 1;
}
.snyers-area-line.secondary-line::before {
background: #4b91dc;
clip-path: polygon(
0% 0%,
15% 40%,
30% 25%,
45% 50%,
60% 35%,
75% 60%,
90% 45%,
100% 65%,
100% 0%
);
z-index: 2;
}
/* Styles pour la première ligne (renommée) */
.snyers-area-path.primary-area {
z-index: 3;
}
.snyers-area-line.primary-line::before {
z-index: 4;
}
/* Styles pour la légende */
.chart-legend {
display: flex;
justify-content: center;
margin-top: var(--spacing-md);
gap: var(--spacing-lg);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.legend-color {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
}
.legend-color.primary-color {
background: rgba(212, 175, 55, 0.8);
}
.legend-color.secondary-color {
background: rgba(75, 145, 220, 0.8);
}
/* ====================================================================
ANIMATIONS ET RESPONSIVE
==================================================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.snyers-horizontal-bar-label {
width: 80px;
font-size: var(--font-size-xs);
}
.snyers-horizontal-bar-container {
height: 30px;
}
.snyers-pie-chart {
width: 250px;
height: 250px;
}
.snyers-area-chart {
height: 200px;
}
}
@media (max-width: 576px) {
.snyers-pie-chart {
width: 200px;
height: 200px;
}
.stats-container {
grid-template-columns: 1fr;
}
}
/* ====================================================================
ANIMATIONS ET RESPONSIVE
==================================================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.snyers-horizontal-bar-label {
width: 80px;
font-size: var(--font-size-xs);
}
.snyers-horizontal-bar-container {
height: 30px;
}
.snyers-pie-chart {
width: 250px;
height: 250px;
}
.snyers-area-chart {
height: 200px;
}
}
@media (max-width: 576px) {
.snyers-pie-chart {
width: 200px;
height: 200px;
}
.stats-container {
grid-template-columns: 1fr;
}
}
/* ====================================================================
GRAPHIQUE RADAR - INTÉGRATION SYSTÈME DE THÈMES
==================================================================== */
/* === CONTAINER PRINCIPAL === */
.radar-container {
background: var(--theme-background);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--theme-card-shadow);
max-width: var(--main-max-width);
width: 100%;
text-align: center;
position: relative;
margin: var(--spacing-xl) auto;
border: 1px solid var(--theme-primary);
}
/* === TITRES === */
.radar-title {
font-size: var(--font-size-2xl);
font-weight: bold;
color: var(--theme-accent);
margin-bottom: var(--spacing-sm);
font-family: var(--font-family);
animation: fadeInUp 1s ease-out 0.5s both;
}
.radar-subtitle {
font-size: var(--font-size-base);
color: var(--theme-text);
opacity: 0.8;
margin-bottom: var(--spacing-xl);
font-family: var(--font-family);
animation: fadeInUp 1s ease-out 0.7s both;
}
/* === CONTENEUR GRAPHIQUE AVEC ÉTIQUETTES EXTERNES === */
/* Conteneur graphique avec centrage forcé */
.radar-chart-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto var(--spacing-xl);
text-align: center; /* Centrage du contenu */
}
/* Simplifier le conteneur du graphique */
.radar-chart {
width: 500px;
height: 500px;
position: relative;
animation: fadeInScale 1.5s ease-out 1s both;
/* Centrage simple et efficace */
margin: 0 auto;
display: block;
}
/* Alternative si le problème persiste - Utiliser cette version */
.radar-chart-fixed {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
animation: fadeInScale 1.5s ease-out 1s both;
}
.radar-svg-fixed {
width: 100%;
height: 100%;
overflow: visible;
background: radial-gradient(circle, var(--theme-tertiary), transparent);
border-radius: var(--border-radius-full);
border: 2px solid var(--theme-primary);
display: block;
}
/* === ÉTIQUETTES EXTERNES (au-dessus et en dessous du graphique) === */
.radar-labels-container {
width: 100%;
margin-bottom: var(--spacing-lg);
position: relative;
z-index: 1; /* S'assurer qu'elles restent au-dessus */
}
/* Alternative avec positionnement absolu si flexbox ne suffit pas */
.radar-chart-centered {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
animation: fadeInScale 1.5s ease-out 1s both;
}
.radar-svg-centered {
width: 480px; /* Légèrement réduit pour laisser de la marge */
height: 480px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: visible;
background: radial-gradient(circle, var(--theme-tertiary), transparent);
border-radius: var(--border-radius-full);
border: 2px solid var(--theme-primary);
}
.radar-labels-top,
.radar-labels-bottom {
display: flex;
justify-content: space-around;
align-items: center;
margin: var(--spacing-md) 0;
}
.radar-label-external {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--theme-text);
background: var(--theme-secondary);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-md);
border: 1px solid var(--theme-primary);
cursor: pointer;
transition: var(--transition-smooth);
font-family: var(--font-family);
text-align: center;
min-width: 120px;
box-shadow: var(--theme-section-shadow);
}
.radar-label-external:hover {
background: var(--theme-primary);
color: var(--theme-background);
transform: translateY(-2px);
box-shadow: var(--theme-card-shadow);
}
/* Supprimer le positionnement absolu du SVG qui crée le conflit */
.radar-svg {
width: 100%;
height: 100%;
overflow: visible;
background: radial-gradient(circle, var(--theme-tertiary), transparent);
border-radius: var(--border-radius-full);
border: 2px solid var(--theme-primary);
/* SUPPRIMER ces lignes qui causent le problème : */
/* position: absolute; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
/* Remplacer par un centrage simple : */
display: block;
margin: 0 auto;
}
/* === GRILLE ET AXES === */
.radar-grid {
fill: none;
stroke: var(--theme-primary);
stroke-width: 1;
opacity: 0.4;
}
.radar-axis {
stroke: var(--theme-primary);
stroke-width: 1.5;
opacity: 0.6;
transition: var(--transition-speed);
}
.radar-axis:hover,
.radar-axis.highlighted {
stroke: var(--theme-accent);
stroke-width: 3;
opacity: 1;
}
/* === ZONE DE DONNÉES === */
.radar-area {
fill: var(--theme-primary);
fill-opacity: 0.3;
stroke: var(--theme-accent);
stroke-width: 2;
transition: var(--transition-smooth);
animation: fillArea 2s ease-out 2.5s both;
}
.radar-area:hover {
fill-opacity: 0.5;
stroke-width: 3;
}
/* === POINTS === */
.radar-point {
fill: var(--theme-accent);
stroke: var(--theme-background);
stroke-width: 3;
r: 6;
transition: var(--transition-smooth);
cursor: pointer;
animation: popPoint 0.6s ease-out both;
}
.radar-point:nth-child(7) { animation-delay: 3s; }
.radar-point:nth-child(8) { animation-delay: 3.2s; }
.radar-point:nth-child(9) { animation-delay: 3.4s; }
.radar-point:nth-child(10) { animation-delay: 3.6s; }
.radar-point:nth-child(11) { animation-delay: 3.8s; }
.radar-point:nth-child(12) { animation-delay: 4s; }
.radar-point:hover {
r: 10;
fill: var(--theme-accent);
stroke-width: 4;
filter: brightness(1.2);
}
/* === LÉGENDE === */
.radar-legend {
display: flex;
justify-content: center;
margin-top: var(--spacing-lg);
animation: fadeInUp 1s ease-out 5.5s both;
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
background: var(--theme-secondary);
border-radius: var(--border-radius-xl);
transition: var(--transition-smooth);
cursor: pointer;
box-shadow: var(--theme-section-shadow);
border: 1px solid var(--theme-primary);
font-family: var(--font-family);
}
.legend-item:hover {
background: var(--theme-primary);
color: var(--theme-background);
transform: translateY(-3px);
box-shadow: var(--theme-card-shadow);
}
.legend-color {
width: 16px;
height: 16px;
border-radius: var(--border-radius-full);
background: var(--theme-accent);
border: 2px solid var(--theme-background);
}
.legend-text {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--theme-text);
transition: var(--transition-speed);
}
.legend-item:hover .legend-text {
color: var(--theme-background);
}
/* === TOOLTIP === */
.tooltip {
position: fixed;
background: var(--theme-accent);
color: var(--theme-text);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-md);
font-size: var(--font-size-sm);
font-family: var(--font-family);
pointer-events: none;
opacity: 0;
transition: var(--transition-smooth);
z-index: var(--z-tooltip);
box-shadow: var(--theme-modal-shadow);
max-width: 250px;
transform: translateY(10px);
border: 1px solid var(--theme-primary);
}
.tooltip.show {
opacity: 1;
transform: translateY(0);
}
.tooltip-title {
font-weight: bold;
margin-bottom: var(--spacing-xs);
color: var(--theme-secondary);
font-size: var(--font-size-sm);
}
.tooltip-value {
color: var(--theme-tertiary);
font-weight: 600;
}
/* === ANIMATIONS === */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fillArea {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes popPoint {
0% {
opacity: 0;
transform: scale(0);
}
70% {
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.radar-chart,
.radar-chart-centered {
width: 400px;
height: 400px;
}
.radar-svg-centered {
width: 380px;
height: 380px;
}
.radar-label-external {
font-size: var(--font-size-xs);
min-width: 100px;
padding: calc(var(--spacing-xs) * 0.75) var(--spacing-xs);
}
.radar-labels-top,
.radar-labels-bottom {
flex-wrap: wrap;
gap: var(--spacing-xs);
}
}
@media (max-width: 480px) {
.radar-chart,
.radar-chart-centered {
width: 320px;
height: 320px;
}
.radar-svg-centered {
width: 300px;
height: 300px;
}
.radar-container {
padding: var(--spacing-lg);
margin: var(--spacing-lg) var(--spacing-sm);
}
.radar-label-external {
font-size: var(--font-size-xs);
min-width: 80px;
}
}
/* === ÉTATS INTERACTIFS === */
.radar-label-external.active,
.radar-axis.highlighted {
background: var(--theme-accent);
color: var(--theme-background);
}
/* === ACCESSIBILITÉ === */
@media (prefers-reduced-motion: reduce) {
.radar-container *,
.radar-chart *,
.tooltip {
animation: none !important;
transition: none !important;
}
}
/* === FOCUS POUR ACCESSIBILITÉ === */
.radar-label-external:focus,
.legend-item:focus {
outline: 2px solid var(--theme-accent);
outline-offset: 2px;
}
/* ====================================================================
AUDIO ET VIDÉO
==================================================================== */
/* ====================================================================
AUDIO PLAYER
==================================================================== */
audio {
width: 100%;
margin: var(--spacing-lg) 0;
border-radius: var(--border-radius-md);
background-color: var(--theme-tertiary);
box-shadow: var(--theme-section-shadow);
height: 40px;
transition: all var(--transition-speed) ease;
}
audio:hover, audio:focus {
transform: scale(1.01);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.audio-container {
background-color: var(--theme-secondary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-md);
margin: var(--spacing-lg) 0;
display: flex;
flex-direction: column;
align-items: center;
}
.audio-title {
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--theme-accent);
}
.audio-description {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-md);
color: var(--theme-text);
text-align: center;
}
/* ====================================================================
IMAGES ET GALLERIES
==================================================================== */
.image-gallery {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
}
/* Base image container styles */
.gallery-item {
position: relative;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--theme-section-shadow);
transition: all var(--transition-speed) ease;
cursor: zoom-in;
margin-bottom: var(--spacing-md);
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: var(--theme-card-shadow);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.gallery-item:hover .gallery-image {
transform: scale(1.1);
}
/* Fullwidth image */
.gallery-item-full {
flex: 0 0 100%;
}
/* Column layouts */
.gallery-item-half {
flex: 0 0 calc(50% - var(--spacing-md) / 2);
}
.gallery-item-third {
flex: 0 0 calc(33.333% - var(--spacing-md) * 2/3);
}
.gallery-item-quarter {
flex: 0 0 calc(25% - var(--spacing-md) * 3/4);
}
.gallery-item-fifth {
flex: 0 0 calc(20% - var(--spacing-md) * 4/5);
}
/* Image caption container */
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--SNYERS-gallery-caption-bg, rgba(0, 0, 0, 0.7));
color: var(--SNYERS-gallery-caption-text, white);
padding: var(--spacing-sm);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-caption {
transform: translateY(0);
}
/* Image title */
.gallery-title {
font-weight: bold;
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-xs);
}
/* Author attribution */
.gallery-author {
font-style: italic;
font-size: var(--font-size-xs);
opacity: 0.7;
margin-bottom: var(--spacing-xs);
}
/* License information */
.gallery-license {
font-style: italic;
font-size: var(--font-size-xs);
font-weight: 600;
}
/* Lightbox functionality */
.gallery-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--SNYERS-lightbox-bg, rgba(0, 0, 0, 0.9));
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.gallery-lightbox.active {
opacity: 1;
pointer-events: auto;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-image {
max-width: 100%;
max-height: 90vh;
border: 2px solid var(--SNYERS-lightbox-border, white);
border-radius: var(--border-radius-md);
}
/* ====================================================================
ÉLÉMENTS MANQUANTS AJOUTÉS - LIGHTBOX TIMELINE
==================================================================== */
/* Ajustement du conteneur principal pour mieux organiser l'espace */
.timeline-lightbox-content {
position: relative;
width: 95vw;
height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* Laisser de l'espace pour les contrôles en bas */
padding-bottom: 80px;
}
/* Contrôles de zoom - centrés horizontalement en bas */
.lightbox-zoom-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 15px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 25px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.lightbox-zoom-in,
.lightbox-zoom-out,
.lightbox-zoom-reset {
width: 40px;
height: 40px;
background-color: rgba(var(--theme-primary-rgb, 195, 155, 119), 0.9);
border: none;
border-radius: 50%;
color: white;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.lightbox-zoom-in:hover,
.lightbox-zoom-out:hover,
.lightbox-zoom-reset:hover {
background-color: var(--theme-primary);
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* Style pour les boutons de navigation (flèches gauche/droite) */
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 30px;
pointer-events: none;
z-index: 9;
}
.lightbox-prev,
.lightbox-next {
background-color: rgba(0, 0, 0, 0.7);
border: none;
color: white;
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
pointer-events: auto;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.lightbox-prev:hover,
.lightbox-next:hover {
background-color: rgba(var(--theme-primary-rgb, 195, 155, 119), 0.9);
transform: scale(1.1);
}
.lightbox-prev:disabled,
.lightbox-next:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* Compteur d'images - repositionné au milieu en haut */
.lightbox-counter {
position: absolute;
top: 0.1%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: var(--font-size-sm);
backdrop-filter: blur(10px);
z-index: 10;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Légende repositionnée au-dessus des boutons */
.lightbox-caption {
color: white;
text-align: center;
padding: 12px 25px;
font-size: var(--font-size-sm);
max-width: 80vw;
background-color: rgba(0, 0, 0, 0.8);
border-radius: var(--border-radius-lg);
margin-top: 15px;
backdrop-filter: blur(15px);
max-height: 10vh;
overflow-y: auto;
z-index: 8;
position: relative;
/* Centrer la légende */
margin-left: auto;
margin-right: auto;
/* Style plus élégant */
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* Bouton fermer - style amélioré */
.lightbox-close {
position: absolute;
top: 20px;
left: 20px; /* Changed from right: 80px to left: 20px */
background-color: rgba(220, 53, 69, 0.9);
border: none;
color: white;
font-size: 24px;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
z-index: 10;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.lightbox-close:hover {
background-color: rgba(220, 53, 69, 1);
transform: scale(1.1);
}
/* Animation d'entrée pour les contrôles */
.timeline-lightbox.active .lightbox-zoom-controls {
animation: slideUpFade 0.3s ease-out;
}
.timeline-lightbox.active .lightbox-caption {
animation: fadeInUp 0.4s ease-out 0.1s both;
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ====================================================================
RESPONSIVE ADJUSTMENTS
==================================================================== */
/* Responsive adjustments */
@media (max-width: 992px) {
.gallery-item-fifth,
.gallery-item-quarter {
flex: 0 0 calc(33.333% - var(--spacing-md) * 2/3);
}
}
@media (max-width: 768px) {
.lightbox-zoom-controls {
bottom: 15px;
gap: 12px;
padding: 8px 15px;
}
.lightbox-zoom-in,
.lightbox-zoom-out,
.lightbox-zoom-reset {
width: 35px;
height: 35px;
font-size: 14px;
}
.lightbox-caption {
max-width: 90vw;
padding: 10px 20px;
font-size: 14px;
}
.timeline-lightbox-content {
padding-bottom: 70px;
}
.lightbox-nav {
padding: 0 15px;
}
.lightbox-prev,
.lightbox-next {
width: 45px;
height: 45px;
font-size: 20px;
}
.lightbox-counter {
top: 15px;
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
font-size: 12px;
}
.lightbox-close {
top: 15px;
right: 70px;
width: 40px;
height: 40px;
font-size: 20px;
}
}
@media (max-width: 576px) {
.gallery-item-fifth,
.gallery-item-quarter,
.gallery-item-third,
.gallery-item-half {
flex: 0 0 100%;
}
}
/*
┌─────────────────────────────────────────┐
│ [×] Fermer [1/5] Compteur │
│ │
│ [←] IMAGE PRINCIPALE [→] │
│ │
│ ┌─────────────────┐ │
│ │ Légende ici │ │
│ └─────────────────┘ │
│ │
│ [+] [⟲] [-] │
│ Boutons centrés │
└─────────────────────────────────────────┘
*/
/*
==============================================================
DOCUMENTATION FOR IMAGE GALLERY SYSTEM
==============================================================
HOW TO USE THE IMAGE GALLERY SYSTEM:
1. BASIC STRUCTURE:
Image Title
By Author Name
License info
2. SIZE OPTIONS:
- gallery-item-full (100% width)
- gallery-item-half (50% width)
- gallery-item-third (33.3% width)
- gallery-item-quarter (25% width)
- gallery-item-fifth (20% width)
3. LIGHTBOX IMPLEMENTATION:
Add the following elements to enable lightbox functionality:
4. JAVASCRIPT REQUIRED:
To enable lightbox and interactions, include JavaScript that:
- Opens lightbox when gallery-item is clicked
- Closes lightbox when lightbox-close is clicked
- Sets the lightbox-image src to the clicked image
- Transfers caption text to lightbox-caption
5. CUSTOM VARIABLES:
You can customize appearance with these variables:
- --SNYERS-gallery-caption-bg: Caption background color
- --SNYERS-gallery-caption-text: Caption text color
- --SNYERS-lightbox-bg: Lightbox overlay background
- --SNYERS-lightbox-border: Lightbox image border color
- --SNYERS-lightbox-caption: Lightbox caption color
- --SNYERS-lightbox-close: Close button color
6. RESPONSIVE BEHAVIOR:
The gallery automatically adjusts to:
- Tablets: Quarter/Fifth columns become thirds
- Small tablets: Third/Quarter/Fifth columns become halves
- Mobile: All images stack to full width
7. EXAMPLE JAVASCRIPT:
document.querySelectorAll('.gallery-item').forEach(item => {
item.addEventListener('click', () => {
const img = item.querySelector('.gallery-image');
const caption = item.querySelector('.gallery-caption')?.innerHTML || '';
const lightbox = document.querySelector('.gallery-lightbox');
const lightboxImg = lightbox.querySelector('.lightbox-image');
const lightboxCaption = lightbox.querySelector('.lightbox-caption');
lightboxImg.src = img.src;
lightboxImg.alt = img.alt;
lightboxCaption.innerHTML = caption;
lightbox.classList.add('active');
});
});
document.querySelector('.lightbox-close').addEventListener('click', () => {
document.querySelector('.gallery-lightbox').classList.remove('active');
});
*/
/* ====================================================================
VIDEO PLAYER
==================================================================== */
video {
width: 100%;
margin: var(--spacing-lg) 0;
border-radius: var(--border-radius-lg);
box-shadow: var(--theme-card-shadow);
background-color: #000;
transition: all var(--transition-speed) ease;
max-height: 600px;
object-fit: contain;
}
video:hover, video:focus {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.video-container {
position: relative;
width: 100%;
margin: var(--spacing-xl) 0;
overflow: hidden;
border-radius: var(--border-radius-lg);
}
.video-container video {
margin: 0;
display: block;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity var(--transition-speed) ease;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.video-container:hover .video-overlay {
opacity: 1;
}
.video-controls {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-sm);
display: flex;
justify-content: space-between;
align-items: center;
transform: translateY(100%);
transition: transform var(--transition-speed) ease;
}
.video-container:hover .video-controls {
transform: translateY(0);
}
.video-title {
background-color: var(--theme-primary);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-md);
font-weight: 600;
position: absolute;
top: var(--spacing-md);
left: var(--spacing-md);
font-size: var(--font-size-sm);
opacity: 0.9;
}
/* ====================================================================
SYSTÈME DE RECHERCHE AVANCÉE
==================================================================== */
.search-container {
background: var(--theme-tertiary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
box-shadow: var(--theme-section-shadow);
}
.search-form {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.search-input {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--theme-secondary);
border-radius: var(--border-radius-md);
background: var(--theme-background);
color: var(--theme-text);
font-size: var(--font-size-base);
transition: border-color var(--transition-speed) ease;
}
.search-input:focus {
outline: none;
border-color: var(--theme-primary);
box-shadow: 0 0 0 3px rgba(var(--theme-primary), 0.1);
}
.search-filters {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.search-filter {
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--theme-secondary);
border: 1px solid var(--theme-primary);
border-radius: var(--border-radius-xl);
font-size: var(--font-size-xs);
cursor: pointer;
transition: all var(--transition-speed) ease;
}
.search-filter.active {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
}
.search-results {
max-height: 400px;
overflow-y: auto;
}
.search-result-item {
padding: var(--spacing-md);
border-bottom: 1px solid var(--theme-secondary);
cursor: pointer;
transition: background-color var(--transition-speed) ease;
}
.search-result-item:hover {
background: var(--theme-secondary);
}
.search-result-title {
font-weight: 600;
color: var(--theme-primary);
margin-bottom: var(--spacing-xs);
}
.search-result-content {
font-size: var(--font-size-sm);
color: var(--theme-text);
opacity: 0.8;
}
/* ====================================================================*/
/* ====================================================================
/* ====================================================================
CARTES INTERACTIVES (FLASHCARDS)
==================================================================== */
.flashcard-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.flashcard {
perspective: 1000px;
height: var(--flashcard-min-height);
cursor: pointer;
}
.flashcard-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform var(--transition-smooth);
transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner {
transform: rotateY(180deg);
}
.flashcard-front,
.flashcard-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
box-shadow: var(--theme-card-shadow);
font-size: var(--font-size-lg);
font-weight: 500;
}
.flashcard-front {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
}
.flashcard-back {
background: var(--theme-secondary);
color: var(--theme-text);
transform: rotateY(180deg);
}
.flashcard-front::after {
content: "📚";
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
font-size: var(--font-size-xl);
opacity: 0.7;
}
.flashcard-back::after {
content: "💡";
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
font-size: var(--font-size-xl);
opacity: 0.7;
}
/* ====================================================================
BIBLIOTHÈQUE DE RESSOURCES
==================================================================== */
.resource-library {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.resource-card {
background: var(--theme-tertiary);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--theme-section-shadow);
transition: all var(--transition-speed) ease;
position: relative;
}
.resource-card:hover {
transform: translateY(-5px);
box-shadow: var(--theme-card-shadow);
}
.resource-thumbnail {
width: 100%;
height: 200px;
background: var(--theme-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-3xl);
color: var(--theme-primary);
}
.resource-content {
padding: var(--spacing-lg);
}
.resource-type {
display: inline-block;
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-xl);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--spacing-sm);
}
.resource-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--theme-text);
}
.resource-description {
color: var(--theme-text);
opacity: 0.8;
line-height: 1.6;
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
}
.resource-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-md);
font-size: var(--font-size-xs);
color: var(--theme-text);
opacity: 0.7;
}
.resource-actions {
display: flex;
gap: var(--spacing-sm);
}
/* ====================================================================*/
/* ====================================================================
/* ====================================================================*/
/* ====================================================================
/* ====================================================================
EXERCICES INTERACTIFS (QCM)
==================================================================== */
.quiz-container {
background: var(--theme-tertiary);
border-radius: var(--border-radius-xl);
padding: var(--spacing-xl);
margin: var(--spacing-lg) 0;
box-shadow: var(--theme-section-shadow);
}
.quiz-header {
text-align: center;
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-lg);
border-bottom: 2px solid var(--theme-secondary);
}
.quiz-title {
font-size: var(--font-size-2xl);
color: var(--theme-primary);
margin-bottom: var(--spacing-sm);
}
.quiz-progress {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.quiz-progress-bar {
width: 200px;
height: var(--progress-bar-height);
background: var(--theme-secondary);
border-radius: var(--border-radius-full);
overflow: hidden;
}
.quiz-progress-fill {
height: 100%;
background: var(--theme-primary);
border-radius: var(--border-radius-full);
transition: width var(--transition-smooth);
}
.quiz-question {
background: var(--theme-background);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
border-left: 4px solid var(--theme-primary);
}
.quiz-question-number {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--theme-primary);
margin-bottom: var(--spacing-sm);
}
.quiz-question-text {
font-size: var(--font-size-lg); /* Maintenant utilise le multiplicateur */
font-weight: 500;
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
.quiz-options {
display: grid;
gap: var(--spacing-md);
}
.quiz-option {
background: var(--theme-tertiary);
border: 2px solid var(--theme-secondary);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
cursor: pointer;
transition: all var(--transition-speed) ease;
display: flex;
align-items: center;
gap: var(--spacing-md);
min-height: var(--quiz-option-height);
}
.quiz-option:hover {
border-color: var(--theme-primary);
background: var(--theme-secondary);
transform: translateX(5px);
}
.quiz-option.selected {
border-color: var(--theme-primary);
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
}
.quiz-option.correct {
border-color: #22c55e;
background: #f0fdf4;
color: #15803d;
}
.quiz-option.incorrect {
border-color: #ef4444;
background: #fef2f2;
color: #dc2626;
}
.quiz-option-letter {
width: 30px;
height: 30px;
border-radius: var(--border-radius-full);
background: var(--theme-secondary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: var(--font-size-sm);
}
.quiz-result {
text-align: center;
padding: var(--spacing-xl);
background: var(--theme-secondary);
border-radius: var(--border-radius-lg);
margin-top: var(--spacing-lg);
}
.quiz-score {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--theme-primary);
margin-bottom: var(--spacing-md);
}
/* ====================================================================*/
/* ====================================================================
/* ====================================================================*/
/* ====================================================================
/* ====================================================================
FRISE CHRONOLOGIQUE INTERACTIVE
==================================================================== */
.timeline-container {
position: relative;
padding: var(--spacing-xl) 0;
margin: var(--spacing-xl) 0;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: var(--timeline-line-width);
background: linear-gradient(to bottom, var(--theme-primary), var(--theme-secondary));
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: var(--spacing-3xl);
display: flex;
align-items: center;
}
.timeline-item:nth-child(odd) {
flex-direction: row;
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-content {
background: var(--theme-tertiary);
padding: var(--spacing-lg);
border-radius: var(--border-radius-lg);
box-shadow: var(--theme-section-shadow);
width: 45%;
position: relative;
transition: all var(--transition-speed) ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: var(--theme-card-shadow);
}
.timeline-content::before {
content: '';
position: absolute;
top: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
transform: translateY(-50%);
}
.timeline-item:nth-child(odd) .timeline-content::before {
right: -30px;
border-left-color: var(--theme-tertiary);
}
.timeline-item:nth-child(even) .timeline-content::before {
left: -30px;
border-right-color: var(--theme-tertiary);
}
.timeline-marker {
width: 20px;
height: 20px;
background: var(--theme-primary);
border: 4px solid var(--theme-tertiary);
border-radius: var(--border-radius-full);
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: all var(--transition-speed) ease;
}
.timeline-marker:hover {
transform: translateX(-50%) scale(1.3);
background: var(--theme-accent);
}
.timeline-date {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--theme-primary);
margin-bottom: var(--spacing-xs);
}
.timeline-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.timeline-description {
line-height: 1.6;
color: var(--theme-text);
opacity: 0.9;
margin-bottom: var(--spacing-md);
}
/* New styles for media content */
.timeline-media {
margin: var(--spacing-md) 0;
overflow: hidden;
border-radius: var(--border-radius-md);
}
.timeline-image {
width: 100%;
height: auto;
border-radius: var(--border-radius-md);
transition: transform var(--transition-speed) ease;
display: block;
}
.timeline-image:hover {
transform: scale(1.05);
}
.timeline-audio {
width: 100%;
height: 40px;
margin: var(--spacing-sm) 0;
border-radius: var(--border-radius-sm);
}
.timeline-video {
width: 100%;
border-radius: var(--border-radius-md);
max-height: 200px;
object-fit: cover;
}
.timeline-caption {
font-size: var(--font-size-xs);
color: var(--theme-text);
opacity: 0.8;
text-align: center;
margin-top: var(--spacing-xs);
font-style: italic;
}
/* Media positioning options */
.media-before-title {
order: -1;
margin-bottom: var(--spacing-sm);
}
.media-after-title {
order: 0;
margin-top: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.media-after-description {
order: 1;
margin-top: var(--spacing-sm);
}
/* ====================================================================*/
/*Style très avancé pour les images*/
/* ====================================================================*/
/* Indicateur visuel pour les images cliquables */
.timeline-image-container {
position: relative;
overflow: hidden;
cursor: zoom-in;
}
.timeline-image-container::after {
content: '\1F50E'; /* Icône de loupe */
position: absolute;
top: 10px;
right: 10px;
background-color: var(--theme-primary);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0;
transition: opacity var(--transition-speed) ease;
}
.timeline-image-container:hover::after {
opacity: 0.9;
}
/* Styles pour la lightbox */
.timeline-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal, 1000);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
}
.timeline-lightbox.active {
opacity: 1;
visibility: visible;
}
/* Ajustement du conteneur principal pour mieux organiser l'espace */
.timeline-lightbox-content {
position: relative;
width: 95vw;
height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* Laisser de l'espace pour les contrôles en bas */
padding-bottom: 80px;
}
/* Style pour les très grandes images */
.lightbox-image.large-image {
width: 95vw;
height: 85vh;
object-fit: contain;
}
/* Correction pour l'affichage plein écran des images */
.lightbox-image-container {
position: relative;
width: 100%;
height: 100%;
max-width: 95vw;
max-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-lg);
overflow: hidden;
}
.lightbox-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform 0.3s ease;
transform-origin: center;
border-radius: var(--border-radius-lg);
/* Taille minimale pour éviter les images trop petites */
min-width: 70vw;
min-height: 60vh;
}
/* Ajustement de la légende pour qu'elle ne prenne pas trop de place */
.lightbox-caption {
color: white;
text-align: center;
padding: 10px 20px;
font-size: var(--font-size-sm);
max-width: 95vw;
background-color: rgba(0, 0, 0, 0.7);
border-radius: var(--border-radius-md);
margin-top: 10px;
backdrop-filter: blur(10px);
/* Limiter la hauteur de la légende */
max-height: 8vh;
overflow-y: auto;
}
/* Contrôles de la lightbox */
.lightbox-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 15px;
display: flex;
justify-content: space-between;
z-index: 1;
}
.lightbox-close {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
background-color: var(--theme-primary);
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
z-index: 2;
}
.lightbox-close:hover {
background-color: var(--theme-accent);
transform: scale(1.1);
}
/* Style pour les boutons de navigation (flèches gauche/droite) */
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 30px;
pointer-events: none;
z-index: 9;
}
.lightbox-prev,
.lightbox-next {
background-color: rgba(0, 0, 0, 0.7);
border: none;
color: white;
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
pointer-events: auto;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.lightbox-prev:hover,
.lightbox-next:hover {
background-color: rgba(var(--theme-primary-rgb, 195, 155, 119), 0.9);
transform: scale(1.1);
}
.lightbox-prev:disabled,
.lightbox-next:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* Compteur d'images - repositionné en haut à droite */
.lightbox-counter {
position: absolute;
top: 20px;
right: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: var(--font-size-sm);
backdrop-filter: blur(10px);
z-index: 10;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Contrôles de zoom */
.lightbox-zoom-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 15px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 25px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.lightbox-zoom-in,
.lightbox-zoom-out,
.lightbox-zoom-reset {
width: 40px;
height: 40px;
background-color: rgba(var(--theme-primary-rgb, 195, 155, 119), 0.9);
border: none;
border-radius: 50%;
color: white;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.lightbox-zoom-in:hover,
.lightbox-zoom-out:hover,
.lightbox-zoom-reset:hover {
background-color: var(--theme-primary);
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* Responsive pour mobile */
@media (max-width: 768px) {
.lightbox-zoom-controls {
bottom: 15px;
right: 15px;
gap: 6px;
}
.lightbox-zoom-in,
.lightbox-zoom-out,
.lightbox-zoom-reset {
width: 40px;
height: 40px;
font-size: 16px;
}
}
/* ====================================================================
TIMELINE INTERACTIVE
==================================================================== */
.timeline-link {
display: inline-block;
margin-top: var(--spacing-md);
color: rgba(var(--theme-primary-rgb, 195, 155, 119), 0.5); /* Using rgba for transparency */
text-decoration: none;
font-weight: normal; /* Changed from 600 to normal */
font-style: italic; /* Added italic style */
font-size: var(--font-size-xs); /* Using the smallest defined font size */
transition: color var(--transition-speed) ease;
}
.timeline-link:hover {
color: var(--theme-primary); /* Full opacity on hover */
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
.timeline-line {
left: 20px;
}
.timeline-item {
flex-direction: row !important;
}
.timeline-content {
width: calc(100% - 60px);
margin-left: 40px;
}
.timeline-marker {
left: 20px;
}
.timeline-item:nth-child(odd) .timeline-content::before,
.timeline-item:nth-child(even) .timeline-content::before {
left: -30px;
border-right-color: var(--theme-tertiary);
border-left-color: transparent;
}
}
/* ====================================================================*/
/* ====================================================================
/* ====================================================================*/
/* ====================================================================
/* ====================================================================
ARBORESCENCE DE COURS
==================================================================== */
/* ====================================================================
ARBORESCENCE DE COURS
==================================================================== */
.course-tree {
background: var(--theme-tertiary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
box-shadow: var(--theme-section-shadow);
}
.tree-node {
margin-left: var(--spacing-lg);
border-left: 2px solid var(--theme-secondary);
padding-left: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.tree-node.root {
margin-left: 0;
border-left: none;
padding-left: 0;
}
.tree-toggle {
background: none;
border: none;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--theme-primary);
margin-right: var(--spacing-xs);
padding: 4px;
border-radius: 3px;
transition: all var(--transition-speed) ease;
min-width: 20px;
text-align: center;
}
.tree-toggle:hover {
background: var(--theme-secondary);
}
.tree-label {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all var(--transition-speed) ease;
font-size: var(--font-size-sm);
}
.tree-label:hover {
background: var(--theme-secondary);
color: var(--theme-primary);
}
.tree-label.active {
background: var(--theme-primary);
color: var(--theme-button-primary-text, white);
font-weight: 600;
}
.tree-children {
margin-top: var(--spacing-sm);
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-smooth);
}
.tree-node.expanded > .tree-children {
max-height: 2000px;
}
/* Style pour les éléments sans enfants */
.tree-node:not(.has-children) .tree-toggle {
visibility: hidden;
}
/* ====================================================================
MODALES ET OVERLAYS
==================================================================== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
opacity: 0;
visibility: hidden;
transition: all var(--transition-speed) ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background: var(--theme-tertiary);
border-radius: var(--border-radius-xl);
box-shadow: var(--theme-modal-shadow);
max-width: 600px;
width: 90vw;
max-height: 90vh;
overflow: hidden;
transform: translateY(-50px);
transition: all var(--transition-speed) ease;
}
.modal-overlay.active .modal {
transform: translateY(0);
}
.modal-header {
padding: var(--spacing-xl);
border-bottom: 1px solid var(--theme-secondary);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
margin: 0;
font-size: var(--font-size-xl);
font-weight: 600;
}
.modal-close {
background: none;
border: none;
font-size: var(--font-size-2xl);
cursor: pointer;
opacity: 0.7;
transition: opacity var(--transition-speed) ease;
color: var(--theme-text);
}
.modal-close:hover {
opacity: 1;
}
.modal-body {
padding: var(--spacing-xl);
overflow-y: auto;
}
.modal-footer {
padding: var(--spacing-xl);
border-top: 1px solid var(--theme-secondary);
display: flex;
gap: var(--spacing-md);
justify-content: flex-end;
}
/* ====================================================================
ANIMATIONS ÉDUCATIVES
==================================================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translateY(0);
}
40%, 43% {
transform: translateY(-10px);
}
70% {
transform: translateY(-5px);
}
90% {
transform: translateY(-2px);
}
}
/* Classes d'animation */
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.fade-in-left {
animation: fadeInLeft 0.6s ease-out;
}
.fade-in-right {
animation: fadeInRight 0.6s ease-out;
}
.pulse {
animation: pulse 2s infinite;
}
.bounce {
animation: bounce 1s infinite;
}
.hover-lift {
transition: all var(--transition-speed) ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: var(--theme-card-shadow);
}
.hover-scale {
transition: transform var(--transition-speed) ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
/* ====================================================================
RESPONSIVE DESIGN MOBILE-FIRST
==================================================================== */
/* ====================================================================
STYLES POUR L'EXERCICE EMILE-SNYERS
==================================================================== */
:root {
--theme-background: #faf0ce;
--theme-text: #2c3e50;
--theme-text-titre: #2c3e50;
--theme-primary: #c39b77;
--theme-secondary: #f2e3b3;
--theme-tertiary: #fef9e7;
--theme-accent: #9a4c18;
--emile-snyers-theme-card-shadow: 0 4px 12px rgba(0,0,0,0.1);
--emile-snyers-theme-section-shadow: 0 2px 5px rgba(0,0,0,0.1);
--emile-snyers-border-radius-md: 8px;
--emile-snyers-border-radius-lg: 12px;
--emile-snyers-spacing-sm: 0.5rem;
--emile-snyers-spacing-md: 1rem;
--emile-snyers-spacing-lg: 1.5rem;
--emile-snyers-spacing-xl: 2rem;
--emile-snyers-font-size-base: 1rem;
--emile-snyers-font-size-lg: 1.25rem;
--emile-snyers-font-size-xl: 1.5rem;
--emile-snyers-font-size-2xl: 1.875rem;
--emile-snyers-transition-speed: 0.3s;
}
.emile-snyers-container {
max-width: 1200px;
margin: 0 auto;
}
/* === CONTENEUR D'EXERCICE EMILE-SNYERS === */
.emile-snyers-exercise-container {
background: var(--emile-snyers-theme-tertiary);
border-radius: var(--emile-snyers-border-radius-lg);
padding: var(--emile-snyers-spacing-xl);
margin-bottom: var(--emile-snyers-spacing-xl);
box-shadow: var(--emile-snyers-theme-card-shadow);
border: 2px solid var(--theme-primary);
}
.emile-snyers-exercise-title {
font-size: var(--emile-snyers-font-size-xl);
color: var(--theme-primary);
margin-bottom: var(--emile-snyers-spacing-md);
display: flex;
align-items: center;
gap: var(--emile-snyers-spacing-sm);
}
.emile-snyers-exercise-description {
background: var(--theme-secondary);
padding: var(--emile-snyers-spacing-md);
border-radius: var(--emile-snyers-border-radius-md);
margin-bottom: var(--emile-snyers-spacing-lg);
border-left: 4px solid var(--theme-accent);
}
/* === ZONE DES ÉLÉMENTS À DÉPLACER EMILE-SNYERS === */
.emile-snyers-drag-source {
background: var(--theme-secondary);
border-radius: var(--emile-snyers-border-radius-md);
padding: var(--emile-snyers-spacing-lg);
margin-bottom: var(--emile-snyers-spacing-lg);
min-height: 120px;
border: 2px dashed var(--theme-primary);
}
.emile-snyers-drag-source h3 {
color: var(--theme-accent);
margin-bottom: var(--emile-snyers-spacing-md);
text-align: center;
}
.emile-snyers-draggable-items {
display: flex;
flex-wrap: wrap;
gap: var(--emile-snyers-spacing-md);
justify-content: center;
}
/* === ÉLÉMENTS DÉPLAÇABLES EMILE-SNYERS === */
.emile-snyers-draggable-item {
background: var(--theme-primary);
color: white;
padding: var(--emile-snyers-spacing-md);
border-radius: var(--emile-snyers-border-radius-md);
cursor: grab;
transition: all var(--emile-snyers-transition-speed) ease;
box-shadow: var(--emile-snyers-theme-section-shadow);
min-width: 120px;
text-align: center;
font-weight: 600;
position: relative;
overflow: hidden;
}
.emile-snyers-draggable-item::before {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
transition: all 0.5s ease;
}
.emile-snyers-draggable-item:hover::before {
top: -150%;
left: -150%;
}
.emile-snyers-draggable-item:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: var(--emile-snyers-theme-card-shadow);
cursor: grab;
}
.emile-snyers-draggable-item:active {
cursor: grabbing;
transform: scale(1.1);
}
.emile-snyers-draggable-item.emile-snyers-dragging {
opacity: 0.8;
transform: rotate(5deg) scale(1.1);
z-index: 1000;
}
/* === ZONES DE DÉPÔT EMILE-SNYERS === */
.emile-snyers-drop-zones {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--emile-snyers-spacing-lg);
margin-top: var(--emile-snyers-spacing-lg);
}
.emile-snyers-drop-zone {
background: var(--emile-snyers-theme-tertiary);
border: 3px dashed var(--theme-primary);
border-radius: var(--emile-snyers-border-radius-lg);
padding: var(--emile-snyers-spacing-lg);
min-height: 250px;
transition: all var(--emile-snyers-transition-speed) ease;
position: relative;
}
.emile-snyers-drop-zone h4 {
color: var(--theme-primary);
text-align: center;
margin-bottom: var(--emile-snyers-spacing-md);
font-size: var(--emile-snyers-font-size-lg);
}
.emile-snyers-drop-zone.emile-snyers-drag-over {
background: var(--theme-secondary);
border-color: var(--theme-accent);
transform: scale(1.02);
box-shadow: var(--emile-snyers-theme-card-shadow);
}
.emile-snyers-dropped-items {
display: flex;
flex-direction: column;
gap: var(--emile-snyers-spacing-sm);
}
.emile-snyers-dropped-item {
background: var(--theme-primary);
color: white;
padding: var(--emile-snyers-spacing-sm);
border-radius: var(--emile-snyers-border-radius-md);
text-align: center;
cursor: pointer;
transition: all var(--emile-snyers-transition-speed) ease;
}
.emile-snyers-dropped-item:hover {
transform: translateY(-2px);
box-shadow: var(--emile-snyers-theme-section-shadow);
}
/* === EXERCICE CHRONOLOGIQUE EMILE-SNYERS === */
.emile-snyers-chronological-exercise .emile-snyers-drop-zones {
grid-template-columns: repeat(5, 1fr);
gap: var(--emile-snyers-spacing-md);
}
.emile-snyers-chronological-exercise .emile-snyers-drop-zone {
min-height: 150px;
}
.emile-snyers-step-number {
position: absolute;
top: -10px;
left: 10px;
background: var(--theme-accent);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
}
/* === EXERCICE SCHÉMA EMILE-SNYERS === */
.emile-snyers-schema-exercise {
position: relative;
}
.emile-snyers-schema-container {
position: relative;
background: var(--emile-snyers-theme-tertiary);
border-radius: var(--emile-snyers-border-radius-lg);
padding: var(--emile-snyers-spacing-lg);
margin: var(--emile-snyers-spacing-lg) 0;
text-align: center;
}
.emile-snyers-pyramid-schema {
width: 100%;
max-width: 600px;
height: 400px;
margin: 0 auto;
background: linear-gradient(45deg, #f4e2a3, #e6d690);
clip-path: polygon(50% 10%, 0% 90%, 100% 90%);
position: relative;
border: 2px solid var(--theme-primary);
}
.emile-snyers-schema-drop-zone {
position: absolute;
width: 60px;
height: 60px;
border: 2px dashed var(--theme-primary);
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
transition: all var(--emile-snyers-transition-speed) ease;
}
.emile-snyers-schema-drop-zone:hover {
background: var(--theme-secondary);
transform: scale(1.1);
}
.emile-snyers-schema-drop-zone.emile-snyers-drag-over {
background: var(--theme-accent);
color: white;
transform: scale(1.2);
}
/* Positions des zones sur la pyramide EMILE-SNYERS */
.emile-snyers-zone-top { top: 15%; left: 47%; }
.emile-snyers-zone-middle { top: 45%; left: 47%; }
.emile-snyers-zone-bottom { top: 75%; left: 47%; }
.emile-snyers-zone-entrance { top: 85%; left: 47%; }
/* === CONTRÔLES D'EXERCICE EMILE-SNYERS === */
.emile-snyers-exercise-controls {
display: flex;
gap: var(--emile-snyers-spacing-md);
justify-content: center;
margin-top: var(--emile-snyers-spacing-lg);
}
.emile-snyers-btn {
padding: var(--emile-snyers-spacing-md) var(--emile-snyers-spacing-lg);
border: none;
border-radius: var(--emile-snyers-border-radius-lg);
font-size: var(--emile-snyers-font-size-base);
font-weight: 600;
cursor: pointer;
transition: all var(--emile-snyers-transition-speed) ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.emile-snyers-btn-primary {
background: var(--theme-primary);
color: white;
}
.emile-snyers-btn-primary:hover {
background: var(--theme-accent);
transform: translateY(-2px);
box-shadow: var(--emile-snyers-theme-card-shadow);
}
.emile-snyers-btn-secondary {
background: var(--theme-secondary);
color: var(--theme-text);
border: 2px solid var(--theme-primary);
}
.emile-snyers-btn-secondary:hover {
background: var(--theme-primary);
color: white;
transform: translateY(-2px);
}
.emile-snyers-btn-success {
background: #28a745;
color: white;
font-size: var(--emile-snyers-font-size-lg);
padding: var(--emile-snyers-spacing-lg) var(--emile-snyers-spacing-xl);
}
.emile-snyers-btn-success:hover {
background: #218838;
transform: translateY(-2px);
box-shadow: var(--emile-snyers-theme-card-shadow);
}
/* === FEEDBACK EMILE-SNYERS === */
.emile-snyers-feedback {
margin-top: var(--emile-snyers-spacing-lg);
padding: var(--emile-snyers-spacing-md);
border-radius: var(--emile-snyers-border-radius-md);
text-align: center;
font-weight: 600;
opacity: 0;
transform: translateY(20px);
transition: all var(--emile-snyers-transition-speed) ease;
}
.emile-snyers-feedback.emile-snyers-show {
opacity: 1;
transform: translateY(0);
}
.emile-snyers-feedback.emile-snyers-success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.emile-snyers-feedback.emile-snyers-warning {
background: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.emile-snyers-feedback.emile-snyers-error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* === ANIMATIONS EMILE-SNYERS === */
.emile-snyers-animate-correct {
animation: emile-snyers-pulse-correct 0.6s ease-in-out;
}
.emile-snyers-animate-incorrect {
animation: emile-snyers-shake-incorrect 0.5s ease-in-out;
}
@keyframes emile-snyers-pulse-correct {
0% { transform: scale(1); }
50% { transform: scale(1.1); background-color: #28a745; }
100% { transform: scale(1); }
}
@keyframes emile-snyers-shake-incorrect {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* === RESPONSIVE EMILE-SNYERS === */
@media (max-width: 768px) {
.emile-snyers-container {
padding: var(--emile-snyers-spacing-sm);
}
.emile-snyers-drop-zones {
grid-template-columns: 1fr;
gap: var(--emile-snyers-spacing-md);
}
.emile-snyers-chronological-exercise .emile-snyers-drop-zones {
grid-template-columns: 1fr;
}
.emile-snyers-exercise-controls {
flex-direction: column;
align-items: center;
}
.emile-snyers-btn {
width: 100%;
max-width: 250px;
}
.emile-snyers-pyramid-schema {
height: 300px;
}
.emile-snyers-schema-drop-zone {
width: 50px;
height: 50px;
font-size: 0.7rem;
}
}
/* ====================================================================
MODULES D'INTÉGRATION : MOTS CROISÉS
==================================================================== */
/*
Description: Styles pour les mots croisés interactifs
Author: Emile Snyers
Date: 2025-06-15
*/
/* Variables CSS héritées du système existant */
:root {
--emile-snyers-crossword-universal-success: #28a745;
--emile-snyers-crossword-universal-warning: #ffc107;
--emile-snyers-crossword-universal-error: #dc3545;
--emile-snyers-crossword-universal-shadow: 0 4px 12px rgba(0,0,0,0.1);
--emile-snyers-crossword-universal-border-radius: 8px;
--emile-snyers-crossword-universal-font-family: 'Georgia', serif;
--emile-snyers-crossword-universal-transition: all 0.3s ease;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: var(--emile-snyers-crossword-universal-font-family);
background: var(--theme-background);
touch-action: manipulation;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-container {
width: 100%;
max-width: 950px;
margin: 0 auto;
padding: 1rem;
background: var(--theme-tertiary);
border-radius: var(--emile-snyers-crossword-universal-border-radius);
box-shadow: var(--emile-snyers-crossword-universal-shadow);
position: relative;
}
/* CSS Responsive pour Mobile */
@media screen and (max-width: 480px) {
.emile-snyers-crossword-universal-©-tout-droit-réservé-container {
padding: 0.5rem;
margin: 0;
border-radius: 0;
min-height: 100vh;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-title {
font-size: 1.2rem !important;
text-align: center;
margin-bottom: 1rem;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-layout {
flex-direction: column !important;
gap: 1rem !important;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-grid-section {
order: 1;
width: 100% !important;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clues-section {
order: 2;
width: 100% !important;
max-height: 200px;
overflow-y: auto;
}
}
/* CSS Responsive pour Tablettes */
@media screen and (min-width: 481px) and (max-width: 768px) {
.emile-snyers-crossword-universal-©-tout-droit-réservé-container {
padding: 1rem;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-layout {
flex-direction: row !important;
gap: 1.2rem !important;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-grid-section {
flex: 0.2;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clues-section {
flex: 0.8;
}
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-container::before {
content: "© Emile SNYERS 2025 - Tous droits réservés";
position: absolute;
top: 10px;
right: 15px;
font-size: 0.7rem;
color: var(--theme-accent);
opacity: 0.7;
font-style: italic;
pointer-events: none;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-title {
color: var(--theme-accent);
text-align: center;
margin-bottom: 2rem;
font-size: 2rem;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-layout {
display: flex;
gap: 2rem;
align-items: flex-start;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-grid-section {
flex: 1;
display: flex;
justify-content: center;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-grid {
display: grid;
gap: 2px;
background: var(--theme-background);
padding: 10px;
border-radius: var(--emile-snyers-crossword-universal-border-radius);
box-shadow: var(--emile-snyers-crossword-universal-shadow);
width: fit-content;
max-width: 100%;
}
/* Cellules optimisées pour tous les appareils */
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell {
width: 40px;
height: 40px;
background: var(--theme-background);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1rem;
color: var(--theme-text);
position: relative;
cursor: block;
transition: var(--emile-snyers-crossword-universal-transition);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@media (forced-colors: active) {
/* Add forced colors mode styles here */
forced-color-adjust: auto; /* or none */
}
}
/* Optimisation mobile pour les cellules */
@media screen and (max-width: 480px) {
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell {
width: 35px;
height: 35px;
font-size: 0.9rem;
touch-action: manipulation;
}
}
/* Optimisation tablette pour les cellules */
@media screen and (min-width: 481px) and (max-width: 768px) {
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.active {
background: var(--theme-button-primary-text);
border-color: var(--theme-primary);
border: 2px solid var(--theme-primary);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.active:hover {
background: var(--theme-primary);
color: var(--theme-button-primary-text);
transform: scale(1.05);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.active:focus {
outline: 1px solid var(--theme-accent);
background: var(--theme-button-primary-text);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.numbered::before {
content: attr(data-number);
position: absolute;
top: 2px;
left: 3px;
font-size: 0.6rem;
color: var(--theme-text); /* couleur normale (noir) */
font-weight: bold;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.numbered:hover::before {
color: var(--theme-button-primary-text); /* couleur au survol (blanc) */
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.numbered:hover {
background: var(--theme-primary);
color: var(--theme-button-primary-text);
transform: scale(1.02);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.correct {
background: var(--emile-snyers-crossword-universal-success);
color: var(--theme-text);
border-color: var(--emile-snyers-crossword-universal-success);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.incorrect {
background: var(--emile-snyers-crossword-universal-error);
color: var(--theme-text);
border-color: var(--emile-snyers-crossword-universal-error);
animation: shake 0.5s ease-in-out;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clues-section {
flex: 1;
background: var(--theme-secondary);
padding: 1.5rem;
border-radius: var(--emile-snyers-crossword-universal-border-radius);
box-shadow: var(--emile-snyers-crossword-universal-shadow);
max-height: 400px;
overflow-y: auto;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clues-title {
color: var(--theme-accent);
margin-bottom: 1rem;
font-size: 1.3rem;
border-bottom: 2px solid var(--theme-primary);
padding-bottom: 0.5rem;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clues-list {
list-style: none;
padding: 0;
margin: 0;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clue-item {
margin-bottom: 1rem;
padding: 0.8rem;
background: var(--theme-tertiary);
border-radius: 6px;
border-left: 4px solid var(--theme-primary);
transition: var(--emile-snyers-crossword-universal-transition);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clue-item:hover {
background: var(--theme-secondary);
transform: translateX(5px);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clue-item.completed {
background: var(--emile-snyers-crossword-universal-success);
color: var(--theme-text);
border-left-color: #155724;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clue-number {
font-weight: bold;
color: var(--theme-text);
display: block;
margin-bottom: 0.3rem;
transition: color 0.2s ease;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clue-item:hover .emile-snyers-crossword-universal-©-tout-droit-réservé-clue-number {
color: var(--theme-button-primary-text);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clue-item.completed .emile-snyers-crossword-universal-©-tout-droit-réservé-clue-number {
color: var(--theme-text);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clue-text {
color: var(--theme-text);
font-style: italic;
line-height: 1.4;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
flex-wrap: wrap;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-button {
background: var(--theme-primary);
color: var(--theme-text);
border: none;
padding: 1rem 1.5rem;
border-radius: var(--emile-snyers-crossword-universal-border-radius);
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: var(--emile-snyers-crossword-universal-transition);
box-shadow: var(--emile-snyers-crossword-universal-shadow);
font-family: var(--emile-snyers-crossword-universal-font-family);
min-width: 120px;
touch-action: manipulation;
}
/* Boutons optimisés mobile */
@media screen and (max-width: 480px) {
.emile-snyers-crossword-universal-©-tout-droit-réservé-button {
padding: 0.8rem 1rem;
font-size: 0.9rem;
min-width: 100px;
flex: 1;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-controls {
gap: 0.5rem;
}
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-button:hover {
background: var(--theme-accent);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-button.secondary {
background: var(--theme-secondary);
color: var(--theme-text);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-button.secondary:hover {
background: var(--theme-primary);
color: var(--theme-button-primary-text);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-message {
text-align: center;
padding: 1rem;
margin: 1rem 0;
border-radius: var(--emile-snyers-crossword-universal-border-radius);
font-weight: bold;
opacity: 0;
transform: translateY(-20px);
transition: all 0.5s ease;
pointer-events: none;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-message.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-message.success {
background: var(--emile-snyers-crossword-universal-success);
color: var(--theme-text)
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-message.error {
background: var(--emile-snyers-crossword-universal-error);
color: var(--theme-text);
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-message.complete {
background: var(--emile-snyers-crossword-universal-success);
color: var(--theme-text);
font-size: 1.1rem;
border: 3px solid gold;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-message.permanent-message {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
position: relative;
z-index: 100;
}
/* Clavier virtuel mobile */
.mobile-keyboard {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--theme-tertiary);
padding: 1rem;
border-top: 2px solid var(--theme-primary);
z-index: 1000;
box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}
@media screen and (max-width: 768px) {
.mobile-keyboard {
display: block;
}
}
.keyboard-row {
display: flex;
justify-content: center;
gap: 0.3rem;
margin-bottom: 0.5rem;
}
.keyboard-key {
background: var(--theme-background);
border: 2px solid var(--theme-primary);
border-radius: 6px;
padding: 0.8rem;
font-weight: bold;
font-size: 1rem;
color: var(--theme-text);
cursor: pointer;
transition: var(--emile-snyers-crossword-universal-transition);
min-width: 40px;
text-align: center;
touch-action: manipulation;
}
.keyboard-key:hover {
background: var(--theme-primary);
color: var(--theme-button-primary-text);
transform: scale(1.05);
}
.keyboard-key:active {
background: var(--theme-primary);
color: var(--theme-button-primary-text);
transform: scale(0.95);
}
.keyboard-key.special {
background: var(--theme-secondary);
min-width: 60px;
font-size: 0.9rem;
}
/* Animations */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes emile-snyers-crossword-universal-©-tout-droit-réservé-celebration {
0% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.1) rotate(5deg); }
50% { transform: scale(1.2) rotate(-5deg); }
75% { transform: scale(1.1) rotate(5deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/* Mode sombre automatique */
@media (prefers-color-scheme: dark) {
:root {
--theme-background: #2c3e50;
--theme-tertiary: #34495e;
--theme-text: #ecf0f1;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-cell.active {
background: #ecf0f1;
color: #2c3e50;
cursor: pointer;
}
.emile-snyers-crossword-universal-©-tout-droit-réservé-clues-section {
background: #34495e;
color: #ecf0f1;
}
}
/*
================================================================================
SYSTÈME CSS UNIFIÉ POUR SITE ÉDUCATIF HISTOIRE-GÉOGRAPHIE
================================================================================
Version 2.0 - Interface complète et optimisée
Auteur : Emile SNYERS / Assistant IA
Date : 2025-06-10
/* LICENCE ET CONDITIONS D'UTILISATION
----------------------------------------
Emile SNYERS - Tous droits réservés - 2025
📢Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
🚨Usage non commercial uniquement.
Type d'utilisation autorisée:
- Utilisation pour des projets éducatifs ou associatifs.
- Ne pas redistribuer sans autorisation.
Critères d'attribution d'une autorisation:
- Contribution à des projets éducatifs ou associatifs.
- L'entraide et le partage du savoir.
- Contribue à la promotion de l'éducation et de la culture.
---------------------------------------- */
/*
================================================================================
UNIFIED CSS SYSTEM FOR HISTORY-GEOGRAPHY EDUCATIONAL WEBSITE
================================================================================
Version 2.0 - Complete and optimized interface
Author: Emile SNYERS / AI Assistant
Date: 2025-06-10
/* LICENSE AND TERMS OF USE
----------------------------------------
Emile SNYERS - All rights reserved - 2025
📢Any use requires prior authorization from the owner (Emile SNYERS).
🚨Non-commercial use only.
Type of authorized use:
- Use for educational or associative projects.
- Do not redistribute without authorization.
Authorization attribution criteria:
- Contribution to educational or associative projects.
- Mutual aid and knowledge sharing.
---------------------------------------- */
/*
================================================================================
歴史・地理教育サイトのための統一CSSシステム
================================================================================
バージョン 2.0 - 完全かつ最適化されたインターフェース
作者：Emile SNYERS / AIアシスタント
日付：2025-06-10
/* ライセンスと利用規約
----------------------------------------
Emile SNYERS - 全著作権所有 - 2025
📢いかなる使用も所有者（Emile SNYERS）の事前許可が必要です。
🚨非営利目的での使用に限ります。
許可されている使用タイプ：
- 教育またはアソシエイティブプロジェクトでの使用。
- 許可なく再配布しないでください。
許可付与基準：
- 教育またはアソシエイティブプロジェクトへの貢献。
- 相互援助と知識の共有。
---------------------------------------- */
/*
================================================================================
מערכת CSS מאוחדת לאתר חינוכי להיסטוריה-גיאוגרפיה
================================================================================
גרסה 2.0 - ממשק מלא ומותאם
מחבר: Emile SNYERS / עוזר בינה מלאכותית
תאריך: 2025-06-10
/* רישיון ותנאי שימוש
----------------------------------------
Emile SNYERS - כל הזכויות שמורות - 2025
📢כל שימוש דורש אישור מראש מהבעלים (Emile SNYERS).
🚨לשימוש לא מסחרי בלבד.
סוג השימוש המורשה:
- שימוש לפרויקטים חינוכיים או חברתיים.
- אין להפיץ מחדש ללא אישור.
קריטריונים להענקת אישור:
- תרומה לפרויקטים חינוכיים או חברתיים.
- עזרה הדדית ושיתוף ידע.
---------------------------------------- */