@charset "utf-8";

/* 🎨 Variables globales */
:root {
  /* Couleurs */
  --color-main-purple: #4e28a7;
  --color-hover-purple: #301c7a;
  --color-grey-text: #efefef;/*color-grey-text: #767171;*/
  --color-hover-yellow: #57B0C4; /*--color-yellow: #FFBE00;*/
  --color-yellow-dark: #6ab78d;/*--color-yellow-dark: #E8AD00;*/
  --color-yellow: #8FA6B2;
  --color-grey-bg: #A1A1A3;/*--color-grey-bg: #efefef;*/
  --color-grey-hover: #d6d6d6;
  --color-dark: #101010;
  --color-male: #6C97B1;/*--color-male: #C2D3EC;*/
  --color-female: #6AB98A;/*--color-female: #F5E2E1;*/
  --color-total: #57B0C4;/*--color-total: #FFBE00;*/
  --color-info-icon: #8db817;
  --color-arrow-icon: #ff7b00;
  --color-chart-icon: #FFFFF0;/*--color-chart-icon: #ff3c00;*/
  --warning-yellow: #ffc107;
  --primary-purple: #57B0C4;
  --dark-red: #a72839;

  /* Box Shadows */
  --shadow-main: 0 3px 10px rgba(0, 0, 0, 0.2);
  --shadow-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  --shadow-inset-hover: inset 0 -3px 0 rgba(0, 0, 0, 0.32);
  --shadow-inset-active: inset 0px -1px 0 rgba(0, 0, 0, 0.22);

  /* Fonts et tailles */
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
}

/* 🧱 Mise en page */
.labor-force-viz.container {
  position: relative;
  z-index: 1;
}

.labor-force-viz #Top, 
.labor-force-viz #Sec, 
.labor-force-viz #Ter, 
.labor-force-viz #End {
  text-align: center;
  align-self: center;
  height: 15em;
  font-size: var(--font-sm);
  color: var(--color-grey-text);
}

.labor-force-viz #Top {
  background: url('../images/total1.png') no-repeat;
  background-size: 100% 91%;
}

.labor-force-viz #Sec {
  background: url('../images/total2.png') no-repeat;
  background-size: 100% 90%;
}

.labor-force-viz #Ter {
  background: url('../images/total3.png') no-repeat;
  background-size: 100% 90%;
}

.labor-force-viz #End {
  background: url('../images/end.png') no-repeat;
  background-size: 100% 90%;
}

.labor-force-viz #SubTop, 
.labor-force-viz #SubEnd, 
.labor-force-viz #SubSec, 
.labor-force-viz #SubTer {
  font-size: 10px;
  text-align: center;
  align-self: center;
  height: 19em;
  position: relative;
  z-index: 5;
}

/* 📊 Titres et Valeurs */
.labor-force-viz .Title {
  font-size: var(--font-md);
  color: var(--color-yellow-dark);
  height: 2.1em;
  border-radius: 10px;
  border: none;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.labor-force-viz .Value {
  font-size: var(--font-lg);
  color: var(--color-grey-text);
  height: 2.1em;
  border-radius: 10px;
  border: none;
  padding: 4px 16px;
  background-color: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.labor-force-viz .Value:hover {
  color: var(--color-hover-yellow);
  background-color: #BABABA;
}


.labor-force-viz .share {
  color: #666;
  /*font-weight: normal;*/
}

/* Gender & Alignement */
.labor-force-viz .Centred {
  justify-content: center;
}

/* 📦 Boutons */
.labor-force-viz .button-wrap {
  position: relative;
  font-size: var(--font-md);
  text-align: center;
  top: 50%;
}

.labor-force-viz .button-label {
  display: inline-block;
  width: 30%;
  height: 15%;
  padding: 10px;
  margin: 0px 1px;
  cursor: pointer;
  color: var(--color-grey-text);
  border-radius: 10px;
  background: var(--color-grey-bg);
  box-shadow: var(--shadow-main), var(--shadow-inset);
  transition: 0.3s;
  user-select: none;
}

.labor-force-viz .button-label h1 {
  font-size: 0.9em;
}

.labor-force-viz .button-label:hover {
  background: var(--color-grey-hover);
  color: var(--color-dark);
  box-shadow: var(--shadow-main), var(--shadow-inset-hover);
}

.labor-force-viz .button-label:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-main), var(--shadow-inset-active);
}

.labor-force-viz .Value strong {
 /* font-weight: normal;*/
}

.labor-force-viz .button-label strong {
  /*font-weight: normal;*/
}

@media (max-width: 40em) {
  .labor-force-viz .button-label {
    padding: 10px;
    border-radius: 20px;
  }
}

/* 🎯 Sélections */
.labor-force-viz #Total:checked + .button-label {
  background: var(--color-total);
}

.labor-force-viz #Male:checked + .button-label {
  background: var(--color-male);
}

.labor-force-viz #Female:checked + .button-label {
  background: var(--color-female);
}

.labor-force-viz .hidden {
  display: none;
}

/* 📅 Dropdown */
.labor-force-viz .dropdown-field {
  position: relative;
  width: 100px;
  z-index: 10;
}

.labor-force-viz .dropdown-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 10px 16px;
  padding-right: 40px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fdfdfd;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 11;
}

.labor-force-viz .dropdown-field select:focus {
  background-color: #fff9cc;
  border-color: #999;
  outline: none;
}

.labor-force-viz .dropdown-field::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
  font-size: 14px;
}

/* ✨ Animation clignotement */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.labor-force-viz .blink-arrow {
  animation: blink 0.7s infinite;
}

/* 🎯 Icônes & interactions */
.labor-force-viz .icon-hover {
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.labor-force-viz .icon-hover:hover {
  transform: scale(1.3);
}

.labor-force-viz .bi-info-circle:hover {
  color: var(--color-info-icon);
}

.labor-force-viz .fas.fa-arrow-down:hover {
  color: var(--color-arrow-icon);
}

.labor-force-viz .bi-bar-chart:hover {
  color: var(--color-chart-icon);
}

.labor-force-viz .arrow-icon {
  position: absolute;
  right: 12px;
  /*top: 50%;
  transform: translateY(-50%);*/
  font-size: 22px;
}

.labor-force-viz .bi-bar-chart {
  position: absolute;
  right: 50px;
  transform: translateY(-20%);
  font-size: 22px;
}

.labor-force-viz .icon-chart-hover {
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--color-main-purple);
  cursor: pointer;
}

.labor-force-viz .icon-chart-hover:hover {
  transform: scale(1.2);
  color: var(--color-hover-purple);
}