/* ALLO212 V286 — TÉLÉPHONE ALLÉGÉ (lu en dernier, téléphone uniquement : rien ne change sur ordinateur)
   - Une seule police : Montserrat (l'arabe garde la police du téléphone).
   - Pages « formulaire » (connexion, inscription, devenir livreur / chauffeur / pro…) : mode concentré,
     le formulaire arrive tout de suite, sans grande image, sans barre du bas, sans bouton +, sans bulle.
   - Clavier ouvert : la barre du bas, le bouton + et la bulle se cachent (plus rien ne couvre le champ).
   - Bulle de l'assistant plus petite, que l'on peut ranger (✕) ; elle reste ensuite en languette sur le bord.
   - Décors animés lourds coupés sur téléphone (le site défile plus vite).
   Retour arrière : créer le fichier vide includes/mobile286.off */
@media (max-width:760px){
  html:not([lang^="ar"]) body,html:not([lang^="ar"]) body button,html:not([lang^="ar"]) body input,html:not([lang^="ar"]) body select,html:not([lang^="ar"]) body textarea{font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif}

  /* décors lourds (aurores floutées, motifs animés) : coupés sur téléphone */
  .c2-aur,.pm-aur,.h74-deco{display:none!important}

  /* ---------- mode concentré (formulaires) ---------- */
  :root.m286-focus:not(#m286) body .a-mobile-nav,:root.m286-focus:not(#m286) body .mb-fab,:root.m286-focus:not(#m286) body .as-fab:not(.m286-keep),:root.m286-focus:not(#m286) body .v191-scr,:root.m286-focus:not(#m286) body .pc248{display:none!important}
  :root.m286-focus:not(#m286) body{padding-bottom:0!important}
  :root.m286-focus:not(#m286) body .hf-ahero-screen,:root.m286-focus:not(#m286) body .hero>.trust,:root.m286-focus:not(#m286) body main.hero .trust{display:none!important}
  :root.m286-focus:not(#m286) body .hf-ahero{min-height:0!important;padding-top:12px!important}
  :root.m286-focus:not(#m286) body .hf-ahero-text{padding-top:0!important;margin:0 0 10px!important}
  :root.m286-focus:not(#m286) body .hf-ahero-text h1{font-size:24px!important;line-height:1.15!important;margin:0!important}
  :root.m286-focus:not(#m286) body .hf-ahero-text{display:none!important}
  :root.m286-focus:not(#m286) body .hf-ahero-in{display:flex!important;flex-direction:column!important;gap:10px!important}
  :root.m286-focus:not(#m286) body .hf-ahero-form{order:2}

  /* ---------- clavier ouvert : rien ne couvre le champ ---------- */
  :root.m286-kb:not(#m286) body .a-mobile-nav,:root.m286-kb:not(#m286) body .mb-fab,:root.m286-kb:not(#m286) body .as-fab,:root.m286-kb:not(#m286) body .v191-scr,:root.m286-kb:not(#m286) body .pc248,:root.m286-kb:not(#m286) body .lv212{display:none!important}

  /* ---------- bulle de l'assistant ---------- */
  .as-fab{transform:scale(.84);transform-origin:100% 100%}
  .m286-x{position:absolute;top:-6px;inset-inline-start:-6px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#0E1220;color:#fff;font:800 12px/1 Montserrat,sans-serif;display:grid;place-items:center;padding:0;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.35)}
  :root.m286-nobot:not(#m286) body .as-fab{display:none!important}
  .m286-tab{position:fixed;right:0;bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:2147483000;width:22px;height:58px;border:0;border-radius:14px 0 0 14px;background:linear-gradient(160deg,#FF7A2E,#E8400C);box-shadow:-4px 6px 16px -6px rgba(232,64,12,.7);padding:0;display:none}
  .m286-tab::before{content:"";position:absolute;left:8px;top:18px;width:6px;height:22px;border-radius:3px;background:rgba(255,255,255,.85)}
  :root.m286-nobot:not(.m286-kb):not(.m286-focus):not(#m286) body .m286-tab{display:block}

  /* ---------- petit message ---------- */
  .m286-toast{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:2147483001;background:#0E1220;color:#fff;border-radius:16px;padding:12px 14px;font:600 13.5px/1.35 Montserrat,sans-serif;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}
  .m286-toast.on{opacity:1;transform:none}

}

/* V286 : la fenêtre « Vous êtes pro ? » ne couvre plus la barre du bas */
@media (max-width:760px){
  :root:not(#m286) body .v190-propop{bottom:calc(98px + env(safe-area-inset-bottom,0px))!important}
  :root.m286-kb:not(#m286) body .v190-propop{display:none!important}
}

/* V286 : sur téléphone, plus d'« écran exemple » décoratif en tête des pages : le contenu arrive tout de suite.
   Le bouton + (Publier) ne reste que sur les pages d'annonces (ailleurs, « Publier » est dans le menu). */
@media (max-width:760px){
  :root:not(#m286) body .hf-vscreen,:root:not(#m286) body .hf-gal-screen,:root:not(#m286) body .hf-ahero-screen{display:none!important}
  :root:not(.m286-pub):not(#m286) body .mb-fab{display:none!important}
}

/* V286 : menu ⋮, volet ou onglet ouvert : la bulle et la languette s'effacent (plus rien par-dessus) */
:root:is(.a-more-on,.pm-sheet-open,.pm-form-open):not(#m286) body :is(.as-fab,.m286-tab,.v190-propop,.v191-offer),
:root:not(#m286) body.h74-lock :is(.as-fab,.m286-tab,.v190-propop,.v191-offer){display:none!important}

/* V286 : CARTES D'ANNONCES HOMOGÈNES sur téléphone (Annonces 212, Immo, Emploi, Auto, rubriques…)
   Avant : une carte prenait presque tout l'écran (76 % de la largeur, photo carrée géante).
   Maintenant : même taille partout, comme « Dernières annonces » de l'accueil : 2 cartes et un bout visibles,
   photo 4:3 recadrée, titre sur 2 lignes, prix en pastille. */
@media (max-width:820px){
  html[data-pm]:not(#m286) body.pm :is(.property-grid,.job-grid,.vehicle-grid,.listing-grid,.listings-section .grid,main > .container > .grid,.c2-ann):not(.pm-no-rail){grid-auto-columns:min(44vw,210px)!important;gap:10px!important}
  html[data-pm]:not(#m286) body.pm :is(.property-grid,.vehicle-grid,.listing-grid,.listings-section .grid,.c2-ann) > * :is(.ph,[class*="image"],[class*="photo"],[class*="media"]):not(img){aspect-ratio:4/3!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
  html[data-pm]:not(#m286) body.pm :is(.property-grid,.vehicle-grid,.listing-grid,.listings-section .grid,.c2-ann) > * :is(.ph,[class*="image"],[class*="photo"],[class*="media"]) > img,
  html[data-pm]:not(#m286) body.pm :is(.property-grid,.vehicle-grid,.listing-grid,.listings-section .grid,.c2-ann) > * > img:first-child{width:100%!important;height:100%!important;aspect-ratio:4/3;object-fit:cover!important;max-height:none!important}
  html[data-pm]:not(#m286) body.pm .c2-ac b{font-size:13px!important;padding:8px 10px 2px!important}
  html[data-pm]:not(#m286) body.pm .c2-ac small{padding:0 10px 10px!important;font-size:11.5px!important}
  html[data-pm]:not(#m286) body.pm .c2-ac .ph em{font-size:11.5px!important;padding:4px 8px!important}
  html[data-pm]:not(#m286) body.pm .c2-ann-sk{aspect-ratio:3/4}
}
/* V286 : sous-catégories sur UNE ligne qui glisse (au lieu de 3 lignes de boutons) */
@media (max-width:820px){
  html[data-pm]:not(#m286) body .c2-subs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding-bottom:4px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html[data-pm]:not(#m286) body .c2-subs::-webkit-scrollbar{display:none}
  html[data-pm]:not(#m286) body .c2-subs>a{flex:none!important;white-space:nowrap!important;font-size:13px!important;padding:8px 13px!important}
}
/* V286 : pages /212/… : même règle partout — pas d'écran exemple ni de bandeau pub isolé en tête sur téléphone */
@media (max-width:760px){
  :root:not(#m286) body .c2-vis,:root:not(#m286) body .c2-strip{display:none!important}
}
/* V286 : téléphone — plus de fenêtres pub qui surgissent en bas (« Votre site offert », « Créez votre site »)
   ni d'écran-démo animé (téléphone « Votre site gratuit ») en tête de page : la même règle sur toutes les pages. */
@media (max-width:760px){
  :root:not(#m286) body :is(#v190Sheet,.v190-sheet,.v191-offer,.v201-screen){display:none!important}
}