/*VARIABLES*/
:root {
  --color1: #3B3938;
  --color2: #F5F5F5;
  --color3: #ffffff;
  --color4: #DA291C;
  --color5: #CAC6C5;
  --bold: 'CitroenBold';
  --regular: 'CitroenRegular';
  --radius: 12px;
}
/*FONTS CITROEN*/
@font-face {
  font-family: 'CitroenRegular';
  src: url('../fonts/CitroenType-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'CitroenBold';
  src: url('../fonts/CitroenType-Bold.woff2') format('woff2');
}
/*CITROEN*/
body > div {
  background: var(--color2);
}
.tab {
  font-family: var(--regular);
  color: var(--color1);
  margin-bottom: 1em;
}
.tab__label {
  padding: .8em;
  background-color: var(--color3);
  border-bottom: 1px solid var(--color5);
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--bold);
  font-size: 15px;
}
.tab__label:hover {
  background-color: var(--color3);
}
.tab__label::after {
  background-image: url(../img/moins.png);
  background-repeat: no-repeat;
  background-position: center;
}
.tab__content {
  background-color: var(--color3);
  border-radius: 0 0 var(--radius) var(--radius);
  display: none;
}
.tab__content-item {
  padding: 1em;
  border-right: 1px solid var(--color2);
  border-bottom: 1px solid var(--color2);
  color: var(--color1);
  font-size: 14px;
}
.tab__content-item:hover {
  color: var(--color4);
}
input:checked + .tab__label {
  background-color: var(--color3);
}
input:checked + .tab__label::after {
  background-image: url(../img/plus.png);
  background-repeat: no-repeat;
  background-position: center;
}
input:checked ~ .tab__content {
  display: grid;
}