/* !  partie recherche  */
     #hero-search-section {
         font-family: 'Plus Jakarta Sans', sans-serif;
         /* background: radial-gradient(circle at top right, #f8fafc, #ffffff); */
         min-height: 45vh;
         display: flex;
         align-items: center;
     }

     #hero-search-section .search-container {
         background: #ffffff;
         border-radius: 30px;
         padding: 8px;
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
         border: 1px solid #edf2f7;
         transition: all 0.3s ease;
     }

     #hero-search-section .search-container:focus-within {
         box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12);
         transform: translateY(-2px);
     }

     #hero-search-section .form-control {
         border: none !important;
         box-shadow: none !important;
         padding-left: 25px;
         font-size: 1.1rem;
     }

     #hero-search-section .btn-search {
         border-radius: 25px !important;
         padding: 12px 35px !important;
         font-weight: 600;
         letter-spacing: 0.5px;
         transition: all 0.3s ease;
     }

     #hero-search-section .btn-search:hover {
         filter: brightness(1.1);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }

     #hero-search-section .img-main {
         filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.08));
         animation: floating 7s ease-in-out infinite;
     }

     @keyframes floating {

         0%,
         100% {
             transform: translateY(0px);
         }

         50% {
             transform: translateY(-15px);
         }
     }

     /* !  fin partie recherche  */

     main.content {
         margin-left: 0 !important;
         background: radial-gradient(circle at top right, #f8fafc, #ffffff);
     }

     /* Loader centré et grand */
     .spinner-loader {
         width: 60px;
         /* largeur */
         height: 60px;
         /* hauteur */
         border: 6px solid #e9ecef;
         /* couleur grise */
         border-top: 6px solid #0d6efd;
         /* couleur CRM bleu */
         border-radius: 50%;
         /* cercle */
         animation: spin 1s linear infinite;
         /* rotation */
         margin: 40px auto;
         /* centré horizontalement avec marge */
     }

     /* Animation rotation */
     @keyframes spin {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     /* ---------------------------- */

     /* =========================
   CHECKBOX = BUTTON STYLE
========================= */

     /* titre */
     #filtre .filter-title {
         margin-bottom: 10px;
         font-size: 16px;
         color: #1f2937;
     }

     /* wrapper input */
     #filtre .input-wrapper {
         position: relative;
     }

     /* INPUT (style unique propre) */
     #filtre .filter-input {
         background: #ffffff;
         border: 1px solid #d6dbe6 !important;
         border-radius: 10px;
         padding: 10px 12px;
         font-size: 14px;
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
         transition: all 0.2s ease;
     }

     /* focus */
     #filtre .filter-input:focus {
         background: #fff;
         border-color: #4a90e2;
         box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
         outline: none;
     }

     /* placeholder */
     #filtre .filter-input::placeholder {
         color: #8a94a6;
     }


     #filtre .custom-check {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 8px 14px;
         border-radius: 999px;
         background: #ffffff;
         border: 1px solid #d6dbe6;
         cursor: pointer;
         font-size: 14px;
         user-select: none;
         transition: all 0.2s ease;
     }

     /* cacher la checkbox native */
     #filtre .custom-check input {
         display: none;
     }

     /* état normal hover */
     #filtre .custom-check:hover {
         background: #eaf2ff;
         border-color: #4a90e2;
     }

     /* état actif (checkbox cochée) */
     #filtre .custom-check input:checked+span {
         color: #fff;
     }

     /* bouton actif */
     #filtre .custom-check input:checked {
         accent-color: #4a90e2;
     }

     /* style du label quand actif */
     #filtre .custom-check:has(input:checked) {
         background: #4a90e2;
         border-color: #4a90e2;
         color: white;
         box-shadow: 0 4px 10px rgba(74, 144, 226, 0.25);
     }

     .recherche-placeholder::placeholder {
         font-size: 14px;
         /* ajuste la taille ici */
     }