/* ==========================================================================
   Graphique Barres - Widget Elementor
   Préfixe technique : bcw-
   Rappel : ne jamais fixer de valeur statique qui dupliquerait une valeur
   par défaut pilotée par un contrôle Elementor {{WRAPPER}} — toujours
   utiliser var(--nom, fallback) pour laisser le contrôle reprendre la main.
   ========================================================================== */

.bcw-chart-container {
	box-sizing: border-box;
	width: 100%;
}

.bcw-chart {
	/* Valeurs par défaut (reprises si aucun contrôle Elementor ne les fixe). */
	--bcw-bar-color: #6FB09E;
	--bcw-height: 260px;
	--bcw-bar-width: 60%;
	--bcw-bar-gap: 16px;
	--bcw-bar-radius: 6px;
	--bcw-bar-min-height: 28px;
	--bcw-value-padding: 4px;
	--bcw-grid-color: #D9A441;
	--bcw-grid-width: 2px;
	--bcw-grid-style: solid;
	--bcw-axis-width: 30px;
	--bcw-label-height: 32px;
	--bcw-anim-duration: 1000ms;
	--bcw-anim-stagger: 100ms;
	--bcw-anim-easing: ease-out;

	box-sizing: border-box;
	width: 100%;
}

.bcw-chart * ,
.bcw-chart *::before,
.bcw-chart *::after {
	box-sizing: border-box;
}

/* CSS Grid plutôt que flexbox pour placer la légende autour du graphique :
   permet de la positionner en haut/droite/bas/gauche (contrôle Elementor
   `legende_position`) via grid-template-areas, sans jamais avoir besoin de
   changer de flex-direction ni de réordonner le DOM (les 2 éléments restent
   dans le même ordre source pour les 4 positions ; seule l'assignation des
   zones nommées change) — cohérent avec la convention du widget qui évite
   toute dépendance à une valeur non-initiale de flex-direction. */
.bcw-chart-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "plot legend";
	align-items: center;
	gap: var( --bcw-legend-gap, 16px );
	width: 100%;
}

.bcw-chart-row.bcw-legend-left {
	grid-template-columns: auto 1fr;
	grid-template-areas: "legend plot";
}

.bcw-chart-row.bcw-legend-top {
	grid-template-columns: 1fr;
	grid-template-areas: "legend" "plot";
	align-items: stretch;
}

.bcw-chart-row.bcw-legend-bottom {
	grid-template-columns: 1fr;
	grid-template-areas: "plot" "legend";
	align-items: stretch;
}

/* --------------------------------------------------------------------
   Zone de tracé (grille + barres)
   -------------------------------------------------------------------- */
.bcw-plot {
	grid-area: plot;
	position: relative;
	min-width: 0;
	height: calc( var( --bcw-height ) + var( --bcw-label-height ) );
}

/* Positionnement des lignes de grille : volontairement PAS de flexbox
   (ni flex-direction, ni justify-content:space-between). Chaque ligne est
   positionnée indépendamment via top:X% (calculé en PHP, une variable CSS
   --bcw-line-top par ligne), exactement comme les segments de connecteur
   du widget "Frise Chronologique" du même projet. Raison : si une seule
   propriété flex-direction se fait shadower/écraser par le thème, un
   plugin d'optimisation CSS ou un cache, un layout flex "column-reverse"
   retombe sur la valeur initiale "row" et transforme les lignes
   horizontales en bandes verticales (bug constaté chez l'utilisateur :
   traits verticaux à la couleur de la grille). Avec un positionnement en
   top:%, il n'y a plus aucune propriété flex-direction dont la perte
   pourrait casser l'orientation des lignes.
   -------------------------------------------------------------------- */
.bcw-gridlines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	height: var( --bcw-height );
	pointer-events: none;
}

.bcw-gridline__value {
	position: absolute;
	top: var( --bcw-line-top, 0% );
	left: 0;
	width: var( --bcw-axis-width );
	transform: translateY( -50% );
	text-align: right;
	padding-right: 8px;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
}

/* Uniquement des lignes horizontales (border-top) : jamais de bordure
   gauche/droite/bas ici, pour ne pas faire apparaître de lignes
   verticales dans la grille. */
.bcw-gridline__line {
	position: absolute;
	top: var( --bcw-line-top, 0% );
	left: var( --bcw-axis-width );
	right: 0;
	border-top: var( --bcw-grid-width ) var( --bcw-grid-style ) var( --bcw-grid-color );
	border-left: none;
	border-right: none;
	border-bottom: none;
}

/* z-index supérieur à .bcw-gridlines (0) : les barres se dessinent
   toujours au-dessus des lignes de la grille, jamais l'inverse. */
.bcw-bars {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: stretch;
	padding-left: var( --bcw-axis-width );
	gap: var( --bcw-bar-gap );
}

/* .bcw-bar-col empile .bcw-bar-track puis .bcw-bar-label EN FLUX NORMAL
   (blocs), volontairement sans display:flex/flex-direction:column. Même
   raison que pour .bcw-gridlines : flex-direction:column n'est pas la
   valeur initiale, donc si elle se fait shadower/écraser ailleurs sur le
   site, les deux blocs se retrouveraient côte à côte au lieu d'empilés.
   Des blocs en flux normal s'empilent verticalement par défaut, sans
   dépendre d'aucune propriété flex-direction. */
.bcw-bar-col {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

.bcw-bar-track {
	position: relative;
	width: 100%;
	height: var( --bcw-height );
}

/* Centrage horizontal de la barre dans sa piste via left:50% +
   margin-left négatif calculé (jamais via transform, ni via
   justify-content:center qui dépendrait à nouveau d'un flex parent). */
.bcw-bar {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 50%;
	margin-left: calc( var( --bcw-bar-width ) / -2 );
	width: var( --bcw-bar-width );
	min-height: var( --bcw-bar-min-height );
	background-color: var( --bcw-bar-color );
	border-radius: var( --bcw-bar-radius ) var( --bcw-bar-radius ) 0 0;
	height: var( --bcw-h, 0% );
	/* La valeur est centrée horizontalement ET verticalement dans la
	   barre via flexbox en direction par défaut (row) : align-items /
	   justify-content ne dépendent d'aucune valeur non-initiale de
	   flex-direction, donc robuste au même titre que .bcw-bar-label
	   ci-dessous. Jamais de transform ici non plus. */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* État animé : les barres partent de 0 puis grandissent au scroll (JS). */
.bcw-chart--anim .bcw-bar {
	height: 0;
	transition: height var( --bcw-anim-duration ) var( --bcw-anim-easing );
	transition-delay: calc( var( --bcw-anim-index, 0 ) * var( --bcw-anim-stagger ) );
}

.bcw-chart--anim.bcw-in-view .bcw-bar {
	height: var( --bcw-h, 0% );
}

.bcw-bar-value {
	white-space: nowrap;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
	padding: var( --bcw-value-padding, 4px );
	background-color: transparent;
	opacity: 0;
	transition: opacity calc( var( --bcw-anim-duration ) * 0.6 ) var( --bcw-anim-easing );
	transition-delay: calc( var( --bcw-anim-index, 0 ) * var( --bcw-anim-stagger ) + var( --bcw-anim-duration ) * 0.4 );
}

.bcw-chart--no-anim .bcw-bar-value {
	opacity: 1;
	transition: none;
}

.bcw-chart--anim.bcw-in-view .bcw-bar-value {
	opacity: 1;
}

.bcw-bar-label {
	height: var( --bcw-label-height );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	font-size: 14px;
	line-height: 1.2;
}

/* --------------------------------------------------------------------
   Masquage des axes (Contenu > Axe & Légende).
   - Axe des ordonnées OFF : masque les chiffres de graduation ET tous
     les traits horizontaux de la grille (la grille disparaît en entier).
   - Axe des abscisses OFF : masque les étiquettes de catégorie ET
     uniquement le trait de base (la ligne du 0, `.bcw-gridline--zero`) ;
     les autres traits de la grille restent visibles si l'axe Y est
     encore affiché.
   -------------------------------------------------------------------- */
.bcw-chart.bcw-hide-axis-x .bcw-bar-label {
	display: none;
}

.bcw-chart.bcw-hide-axis-x .bcw-gridline--zero .bcw-gridline__line {
	display: none;
}

.bcw-chart.bcw-hide-axis-y .bcw-gridline__value {
	display: none;
}

.bcw-chart.bcw-hide-axis-y .bcw-gridline__line {
	display: none;
}

/* --------------------------------------------------------------------
   Légende
   -------------------------------------------------------------------- */
.bcw-legend {
	grid-area: legend;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* En haut/bas, la légende partage la même colonne (1fr) pleine largeur que
   le graphique : elle doit se centrer elle-même plutôt que s'étirer. */
.bcw-chart-row.bcw-legend-top .bcw-legend,
.bcw-chart-row.bcw-legend-bottom .bcw-legend {
	justify-self: center;
}

.bcw-legend__swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: var( --bcw-bar-color );
	border-radius: 3px;
	flex: 0 0 auto;
}

.bcw-legend__label {
	font-size: 14px;
	line-height: 1.2;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media ( max-width: 767px ) {
	.bcw-chart-row {
		--bcw-legend-gap: 8px;
	}

	.bcw-gridline__value,
	.bcw-bar-label,
	.bcw-legend__label,
	.bcw-bar-value {
		font-size: 12px;
	}
}