/*
================================================================================
Style uniquement pour le chapitre se trouvant à droite des différentes parties du cours.
================================================================================
Version 2.0 - Code restructuré et commenté
Auteur : Emile SNYERS
Date : 2025-06-07
Licence: Tous droits réservés - 2025
----------------------------------------
*
* 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.
*----------------------------------------
Description : 
Styles pour le pied de page d'un site web, incluant des colonnes pour les informations de contact, les liens et les mentions légales. Le design est responsive et utilise des variables CSS pour une personnalisation facile.
================================================================================
*/
/*
=================================================================================
Style only for the chapter to the right of the different sections of the course. ====================================================================================
Version 2.0 - Restructured and commented code
Author: Emile SNYERS
Date: 2025-06-07
License: All rights reserved - 2025
----------------------------------------
*
* 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 community projects.
* - Do not redistribute without permission. *
* Criteria for granting permission:
* - Contribution to educational or community projects.
* - Mutual aid and knowledge sharing.
* - Contributes to the promotion of education and culture.
*----------------------------------------
Description:
Styles for a website footer, including columns for contact information, links, and legal notices. The design is responsive and uses CSS variables for easy customization.
============================================================================================
*/
/*
============================================================================================
コースの各セクションの右側にある章のみのスタイルです。 =================================================================================================
バージョン 2.0 - コードの再構築とコメント追加
作成者: Emile SNYERS
日付: 2025-06-07
ライセンス: All rights reserved - 2025
----------------------------------------
*
* Emile SNYERS - All rights reserved - 2025
*
* 📢使用には、所有者 (Emile SNYERS) からの事前の許可が必要です。
* 🚨非営利目的のみ。
*
* 許可された使用の種類:
* - 教育またはコミュニティプロジェクトでの使用。
* - 許可なく再配布しないでください。 *
* 許可基準：
* - 教育またはコミュニティプロジェクトへの貢献。
* - 相互扶助と知識の共有。
* - 教育と文化の振興への貢献。
*---------------------------------------
説明：
ウェブサイトのフッターのスタイル。連絡先情報、リンク、法的通知用の列が含まれます。レスポンシブデザインで、CSS変数を使用して簡単にカスタマイズできます。
============================================================================================================================
*/
/*
===================================================================================================
仅适用于课程各部分右侧章节的样式。 ==============================================================================================
版本 2.0 - 代码重构及注释
作者：Emile SNYERS
日期：2025-06-07
许可证：保留所有权利 - 2025
----------------------------------------
*
* Emile SNYERS - 保留所有权利 - 2025
*
* 📢任何使用均需事先获得所有者 (Emile SNYERS) 的授权。
* 🚨仅限非商业用途。
*
* 授权使用类型：
* - 用于教育或社区项目。
* - 未经许可，不得重新分发。 *
* 授予许可的标准：
* - 为教育或社区项目做出贡献。
* - 互助和知识共享。
* - 为教育和文化推广做出贡献。
*----------------------------------------
描述：
网站页脚样式，包括联系信息、链接和法律声明栏。该设计具有响应式设计，并使用 CSS 变量以便于自定义。
=======================================================================================================================
*/
/* ====================================================================
SIDEBAR (Menu latéral) 
==================================================================== */
.sidebar {
position: fixed;
left: calc(-1 * var(--sidebar-width));
top: 0;
bottom: 0;
width: var(--sidebar-width);
background-color: var(--theme-primary);
color: var(--theme-sidebar-text);
padding: 15px;
display: flex;
flex-direction: column;
transition: left var(--transition-speed) ease;
z-index: 500;
overflow-y: scroll;
box-shadow: var(--theme-sidebar-shadow);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--theme-primary) var(--theme-secondary);
}

/* Scrollbar Chrome/Edge/Safari */
.sidebar::-webkit-scrollbar {
width: 8px;
}
.sidebar::-webkit-scrollbar-track {
background: var(--theme-secondary);
border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: var(--theme-primary);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar.active {
left: 0;
}

/* Contenu principal */
.sidebar-content {
flex: 1;
width: 100%;
padding-bottom: 60px;
}

.sidebar-header {
padding: 10px 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
position: sticky;
top: 0;
background-color: var(--theme-primary);
z-index: 501;
}

.sidebar-header h3 {
margin: 0;
font-size: var(--font-size-xl); /* Maintenant utilise le multiplicateur */
font-family: var(--theme-font-family, 'Georgia', serif); /* Application de la police */
display: flex;
align-items: center;
gap: 10px;
color: var(--theme-sidebar-text-titre);
}

/* === Sections du menu === */
.menu-section {
margin-bottom: 15px;
border-radius: 5px;
overflow: visible;
position: relative;
}

/* Container pour titre et bouton déroulant */
.section-header {
display: flex;
align-items: center;
margin-bottom: 5px;
}

/* Titre principal cliquable */
.section-title-link {
flex-grow: 1;
background-color: rgba(0, 0, 0, 0.08); /* Léger fondu sur le fond primaire */
color: var(--theme-sidebar-text-titre);
padding: 10px;
font-weight: bold;
cursor: pointer;
border: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
transition: background-color var(--transition-speed) ease;
display: flex;
align-items: center;
text-decoration: none;
font-family: inherit;
font-size: 1em;
}
.section-title-link:hover {
background-color: rgba(0, 0, 0, 0.15);
}

/* Bouton déroulant */
.dropdown-toggle {
background-color: rgba(0, 0, 0, 0.08);
color: var(--theme-sidebar-text);
width: 36px;
height: 36px;
border: none;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: background-color var(--transition-speed) ease;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-toggle:hover {
background-color: rgba(0, 0, 0, 0.15);
}
.dropdown-toggle .arrow {
transition: transform var(--transition-speed) ease;
color: var(--theme-sidebar-text-titre);
}
.dropdown-toggle.active .arrow {
transform: rotate(180deg);
}

.menu-items {
display: flex;
flex-direction: column;
gap: 5px;
}

.submenu {
height: 0;
overflow: hidden;
transition: height var(--transition-speed) ease;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.submenu.active {
height: auto;
padding: 5px;
margin-top: 5px;
}

/* === Boutons dans la sidebar === */
.sidebar button.nav-button {
background-color: var(--theme-secondary);
color: var(--theme-text);
padding: 8px 12px;
font-size: 0.9em;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: left;
transition: all var(--transition-speed) ease;
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
margin-bottom: 5px;
}

.sidebar button i {
margin-right: 8px;
width: 20px;
text-align: center;
transition: transform var(--icon-animation-speed) cubic-bezier(0.68, -0.55, 0.27, 1.55), color var(--icon-animation-speed) ease;
}
.sidebar button:hover {
background-color: var(--theme-secondary);
color: var(--theme-accent);
transform: translateX(5px);
}
.sidebar button:hover i {
transform: rotate(10deg) scale(1.2);
color: var(--theme-accent);
}

/* Conteneur pour boutons spéciaux */
.button-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
justify-content: space-between;
}

/* === Bouton ouvrir/fermer menu === */
#toggleSidebarBtn {
position: fixed;
top: 10px;
left: 10px;
background-color: var(--theme-primary);
color: var(--theme-button-primary-text);
border: none;
padding: 8px 12px;
cursor: pointer;
border-radius: 5px;
z-index: 505;
transition: left var(--transition-speed) ease, background-color var(--transition-speed) ease, transform 0.2s ease;
}
#toggleSidebarBtn:hover {
background-color: var(--theme-secondary);
color: var(--theme-accent);
transform: scale(1.05);
}
#toggleSidebarBtn.active {
left: calc(var(--sidebar-width) + 10px);
}

/* === Bouton zone privée === */
.sidebar-footer {
margin-top: auto;
position: sticky;
bottom: 0;
background-color: var(--theme-primary);
padding-top: 10px;
z-index: 502;
width: 100%;
box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.1);
}
.private-zone-button {
background-color: rgba(0, 0, 0, 0.08) !important;
color: var(--theme-button-primary-text) !important;
font-size: 0.9em;
border: none !important;
cursor: pointer;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important;
padding: 8px !important;
width: 100% !important;
transition: background-color var(--transition-speed) ease;
}
.private-zone-button:hover {
background-color: rgba(0, 0, 0, 0.15) !important;
}
.lock-icon {
margin-right: 8px;
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
display: inline-block;
}
.private-zone-button:hover .lock-icon {
transform: rotate(360deg) scale(1.2);
color: gold;
}

/* Séparateur pour les sections du menu */
.section-divider {
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
margin: 10px 0;
}

/* Grille de boutons */
.button-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.grid-button {
background-color: var(--theme-secondary);
color: var(--theme-text);
padding: 8px 12px;
font-size: 0.85em;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
box-sizing: border-box;
}
.grid-button:hover {
background-color: var(--theme-secondary);
color: var(--theme-accent);
transform: translateY(-2px);
}
.grid-button i {
margin-right: 8px;
transition: transform var(--icon-animation-speed) ease, color var(--icon-animation-speed) ease;
}
.grid-button:hover i {
transform: rotate(15deg) scale(1.2);
color: var(--theme-accent);
}

/* === Media Queries === */
@media (max-width: 576px) {
:root { --sidebar-width: 250px; }
.section-title-link, .dropdown-toggle, .sidebar button.nav-button {
    padding: 10px 8px;
    font-size: 0.85em;
}
.sidebar-header h3 { font-size: 1.1em; }
.button-container { gap: 5px; padding: 0 2px; }
}
@media (min-width: 577px) and (max-width: 992px) {
:root { --sidebar-width: 260px; }
.sidebar button.nav-button { padding: 10px; }
}
@media (min-width: 993px) {
:root { --sidebar-width: 280px; }
.sidebar-header h3 { font-size: 1.2em; }
.sidebar button.nav-button { padding: 12px; }
.button-container { gap: 10px; justify-content: space-between; }
}
/* CORRECTION: Désactiver complètement les effets hover sur tactile */
@media (pointer: coarse) {
.feature-item:hover {
    transform: none;
    background-color: var(--theme-tertiary, #fef9e7);
    color: var(--theme-text, #2c3e50);
    box-shadow: none;
}
}

/* ====================================================================*/
/* ====================================================================
/* ====================================================================*/
/* ====================================================================
/* ====================================================================
Navigation secondaire pour les chapitres de la page concernée (SIDEBAR GAUCHE)
==================================================================== */



/* Sommaire du cours - Design léger et distinct */
.sidebar-sommaire-du-cours {
    position: fixed;
    right: calc(-1 * var(--sidebar-chapitre-width));
    top: 0;
    bottom: 0;
    width: var(--sidebar-chapitre-width);
    background: var(--theme-tertiary);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--theme-secondary);
    color: var(--theme-text);
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-speed) ease;
    z-index: 500;
    overflow: hidden;
    box-shadow: var(--theme-sidebar-shadow);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sidebar-sommaire-du-cours.active {
right: 0;
}

/* En-tête du sommaire */
.sommaire-header {
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom: 1px solid var(--sommaire-border);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.sommaire-header h3 {
margin: 0;
font-size: 1.1em;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}

.sommaire-header .course-progress {
margin-top: 8px;
font-size: 0.85em;
opacity: 0.9;
}

/* Contenu du sommaire avec scroll personnalisé */
.sommaire-content {
flex: 1;
overflow-y: auto;
padding: 15px 0;
}

.sommaire-content::-webkit-scrollbar {
width: 6px;
}

.sommaire-content::-webkit-scrollbar-track {
background: transparent;
}

.sommaire-content::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
}

.sommaire-content::-webkit-scrollbar-thumb:hover {
background: #bbb;
}

/* Sections du sommaire */
.sommaire-section {
margin-bottom: 8px;
}

.sommaire-section-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
font-weight: 600;
font-size: 0.9em;
color: var(--sommaire-active);
background: rgba(0, 123, 255, 0.08);
border-left: 3px solid var(--sommaire-active);
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.sommaire-section-title:hover {
background: rgba(0, 123, 255, 0.15);
transform: translateX(3px);
}

.sommaire-section-title .chapter-number {
background: var(--sommaire-active);
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(0.75rem * var(--font-size-multiplier));  /* Taille dynamique */
font-weight: bold;
}

/* Éléments du sommaire */
.sommaire-item {
display: block;
padding: 10px 20px 10px 45px;
color: var(--sommaire-text);
text-decoration: none;
font-size: 0.85em;
line-height: 1.4;
border-left: 2px solid transparent;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
}

.sommaire-item::before {
content: '';
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: #ccc;
border-radius: 50%;
transition: all 0.2s ease;
}

.sommaire-item:hover {
background: var(--sommaire-hover);
border-left-color: var(--sommaire-active);
transform: translateX(3px);
color: var(--sommaire-active);
}

.sommaire-item:hover::before {
background: var(--sommaire-active);
transform: translateY(-50%) scale(1.5);
}

.sommaire-item.active {
background: rgba(0, 123, 255, 0.1);
border-left-color: var(--sommaire-active);
color: var(--sommaire-active);
font-weight: 500;
}

.sommaire-item.active::before {
background: var(--sommaire-active);
transform: translateY(-50%) scale(1.5);
}

/* Statistiques du cours dans le sommaire */
.sommaire-stats {
padding: 15px 20px;
background: #f8f9fa;
border-top: 1px solid var(--sommaire-border);
margin-top: auto;
}

.sommaire-stats h4 {
margin: 0 0 10px 0;
font-size: 0.85em;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.sommaire-stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 0.8em;
}

.sommaire-stat-label {
color: #666;
}

.sommaire-stat-value {
font-weight: 600;
color: var(--sommaire-active);
}

/* Bouton toggle du sommaire */
#toggleSommaireDuCoursBtn {
position: fixed;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 15px;
cursor: pointer;
border-radius: 8px;
z-index: 505; /* S'assurer que le z-index est suffisamment élevé */
transition: all var(--sommaire-transition) ease;
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
font-size: var(--font-size-base); /* Maintenant utilise le multiplicateur */
display: flex;
align-items: center;
gap: 8px;
}


#toggleSommaireDuCoursBtn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

#toggleSommaireDuCoursBtn.active {
right: calc(var(--sommaire-width) + 10px);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.btn-text {
font-size: 0.85em;
font-weight: 500;
}

/* Indicateur de progression */
.sommaire-progress-indicator {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 10px;
background: linear-gradient(to bottom, var(--sommaire-active), #667eea);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}