/*@import url("wiki_import.css");

/* VARIABLES DE DESIGN */
:root {
	--border-radius: 12px;
	--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	--border-sous-menu: #1E6CA0;

	--transparence_background: 92%
}

/* CONTENEUR GLOBAL */
.wiki_container {
	color: #2C3E50;
	margin: 0 auto;
	padding: 20px;
}

/* HEADER STYLE */
.header_wiki {
	border-bottom: 2px solid #E2E8F0;
	margin-bottom: 30px;

	/* Flexbox pour mettre l'image à gauche et le texte à droite */
	display: flex;
	align-items: center; 
	gap: 25px; /* Espace entre l'image et le bloc de texte */
}

/* Gestion de la taille de l'image dans le header */
.header_wiki .desc_image {
	flex: 0 0 160px; /* Largeur fixe pour l'image */
	width: 160px;
}

.header_wiki .desc_image img {
	width: 100%;
	height: 110px; /* Hauteur fixe pour le header */
	object-fit: cover;
	border-radius: var(--border-radius);
	display: block;
}

/* Conteneur pour aligner verticalement Titre puis Metas */
.header_text_block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.header_wiki h1 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--bleu-fgaac);
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.header_meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap; /* Permet aux badges de passer à la ligne proprement si besoin */
	align-items: center;
	margin-top: 20px;
}

.header_meta .badge,
.nombre_vues {
	background: #EEF5F9;
	color: #1E6CA0;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
}

.header_meta .badge.version {
	background: #FFF3EB;
	color: #F9762A;
}

.wiki_date {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.10);
	color: #2563EB;
	font-size: 0.9rem;
}

.wiki_date iconify-icon, 
.header_meta .badge iconify-icon {
	margin-right: 6px;
}

.desc_image img {
	width: 100%;
	height: 180px;
	object-fit: cover; /* Évite de déformer l'image */
	border-radius: calc(var(--border-radius) - 4px);
}

.desc_text {
	position: relative;
	display: block;
	width: 100%; /* Force la pleine largeur */
	margin: 30px 0; /* Un peu plus d'espace vertical pour laisser respirer */
	padding: 8px 0 8px 25px; /* Aligne le padding vertical avec la hauteur de la barre */
	box-sizing: border-box;
}

/* La ligne verticale élégante */
.desc_text::before {
	content: "";
	position: absolute;
	left: 0;
	/* top: 10%; */
	height: 100%; /* Légèrement plus haute pour accompagner le texte */
	width: 2px;	/* 2px donne un rendu très propre sur grand écran */
	background-color: #cbd5e1;
}

.desc_text p {
	margin: 0;
	font-size: 1.1rem;
	font-style: italic;
	color: #64748b;
	margin-bottom: 8px;
}

/* SECTION THÈMES */
.wiki_themes {
	max-width: 750px;
	margin: 0 auto;
}

.wiki_themes h2 {
	font-size: 1.5rem;
	color: #0f172a;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.themes_grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Cartes des Thèmes principaux */
.theme_card {
	border: 1px solid #E2E8F0;
	border-radius: var(--border-radius);
	transition: var(--transition);

	/* --- ALIGNEMENT FLEXBOX PARFAIT --- */
	display: flex;			
	align-items: center;	/* Aligne verticalement tous les éléments au centre, quelle que soit la hauteur du texte */
	padding-right: 5px;		
}

.theme_card:hover {
	transform: translateX(5px);
	border-color: var(--border-sous-menu);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
}

/* On ajuste le lien principal pour qu'il prenne tout l'espace restant */
.theme_card .theme_link {
	flex-grow: 1; /* Force le lien à occuper l'espace disponible à gauche */
	padding: 18px 24px;
	text-decoration: none;
	color: #2C3E50;
	font-weight: 600;
	font-size: 1.1rem;
}

/* Un petit espace entre l'icône de modif et le nombre de vues */
.theme_card .liste_actions_modification {
	margin-right: 12px;
	display: inline-flex;	
	align-items: center;
	color: #64748B;
	transition: color 0.2s;
}

.theme_card .liste_actions_modification:hover {
	color: #1E6CA0;
}

/* ==========================================================================
	 APPARITION DES ACTIONS UNIQUEMENT AU SURVOL DE LA CARTE
	 ========================================================================== */

/* ÉTAT PAR DÉFAUT : On cache les éléments */
.theme_card .bouton_modification {
	opacity: 0;				
	visibility: hidden;		
	transition: opacity 0.25s ease, visibility 0.25s ease;
	
	/* --- CORRECTION CLÉ POUR LE CENTRAGE --- */
	align-self: center;     /* S'assure qu'il reste centré verticalement au milieu du flex container */
	flex-shrink: 0;         /* Empêche l'icône/bouton de se faire écraser si le texte est long */
}

/* ÉTAT AU SURVOL (HOVER) : On les fait apparaître */
.theme_card:hover .bouton_modification {
	opacity: 1;				
	visibility: visible;	
}

.nombre_vues {
	white-space: nowrap;
	font-style: italic;
	margin-left: 10px;
}

.theme_icon {
	margin-right: 15px;
	font-size: 1.3rem;
}

/* Design distinct pour les sous-thèmes */
.theme_card.sous_theme {
	margin-left: 40px;
	background: #fafafa;
	border-left: 4px solid var(--border-sous-menu);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.theme_card.sous_theme:hover {
	background-color: color-mix(in srgb, var(--border-sous-menu), #FFFFFF var(--transparence_background));
}

.theme_card.sous_theme .theme_link {
	padding: 14px 20px;
	font-size: 1rem;
	font-weight: 500;
	color: #475569;
}

.theme_card.sous_theme::before {
	content: "↳";
	position: absolute;
	left: -25px;
	top: 12px;
	color: #627D98;
	font-size: 1.2rem;
}

.theme_card.sous_sous_theme {
	margin-left: 80px;				/* Décalage à droite */
	position: relative;

	/* --- ÉTAT PAR DÉFAUT : Bordure grise et ligne gauche #ED6423 --- */
	border: 1px solid #e2e8f0;
	border-left: 4px solid #ED6423; /* Ligne gauche de 4px toujours active */

	/* --- ARRONDIS --- */
	border-radius: 0 var(--border-radius) var(--border-radius) 0; 

	box-sizing: border-box;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
	transition: var(--transition); /* Animation fluide pour tout le bloc */
}

/* LA PETITE FLÈCHE (CACHÉE PAR DÉFAUT) */
.theme_card.sous_sous_theme::before {
	content: "↳";
	position: absolute;
	left: -20px;
	top: 14px;
	color: #ED6423;
	font-size: 1.3rem;
	font-weight: bold;
	
	/* --- EFFET D'APPARITION --- */
	opacity: 0;						/* <--- Rendre la flèche invisible au repos */
	transform: translateX(-5px);	/* <--- Petit effet de glissement (gauche vers droite) */
	transition: var(--transition);	/* Rend l'apparition fluide */
}

/* --- ÉTAT AU SURVOL (HOVER) --- */
.theme_card.sous_sous_theme:hover {
	transform: translateX(5px);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);

	/* Tout le contour passe à la couleur #ED6423 au survol */
	border-color: #ED6423;
	border-left-width: 4px;

	background-color: color-mix(in srgb, #ED6423, #FFFFFF var(--transparence_background));

}

/* RENDRE LA FLÈCHE VISIBLE UNIQUEMENT AU SURVOL */
.theme_card.sous_sous_theme:hover::before {
	opacity: 1;					/* <--- La flèche devient 100% visible */
	transform: translateX(0);	/* Rejoint sa position finale */
}

/* Le texte du lien à l'intérieur */
.theme_card.sous_sous_theme .theme_link {
	padding: 14px 20px;
	font-size: 1rem;
	font-weight: 500;
	color: #475569;
}

/* --- CONTENEUR GLOBAL DES CARDS --- */
.les_wikis {
	display: flex;
	flex-wrap: wrap; 
	justify-content: center; 
	gap: 15px;
	width: 100%;
}

/* --- STRUCTURE DE LA CARD --- */
.les_wikis a {
	text-decoration: none;
	color: #0C426F;
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	overflow: hidden;
	
	display: flex;
	flex-direction: column; /* Aligne l'image en haut et le texte en dessous */
	flex: 0 1 245px;
}

@media (max-width: 768px) {
	.les_wikis a {
		flex: 0 1 300px;
	}
}

.les_wikis a:hover {
	transform: translateY(-5px);
	box-shadow: 1px 1px 5px #6481BC;
	border-color: #6481BC;
}

/* --- ZONE IMAGE (Collée en haut, sans bords, sans déformation) --- */
.les_wikis .image_wrapper {
	position: relative;
	width: 100%;
	height: 400px; 
	overflow: hidden;
	margin: 0;
	padding: 0;
	/*! height: 100%; */
}

.les_wikis .image_wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Remplit l'espace sans déformer l'image */
	display: block;
}

/* ==========================================================================
   BADGE BROUILLON : TOUJOURS AFFICHÉ ET BIEN POSITIONNÉ
   ========================================================================== */

/* Style unique pour le badge (Toujours visible par défaut) */
.brouillon_wiki {
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: fit-content;
	background: rgb(255, 118, 118);
	color: #FFFFFF;
	font-weight: bold;
	font-size: 0.75rem;
	padding: 5px 10px;
	border-radius: 4px;
	z-index: 10; /* S'assure de passer par-dessus l'image */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(4px);

	/* On s'assure qu'aucune opacité ou masquage caché n'est actif */
	opacity: 1 !important;
	visibility: visible !important;
}

@media (max-width: 768px) {
	.wiki_brouillon::before {
		transform: translate(-50%, -50%) rotate(-70deg);
		font-size: 50px;
	}
}

/* Style de fond de la carte brouillon */
a.wiki_brouillon_list {
	background-color: #F8E7E7;
	border: 2px solid #FF0000;
}

/* --- ZONE DE TEXTE (Uniformise la hauteur de la carte) --- */
.card_content {
	padding: 5px 5px 10px 5px;
	display: flex;
	flex-direction: column;
	flex-grow: 1; /* Pousse le conteneur pour faire la même taille partout */
	position: relative;
}

/* --- ALIGNEMENT PARFAIT DES TITRES --- */
.bloc_liens_titre {
	padding: 0 15px;
	color: var(--bleu-fgaac);
	font-weight: bold;
	font-size: 1.1rem; /* Légèrement plus grand */
	margin: 10px 0 6px 0;
	display: block;
	line-height: 1.2;
}

/* --- ALIGNEMENT PARFAIT DES DESCRIPTIONS --- */
.bloc_liens_description {
	font-size: 0.95rem;
	color: #666666;
	line-height: 1.4;
	margin-bottom: 35px; /* Laisse de l'espace pour la date en absolute tout en bas */

	/* Force la description à occuper exactement l'espace de 3 lignes */
	height: 4.2em; 
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- DATE DE MODIFICATION (Calée tout en bas de la card) --- */
.date_derniere_modification {
	position: absolute;
	bottom: 10px;
	right: 15px;
	font-size: 0.75rem;
	background: rgba(0, 0, 0, 0.55); /* Légèrement plus foncé pour la lisibilité */
	backdrop-filter: blur(4px);
	padding: 4px 8px;
	border-radius: 4px;
	color: #FFFFFF;
}

.bloc_liens_description {
	font-size: 0.95rem;
	color: #666666;
	font-style: normal;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 40px;
}

.bloc_liens_titre, 
.bloc_liens_description {
	padding: 0 15px; 
}

.date_derniere_modification {
	background: rgba(0, 0, 0, 0.23);
	bottom: 10px;
	right: 10px;
}

.date_derniere_modification {
	font-size: 0.75rem;
	position: absolute;
	backdrop-filter: blur(4px);
	padding: 4px 8px;
	border-radius: 4px;
	color: #FFFFFF;
}

/* ==========================================================================
MISE EN ÉVIDENCE : BOUTON AFFICHER LE NOMBRE DE VUES
========================================================================== */
.liste_actions_nombre_vue.bouton_actions_cache {
	display: none;
}

/* RESPONSIVE DESIGN (MOBILE) */
@media (max-width: 768px) {
	.header_wiki {
		flex-direction: column;	/* Empile l'image et le texte verticalement */
		align-items: center;	/* Centre horizontalement le bloc image et le texte */
		gap: 15px;
		padding-bottom: 10px;
	}

	.header_wiki .desc_image {
		width: 100%;				/* Le conteneur prend la largeur, indispensable pour centrer le contenu */
		flex: 0 0 auto;
		display: flex;				/* Active flex pour centrer l'image */
		justify-content: center;	/* Centre horizontalement l'image dans le conteneur */
	}

	.header_wiki .desc_image img {
		/* --- AJUSTEMENTS POUR PETITE IMAGE CENTRÉE --- */
		width: 100%;
		max-width: 150px;		/* Force l'image à être petite (ajustez ce nombre selon le besoin) */
		height: auto;			/* Conserve les proportions originales de l'image */
		object-fit: contain;	/* S'assure que toute l'image est visible */
		border-radius: var(--border-radius);
		margin: 0;
	}

	.header_meta {
		justify-content: center; /* Centre les badges */
	}

	.header_wiki h1 {
		font-size: 1.6rem;
		margin-top: 5px;
	}

	.theme_card.sous_theme {
		margin-left: 30px;
	}

	.theme_card.sous_sous_theme {
		margin-left: 65px;
	}
	
	.theme_card.sous_theme::before,
	.theme_card.sous_sous_theme::before {
		left: -15px;
	}

	/* On passe la carte en affichage vertical/flexible pour empiler le contenu */
	.theme_card {
		flex-direction: column;
		align-items: stretch;	/* Permet aux éléments de prendre toute la largeur */
		padding: 12px;
	}

	/* On ajuste le lien pour qu'il ne pousse pas tout à droite */
	.theme_card .theme_link {
		padding: 0 0 12px 0; /* Enlève le gros padding et met un espace en bas */
		width: 100%;
		box-sizing: border-box;
	}

	/* On crée un bloc en bas pour regrouper le bouton et les vues sur la même ligne */
	.theme_card .bouton_modification {
		opacity: 1;				/* On force l'apparition du bouton (le hover n'existe pas sur mobile) */
		visibility: visible;	/* On le rend cliquable */
		padding: 0 8px;
		width: fit-content;		/* Pour éviter qu'il ne prenne toute la largeur */
	}

	/* Ajustement du badge de vues pour qu'il s'aligne bien avec le bouton */
	.theme_card .nombre_vues {
		margin-left: auto; /* Pousse le compteur de vues tout à droite sur la ligne du bas */
		align-self: center;
	}

	/* On force l'alignement horizontal du bloc du bas si tes éléments partagent le même parent flex */
	.theme_card {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row; /* On garde le flex-row mais on autorise le retour à la ligne */
	}

	.theme_card .theme_link {
		flex: 0 0 100%; /* Le lien prend toute la première ligne */
	}
}

/******************************
POUR L'HISTORIQUE
******************************/
	/* Style de base du tableau (Ordinateur) */
	.modern-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.9rem;
		background: #FFFFFF;
		margin-top: 25px;
	}

	.modern-table th {
		background-color: #F8FAFC;
		color: #64748B;
		text-align: left;
		padding: 14px 16px;
		font-weight: 600;
		border-bottom: 2px solid #F1F5F9;
	}

	/* Ajustement de l'en-tête de la dernière colonne pour correspondre au contenu */
	.modern-table th:last-child {
		width: 1%;
		white-space: nowrap;
	}

	.modern-table td {
		padding: 12px 16px;
		border-bottom: 1px solid #F1F5F9;
		color: #334155;
	}

	/* Styles des badges */
	.badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
	.badge-creation { background-color: #ECFDF5; color: #059669; }
	.badge-ajout { background-color: #F0F9FF; color: #0284C7; }
	.badge-modif { background-color: #FFFBEB; color: #D97706; }
	
	.cell-date {
		width: 1%;		  /* Force la date à coller à son contenu */
		white-space: nowrap;
	}

	.cell-date small { color: #94A3B8; margin-left: 4px; }

	/* La dernière colonne s'adapte au contenu (sur grand écran) */
	.cell-author { 
		color: #64748B; 
		font-style: italic; 
		width: 1%;
		white-space: nowrap;
	}

	/* ===================================================
	ADAPTATION SMARTPHONE (Écrans inférieurs à 768px)
	=================================================== */
	@media (max-width: 767px) {
		/* On cache les en-têtes du tableau devenus inutiles */
		.modern-table thead {
			display: none;
		}

		/* Chaque ligne (tr) devient une carte visuelle */
		.modern-table tbody tr {
			display: block;
			border: 1px solid #e2e8f0;
			border-radius: 8px;
			margin-bottom: 15px;
			padding: 12px;
			background: #FFFFFF;
			box-shadow: 0 1px 3px rgba(0,0,0,0.02);
		}

		/* Chaque cellule (td) se comporte comme un bloc de texte standard */
		.modern-table td {
			display: block;
			width: 100% !important; /* Le !important annule le width: 1% du mode desktop */
			padding: 6px 0;
			border: none; /* On enlève les bordures de cellules */
			white-space: normal !important; /* Permet le retour à la ligne si le nom est trop long sur petit écran */
		}

		.modern-table .cell-date {
			font-size: 0.8rem;
			border-bottom: 1px dashed #F1F5F9; /* Petite séparation pour la date */
			padding-bottom: 8px;
			margin-bottom: 4px;
		}
	}
/******************************
*******************************
******************************/

/* ==========================================================================
STRUCTURE GLOBALE DE LA PAGE DES WIKIS
========================================================================== */

.page_wiki {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 16px;
	min-height: 100vh;
	box-sizing: border-box;
}

/* ==========================================================================
LAYOUT PRINCIPAL (ORDINATEUR : GRILLE À ZONES)
========================================================================== */

.wiki_layout {
	display: grid;
	/* Colonne gauche : 320px | Colonne droite : prend le reste */
	grid-template-columns: 320px 1fr;
	/* Ligne haut (recherche) : auto | Ligne bas (navigation) : prend le reste */
	grid-template-rows: auto 1fr;
	gap: 16px;
	align-items: stretch;

	/* Cartographie de l'affichage sur ordinateur */
	grid-template-areas: 
		"search	content"
		"nav		 content";
}

/* Assignation des éléments à leurs zones respectives */
.wiki_layout .wiki_search {
	grid-area: search;
	width: 100%;
}

.wiki_layout .wiki_nav {
	grid-area: nav;

	/* Se cale strictement sur la hauteur restante à gauche */
	height: 0;
	min-height: 100%;
	max-height: 100%;
	overflow-y: auto;
}

/* On nettoie la carte parente */
.wiki_layout .wiki_content_card {
	grid-area: content;
	background: none; /* On retire le fond d'ici */
}

/* On applique le logo et le filtre blanc ensemble sur le div qui contient le texte */
.logo_background {
	background: linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.90)), url(../images/logo_fgaac.png);
	background-size: 99%;
	background-repeat: repeat-y;
	background-position: center -55px;
	min-height: 720px;

	/* On ajoute un padding interne au div pour décoller le texte du bord */
	padding: 15px; 
	box-sizing: border-box;
}

.wiki_layout .wiki_content_card > div img {
	opacity: 0.7;
	margin: 15px 0;
}

.wiki_layout .wiki_content_card > div .titre_style_1 {
	margin-top: 0;
}

/* ==========================================================================
BLOC DE L'ARBORESCENCE
========================================================================== */

/* Barre d’en-tête */
.wiki_toolbar {
	padding: 15px;
	border-radius: 16px;
	box-shadow: 0 1px 10px rgba(0,0,0,.06);
	display: block; 
	line-height: 1.6;
}

/* Style commun des titres */
.wiki_toolbar h2, .wiki_toolbar h3, .wiki_toolbar h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	display: inline; 
}

.wiki_toolbar h2 {
	border: 0;
	background: none;
	box-shadow: none;
	margin: -15px;
}

/* Couleurs des titres */
.wiki_toolbar h2 { color: #64748B; }
.wiki_toolbar h3 { color: #0284C7; }
.wiki_toolbar h4 { color: #1E293B; }

/* --- LES SÉPARATEURS (SLASH) --- */
/* Ciblage précis des balises pour éviter les effets de bord */
.wiki_toolbar h3::before, 
.wiki_toolbar h4::before {
	content: "/";
	color: #D8E3F2;
	margin: 0 10px 0 5px; /* Espace homogène à gauche et à droite du slash */
	display: inline-block;
	font-weight: 600;
}

/* --- LE DERNIER ÉLÉMENT (h4) --- */
.wiki_toolbar h4 {
	font-weight: bold;
	border-bottom: 0;
}

/* ==========================================================================
VERSION SMARTPHONE (Responsive)
========================================================================== */
@media (max-width: 640px) {
	.wiki_toolbar {
		/* Sur smartphone, on active Flexbox pour empiler ou gérer les retours proprement */
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/* On masque les slashs sur mobile car l'affichage devient vertical */
	.wiki_toolbar h3::before,
	.wiki_toolbar h4::before {
		content: none;
	}

	.wiki_toolbar h2, .wiki_toolbar h3, .wiki_toolbar h4 {
		display: block;
	}

	.wiki_toolbar h2 {
		text-align: left;
	}
}

/* ==========================================================================
BLOC RECHERCHE AVEC ICÔNE INTÉGRÉE
========================================================================== */
/* Le conteneur parent devient la référence pour le positionnement */
.wiki_search {
	position: relative;
	width: 100%;
}

/* L'icône est extraite du flux et centrée verticalement à gauche */
.wiki_search iconify-icon {
	position: absolute;
	left: 14px;				/* Espace depuis le bord gauche */
	top: 50%;
	transform: translateY(-50%);
	color: #64748B;	
	font-size: 1.2rem;		/* Taille de l'icône */
	pointer-events: none;	/* Permet de cliquer à travers l'icône pour focus l'input */
}

/* L'input s'adapte pour laisser de la place à l'icône */
.wiki_search input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px 12px 40px; /* 40px à gauche pour ne pas chevaucher l'icône */
	border: 1px solid #dfe3ea;
	border-radius: 12px;
	outline: none;
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
	transition: var(--transition);
}

/* Effet de focus */
.wiki_search input:focus {
	border-color: #5B8DEF;
	box-shadow: 0 0 0 4px rgba(91,141,239,.15);
}

/* Changement de couleur de l'icône quand on clique dans l'input */
.wiki_search:focus-within iconify-icon {
	color: #5B8DEF;
}

/* Carte centrale de contenu */
.wiki_content_card {
	padding: 10px;
	border-radius: 16px;
	box-shadow: 0 1px 10px rgba(0,0,0,.06);
	overflow-y: auto;
}

/* ==========================================================================
ARBORESCENCE ET MENU DE NAVIGATION (ASIDE)
========================================================================== */

.wiki_nav {
	padding: 16px;
	border-radius: 16px;
	box-shadow: 0 1px 10px rgba(0,0,0,.06);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 4px; /* Légèrement réduit pour compacter les blocs */
	background: #FFFFFF;
	font-size: 0.85rem;
}

/* Base commune pour tous les liens et spans de navigation */
.wiki_nav a, 
.wiki_nav span.premier_niveau,
.wiki_nav span.second_niveau,
.wiki_nav span.troisieme_niveau {
	display: flex;             /* Active Flexbox pour aligner l'icône et le texte */
	align-items: flex-start;   /* Aligne l'icône sur le haut du texte s'il y a plusieurs lignes */
	gap: 5px;                  /* Crée un espace fixe et propre entre l'icône et le texte */
	text-decoration: none;
	box-sizing: border-box;
	transition: all 0.15s ease;
	padding: 4px;
	line-height: 1.4;
}

.wiki_nav iconify-icon {
	flex-shrink: 0;          /* Empêche l'icône de s'écraser si le texte déborde */
	margin-top: 3px;         /* Ajustement visuel pour centrer l'icône sur la première ligne */
}

.wiki_nav span:hover {
	background: #F0F0F0;
	border-radius: 0 10px 10px 0;
	padding-left: 12px;
	border-left: 3px solid;
}

/* ==========================================================================
GESTION DE LA HIERARCHIE (PAR NIVEAU)
========================================================================== */

/* Niveau 1 : Thèmes principaux */
.premier_niveau {
	margin-left: 0;
	font-weight: 600;
	color: #1E293B; /* Ardoise foncé */
}

.wiki_nav a.premier_niveau:hover {
	background: #F1F5F9;
	color: #0F172A;
}

/* Niveau 2 : Sous-thèmes */
.second_niveau {
	margin-left: 18px; /* Indentation */
	font-weight: 500;
	color: #475569; /* Gris intermédiaire */
}

.wiki_nav a.second_niveau:hover {
	background: #F8FAFC;
	color: #1e293b;
}

/* Niveau 3 : Sous-sous-thèmes */
.troisieme_niveau {
	margin-left: 36px; /* Double indentation */
	font-weight: 400;
	color: #64748b; /* Gris plus clair */
}

.wiki_nav a.troisieme_niveau:hover {
	background: #F8FAFC;
	color: #334155;
}

/* ==========================================================================
ÉLÉMENT ACTIF (ARTICLE EN COURS)
========================================================================== */

/* L'élément actif garde son indentation naturelle grâce aux classes de niveau, 
   mais adopte le style "mis en valeur" ci-dessous */
.wiki_nav .article_en_cours {
	font-weight: 600; /* Force le gras peu importe le niveau */
	background: #EEF2FF;
	color: #4F46E5;
	border-left: 3px solid;
	border-radius: 0 10px 10px 0;
}

/* Ajustement des icônes dans l'élément actif */
.wiki_nav .article_en_cours iconify-icon {
	color: #4F46E5;
}

/* ==========================================================================
BOUTON RETOUR (NIVEAU 0)
========================================================================== */
.wiki_nav .bouton_retour {
	padding: 10px;
	margin-bottom: 10px;
	background: #F8F9FA;
	border: 1px dashed #CBD5E1;
	border-radius: 12px;
	color: #475467;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.wiki_nav .bouton_retour:hover {
	background: #F1F5F9;
	color: #1D2939;
}

/* ==========================================================================
BOUTON DANS LA PAGE D'UN THEME
========================================================================== */
.article_subsections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 12px;
	margin: 20px 0;
}

.subsection_link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	background: #FFFFFF;
	border-left: 4px solid #EA580C;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border-top: 1px solid #E5E7EB;
	border-right: 1px solid #E5E7EB;
	border-bottom: 1px solid #E5E7EB;
	border-radius: 0 15px 15px 0;
	text-decoration: none;
	color: #374151;
	font-weight: 500;
	transition: background 0.2s;
}

.subsection_link:hover {
	background: #FFF7ED;
	color: #EA580C;
}

/* Style de fond de la carte brouillon */
.wiki_container.wiki_brouillon::before,
.page_wiki.wiki_brouillon::before {
	content: "⚠ NON FINALISÉ ⚠";
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-30deg);
	font-size: 5rem;
	font-weight: bold;
	color: rgba(255, 0, 0, 0.1);
	pointer-events: none;
	z-index: 1; /* Pas besoin de 9999, 1 suffit pour être au-dessus du contenu du conteneur */
	white-space: nowrap;
}

/* ==========================================================================
RESPONSIVE SMARTPHONE (MEDIA QUERY < 768px)
========================================================================== */

@media screen and (max-width: 768px) {
	.page_wiki {
		padding: 8px;
		gap: 12px;
	}

	.wiki_title h1 { font-size: 1.15rem; line-height: 1.3; }
	.wiki_title h2 { font-size: 0.95rem; line-height: 1.3; margin-top: 6px; }

	/* Le layout passe en Flexbox vertical pour maîtriser l'ordre d'affichage mobile */
	.wiki_layout {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	/* Ordre 1 : La recherche se place tout en haut du contenu mobile */
	.wiki_layout .wiki_search {
		order: 1;
	}

	/* Ordre 2 : La carte centrale (Contenu principal de l'article) */
	.wiki_layout .wiki_content_card {
		order: 2;
		overflow-y: visible; /* Scroll fluide sur toute la page mobile */
	}

	/* Ordre 3 : Le menu de navigation (Aside) glisse en dessous */
	.wiki_layout .wiki_nav {
		order: 3;
		height: auto !important;
		min-height: initial !important;
		max-height: 380px;
		overflow-y: auto;
	}

	.bouton {
		flex: 1 1 calc(50% - 8px);
		text-align: center;
		padding: 11px 8px;
		font-size: 0.85rem;
	}
}