/* ==========================================================================
   mobile.css — Couche Responsive Smartphone CODALYX
   ==========================================================================
   Ce fichier ne contient QUE des media queries pour smartphones (≤480px).
   Il est chargé APRÈS style.css et auth.css et ne modifie aucun style
   existant pour desktop/tablette.
   ========================================================================== */

@media (max-width: 480px) {

  /* ════════════════════════════════════════════════════════════════════════
     1. HEADER & NAVIGATION
     ════════════════════════════════════════════════════════════════════════ */

  header {
    padding: 0 12px;
    height: 56px;
    gap: 8px;
  }

  .logo-img {
    height: 48px;
  }

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

  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  /* User menu dropdown — pleine largeur mobile */
  #userDropdown {
    right: -12px !important;
    min-width: 200px !important;
    left: auto !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     2. MENU HAMBURGER (CSS-only, injecté via le header existant)
     ════════════════════════════════════════════════════════════════════════ */

  /* On affiche les nav-links comme un menu déroulant vertical
     quand l'utilisateur clique sur "À propos" etc. dans le footer
     Les liens sont déjà accessibles via les modales */

  /* ════════════════════════════════════════════════════════════════════════
     3. SEARCH CONTAINER & FILTRES
     ════════════════════════════════════════════════════════════════════════ */

  .search-container {
    padding: 10px 0;
    gap: 10px;
  }

  .indicator-zone {
    padding: 4px 12px;
    border-width: 3px;
  }

  .indicator-zone::after {
    width: 16px;
    height: 16px;
    font-size: 8px;
    top: -6px;
    right: -6px;
  }

  .indicator-text {
    font-size: 0.8rem;
  }

  .search-tools-zone {
    padding: 0 10px;
    gap: 10px;
  }

  .filter-config-row {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .filters-wrapper {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
  }

  .select-wrapper {
    width: 100%;
    min-width: 0;
  }

  .filter-select {
    width: 100%;
    min-width: 0;
    font-size: 0.82rem;
    height: 38px;
    padding: 6px 36px 6px 36px;
  }

  .search-wrapper {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .input-container {
    border-radius: 20px;
    min-height: 70px;
    padding: 2px 0;
  }

  .input-row {
    padding: 4px 12px 6px 16px;
    gap: 10px;
  }

  .search-input {
    font-size: 0.9rem;
    height: 32px;
  }

  .indicators-row {
    padding: 6px 8px 0 8px;
    gap: 4px;
  }

  .mode-indicator {
    font-size: 0.6rem;
    padding: 3px 6px;
    border-radius: 6px;
  }

  .indicator-group-sep {
    height: 12px;
    margin: 0 4px;
  }

  /* Boutons sous la barre de recherche */
  .toggles-wrapper {
    justify-content: center;
    width: 100%;
  }

  .view-toggle-btn,
  .color-toggle-btn,
  .define-zone-btn,
  .reset-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  /* IZP Nav */
  .izp-nav-container {
    gap: 10px;
  }

  .izp-nav-btn {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     4. SCROLLABLE CONTENT & MAIN CONTAINER
     ════════════════════════════════════════════════════════════════════════ */

  .scrollable-content {
    height: calc(100vh - 56px - 44px);
  }

  .main-container {
    padding: 0 10px 60px 10px;
    max-width: 100%;
  }

  /* ════════════════════════════════════════════════════════════════════════
     5. WELCOME TEXT (Page d'accueil)
     ════════════════════════════════════════════════════════════════════════ */

  .welcome-text {
    padding: 12px;
    margin: 10px auto;
  }

  .welcome-title-premium {
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
  }

  .welcome-intro-premium {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .welcome-sources-premium {
    font-size: 0.82rem;
  }

  .welcome-update-premium {
    font-size: 0.82rem;
    padding: 4px 12px;
  }

  .welcome-text h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }

  .welcome-text p {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     6. RESULTS GRID (Vue Grille)
     ════════════════════════════════════════════════════════════════════════ */

  .results-grid:not(:has(.results-list)) {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .result-card {
    padding: 16px;
    border-radius: 12px;
    min-height: 90px;
  }

  .card-header {
    margin-bottom: 8px;
  }

  .city-name {
    font-size: 1.05rem;
  }

  .postal-badge {
    font-size: 0.8rem;
    padding: 3px 10px;
    min-width: 50px;
  }

  .badge-stack {
    width: 72px;
    min-width: 72px;
    height: 32px;
  }

  .badge-layer {
    height: 24px;
  }

  .badge-stack .notification-badge {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    top: -8px;
    right: -8px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     7. RESULTS LIST (Vue Liste / Tableau)
     ════════════════════════════════════════════════════════════════════════ */

  .results-list {
    border-radius: 12px;
    clip-path: inset(0 round 12px);
  }

  .results-list th,
  .results-list td {
    padding: 10px 10px;
    font-size: 0.78rem;
  }

  .results-list thead th {
    padding: 12px 10px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }

  /* Masquer colonnes 3, 4, 5 sur mobile */
  .results-list th:nth-child(3),
  .results-list td:nth-child(3),
  .results-list th:nth-child(4),
  .results-list td:nth-child(4),
  .results-list th:nth-child(5),
  .results-list td:nth-child(5) {
    display: none;
  }

  .results-list .list-city-name {
    font-size: 0.9rem;
    max-width: 160px;
  }

  .results-list .list-postal-code {
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     8. SINGLE RESULT & DETAIL CARD (Fiche XL)
     ════════════════════════════════════════════════════════════════════════ */

  .results-grid.single-result {
    min-height: auto;
    padding: 0 8px 20px 8px;
  }

  .single-card-wrapper {
    width: 100%;
    padding: 0 4px;
  }

  .result-card--xl {
    padding: 20px 16px;
    border-radius: 16px;
    border-width: 3px;
  }

  .city-name--xl {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    margin-bottom: 8px;
  }

  .postal-badge--giant {
    min-width: 90px;
    font-size: 1.2rem;
    padding: 8px 16px;
  }

  .postal-badge--xl {
    font-size: 0.95rem;
    padding: 6px 14px;
    min-width: 70px;
  }

  /* Ruban tricolore réduit */
  .sewn-ribbon {
    width: 24px;
    height: 36px;
    right: 20px;
  }

  /* Grille de détails en une colonne */
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }

  /* Zones de détail en colonne */
  .detail-zones-container {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 16px;
    overflow-x: visible;
  }

  .detail-zone {
    padding: 16px;
    border-radius: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .detail-zone--postal {
    min-width: 0;
    flex: 1 1 auto;
  }

  .detail-zone-title {
    font-size: 0.9rem;
    gap: 8px;
    margin-bottom: 8px;
  }

  .zone-icon {
    font-size: 1rem;
  }

  .detail-label {
    font-size: 0.7rem;
  }

  .detail-value {
    font-size: 0.95rem;
  }

  .detail-value--small {
    font-size: 0.85rem;
  }

  .detail-item--highlight {
    margin-top: 12px;
    padding-top: 16px;
  }

  .postal-badges-grid {
    gap: 6px;
  }

  .back-btn {
    font-size: 0.9rem;
    padding: 8px 0;
    margin-bottom: 12px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     9. MODALES
     ════════════════════════════════════════════════════════════════════════ */

  .modal-content {
    width: 96% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin: 8px !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-content--help {
    padding: 24px 16px !important;
    max-width: 100% !important;
  }

  .modal-content--about {
    max-height: 88vh;
    padding: 24px 16px !important;
  }

  .modal-content--detail {
    padding: 20px 16px !important;
  }

  .modal-content--info {
    padding: 28px 16px !important;
  }

  .modal-content--confirm {
    padding: 28px 16px !important;
  }

  .modal-content--offline {
    max-width: 100% !important;
  }

  .close-modal {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    right: 12px;
    top: 12px;
  }

  .modal-header {
    margin-bottom: 16px;
  }

  .modal-header h3 {
    font-size: 1.3rem;
  }

  .modal-subtitle {
    font-size: 0.85rem;
  }

  .modal-body {
    margin-bottom: 16px;
  }

  .modal-footer {
    padding: 12px 8px;
    gap: 10px;
  }

  .close-btn-footer {
    padding: 8px 24px;
    font-size: 0.85rem;
  }

  /* Help Grid — une colonne */
  .help-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .help-item {
    padding: 12px;
  }

  .item-header {
    gap: 8px;
  }

  .mode-code {
    font-size: 0.85rem;
    min-width: 36px;
  }

  .mode-name {
    font-size: 0.82rem;
  }

  .item-description {
    font-size: 0.8rem;
  }

  /* Search modes list — une colonne */
  .search-modes-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .search-mode-item {
    padding: 10px;
  }

  /* Info feature list — une colonne */
  .info-feature-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Nuance Box */
  .nuance-box {
    padding: 14px;
    margin-top: 14px;
    border-radius: 12px;
  }

  .nuance-title {
    font-size: 0.9rem;
  }

  .nuance-content {
    font-size: 0.82rem;
  }

  /* Section titles in modals */
  .section-title {
    font-size: 0.95rem;
    gap: 8px;
  }

  .section-intro {
    font-size: 0.82rem;
  }

  /* Region grid inside IZR detail */
  .region-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
    padding: 8px;
  }

  /* Indicator detail modal */
  .indicator-badge {
    font-size: 2rem;
  }

  #detailIndicatorTitle {
    font-size: 1.15rem;
  }

  .detail-section h4 {
    font-size: 0.88rem;
  }

  .detail-section p {
    font-size: 0.82rem;
  }

  .example-list {
    padding: 10px;
    gap: 6px;
  }

  .example-item {
    font-size: 0.78rem;
    gap: 8px;
  }

  /* History modal */
  .history-table-header {
    grid-template-columns: 1fr 70px 50px;
    gap: 8px;
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  .history-item {
    grid-template-columns: 1fr 70px 50px;
    gap: 8px;
    padding: 10px;
  }

  .history-city-name {
    font-size: 0.85rem;
  }

  .history-city-code,
  .history-city-details {
    font-size: 0.75rem;
    padding: 2px 6px;
  }

  .history-city-time {
    font-size: 0.75rem;
  }

  .history-list {
    max-height: 300px;
    padding: 10px;
    gap: 6px;
  }

  .history-meta {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .history-meta-item {
    font-size: 0.8rem;
  }

  /* Modal logo */
  .modal-logo {
    height: 70px;
    margin-bottom: 12px;
  }

  .modal-title {
    font-size: 1.2rem;
  }

  .modal-version {
    font-size: 0.78rem;
    margin-bottom: 16px;
  }

  .about-description {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  /* Info card inside modals */
  .info-card {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .info-section {
    margin-bottom: 30px;
  }

  /* Offline modal */
  .offline-img {
    width: 70px;
  }

  .offline-message {
    font-size: 0.95rem;
  }

  /* Confirm modal */
  .confirm-icon {
    font-size: 2.5rem;
  }

  #confirmTitle {
    font-size: 1.2rem;
  }

  #confirmMessage {
    font-size: 0.92rem;
  }

  .btn-secondary,
  .btn-danger {
    padding: 10px 20px;
    font-size: 0.88rem;
  }

  /* ════════════════════════════════════════════════════════════════════════
     10. FOOTER
     ════════════════════════════════════════════════════════════════════════ */

  footer {
    height: auto;
    min-height: 44px;
    padding: 6px 10px;
    white-space: normal;
  }

  .footer-content {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    padding: 0 4px;
  }

  .footer-separator {
    display: none;
  }

  /* Masquer les éléments secondaires sur mobile */
  .footer-left {
    display: none !important;
  }

  .footer-right {
    display: none !important;
  }

  .footer-clock {
    display: none !important;
  }

  .footer-center {
    font-size: 0.75rem;
    text-align: center;
  }

  .footer-search-count {
    font-size: 0.75rem;
  }

  /* Date picker repositionné */
  .datepicker-popup {
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 260px;
  }

  .datepicker-popup.show {
    transform: translateX(-50%) translateY(0);
  }

  /* ════════════════════════════════════════════════════════════════════════
     11. BACK-TO-TOP BUTTON
     ════════════════════════════════════════════════════════════════════════ */

  .back-to-top {
    width: 40px !important;
    height: 40px !important;
    bottom: 60px !important;
    right: 14px !important;
  }

  .back-to-top-svg {
    width: 22px;
    height: 22px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     12. MAP MODE (Carte Leaflet)
     ════════════════════════════════════════════════════════════════════════ */

  .commune-map-header {
    padding: 10px 14px;
  }

  .commune-map-title {
    font-size: 0.88rem;
  }

  .commune-map-close {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  /* ════════════════════════════════════════════════════════════════════════
     13. NO RESULTS
     ════════════════════════════════════════════════════════════════════════ */

  .no-results {
    padding: 20px 10px;
    min-height: 250px;
  }

  .no-results-title {
    font-size: 1.2rem;
  }

  .no-results-subtitle {
    font-size: 0.88rem;
  }

  .no-results-tips {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .no-results-tip-message {
    font-size: 0.85rem;
  }

  .no-results-hints {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .hint-title {
    font-size: 0.88rem;
  }

  .hints-list li {
    font-size: 0.82rem;
    padding-left: 20px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     14. INFO PAGES PREMIUM
     ════════════════════════════════════════════════════════════════════════ */

  .info-page-container {
    padding: 0 12px;
    margin: 20px auto;
  }

  .info-card {
    padding: 24px 16px;
  }

  .info-header-premium {
    padding: 16px 10px;
    margin-bottom: 24px;
  }

  .info-title-premium {
    font-size: 1.6rem;
  }

  .info-intro-premium {
    font-size: 0.92rem;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .feature-card {
    padding: 20px;
  }

  .feature-card h3 {
    font-size: 1.05rem;
  }

  .feature-card p,
  .feature-card li {
    font-size: 0.88rem;
  }

  /* TOC */
  .toc-container {
    padding: 16px;
  }

  .toc-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .toc-item a {
    padding: 10px 12px;
    font-size: 0.88rem;
  }

  /* Spotlight */
  .spotlight-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .spotlight-item {
    padding: 14px;
  }

  .spotlight-header h3 {
    font-size: 1.1rem;
  }

  .spotlight-description {
    font-size: 0.92rem;
  }

  /* Pro tips */
  .pro-tips-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pro-tip-premium {
    padding: 14px 16px;
    gap: 10px;
  }

  .special-feature-box {
    padding: 20px;
  }

  .premium-back-btn {
    font-size: 0.88rem;
    padding: 8px 14px;
  }

  .example-box-premium {
    padding: 12px;
  }

  .example-line {
    font-size: 0.82rem;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }

  /* Duo grid override */
  .duo-grid {
    grid-template-columns: 1fr !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     15. SPLASH SCREEN & AUTH GUARD
     ════════════════════════════════════════════════════════════════════════ */

  .splash-logo {
    height: 80px;
  }

  .splash-content {
    gap: 20px;
  }

  .splash-loader-container {
    width: 90px;
    height: 90px;
  }

  .splash-text {
    font-size: 0.92rem;
  }

  /* ════════════════════════════════════════════════════════════════════════
     16. AUTH PAGES (login, signup, reset-password, update-password)
     ════════════════════════════════════════════════════════════════════════ */

  .auth-body {
    padding: 24px 12px !important;
  }

  .auth-wrapper {
    max-width: 100%;
    gap: 16px;
  }

  /* Split layout — single column on mobile */
  .auth-wrapper--split {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

  .auth-logo-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 24px 0 12px 0 !important;
    border-radius: 12px 12px 0 0 !important;
    border-right: 1px solid var(--glass-border) !important;
    border-bottom: none !important;
  }

  .auth-logo-wrap .auth-logo {
    height: 44px !important;
  }

  .auth-showcase {
    grid-column: 1 !important;
    grid-row: 2 !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--glass-border) !important;
    border-bottom: none !important;
    padding: 24px 16px !important;
    gap: 14px !important;
  }

  .auth-showcase::after {
    top: auto !important;
    bottom: 0 !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    height: 1px !important;
  }

  .auth-form-column {
    grid-column: 1 !important;
    grid-row: 3 !important;
    border-radius: 0 0 12px 12px !important;
    border-left: 1px solid var(--glass-border) !important;
    border-top: none !important;
    padding: 24px 16px !important;
  }

  .auth-form-column .auth-card {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .showcase-headline {
    font-size: 1.2rem !important;
  }

  .showcase-description {
    font-size: 0.82rem !important;
  }

  .showcase-stats {
    gap: 6px !important;
  }

  .stat-badge {
    padding: 8px 10px !important;
    min-width: 0 !important;
    flex: 1 1 calc(50% - 3px) !important;
    gap: 8px !important;
  }

  .stat-icon {
    font-size: 1.2rem !important;
  }

  .stat-number {
    font-size: 0.9rem !important;
  }

  .stat-label {
    font-size: 0.68rem !important;
  }

  .showcase-section-title {
    font-size: 0.88rem !important;
  }

  .feature-list li {
    font-size: 0.8rem !important;
    gap: 6px !important;
  }

  .account-perks li {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
  }

  .showcase-trust {
    gap: 6px 12px !important;
    padding: 10px 12px !important;
  }

  .trust-item {
    font-size: 0.7rem !important;
  }

  .showcase-creator {
    padding: 12px 14px !important;
  }

  .creator-quote {
    font-size: 0.78rem !important;
  }

  .auth-card {
    padding: 24px 16px;
    border-radius: 12px;
    gap: 18px;
  }

  .auth-title {
    font-size: 1.3rem;
  }

  .auth-subtitle {
    font-size: 0.82rem;
  }

  .auth-pitch {
    padding: 12px;
    gap: 8px;
  }

  .pitch-title {
    font-size: 0.82rem;
  }

  .pitch-desc {
    font-size: 0.8rem;
  }

  .pitch-cta {
    font-size: 0.8rem;
    padding: 6px 8px;
  }

  .auth-label {
    font-size: 0.75rem;
  }

  .auth-input {
    height: 44px;
    font-size: 0.9rem;
    padding: 0 40px 0 38px;
  }

  .auth-btn {
    height: 46px;
    font-size: 0.9rem;
  }

  .auth-divider {
    font-size: 0.75rem;
  }

  .auth-footer {
    font-size: 0.72rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 4px;
  }

  .auth-theme-toggle {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }

  /* Password strength */
  .pwd-strength-label {
    font-size: 0.7rem;
  }

  /* ════════════════════════════════════════════════════════════════════════
     17. CUSTOM TOOLTIPS
     ════════════════════════════════════════════════════════════════════════ */

  .custom-tooltip {
    font-size: 9px;
    padding: 8px 12px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     18. KBD STYLING
     ════════════════════════════════════════════════════════════════════════ */

  kbd {
    font-size: 0.78em;
    padding: 1px 5px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     19. LOADING SPINNER
     ════════════════════════════════════════════════════════════════════════ */

  .loading {
    padding: 24px;
    font-size: 0.9rem;
  }

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

  /* ════════════════════════════════════════════════════════════════════════
     20. MADE WITH LOVE WATERMARK
     ════════════════════════════════════════════════════════════════════════ */

  .made-with-love {
    font-size: 0.6rem;
    bottom: 10px;
    right: 12px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     21. SCROLLBAR — thinner on mobile
     ════════════════════════════════════════════════════════════════════════ */

  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

}