/* Widget Formulaire Satisfaction - star fields */
/* 4 notes per row, 2 under 900px, 1 under 480px - labels never wrap */
/* Row gap is bigger than the label/stars gap so each pair reads as one group */
.formulaire.satisfaction .notes{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:34px 20px;justify-items:center;align-items:start}
.formulaire.satisfaction .note{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0}
.formulaire.satisfaction .noteLabel{font-weight:600;text-align:center;white-space:nowrap;line-height:1.2}
.formulaire.satisfaction .noteLabel i{color:#c00;font-style:normal;margin-right:4px}

/* Radios are written from 5 to 1, row-reverse puts them back in the right order
   so that "input:checked ~ label" can colour the stars on its left */
/* Negative margin compensates the empty space inside the star glyph em box */
.formulaire.satisfaction .stars{display:inline-flex;flex-direction:row-reverse;justify-content:center;margin-top:-3px}
.formulaire.satisfaction .stars input{position:absolute;opacity:0;width:0;height:0}
.formulaire.satisfaction .stars label{cursor:pointer;font-size:28px;line-height:1;color:#305f8973;transition:color .15s}
.formulaire.satisfaction .stars label::before{content:"\2605"}
.formulaire.satisfaction .stars label:hover,
.formulaire.satisfaction .stars label:hover ~ label,
.formulaire.satisfaction .stars input:checked ~ label{color:#f5a623}
.formulaire.satisfaction .stars input:focus-visible + label{outline:2px solid #370962;outline-offset:2px}

@media screen and (max-width:900px){
	.formulaire.satisfaction .notes{grid-template-columns:repeat(2,1fr)}
}

/* Below this width, two "Qualité de la prestation" no longer fit side by side
   on a single line: switch to one note per row */
@media screen and (max-width:480px){
	.formulaire.satisfaction .notes{grid-template-columns:1fr;gap:26px}
	.formulaire.satisfaction .stars label{font-size:24px}
}

.formulaire.erreurs{color:#c00;margin-bottom:16px}
.formulaire.erreurs ul{margin:0;padding-left:18px}