:root {
  --color-main:black;
  --color-soft:#555555;
  --color-error:red;
  --color-border:grey;
}
body{
  background: aliceblue;
  color:var(--color-main);
  font-family: Arial, Helvetica, sans-serif;
}
main{
  margin: 0 auto;
  max-width:40rem;
}
main.horizontal{
  max-width:55rem;
}
.horizontal .form-group{
  display: flex;
  flex-wrap: wrap;
}
.horizontal .form-label{
  width: 50%;
}
.horizontal :is(input[type="text"], input[type="email"], textarea){
  width:45%;
}
.horizontal ul[role="radiogroup"]{
  padding-left:0;
}

.button{
  padding:0.5rem 1rem;
  font-size:1.2rem;
  margin:1.5rem auto;
  display: block;
}
.visually-hidden{
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
fieldset{
  padding: 1.875rem;

  margin-top:2rem;
}
legend,h2{
  font-weight: 600;
  font-size:1.875rem;
  font-family: Fabrikat, Inter, Arial, Helvetica, sans-serif;
  text-align: left;
}
.error, .mixerror,.format-error{
  display: none;
  color: var(--color-error);
}
.invalid .error,.invalid.mixerror,.invalidFormat .format-error{
  display: block;
}
.mandatory,.blocmsg.err{
  color: var(--color-error);
}
.form-group{
  padding: 0.625rem 0;
  text-align: left;
}
.form-label, [role="radiogroup"], [role="radiogroup"] li{
  display: inline-block;
}

[role="radiogroup"] li{
  padding: 0px 0px 0px 15px;
}
@media screen and (max-width: $bp_l) {
  .form-label, [role="radiogroup"], [role="radiogroup"] li{
      display: block;
 }
  [role="radiogroup"] li{
      padding: 0px 0px 5px 0px;
 }
}
.form-label{
  font-weight: 600;
  font-size:1.31rem;
}
.form-label-help{
  display: block;
  font-weight: normal;
  font-size: 0.9rem;
  padding-top: 0.4rem;
  color:var(--color-soft);
}
input, textarea, select {
  margin:8px 0px 0px 0px;
  padding:6px 20px 6px 6px;
  border: 1px solid var(--color-border);
  box-shadow: none;
  font-size: 1rem;
  font-family: Inter, Arial, Helvetica, sans-serif;
}
:is(input, textarea, select) .invalid{
  box-shadow: 1px 1px 1px 0 var(--color-error);
}
.invalid :is(input,textarea,select){
  box-shadow: 1px 1px 1px 0 var(--color-error);
}
.invalid input[type="radio"]{
  border: 1px solid var(--color-error);
  box-shadow: none;
}
input[type="text"], input[type="email"], input[type="tel"], textarea{
  display: block;
  width:90%;
}
/*https:
/*moderncss.dev/pure-css-custom-styled-radio-buttons
/*/
input[type="radio"] {
  position: relative;
  width: 1rem;
  height: 1rem;
 /* Not removed via appearance */
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-main);
  border-radius: 50%;
 /* For iOS < 15 */
  background-color: #fff;
  color: currentColor;
 /*Style du radio non coché*/
  font: inherit;
  transform: translateY(1px);
 /* Remove most all native input styles */
  appearance: none;
  appearance: none;
  place-content: center;
}
/*ajout du before our gestion du radio coché*/
input[type="radio"]::before {
  content: "";
  position: absolute;
  top:2px;
  left:2px;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
 /* Windows High Contrast Mode */
  background-color: var(--color-main);
  box-shadow: inset 1em 1em var(--color-main);
  transition: 120ms transform ease-in-out;
  transform: scale(0);
}
input[type="radio"]:checked::before {
  transform: scale(1);
}
input[type="radio"]:focus {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}