/* ================================================================
   amn-annonces.css — Styles pour la page des Annonces
   Version 2.7.1 — double-check & corrections de bugs
   ================================================================
   CORRECTIONS v2.7.1 :
   - [BUG-H] Double règle .im-annonce-card .im-photo-container :
     position:relative fusionné dans la règle d'origine (ligne 44)
     au lieu d'être ajouté en doublon à la fin du fichier.
   - [NEW-4] Styles dot de présence (.amn-presence-dot) consolidés
     dans le bloc dédié (inchangés fonctionnellement).
   ================================================================ */

/* ================================================================
   GRILLE DES ANNONCES
   ================================================================ */
.im-annonces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2em;
    margin-top: 2em;
}

/* ================================================================
   CARTE D'ANNONCE
   ================================================================ */
.im-annonce-card {
    background-color: var(--im-blanc);
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.im-annonce-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/*
 * [BUG-H CORRIGÉ] position:relative fusionné ici — ancre pour
 * .amn-presence-dot (position:absolute). La version v2.7.0 avait
 * une règle dupliquée en bas du fichier qui créait une redondance
 * et une confusion de cascade. Une seule règle, source de vérité.
 */
.im-annonce-card .im-photo-container {
    position: relative; /* ancre pour amn-presence-dot */
    width: 100%;
    height: 250px;
    background-color: #eee;
    overflow: hidden;
}

.im-annonce-card .im-photo-flou {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

.im-annonce-card .im-card-content {
    padding: 1.5em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.im-card-content h3 {
    color: var(--im-rose);
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.3em;
}

.im-card-content p {
    margin: 0.3em 0;
    color: #555;
    line-height: 1.5;
}

.im-card-content p strong {
    color: var(--im-gris-fonce);
}

.im-card-content .im-description-preview {
    font-style: italic;
    color: #666;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-card-content .im-see-more {
    margin-top: auto;
    padding-top: 1em;
    text-align: right;
}

.im-see-more a {
    color: var(--im-rose);
    text-decoration: none;
    font-weight: bold;
}

.im-see-more a:hover {
    text-decoration: underline;
}

/* ================================================================
   CARD ACTIONS — "Voir le profil complet" + favori
   ================================================================ */
.im-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.im-btn-voir-profil {
    color: var(--im-rose);
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
    flex: 1;
}

.im-btn-voir-profil:hover {
    color: #c0134d;
    text-decoration: underline;
}

/* ================================================================
   FILTRES DES ANNONCES
   ================================================================ */
.im-filters-container {
    background-color: #f8f9fa;
    padding: 1.5em;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    margin-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: flex-end;
}

.im-filters-container h3 {
    width: 100%;
    margin: 0 0 0.5em 0;
    font-size: 1.5em;
    color: var(--im-gris-fonce);
    flex-basis: 100%;
}

.im-filters-container .im-filter-group {
    flex: 1 1 220px;
}

.im-filters-container label {
    font-weight: 600;
    color: var(--im-rose);
    display: block;
    margin-bottom: 0.5em;
    font-size: 0.9em;
}

.im-filters-container input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-sizing: border-box;
}

.im-filters-container input[type="text"]:focus {
    border-color: var(--im-rose);
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25);
    outline: none;
}

.im-filters-container select,
.im-filters-container input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.im-filters-container button {
    flex-basis: auto;
    padding: 12px 25px;
    margin-bottom: 0;
}

.im-filters-container .im-filter-buttons {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-basis: auto;
    margin-bottom: 0;
}

.im-button-reset {
    color: var(--im-gris-fonce);
    text-decoration: underline;
    font-size: 0.9em;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
}

.im-button-reset:hover {
    color: var(--im-rose);
}

/* ================================================================
   RÉSULTATS DE RECHERCHE
   ================================================================ */
.im-search-results-count {
    font-size: 1.4em;
    color: var(--im-gris-fonce);
    text-align: center;
    margin: 0 0 1.5em 0;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}

mark.im-highlight {
    background-color: #fff3cd;
    color: #5d4700;
    padding: 0.1em 0.2em;
    border-radius: 3px;
}

/* ================================================================
   PAGINATION — styles complets (absents de amn-dashboard.css
   pour la page /annonces/).
   border-color inclus dans transition [BUG-7 héritage v2.5.1].
   ================================================================ */
.im-pagination {
    margin-top: 3em;
    text-align: center;
    clear: both;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.im-pagination .page-numbers {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    background-color: var(--im-blanc);
    border: 1px solid var(--im-vert-clair);
    color: var(--im-rose);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.im-pagination .page-numbers:hover {
    background-color: var(--im-rose);
    color: var(--im-blanc);
    border-color: var(--im-rose);
}

.im-pagination .page-numbers.current {
    background-color: var(--im-rose);
    color: var(--im-blanc);
    border-color: var(--im-rose);
    cursor: default;
}

.im-pagination .page-numbers.dots {
    border: none;
    background: none;
    padding: 10px 5px;
    align-self: flex-end;
}

/* ================================================================
   PAGE DÉTAIL DE L'ANNONCE (single-annonce)
   ================================================================ */
.im-single-annonce-container {
    max-width: 900px;
    margin: 2em auto;
    background: var(--im-blanc);
    padding: 2em;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.im-single-annonce-header {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 2px solid var(--im-vert-clair);
}

@media (min-width: 600px) {
    .im-single-annonce-header {
        flex-direction: row;
    }
}

.im-single-annonce-header .im-photo-container {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 5px solid var(--im-bleu-ciel);
    background-color: #e0e0e0;
}

.im-single-annonce-header .im-photo-flou {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
}

.im-single-annonce-header .im-header-info {
    text-align: center;
}

@media (min-width: 600px) {
    .im-single-annonce-header .im-header-info {
        text-align: left;
    }
}

.im-header-info h2 {
    color: var(--im-rose);
    margin: 0 0 10px 0;
}

.im-header-info .im-verified-badge {
    display: inline-block;
    background: #4CAF50;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
}

.im-single-annonce-actions {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 1.5em;
    align-items: center;
}

@media (min-width: 600px) {
    .im-single-annonce-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.im-single-annonce-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
    margin-top: 2em;
}

@media (min-width: 768px) {
    .im-single-annonce-details {
        grid-template-columns: 1fr 1fr;
    }
}

.im-detail-section {
    background: var(--im-gris-clair);
    padding: 1.5em;
    border-radius: 10px;
}

.im-detail-section h3 {
    color: var(--im-rose);
    margin-top: 0;
    border-bottom: 2px solid var(--im-bleu-ciel);
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

.im-detail-section p {
    margin: 0.5em 0;
    line-height: 1.6;
}

.im-detail-section p strong {
    color: var(--im-gris-fonce);
    min-width: 150px;
    display: inline-block;
}

/* ================================================================
   BOUTON FAVORI
   ================================================================ */
.amn-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--im-rose);
    color: var(--im-rose);
    border-radius: 50px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
    line-height: 1;
    text-decoration: none;
}

.amn-fav-btn:hover {
    background: var(--im-rose);
    color: #fff;
    transform: scale(1.08);
}

.amn-fav-btn.is-fav {
    background: var(--im-rose);
    color: #fff;
}

.amn-fav-btn.is-fav:hover {
    background: #c0134d;
    border-color: #c0134d;
}

.amn-fav-icon {
    pointer-events: none;
}

/* ================================================================
   FAVORIS DASHBOARD
   ================================================================ */
.amn-favoris-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.amn-fav-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.amn-fav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.amn-fav-item img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    filter: blur(4px);
    border: 3px solid var(--im-vert-clair);
}

.amn-fav-item-info {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

.amn-no-favoris {
    text-align: center;
    color: #aaa;
    padding: 30px;
    font-style: italic;
}

/* ================================================================
   BADGE DE COMPATIBILITÉ
   ================================================================ */
.amn-compat-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--compat-color, #888);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    margin-top: 8px;
    font-size: 12px;
    min-width: 80px;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    font-weight: 600;
}

.amn-compat-score {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.amn-compat-label {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    opacity: 0.95;
    white-space: nowrap;
    margin-top: 2px;
}

.amn-compat-badge--excellent { background: #27ae60 !important; }
.amn-compat-badge--bon       { background: #2980b9 !important; }
.amn-compat-badge--moyen     { background: #f39c12 !important; }
.amn-compat-badge--faible    { background: #e74c3c !important; }

/* ================================================================
   BOUTON SUPPRIMER (admin)
   ================================================================ */
.im-admin-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f5c6cb;
}

.im-delete-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #c0392b;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.02em;
}

.im-delete-profile-btn::before {
    content: '\2715';
    font-size: 12px;
    font-weight: 900;
}

.im-delete-profile-btn:hover:not(:disabled) {
    background: #922b21;
    transform: translateY(-1px);
}

.im-delete-profile-btn:active  { transform: translateY(0); }
.im-delete-profile-btn:disabled { background: #aaa; cursor: not-allowed; transform: none; }

/* ================================================================
   BARRE UTILISATEUR CONNECTÉ
   ================================================================ */
.amn-user-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(168,230,207,0.22), rgba(189,228,244,0.22));
    border: 1px solid rgba(168,230,207,0.55);
    border-radius: 10px;
    flex-wrap: wrap;
}

.amn-user-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Dot vert pulsant dans la topbar (indicateur session active) */
.amn-user-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #2ecc71;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    animation: amn-pulse-dot 2s infinite;
    flex-shrink: 0;
}

@keyframes amn-pulse-dot {
    0%   { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0);   }
}

.amn-user-topbar-label {
    font-size: 0.85em;
    color: #777;
    white-space: nowrap;
}

.amn-user-name-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--im-gris-fonce);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    transition: color 0.2s;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.amn-user-name-btn:hover { color: var(--im-rose); }

/* ================================================================
   BOUTON REFRESH
   ================================================================ */
.amn-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--im-blanc);
    border: 1.5px solid #ced4da;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--im-gris-fonce);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.amn-refresh-btn:hover {
    background: var(--im-vert-clair);
    border-color: #7dc9a8;
    transform: translateY(-1px);
}

.amn-refresh-btn:active { transform: translateY(0); }

.amn-refresh-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Rotation continue via @keyframes (pas transition one-shot) */
@keyframes amn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.amn-refresh-btn.is-spinning svg {
    animation: amn-spin 0.6s linear infinite;
}

/* ================================================================
   MODAL DÉCONNEXION
   visibility/opacity (pas display:none) → transitions effectives.
   ================================================================ */
.amn-logout-overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99998;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.amn-logout-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.amn-logout-modal {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.90);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    background: var(--im-blanc);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
    padding: 2em 2.2em;
    width: 90%;
    max-width: 380px;
    text-align: center;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.amn-logout-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.amn-logout-modal-icon {
    font-size: 2.5em;
    margin-bottom: 0.3em;
    display: block;
}

.amn-logout-modal h4 {
    color: var(--im-rose);
    margin: 0 0 0.4em 0;
    font-size: 1.15em;
}

.amn-logout-modal p {
    color: #666;
    font-size: 0.92em;
    margin: 0 0 1.4em 0;
    line-height: 1.55;
}

.amn-logout-modal .amn-modal-username {
    font-weight: 700;
    color: var(--im-gris-fonce);
}

.amn-logout-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.amn-logout-confirm-btn {
    background: var(--im-rose);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-decoration: none;
    display: inline-block;
}

.amn-logout-confirm-btn:hover {
    background: #c0134d;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.amn-logout-cancel-btn {
    background: #f0f0f0;
    color: var(--im-gris-fonce);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.amn-logout-cancel-btn:hover { background: #e2e2e2; }

/* ================================================================
   [NEW-4] DOT DE PRÉSENCE SUR LES CARTES ANNONCES
   Affiché uniquement pour les utilisateurs connectés (PHP).
   Trois états : online (vert pulsant), recent (jaune), offline (gris).
   Positionné en absolu dans .im-photo-container (position:relative
   défini dans la règle de base fusionnée ci-dessus — [BUG-H corrigé]).
   ================================================================ */

/* Base commune */
.amn-presence-dot {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid #fff; /* halo blanc pour lisibilité sur photo flouée */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 2;
    display: block;
    cursor: default;
}

/* En ligne : vert pulsant (< 15 min) */
.amn-presence-dot.amn-presence--online {
    background-color: #2ecc71;
    animation: amn-presence-pulse 2s infinite;
}

@keyframes amn-presence-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0.70), 0 1px 4px rgba(0,0,0,0.20); }
    70%  { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0),    0 1px 4px rgba(0,0,0,0.20); }
    100% { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0),    0 1px 4px rgba(0,0,0,0.20); }
}

/* Récemment actif : jaune/ambre (15 – 120 min) */
.amn-presence-dot.amn-presence--recent {
    background-color: #f39c12;
}

/* Hors ligne : gris (> 120 min ou jamais vu) */
.amn-presence-dot.amn-presence--offline {
    background-color: #bdc3c7;
}

/* ================================================================
   MESSAGES "AUCUN RÉSULTAT"
   ================================================================ */
.im-no-results {
    text-align: center;
    color: #777;
    font-style: italic;
    padding: 2em 0;
    font-size: 1.05em;
}

/* ================================================================
   RESPONSIVE MOBILE — dérivé du desktop (source de vérité)
   ================================================================ */
@media (max-width: 768px) {
    .im-filters-container .im-filter-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 1em;
    }

    .im-button-reset {
        text-align: center;
        padding: 8px;
    }

    .im-card-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .amn-fav-btn {
        width: 100%;
        justify-content: center;
    }

    /* Label "Connecté(e) en tant que :" masqué sur mobile */
    .amn-user-topbar-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .amn-compat-score { font-size: 17px; }
    .amn-compat-label { font-size: 9px; }

    .im-delete-profile-btn {
        font-size: 12px;
        padding: 6px 10px;
        width: 100%;
        justify-content: center;
    }

    .amn-user-topbar {
        padding: 6px 10px;
        gap: 6px;
    }

    .amn-user-name-btn {
        font-size: 0.85em;
        max-width: 130px;
    }

    /* Texte "Refresh" masqué : icône seule sur très petit écran */
    .amn-refresh-label {
        display: none;
    }

    .amn-refresh-btn {
        padding: 7px 10px;
    }

    .im-pagination .page-numbers {
        padding: 8px 11px;
        font-size: 0.88rem;
    }

    /* Dot de présence légèrement plus petit sur mobile */
    .amn-presence-dot {
        width: 12px;
        height: 12px;
        top: 8px;
        left: 8px;
        border-width: 2px;
    }
}

/* ================================================================
   [FIX-1] BOUTON "PRÉCÉDENT" — page détail d'une annonce
   Source de vérité : desktop. Mobile dérivé via media queries.
   ================================================================ */

/* Conteneur wrapper — place le bouton au-dessus du header profil */
.im-single-back-wrapper {
    margin-bottom: 1.25em;
    display: flex;
    align-items: center;
}

/* Bouton Précédent */
.im-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--im-rose);
    color: var(--im-rose);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
    line-height: 1.2;
    /* Évite le décalage sur très petits écrans */
    white-space: nowrap;
    flex-shrink: 0;
}

.im-back-btn:hover {
    background: var(--im-rose);
    color: #fff;
    transform: translateX(-2px);
    border-color: var(--im-rose);
}

.im-back-btn:active {
    transform: translateX(0);
}

.im-back-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.im-back-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.im-back-btn:hover svg {
    transform: translateX(-2px);
}

/* ================================================================
   [FIX-2] BOUTON SCROLL-TO-TOP (flèche vers le haut)
   Injecté dans le DOM par amn-annonces.js.
   Visible uniquement quand la classe .is-visible est ajoutée.
   Source de vérité : desktop. Mobile dérivé via media queries.
   ================================================================ */

.amn-scroll-top-btn {
    /* Positionnement fixe en bas à droite */
    position: fixed;
    bottom: 80px;   /* au-dessus de la bottom-nav PWA si présente */
    right: 20px;
    z-index: 9990;

    /* Apparence */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--im-rose);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(233, 30, 99, 0.35);

    /* Transition d'apparition / disparition */
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;
}

/* État visible — ajouté/retiré par JS via requestAnimationFrame */
.amn-scroll-top-btn.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.amn-scroll-top-btn:hover {
    background: #c0134d;
    box-shadow: 0 6px 20px rgba(192, 19, 77, 0.45);
}

.amn-scroll-top-btn:active {
    transform: scale(0.93);
}

/* Accessibilité clavier — outline visible au focus (Tab) */
.amn-scroll-top-btn:focus {
    outline: none; /* on gère manuellement via focus-visible */
}
.amn-scroll-top-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(233, 30, 99, 0.45);
}

/* Idem pour le bouton Précédent */
.im-back-btn:focus {
    outline: none;
}
.im-back-btn:focus-visible {
    outline: 3px solid var(--im-rose);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(233, 30, 99, 0.18);
}

.amn-scroll-top-btn svg {
    flex-shrink: 0;
    pointer-events: none;
}

/* ================================================================
   RESPONSIVE MOBILE — dérivé desktop (source de vérité)
   ================================================================ */

/* Tablette et mobile ≤ 768px */
@media (max-width: 768px) {
    .im-back-btn {
        padding: 7px 13px;
        font-size: 0.85em;
    }

    .amn-scroll-top-btn {
        bottom: 90px; /* plus d'espace pour la bottom-nav PWA sur mobile */
        right: 14px;
        width: 42px;
        height: 42px;
    }
}

/* Très petits écrans ≤ 480px */
@media (max-width: 480px) {
    .im-back-btn {
        padding: 6px 11px;
        font-size: 0.82em;
        gap: 4px;
    }

    .im-back-btn svg {
        width: 15px;
        height: 15px;
    }

    .amn-scroll-top-btn {
        bottom: 80px;
        right: 10px;
        width: 38px;
        height: 38px;
        box-shadow: 0 3px 10px rgba(233, 30, 99, 0.3);
    }

    .amn-scroll-top-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ================================================================
   PAGES STATIQUES — Aide, Qui sommes-nous, Offline
   Styles partagés par im-page-aide, im-page-qui-sommes-nous,
   im-page-offline. Source de vérité : desktop, mobile dérivé.
   ================================================================ */

/* Conteneur commun à toutes les pages statiques */
.im-static-page-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5em 1.2em 3em;
    line-height: 1.75;
    color: #333;
}

.im-static-page-container h2 {
    color: var(--im-rose);
    font-size: 1.6em;
    margin-bottom: 0.6em;
}

.im-static-page-container h3 {
    color: var(--im-rose);
    font-size: 1.2em;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.im-static-page-container h4 {
    color: #1a1a2e;
    font-size: 1.05em;
    margin-bottom: 0.4em;
}

.im-static-page-container ul,
.im-static-page-container ol {
    padding-left: 1.4em;
    margin-bottom: 1em;
}

.im-static-page-container li {
    margin-bottom: 0.4em;
}

/* Séparateur visuel entre sections */
.im-section-divider {
    border: none;
    border-top: 1px solid #f0e0ea;
    margin: 2em 0;
}

/* ----------------------------------------------------------------
   GRILLE DES BADGES (page-aide)
   Desktop : 2 colonnes. Tablette : 1 colonne.
----------------------------------------------------------------- */
.im-aide-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25em;
    margin-top: 1.25em;
}

.im-aide-badge-card {
    background: #fdf4f8;
    border: 1px solid #f5c6d8;
    border-radius: 10px;
    padding: 1.1em 1.2em;
    transition: box-shadow 0.2s;
}

.im-aide-badge-card:hover {
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.1);
}

/* Badge gratuit — accentuation verte */
.im-aide-badge-card.im-badge-gratuit {
    border-color: #a5d6a7;
    background: #f1f8e9;
}

/* Badge premium — accentuation dorée */
.im-aide-badge-card.im-badge-premium {
    border-color: #ffe082;
    background: #fffde7;
}

.im-aide-badge-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
    margin-bottom: 0.6em;
}

/* Petite étiquette (Offert ! / Le plus économique !) */
.im-badge-tag {
    font-size: 0.75em;
    font-weight: 700;
    background: var(--im-rose);
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.im-aide-badge-card.im-badge-gratuit .im-badge-tag {
    background: #388e3c;
}

.im-aide-badge-card.im-badge-premium .im-badge-tag {
    background: #f9a825;
    color: #1a1a2e;
}

/* ----------------------------------------------------------------
   PAGE OFFLINE — icône + bouton secondaire
----------------------------------------------------------------- */
.im-page-offline .im-button-secondary {
    background: #888 !important;
    color: #fff !important;
}
.im-page-offline .im-button-secondary:hover {
    background: #666 !important;
}

/* ================================================================
   RESPONSIVE MOBILE — dérivé desktop (source de vérité)
   ================================================================ */

@media (max-width: 768px) {
    .im-static-page-container {
        padding: 1em 0.9em 2.5em;
    }

    .im-static-page-container h2 {
        font-size: 1.35em;
    }

    .im-static-page-container h3 {
        font-size: 1.1em;
    }

    /* Grille badges : 1 colonne sur tablette/mobile */
    .im-aide-badge-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .im-static-page-container {
        padding: 0.75em 0.7em 2em;
    }

    .im-static-page-container h2 {
        font-size: 1.2em;
    }

    .im-aide-badge-card {
        padding: 0.9em 1em;
    }

    /* CTA buttons : pleine largeur sur très petit écran */
    .im-static-page-container .im-button {
        width: 100%;
        text-align: center;
    }
}

/* ================================================================
   PAGE AIDE — Sections enrichies v2.8.1
   ================================================================ */

/* Sommaire de navigation interne */
.im-aide-sommaire {
    background: #fdf4f8;
    border-left: 4px solid var(--im-rose);
    border-radius: 0 8px 8px 0;
    padding: 1em 1.25em;
    margin: 1.5em 0;
}
.im-aide-sommaire ul {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
}
.im-aide-sommaire li {
    margin-bottom: 0.25em;
    font-size: 0.95em;
}
.im-aide-sommaire a {
    color: var(--im-rose);
    text-decoration: none;
    font-weight: 600;
}
.im-aide-sommaire a:hover {
    text-decoration: underline;
}

/* ---- Étapes wizard ---- */
.im-aide-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1em;
    margin: 1.25em 0;
}
.im-aide-step-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85em;
    background: #fdf4f8;
    border: 1px solid #f5c6d8;
    border-radius: 10px;
    padding: 1em 1.1em;
}
.im-aide-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--im-rose);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1;
}
.im-aide-step-body strong {
    display: block;
    margin-bottom: 0.3em;
    color: #1a1a2e;
    font-size: 0.97em;
}
.im-aide-step-body p {
    margin: 0;
    font-size: 0.88em;
    color: #555;
    line-height: 1.55;
}

/* ---- Tableau de compatibilité ---- */
.im-aide-compat-table-wrapper {
    overflow-x: auto;
    margin: 1.1em 0;
    border-radius: 8px;
    border: 1px solid #f5c6d8;
}
.im-aide-compat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.im-aide-compat-table th {
    background: var(--im-rose);
    color: #fff;
    padding: 0.7em 1em;
    text-align: left;
    white-space: nowrap;
}
.im-aide-compat-table td {
    padding: 0.65em 1em;
    border-bottom: 1px solid #f5e0ea;
    vertical-align: top;
}
.im-aide-compat-table tr:last-child td {
    border-bottom: none;
}
.im-aide-compat-table tr:nth-child(even) td {
    background: #fdf4f8;
}
.im-compat-pts {
    text-align: center;
    font-weight: 700;
    color: var(--im-rose);
    white-space: nowrap;
}

/* ---- Légende des niveaux ---- */
.im-aide-compat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin: 1em 0;
}
.im-compat-level {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.88em;
}
.im-compat-badge-demo {
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85em;
    white-space: nowrap;
}

/* ---- Tip / Conseil ---- */
.im-aide-tip {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    border-radius: 0 8px 8px 0;
    padding: 0.75em 1.1em;
    font-size: 0.9em;
    color: #5a4000;
    margin: 1em 0;
}

/* ---- Grille vie privée ---- */
.im-aide-privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1em;
    margin: 1.25em 0;
}
.im-aide-privacy-card {
    background: #fdf4f8;
    border: 1px solid #f5c6d8;
    border-radius: 10px;
    padding: 1.1em 1.2em;
    transition: box-shadow 0.2s;
}
.im-aide-privacy-card:hover {
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.1);
}
.im-aide-privacy-icon {
    font-size: 1.6em;
    margin-bottom: 0.35em;
    line-height: 1;
}
.im-aide-privacy-card h4 {
    margin: 0 0 0.4em;
    color: #1a1a2e;
}
.im-aide-privacy-card p {
    margin: 0;
    font-size: 0.88em;
    color: #555;
    line-height: 1.55;
}

/* ---- Badge tags variantes ---- */
.im-badge-tag-green  { background: #388e3c; }
.im-badge-tag-gold   { background: #f9a825; color: #1a1a2e; }

/* ---- FAQ accordion ---- */
.im-aide-faq {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin: 1em 0;
}
.im-faq-item {
    border: 1px solid #f5c6d8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.im-faq-item summary {
    cursor: pointer;
    padding: 0.85em 1.1em;
    font-weight: 600;
    color: #1a1a2e;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    user-select: none;
    transition: background 0.2s;
}
.im-faq-item summary::-webkit-details-marker { display: none; }
.im-faq-item summary::after {
    content: '+';
    font-size: 1.3em;
    font-weight: 400;
    color: var(--im-rose);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.im-faq-item[open] summary {
    background: #fdf4f8;
    color: var(--im-rose);
}
.im-faq-item[open] summary::after {
    content: '−';
}
.im-faq-item summary:hover {
    background: #fdf4f8;
}
.im-faq-item > p {
    padding: 0.75em 1.1em 1em;
    margin: 0;
    font-size: 0.9em;
    color: #444;
    line-height: 1.65;
    border-top: 1px solid #f5c6d8;
}

/* ---- CTA final aide ---- */
.im-aide-cta-final {
    background: #fdf4f8;
    border-radius: 10px;
    padding: 1.5em 1.5em;
    margin-top: 2.5em;
    text-align: center;
}
.im-aide-cta-final p {
    margin: 0 0 1em;
    font-weight: 600;
    color: #1a1a2e;
}
.im-aide-cta-buttons {
    display: flex;
    gap: 0.85em;
    justify-content: center;
    flex-wrap: wrap;
}
.im-button-outline {
    background: transparent !important;
    color: var(--im-rose) !important;
    border: 2px solid var(--im-rose) !important;
}
.im-button-outline:hover {
    background: var(--im-rose) !important;
    color: #fff !important;
}
.im-button-whatsapp {
    background: #25d366 !important;
    color: #fff !important;
    border-color: #25d366 !important;
}
.im-button-whatsapp:hover {
    background: #1da851 !important;
}

/* ================================================================
   PAGE QUI SOMMES-NOUS — Sections enrichies v2.8.1
   ================================================================ */

.im-qsn-intro {
    font-size: 1.05em;
    line-height: 1.75;
    color: #333;
}

/* ---- Stats dynamiques ---- */
.im-qsn-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    margin: 1.75em 0;
}
.im-qsn-stat-card {
    background: var(--im-rose);
    color: #fff;
    border-radius: 10px;
    padding: 1.1em 0.75em;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.im-qsn-stat-num {
    font-size: 1.65em;
    font-weight: 700;
    line-height: 1.1;
}
.im-qsn-stat-label {
    font-size: 0.78em;
    opacity: 0.9;
    line-height: 1.3;
}

/* ---- Piliers ---- */
.im-qsn-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1em;
    margin: 1.25em 0;
}
.im-qsn-pillar-card {
    background: #fdf4f8;
    border: 1px solid #f5c6d8;
    border-radius: 10px;
    padding: 1.25em 1.1em;
    text-align: center;
    transition: box-shadow 0.2s;
}
.im-qsn-pillar-card:hover {
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.1);
}
.im-qsn-pillar-icon {
    font-size: 2em;
    margin-bottom: 0.4em;
    line-height: 1;
}
.im-qsn-pillar-card h4 {
    color: var(--im-rose);
    margin: 0 0 0.5em;
    font-size: 1.05em;
}
.im-qsn-pillar-card p {
    margin: 0;
    font-size: 0.88em;
    color: #555;
    line-height: 1.55;
}

/* ---- Approche ---- */
.im-qsn-approach-list {
    padding-left: 1.3em;
}
.im-qsn-approach-list li {
    margin-bottom: 0.75em;
    line-height: 1.65;
}

/* ---- Tableau comparatif ---- */
.im-qsn-compare-table-wrapper {
    overflow-x: auto;
    margin: 1.1em 0;
    border-radius: 8px;
    border: 1px solid #f5c6d8;
}
.im-qsn-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.im-qsn-compare-table th {
    background: #f5c6d8;
    color: #1a1a2e;
    padding: 0.7em 1em;
    text-align: center;
    font-weight: 700;
}
.im-qsn-compare-table th:first-child {
    text-align: left;
}
.im-qsn-col-amn {
    background: #fdf4f8;
    font-weight: 700;
    text-align: center;
}
.im-qsn-compare-table td {
    padding: 0.65em 1em;
    border-bottom: 1px solid #f5e0ea;
    text-align: center;
}
.im-qsn-compare-table td:first-child {
    text-align: left;
}
.im-qsn-compare-table tr:last-child td {
    border-bottom: none;
}
.im-qsn-compare-table tr:nth-child(even) td {
    background: #fafafa;
}
.im-qsn-compare-table tr:nth-child(even) .im-qsn-col-amn {
    background: #faeef4;
}

/* ---- Engagement ---- */
.im-qsn-engagement-list {
    padding-left: 1.3em;
}
.im-qsn-engagement-list li {
    margin-bottom: 0.5em;
    font-size: 0.95em;
    line-height: 1.6;
}
.im-qsn-engagement-list li::marker {
    color: var(--im-rose);
}

/* ---- Conclusion ---- */
.im-qsn-conclusion {
    font-style: italic;
    color: #444;
    font-size: 1.02em;
    line-height: 1.75;
    margin-bottom: 2em;
}

/* ---- CTA block ---- */
.im-qsn-cta-block {
    display: flex;
    gap: 0.85em;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5em;
}

/* ================================================================
   RESPONSIVE — Dérivé mobile (source de vérité : desktop)
   ================================================================ */

@media (max-width: 900px) {
    .im-qsn-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .im-aide-steps        { grid-template-columns: 1fr; }
    .im-aide-privacy-grid { grid-template-columns: 1fr; }
    .im-qsn-pillars       { grid-template-columns: 1fr; }
    .im-qsn-stats         { grid-template-columns: repeat(2, 1fr); }

    .im-aide-compat-legend {
        flex-direction: column;
        gap: 0.5em;
    }
    .im-qsn-pillar-card   { text-align: left; }
    .im-qsn-pillar-icon   { display: inline; margin-right: 0.4em; }
}

@media (max-width: 480px) {
    .im-qsn-stats {
        grid-template-columns: 1fr 1fr;
    }
    .im-qsn-stat-num  { font-size: 1.35em; }
    .im-aide-cta-buttons,
    .im-qsn-cta-block { flex-direction: column; }
    .im-aide-cta-buttons .im-button,
    .im-qsn-cta-block .im-button {
        width: 100%;
        text-align: center;
    }
    .im-aide-sommaire { padding: 0.75em 1em; }
    .im-faq-item summary { font-size: 0.9em; }
}

/* ================================================================
   [BIZ-10] BADGE INSCRIT EN ATTENTE DE VÉRIFICATION
   Styles pour l'onglet #mes-badges du tableau de bord.
   Source de vérité : desktop. Mobile dérivé.
   ================================================================ */

/* Statut "vérification en cours" sous le titre du profil */
.im-badge-pending-status {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    border-radius: 0 8px 8px 0;
    padding: 0.85em 1.1em;
    margin: 0.6em 0;
    font-size: 0.95em;
    color: #5a4000;
    line-height: 1.65;
}

/* Séparateur dans l'onglet badge */
.im-badge-hr {
    border: none;
    border-top: 1px solid #f0e0ea;
    margin: 1.25em 0;
}

/* Bloc d'avertissement badge en attente */
.im-badge-pending-notice {
    display: flex;
    gap: 1em;
    align-items: flex-start;
    background: #fdf4f8;
    border: 2px dashed #e84393;
    border-radius: 10px;
    padding: 1.25em 1.3em;
    margin-top: 0.75em;
}

.im-badge-pending-icon {
    font-size: 2em;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.im-badge-pending-body {
    flex: 1;
    min-width: 0;
}

.im-badge-pending-title {
    color: #c0134d;
    margin: 0 0 0.65em;
    font-size: 1em;
}

.im-badge-pending-body p {
    margin: 0 0 0.75em;
    font-size: 0.92em;
    color: #444;
    line-height: 1.65;
}

.im-badge-pending-body p:last-child {
    margin-bottom: 0;
}

.im-badge-pending-steps {
    background: #fff;
    border-radius: 6px;
    padding: 0.7em 0.9em;
    border: 1px solid #f5c6d8;
}

.im-badge-pending-steps span {
    display: block;
    margin-top: 0.3em;
    font-size: 0.9em;
}

/* Lien WhatsApp inline dans le bloc pending */
.im-badge-whatsapp-link {
    color: #25d366;
    font-weight: 700;
    text-decoration: none;
}
.im-badge-whatsapp-link:hover {
    text-decoration: underline;
}

/* ================================================================
   RESPONSIVE — dérivé mobile
   ================================================================ */

@media (max-width: 600px) {
    .im-badge-pending-notice {
        flex-direction: column;
        gap: 0.6em;
        padding: 1em;
    }

    .im-badge-pending-icon {
        font-size: 1.6em;
    }

    .im-badge-pending-body p {
        font-size: 0.88em;
    }
}

@media (max-width: 380px) {
    .im-badge-pending-notice {
        padding: 0.85em 0.8em;
    }
}

/* ================================================================
   [VIEWS-01] BADGE DE VUES — coin supérieur droit de la photo
   ================================================================ */

.amn-views-badge {
    position:       absolute;
    top:            8px;
    right:          8px;
    display:        flex;
    align-items:    center;
    gap:            4px;
    background:     rgba(0, 0, 0, 0.55);
    color:          #fff;
    font-size:      11px;
    font-weight:    600;
    padding:        3px 7px;
    border-radius:  20px;
    pointer-events: none; /* Le badge ne capte pas les clics */
    z-index:        3;
    line-height:    1.2;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.amn-views-badge svg {
    flex-shrink: 0;
    opacity:     0.9;
}

.amn-views-count {
    letter-spacing: 0.2px;
}

/* Admin : badge éditable (double-clic dans le backend) */
.amn-views-badge.is-editable {
    cursor:       pointer;
    border:       1px dashed rgba(255,255,255,0.5);
    pointer-events: auto;
}
.amn-views-badge.is-editable:hover {
    background: rgba(0,0,0,0.75);
}

/* ================================================================
   [BOOST-01] BOUTON BOOSTER dans la barre utilisateur
   ================================================================ */

.amn-topbar-right {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.amn-boost-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    background:     linear-gradient(135deg, #f39c12, #e67e22);
    color:          #fff;
    border:         none;
    border-radius:  20px;
    padding:        7px 14px;
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    transition:     transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s;
    box-shadow:     0 2px 8px rgba(230,126,34,0.4);
    white-space:    nowrap;
}

.amn-boost-btn:hover {
    transform:  translateY(-1px);
    box-shadow: 0 4px 14px rgba(230,126,34,0.55);
}

.amn-boost-btn:active {
    transform: translateY(0);
}

.amn-boost-label {
    /* masqué sur très petits écrans, l'icône seule suffit */
}

@media (max-width: 380px) {
    .amn-boost-label { display: none; }
    .amn-boost-btn   { padding: 7px 10px; }
}

/* ================================================================
   [BOOST-01] MODAL BOOSTER
   ================================================================ */

.amn-boost-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.65);
    z-index:    10050;
    display:    none;
    cursor:     default;
}
.amn-boost-modal-overlay.is-open { display: block; }

.amn-boost-modal {
    position:        fixed;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%) scale(0.95);
    opacity:         0;
    transition:      transform 0.2s ease, opacity 0.2s ease;
    background:      #fff;
    border-radius:   14px;
    padding:         28px 28px 24px;
    max-width:       440px;
    width:           92%;
    z-index:         10051;
    box-shadow:      0 8px 32px rgba(0,0,0,0.22);
    pointer-events:  none;
}

.amn-boost-modal.is-open {
    transform:      translate(-50%, -50%) scale(1);
    opacity:        1;
    pointer-events: auto;
}

.amn-boost-modal-icon {
    display:     block;
    text-align:  center;
    font-size:   2.4em;
    margin-bottom: 8px;
}

.amn-boost-modal h4 {
    text-align:    center;
    font-size:     1.2em;
    margin:        0 0 16px;
    color:         #e67e22;
}

.amn-boost-modal-body {
    font-size:   14px;
    line-height: 1.6;
    color:       #444;
    margin-bottom: 16px;
}

.amn-boost-modal-body p {
    margin: 0 0 10px;
}

.amn-boost-position {
    background:    #fef9f0;
    border-left:   3px solid #f39c12;
    padding:       10px 12px;
    border-radius: 4px;
}

.amn-boost-credits {
    background:    #f0fef4;
    border-left:   3px solid #27ae60;
    padding:       8px 12px;
    border-radius: 4px;
}

.amn-boost-warning {
    background:    #fff8e6;
    border-left:   3px solid #e67e22;
    padding:       8px 12px;
    border-radius: 4px;
    font-size:     13px;
}

.amn-boost-no-badge {
    background:    #fef0f0;
    border-left:   3px solid #e74c3c;
    padding:       10px 12px;
    border-radius: 4px;
}

.amn-boost-aide-link {
    color:           #E91E63;
    font-weight:     700;
    text-decoration: none;
}
.amn-boost-aide-link:hover { text-decoration: underline; }

.amn-boost-modal-actions {
    display:        flex;
    gap:            10px;
    justify-content: center;
    margin-top:     4px;
}

.amn-boost-confirm-btn {
    background:    linear-gradient(135deg, #f39c12, #e67e22);
    color:         #fff;
    border:        none;
    border-radius: 22px;
    padding:       10px 22px;
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    transition:    opacity 0.2s;
}
.amn-boost-confirm-btn:hover   { opacity: 0.88; }
.amn-boost-confirm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.amn-boost-cancel-btn {
    background:    #f5f5f5;
    color:         #555;
    border:        1px solid #ddd;
    border-radius: 22px;
    padding:       10px 22px;
    font-size:     14px;
    cursor:        pointer;
    transition:    background 0.2s;
}
.amn-boost-cancel-btn:hover { background: #eee; }

.amn-boost-feedback {
    margin-top:  12px;
    font-size:   13px;
    text-align:  center;
    display:     none;
    line-height: 1.5;
}

/* ── Mobile : modal en bottom sheet ── */
@media (max-width: 600px) {
    .amn-boost-modal {
        top:           auto;
        bottom:        0;
        left:          0;
        right:         0;
        transform:     translateY(20px);
        opacity:       0;
        border-radius: 18px 18px 0 0;
        max-width:     100%;
        width:         100%;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .amn-boost-modal.is-open {
        transform: translateY(0);
        opacity:   1;
    }

    .amn-boost-modal-actions {
        flex-direction: column;
    }

    .amn-boost-confirm-btn,
    .amn-boost-cancel-btn {
        width: 100%;
    }
}

/* ================================================================
   [PRIVACY-01] BOUTON PRIVACY STATUS (Public / Privé)
   Apparaît sur la même ligne que le bouton Booster.
   Desktop = source de vérité → mobile dérivé via media queries.
   ================================================================ */

/* --- Bouton base --- */
.amn-privacy-status-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    border:         2px solid transparent;
    border-radius:  20px;
    padding:        7px 14px;
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    transition:     background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    white-space:    nowrap;
    line-height:    1;
}

/* --- État PUBLIC → contour vert, fond transparent --- */
.amn-privacy-status-btn--public {
    background:   transparent;
    border-color: #27ae60;
    color:        #27ae60;
}
.amn-privacy-status-btn--public:hover {
    background: rgba(39,174,96,0.1);
    transform:  translateY(-1px);
}

/* --- État PRIVÉ → fond rouge discret, texte rouge --- */
.amn-privacy-status-btn--prive {
    background:   rgba(192,57,43,0.1);
    border-color: #c0392b;
    color:        #c0392b;
}
.amn-privacy-status-btn--prive:hover {
    background: rgba(192,57,43,0.2);
    transform:  translateY(-1px);
}

/* --- Booster grisé quand profil Privé --- */
.amn-boost-btn--disabled,
.amn-boost-btn[disabled] {
    opacity:        0.4 !important;
    cursor:         not-allowed !important;
    pointer-events: none !important; /* Le wrapper parent capte les events */
    filter:         grayscale(100%);
}

/* Wrapper invisible qui reçoit hover/clic à la place du bouton désactivé */
.amn-boost-wrapper--disabled {
    display:        inline-flex;
    align-items:    center;
    cursor:         not-allowed;
    position:       relative;
}
.amn-boost-wrapper--disabled:focus {
    outline: 2px solid #e67e22;
    border-radius: 20px;
}

/* --- Label icône masqué sur très petits écrans --- */
.amn-privacy-label {
    /* visible par défaut */
}
@media (max-width: 380px) {
    .amn-privacy-label  { display: none; }
    .amn-privacy-status-btn { padding: 7px 10px; }
}

/* ================================================================
   [PRIVACY-01] MODALS PRIVACY (Public→Privé  &  Privé→Public)
   Réutilise le pattern visuel des modals Boost existants.
   ================================================================ */

.amn-privacy-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.65);
    z-index:    10060;
    display:    none;
}
.amn-privacy-modal-overlay.is-open {
    display: block;
}

.amn-privacy-modal {
    position:      fixed;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -48%);
    opacity:       0;
    background:    #fff;
    border-radius: 16px;
    box-shadow:    0 20px 60px rgba(0,0,0,0.25);
    padding:       32px 28px 24px;
    width:         min(480px, 94vw);
    max-height:    90vh;
    overflow-y:    auto;
    z-index:       10061;
    display:       none;
    transition:    transform 0.25s ease, opacity 0.25s ease;
    text-align:    center;
}
.amn-privacy-modal.is-open {
    display:   block;
    transform: translate(-50%, -50%);
    opacity:   1;
}

.amn-privacy-modal-icon {
    display:     block;
    font-size:   36px;
    margin-bottom: 10px;
}

.amn-privacy-modal h4 {
    margin:      0 0 14px;
    font-size:   18px;
    font-weight: 700;
    color:       #2c3e50;
}

.amn-privacy-modal-body p {
    margin:    0 0 10px;
    font-size: 14px;
    color:     #555;
    line-height: 1.5;
}

.amn-privacy-modal-list {
    list-style:  none;
    padding:     0;
    margin:      12px 0;
    text-align:  left;
}
.amn-privacy-modal-list li {
    font-size:   13px;
    color:       #444;
    padding:     4px 0;
    line-height: 1.5;
}

.amn-privacy-modal-note {
    font-size:   12px !important;
    color:       #888 !important;
    font-style:  italic;
    margin-top:  12px !important;
}

.amn-privacy-modal-actions {
    display:         flex;
    gap:             10px;
    justify-content: center;
    margin-top:      20px;
    flex-wrap:       wrap;
}

/* Bouton "Oui" — version Privé (rouge) */
.amn-privacy-confirm-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      linear-gradient(135deg, #c0392b, #e74c3c);
    color:           #fff !important;
    border:          none;
    border-radius:   20px;
    padding:         10px 22px;
    font-size:       14px;
    font-weight:     700;
    cursor:          pointer;
    text-decoration: none;
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow:      0 2px 10px rgba(192,57,43,0.4);
}
.amn-privacy-confirm-btn:hover {
    transform:  translateY(-1px);
    box-shadow: 0 4px 16px rgba(192,57,43,0.55);
}

/* Bouton "Oui" — version Public (vert) */
.amn-privacy-confirm-btn--public {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 2px 10px rgba(39,174,96,0.4);
}
.amn-privacy-confirm-btn--public:hover {
    box-shadow: 0 4px 16px rgba(39,174,96,0.55);
}

/* Bouton "Non / Annuler" */
.amn-privacy-cancel-btn {
    background:   transparent;
    border:       2px solid #bdc3c7;
    border-radius: 20px;
    padding:      10px 22px;
    font-size:    14px;
    font-weight:  600;
    color:        #7f8c8d;
    cursor:       pointer;
    transition:   border-color 0.15s ease, color 0.15s ease;
}
.amn-privacy-cancel-btn:hover {
    border-color: #95a5a6;
    color:        #555;
}

/* ── Mobile : modal en bottom sheet ── */
@media (max-width: 600px) {
    .amn-privacy-modal {
        top:           auto;
        bottom:        0;
        left:          0;
        right:         0;
        transform:     translateY(20px);
        opacity:       0;
        border-radius: 18px 18px 0 0;
        max-width:     100%;
        width:         100%;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .amn-privacy-modal.is-open {
        transform: translateY(0);
        opacity:   1;
    }
    .amn-privacy-modal-actions {
        flex-direction: column;
    }
    .amn-privacy-confirm-btn,
    .amn-privacy-cancel-btn {
        width: 100%;
        text-align: center;
    }
}

/* ================================================================
   [BOOST-WHY] BLOC "POURQUOI BOOSTER ?" dans la modale Boost
   Affiché systématiquement en tête du contenu de la modale.
   Desktop = source de vérité → mobile dérivé.
   ================================================================ */

.amn-boost-why {
    background:    linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
    border:        1.5px solid #f0c040;
    border-radius: 10px;
    padding:       14px 16px 12px;
    margin-bottom: 16px;
    text-align:    left;
}

.amn-boost-why-title {
    margin:      0 0 10px;
    font-size:   14px;
    font-weight: 700;
    color:       #7a5c00;
    line-height: 1.3;
}

.amn-boost-why-list {
    list-style:  none;
    padding:     0;
    margin:      0;
}

.amn-boost-why-list li {
    font-size:   13px;
    color:       #555;
    padding:     4px 0;
    line-height: 1.5;
    border-bottom: 1px dashed #f0d070;
}

.amn-boost-why-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Message "obtenir un badge" + pourquoi pour utilisateurs sans badge */
.amn-boost-no-badge-why {
    margin-top:  10px;
    font-size:   12px;
    color:       #666;
    font-style:  italic;
    line-height: 1.5;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .amn-boost-why {
        padding: 12px 12px 10px;
    }
    .amn-boost-why-title {
        font-size: 13px;
    }
    .amn-boost-why-list li {
        font-size: 12px;
    }
}

/* ================================================================
   ASTUCES — .im-aide-astuces-block
   Blocs d'astuces actionnables dans page-aide.php et page-qui-sommes-nous.php.
   Apparaissent après les conseils (💡) dans chaque section.
   Desktop = source de vérité → mobile dérivé.
   ================================================================ */

.im-aide-astuces-block {
    background:    linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
    border:        1.5px solid #2980b9;
    border-left:   4px solid #2980b9;
    border-radius: 10px;
    padding:       16px 20px 14px;
    margin:        18px 0 24px;
}

.im-aide-astuces-title {
    margin:      0 0 12px;
    font-size:   15px;
    font-weight: 700;
    color:       #1a5276;
    line-height: 1.3;
}

.im-aide-astuces-block ul {
    list-style:  none;
    padding:     0;
    margin:      0;
}

.im-aide-astuces-block li {
    position:    relative;
    padding:     8px 0 8px 14px;
    font-size:   13.5px;
    color:       #2c3e50;
    line-height: 1.6;
    border-bottom: 1px solid rgba(41,128,185,0.12);
}

.im-aide-astuces-block li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.im-aide-astuces-block li::before {
    content:     '→';
    position:    absolute;
    left:        0;
    top:         8px;
    color:       #2980b9;
    font-weight: 700;
    font-size:   12px;
}

.im-aide-astuces-block li strong {
    color: #1a5276;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .im-aide-astuces-block {
        padding: 14px 14px 12px;
        margin:  14px 0 20px;
    }
    .im-aide-astuces-title {
        font-size: 14px;
    }
    .im-aide-astuces-block li {
        font-size: 13px;
        padding-left: 16px;
    }
}

/* ================================================================
   [VIEWS-UX v3.4] BADGE "NOUVEAU" — remplace "👁 0" pour < 5 vues
   ================================================================ */

/* État "Nouveau" : fond vert distinctif, sans icône œil */
.amn-views-badge--new {
    background:    linear-gradient(135deg, #27ae60, #2ecc71) !important;
    padding:       3px 8px !important;
    border-radius: 12px !important;
    font-weight:   700 !important;
}

.amn-views-count--new {
    font-size:   11px !important;
    font-weight: 700 !important;
    color:       #fff !important;
    letter-spacing: 0.3px;
    line-height: 1;
}

/* ================================================================
   [SHARE-01] BOUTON PARTAGER — cartes de la grille
   ================================================================ */

.amn-share-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    background:     transparent;
    border:         1.5px solid #bdc3c7;
    border-radius:  8px;
    padding:        5px 10px;
    font-size:      12px;
    font-weight:    600;
    color:          #7f8c8d;
    cursor:         pointer;
    transition:     border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space:    nowrap;
    line-height:    1;
    margin-top:     4px;
}

.amn-share-btn:hover,
.amn-share-btn:focus {
    border-color: #25d366; /* couleur WhatsApp */
    color:        #1a8c45;
    background:   rgba(37,211,102,0.06);
    outline:      none;
}

.amn-share-label {
    font-size: 12px;
}

/* Bouton Partager sur la fiche détail (plus grand) */
.amn-single-share-btn {
    padding:   7px 14px !important;
    font-size: 13px !important;
}

/* ================================================================
   [SWIPE-01] NAVIGATION ENTRE PROFILS — fiche individuelle
   ================================================================ */

/* Conteneur navigation dans la back-wrapper */
.amn-single-nav {
    display:     none; /* affiché par JS si urls disponibles */
    align-items: center;
    gap:         8px;
    margin-left: auto; /* pousse vers la droite dans im-single-back-wrapper flex */
}

.amn-single-nav-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border:          1.5px solid #bdc3c7;
    border-radius:   50%;
    background:      #fff;
    color:           #555;
    cursor:          pointer;
    transition:      border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.amn-single-nav-btn:hover:not(:disabled) {
    border-color: var(--amn-color-primary, #e91e8c);
    color:        var(--amn-color-primary, #e91e8c);
    background:   rgba(233,30,140,0.05);
}

.amn-single-nav-btn:disabled {
    opacity:        0.35;
    cursor:         not-allowed;
}

.amn-single-nav-pos {
    font-size:   13px;
    font-weight: 600;
    color:       #555;
    min-width:   42px;
    text-align:  center;
}

/* Indicateur swipe mobile — bande semi-transparente en bas de la container */
.amn-swipe-hint {
    display:         none; /* affiché/masqué par JS sur mobile */
    align-items:     center;
    justify-content: center;
    background:      rgba(0,0,0,0.55);
    color:           #fff;
    font-size:       13px;
    font-weight:     600;
    padding:         8px 16px;
    border-radius:   8px;
    margin:          12px auto 0;
    max-width:       260px;
    text-align:      center;
    transition:      opacity 0.4s ease;
    pointer-events:  none;
}

/* Mise en page im-single-back-wrapper pour accueillir nav + share */
.im-single-back-wrapper {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 16px;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .amn-single-nav {
        gap: 6px;
    }
    .amn-single-nav-btn {
        width:  32px;
        height: 32px;
    }
    .amn-single-nav-pos {
        font-size: 12px;
        min-width: 36px;
    }
    .amn-share-label {
        display: none; /* icône seule sur très petit écran */
    }
}

/* ================================================================
   [RECIPROCAL-01] BADGE FAVORI RÉCIPROQUE — onglet Mes Favoris
   ================================================================ */

/* Card de favori mise en avant quand réciproque */
.amn-fav-item--reciproque {
    border:     2px solid #f39c12 !important;
    background: linear-gradient(135deg, #fffdf0, #fff9e0) !important;
    position:   relative;
}

/* Badge visuel en haut de la card */
.amn-reciproque-badge {
    display:         flex;
    align-items:     center;
    gap:             5px;
    background:      linear-gradient(135deg, #f39c12, #f1c40f);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    padding:         4px 10px;
    border-radius:   12px;
    margin-bottom:   8px;
    width:           fit-content;
    box-shadow:      0 2px 6px rgba(243,156,18,0.35);
    cursor:          default;
}

.amn-reciproque-icon {
    font-size: 14px;
    line-height: 1;
}

.amn-reciproque-label {
    white-space: nowrap;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .amn-reciproque-badge {
        font-size: 10px;
        padding:   3px 8px;
    }
}