.contact .container-lg {
          padding-top : 50px;
          padding-bottom : 50px;
}
#contact-title {
          margin-bottom : 50px;
          font-weight : 700;
          color : var(--txt-color-primary);
          animation: fadeInUp 0.8s ease forwards;
          text-transform: uppercase;
          line-height: 1.2;
}
.contact h2, .contact .h2 {
          font-weight : 700;
          color : var(--txt-color-primary);
          font-family: var(--font-title);
          animation: fadeInUp 0.8s ease forwards;
          text-transform: uppercase;
          font-size : 1.5rem;
}

.contact h2 small, .contact .h2 small {
          font-size : 0.8rem;
          color : var(--txt-color-dark);
          font-weight : 300;
}
.contact #contact-details {
          scroll-margin-top: 80px;
}

.radio-card {
          cursor: pointer;
          transition: all 0.2s ease;
          border: 2px solid transparent;
          height: 100%;
          width : auto;
}
.radio-card h2 {
          color : var(--txt-color-primary);
          font-size : 1.2rem;
          text-transform: none;
          animation: none;
}
.radio-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.radio-card-input:checked + .radio-card {
          border-color: var(--txt-color-primary);
          background-color: var(--bg-color-light-3);
}

.radio-card-input {
          position: absolute;
          opacity: 0;
}

.radio-card-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-color: var(--txt-color-light);
          margin-bottom: 1rem;
          color: var(--txt-color-primary);
          transition: all 0.3s ease;
}

.radio-card-input:checked + .radio-card .radio-card-icon {
          background-color: var(--txt-color-primary);
          color: var(--txt-color-light);
}

.radio-card-check {
          position: absolute;
          top: 1rem;
          right: 1rem;
          width: 22px;
          height: 22px;
          border: 2px solid var(--txt-color-light);
          border-radius: 50%;
          transition: all 0.3s ease;
          background-color: var(--bg-color-white);
}

.radio-card-input:checked + .radio-card .radio-card-check {
          background-color: var(--txt-color-primary);
          border-color: var(--txt-color-secondary);
}

.radio-card-input:checked + .radio-card .radio-card-check:after {
          content: "";
          position: absolute;
          top: 5px;
          left: 5px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: var(--txt-color-light);
}
.radio-card-img-wrapper {
    width: 100%;
    max-width: 418px;
    aspect-ratio: 2/1;
    margin: 0 auto 1rem auto;
    display: block;
    min-height: 0px;
}
.radio-card-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 2/1;
}

/* Form */

.form-control {
          border-color: var(--txt-color-light);
          border-radius: 1rem;
          padding : 0.8rem;
          box-shadow : 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
          transition : box-shadow 0.2s ease, border 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
}
.form-control:focus {
          border-color: var(--txt-color-primary);
          box-shadow: 0 0 0 .25rem var(--bg-color-light-7);
          border-radius: 0.5rem;
}
.form-check-input:focus {
          border-color: var(--txt-color-primary);
          box-shadow: 0 0 0 .25rem var(--bg-color-light-7);
}
.form-check-input {
          box-shadow : 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
          margin-right : 2px;
}
.form-check-input:checked {
          background-color: var(--txt-color-primary);
          border-color: var(--txt-color-primary-5);
}
.form-label {
          font-weight : 600;
          font-size : 0.9rem;
}
.form-check-label {
    font-weight : 400;
    font-size : 0.9rem;
}
.form-label small {
          font-size : 0.8rem;
          color : var(--txt-color-dark);
          font-weight : 300;
}
.form-label span {
          color : var(--txt-color-primary);
          font-weight : 700;
}
.form-label .bi, .form-check-label .bi {
          color : var(--txt-color-primary);
          opacity : 0.7;
          margin-right : 2px;
}

/* Créneaux */
.hide {
          display : none;
}
.contact .alert {
          background-color : var(--bg-color-light);
          color : var(--txt-color-primary);
          border : 1px solid var(--txt-color-primary);
          margin-bottom : 0px;
}
.contact .alert:focus-visible {
          border : 2px solid var(--txt-color-primary);
}
.contact .alert .bi {
          margin-right : 8px;
}

#list-rdv {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          gap: 0.75rem;
          margin-top: 1rem;
}

#list-rdv .time-slot {
          width: 100%;
          white-space: nowrap;
          text-align: center;
          padding: 0.75rem 1rem;
          box-sizing: border-box;
}

.btn-slot {
	color : var(--txt-color-primary);
	border-color : var(--txt-color-primary);
	background-color : var(--txt-color-light);
          box-shadow : 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.btn-slot:hover, .btn:first-child:active {
	color : var(--txt-color-light);
	border-color : var(--txt-color-secondary);
	background-color : var(--txt-color-primary);
}
.btn-slot:focus-visible {
	color : var(--txt-color-light);
	background-color: var(--txt-color-primary);
	border-color : var(--txt-color-secondary);
	box-shadow: 0 0 0 .25rem var(--txt-color-primary-5);
}

.btn-slot.active {
	color : var(--txt-color-light);
	border-color : var(--txt-color-primary);
	background-color : var(--txt-color-secondary);
          box-shadow : 0 0.125rem 0.25rem var(--txt-color-primary-5);
}
.btn-slot.active:hover, .btn.active:active {
	color : var(--txt-color-light);
	border-color : var(--txt-color-primary);
	background-color : var(--txt-color-secondary);
}
.btn-slot.active:focus-visible {
	color : var(--txt-color-light);
	background-color: var(--txt-color-secondary);
	border-color : var(--txt-color-primary);
	box-shadow: 0 0 0 .25rem var(--txt-color-primary-5);
}
#list-rdv.is-invalid {
          border: 2px solid var(--txt-color-danger) !important;
          border-radius: 1rem;
}
#list-rdv.is-valid {
          border: 2px solid var(--txt-color-success)  !important;
          border-radius: 1rem;
}

@media (min-width: 768px) {
          .btn-submit .btn {
                    display: inline-block !important;
                    width: auto !important;
          }
}

/* Réservation */
.sticky-lg-top {
          position: sticky !important;
          top: 90px;
}
#form-res strong {
          color : var(--txt-color-primary);
          font-weight : 700;
}
.res-required-indicator {
          font-size : 0.8rem;
          color : var(--txt-color-light-grey);
}
.res-required-indicator .asterisk {
          color : var(--txt-color-grey);
          font-size : 1rem;
}
.contact .bi-asterisk {
          color : var(--txt-color-primary);
          font-size : 0.4rem;
          vertical-align: 0.8em;
}
.res-required {
          font-weight : 600;
          margin-left : 3px;
}
.res-required.success {
          color : var(--txt-color-success);
}
.res-required.warning {
          color : var(--txt-color-warning);
}
.res-required.danger {
          color : var(--txt-color-danger);
}

/* Contact infos */
#form-infos .bi {
          color : var(--txt-color-primary);
          opacity : 0.7;
          margin-right : 8px;
}
#form-infos a, .form-check-label a {
          opacity : 1;
          transition: all 0.2s ease;
          text-decoration : none;
          color : var(--txt-color-primary);
}
#form-infos a:hover, .form-check-label a:hover {
          opacity : 0.5;
}
#form-infos a:focus-visible, .form-check-label a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--txt-color-primary-5);
    border-radius : 1rem;
}