.delete-btn {
    color: var(--bs-danger);
}


/* Styling Utilities for Photos */
.group:hover .group-hover-opacity-100 { opacity: 1 !important; }
.hover-scale:hover { transform: scale(1.02); }
.btn-icon { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; }

/* Placeholder Hover Effect */
.hover-bg-light:hover { background-color: rgba(248, 249, 250, 0.8) !important; border-color: var(--bs-primary) !important; }

/* Fix Bootstrap modal behind backdrop when inside overflow-hidden + AOS */
#matching {
    overflow: visible !important;
}

#matching .modal {
    position: fixed !important;   /* forces it out of the card flow */
    z-index: 1060 !important;
}

/* Custom CSS to handle the Checked state visual overrides without writing new JS */
/* When the checkbox is checked, style the label immediately following it */
.btn-check:checked + .btn {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

/* Ensure the icon inside turns white when checked */
.btn-check:checked + .btn i:not(.fa-question-circle) {
    color: white !important;
    opacity: 1 !important;
}

/* Handle the Tooltip icon color when checked */
.btn-check:checked + .btn .fa-question-circle {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* Scope styling to this page/wrapper to avoid global pollution */
.address-step-wrapper .mapboxgl-ctrl-geocoder {
    width: 100%;
    max-width: 100%;
    box-shadow: none; /* Remove default mapbox shadow */
    background-color: #f9fbfd; /* LandKit bg-light */
    border: 1px solid transparent;
    border-radius: 0.5rem; /* Bootstrap rounded-3 */
    font-family: inherit;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    transition: all 0.2s ease-in-out;
}

/* Focus state to match Bootstrap */
.address-step-wrapper .mapboxgl-ctrl-geocoder:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(51, 94, 234, 0.25); /* LandKit primary focus */
    border-color: #335eea;
}

.address-step-wrapper .mapboxgl-ctrl-geocoder--input {
    padding: 1rem 1rem 1rem 2.5rem; /* Space for icon */
    height: auto;
    font-size: 1.0625rem; /* LandKit form-control-lg */
    color: #161c2d;
}

.address-step-wrapper .mapboxgl-ctrl-geocoder--icon {
    top: 50%;
    transform: translateY(-50%);
}

/* Hide the ugly standard loading/close icons if you want to use FontAwesome via JS,
   otherwise keep them but position them better */
.address-step-wrapper .mapboxgl-ctrl-geocoder--icon-search {
    left: 15px;
    fill: #95aac9; /* Text-muted color */
}


/* =========================================
   CALENDAR COMPONENT STYLES
   ========================================= */

/* Month Container */
.month {
    /* Optional: if you want individual cards for months inside the main wrapper */
    /* background: #fff; */
    /* box-shadow: 0 .5rem 1.5rem rgba(22, 28, 45, 0.05); */
}

/* Day Headers (Lu, Ma, Me...) */
.day-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #95aac9;
    padding-bottom: 0.5rem;
    letter-spacing: 1px;
}

/* Day Cells */
.day {
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.85rem;
    position: relative;
    transition: all 0.2s ease-in-out;
    border-radius: 0; /* default square for ranges */
    margin-bottom: 2px; /* Space between rows */
}

/* Hover Effect for selectable days */
.day:not(.past):not(.highlighted):hover {
    background-color: #f1f4f8; /* Light gray hover */
    border-radius: 50%; /* Circle effect on hover */
    color: var(--bs-primary);
    font-weight: bold;
}

/* Past Dates */
.day.past {
    cursor: not-allowed;
    color: #d2ddec;
}

/* Currently Selecting (Visual feedback before saving) */
.day.selected {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
}

/* =========================================
   SAVED RANGES STYLES
   ========================================= */

/* Base style for any highlighted day (Saved) */
.day.highlighted {
    color: white !important; /* Ensure text is readable on colored bg */
    opacity: 1 !important;
    position: relative;
}

/* Range Start: Round left corners */
.day.range-start {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

/* Range End: Round right corners */
.day.range-end {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

/* Single Day Range: Circle */
.day.range-start.range-end {
    border-radius: 50%;
}

/* =========================================
   MODAL TYPE BUTTONS
   ========================================= */

/* Flexible (Blue) */
.btn-custom-flexible {
    color: #0478b3;
    border: 1px solid #0478b3;
    background-color: rgba(4, 120, 179, 0.05);
    transition: all 0.2s;
}
.btn-custom-flexible:hover {
    background-color: #0478b3;
    color: white;
}

/* Fixed (Green) */
.btn-custom-fixed {
    color: #49a75c;
    border: 1px solid #49a75c;
    background-color: rgba(73, 167, 92, 0.05);
    transition: all 0.2s;
}
.btn-custom-fixed:hover {
    background-color: #49a75c;
    color: white;
}

/* Unsure (Purple) */
.btn-custom-unsure {
    color: #ab61e7;
    border: 1px solid #ab61e7;
    background-color: rgba(171, 97, 231, 0.05);
    transition: all 0.2s;
}
.btn-custom-unsure:hover {
    background-color: #ab61e7;
    color: white;
}

/* -------------------------------------------------------------------------
       FIX: Handling the Form Theme Wrapper (<div><input></div>)
       ------------------------------------------------------------------------- */

/* 1. HIDE the native input explicitly */
/* Logic: Find a div that is immediately followed by our .selectable-card,
   then find the input inside it and hide it. */
div:has(+ .selectable-card) > input,
.btn-check {
    display: none !important;
}

/* 2. STYLE THE CARD when the input is CHECKED */
/* Logic: "If the div before me has a checked input, style me." */
div:has(> input:checked) + .selectable-card,
.btn-check:checked + .selectable-card {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important; /* Soft Primary Tint */
    box-shadow: 0 .5rem 1.5rem rgba(22, 28, 45, 0.1) !important; /* Lift Effect */
}

/* 3. UPDATE CHILDREN (Checkmark & Icon) when Checked */
div:has(> input:checked) + .selectable-card .check-indicator,
.btn-check:checked + .selectable-card .check-indicator {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary) !important;
    color: white !important;
}

div:has(> input:checked) + .selectable-card .icon-state,
.btn-check:checked + .selectable-card .icon-state {
    color: var(--bs-primary) !important;
}

/* 4. DEFAULT CARD STYLE (Unchecked) */
.selectable-card {
    border: 2px solid #e3ebf6 !important; /* LandKit Gray-300 */
    transition: all 0.2s ease-in-out;
}


.icon-circle {
    /* Ensure these properties are applied */
    width: 40px;
    height: 40px;
    border-radius: 50%;

    /* Ensure centering */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fix for Mapbox Geocoder & Filter Bar GUI */

/* 1. Ensure the dropdowns sit on top of everything (Leaflet/Mapbox maps usually have z-indexes around 400-1000) */
.mapboxgl-ctrl-geocoder,
.choices__list.is-active {
    z-index: 1055 !important; /* Bootstrap Dropdown is 1000, Modal 1050 */
}

/* 2. Style the Container to look like a unified input group */
.group-focus-ring {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;

    /* When any input inside is focused, simulate focus on the wrapper */
    &:focus-within {
        border-color: #86b7fe !important; /* Bootstrap primary-subtle or variable */
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
    }
}

/* 3. MAPBOX SPECIFIC OVERRIDES */
/* Use this class on the parent div containing the mapbox input */
.geocoder-wrapper {
    position: relative;

    /* Mapbox inserts a complex div structure. We need to reset it to fit our Bootstrap styling */
    .mapboxgl-ctrl-geocoder {
        width: 100%;
        max-width: none;
        box-shadow: none;
        background-color: transparent;

        /* The input inside mapbox */
        .mapboxgl-ctrl-geocoder--input {
            height: auto;
            padding: 0.5rem 0.75rem 0.5rem 0; /* Align with Bootstrap sizing */
            border: none;
            background-color: transparent;
            outline: none;
            color: var(--bs-body-color);
            font-weight: 500;

            &:focus {
                outline: none;
                box-shadow: none;
            }
        }

        /* Hide the default search icon from Mapbox (we used our own FontAwesome one) */
        .mapboxgl-ctrl-geocoder--icon {
            display: none;
        }

        /* Result list styling */
        .suggestions-wrapper {
            /* Position the results dropdown correctly relative to our rounded container */
            .suggestions {
                background-color: #fff;
                border: 1px solid rgba(0,0,0,0.1);
                border-radius: 12px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                margin-top: 8px;
                overflow: hidden;

                li {
                    padding: 10px 15px;
                    &:hover, &.active {
                        background-color: #f8f9fa; /* Bootstrap gray-100 */
                        color: var(--bs-primary);
                    }
                }
            }
        }

        /* Clear button positioning */
        .mapboxgl-ctrl-geocoder--button {
            background: transparent;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}


/* --- 1. INTERACTION & DEPTH (The "Lift") --- */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    will-change: transform, box-shadow;
}

.hover-lift:hover {
    /* Moves the card up slightly */
    transform: translateY(-5px);
    /* Adds a deep, soft shadow for 3D effect */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important;
}

/* --- 2. IMAGE ZOOM EFFECT --- */
/* Applied to the <img> tag. Triggers when the parent Card is hovered. */
.hover-lift:hover .hover-scale {
    transform: scale(1.05);
}

.hover-scale {
    /* Smooth, slow zoom */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Set origin to center so it zooms evenly */
    transform-origin: center center;
}

/* --- 3. GLASSMORPHISM (The "Blur") --- */
.backdrop-blur {
    /* Safari support */
    -webkit-backdrop-filter: blur(8px);
    /* Standard */
    backdrop-filter: blur(8px);
    /* Fallback logic is handled by bg-opacity classes in HTML */
}

/* --- 4. TEXT GRADIENTS (Perfect Match Badge) --- */
.bg-gradient-warning {
    /* A rich gold-to-orange gradient */
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}

.bg-clip-text {
    /* Clips the background to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    /* Makes text transparent so background shows through */
    color: transparent;
}

/* --- 5. UTILITIES --- */
.icon-square {
    /* Enforces a perfect square for icons/numbers with centering */
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.grayscale {
    /* For Offline/Archived states */
    filter: grayscale(100%);
}

/* Optional: Scrollbar for horizontal chips if they overflow */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- PAGINATION MODERN REFRESH --- */

/* 1. Conteneur global: Supprime les bordures et ajoute de l'espace */
.pagination {
    /* Supprime les bordures visibles qui cassent l'esthétique sans bordure */
    --bs-pagination-border-width: 0;
    /* Augmente la taille du texte pour la lisibilité */
    --bs-pagination-font-size: 1rem;
    /* Ajoute un espacement uniforme entre les éléments (Look 2025) */
    gap: 0.5rem;
    /* Retire la marge négative par défaut de BS5 */
    margin: 0;
}

/* Retire l'effet de chevauchement par défaut de Bootstrap */
.pagination > li {
    margin: 0;
}

/* 2. Style de base des liens (Taille, Forme, Typographie) */
.page-link {
    /* Taille fixe pour une zone de tap mobile conforme (44x44px) */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    /* Forme pilule/ronde pour un aspect plus doux */
    border-radius: var(--bs-border-radius-pill) !important;
    /* Couleur du texte foncé pour un bon contraste sur fond blanc */
    color: var(--bs-gray-700);
    transition: all 0.3s ease;
    font-weight: var(--bs-font-weight-medium);
}

/* 3. État Survol (Tactile / Subtle Lift) */
.page-link:hover,
.page-link:focus {
    /* Utilise une couleur très subtile du thème */
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    /* Petit effet d'élévation, rappelant le hover-lift des cartes */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
    border-color: transparent; /* S'assurer qu'aucune bordure n'apparaît */
}

/* 4. État Actif (Haute Visibilité / Élévation) */
.page-item.active .page-link {
    z-index: 2;
    color: var(--bs-white);
    background-color: var(--bs-primary); /* Couleur principale du thème */
    border-color: var(--bs-primary);
    font-weight: var(--bs-font-weight-bold);
    /* Ombre d'élévation teintée de la couleur primaire */
    box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.3);
}

/* 5. État Désactivé (Subdued) */
.page-item.disabled .page-link {
    color: var(--bs-gray-400);
    background-color: transparent;
    border-color: transparent;
}

/* S'assurer que les flèches (Précédent/Suivant) restent centrées dans le cercle */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: var(--bs-border-radius-pill) !important;
}

/********************/


.form-check-input:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

/* Supprime l'outline tant que le dropdown n'est pas ouvert */
.no-outline {
    outline: none !important;
    box-shadow: none !important;
}

/* Rétablit l'outline uniquement quand le menu est ouvert (accessibilité) */
.dropdown.show > .no-outline,
.no-outline:focus-visible {
    outline: none !important;
}

/* Style de la popup Mapbox */
.custom-mapbox-popup .mapboxgl-popup-content {
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Ajustement du contenu à l'intérieur */
.custom-mapbox-popup .card {
    border: none; /* Souvent les cards bootstrap ont des bordures qu'on veut éviter ici */
    box-shadow: none;
}

/* S'assurer que l'image ne dépasse pas */
.custom-mapbox-popup img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.sejour-popup-content .sejour-item {
    width: 100% !important;
}

/********************/


/* Additional styles for phone input */
.iti {
    width: 100%;
}

/* Unread message indicator on avatar */
.avatar-unread {
    position: relative;
}

.avatar-unread:after {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: var(--bs-danger);
    border: 2px solid white;
    border-radius: 50%;
}

/* Global fix: Center icons inside avatar components without requiring .avatar-title wrapper */
.avatar:has(> i[class*="fa-"]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   MOBILE NAVBAR - COMPACT LOGO
   ========================================= */

@media (max-width: 767.98px) {
    /* Reduce logo size on mobile to save vertical space */
    .navbar .navbar-brand-img {
        max-height: 38px !important;
    }

    /* Compact navbar padding on mobile */
    .navbar.fixed-top {
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
    }

    /* Adjust main content wrapper position for shorter navbar */
    body > .position-relative[style*="top:74px"],
    body > .position-relative[style*="top: 74px"] {
        top: 52px !important;
        height: calc(100vh - 52px) !important;
    }

    /* Adjust mobile section nav position for shorter navbar */
    #mobile-section-nav {
        top: 52px !important;
    }
}

/* =========================================
   ANNONCE FORM UX IMPROVEMENTS
   ========================================= */

/* Mobile Section Navigation */
#mobile-section-nav {
    -webkit-overflow-scrolling: touch;
}

#mobile-section-nav .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#mobile-section-nav .hide-scrollbar::-webkit-scrollbar {
    display: none;
}

#mobile-section-nav .mobile-nav-link.active,
#mobile-section-nav .mobile-nav-link.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

/* Progress breakdown clickable items */
#progress-breakdown .list-group-item[role="button"]:hover,
#annonce-progress-unified .list-group-item[role="button"]:hover {
    background-color: var(--bs-gray-100);
    cursor: pointer;
}

/* Section highlight animation for scroll-to navigation */
.highlight-section {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
    }
}

/* Matching slots styling */
.matching-slot {
    display: inline-block;
    transition: all 0.2s ease;
}

.matching-slot.bg-primary {
    transform: scale(1.1);
}

/* Limit tooltip for matching requirements */
.limit-tooltip {
    font-weight: 500;
}

/* Matching info button - tap-to-show tooltip */
.matching-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bs-secondary);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    z-index: 2;
    background: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
}

.matching-info-btn.position-absolute {
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
}

.matching-info-btn:hover,
.matching-info-btn:focus {
    opacity: 1;
}

/* Ensure matching criteria item has proper stacking */
.matching-criteria-item {
    display: flex;
}

/* Publication checklist improvements */
#publication-checklist .list-group-item a:hover {
    text-decoration: underline !important;
}

/* =========================================
   MOBILE MENU OFFCANVAS STYLES
   ========================================= */

/* Mobile nav items - compact touch-friendly sizing */
.mobile-nav-item {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.mobile-nav-item:hover,
.mobile-nav-item:active {
    background-color: var(--bs-gray-100);
    color: var(--bs-body-color);
}

/* Active/pressed state for touch feedback */
.mobile-nav-item:active {
    background-color: var(--bs-gray-200);
}

/* Section headers - uppercase muted style */
.mobile-section-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-gray-600);
}

/* Subsection headers - smaller variant */
.mobile-subsection-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-gray-500);
}

/* Offcanvas customizations */
#mobileMenu {
    width: 100%;
    max-width: 320px;
}

#mobileMenu .offcanvas-header {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Compact section headers */
#mobileMenu .mobile-section-header {
    padding-top: 0.75rem !important;
    padding-bottom: 0.375rem !important;
}

#mobileMenu .mobile-subsection-header {
    padding-top: 0.625rem !important;
    padding-bottom: 0.25rem !important;
}

/* Safe area insets for notched devices (iPhone X+) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #mobileMenu .offcanvas-body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Smooth slide animation */
#mobileMenu.offcanvas-end {
    transition: transform 0.3s ease-in-out;
}

/* =========================================
   MOBILE BOTTOM SHEET - Map/List View
   ========================================= */

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bs-white);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1040;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bottom-sheet.active {
    transform: translateY(0);
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-gray-200);
    flex-shrink: 0;
}

.bottom-sheet-title {
    font-weight: 600;
    font-size: 1rem;
}

.bottom-sheet-content {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}

/* Mobile map height adjustment and list padding for bottom bar */
@media (max-width: 767.98px) {
    /* Override inline row height: mobile navbar (52px) + compact filter bar (~52px) = 104px */
    [data-controller="map-filter"] > .row {
        height: calc(100vh - 104px) !important;
    }

    [data-controller="map-filter"] > .row > .overflow-auto {
        height: calc(100vh - 104px) !important;
    }

    #map-sejour {
        height: calc(100vh - 104px - 56px) !important;
    }

    /* Add padding to list for bottom bar */
    .popup-content {
        padding-bottom: 4rem !important;
    }
}

/* =========================================
   MOBILE FILTER SUMMARY BAR
   ========================================= */

/* Mobile filter summary bar */
#mobile-filter-summary {
    background: white;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    min-height: 48px;
}

#mobile-filter-summary:active {
    background: var(--bs-gray-100);
}

/* Rotate chevron when expanded */
#mobile-filter-summary.expanded .fa-chevron-down {
    transform: rotate(180deg);
}

/* Smooth chevron transition */
#mobile-filter-summary .fa-chevron-down {
    transition: transform 0.2s ease;
}

/* Mobile expanded form transition */
#mobile-alerte-form {
    transition: height 0.3s ease;
    overflow: hidden;
}

#mobile-alerte-form:not(.show) {
    height: 0 !important;
    padding: 0 !important;
}

#mobile-alerte-form.show {
    height: auto;
    padding: 1rem;
}

/* Reduce vertical spacing in mobile expanded form */
@media (max-width: 767.98px) {
    #mobile-alerte-form .gap-3 {
        gap: 0.5rem !important;
    }

    #mobile-alerte-form .input-group {
        min-width: auto !important;
    }

    /* Adjust main content height when mobile filter is collapsed */
    #mobile-filter-summary + #mobile-alerte-form:not(.show) ~ .row {
        height: calc(100vh - 48px - 56px) !important;
    }

    /* Condensed sejour card content on mobile */
    .sejour-item .card-body.p-4 {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }

    .sejour-item .card-body h5.card-title {
        font-size: 1rem;
    }

    .sejour-item .card-body .icon-square {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem;
    }

    .sejour-item .card-body .fs-6 {
        font-size: 0.875rem !important;
    }

    .sejour-item .card-body hr {
        margin: 0.25rem 0 !important;
    }

    .sejour-item .card-body .badge {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.75rem;
    }
}

/* =========================================
   ANNONCE CREATION FORM - MOBILE OPTIMIZATIONS
   ========================================= */

/* Mobile-only fixed bottom action bar */
.annonce-mobile-action-bar {
    z-index: 1030;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
}

@media (max-width: 767.98px) {
    /* Reduce display heading sizes on mobile */
    .address-step-wrapper .display-4 {
        font-size: 1.75rem;
    }

    .address-step-wrapper .display-5 {
        font-size: 1.5rem;
    }

    .address-step-wrapper .display-6 {
        font-size: 1.25rem;
    }

    /* Reduce lead text */
    .address-step-wrapper .lead {
        font-size: 1rem;
    }

    /* Tighter equipment grid spacing */
    .address-step-wrapper .gap-4 {
        gap: 0.75rem !important;
    }

    .address-step-wrapper .gap-3 {
        gap: 0.5rem !important;
    }

    /* Reduce map height on mobile */
    .address-step-wrapper #map {
        height: 250px !important;
    }

    /* Reduce calendar min-height on mobile */
    .address-step-wrapper #calendar {
        min-height: 300px !important;
    }

    /* Add bottom padding for fixed action bar */
    .address-step-wrapper {
        padding-bottom: 80px !important;
    }

    /* Reduce section margins */
    .address-step-wrapper .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .address-step-wrapper .mb-4 {
        margin-bottom: 1rem !important;
    }

    /* Reduce top spacer heights on mobile for shorter navbar */
    .address-step-wrapper > .w-100.d-block[style*="height: 60px"],
    .address-step-wrapper > .w-100.d-block[style*="height: 70px"],
    .address-step-wrapper > .w-100.d-block[style*="height: 80px"],
    .address-step-wrapper > .w-100.d-block[style*="height: 85px"],
    .address-step-wrapper > .w-100.d-block[style*="height: 90px"],
    .address-step-wrapper > .w-100.d-block[style*="height: 100px"] {
        height: 70px !important;
    }

    /* Compact navbar padding on mobile */
    .annonce-navbar-mobile {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Animal selection grid - 2 columns on mobile */
    .animal-selection-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
        overflow: visible;
    }

    .animal-selection-grid > * {
        width: 100% !important;
        overflow: visible;
    }

    /* Mobile touch feedback for lift effect (no hover on touch devices) */
    .lift:active,
    .selectable-card:active {
        transform: translateY(-3px) !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    /* Equipment grid - 2 columns on mobile with compact cards */
    .equipment-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
    }

    .equipment-grid > * {
        width: 100% !important;
    }

    /* Compact equipment cards on mobile */
    .equipment-grid .selectable-card {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem;
    }

    .equipment-grid .selectable-card .icon-state {
        font-size: 1rem;
    }

    /* Reduce textarea height on mobile */
    .address-step-wrapper textarea.form-control {
        min-height: 100px !important;
        max-height: 150px;
    }

    /* Compact form help text on mobile */
    .address-step-wrapper .form-text {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .address-step-wrapper .form-text ul {
        margin-bottom: 0.5rem;
        padding-left: 1.25rem;
    }

    .address-step-wrapper .form-text li {
        margin-bottom: 0.25rem;
    }

    /* Habitation type buttons - full width on mobile */
    .habitation-type-grid > * {
        width: 100% !important;
    }

    .habitation-type-grid .selectable-card,
    .habitation-type-grid label {
        width: 100% !important;
    }

    /* Matching criteria grid - consistent sizing on mobile */
    .matching-criteria-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
        align-items: stretch;
    }

    .matching-criteria-grid > * {
        width: 100% !important;
        display: flex;
    }

    .matching-criteria-grid .btn {
        width: 100% !important;
        justify-content: center;
        text-align: center;
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem !important;
        line-height: 1.2;
        align-items: center;
        min-height: 44px;
    }

    .matching-criteria-grid .btn i {
        display: none; /* Hide all icons on mobile to save space */
    }

    /* But keep matching info tooltip icon visible */
    .matching-criteria-grid .matching-info-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        min-height: 28px;
        opacity: 0.7;
        cursor: pointer;
        right: 0.25rem;
    }

    .matching-criteria-grid .matching-info-btn i {
        display: block !important;
        font-size: 0.85rem !important;
        color: var(--bs-secondary);
    }

    /* Add more right padding to labels with info button on mobile */
    .matching-criteria-item label.pe-4 {
        padding-right: 1.75rem !important;
    }

    /* Matching card compact on mobile */
    #matching-criterion-scope .card {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0 !important;
    }

    #matching-criterion-scope .card-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #matching-criterion-scope .card-header h3 {
        font-size: 1rem;
    }

    #matching-criterion-scope .card-header .icon-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem;
    }

    #matching-criterion-scope .card-body {
        padding: 0.75rem !important;
    }

    /* Fix limit tooltip breaking mobile layout */
    #matching-criterion-scope .card-header > .d-flex > .flex-shrink-0 {
        position: relative;
    }

    #matching-criterion-scope .card-header .limit-tooltip {
        position: absolute;
        right: 0;
        left: auto;
        top: 100%;
        text-align: right;
        font-size: 0.7rem;
        width: max-content;
        max-width: 200px;
    }
}

/* =========================================
   PROFIL CREATION FORM - MOBILE OPTIMIZATIONS
   ========================================= */

/* Mobile-only fixed bottom action bar */
.profil-mobile-action-bar {
    z-index: 1030;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
}

@media (max-width: 767.98px) {
    /* Reduce display heading sizes on mobile */
    .profil-step-wrapper .display-4 {
        font-size: 1.75rem;
    }

    .profil-step-wrapper .display-5 {
        font-size: 1.5rem;
    }

    .profil-step-wrapper .display-6 {
        font-size: 1.25rem;
    }

    /* Reduce lead text */
    .profil-step-wrapper .lead {
        font-size: 1rem;
    }

    /* Tighter grid spacing */
    .profil-step-wrapper .gap-4 {
        gap: 0.75rem !important;
    }

    .profil-step-wrapper .gap-3 {
        gap: 0.5rem !important;
    }

    /* Add bottom padding for fixed action bar */
    .profil-step-wrapper {
        padding-bottom: 80px !important;
    }

    /* Reduce section margins */
    .profil-step-wrapper .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .profil-step-wrapper .mb-4 {
        margin-bottom: 1rem !important;
    }

    /* Ensure consistent top spacer height for fixed navbar on mobile */
    .profil-step-wrapper > .w-100.d-block[style*="height: 60px"],
    .profil-step-wrapper > .w-100.d-block[style*="height: 70px"],
    .profil-step-wrapper > .w-100.d-block[style*="height: 80px"],
    .profil-step-wrapper > .w-100.d-block[style*="height: 85px"],
    .profil-step-wrapper > .w-100.d-block[style*="height: 90px"],
    .profil-step-wrapper > .w-100.d-block[style*="height: 100px"] {
        height: 70px !important;
    }

    /* Compact navbar padding on mobile */
    .profil-navbar-mobile {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Reduce textarea height on mobile */
    .profil-step-wrapper textarea.form-control {
        min-height: 100px !important;
        max-height: 150px;
    }

    /* Compact form help text on mobile */
    .profil-step-wrapper .form-text {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .profil-step-wrapper .form-text ul {
        margin-bottom: 0.5rem;
        padding-left: 1.25rem;
    }

    .profil-step-wrapper .form-text li {
        margin-bottom: 0.25rem;
    }

    /* Profil selection grid - 2 columns on mobile */
    .profil-selection-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
    }

    .profil-selection-grid > * {
        width: 100% !important;
    }

    /* Animal categories grid - 2 columns on mobile */
    .profil-step-wrapper .d-flex.flex-wrap.gap-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
    }

    .profil-step-wrapper .d-flex.flex-wrap.gap-3 > div {
        width: 100% !important;
    }

    /* Compact accordion on mobile */
    .profil-step-wrapper .accordion-button {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .profil-step-wrapper .accordion-body {
        padding: 1rem;
        font-size: 0.85rem;
    }

    /* Photo grid - ensure 2 columns */
    .profil-step-wrapper #preview .col-md-4.col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Compact cards on mobile */
    .profil-step-wrapper .card.bg-light.p-4 {
        padding: 1rem !important;
    }

    /* Alert spacing on mobile */
    .profil-step-wrapper .alert {
        padding: 0.75rem 1rem;
    }

    .profil-step-wrapper .alert i.fa-2x {
        font-size: 1.25rem !important;
    }

    /* Mobile touch feedback */
    .profil-step-wrapper .lift:active,
    .profil-step-wrapper .selectable-card:active {
        transform: translateY(-3px) !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    /* Compact selectable cards in animal/category grids on mobile */
    .profil-step-wrapper .d-flex.flex-wrap.gap-3 .selectable-card {
        padding: 0.5rem 0.75rem !important;
    }

    .profil-step-wrapper .d-flex.flex-wrap.gap-3 .selectable-card .icon-state {
        font-size: 1.25rem !important;
    }

    .profil-step-wrapper .d-flex.flex-wrap.gap-3 .selectable-card .form-label {
        font-size: 0.85rem;
    }

    /* Reduce check indicator size on mobile */
    .profil-step-wrapper .d-flex.flex-wrap.gap-3 .selectable-card .check-indicator {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.65rem;
    }

    /* Prevent overflow in grid container */
    .profil-step-wrapper .d-flex.flex-wrap.gap-3 {
        overflow: hidden;
    }

    /* =========================================
       SKILLS/ATOUTS GRID - MOBILE OPTIMIZATIONS
       ========================================= */

    /* Skills criterion card - compact on mobile */
    #skills-criterion-scope .card-header {
        padding: 0.75rem 1rem !important;
    }

    #skills-criterion-scope .card-header .h4 {
        font-size: 1rem;
    }

    #skills-criterion-scope .card-header .icon-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem;
    }

    #skills-criterion-scope .card-header p {
        font-size: 0.75rem !important;
    }

    /* Counter badge - more compact */
    #skills-criterion-scope .card-header .h3 {
        font-size: 1.25rem !important;
    }

    #skills-criterion-scope .card-body {
        padding: 0.75rem !important;
    }

    /* Category section margins */
    #skills-criterion-scope .mb-5 {
        margin-bottom: 1rem !important;
    }

    /* Category header */
    #skills-criterion-scope .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    #skills-criterion-scope h6.text-uppercase {
        font-size: 0.7rem !important;
    }

    /* Skills buttons grid - 2 columns on mobile */
    #skills-criterion-scope .d-flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem !important;
    }

    #skills-criterion-scope .d-flex.flex-wrap.gap-2 > .position-relative {
        width: 100% !important;
    }

    /* Compact skill buttons on mobile */
    #skills-criterion-scope .btn.rounded-pill {
        width: 100% !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem;
        justify-content: flex-start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide icons on skill buttons to save space */
    #skills-criterion-scope .btn.rounded-pill > i:first-child {
        display: none !important;
    }

    /* Keep tooltip icon but make it smaller */
    #skills-criterion-scope .btn.rounded-pill .fa-question-circle {
        font-size: 0.65rem;
        margin-left: auto !important;
        flex-shrink: 0;
    }

    /* Text truncation for long labels */
    #skills-criterion-scope .btn.rounded-pill span.fw-medium {
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    /* =========================================
       PROFIL FULL FORM PAGE - MOBILE OPTIMIZATIONS
       ========================================= */

    /* Scope: turbo-frame#profil-form - the full profil editing page */

    /* Reduce section card margins */
    #profil-form .card.mb-6 {
        margin-bottom: 1rem !important;
    }

    /* Compact card headers */
    #profil-form .card-header {
        padding: 0.75rem 1rem !important;
    }

    #profil-form .card-header h2 {
        font-size: 1.1rem !important;
    }

    #profil-form .card-header p,
    #profil-form .card-header .small {
        font-size: 0.75rem !important;
    }

    /* Compact card body */
    #profil-form .card-body {
        padding: 0.75rem !important;
    }

    /* Reduce row margins */
    #profil-form .row.mb-5 {
        margin-bottom: 1rem !important;
    }

    #profil-form .mb-5 {
        margin-bottom: 1rem !important;
    }

    #profil-form .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    /* Compact form labels */
    #profil-form .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Compact form text */
    #profil-form .form-text {
        font-size: 0.75rem !important;
    }

    /* Reduce textarea height */
    #profil-form textarea.form-control {
        min-height: 80px !important;
        max-height: 120px !important;
    }

    /* Animal categories grid - 2 columns on mobile */
    #profil-form .d-flex.flex-wrap.gap-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    #profil-form .d-flex.flex-wrap.gap-4 > div {
        width: 100% !important;
    }

    /* Compact selectable cards for animals */
    #profil-form .d-flex.flex-wrap.gap-4 .selectable-card {
        padding: 0.5rem 0.75rem !important;
    }

    #profil-form .d-flex.flex-wrap.gap-4 .selectable-card .icon-state {
        font-size: 1.25rem !important;
    }

    #profil-form .d-flex.flex-wrap.gap-4 .selectable-card .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 0 !important;
    }

    /* Avatar section - center and compact */
    #profil-form #informations .col-md-6.order-1 {
        margin-bottom: 1rem !important;
    }

    /* Border indicators - thinner on mobile */
    #profil-form .border-start.border-5 {
        border-width: 3px !important;
        padding-left: 0.75rem !important;
    }

    /* Badges - smaller on mobile */
    #profil-form .badge {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* Photo gallery - compact */
    #profil-form #photos .card-body {
        padding: 0.5rem !important;
    }

    /* Photo grid - force 2-column equal grid on mobile */
    .profil-photo-grid.row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .profil-photo-grid > [class*="col"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: unset !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .profil-photo-grid .card {
        border-radius: 0.75rem !important;
        width: 100% !important;
        min-height: auto !important;
        aspect-ratio: 1 / 1 !important; /* Square on mobile */
    }

    .profil-photo-grid .ratio {
        --bs-aspect-ratio: 100% !important; /* Square on mobile */
    }

    .profil-photo-grid img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Placeholder card styling on mobile */
    .profil-photo-grid .placeholder-col .card {
        min-height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Add photo button - compact */
    #profil-form #add_photos {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
        gap: 0.5rem !important;
    }

    #profil-form #add_photos i {
        font-size: 1.25rem !important;
    }

    /* Delete button always visible on mobile (no hover) */
    .profil-photo-grid .delete-btn {
        opacity: 1 !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0.25rem !important;
    }

    /* Principal badge - smaller on mobile */
    .profil-photo-grid .badge {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.4rem !important;
        margin: 0.25rem !important;
    }

    /* Matching skills card - compact */
    #profil-form #skills-criterion-scope .card {
        margin-bottom: 0.5rem !important;
    }

    #profil-form #skills-criterion-scope .card-header {
        padding: 0.5rem 0.75rem !important;
    }

    #profil-form #skills-criterion-scope .card-header .h4 {
        font-size: 1rem !important;
    }

    #profil-form #skills-criterion-scope .card-header .icon-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }

    #profil-form #skills-criterion-scope .card-header p {
        font-size: 0.7rem !important;
    }

    /* Skills counter badge */
    #profil-form #skills-criterion-scope .card-header .h3 {
        font-size: 1.1rem !important;
    }

    #profil-form #skills-criterion-scope .card-body {
        padding: 0.5rem !important;
    }

    /* Category headers */
    #profil-form #skills-criterion-scope .mb-5 {
        margin-bottom: 0.75rem !important;
    }

    #profil-form #skills-criterion-scope h6.text-uppercase {
        font-size: 0.65rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Skills buttons - 2 column grid */
    #profil-form #skills-criterion-scope .d-flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.35rem !important;
    }

    #profil-form #skills-criterion-scope .d-flex.flex-wrap.gap-2 > .position-relative {
        width: 100% !important;
    }

    /* Compact skill buttons */
    #profil-form #skills-criterion-scope .btn.rounded-pill {
        width: 100% !important;
        padding: 0.35rem 0.5rem !important;
        font-size: 0.7rem !important;
        justify-content: flex-start !important;
    }

    /* Hide icons on skill buttons to save space */
    #profil-form #skills-criterion-scope .btn.rounded-pill > i:first-child {
        display: none !important;
    }

    #profil-form #skills-criterion-scope .btn.rounded-pill .fa-question-circle {
        font-size: 0.6rem !important;
        margin-left: auto !important;
    }

    #profil-form #skills-criterion-scope .btn.rounded-pill span.fw-medium {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Compagnons section - compact */
    #profil-form #compagnons_voyage .card-body {
        padding: 0.5rem !important;
    }

    /* Scroll margin for sections - adjusted for mobile navbar + status bar */
    #profil-form #informations,
    #profil-form #presentation,
    #profil-form #competences,
    #profil-form #compagnons_voyage,
    #profil-form #photos,
    #profil-form #petSkills {
        scroll-margin-top: 120px !important;
    }

    /* Avatar section - compact on mobile */
    #profil-form .avatar-upload {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    #profil-form .avatar-upload .position-relative[style*="160px"] {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 0.75rem !important;
    }

    #profil-form .avatar-upload .drop-zone {
        padding: 0.5rem !important;
    }

    #profil-form .avatar-upload .avatar-action-btn {
        margin-bottom: 0.5rem !important;
    }

    #profil-form .avatar-upload .avatar-action-btn .btn {
        padding: 0.4rem 1rem !important;
        font-size: 0.85rem !important;
    }

    #profil-form .avatar-upload .drop-zone > p.small {
        display: none !important; /* Hide helper text on mobile */
    }

    #profil-form .avatar-upload .preview-container {
        border-width: 3px !important;
    }

    /* Profil animal grid - 2 columns on mobile */
    .profil-animal-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
    }

    .profil-animal-grid > div {
        width: 100% !important;
    }

    .profil-animal-grid .selectable-card {
        padding: 0.5rem 0.75rem !important;
    }

    .profil-animal-grid .selectable-card .icon-state {
        font-size: 1.25rem !important;
    }

    .profil-animal-grid .selectable-card .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 0 !important;
    }

    /* Profil form content - mobile padding */
    .profil-form-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-bottom: 80px !important;
    }

    /* Mobile section nav active state for profil */
    #mobile-section-nav .mobile-nav-link {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }

    #mobile-section-nav .mobile-nav-link i {
        font-size: 0.7rem;
    }

    /* =========================================
       VERIFICATION STEPS - MOBILE OPTIMIZATIONS
       ========================================= */

    /* Header section - compact on mobile */
    #verification-step > .text-center.mb-5 {
        margin-bottom: 1rem !important;
        margin-top: -1rem;
    }

    #verification-step > .text-center .rounded-circle {
        width: 56px !important;
        height: 56px !important;
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    #verification-step > .text-center .fa-2x {
        font-size: 1.5rem !important;
    }

    #verification-step > .text-center .h3 {
        font-size: 1.15rem;
        margin-bottom: 0.25rem !important;
    }

    #verification-step > .text-center p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Cards container - tighter gaps */
    #verification-step .d-flex.flex-column.gap-3 {
        gap: 0.75rem !important;
    }

    #verification-step .d-flex.flex-column.gap-3.mb-5 {
        margin-bottom: 1.5rem !important;
    }

    /* Card body - compact padding */
    #verification-step .card-body {
        padding: 0.875rem !important;
    }

    /* Step headings - smaller on mobile */
    #verification-step .card-body h5 {
        font-size: 0.95rem;
    }

    /* Reduce indentation on mobile */
    #verification-step .ms-4 {
        margin-left: 0.5rem !important;
    }

    #verification-step .ps-2 {
        padding-left: 0 !important;
    }

    #verification-step .ms-md-4 {
        margin-left: 0 !important;
    }

    /* Step 1 buttons - stack on very narrow screens */
    #verification-step .d-flex.gap-2:has(.btn-outline-primary.rounded-pill) {
        flex-wrap: wrap;
    }

    #verification-step .d-flex.gap-2 .btn-outline-primary.rounded-pill {
        flex: 1 1 auto;
        min-width: 120px;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.8rem;
    }

    /* Badges - smaller on mobile */
    #verification-step .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* Email/Phone verification forms - compact */
    #verification-step .bg-light.p-3 {
        padding: 0.75rem !important;
    }

    #verification-step .bg-light.p-3 .small {
        font-size: 0.8rem;
    }

    /* Success/pending cards */
    #verification-step .card-body.p-4,
    #verification-step .card-body.p-5 {
        padding: 1rem !important;
    }

    #verification-step .fa-3x {
        font-size: 2rem !important;
    }

    /* Alerts - compact */
    #verification-step .alert {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    #verification-step .alert .me-3 {
        margin-right: 0.5rem !important;
    }

    /* Form elements */
    #verification-step form .d-flex.gap-2 {
        gap: 0.5rem !important;
    }

    /* Document upload section */
    #verification-step .mt-3 {
        margin-top: 0.75rem !important;
    }

    /* Phone verification form - stack vertically on mobile */
    #verification-step [data-controller="phone-input"] .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    #verification-step [data-controller="phone-input"] .d-flex.gap-3 > div {
        width: 100%;
    }

    /* Phone input field */
    #verification-step [data-controller="phone-input"] input[type="tel"],
    #verification-step [data-controller="phone-input"] .iti {
        width: 100%;
    }

    /* Send code button - full width and better styling */
    #verification-step [data-controller="phone-input"] button[type="submit"].btn-warning,
    #verification-step [data-controller="phone-input"] button[type="submit"].btn-success {
        width: 100%;
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem;
        border-radius: 0.5rem !important;
    }

    /* Fix form_row wrapper adding extra margin */
    #verification-step [data-controller="phone-input"] .mb-3 {
        margin-bottom: 0 !important;
    }

    /* Document upload - full width button on mobile */
    .document-upload-btn-wrapper {
        width: 100%;
    }

    .document-upload-btn-wrapper .btn {
        width: 100%;
    }
}

/* Document upload - auto width on desktop */
@media (min-width: 768px) {
    .document-upload-btn-wrapper {
        width: auto;
    }

    .document-upload-btn-wrapper .btn {
        width: auto;
    }
}

/* Document upload - thumbnails and layout */
.document-upload .doc-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.document-upload .doc-thumb-wrapper {
    flex-shrink: 0;
}

.document-upload .doc-thumb-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
}

.document-upload .document-info .filename {
    word-break: break-all;
}

.document-upload .progress-bar {
    transition: width 0.15s ease-out;
}

.document-upload .drop-zone {
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background-color: #f8f9fa;
}

.document-upload .drop-zone:hover,
.document-upload .drop-zone.border-primary {
    background-color: #e9ecef;
    border-color: var(--bs-primary) !important;
}

.border-dashed {
    border-style: dashed !important;
}

/* Document upload - mobile responsive */
@media (max-width: 767.98px) {
    .document-upload .document-existing,
    .document-upload .local-preview {
        padding: 1rem;
        background-color: #f8f9fa;
        border-radius: 0.5rem;
    }

    .document-upload .document-actions {
        width: 100%;
        margin-top: 0.5rem;
    }

    .document-upload .document-actions .btn {
        flex: 1;
    }
}

/* =========================================
   ANNONCE VIEW PAGE - MOBILE UX
   ========================================= */

@media (max-width: 991.98px) {
    /* Add bottom padding for floating action bar */
    .annonce-view-page {
        padding-bottom: 80px !important;
    }
}

@media (max-width: 767.98px) {
    /* Reduce gallery height on mobile */
    .annonce-view-page .annonce-gallery {
        height: 250px !important;
        min-height: 200px !important;
    }

    /* Reduce map height on mobile */
    .annonce-view-page #location .rounded-4 {
        height: 280px !important;
    }

    /* Compact typography */
    .annonce-view-page .display-5 {
        font-size: 1.5rem;
    }

    /* Reduce display-6 on mobile for review scores */
    .annonce-view-page .display-6 {
        font-size: 1.25rem;
    }
}

/* =========================================
   CONVERSATION PAGE - MOBILE UX
   ========================================= */

/* Message bubble default width */
.conversation-message-bubble {
    max-width: 75%;
}

/* Message bubbles - wider on mobile for better readability */
@media (max-width: 767.98px) {
    .conversation-message-bubble {
        max-width: 88% !important;
    }

    /* Reduce margin on individual message rows */
    .conversation-message-row {
        margin: 0.5rem !important;
    }

    /* Compact safety alert on mobile */
    #conversation-messages .alert.border-info {
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    #conversation-messages .alert.border-info .fs-4 {
        font-size: 1.25rem !important;
    }

    /* Compact system messages on mobile */
    #conversation-messages [data-last-message-timestamp] > div[style*="max-width"] {
        max-width: 95% !important;
    }

    #conversation-messages [data-last-message-timestamp] .p-4 {
        padding: 0.75rem !important;
    }

    #conversation-messages [data-last-message-timestamp] .fs-1 {
        font-size: 2rem !important;
    }

    #conversation-messages [data-last-message-timestamp] h5 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    #conversation-messages [data-last-message-timestamp] .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    #conversation-messages [data-last-message-timestamp] .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    #conversation-messages [data-last-message-timestamp] p.text-muted {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    #conversation-messages [data-last-message-timestamp] .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* Mobile action bar styling */
.conversation-mobile-actions .btn {
    min-height: 44px;
}

/* Conversation info toggle - subtle styling */
.conversation-info-toggle {
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Touch feedback for the floating button */
.conversation-info-toggle:active {
    transform: scale(0.95);
}

/* Hide floating button when offcanvas is shown (using backdrop as indicator) */
.offcanvas-backdrop ~ .conversation-info-toggle,
.offcanvas.show ~ .conversation-info-toggle,
.offcanvas.showing ~ .conversation-info-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Fallback: also hide via z-index when backdrop exists */
.offcanvas-backdrop.show {
    z-index: 1040;
}

.conversation-info-toggle {
    z-index: 1030; /* Below backdrop (1040) so it's covered */
}

/* Mobile offcanvas panel styling - full width on small screens */
@media (max-width: 575.98px) {
    #mobileInfoPanel {
        --bs-offcanvas-width: 100% !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #mobileInfoPanel {
        --bs-offcanvas-width: 320px;
    }
}

#mobileInfoPanel .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbars on mobile for cleaner look */
@media (max-width: 767.98px) {
    #conversation-messages,
    #mobileInfoPanel .offcanvas-body {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    #conversation-messages::-webkit-scrollbar,
    #mobileInfoPanel .offcanvas-body::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
}

/* Compact offcanvas header on mobile */
#mobileInfoPanel .offcanvas-header {
    padding: 0.5rem 1rem !important;
    min-height: auto;
}

#mobileInfoPanel .offcanvas-title {
    font-size: 0.9rem;
}

/* Ensure side panel content fits well in offcanvas */
#mobileInfoPanel #conversation-side-panel {
    padding: 0.75rem !important;
}

#mobileInfoPanel #conversation-side-panel .card {
    border-radius: 0.75rem !important;
}

/* Reduce avatar size in mobile offcanvas */
@media (max-width: 767.98px) {
    #mobileInfoPanel #conversation-side-panel img[style*="width: 128px"] {
        width: 80px !important;
        height: 80px !important;
    }

    #mobileInfoPanel #conversation-side-panel div[style*="width: 128px"] {
        width: 80px !important;
        height: 80px !important;
    }

    /* Compact card bodies in offcanvas */
    #mobileInfoPanel .card-body {
        padding: 0.75rem !important;
    }

    /* Compact list items in offcanvas */
    #mobileInfoPanel .list-group-item,
    #mobileInfoPanel li[style*="cursor: pointer"] {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* =========================================
   CONVERSATION CANCEL PAGE - MOBILE UX
   ========================================= */

@media (max-width: 767.98px) {
    /* Add bottom padding for fixed action bar */
    .conversation-cancel-wrapper {
        padding-bottom: 100px !important;
    }

    /* Reduce card margin top on mobile */
    .conversation-cancel-wrapper .card {
        margin-top: 0.5rem !important;
    }

    /* Compact card header */
    .conversation-cancel-wrapper .card-header {
        padding: 0.75rem 1rem;
    }

    .conversation-cancel-wrapper .card-header h1 {
        font-size: 1.15rem;
    }

    /* Compact card body with extra bottom padding for fixed bar */
    .conversation-cancel-wrapper .card-body {
        padding: 1rem 1rem 80px 1rem !important;
    }

    /* Compact info text */
    .conversation-cancel-wrapper .text-muted.mb-4 {
        font-size: 0.875rem;
        margin-bottom: 1rem !important;
    }

    /* Compact form labels */
    .conversation-cancel-wrapper .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    /* Compact form groups */
    .conversation-cancel-wrapper .mb-4 {
        margin-bottom: 1rem !important;
    }

    /* Reduce textarea height */
    .conversation-cancel-wrapper textarea.form-control {
        min-height: 80px !important;
        max-height: 120px;
    }

    /* Compact alert boxes */
    .conversation-cancel-wrapper .alert {
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
        font-size: 0.875rem;
    }

    .conversation-cancel-wrapper .alert .fs-3 {
        font-size: 1.25rem !important;
    }

    /* Icon sizing in alert boxes */
    .conversation-cancel-wrapper .alert i.fal {
        flex-shrink: 0;
    }
}

/* =========================================
   ANNONCE FULL FORM - MOBILE UX ENHANCEMENTS
   ========================================= */

@media (max-width: 767.98px) {
    /* Heading sizes for annonce form */
    .form-content .display-5 { font-size: 1.5rem; }
    .form-content .display-6 { font-size: 1.25rem; }
    .form-content h2 { font-size: 1.25rem; }
    .form-content h3 { font-size: 1.1rem; }

    /* Form text compactness */
    .form-content .form-text { font-size: 0.8rem; }

    /* Card header compact */
    .form-content .card-header { padding: 0.75rem 1rem; }

    /* Card body compact */
    .form-content .card-body { padding: 0.75rem; }

    /* Reduce section margins */
    .form-content .mb-6 { margin-bottom: 1.5rem !important; }
    .form-content .my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

    /* Equipment grid compact */
    .form-content .d-flex.flex-wrap.gap-2.gap-md-4 > div {
        flex: 0 0 calc(50% - 0.25rem);
    }

    /* Checkbox buttons - ensure adequate touch targets */
    .form-content .btn-check + label {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Photo section compact */
    #section-photos .card-body.p-4 { padding: 1rem !important; }
    #section-photos .p-md-5 { padding: 1rem !important; }

    /* Progress sidebar compact on mobile */
    #annonce-progress-unified .card-body { padding: 0.75rem; }
    #annonce-progress-unified .list-group-item { padding: 0.5rem 0.75rem; }

    /* Compact accordion headers */
    .form-content .accordion-button { padding: 0.75rem 1rem; }
    .form-content .accordion-body { padding: 0.75rem 1rem; }

    /* Alert boxes compact */
    .form-content .alert { padding: 0.75rem; }
    .form-content .alert i.fa-2x { font-size: 1.25rem !important; }
}

/* =========================================
   PROFIL VIEW PAGE - MOBILE UX
   ========================================= */

/* Utility class for text truncation in flex containers */
.min-width-0 {
    min-width: 0;
}

/* Sticky positioning - only on desktop */
.position-lg-sticky {
    position: static;
}

@media (min-width: 992px) {
    .position-lg-sticky {
        position: sticky;
    }
}

@media (max-width: 767.98px) {
    /* Reduce avatar size on mobile */
    .avatar.avatar-xxl {
        width: 80px !important;
        height: 80px !important;
    }

    .avatar.avatar-xxl .avatar-img {
        width: 80px !important;
        height: 80px !important;
    }

    /* Compact verification grid items */
    #verification .col-6 .d-flex {
        padding: 0.375rem !important;
    }

    #verification .col-6 .small {
        font-size: 0.7rem !important;
    }

    #verification .col-6 .fs-5 {
        font-size: 0.875rem !important;
    }

    /* Compact profile stats row */
    #profil-avis .fs-md-5 {
        font-size: 1rem;
    }

    /* Review cards - compact styling */
    #profil-avis .card-body {
        padding: 0.75rem !important;
    }

    /* Ensure avatar images don't shrink in reviews */
    #profil-avis .card-body img.rounded-circle {
        flex-shrink: 0;
    }

    /* Compact review score display */
    #profil-avis .display-6 {
        font-size: 1.25rem !important;
    }

    /* Touch feedback for cards */
    .shadow-lift:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
    }
}

/* =========================================
   ANNONCE FULL FORM - COMPREHENSIVE MOBILE UX
   ========================================= */

@media (max-width: 767.98px) {
    /* ---- MOBILE SECTION NAV ---- */
    #mobile-section-nav {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    #mobile-section-nav .mobile-nav-link {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }

    #mobile-section-nav .mobile-nav-link i {
        font-size: 0.7rem;
    }

    /* Active state for mobile nav links */
    #mobile-section-nav .mobile-nav-link.active {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: white !important;
    }

    /* ---- GENERAL FORM CONTENT ---- */
    .form-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Form content add bottom padding for scrolling */
    .form-content > .card:last-child {
        margin-bottom: 2rem !important;
    }

    /* ---- OFFLINE REMINDER CARD ---- */
    .offline-reminder-card .card-body {
        padding: 0.75rem !important;
    }

    .offline-reminder-card .fa-2x {
        font-size: 1.25rem !important;
    }

    .offline-reminder-card p {
        font-size: 0.85rem;
        margin-bottom: 0 !important;
    }

    /* ---- CARD SECTIONS ---- */
    .form-content .card.csection {
        margin-bottom: 1rem !important;
        margin-top: 1rem !important;
        border-radius: 0.75rem !important;
    }

    .form-content .card-header {
        padding: 0.75rem 1rem !important;
    }

    .form-content .card-header h2 {
        font-size: 1.15rem !important;
    }

    .form-content .card-header .small,
    .form-content .card-header p {
        font-size: 0.75rem !important;
    }

    .form-content .card-body {
        padding: 0.75rem !important;
    }

    /* ---- SUBSECTION HEADERS ---- */
    .form-content .subsection-header {
        font-size: 1rem !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .form-content .subsection-header .badge {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* ---- CALENDAR SECTION ---- */
    .form-content #section-dates .card-body {
        padding: 0.5rem !important;
    }

    /* Calendar help accordion - compact */
    .calendar-help-accordion .accordion-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem;
    }

    .calendar-help-accordion .accordion-body {
        padding: 0.75rem !important;
    }

    /* Calendar days - smaller on mobile */
    .form-content .day {
        height: 32px !important;
        width: 32px !important;
        font-size: 0.75rem !important;
    }

    .form-content .day-header {
        font-size: 0.6rem !important;
        padding-bottom: 0.25rem !important;
    }

    /* Month headers compact */
    .form-content .month h6,
    .form-content #calendar h6 {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* ---- SAVE NOTICE BAR ---- */
    .save-notice-bar {
        padding: 0.5rem 0.75rem !important;
    }

    .save-notice-bar .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* ---- ANIMAL SECTION ---- */
    .animal-categories-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .animal-categories-grid > .col-6 {
        flex: 0 0 calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem) !important;
        width: calc(50% - 0.25rem) !important;
    }

    /* CRITICAL: Expanded animal cards span full width on mobile */
    .animal-categories-grid > .col-6:has([data-animal-fields-target="container"]:not(.d-none)) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .animal-category-card {
        border-radius: 0.5rem !important;
    }

    .animal-category-card .card-body {
        padding: 0.25rem !important;
    }

    /* Number button controls - compact and fit in 2-column grid */
    .form-content .lift[data-controller="number-button"],
    .animal-category-card .lift[data-controller="number-button"],
    .animal-categories-grid .lift[data-controller="number-button"] {
        padding: 0.5rem 0.25rem !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-content .lift[data-controller="number-button"] label,
    .animal-category-card .lift[data-controller="number-button"] label {
        margin-bottom: 0.25rem !important;
    }

    .form-content .lift[data-controller="number-button"] label .display-6,
    .animal-category-card .lift[data-controller="number-button"] label .display-6 {
        font-size: 1.1rem !important;
    }

    .form-content .lift[data-controller="number-button"] label .small,
    .animal-category-card .lift[data-controller="number-button"] label .small {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }

    .form-content .lift[data-controller="number-button"] .input-group,
    .animal-category-card .lift[data-controller="number-button"] .input-group {
        max-width: 100px !important;
    }

    .form-content .lift[data-controller="number-button"] .input-group .btn,
    .animal-category-card .lift[data-controller="number-button"] .input-group .btn {
        padding: 0.2rem 0.4rem !important;
    }

    .form-content .lift[data-controller="number-button"] .input-group .form-control,
    .animal-category-card .lift[data-controller="number-button"] .input-group .form-control {
        width: 30px !important;
        min-width: 30px !important;
        font-size: 0.8rem !important;
    }

    /* Animal subform container - proper padding */
    .form-content #section-animaux .border.rounded-3.p-4,
    .animal-category-card [data-animal-fields-target="container"] {
        padding: 0.75rem !important;
        margin-top: 0.5rem !important;
    }

    /* Animal subform - stack promenade fields vertically */
    .animal-category-card [data-animal-fields-target="container"] .row.g-3 > .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    /* Animal subform - compact labels */
    .animal-category-card [data-animal-fields-target="container"] .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Animal subform - equipment checkboxes in a proper grid */
    .animal-category-card [data-animal-fields-target="container"] .row.g-3:has(.selectable-card) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .animal-category-card [data-animal-fields-target="container"] .row.g-3:has(.selectable-card) > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    /* Animal subform - compact equipment cards */
    .animal-category-card [data-animal-fields-target="container"] .selectable-card {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .animal-category-card [data-animal-fields-target="container"] .selectable-card .icon-state {
        font-size: 1rem !important;
        margin-right: 0.5rem !important;
    }

    .animal-category-card [data-animal-fields-target="container"] .selectable-card .form-label {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }

    .form-content #section-animaux .row.g-3 {
        gap: 0.5rem !important;
    }

    /* ---- AUTONOMY GRID ---- */
    .autonomy-grid {
        flex-direction: column !important;
    }

    .autonomy-grid > div {
        width: 100% !important;
    }

    .autonomy-grid .selectable-card {
        padding: 0.75rem !important;
    }

    /* ---- HABITATION TYPE GRID ---- */
    .habitation-type-grid .selectable-card {
        padding: 0.75rem !important;
    }

    .habitation-type-grid .selectable-card .icon-state {
        font-size: 1.5rem !important;
    }

    .habitation-type-grid .selectable-card .form-label {
        font-size: 0.9rem !important;
    }

    /* ---- CHAMBRES GRID ---- */
    .chambres-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .chambres-grid > * {
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
    }

    .chambres-grid .lift {
        padding: 0.5rem !important;
        min-width: auto !important;
        max-width: none !important;
    }

    /* ---- EQUIPMENT CARDS - compact on mobile ---- */
    .equipment-grid .selectable-card {
        padding: 0.5rem 0.75rem !important;
    }

    .equipment-grid .selectable-card .icon-state {
        font-size: 1.25rem !important;
    }

    .equipment-grid .selectable-card .form-label {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    .equipment-grid .selectable-card .check-indicator {
        width: 22px !important;
        height: 22px !important;
    }

    .equipment-grid .selectable-card .check-indicator i {
        font-size: 0.6rem !important;
    }

    /* ---- TEXTAREA HEIGHT ---- */
    .form-content textarea.form-control {
        min-height: 80px !important;
        max-height: 120px !important;
    }

    /* ---- FORM TEXT / HELP TEXT ---- */
    .form-content .form-text {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    /* ---- PHOTOS SECTION ---- */
    .form-content #section-photos .card-body.p-4,
    .form-content #section-photos .p-md-5 {
        padding: 0.75rem !important;
    }

    .form-content #section-photos .btn-lg {
        padding: 0.5rem 1.25rem !important;
        font-size: 0.9rem !important;
    }

    .form-content #section-photos .btn-lg .fa-lg {
        font-size: 1rem !important;
    }

    /* Photo grid - 2 columns on mobile */
    .form-content #preview .col-12.col-sm-6.col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* ---- MATCHING SECTION ---- */
    #matching-criterion-scope .card-body {
        padding: 0.5rem !important;
    }

    #matching-criterion-scope .matching-criteria-grid .btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    /* Hide icons on matching criteria buttons */
    #matching-criterion-scope .matching-criteria-grid .btn > i:first-child {
        display: none !important;
    }

    /* ---- PROGRESS SIDEBAR (when visible on mobile) ---- */
    #annonce-progress-unified {
        font-size: 0.85rem;
    }

    #annonce-progress-unified .card-body {
        padding: 0.75rem !important;
    }

    #annonce-progress-unified .list-group-item {
        padding: 0.5rem 0.75rem !important;
    }

    /* ---- ALERTS ---- */
    .form-content .alert {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }

    .form-content .alert .fa-2x,
    .form-content .alert .fa-lg {
        font-size: 1rem !important;
    }

    /* ---- INPUT GROUPS ---- */
    .form-content .input-group-lg {
        font-size: 0.9rem !important;
    }

    .form-content .input-group-lg .form-control,
    .form-content .input-group-lg .input-group-text {
        padding: 0.5rem 0.75rem !important;
    }

    /* ---- SURFACE SECTION ---- */
    .form-content section.mb-7 {
        margin-bottom: 1.5rem !important;
    }

    /* ---- HR SPACERS ---- */
    .form-content hr.my-5 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* ---- ICON CIRCLES ---- */
    .form-content .icon-circle {
        width: 32px !important;
        height: 32px !important;
    }

    .form-content .icon-circle i {
        font-size: 0.75rem !important;
    }

    /* ---- TOUCH FEEDBACK ---- */
    .form-content .selectable-card:active,
    .form-content .lift:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
    }

    /* ---- VIDEO SURVEILLANCE SECTION ---- */
    .form-content #videosurveillanceDetailsContainer .collapse.show {
        margin-top: 0.5rem;
    }

    /* ---- ACCORDION PHOTOS ---- */
    .form-content .accordion-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .form-content .accordion-body {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
    }
}

/* Scrollable dropdown for low viewport heights */
#user-navigation-dropdown + .dropdown-menu {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#user-navigation-dropdown + .dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

#user-navigation-dropdown + .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#user-navigation-dropdown + .dropdown-menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#user-navigation-dropdown + .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Project modal: allow Mapbox geocoder dropdown to overflow */
#new-projet .modal-content,
#new-projet .modal-body,
[id^="edit-projet-"] .modal-content,
[id^="edit-projet-"] .modal-body {
    overflow: visible !important;
}

/* Project modal: hide the FAQ help link from _filtres (moved to section header in the modal) */
#new-projet a:has(.fa-circle-question),
[id^="edit-projet-"] a:has(.fa-circle-question) {
    display: none;
}

/* Project modal: fix Mapbox geocoder layout inside modal input-group */
#new-projet .geocoder-wrapper,
[id^="edit-projet-"] .geocoder-wrapper {
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0 !important;
}

/* Project modal: remove min-width on filter input-groups that overflows mobile */
#new-projet .input-group[style*="min-width"],
[id^="edit-projet-"] .input-group[style*="min-width"] {
    min-width: 0 !important;
}

#new-projet .geocoder-wrapper .mapboxgl-ctrl-geocoder,
[id^="edit-projet-"] .geocoder-wrapper .mapboxgl-ctrl-geocoder {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
}

#new-projet .geocoder-wrapper .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input,
[id^="edit-projet-"] .geocoder-wrapper .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
    padding: 0.5rem 0.75rem 0.5rem 0;
    font-size: 0.925rem;
    line-height: 1.5;
    width: 100%;
}