/* Mobile responsive navigation */
  @media (max-width: 575px) {

    .w-50,
    .width-55 {
      width: 100% !important;
    }

    .container {
      min-width: 50%;
    }

    .mini-carte .col-12 {
      margin: 10px 0;
    }

    .outils-grid {
      display: grid;
      grid-template-columns: 1fr;
    }

    .outils-grid>div {
      margin: 5px 0;
    }

    .btn-light {
      margin: 14px auto;
      padding: 16px 18px;
      display: inline-block;
      width: 100%;
    }

    .hero-section {
      height: auto;
      position: relative;
      padding-top: 92px;
      padding-bottom: 28px;
      min-height: 0;
    }

    .hero-section h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .hero-section .lead {
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .selection {
      padding: 12px;
      gap: 9px;
      margin-top: 10px;
    }

    .selectiontitre {
      font-size: 0.95rem;
    }

    .fichechoix {
      grid-template-columns: 34px 1fr auto;
      min-height: 78px;
      gap: 9px;
      padding: 10px;
    }

    .rang {
      width: 32px;
      height: 32px;
    }

    .fichetexte strong {
      font-size: 0.95rem;
    }

    .fichetexte small {
      font-size: 0.68rem;
    }

    .fichetexte em {
      display: none;
    }

    .boutonmini {
      min-width: 58px;
      padding: 7px 9px;
      font-size: 0.68rem;
    }

    .hero-image {
      text-align: center;
    }

    .hero-image img {
      position: relative;
      bottom: -70px;
    }

    .hero-image,
    .carte-payment {
      display: none;
    }

    #about {
      padding: 30px 0 !important;
    }

    #about h2 {
      margin: 0 auto 20px auto;
    }

    .content-card {
      width: 100%;
    }

    h2 {
      font-size: 1.5rem;
    }

    .encartfinal {
      padding: 15px;
      border-radius: 10px;
    }

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
      padding-right: 15px !important;
      padding-left: 15px !important;
      --bs-gutter-x: 0 !important;
      --bs-gutter-y: 0 !important;
    }

    .row>* {
      padding-right: 10px !important;
      padding-left: 10px !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
      --bs-gutter-x: 0 !important;
      --bs-gutter-y: 0 !important;
    }

    .centered-row {
      justify-content: center;
      width: 100%;
    }
  }

  @media (min-width: 576px) and (max-width: 767px) {
    .width-55 {
      width: 100%;
    }

    .container {
      min-width: 90%;
    }

    .mini-carte .col-12 {
      margin: 10px 0;
    }

    .outils-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .outils-grid>div {
      margin: 15px 0;
    }

    .btn-light {
      margin: 20px auto;
      padding: 18px;
      display: inline-block;
      width: 100%;
    }

    .hero-section {
      height: auto;
      position: relative;
      padding-top: 100px;
      min-height: 0;
    }

    .selection {
      margin-top: 15px;
    }

    .hero-image {
      text-align: center;
    }

    .hero-image img {
      position: relative;
      bottom: -70px;
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {

    .w-50,
    .width-55 {
      width: 100%;
    }

    .container {
      min-width: 90%;
    }


    .outils-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .outils-grid>div {
      margin: 15px 0;
      width: 100%;
    }

    .btn-light {
      margin: 20px auto;
      padding: 18px;
      display: inline-block;
      width: 100%;
    }

    .hero-section {
      height: auto;
      position: relative;
      padding-top: 105px;
      min-height: 0;
    }

    .hero-image {
      text-align: center;
    }

    .hero-image img {
      position: relative;
      bottom: -70px;
    }

    .row {
      flex-direction: column;
    }

    .selection {
      margin-top: 18px;
    }

    .row .col-12 {
      width: 100%;
    }

    .mini-carte .col-12 {
      margin: 10px 0;
    }
  }

  @media (min-width: 992px) and (max-width: 1299px) {
    .container {
      min-width: 100%;
    }
  }