/* Captain Auto - Passe responsive : garde-fous anti-debordement + adaptations mobiles.
   Chargee en dernier pour corriger sans toucher aux fichiers de composants. */

/* ===== 1. Garde-fous globaux =====
   Un enfant de grille ou de flex ne peut pas, par defaut, devenir plus etroit que son
   contenu minimum (min-width: auto). C'est LA cause des debordements horizontaux :
   un tableau ou un mot long elargit sa piste et pousse toute la page. */
.listing-grid > *, .results-grid > *, .disc-grid > *, .admin-cols > *,
.kpi-grid > *, .filters-grid > *, .discover-form > *, .pricing-grid > *,
.features-grid > *, .steps-band > *, .hero > *, .verdict-columns > *,
.analysis-cta > *, .card-judgement > *, .listing-header > * { min-width: 0; }

/* Textes susceptibles de contenir des chaines tres longues (descriptions vendeur,
   titres d'annonces allemands, URLs collees dans un retour utilisateur). */
.listing-description, .listing-title, .car-card-title, .verdict-title,
.roadmap-t, .roadmap-d, .roadmap-meta, .disc-why, .disc-card-head h3,
.calc-row span, .legal-page p, .legal-page li, .admin-table td { overflow-wrap: anywhere; }

/* Tableaux : contenus dans leur parent, ou defilables horizontalement si vraiment larges. */
.specs-table, .ph-table { width: 100%; table-layout: fixed; }
.specs-table td, .ph-table td { overflow-wrap: anywhere; }
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.admin-table-full { overflow-x: auto; }

/* Medias jamais plus larges que leur conteneur. */
img, svg, video, iframe { max-width: 100%; }

/* Filet de securite : « clip » (et non « hidden ») pour ne pas casser le header sticky. */
body { overflow-x: clip; }

/* ===== 2. En-tete : îlot, dock et menu vivent dans base.css (« L'instrument de verre »,
   14/10/2026). Les anciennes règles de barre défilante sont retirées : elles visaient
   tout élément <nav>, dock et voile compris. ===== */

/* ===== 3. Densite mobile ===== */
@media (max-width: 560px) {
    #app-main { padding: 16px 0; }
    /* Titre d'écran : clamp(1.75rem, 3vw, 2.5rem) de base.css, aussi au téléphone (DESIGN.md). */

    .listing-section, .verdict-card, .admin-block, .calc-box { padding: 16px 14px; }
    .search-bar { padding: 24px 16px; }

    /* Recherche : une colonne de filtres, bouton pleine largeur */
    .filters-grid { grid-template-columns: 1fr; }

    /* Decouverte : le formulaire passe en pile */
    .discover-form { grid-template-columns: 1fr; gap: 16px; }
    .discover-form .btn-primary { width: 100%; }

    /* Fiche : cartes à 18 px de marge intérieure, ticket à 20 px (DESIGN.md, téléphone). */
    #listing-content :is(.listing-section, .verdict-card, .signals-box) { padding: 20px 20px; }
    #listing-content .ticket-calc { padding: 24px 20px 20px; }
    #listing-content .js-dossier-offre { padding: 24px 20px; }

    /* Fiche : actions et CTA empiles, jamais tronques */
    .listing-header-actions { flex-wrap: wrap; gap: 8px; }
    .listing-header-actions .btn-secondary,
    .listing-header-actions .btn-fav { flex: 1 1 auto; font-size: .875rem; padding: 8px 12px; text-align: center; }
    .analysis-cta { flex-direction: column; align-items: stretch; gap: 14px; }
    .analysis-cta-body { flex: 0 0 auto; }   /* en colonne, la base de 260 px devenait une hauteur */
    .analysis-cta-action { min-width: 0; }
    .analysis-cta-action .btn-primary { width: 100%; }
    #listing-content .porte-offerte .btn-primary { width: 100%; }

    /* Coût de possession et valeurs instrument : eviter le debordement des gros chiffres */
    .ownership-headline { gap: 6px; }
    .ownership-monthly { font-size: 1.5rem; }
    .verdict-maxprice { margin-left: 0; text-align: left; }

    /* Region / carte grise : le select passe sous le libellé, pleine largeur */
    #listing-content .calc-region { flex-wrap: wrap; gap: 6px; }
    #listing-content .calc-region select { max-width: 100%; width: 100%; }

    /* Verdict : jauge un peu plus petite, colonnes de points forts et faibles empilées. */
    .score-ring { width: 96px; height: 96px; }
    .score-ring-value { font-size: 2.5rem; }
    #listing-content .verdict-card .fx-sq-anneau { width: 96px; height: 96px; }
    .verdict-columns { grid-template-columns: minmax(0, 1fr); }

    /* Signaux : la pastille passe au-dessus du texte, qui garde toute la largeur. */
    .signal-item { flex-direction: column; gap: 8px; }
    .signal-badge { min-width: 0; }

    /* Back-office : deux colonnes de KPI plutot que six ecrasees */
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .admin-header-inner { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }
    .admin-nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .admin-nav::-webkit-scrollbar { display: none; }
    .admin-nav a { white-space: nowrap; }
    .admin-form-row { flex-direction: column; align-items: stretch; }
    .admin-form-row label, .admin-form-row input, .admin-form-row select, .admin-form-row textarea { width: 100%; }

    /* Modales : plein cadre utile sur petit ecran */
    .modal, .modal-overlay { padding: 10px; }
    .modal-content { padding: 20px 16px; max-height: 92vh; }
}

/* ===== 4. Tres petits ecrans (360px et moins) ===== */
@media (max-width: 380px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 1.75rem; }
    .listing-price { font-size: 1.75rem; }
    .delta-chip { font-size: .875rem; }
}

/* ============================================================================
   AUDIT MOBILE (simulateur iPhone 17 Pro Max, 2026-08-03)
   Quatre defauts constates a l'usage, pas a la lecture du code.
   ============================================================================ */

@media (max-width: 768px) {

    /* 1. LE BANDEAU D'INSTALLATION MASQUAIT LE BAS DE PAGE EN PERMANENCE.
       Fixe en bas d'ecran, il recouvrait le bouton « Analyser » de la boite de
       collage : la fonction etait inatteignable sans le fermer d'abord. Et le
       fermer relevait de l'exploit (voir 2). Il ne colle plus a l'ecran, il se
       range en fin de page et se laisse depasser par le doigt. */
    .pwa-banner {
        position: static;
        margin: 16px 0 0;
        transform: none !important;
        /* Rangé dans la page, il défile : pas de flou (DESIGN.md « Flou »). */
        background: var(--bg-1);
    }

    /* 2. « PLUS TARD » ETAIT INTOUCHABLE : ~31 pt de haut, sous le minimum de
       44 pt d'Apple. Trois tentatives de fermeture ont echoue au test. */
    .pwa-banner-close {
        min-height: 44px;
        min-width: 88px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
    }

    /* 3. (Navigation défilante retirée le 14/10/2026 : remplacée par le dock, base.css.) */

    /* 4. CIBLES TACTILES : la case « sans malus » et les cases a cocher en
       general tombaient sous les 44 pt. Le libelle devient cliquable avec elle. */
    .check-label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
    }
    .check-label input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
    .filter-check { justify-content: flex-start; }
    /* Page compte : case des emails et choix de fréquence (25 px de haut avant). */
    .acct-check { min-height: 44px; }
}

/* 5. LE BOUTON D'AVIS : sous 1024 px il recouvrait toujours quelque chose (« +N photos »
      de la fiche à 768 px, le bouton « M'alerter », la barre de comparaison). Il n'y est
      plus affiché : l'entrée « Votre avis » du menu plein écran (index.php, #voile-menu)
      ouvre la même fenêtre. Entre 1024 et 1279 px, il se réduit à un rond de 44 px
      (icône seule, nom gardé par l'aria-label) ; au-delà, pilule avec libellé. */

/* ============================================================================
   AUDIT DESKTOP (1440 x 900, 2026-08-03)
   ============================================================================ */

/* 6. LIGNES DE TEXTE TROP LONGUES : mesurees a 181, 213 et 218 caracteres sur les
      sous-titres et le pied de page, alors que la lecture decroche au-dela de 90.
      L'oeil perd sa ligne au retour a la marge. On borne les paragraphes de texte
      courant, JAMAIS les tableaux ni les grilles de donnees, qui ont besoin de
      toute la largeur pour aligner leurs colonnes. */
.search-subtitle,
.page-intro,
.ingest-hint,
.section-note,
.footer-note,
footer p {
    max-width: 78ch;
}
/* Le pied de page est centre : une largeur bornee doit le rester. */
.footer-note, footer p { margin-left: auto; margin-right: auto; }

/* 7. ZOOM AUTOMATIQUE DE SAFARI iOS AU FOCUS D'UN CHAMP.
      Constate au simulateur : taper dans « Version / finition » zoomait la page
      entiere, le texte doublait de taille et la mise en page debordait a droite.
      L'utilisateur doit alors dezoomer a la main, a chaque champ.

      Ce n'est pas un bug du site mais une regle de Safari : tout champ dont la
      police descend sous 16 px declenche un zoom au focus. Les champs du produit
      sont a 13 px, choisis pour la densite du formulaire.

      16 px sur MOBILE UNIQUEMENT : la densite du formulaire desktop est preservee,
      et le telephone gagne des champs plus lisibles, ce qui n'est pas un mal. */
@media (max-width: 768px) {
    .filter-group input:not([type="checkbox"]),
    .filter-group select,
    .filter-group textarea,
    .ingest-row textarea,
    .auth-form input,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ============================================================================
   POLISH MOBILE (iPhone, Safari iOS) - qualite percue

   Le monde reste le bordereau : libelles en Geist Mono capitales, chasse tabulaire,
   rail de verdict, accent #3d92cc. On ne change pas d'univers, on repare la
   hierarchie que la colonne unique avait aplatie.
   ============================================================================ */

@media (max-width: 768px) {

    /* 8. DEUX CHIFFRES DE DECISION ETAIENT INVISIBLES.
          Mesure : sur 393 px, la barre gardait 3 colonnes pour 5 cellules, et
          « Face au marche FR » et « Prix max conseille » tombaient a 0 px de large.
          Les deux chiffres qui tranchent l'achat n'existaient pas sur telephone,
          et le libelle le plus important, « Cout reel rendu France », etait coupe.

          Deux colonnes : les cinq cellules existent, aucun libelle ne se tronque.
          La cinquieme (Signaux) occupe la ligne qui reste, sans trou ni deplacement
          dans le DOM. */
    /* « L'instrument de verre » (14/10/2026) : la barre reste STATIQUE au téléphone
       (décision de l'audit mobile : collée, elle mangeait un tiers d'un écran court).
       Puisqu'elle défile avec la page, elle perd son flou et devient une carte à double
       cadre (DESIGN.md : jamais de flou sur un élément qui défile). Les filets entre
       cases restent des ombres d'1 px (components.css). */
    .decision-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
        border: 0;
        background: var(--bg-1);
        box-shadow: var(--coeur-lueur), var(--coque);
    }
    .decision-bar > .db-cell:last-child { grid-column: 1 / -1; }
    .db-cell { min-height: 64px; padding: 12px 16px; }
    .decision-bar .db-label { white-space: normal; overflow: visible; }

    /* LE chiffre du produit : le cout reel rendu, pas le prix affiche par le vendeur.
       C'est la promesse entiere de Captain Auto, il doit dominer sa cellule. */
    #db-rendu .db-value { font-size: 1.5rem; }

    /* 9. LE PRIX N'AVAIT PAS DE PRESENCE : 18 px contre 17 px pour le titre, noye
          entre le drapeau et les boutons. C'est le fait de depart de toute la fiche,
          il se lit d'un coup d'oeil ou il ne sert a rien. */
    .listing-header { align-items: flex-start; gap: 16px; }
    .listing-price { font-size: 2rem; line-height: 1.05; }
    .listing-header-side {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        text-align: left;
    }
    .listing-header-side .btn-lbc { min-height: 44px; }

    /* Galerie : la photo principale en grand, les deux suivantes côte à côte dessous. */
    .listing-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        height: auto;
    }
    .listing-gallery .listing-main-photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
    .listing-gallery > img:not(.listing-main-photo) { grid-row: auto; aspect-ratio: 4 / 3; }
    .listing-gallery > img:nth-of-type(2):last-of-type { grid-column: 1 / -1; grid-row: auto; }

    /* Ticket : la pastille d'état passe AU-DESSUS du titre ; l'écart sous sa phrase. */
    .ticket-tete { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
    .ecart-box { flex-direction: column; align-items: flex-start; }
    .market-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Champ du chat : 16 px, sinon Safari iOS zoome la page au focus (point 7). */
    :root .chat-form input { font-size: 16px; }

    /* 10. LES ACTIONS DEBORDAIENT sur trois lignes (720 px de boutons pour 393 px),
           toutes du meme poids. Sur telephone, une seule action merite la pleine
           largeur : mettre l'annonce de cote pour y revenir. Les autres se rangent
           en ligne, compactes, sans se disputer l'attention. */
    .listing-header-actions {
        display: grid;
        /* DEUX colonnes fixes, pas d'auto-fit : a 104 px de base la grille passait a
           trois colonnes, « Poser une question » et « Message vendeur » se coupaient en
           plein milieu, et « Plus » restait orphelin sur sa ligne. Deux colonnes de
           ~190 px laissent respirer le plus long libelle, et les quatre actions
           secondaires forment deux lignes pleines. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s2);
        margin-top: var(--s3);
    }
    .listing-header-actions #listing-fav-btn { grid-column: 1 / -1; }
    .listing-header-actions > * {
        justify-content: center;
        min-height: 44px;
        padding-left: var(--s2);
        padding-right: var(--s2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Le conteneur du menu « Plus » est un enfant direct, et il porte un menu en
       position absolue : la troncature ci-dessus le COUPAIT a la hauteur du bouton.
       Le menu s'ouvrait bien (hidden retire, display flex) mais restait invisible sur
       tout ecran de moins de 768 px, site et application confondus. */
    /* padding: 0 : le padding latéral des boutons ci-dessus s'appliquait AUSSI à ce
       conteneur, et le bouton « Plus » (largeur 100 %) rentrait de 8 px de chaque côté
       par rapport à la grille (capture de Charles du 13/10). */
    .listing-header-actions > .actions-more { overflow: visible; padding: 0; }
    .actions-more { display: block; }
    .actions-more .btn-more { width: 100%; min-height: 44px; }
}

/* 11. (Débordement de l'ancienne barre défilante : sans objet depuis l'îlot et le dock.
       Ne jamais poser d'overflow sur l'îlot : il couperait le menu du compte.) */

/* ============================================================================
   12. SURVOL COLLE SUR ECRAN TACTILE

   Constate sur simulateur : « Message vendeur » restait bleu accentue, bordure
   comprise, longtemps apres l'avoir touche. iOS conserve l'etat :hover du dernier
   element touche jusqu'a ce qu'on tape ailleurs. Resultat, une action secondaire
   prenait le poids visuel d'une action principale, et le regard croyait a une
   hierarchie qui n'existe pas.

   Sur un appareil sans dispositif de survol, les etats :hover ne s'appliquent plus.
   L'etat actif reste, lui : c'est le retour tactile immediat, et il est juste.
   ============================================================================ */
@media (hover: none) {
    .listing-header-actions button:hover,
    .listing-header-actions a:hover,
    .listing-header-actions > :first-child:hover {
        border-color: var(--border);
        color: var(--text-1);
        background: var(--verre);
    }
    .btn-secondary:hover { border-color: var(--border-strong); color: var(--text-1); }
    /* Cartes à double cadre : l'anneau est une ombre portée, il ne doit pas disparaître
       au toucher. Seule la montée est neutralisée. */
    .car-card:hover, .srch-card:hover, .analysis-card:hover { transform: none; }
    .sample-link:hover { color: inherit; border-bottom-color: transparent; }
    .more-menu > *:hover { background: none; color: var(--text-2); }
    .search-resume:hover { border-color: var(--border); }
}

/* ===========================================================================
   CIBLES TACTILES (mobile uniquement)
   ===========================================================================
   Apple demande 44 x 44 pt au minimum, Google 48 x 48 dp. Mesure faite au viewport
   iPhone : 41 commandes en dessous du seuil, dont TOUTE la navigation (33 px de haut),
   le bouton de connexion (31 px), les listes deroulantes du formulaire (36 px) et les
   deux actions de chaque carte de resultat (33 x 31 et 37 x 32).

   Ce sont les commandes les plus utilisees de l'application : sous le seuil, une touche
   sur deux tombe a cote, et c'est ce qui fait dire d'une application qu'elle n'en est
   pas une. Les regles sont confinees au mobile : la souris n'a pas ce probleme, et le
   dessin des ecrans larges ne change pas.
   =========================================================================== */

@media (max-width: 768px) {
    /* Bascule mensuel ou annuel de /tarifs (40 px) et puces de classeurs des favoris
       (32 px) : relevées à 44 px au doigt (recette du 14/10/2026). */
    .pricing-toggle .pricing-period,
    .saved-chip { min-height: 44px; }
    /* Navigation, connexion et logo : cibles de 44 px tenues par base.css (îlot et dock).
       Ne plus viser #btn-login ici : un id battrait le masquage de « Connexion » dans
       l'îlot du téléphone. */

    /* Les listes deroulantes et les champs du formulaire de recherche. La police est
       deja portee a 16 px par ailleurs pour empecher le zoom automatique d'iOS ; il
       manquait la hauteur. */
    #search-form select,
    #search-form input[type="text"],
    #search-form input[type="number"],
    .btn-search {
        min-height: 44px;
    }

    /* Actions d'une carte de resultat : comparer et mettre en favori. Elles portent une
       icone seule, donc rien n'agrandit la zone touchable a leur place. */
    .card-actions .btn-fav,
    .card-actions .btn-compare-select,
    .btn-fav,
    .btn-compare-select {
        min-width: 44px;
        min-height: 44px;
    }

    /* Boutons de tri des resultats (prix, kilometrage, annee, marge, potentiel) : 28 px
       de haut mesures, et ce sont les commandes les plus utilisees une fois la recherche
       lancee. Le bouton d'analyse d'une annonce collee et les numeros de page (38 x 34)
       sont dans le meme cas. */
    .sort-btn,
    .btn-primary,
    .page-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Les numeros de page restaient a 38 px de large : le seuil vaut pour les DEUX
       dimensions, un bouton haut mais etroit se manque tout autant. */
    .page-btn { min-width: 44px; justify-content: center; }

    /* Zone de collage d'une annonce : deux lignes affichees pour un texte d'invite qui
       en fait trois, donc coupe en plein milieu d'une phrase. La poignee de
       redimensionnement, elle, n'a aucun sens au doigt et ajoute un ornement bizarre
       dans un coin. */
    #ingest-input-search,
    #ingest-input {
        min-height: 92px;
        resize: none;
    }

    /* Commandes de la FICHE d'annonce. Le bloc precedent visait l'ecran de recherche ;
       mesure faite ensuite sur la fiche, 26 cibles y restaient sous le seuil. Ce sont
       des commandes reelles : revenir aux resultats, ouvrir la galerie, choisir sa
       region pour la carte grise, envoyer une question a l'analyste. */
    .listing-back,
    .gallery-more,
    .chat-sugg,
    .calc-row select,
    .chat-form input {
        min-height: 44px;
    }

    .listing-back,
    .gallery-more,
    .chat-sugg {
        display: inline-flex;
        align-items: center;
    }

    /* Titres des comparables (cartes compactes depuis le 14/10/2026) : la zone touchable
       s'étend de 12 px au-dessus et au-dessous, la carte ne grandit pas. Bordure transparente
       et non padding (04/11/2026) : overflow: hidden coupe au bord du padding, donc un padding
       laissait voir le haut de la 3e ligne du titre, sous les deux lignes gardées. */
    .sample-card .sample-link {
        border-block: 12px solid transparent;
        margin-block: -12px;
    }

    /* Autres commandes de la fiche sous le seuil de 44 px : cases verrouillées de la
       barre, entrées du menu « Plus », choix du pays et de la région, liens pris dans
       une ligne de texte (relance d'une analyse conservée, offre du dossier, sources). */
    #listing-content .decision-bar .db-gate,
    .more-menu > *,
    .listing-origin .lo-pays select,
    #listing-content .calc-region select { min-height: 44px; }
    .stored-note .btn-link,
    #listing-content .dossier-ligne a {
        display: inline-block;
        padding-block: 12px;
        margin-block: -12px;
    }
    .rm-plus-corps .rm-liens a { padding-block: 12px; }

    /* Liens de pied de page : 15 px de haut mesures. Les transformer en boutons
       alourdirait le pied de page pour rien ; un espacement vertical porte la zone
       touchable au seuil sans changer l'apparence du texte. */
    footer a {
        display: inline-block;
        padding-block: 14px;
    }

    /* Passe de finition du 13/10/2026 : commandes encore à 36 px au doigt (boutons
       secondaires, cases verrouillées de la barre de décision, modale d'inscription,
       bascule des formules Pro et Max). */
    .btn-secondary,
    .db-gate,
    .auth-tab,
    .auth-form input,
    .auth-form select,
    .pricing-period,
    .badges-legende summary {
        min-height: 44px;
    }
    .pricing-toggle { height: auto; }
    .auth-close { min-width: 44px; min-height: 44px; }
    /* Liens et boutons pris dans une ligne de texte : la zone touchable s'étend de
       12 px de part et d'autre, la ligne ne bouge pas. */
    .pricing-annuel-btn,
    .gen-search,
    .cote-fil a {
        display: inline-block;
        padding-block: 12px;
        margin-block: -12px;
    }
    /* Réglettes de l'explorateur : piste de 4 px dessinée, zone de 44 px touchable. */
    .explorer input[type=range] {
        box-sizing: content-box;
        border-block: 20px solid transparent;
        background-clip: content-box;
        margin-block: -20px;
    }
}

/* ============================================================
   BOUTON DE RECHERCHE COLLANT (mobile, audit du 2026-09-26)
   « Rechercher » était à ~1 500 px du haut, sous 14 filtres, et aucun
   bouton ne restait à portée du pouce. Il reste désormais au bas de
   l'écran tant que le formulaire est affiché.
   ============================================================ */
@media (max-width: 768px) {
    /* « L'instrument de verre » : le bouton flotte AU-DESSUS du dock (--bas-fixe), sur
       une bande transparente ; sa lueur bleue le détache du formulaire. */
    #search-form .filter-submit {
        position: sticky;
        bottom: var(--bas-fixe);
        z-index: var(--z-collant);
        /* Pleine largeur : la marge de 60 px réservée au bouton « Votre avis » décalait le
           bouton alors que celui-ci n'est plus affiché sous 1024 px (section 5). */
        padding: 8px 0 0;
        background: transparent;
        border-top: 0;
    }
    #search-form .filter-submit .btn-search { width: 100%; min-height: 48px; }
}

/* ===========================================================================
   NAVIGATION MOBILE : depuis le 14/10/2026, îlot du haut + dock du bas + voile de menu
   (DESIGN.md « L'instrument de verre »), entièrement dans base.css ; comportement dans
   js/entete.js. L'ancien panneau #nav-plus et ses copies de liens ont disparu.
   =========================================================================== */

/* ===========================================================================
   FILTRES AVANCÉS REPLIÉS SUR /recherche (mobile, audit ux-ui M8 ; js/filtres-replies.js)
   Pays, marque, modèle, budget et « Rechercher » visibles ; le reste derrière « Plus de
   filtres (N actifs) ». Bureau inchangé.
   =========================================================================== */
.filtres-plus-groupe { display: none; }
@media (max-width: 768px) {
    #search-form:not(.filtres-ouverts) .filtre-avance { display: none; }
    #search-form .filtres-plus-groupe { display: block; grid-column: 1 / -1; }
    .filtres-plus-btn { width: 100%; min-height: 44px; }
    .filtres-plus-btn.a-des-actifs { border-color: var(--accent-border); color: var(--accent-strong); }
}

/* ===== CHAMPS DE SAISIE SUR ÉCRAN TACTILE =====
   Safari sur iPhone agrandit la page dès qu'on touche un champ dont le texte fait moins de
   16 px, et la laisse agrandie. Tous les champs du site étaient à 15 px : e-mail et mot de
   passe de l'inscription compris (audit sur simulateur iOS du 2026-10-14). Sur écran tactile,
   16 px partout ; « important » pour qu'aucune règle de composant ne le défasse. */
@media (pointer: coarse) {
    html :is(input:not([type=checkbox], [type=radio], [type=range], [type=hidden]), select, textarea) { font-size: 16px !important; }
}

/* Recherche lancée depuis une page d'arrivée des pubs (html.depuis-arrivee, ?arr=1, posé par
   index.php, 20/10/2026) : au téléphone, le récapitulatif tient sur UNE ligne (critères qui
   défilent au doigt, nombre d'annonces, bouton Modifier en rond) et la boîte de collage
   disparaît, pour que la première voiture arrive dans le premier écran (558 px avant). */
@media (max-width: 600px) {
  html.depuis-arrivee .search-resume {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px 8px 8px 12px;
  }
  html.depuis-arrivee .search-resume .sr-titre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.depuis-arrivee .search-resume .sr-pastilles {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  html.depuis-arrivee .search-resume .sr-pastilles::-webkit-scrollbar { display: none; }
  html.depuis-arrivee .search-resume .sr-pastille { flex: 0 0 auto; }
  html.depuis-arrivee .search-resume .sr-p-corps { min-height: 40px; }
  html.depuis-arrivee .search-resume .sr-p-retirer { width: 40px; height: 40px; }
  html.depuis-arrivee .search-resume .sr-fin { flex: 0 0 auto; gap: 8px; }
  html.depuis-arrivee .search-resume .sr-nb { font-size: .8125rem; }
  html.depuis-arrivee .search-resume .sr-modifier {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  html.depuis-arrivee .search-resume .sr-modifier > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.depuis-arrivee #ingest-search { display: none; }
}