/*
 * NUMI ANNONCES — feuille de style du module (phase 11, bloc #67).
 *
 * Tout est enfermé dans le scope `.numi-annonces` : le module ne peut pas
 * repeindre le reste du site. L'accent est posé par le gabarit de tête
 * (`--na-accent`, valeur lue dans `modules.annonces.accent`) : aucune couleur de
 * marque n'est écrite en dur ici.
 */
.numi-annonces {
    /* ---------------------------------------------------------------------
     * JETONS DE DESIGN DU MODULE (bloc #76) — la référence est
     * `/opt/data/design_web/annonces-leboncoin.md` §3 : rayons, espacements,
     * UNE ombre, QUATRE tailles de texte, contraste ≥ 4,5:1, cibles ≥ 44 px.
     * Toutes les couleurs du module passent par ces variables : aucune teinte
     * n'est écrite ailleurs dans un composant.
     *
     * DEUX VALEURS DE LA RÉFÉRENCE ONT ÉTÉ CORRIGÉES ICI, parce que le calcul
     * de contraste (WCAG 2.1, `scripts/annonces_design_tokens.php`) prouve
     * qu'elles échouent sous 4,5:1 :
     *   · étiquette « Don »  : #059669 sur #ECFDF5 = 3,58:1  → #047857 (5,21:1) ;
     *   · étiquette « Vendue » : #6B7280 sur #F3F4F6 = 4,39:1 → #4B5563 (6,87:1).
     *   · le texte des boutons pleins était sombre sur terracotta (#1f2937 sur
     *     #C2410C = 2,83:1, ÉCHEC) → blanc sur terracotta (5,18:1).
     * --------------------------------------------------------------------- */
    --na-accent: #C2410C;          /* terracotta — l'accent du module */
    --na-brand: #1CB084;
    --na-encre: #111827;           /* titres */
    --na-encre-2: #6B7280;         /* métadonnées */
    --na-fond: #FFFFFF;            /* cartes */
    --na-fond-2: #F7F7F8;          /* fond de page des sections */
    --na-gris: #F3F4F6;
    --na-bord: #E5E7EB;
    --na-don-txt: #047857;         /* corrigé (référence : 3,58:1) */
    --na-don-fond: #ECFDF5;
    --na-vendue-txt: #4B5563;      /* corrigé (référence : 4,39:1) */
    --na-encre-3: #4B5563;         /* gris foncé : pastilles, métadonnées sur gris */
    --na-vendue-fond: #F3F4F6;
    --na-urg-txt: #C2410C;
    --na-urg-fond: #FFF1E7;

    /* Rayons */
    --na-r-carte: 12px;
    --na-r-pilule: 999px;

    /* Espacements : 4 / 8 / 12 / 16 / 24 px — jamais « au hasard » */
    --na-e-1: 4px;
    --na-e-2: 8px;
    --na-e-3: 12px;
    --na-e-4: 16px;
    --na-e-5: 24px;

    /* UNE seule ombre, très légère */
    --na-ombre: 0 1px 2px rgba(16, 24, 40, .06);

    /* Quatre tailles de texte utiles, et rien d'autre */
    --na-t-11: 11px;
    --na-t-13: 13px;
    --na-t-15: 15px;
    --na-t-20: 20px;

    --na-cible: 44px;              /* cible tactile minimale (accessibilité) */

    color: var(--na-encre);
}

.numi-annonces .na-container {
    width: min(1120px, 94vw);
    margin: 0 auto;
}

/* ------------------------------------------------------------------- bandeau */
.numi-annonces .na-topbar {
    background: #fff;
    border-bottom: 1px solid var(--na-bord);
}
.numi-annonces .na-brandline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0;
}
.numi-annonces .na-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--na-encre);
    font-weight: 700;
}
.numi-annonces .na-logo-ico { font-size: 20px; }
.numi-annonces .na-badge-brand {
    /* Blanc sur le vert de marque donnait 2,77:1 (ÉCHEC) : on prend le couple
       déjà utilisé par les boutons verts du site (fond marque + texte #04231A)
       → 6,03:1. */
    background: var(--na-brand);
    color: #04231A;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
}
.numi-annonces .na-slogan { color: #64748b; font-size: 14px; }
.numi-annonces .na-quick { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.numi-annonces .na-quicklink {
    text-decoration: none;
    color: var(--na-encre);
    border: 1px solid var(--na-bord);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 14px;
}
.numi-annonces .na-quicklink-cta {
    background: var(--na-accent);
    border-color: var(--na-accent);
    /* Blanc sur terracotta = 5,18:1. Le texte sombre du template donnait
       2,83:1 (échec WCAG) — corrigé au bloc #76. */
    color: #FFFFFF;
    font-weight: 600;
    min-height: var(--na-cible);
    display: inline-flex;
    align-items: center;
    border-radius: var(--na-r-pilule);
}

/* --------------------------------------------------------------------- héros */
.numi-annonces .na-hero { padding: 28px 0 8px; }
.numi-annonces .na-pill {
    display: inline-block;
    background: var(--na-gris);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    color: #475569;
}
.numi-annonces .na-hero h1 { font-size: 30px; margin: 12px 0 8px; line-height: 1.2; }
.numi-annonces .na-hero p { color: #475569; max-width: 720px; }
.numi-annonces .na-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.numi-annonces .na-stat {
    background: #fff;
    border: 1px solid var(--na-bord);
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 130px;
}
.numi-annonces .na-stat b { display: block; font-size: 20px; }
.numi-annonces .na-stat span { font-size: 12px; color: #64748b; }
.numi-annonces .na-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ------------------------------------------------------------------ boutons */
.numi-annonces .na-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--na-e-2);
    border-radius: var(--na-r-pilule);
    padding: 10px var(--na-e-4);
    min-height: var(--na-cible);
    font-size: var(--na-t-15);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow: var(--na-ombre);
}
/* Contraste : #1f2937 sur #C2410C = 2,83:1 (ÉCHEC) → blanc = 5,18:1. */
.numi-annonces .na-btn-primary { background: var(--na-accent); color: #FFFFFF; }
.numi-annonces .na-btn-ghost { background: var(--na-fond); color: var(--na-encre); border-color: var(--na-bord); }

/* ------------------------------------------------------------------ sections */
.numi-annonces .na-section { padding: 24px 0; }
.numi-annonces .na-section-gris { background: var(--na-gris); border-radius: 16px; padding: 20px; margin-bottom: 28px; }
.numi-annonces .na-section h2 { font-size: 20px; margin-bottom: 12px; }
.numi-annonces .na-titre-page { font-size: 26px; margin: 22px 0 14px; }
.numi-annonces .na-note { color: #64748b; font-size: 13px; }
.numi-annonces .na-note-alerte { color: #b45309; }
.numi-annonces .na-regles { padding-left: 18px; color: #475569; }

/* --------------------------------------------------------------- catégories */
.numi-annonces .na-catlist { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.numi-annonces .na-cat { background: #fff; border: 1px solid var(--na-bord); border-radius: 12px; padding: 12px; }
.numi-annonces .na-cat-lien { display: flex; justify-content: space-between; gap: 8px; text-decoration: none; color: var(--na-encre); }
.numi-annonces .na-cat-lien span { color: #64748b; font-size: 12px; }
.numi-annonces .na-cat-enfants { list-style: none; padding: 8px 0 0; margin: 0; font-size: 13px; }
.numi-annonces .na-cat-enfants a { color: #475569; text-decoration: none; }

/* ---------------------------------------------------------------- état vide */
.numi-annonces .na-vide {
    background: #fff;
    border: 1px dashed var(--na-bord);
    border-radius: 16px;
    padding: 26px;
    text-align: center;
}
.numi-annonces .na-vide-ico { font-size: 26px; display: block; margin-bottom: 6px; }
.numi-annonces .na-vide h3 { margin: 4px 0 6px; font-size: 18px; }
.numi-annonces .na-vide p { color: #64748b; }

/* -------------------------------------------------------------- formulaire */
.numi-annonces .na-form { display: grid; gap: 18px; margin-bottom: 30px; }
.numi-annonces .na-fieldset {
    background: #fff;
    border: 1px solid var(--na-bord);
    border-radius: 14px;
    padding: 14px 16px;
}
.numi-annonces .na-fieldset legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
.numi-annonces .na-field { display: block; margin-bottom: 10px; }
.numi-annonces .na-field > span { display: block; font-size: 13px; color: #475569; margin-bottom: 4px; }
.numi-annonces .na-field input[type="text"],
.numi-annonces .na-field input[type="file"],
.numi-annonces .na-field select,
.numi-annonces .na-field textarea {
    width: 100%;
    border: 1px solid var(--na-bord);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 14px;
    background: #fff;
    color: var(--na-encre);
}
.numi-annonces .na-field-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.numi-annonces .na-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-right: 14px; }
.numi-annonces .na-exigences { margin-top: 6px; }
.numi-annonces .na-attributs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.numi-annonces .na-star { color: #ef4444; }
.numi-annonces .na-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ photos */
.numi-annonces .na-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.numi-annonces .na-photo {
    width: 118px;
    border: 1px solid var(--na-bord);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.numi-annonces .na-photo img { display: block; width: 100%; height: 84px; object-fit: cover; }
.numi-annonces .na-photo span { display: block; font-size: 11px; color: #64748b; padding: 4px 6px; }

/* ------------------------------------------------------ mes annonces / gestes */
.numi-annonces .na-liste { list-style: none; padding: 0; display: grid; gap: 12px; }
.numi-annonces .na-carte { background: #fff; border: 1px solid var(--na-bord); border-radius: 14px; padding: 14px; }
.numi-annonces .na-carte-tete { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.numi-annonces .na-carte-titre { font-size: 16px; }
.numi-annonces .na-carte-info { display: flex; gap: 14px; flex-wrap: wrap; color: #475569; font-size: 13px; margin: 8px 0; }
.numi-annonces .na-carte-gestes { display: flex; gap: 8px; flex-wrap: wrap; }
.numi-annonces .na-etat {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    background: var(--na-gris);
    color: #334155;
}
.numi-annonces .na-etat-publiee { background: #dcfce7; color: #166534; }
.numi-annonces .na-etat-en_attente { background: #fef3c7; color: #92400e; }
.numi-annonces .na-etat-vendue { background: #dbeafe; color: #1e40af; }
.numi-annonces .na-etat-retiree { background: #fee2e2; color: #991b1b; }
.numi-annonces .na-quota { font-size: 14px; color: #475569; }
.numi-annonces .na-message { font-size: 14px; color: #475569; }
.numi-annonces .na-message-ok { color: #166534; }
.numi-annonces .na-message-erreur { color: #b91c1c; }

@media (max-width: 640px) {
    .numi-annonces .na-hero h1 { font-size: 24px; }
    .numi-annonces .na-quick { width: 100%; margin-left: 0; }
}

/* ==========================================================================
   RECHERCHE ET FILTRES (bloc #68) — mobile d'abord
   Toutes les couleurs passent par les variables du module (--na-accent,
   --na-brand) posées par `annonces/_entete` : aucune teinte n'est écrite en dur
   ici, et l'accent du module vient de `config/modules.php`.
   Cibles tactiles de 44 px minimum, contraste ≥ 4,5:1 sur les textes porteurs.
   ========================================================================== */
.numi-annonces .na-visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------ barre de recherche */
.numi-annonces .na-search {
    /* La barre se colle SOUS l'en-tête commun du site (sticky lui aussi) : la
       hauteur est mesurée par le JS (`--na-sticky-top`), jamais devinée — la
       barre passerait sinon DERRIÈRE l'en-tête au défilement (défaut réel
       trouvé le 12/10/2026). */
    position: sticky; top: var(--na-sticky-top, 0px); z-index: 30; background: #fff; padding: 10px 0 8px;
}
.numi-annonces .na-search-bar { display: flex; gap: 8px; align-items: stretch; }
.numi-annonces .na-champ { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.numi-annonces .na-champ > span { font-size: 12px; color: #6b7280; }
.numi-annonces .na-champ input, .numi-annonces .na-champ select {
    min-height: 44px; border: 1px solid var(--na-bord, #e2e8f0); border-radius: 12px;
    padding: 8px 12px; font-size: 15px; background: #fff; color: #111827; width: 100%;
}
.numi-annonces .na-champ input[type="search"] { -webkit-appearance: none; }
.numi-annonces .na-btn-recherche { min-height: 44px; white-space: nowrap; }
.numi-annonces .na-bandeau-loc {
    display: flex; align-items: flex-end; gap: 8px; margin-top: 8px;
    background: #f7f7f8; border: 1px solid var(--na-bord, #e2e8f0); border-radius: 12px; padding: 8px 10px;
}
.numi-annonces .na-loc-ico { font-size: 18px; line-height: 44px; }
.numi-annonces .na-loc-libelle { font-size: 12px; color: #6b7280; }
.numi-annonces .na-champ-court { flex: 0 0 84px; }
.numi-annonces .na-champ-court input { text-transform: uppercase; }

/* ------------------------------------------------------------- puces */
.numi-annonces .na-puces { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.numi-annonces .na-puce {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--na-cible); padding: 4px var(--na-e-3);
    border: 1px solid var(--na-bord, #e2e8f0); border-radius: 999px; background: #fff;
    font-size: 14px; color: #374151;
}
.numi-annonces .na-puce select { border: 0; background: transparent; font-size: 14px; min-height: 36px; }
.numi-annonces .na-puce-bouton { cursor: pointer; }
.numi-annonces .na-puce-active { border-color: var(--na-accent); color: var(--na-accent); font-weight: 600; background: #fff7ed; }
.numi-annonces .na-puce-info { background: #f3f4f6; border-color: #f3f4f6; color: #4b5563; }

/* ---------------------------------------- feuille plein écran des filtres */
/* Quand la feuille est OUVERTE, le formulaire collant perd sa position : un
   `position: sticky` crée un CONTEXTE D'EMPILEMENT qui enferme la feuille
   (`z-index: 80` à l'intérieur = 30 à l'extérieur) et l'en-tête du site la
   recouvrait — le bouton de fermeture était inatteignable (défaut réel corrigé
   le 12/10/2026, attrapé par la preuve de rendu navigateur). */
body.na-sheet-ouvert .numi-annonces .na-search { position: static; z-index: auto; }
.numi-annonces .na-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 80;
    background: #fff; display: flex; flex-direction: column;
}
.numi-annonces .na-sheet-tete {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--na-bord, #e2e8f0);
}
.numi-annonces .na-sheet-fermer {
    border: 0; background: #f3f4f6; width: 44px; height: 44px; border-radius: 999px;
    font-size: 18px; cursor: pointer; color: #374151;
}
.numi-annonces .na-sheet-corps { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 24px; }
.numi-annonces .na-sheet-pied {
    display: flex; gap: 10px; align-items: center; padding: 12px 16px;
    border-top: 1px solid var(--na-bord, #e2e8f0); background: #fff;
}
.numi-annonces .na-sheet-pied .na-btn-primary { flex: 1 1 auto; }
.numi-annonces .na-groupe { border: 0; border-top: 1px solid var(--na-bord, #e2e8f0); padding: 14px 0 6px; margin: 0; }
.numi-annonces .na-groupe legend { font-weight: 600; font-size: 15px; color: #111827; padding: 0; }
.numi-annonces .na-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.numi-annonces .na-champ-filtre { margin: 10px 0; }
.numi-annonces .na-filtre-libelle { display: block; font-size: 13px; color: #374151; margin-bottom: 4px; }
.numi-annonces .na-filtre-libelle em { color: #6b7280; font-style: normal; font-size: 12px; }
.numi-annonces .na-puces-etat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.numi-annonces .na-choix { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #374151; }
.numi-annonces .na-choix input { width: 20px; height: 20px; }

/* ------------------------------------------------- grille de catégories */
.numi-annonces .na-grille-categories {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.numi-annonces .na-tuile-lien {
    display: flex; flex-direction: column; gap: 4px; min-height: 76px;
    border: 1px solid var(--na-bord, #e2e8f0); border-radius: 12px; padding: 12px 10px;
    background: #fff; color: #111827; text-decoration: none;
}
.numi-annonces .na-tuile-lien b { font-size: 14px; }
.numi-annonces .na-tuile-lien span { font-size: 12px; color: #6b7280; }
.numi-annonces .na-tuile-lien:hover { border-color: var(--na-accent); }
.numi-annonces .na-cat-enfants { list-style: none; padding: 6px 0 0 0; margin: 0; }
.numi-annonces .na-cat-enfants a { font-size: 12px; color: var(--na-accent); text-decoration: none; }

/* ------------------------------------------------------ cartes d'annonce */
.numi-annonces .na-grille-annonces {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.numi-annonces .na-carte-annonce {
    background: var(--na-fond); border: 1px solid var(--na-bord, #e2e8f0);
    border-radius: var(--na-r-carte); box-shadow: var(--na-ombre);
    overflow: hidden; display: flex; flex-direction: column;
}
.numi-annonces .na-carte-avant { border-color: var(--na-accent); box-shadow: 0 0 0 1px var(--na-accent) inset; }
.numi-annonces .na-carte-vendue .na-annonce-photo img { opacity: .55; }
.numi-annonces .na-annonce-photo {
    position: relative; background: #f3f4f6; aspect-ratio: 4 / 3; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
}
.numi-annonces .na-annonce-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.numi-annonces .na-annonce-sansphoto { font-size: 28px; color: #9ca3af; }
.numi-annonces .na-annonce-etiquettes { position: absolute; top: 6px; left: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.numi-annonces .na-etq { font-size: var(--na-t-11); padding: 2px var(--na-e-2); border-radius: var(--na-r-pilule); font-weight: 600; }
.numi-annonces .na-etq-avant { background: var(--na-urg-fond); color: var(--na-urg-txt); }
.numi-annonces .na-etq-don { background: var(--na-don-fond); color: var(--na-don-txt); }
.numi-annonces .na-etq-vendue { background: var(--na-vendue-fond); color: var(--na-vendue-txt); }
.numi-annonces .na-annonce-corps { padding: 10px; display: flex; flex-direction: column; gap: 4px; }
/* Le PRIX est l'information la plus regardée : semi-gras, et il passe AVANT
   le titre dans le gabarit (`_carte.blade.php`). */
.numi-annonces .na-annonce-prix { font-size: var(--na-t-15); font-weight: 700; color: var(--na-encre); }
.numi-annonces .na-annonce-titre {
    font-size: var(--na-t-13); font-weight: 500; color: var(--na-encre); margin: 0; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.numi-annonces .na-annonce-meta { margin: 0; font-size: var(--na-t-11); color: var(--na-encre-2); display: flex; flex-wrap: wrap; gap: 6px; }

/* -------------------------------------------------- messages et compteurs */
.numi-annonces .na-alerte { border-radius: 12px; padding: 12px 14px; margin: 12px 0; font-size: 14px; }
.numi-annonces .na-alerte-erreur { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.numi-annonces .na-alerte-info { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.numi-annonces .na-alerte p { margin: 6px 0 0; }
.numi-annonces .na-motif { font-size: 12px; color: #6b7280; }
.numi-annonces .na-compteur { font-size: 13px; color: #6b7280; margin: 12px 0 8px; }
.numi-annonces .na-plus { display: flex; justify-content: center; padding: 16px 0 8px; }
.numi-annonces .na-en-chargement { opacity: .6; pointer-events: none; }
.numi-annonces .na-section-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.numi-annonces .na-lien-discret { font-size: 13px; color: var(--na-accent); text-decoration: none; }

@media (max-width: 640px) {
    .numi-annonces .na-grille-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .numi-annonces .na-seule-colonne-mobile { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .numi-annonces .na-grille-annonces { grid-template-columns: 1fr; }
}

/* ============================================================= FICHE (#69) */
/* La carte entière est un lien (bloc #69) : aucun style de lien par défaut. */
.numi-annonces .na-carte-lien { display: block; color: inherit; text-decoration: none; }
.numi-annonces .na-carte-lien:hover .na-annonce-titre { color: var(--na-accent); }
.numi-annonces .na-fil { margin: 4px 0 10px; }
.numi-annonces .na-titre-page { margin: 0 0 12px; }

.numi-annonces .na-galerie { margin: 0 0 16px; }
.numi-annonces .na-galerie-vue {
    position: relative; background: #f3f4f6; border-radius: 12px; overflow: hidden;
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.numi-annonces .na-galerie-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.numi-annonces .na-galerie-vide { font-size: 42px; color: #9ca3af; }
.numi-annonces .na-etq-bloc { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.numi-annonces .na-galerie-compteur {
    position: absolute; right: 10px; bottom: 10px; background: rgba(17, 24, 39, .68); color: #fff;
    font-size: 12px; padding: 3px 10px; border-radius: 999px;
}
.numi-annonces .na-galerie-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0;
    border-radius: 999px; background: rgba(255, 255, 255, .86); color: #111827; font-size: 26px;
    line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.numi-annonces .na-galerie-prec { left: 8px; }
.numi-annonces .na-galerie-suiv { right: 8px; }
.numi-annonces .na-galerie-vignettes { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; }
.numi-annonces .na-vignette {
    border: 2px solid transparent; border-radius: 10px; padding: 0; background: transparent;
    width: 72px; height: 54px; overflow: hidden; cursor: pointer; flex: 0 0 auto;
}
.numi-annonces .na-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.numi-annonces .na-vignette-active { border-color: var(--na-accent); }
.numi-annonces .na-note-photos { margin: 4px 0 0; }

.numi-annonces .na-fiche-tete { margin: 0 0 14px; }
.numi-annonces .na-fiche-prix { font-size: var(--na-t-20); font-weight: 700; color: var(--na-encre); display: block; }
.numi-annonces .na-fiche-titre { font-size: var(--na-t-20); font-weight: 600; color: var(--na-encre); margin: 4px 0 6px; line-height: 1.3; }
.numi-annonces .na-fiche-meta { margin: 0; font-size: var(--na-t-13); color: var(--na-encre-2); display: flex; flex-wrap: wrap; gap: 6px; }
.numi-annonces .na-fiche-categorie { margin: 6px 0 0; font-size: 13px; color: #6b7280; }

.numi-annonces .na-bloc { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin: 0 0 14px; }
.numi-annonces .na-bloc h2 { font-size: 15px; margin: 0 0 10px; color: #111827; }
.numi-annonces .na-sous-titre { font-size: 14px; margin: 16px 0 8px; color: #111827; }
.numi-annonces .na-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.numi-annonces .na-table th, .numi-annonces .na-table td { text-align: start; padding: 7px 0; border-bottom: 1px solid #f1f5f9; }
.numi-annonces .na-table th { color: #6b7280; font-weight: 500; width: 45%; }
.numi-annonces .na-table tr:last-child th, .numi-annonces .na-table tr:last-child td { border-bottom: 0; }
.numi-annonces .na-unite { color: #6b7280; font-size: 12px; }
.numi-annonces .na-fiche-description { margin: 0; font-size: 14.5px; line-height: 1.55; color: #1f2937; }
.numi-annonces .na-puces-na { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; }
.numi-annonces .na-puce-on { background: var(--na-don-fond); color: var(--na-don-txt); }

.numi-annonces .na-vendeur { display: flex; gap: 12px; align-items: center; }
.numi-annonces .na-vendeur-av {
    width: 52px; height: 52px; border-radius: 50%; background: #f3f4f6; color: #374151;
    display: grid; place-items: center; font-weight: 700; font-size: 20px; overflow: hidden; flex: 0 0 auto;
}
.numi-annonces .na-vendeur-av img { width: 100%; height: 100%; object-fit: cover; }
.numi-annonces .na-vendeur-t { display: flex; flex-direction: column; gap: 6px; }
.numi-annonces .na-vendeur-nom { font-size: 15px; color: #111827; }
.numi-annonces .na-vendeur-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.numi-annonces .na-vendeur-tags .na-puce { background: #f3f4f6; color: #4b5563; font-size: 12px; padding: 3px 9px; border-radius: 999px; }

/* Barre d'action collée en bas : cibles tactiles ≥ 44 px (accessibilité). */
.numi-annonces .na-barre {
    position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
    background: #fff; border-top: 1px solid #e5e7eb; padding: 10px 16px;
    max-width: 1120px; margin: 0 auto;
}
.numi-annonces .na-barre-form { flex: 1 1 auto; display: flex; }
.numi-annonces .na-btn-large { flex: 1 1 auto; min-height: 48px; font-size: 15px; }
.numi-annonces .na-barre .na-btn-ghost { min-height: 48px; white-space: nowrap; }
.numi-annonces .na-barre-refus { flex: 1 1 auto; margin: 0; }
.numi-annonces .na-partage-info { font-size: 12.5px; color: #6b7280; }
.numi-annonces .na-partage-ok { color: var(--na-don-txt); }
.numi-annonces .na-partage-erreur { color: #991b1b; }
.numi-annonces .na-note-securite { margin: 4px 0 16px; }

.numi-annonces .na-vide-404 { padding: 32px 16px; text-align: center; }
.numi-annonces .na-vide-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 640px) {
    .numi-annonces .na-fiche-prix { font-size: 22px; }
    .numi-annonces .na-barre { flex-wrap: wrap; }
}

/* ============================================= FAVORIS ET SIGNALEMENTS (#71) */
/* Le CŒUR est posé À CÔTÉ du lien de la carte : le clic sur la carte ouvre la
   fiche, le clic sur le cœur ne navigue pas. 44 px = cible tactile minimale
   (même exigence que la référence de design Leboncoin). */
.numi-annonces .na-carte-boite { position: relative; }
.numi-annonces .na-coeur {
    position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .12); background: rgba(255, 255, 255, .92); color: #111827;
    font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
    text-decoration: none; padding: 0; z-index: 2;
}
.numi-annonces .na-coeur:hover { background: #fff; }
.numi-annonces .na-coeur-on { color: #dc2626; border-color: rgba(220, 38, 38, .35); }
.numi-annonces .na-coeur[data-envoi="1"] { opacity: .55; pointer-events: none; }
.numi-annonces .na-coeur-fiche { top: 12px; right: 12px; width: 48px; height: 48px; font-size: 24px; }

/* Feuille de signalement : collée au bas de l'écran sur téléphone, boîte
   centrée au-dessus sur grand écran. */
.numi-annonces .na-feuille {
    position: fixed; inset: 0; background: rgba(17, 24, 39, .55); display: flex;
    align-items: flex-end; justify-content: center; z-index: 2000;
}
.numi-annonces .na-feuille[hidden] { display: none; }
.numi-annonces .na-feuille-boite {
    background: #fff; width: 100%; max-width: 520px; border-radius: 16px 16px 0 0;
    padding: 16px; max-height: 90vh; overflow-y: auto;
}
.numi-annonces .na-feuille-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.numi-annonces .na-feuille-fermer { width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.numi-annonces .na-sig-cible, .numi-annonces .na-sig-motifs {
    border: 1px solid var(--na-bord); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px;
}
.numi-annonces .na-sig-cible legend, .numi-annonces .na-sig-motifs legend { font-size: 13px; color: #475569; padding: 0 4px; }
.numi-annonces .na-sig-cible label, .numi-annonces .na-sig-motifs label {
    display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px;
}
.numi-annonces .na-sig-commentaire { display: block; margin: 0 0 12px; font-size: 13.5px; color: #475569; }
.numi-annonces .na-sig-commentaire textarea {
    width: 100%; margin-top: 6px; border: 1px solid var(--na-bord); border-radius: 10px; padding: 8px; font: inherit;
}
.numi-annonces .na-sig-avert { margin: 0 0 12px; }
.numi-annonces .na-compteur-favoris { font-size: 14px; color: #334155; margin: 0 0 12px; }
@media (min-width: 641px) {
    .numi-annonces .na-feuille { align-items: center; }
    .numi-annonces .na-feuille-boite { border-radius: 16px; }
}

/* ==========================================================================
   BLOC #76 — PASSE DE DESIGN « LEBONCOIN » (13/10/2026)
   Référence : `/opt/data/design_web/annonces-leboncoin.md`.
   Ce que ce bloc ajoute : squelettes de chargement, onglets de « Mes annonces »
   avec pastilles réelles, carrousel horizontal, messages rapides de la
   messagerie d'une annonce, liseré terracotta de la mise en avant, focus
   visible au clavier. Tout passe par les jetons — aucune teinte en dur ici.
   ========================================================================== */

/* --------------------------------------------------- mise en avant (liseré) */
.numi-annonces .na-carte-avant {
    border-color: var(--na-accent);
    box-shadow: 0 0 0 1px var(--na-accent) inset, var(--na-ombre);
}

/* ------------------------------------------- squelette de chargement (#76) */
/* La référence l'exige : un SQUELETTE, pas une roue qui tourne sans fin. */
.numi-annonces .na-squelette { padding: var(--na-e-4) 0; }
.numi-annonces .na-squelette-titre {
    height: var(--na-e-5); width: 40%; border-radius: var(--na-r-carte);
    background: var(--na-gris); margin-bottom: var(--na-e-3);
}
.numi-annonces .na-squelette-carte {
    background: var(--na-fond); border: 1px solid var(--na-bord);
    border-radius: var(--na-r-carte); overflow: hidden;
}
.numi-annonces .na-squelette-media {
    aspect-ratio: 4 / 3; background: var(--na-gris); width: 100%;
}
.numi-annonces .na-squelette-ligne {
    height: var(--na-t-13); border-radius: var(--na-r-carte);
    background: var(--na-gris); margin: var(--na-e-2) var(--na-e-3);
}
.numi-annonces .na-squelette-ligne-courte { width: 55%; }
.numi-annonces .na-squelette-media,
.numi-annonces .na-squelette-ligne,
.numi-annonces .na-squelette-titre {
    animation: na-pouls 1.4s ease-in-out infinite;
}
@keyframes na-pouls {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}
/* Accessibilité : pas d'animation pour qui demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
    .numi-annonces .na-squelette-media,
    .numi-annonces .na-squelette-ligne,
    .numi-annonces .na-squelette-titre { animation: none; }
}

/* ------------------------------------- onglets de « Mes annonces » (#76 §2.6) */
.numi-annonces .na-onglets {
    display: flex; gap: var(--na-e-2); overflow-x: auto; padding: var(--na-e-2) 0 var(--na-e-3);
}
.numi-annonces .na-onglet {
    display: inline-flex; align-items: center; gap: var(--na-e-2);
    min-height: var(--na-cible); padding: 0 var(--na-e-3);
    border: 1px solid var(--na-bord); border-radius: var(--na-r-pilule);
    background: var(--na-fond); color: var(--na-encre);
    font-size: var(--na-t-13); text-decoration: none; white-space: nowrap;
    flex: 0 0 auto;
}
.numi-annonces .na-onglet-actif {
    background: var(--na-accent); border-color: var(--na-accent); color: #FFFFFF;
    font-weight: 600;
}
.numi-annonces .na-onglet-pastille {
    display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: var(--na-r-pilule);
    background: var(--na-gris); color: var(--na-encre-3);
    font-size: var(--na-t-11); text-align: center;
}
.numi-annonces .na-onglet-actif .na-onglet-pastille { background: #FFFFFF; color: var(--na-accent); }

/* ------------------------------------------- carrousel horizontal (#76 §2.1) */
.numi-annonces .na-carrousel {
    display: flex; gap: var(--na-e-3); overflow-x: auto; padding: var(--na-e-1) var(--na-e-1) var(--na-e-3);
    scroll-snap-type: x mandatory;
}
.numi-annonces .na-carrousel > .na-carte-boite { flex: 0 0 150px; scroll-snap-align: start; }

/* ------------------------------- messages rapides du fil d'annonce (#76 §2.7) */
/* ------------------------------------------------------------- états vides */
.numi-annonces .na-vide { border-radius: var(--na-r-carte); box-shadow: var(--na-ombre); }

/* ------------------------------------------------- accessibilité (clavier) */
.numi-annonces a:focus-visible,
.numi-annonces button:focus-visible,
.numi-annonces input:focus-visible,
.numi-annonces select:focus-visible,
.numi-annonces textarea:focus-visible {
    outline: 3px solid var(--na-accent);
    outline-offset: 2px;
}
/* Les images de liste ne se chargent qu'à l'approche : la donnée mobile est
   chère (contrainte « internet cher » de la référence). */
.numi-annonces .na-annonce-photo img { background: var(--na-gris); }

/* Vignette de ligne de « Mes annonces » (bloc #76 §2.6) : c'est la vignette
   400 px réellement servie par la route publique, jamais une image inventée ;
   une annonce sans photo n'affiche simplement aucune vignette. */
.numi-annonces .na-carte-mini {
    display: block; width: 72px; height: 54px; object-fit: cover;
    border: 1px solid var(--na-bord); border-radius: var(--na-e-2);
    background: var(--na-gris); margin-bottom: var(--na-e-2);
}

/* ========================================================================
   SYNERGIES Numi (bloc #73) — remise, paiement honnête, Numi Colis, Pièces
   auto, feuille de partage et page « envoyer dans NumiApp ».
   Comme tout le module : les couleurs et les tailles viennent des JETONS
   (aucune valeur « choisie à l'œil » — leçon C-31), et une règle ne pose
   jamais `color` ET `background` ensemble, pour que le contraste reste celui
   des couples déjà calculés au bloc #76.
   ======================================================================== */

/* La remise, le paiement et les synergies dans un même bloc de la fiche. */
.numi-annonces .na-syn-paie { margin: var(--na-e-2) 0 0; }
.numi-annonces .na-syn-colis {
    display: flex; align-items: center; gap: var(--na-e-2); flex-wrap: wrap;
    margin: var(--na-e-3) 0 0;
}
.numi-annonces .na-syn-pieces { margin: var(--na-e-3) 0 0; }

/* Second geste de la barre d'action : il ne remplace RIEN, il ajoute. */
.numi-annonces .na-btn-partage-plus { min-height: var(--na-cible); }
@media (max-width: 420px) {
    .numi-annonces .na-btn-partage-plus { padding: 0 var(--na-e-2); }
}

/* Feuille de partage : quatre moyens réels, une cible tactile chacun. */
.numi-annonces .na-partage-liste {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--na-e-2);
}
.numi-annonces .na-partage-liste .na-btn {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; min-height: var(--na-cible); text-align: left;
}

/* Page « envoyer dans NumiApp » : l'annonce envoyée, puis le choix du fil. */
.numi-annonces .na-syn-bloc {
    display: flex; align-items: center; gap: var(--na-e-3);
    padding: var(--na-e-3); margin: var(--na-e-3) 0;
    border: 1px solid var(--na-bord); border-radius: var(--na-r-carte);
}
.numi-annonces .na-syn-photo {
    width: 96px; height: 72px; object-fit: cover;
    border-radius: var(--na-e-2); flex: 0 0 auto;
}
.numi-annonces .na-syn-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.numi-annonces .na-syn-prix { font-size: var(--na-t-15); }
.numi-annonces .na-syn-titre { font-size: var(--na-t-13); }
.numi-annonces .na-syn-fils { border: 0; margin: 0 0 var(--na-e-3); padding: 0; }
.numi-annonces .na-syn-fil {
    display: flex; align-items: center; gap: var(--na-e-2);
    min-height: var(--na-cible); padding: var(--na-e-1) 0;
}
.numi-annonces .na-syn-fil-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }