/* ===============================
   MOBILE UI – BEQLER (OPTIMISÉ)
   SANS DOUBLONS - USER-CARD PLUS PETITES
   =============================== */

/* ===== TRÈS PETIT MOBILE (≤360px) ===== */
@media (max-width: 360px) {
  * {
      -webkit-tap-highlight-color: transparent;
  }

  html {
      font-size: 13px;
  }

  body {
      overflow-x: hidden;
  }

  .nav {
      display: none;
  }

  .menu-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      cursor: pointer;
  }

  .header-container {
      padding: 10px 12px;
  }

  /* HERO */
  .hero {
      height: auto;
      padding: 40px 10px 20px;
  }

  .hero h1 {
      font-size: clamp(1.5rem, 5vw, 2rem);
      line-height: 1.3;
      margin-bottom: 16px;
  }

  .hero p {
      font-size: clamp(0.9rem, 4vw, 1rem);
      margin-bottom: 20px;
  }

  /* SEARCH FORM */
  .search-form {
      flex-direction: column;
      gap: 10px;
      padding: 10px;
  }

  .search-form input,
  .search-form select,
  .btn-search {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border-radius: 6px;
      border: 1px solid #e0e0e0;
      -webkit-appearance: none;
      appearance: none;
  }

  .btn-search {
      height: 44px;
      min-height: 44px;
  }

  .search-section {
      top: 19px;
  }

  /* USER CARD - TRÈS PETITE */
  .slider-wrapper {
      padding: 25px 5px;
      gap: 10px;
      top: 200px;
      margin-bottom: 3px;
  }

  .freelancers-list {
      gap: 15px;
      padding: 15px 0;
  }

  .user-card {
      flex: 0 0 100%;
      max-width: 100%;
      min-width: 100%;
      width: 100%;
      height: auto;
  }

  .user-card .card-header {
      padding: 10px 12px;
  }

  .user-card .card-header .user-name {
      font-size: 12px;
  }

  .user-card .card-body {
      padding: 8px;
  }

  .user-card .card-body .user-avatar img.profile-photo_index {
      height: 80px;
      width: 100%;
      object-fit: cover;
  }

  .user-card .card-footer {
      padding: 10px;
      height: auto;
      min-height: 70px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .user-card .row-line {
      font-size: 10px;
      gap: 3px;
  }

  .user-card .row-line span {
      font-size: 9px;
  }

  .user-card .user-langue {
      width: 18px;
      height: 14px;
  }

  .slider-btnFre {
      width: 32px;
      height: 32px;
      font-size: 12px;
      display: none;
  }

  /* SECTIONS */
  section {
      padding: 15px 10px;
  }

  .comment-flex,
  .sol_flex {
      flex-direction: column;
      padding: 0 10px;
      gap: 12px;
  }

  .step,
  .mis,
  .ins {
      padding: 10px;
      margin: 8px 0;
  }

  .step h3 {
      font-size: 1rem;
      margin-bottom: 8px;
  }

  /* BUTTONS */
  button,
  .btn {
      min-height: 44px;
      min-width: 44px;
      padding: 10px 12px;
      font-size: 14px;
      border-radius: 6px;
      cursor: pointer;
  }

  /* TEXTE */
  h1 {
      font-size: 1.5rem;
  }

  h2 {
      font-size: 1.3rem;
  }

  h3 {
      font-size: 1rem;
  }

  p {
      line-height: 1.5;
  }

  /* FORMS */
  input,
  select,
  textarea {
      font-size: 16px;
      padding: 10px;
  }

  /* CAROUSEL */
  .carousel-wrapper {
      gap: 8px;
      padding: 8px 3px;
      margin-top: 70px;
  }

  .carousel-item {
      flex: 0 0 90vw;
      max-width: 90vw;
      height: 180px;
      border-radius: 8px;
  }

  /* MODAL */
  .modal-content {
      flex-direction: column;
      max-width: 100%;
      margin: 10px;
      padding: 12px;
      border-radius: 12px;
  }

  /* CARRIER */
  .carrier {
      flex-direction: column;
      height: auto;
      gap: 12px;
  }

  .nvcarre {
      width: 100%;
      height: 180px;
  }
}

/* ===== MOBILE PETIT (361px - 479px) ===== */
@media (min-width: 361px) and (max-width: 479px) {
  * {
      -webkit-tap-highlight-color: transparent;
  }

  html {
      font-size: 13px;
  }

  body {
      overflow-x: hidden;
  }

  .nav {
      display: none;
  }

  .menu-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      cursor: pointer;
  }

  .header-container {
      padding: 10px 12px;
  }

  /* HERO */
  .hero {
      height: auto;
      padding: 50px 12px 25px;
  }

  .hero h1 {
      font-size: clamp(1.5rem, 7vw, 9rem);
      line-height: 1.3;
      margin-bottom: 16px;
  }

  .hero p {
      font-size: clamp(0.9rem, 4vw, 1rem);
      margin-bottom: 20px;
  }

  /* SEARCH FORM */
  .search-form {
      flex-direction: column;
      gap: 10px;
      padding: 12px;
  }

  .search-form input,
  .search-form select {
      width: 100%;
      padding: 12px 15px;
      font-size: 16px;
      border-radius: 5px;
      border: 2px solid #ddd;
      -webkit-appearance: none;
      appearance: none;
      background-color: var(--text-light);
      color: var(--text-dark);
      transition: all 0.3s;
  }

  .btn-search {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      height: 44px;
      min-height: 44px;
  }

  .search-section {
      top: 19px;
  }

  /* USER CARD - PETIT */
  .slider-wrapper {
    padding: 24px 27px;
      gap: 10px;
      top: 200px;
      margin-bottom: 3px;
  }

  .freelancers-list {
      gap: 20px;
      padding: 15px 0;
  }

  .user-card {
    flex: 0 0 100%;
    max-width: 72%;
    min-width: 73%;
    width: 82%;
    height: auto;
  }

  .user-card .card-header {
      padding: 12px 14px;
  }

  .user-card .card-header .user-name {
      font-size: 13px;
  }

  .user-card .card-body {
      padding: 10px;
  }

  .user-card .card-body .user-avatar img.profile-photo_index {
      height: 200px;
      width: 100%;
      object-fit: cover;
  }

  .user-card .card-footer {
      padding: 12px;
      height: auto;
      min-height: 80px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .user-card .row-line {
      font-size: 11px;
      gap: 4px;
  }

  .user-card .row-line span {
      font-size: 10px;
  }

  .user-card .user-langue {
      width: 22px;
      height: 16px;
  }

  .slider-btnFre {
      width: 36px;
      height: 36px;
      font-size: 14px;
      display: none;
  }

  /* SECTIONS */
  section {
      padding: 20px 12px;
  }

  .comment-flex,
  .sol_flex {
      flex-direction: column;
      padding: 0 12px;
      gap: 16px;
  }

  .step {
      margin: 16px 0;
      width: 100%;
      padding: 12px;
      background: #f9f9f9;
      border-radius: 8px;
  }

  .step h3 {
      font-size: 1.1rem;
      margin-bottom: 8px;
  }

  .mis,
  .ins {
      width: 100%;
      padding: 12px;
  }

  /* BUTTONS */
  button,
  .btn {
      min-height: 44px;
      min-width: 44px;
      padding: 12px 16px;
      font-size: 16px;
      border-radius: 6px;
      cursor: pointer;
  }

  /* TEXTE */
  h1 {
      font-size: 1.5rem;
  }

  h2 {
      font-size: 2.3rem;
  }

  h3 {
      font-size: 1.1rem;
  }

  p {
      line-height: 1.5;
  }

  /* FORMS */
  input,
  select,
  textarea {
      font-size: 16px;
      padding: 12px;
  }

  /* CAROUSEL */
  .carousel-wrapper {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      gap: 10px;
      padding: 10px 5px;
      margin-top: 80px;
      scrollbar-width: none;
      -ms-overflow-style: none;
  }

  .carousel-wrapper::-webkit-scrollbar {
      display: none;
  }

  .carousel-item {
      flex: 0 0 85vw;
      max-width: 85vw;
      height: 278px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      overflow: hidden;
  }

  .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
      display: block;
  }

  /* MODAL */
  .modal-content {
      flex-direction: column;
      max-width: 100%;
      margin: 10px;
      padding: 12px;
      border-radius: 12px;
  }

  .modal-content .content {
      flex-direction: column;
      height: auto;
      gap: 16px;
  }

  .homeModal:first-child {
      display: none;
  }

  .homeModal:last-child {
      min-height: 400px;
      padding: 30px 20px;
  }

  /* CARRIER */
  .carrier {
      flex-direction: column;
      height: auto;
      gap: 12px;
  }

  .nvcarre {
      width: 100%;
      height: 200px;
  }
}

/* ===== MOBILE MOYEN (480px - 767px) ===== */
@media (min-width: 480px) and (max-width: 767px) {
  * {
      -webkit-tap-highlight-color: transparent;
  }

  html {
      font-size: 14px;
  }

  body {
      overflow-x: hidden;
  }

  .nav {
      display: none;
  }

  .menu-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      cursor: pointer;
  }

  .header-container {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }


  /* HERO */
  .hero {
      height: auto;
      padding: 60px 16px 30px;
  }

  .hero h1 {
      font-size: clamp(1.75rem, 6vw, 2.5rem);
      line-height: 1.3;
      margin-bottom: 16px;
  }

  .hero p {
      font-size: clamp(0.9rem, 4vw, 1rem);
      margin-bottom: 20px;
  }

  /* SEARCH FORM */
  .search-form {
      flex-direction: column;
      gap: 12px;
      padding: 16px;
  }

  .search-form input,
  .search-form select {
      width: 100%;
      padding: 12px 14px;
      font-size: 16px;
      border-radius: 6px;
      border: 1px solid #e0e0e0;
      -webkit-appearance: none;
      appearance: none;
  }

  .btn-search {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      height: 44px;
      min-height: 44px;
  }

  /* USER CARD - 2 CARTES PETITES */
  .slider-wrapper {
      padding: 30px 5px;
      gap: 12px;
  }

  .user-card {
      flex: 0 0 calc(50% - 12px);
      max-width: calc(50% - 12px);
      min-width: 140px;
      height: auto;
  }

  .user-card .card-header {
      padding: 12px 12px;
      font-size: 12px;
  }

  .user-card .card-header .user-name {
      font-size: 12px;
  }

  .user-card .card-body {
      padding: 10px;
  }

  .user-card .card-body .user-avatar img.profile-photo_index {
      height: 120px;
      width: 100%;
      object-fit: cover;
  }

  .user-card .card-footer {
      padding: 10px;
      min-height: 90px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .user-card .row-line {
      font-size: 10px;
      gap: 3px;
  }

  .user-card .row-line span {
      font-size: 9px;
  }

  .user-card .user-langue {
      width: 20px;
      height: 15px;
  }

  .slider-btnFre {
      width: 40px;
      height: 40px;
      font-size: 16px;
      display: none;
  }

  /* SECTIONS */
  section {
      padding: 30px 16px;
  }

  .comment-flex {
      flex-direction: column;
      gap: 20px;
      padding: 0 16px;
  }

  .step {
      margin: 16px 0;
      width: 100%;
      padding: 16px;
      background: #f9f9f9;
      border-radius: 8px;
  }

  .step h3 {
      font-size: 1.1rem;
      margin-bottom: 10px;
  }

  .sol_flex {
      flex-direction: column;
      gap: 20px;
      padding: 16px;
  }

  .mis,
  .ins {
      width: 100%;
      padding: 16px;
  }

  /* BUTTONS */
  button,
  .btn {
      min-height: 44px;
      padding: 12px 16px;
      font-size: 16px;
      border-radius: 6px;
      cursor: pointer;
  }

  /* TEXTE */
  h1 {
      font-size: 1.75rem;
  }

  h2 {
      font-size: 1.5rem;
  }

  h3 {
      font-size: 1.2rem;
  }

  p {
      line-height: 1.5;
  }

  /* FORMS */
  input,
  select,
  textarea {
      font-size: 16px;
      padding: 12px;
  }

  /* CAROUSEL */
  .carousel-wrapper {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      gap: 10px;
      padding: 10px 5px;
      margin-top: 80px;
      scrollbar-width: none;
      -ms-overflow-style: none;
  }

  .carousel-wrapper::-webkit-scrollbar {
      display: none;
  }

  .carousel-item {
      flex: 0 0 85vw;
      max-width: 85vw;
      height: 250px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      overflow: hidden;
  }

  .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
      display: block;
  }

  /* MODAL */
  .modal-content {
      flex-direction: column;
      max-width: 95%;
      max-height: 90vh;
      overflow-y: auto;
      padding: 16px;
      border-radius: 12px;
  }

  .modal-content .content {
      flex-direction: column;
      height: auto;
      gap: 16px;
  }

  .modal-content button {
      width: 100%;
      padding: 12px;
      min-height: 44px;
  }

  /* CARRIER */
  .carrier {
      flex-direction: column;
      height: auto;
      gap: 12px;
  }

  .nvcarre {
      width: 100%;
      height: 200px;
  }

  /* FILTRE */
  .filtre-sidebar-index {
      width: 100%;
      right: -100%;
  }

  .filtre-sidebar-index.active {
      right: 0;
  }

  /* INFO */
  .info-section {
      padding: 15px;
  }

  .info-section .info-text strong {
      font-size: 0.95rem;
  }
  
}

/* ===== TABLETTE (768px - 1199px) ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  * {
      -webkit-tap-highlight-color: transparent;
  }

  html {
      font-size: 14px;
  }

  body {
      overflow-x: hidden;
  }

  .header-controls {
      display: flex;
      padding: 6px;
  }

  .menu-btn {
      display: flex;
  }

  .language-btn {
      display: none !important;
  }

  .language-dropdown {
      display: none !important;
  }

  .language-btn-mobile {
      display: block !important;
  }

  .header-container {
      padding: 12px 16px;
  }

  /* HERO */
  .hero {
      height: 650px;
      min-height: 50px;
      width: 100%;
      padding: 60px 16px 30px;
  }

  .hero h1 {
      font-size: 1.8rem;
      line-height: 1.3;
      margin-bottom: 16px;
  }

  .hero p {
      font-size: 1rem;
      margin-bottom: 20px;
  }

  /* SEARCH FORM */
  .search-form {
      flex-direction: column;
      gap: 12px;
      padding: 16px;
  }

  .search-form input,
  .search-form select {
      width: 100%;
      padding: 12px 14px;
      font-size: 16px;
      border-radius: 6px;
      border: 1px solid #e0e0e0;
      -webkit-appearance: none;
      appearance: none;
  }

  .btn-search {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      height: 44px;
      min-height: 44px;
  }

  /* USER CARD - 3 CARTES */
  .user-card {
      flex: 0 0 calc(33.33% - 16px);
      max-width: calc(33.33% - 16px);
      min-width: 180px;
      height: auto;
  }

  .user-card .card-body .user-avatar img.profile-photo_index {
      height: 200px;
  }

  .user-card .card-header {
      padding: 14px 12px;
  }

  .user-card .card-header .user-name {
      font-size: 15px;
  }

  .user-card .card-footer {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: linear-gradient(135deg, #0f172a 0%, #1a2849 100%);
      color: white;
      min-height: 120px;
  }

  .user-card .row-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
  }

  .slider-btnFre {
      width: 44px;
      height: 44px;
      font-size: 18px;
  }

  /* SECTIONS */
  section {
      padding: 30px 16px;
  }

  .comment-flex {
      flex-direction: column;
      gap: 20px;
      padding: 0 16px;
  }

  .step {
      margin: 16px 0;
      width: 100%;
      padding: 16px;
      background: #f9f9f9;
      border-radius: 8px;
  }

  .sol_flex {
      flex-direction: column;
      gap: 20px;
      padding: 16px;
  }

  .mis,
  .ins {
      width: 100%;
      padding: 16px;
  }

  /* BUTTONS */
  button,
  .btn {
      min-height: 44px;
      padding: 12px 16px;
      font-size: 16px;
      border-radius: 6px;
      cursor: pointer;
  }

  /* TEXTE */
  h1 {
      font-size: 1.75rem;
  }

  h2 {
      font-size: 1.5rem;
  }

  h3 {
      font-size: 1.2rem;
  }

  p {
      line-height: 1.5;
  }

  /* MODAL */
  .modal-content {
      flex-direction: column;
      max-width: 100%;
      margin: 20px;
      padding: 16px;
      border-radius: 12px;
  }

  .modal-content .content {
      flex-direction: column;
      height: auto;
      gap: 16px;
  }

  .homeModal:first-child {
      display: none;
  }

  .homeModal:last-child {
      min-height: 400px;
      padding: 30px 20px;
  }

  .btnconexion h1,
  .btninscription h1 {
      font-size: 1.5em;
      margin-bottom: 15px;
  }

  .close {
      top: 10px;
      right: 10px;
      font-size: 28px;
  }

  .modal-nav {
      margin-bottom: 20px;
  }

  .modal-nav-btn {
      font-size: 14px;
      padding: 10px 15px;
  }

  /* FORMS */
  input,
  select,
  textarea {
      font-size: 16px;
      padding: 12px;
  }

  /* CARRIER */
  .carrier {
      flex-direction: column;
      height: auto;
      gap: 12px;
  }

  .nvcarre {
      width: 100%;
      height: 200px;
  }
}

/* ===== BREAKPOINTS SPÉCIAUX ===== */
@media (max-width: 900px) {
  .nvcarre {
      flex: 1 1 45%;
  }
}

@media (max-width: 600px) {
  .carrier {
      flex-direction: column;
      align-items: center;
      height: auto;
  }

  .nvcarre {
      flex: 1 1 90%;
      margin-bottom: 20px;
  }
}

/* ===== DESKTOP (min-width: 1200px) ===== */
@media (min-width: 1200px) {
  .search-section {
      top: 25px;
  }

  .language-btn-mobile {
      display: none !important;
  }

  .menu-btn {
      display: none !important;
  }

  .language-btn {
      display: block !important;
  }

  .header-controls {
      display: none !important;
  }

  .nav-sidebar {
      display: none !important;
  }

  .nav-overlay {
      display: none !important;
  }
}