/* -- STRUCTURE -- */
.trmdvsr-dashboard-structure {
	display:			flex;																																	/* F*ckin Footer */
	flex-direction:		column;
	justify-content:	flex-start;																														/* ↕ */
	align-items:		center;																																/* ↔ */
	width:				100%;
	min-height:			100%;
	margin:				0px;
	padding:			0px;
	font-family:		Inter, sans-serif;
	box-sizing:			border-box;
	background-color:	var(--bleu-trmdvsr-pur);
	cursor:				auto;
}
.conteneur-dashboard-global {
	display: 			flow-root;
	position:			relative;	
	width:				100%;
	max-width:			var(--largeur-conteneur-max);								/* clamp => fluide */
	height: 			auto;
	margin:				0;
	padding:			0;
	background-color:	var(--blanc-pur);
	overflow:			hidden;														/* ‼️POUR DEBUG => A REACTIVER‼ */
	box-shadow:			0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	transition:			width 1s ease-out, height 0.8s ease-in-out, min-height 0.8s ease-in-out;
}
.page.active {
	display: 			block;
	/*position:			absolute;*/
	top:				0;
	left:				0;
	z-index:			10;
	width: 				100%;
	max-width:			var(--largeur-conteneur-max);
	height:				auto;
	margin:				0;
	padding:			0 0 var(--espacement-large);
	background-color:	var(--blanc-pur);
	box-shadow:			-10px 0px 20px -5px rgba(var(--gris-trmdvsr-fonce-RGB), 0.4);
	transform:			translateX(0);											/* positionne la page à droite */
	opacity:			1;
	overflow:			hidden;
	transition:			transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
	will-change:		transform, opacity;											/* Optimise la perf */
}

/* --- FIL D’ARIANE --- */
.breadcrumb {
	list-style:         none;                                   /* Supprime les puces */
	display: 			flex;
	flex-direction: 	row;
	justify-content:    flex-start;                          /* Distribue l'espace entre les éléments */
	white-space:        nowrap;                                 /* Permet aux éléments de rester sur une seule ligne */
	width: 				auto;
	padding: 			20px 0;
	margin: 			0;
	align-items:	 	center;
	gap: 				10px;
	font-size: 			14px;
}
.breadcrumb-item 	{ padding: 0 calc(var(--espacement-court) / 3); }
.breadcrumb a 		{ color: inherit; text-decoration: none; margin-right: 5px; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-separator {                                                         /* L'indicateur de séparation */
	font-size: 			var(--taille-texte);
	color:              rgba(var(--gris-trmdvsr-fonce-RGB), 0.6);           /* Utilisation de la variable RGB pour plus de contrôle */
	align-self:         top;                                             /* Pour l'aligner verticalement si les boutons sont hauts */
}

/* --- SOUS-TITRE GAUCHE --- */
.rating-container { display: flex; gap: 4px; align-items: center; }
.trmdvsr-puce {
	display: 			inline-block;
	width: 				calc(var(--largeur-logo-bouton) / 2);
	aspect-ratio: 		1 /1 ;
	background-image: 	var(--url-logo-charte);
	background-size: 	cover;
	background-color: 	transparent;
}
.trmdvsr-puce.half { background: linear-gradient(90deg, var(--bleu-trmdvsr-pur) 50%, transparent 50%); }
.trmdvsr-puce.empty { display: none; }

/* -- SOUS-TITRE DROITE -- */
.action-buttons { display: flex; gap: 10px; color:var(--bleu-trmdvsr-clair);}
.lieu-rappel-card { display: flex; align-items: center; gap: 20px; }

/* -- SKELETON -- */
.trm-skeleton {
	color: 				transparent !important; /* Cache le texte sans supprimer l'espace qu'il occupe */
	pointer-events: 	none;         			/* Empêche de cliquer sur le texte fantôme */
	user-select: 		none;            		/* Empêche de sélectionner le texte */
	position: 			relative;
	overflow: 			hidden;
	background-color: 	#e2e8f0;    			/* Couleur de base du skeleton */
	background: 		linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 	200% 100%;
	animation: 			skeleton-loading 1.5s infinite;
	border-radius: 		4px;
}
.trm-skeleton::after {
	content: 			"";
	position: 			absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	transform: 			translateX(-100%);
	background: 		linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
	animation: 			shimmer 1.5s infinite;
}

/* --- COMPOSANT PUCE LOGO (Carré Biseauté) --- */
.header-section {
	display: 			flex;
	justify-content: 	space-between;
	align-items: 		center;
	flex-wrap: 			wrap;
	gap: 				20px;
	margin-top: 		12px;
	margin-bottom: 		25px;
}

/* --- 3. BLOC PHOTOS --- */
#eval-gallery {
	display: 				flex;
	flex-direction: 		column;
	gap: 					20px;
}
#salle-gallery {
	display: 				grid;
	grid-template-columns: 	2fr 1fr 1fr; 	
	grid-template-rows: 	150px 150px; 
	gap: 					1px;
	width: 					100%;
	margin-bottom: 			20px;
	border: 1px solid red;
}
.photo-item {
	width: 			100%;
	height: 		100%;
	overflow: 		hidden;
	position: 		relative;
	border-radius: 	1rem; 		/* Optionnel : arrondis */
}
.photo-item img {
	width: 			100%;
	height: 		100%;
	object-fit: 	cover; /* Important : pour ne pas déformer l'image */
	display: 		block;
}
.photo-item.main-photo {
	grid-column: 	1 / 2; 		/* Colonne 1 */
	grid-row: 		1 / 3;    	/* S'étend sur les lignes 1 et 2 */
	height: 		301px;      /* 180 + 180 + 10 (gap) */
}
.btn-trm-overlay {
    position: static;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: var(--ta-blue);
    color: white;
    text-align: center;
    padding: 16px;
    margin-top: 20px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 122, 255, 0.3);
    z-index: 1000;
    display: block; /* Visible par défaut sur mobile */
    transition: transform 0.3s ease, background 0.2s;
}

.btn-trm-overlay:active {
    transform: scale(0.98);
    background: var(--ta-blue-dark);
}

.photo-item-pro {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: zoom-in;
}

.photo-item-pro img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.photo-item-pro:hover img {
    transform: scale(1.03);
    filter: brightness(0.9);
}

.photo-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.photo-item-pro:hover .photo-overlay {
    opacity: 1;
}

/* --- LAYOUT GÉNÉRAL --- */
.content-layout { display: grid; grid-template-columns: 1fr; }
.zone-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.card-eval-detail {
	background: #ffffff;
	border: 1px solid #eef2f6;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
	transition: transform 0.3s ease;
}

.notes-sidebar {
	width: 					100%;
	height: 				fit-content;
	padding: 				1rem;
	border: 				1px solid var(--gris-trmdvsr-clair);
	border-radius: 			var(--bordure-radius);
	box-shadow: 			0 4px 12px rgba(0,0,0,0.05);
	background: #fff;
}
.note-row { margin-bottom: 18px; }
.note-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; font-weight: 600; }
.note-progress-bar { background: #eee; height: 10px; border-radius: 5px; overflow: hidden; }
.note-progress-fill { background: var(--bleu-trmdvsr-pur); height: 100%; }
.total-score { text-align: center; margin-top: 30px; border-top: 1px solid var(--gris-trmdvsr-clair); padding-top: 20px; }
.score-num { font-size: 36px; font-weight: 800; display: block; }

/* 4.1 Description et Avis */
.avis-content p, .description-bloc p {
	white-space: 	pre-line; /* Transforme les sauts de ligne du texte en vrais sauts de ligne HTML */
	margin-top: 	10px;
}
.verbatim {
	padding: 		25px;
	border: 		1px solid var(--gris-trmdvsr-clair);
	border-radius: 	var(--bordure-radius);
	margin: 		20px 0;
	border-left: 	6px solid var(--bleu-trmdvsr-pur);
}
.verbatim blockquote { margin: 0; font-size: 18px; font-style: italic; color: #333; }
.author { display: block; margin-top: 15px; font-size: 13px; color: var(--gris-trmdvsr-fonce); font-weight: bold; }

/* --- CRITÈRES ET BARRES --- */
.progress-bar {
	height: 		8px;
	background: 	#f0f0f0;
	border-radius: 	10px;
	margin: 		12px 0;
	overflow: 		hidden;
}
.progress-fill {
    height: 		100%;
    background: 	var(--bleu-trmdvsr-pur);
    border-radius: 	4px;
    animation: 		fillProgress 1.2s ease-out forwards;
}
/* -- expert-advice-zone -- */
.expert-pill-box {
	background: 	#fff9e6;
	border: 		1px solid #ffeeba;
	border-radius: 	1rem;
	padding: 		16px;
	display: 		flex;
	flex-direction: column;
	align-items: 	flex-start;
	gap: 			15px;
	margin: 		25px 0;
	box-shadow: 	0 2px 8px rgba(255, 193, 7, 0.1);
	border-top: 	4px solid #007AFF;
}
.expert-pill-header {
	display: 			flex;
	justify-content: 	space-between;
	align-items: 		center;
	margin-bottom: 		15px;
}
.expert-pill-badge {
	background: 	#ebf5ff;
	color: 			#007AFF;
	font-size: 		10px;
	font-weight: 	800;
	padding: 		4px 10px;
	border-radius: 	6px;
	letter-spacing: 0.05em;
}
.expert-pill-score {
	font-size: 		12px;
	color: 			#ef4444; /* Rouge pour souligner l'urgence de la note basse */
	font-weight: 	600;
}
.expert-pill-icon {
	font-size: 		24px;
	line-height: 	1;
}
.expert-pill-content {
	margin: 		0 0 10px 0;
	font-size: 		15px;
	color: 			#4a5568;
	line-height: 	1.5;
}
.expert-pill-label {
	display: 		block;
	font-size: 		11px;
	font-weight: 	800;
	color: 			#856404;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 	4px;
}
.expert-pill-text {
	margin: 		0;
	font-size: 		14px;
	color: 			#533f03;
	line-height: 	1.5;
}
.expert-pill-footer {
	margin-top: 	20px;
	border-top: 	1px solid #edf2f7;
	padding-top: 	15px;
}




/* --- CRITÈRES ET NOTES --- */
.critere-detail-row {
    margin-bottom: 35px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.critere-detail-row:last-child {
    border-bottom: none;
}
.verbatim-pro {
	background: 	#f4f7f9;       /* Gris bleuté très clair */
	padding: 		15px;
	border-radius: 	10px;
	border-left: 	4px solid #007AFF; /* La ligne bleue à gauche qui fait "pro" */
	font-style: 	italic;
	color: 			#444;
	margin-top: 	10px;          /* Espace avec la barre de progression */
}

.push-section {
	display: 				grid;
	grid-template-columns: 	1fr; 
	background: 			var(--gris-trmdvsr-fonce);
	overflow: 				hidden;
	margin: 				60px 0;
	color: 					var(--blanc-pur);
}


.trmdvsr-label.blue {
	background: 	rgba(0, 122, 255, 0.1);
	color: 			var(--ta-blue);
	padding: 		4px 12px;
	border-radius: 	20px;
	font-weight: 	600;
	font-size: 		13px;
}

/* --- RESPONSIVE --- */
@media (min-width: 60rem) {
	.map-section 	{ grid-template-columns: 1fr 1.2fr; }
	.content-layout { grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 30px; }
	.notes-sidebar {
		max-width: 		15rem;
		height: 		fit-content;
		padding: 		1rem;
		border: 		1px solid var(--gris-trmdvsr-clair);
		border-radius: 	var(--bordure-radius);
		box-shadow: 	0 4px 12px rgba(0,0,0,0.05);
	}
	.btn-trm-overlay {
        position: fixed;
        margin-top: initial;
    }
}
/* Animation de remplissage des barres */
@keyframes fillProgress {
    from { width: 0%; }
    to { width: var(--target-width); }
}


@keyframes skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}