/* ============================================================
   Near-Job - responsive.css
   Mobile-first. Breakpoints : 380 · 480 · 640 · 768 · 900 · 1024 · 1280
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BASE MOBILE - tous les composants existants (< 640px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Navigation */
  .site-nav { display: none; }
  .burger   { display: flex; }

  /* Auth classique */
  .auth-card     { padding: 1.75rem 1.25rem; }
  .auth-card-wide{ max-width: 100%; }
  .role-selector { grid-template-columns: 1fr; }

  /* Dashboard */
  .dashboard-layout { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; height: auto; border-right: none;
    border-bottom: 1px solid var(--clr-border); padding: 1rem; }
  .dash-nav { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .dash-main { padding: 1rem; }

  /* Vérification */
  .level-cards { grid-template-columns: 1fr; }

  /* Pagination */
  .pagination a, .pagination span { width: 34px; height: 34px; font-size: .8rem; }

  /* Messagerie */
  .conv-list-panel { display: none; }
  .messages-layout { grid-template-columns: 1fr; }

  /* Fiche prestataire */
  .provider-hero { padding: 2rem 0 1.5rem; }
  .provider-body { grid-template-columns: 1fr; }
  .provider-sidebar  { display: none; }
  .mobile-sticky-cta { display: flex; }

  /* Old hero landing */
  .hero { padding: 3rem 0 2.5rem; text-align: center; }
  .hero-trust-tags { justify-content: center; }
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   TABLET 640–767px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 767px) {
  .category-grid   { grid-template-columns: repeat(3, 1fr); }
  .results-grid    { grid-template-columns: repeat(2, 1fr); }
  .home-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   768px+
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .site-nav { display: flex; }
  .burger   { display: none; }
  .category-grid    { grid-template-columns: repeat(3, 1fr); }
  .results-grid     { grid-template-columns: repeat(2, 1fr); }
  .results-layout   { grid-template-columns: 240px 1fr; }
  .dashboard-layout { grid-template-columns: 240px 1fr; }
  .dash-sidebar     { position: sticky; height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .conv-list-panel  { display: flex; }
  .messages-layout  { grid-template-columns: 260px 1fr; }
  .chat-back        { display: none; }
  .form-row         { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════
   900px+
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .category-grid     { grid-template-columns: repeat(5, 1fr); }
  .provider-body     { grid-template-columns: 1fr 300px; }
  .provider-sidebar  { display: block; }
  .mobile-sticky-cta { display: none; }
  .messages-layout   { grid-template-columns: 280px 1fr; }
  .results-layout    { grid-template-columns: 260px 1fr; }
  .filters-toggle-btn{ display: none; }
}

/* ══════════════════════════════════════════════════════════
   1024px+
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .category-grid { grid-template-columns: repeat(5, 1fr); }
  .results-grid  { grid-template-columns: repeat(3, 1fr); }
  .how-steps     { grid-template-columns: repeat(3, 1fr); }
  .level-cards   { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   1440px+
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .category-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE (accueil.php) - MOBILE FIXES
   ══════════════════════════════════════════════════════════ */

/* ── Mobile < 640 ── */
@media (max-width: 639px) {
  /* Hero */
  .home-hero { padding: 3rem 0 2.5rem; min-height: auto; }
  .home-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .home-hero-visual { display: none; }
  .home-hero-title  { font-size: clamp(1.65rem, 7vw, 2.2rem); line-height: 1.15; text-align: center; }
  .home-hero-label  { display: flex; margin-inline: auto; }
  .home-hero-lead   { font-size: .95rem; text-align: center; max-width: 100%; margin-bottom: 1.5rem; }
  .home-hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-bottom: 1.5rem;
  }
  .home-hero-actions .btn { width: 100%; justify-content: center; }
  .home-hero-trust  { justify-content: center; gap: .4rem; }
  .home-hero-trust span { font-size: .72rem; padding: .25rem .6rem; }

  /* Chiffres clés */
  .home-numbers { padding: 1.75rem 0; }
  .home-numbers-grid { flex-wrap: wrap; }
  .home-number-divider { display: none; }
  .home-number-item { min-width: 50%; padding: .85rem .5rem; flex: 0 0 50%; }
  .home-number-value { font-size: 2rem; }

  /* Pour qui */
  .pour-qui-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .pour-qui-card { padding: 1.75rem 1.25rem; }

  /* Mission */
  .mission-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Steps homepage (accueil) */
  .home-steps {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .home-step { max-width: 100%; min-width: unset; width: 100%; }
  .home-step-arrow { display: none; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Final CTA */
  .home-final-cta-grid { grid-template-columns: 1fr; gap: 0; }
  .hfcta-block { padding: 2rem 1.5rem; }
  .hfcta-divider { width: 100%; height: 1px; background: rgba(255,255,255,.15); }

  /* Team section - horizontal → vertical sur mobile */
  .team-card { grid-template-columns: 1fr; }
  .team-card-photo-wrap { aspect-ratio: 4/3; min-height: unset; }
  .team-card-photo { min-height: unset; height: 100%; }
  .team-card-body { padding: 1.5rem; }
  .team-cta { flex-direction: column; align-items: center; }

  /* About page */
  .about-hero { padding: 3rem 0 2.5rem; }
  .about-hero-cta { flex-direction: column; align-items: center; }
  .about-story { grid-template-columns: 1fr; gap: 2rem; }
  .about-story-visual { grid-template-columns: 1fr 1fr; }
  .about-engagement-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .about-stats-strip { grid-template-columns: 1fr 1fr; }
  .about-solution-grid { grid-template-columns: 1fr 1fr; }
  .ap-diff-grid { grid-template-columns: 1fr; }
  .about-mid-cta { padding: 2rem 1.5rem; }
  .about-mid-cta-actions { flex-direction: column; align-items: center; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .contact-hero { padding: 3rem 0 2.5rem; }
}

/* ── Mobile 380–639 ── */
@media (max-width: 479px) {
  .home-hero-trust { display: none; }
  .home-number-item { min-width: 50%; }
}

/* ── Tablet 640–899 ── */
@media (min-width: 640px) and (max-width: 899px) {
  /* Team - photo plus étroite sur tablette */
  .team-card { grid-template-columns: 220px 1fr; }

  .home-hero { padding: 4rem 0 3rem; min-height: auto; }
  .home-hero-inner { grid-template-columns: 1fr; }
  .home-hero-visual { display: none; }
  .home-hero-title  { font-size: clamp(1.8rem, 4vw, 2.5rem); text-align: center; }
  .home-hero-label  { margin-inline: auto; }
  .home-hero-lead   { text-align: center; margin-inline: auto; }
  .home-hero-actions{ justify-content: center; }
  .home-hero-trust  { justify-content: center; }

  .mission-grid   { grid-template-columns: 1fr; gap: 2.5rem; }
  .pour-qui-grid  { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .home-steps { flex-wrap: wrap; justify-content: center; }
  .home-step  { max-width: 280px; }
  .home-step-arrow { display: none; }
}

/* ══════════════════════════════════════════════════════════
   /TROUVER (home.php) - MOBILE FIXES
   ══════════════════════════════════════════════════════════ */

/* ── Mobile < 640 ── */
@media (max-width: 639px) {
  /* SF Hero */
  .sf-hero { padding: 3rem 0 2.5rem; }
  .sf-hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.15; }
  .sf-hero-sub   { font-size: .9rem; margin-bottom: 1.75rem; }
  .sf-hero-label { font-size: .72rem; }

  /* Barre de recherche - stack vertical */
  .sf-search-wrap { padding: 0; }
  .sf-search-form {
    flex-direction: column;
    height: auto;
    border-radius: var(--radius-lg);
    padding: .5rem;
    gap: .4rem;
    background: #fff;
  }
  .sf-search-field {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 60px;
    border-right: none;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    background: #f8fafc;
    padding: .6rem 1rem .6rem 3rem;
  }
  .sf-search-field input { font-size: .9rem; }
  .sf-search-divider { display: none; }
  .sf-search-btn {
    width: 100%;
    height: 54px;
    border-radius: var(--radius-md);
    justify-content: center;
    font-size: .95rem;
  }

  /* Recherches populaires */
  .sf-popular { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .sf-popular-label { font-size: .75rem; }
  .sf-popular-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .25rem;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sf-popular-chips::-webkit-scrollbar { display: none; }
  .sf-chip { white-space: nowrap; flex-shrink: 0; }

  /* Raccourcis intention */
  .sf-intents { padding: 1.25rem 0; }
  .sf-intents-grid { grid-template-columns: 1fr; gap: .65rem; }
  .sf-intent-card { padding: .9rem 1rem; }
  .sf-intent-body strong { font-size: .85rem; }
  .sf-intent-body span   { font-size: .72rem; }

  /* Catégories domaines */
  .sf-domain-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .sf-domain-card { padding: .9rem .6rem; }
  .sf-domain-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .sf-domain-name { font-size: .78rem; }

  /* Steps /trouver */
  .sf-steps {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  .sf-step { max-width: 100%; min-width: unset; width: 100%; }
  .sf-step-connector { display: none; }

  /* Stats section (réutilisée) */
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile 480–639 ── */
@media (min-width: 480px) and (max-width: 639px) {
  .sf-intents-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
}

/* ── Tablet 640–899 ── */
@media (min-width: 640px) and (max-width: 899px) {
  .sf-hero { padding: 4rem 0 3rem; }
  .sf-hero-title { font-size: clamp(1.8rem, 4vw, 2.5rem); }

  .sf-search-form { height: 72px; }
  .sf-search-btn  { height: 72px; padding: 0 1.5rem; }
  .sf-search-field { padding: 0 1rem 0 3rem; }
  .sf-field-label  { font-size: .65rem; }

  .sf-intents-grid  { grid-template-columns: repeat(2, 1fr); }
  .sf-domain-grid   { grid-template-columns: repeat(3, 1fr); }

  .sf-steps { flex-wrap: wrap; justify-content: center; }
  .sf-step  { max-width: 260px; }
  .sf-step-connector { display: none; }
}

/* ══════════════════════════════════════════════════════════
   RÉSULTATS DE RECHERCHE - MOBILE FIXES
   ══════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .rs-search-bar { top: 56px; }
  .rs-search-form { height: 40px; border-radius: var(--radius-md); }
  .rs-field { padding: 0 .6rem; gap: .35rem; }
  .rs-field i { font-size: .85rem; }
  .rs-field input { font-size: .82rem; }
  .rs-search-btn { width: 40px; height: 40px; }

  .rs-header { flex-direction: column; gap: .5rem; padding-top: 1rem; }
  .rs-header-title h1 { font-size: 1.1rem; }
  .rs-sort-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .15rem;
    gap: .25rem;
  }
  .rs-sort-tabs::-webkit-scrollbar { display: none; }
  .rs-sort-tab { font-size: .75rem; padding: .35rem .7rem; white-space: nowrap; flex-shrink: 0; }

  .results-grid { grid-template-columns: 1fr; }
  .results-layout { grid-template-columns: 1fr; }

  .rs-pagination { gap: .75rem; }
  .rs-page-btn { padding: .5rem .9rem; font-size: .8rem; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .rs-sort-tabs { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   AUTH PAGES - MOBILE
   ── La page entière prend le gradient + le logo en watermark
   ── Le formulaire est une carte blanche flottante au centre
   ══════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  /* Page : gradient + logo watermark sur TOUT le fond mobile */
  .auth-split-page {
    grid-template-columns: 1fr;
    min-height: calc(100vh - var(--header-h));
    background: linear-gradient(160deg, #0B3F9E 0%, #1565C0 45%, #2E7D32 80%, #43A047 100%);
    position: relative;
    overflow: hidden;
  }
  .auth-split-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/nearjob-logo.png');
    background-repeat: no-repeat;
    background-position: center 38%;
    background-size: 320px auto;
    opacity: .08;
    pointer-events: none;
    z-index: 0;
    filter: brightness(0) invert(1);
  }
  .auth-split-page::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(67,160,71,.22) 0%, transparent 70%);
    bottom: -180px;
    right: -150px;
    pointer-events: none;
    z-index: 0;
  }

  /* Cacher le panneau gauche desktop */
  .auth-split-left { display: none !important; }

  /* Panneau droit transparent - bg page passe au travers */
  .auth-split-right {
    background: transparent !important;
    padding: 0 !important;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
  }

  /* Header mobile branded - VISIBLE seulement sur mobile */
  .auth-mobile-header {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 1.75rem;
    background: transparent;
    text-align: center;
  }
  .auth-mobile-logo {
    width: 110px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: .95;
    margin-bottom: .9rem;
    transition: opacity .2s, transform .2s;
  }
  .auth-mobile-logo:active { transform: scale(.95); }
  .auth-mobile-tagline {
    font-size: .85rem;
    color: rgba(255,255,255,.85) !important;
    text-align: center;
    max-width: 320px;
    line-height: 1.5;
    margin: 0 0 .85rem;
  }
  .auth-mobile-trust {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .auth-mobile-trust span {
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.95) !important;
    font-size: .68rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.2);
  }

  /* Carte formulaire blanche flottante sur le gradient */
  .auth-split-form-wrap {
    background: #fff;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18);
    padding: 2rem 1.25rem 2.5rem !important;
    margin: 0;
    max-width: 100% !important;
    flex: 1;
    width: 100%;
  }

  /* Formulaire mobile - champs */
  .form-row { grid-template-columns: 1fr; }
  .role-selector { grid-template-columns: 1fr; gap: .5rem; }
}

/* ── Auth tablette (640–899) ── */
@media (min-width: 640px) and (max-width: 899px) {
  .auth-split-page::before { background-size: 380px auto; }
  .auth-mobile-header { padding: 2.5rem 2rem 2rem; }
  .auth-mobile-logo   { width: 130px; }
  .auth-split-form-wrap {
    max-width: 520px !important;
    margin: 0 auto !important;
    border-radius: var(--radius-xl) !important;
    margin-top: 1rem !important;
    padding: 2.25rem 2rem !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.18) !important;
  }
}

/* ── Auth desktop 900px+ : masquer le header mobile ── */
@media (min-width: 900px) {
  .auth-mobile-header { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   HEADER LOGO - taille responsive
   ══════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .logo-img { height: 30px; }
}
@media (min-width: 640px) {
  .logo-img { height: 36px; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER - mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .footer-bottom { font-size: .75rem; }
  /* Liens mentions légales / confidentialité sur la même ligne, au-dessus du copyright */
  .footer-bottom-links { display: flex !important; flex-direction: row; justify-content: center; }
  .footer-bottom-sep { display: inline; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 2rem; }
}

/* ══════════════════════════════════════════════════════════
   ONBOARDING MODAL - mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .ob-modal { padding: 1.75rem 1.25rem; }
  .ob-title { font-size: 1.1rem; }
  .ob-choices { gap: .5rem; }
  .ob-choice { padding: .85rem .9rem; }
  .ob-quick-picks { gap: .35rem; }
  .ob-pick { font-size: .75rem; padding: .3rem .7rem; }
}

/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
  .site-header, .site-footer, .mobile-sticky-cta,
  .hero-cta, .chat-input-area, .filters-sidebar,
  .auth-mobile-header, .ob-overlay { display: none; }
  body { background: #fff; color: #000; }
}