/* body { */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* height: 100vh; */
/* } */

.toggleContainer {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   width: fit-content;
   border: 3px solid #343434;
   border-radius: 20px;
   background: #343434;
   /* font-weight: bold; */
   color: #343434;
   cursor: pointer;
   font-size:10pt;	
 }
 .toggleContainer::before {
   content: '';
   position: absolute;
   width: 50%;
   height: 100%;
   left: 0%;
   border-radius:20px;
   background: white;
   transition: all 0.3s;
 }
 .toggleCheckbox:checked + .toggleContainer::before {
    left: 50%;
 }
 .toggleContainer div {
   text-align: center;
   z-index: 1;
   padding: 5px 10px;
 }
 .toggleCheckbox {
   display: none;
 }
 .toggleCheckbox:checked + .toggleContainer div:first-child{
   color: white;
   transition: color 0.2s;
 }
 .toggleCheckbox:checked + .toggleContainer div:last-child{
   color: #343434;
   transition: color 0.2s;
 }
 .toggleCheckbox + .toggleContainer div:first-child{
   color: #343434;
   transition: color 0.2s;
 }
 .toggleCheckbox + .toggleContainer div:last-child{
   color: white;
   transition: color 0.2s;
   /* font-style: italic; */
 }
 
 /* Cette règle ajoute le symbole "✔" après le texte du dernier élément div qui suit l'élément .toggleCheckbox lorsqu'il est coché. */
 .toggleCheckbox:checked + .toggleContainer div:last-child::after, 
.toggleCheckbox:not(:checked) + .toggleContainer div:first-child::after {
  content: "✔";
  margin-left: 5px;
  color:green;
}
 .toggleCheckbox:checked + .toggleContainer div:last-child, 
.toggleCheckbox:not(:checked) + .toggleContainer div:first-child {

  font-weight:bold;
}

/* CE QUI EST OFF */
.toggleCheckbox:not(:checked) + .toggleContainer div:last-child::before,
.toggleCheckbox:checked + .toggleContainer div:first-child::before {
  /* content: "❌"; */
  /* margin-right: 5px; */
  /* font-size: 0.7em; */
}
.toggleCheckbox:not(:checked) + .toggleContainer div:last-child,
.toggleCheckbox:checked + .toggleContainer div:first-child{
    line-height: 1.5;
	color:darkgrey;
}

@media screen and (min-width: 768px)
{
   
	.toggleContainer {  font-size: 14pt ;}
	.toggleContainer div {      padding: 8px 15px; }

}