/* ALFRED-MOBILE — chargé en dernier. Aucune règle hors @media. */
/* 📱 V5.002 (mobile) : téléphone et tactile seulement. À 1280 px avec une souris, AUCUNE règle ne s'applique
   (preuve : script de la partie 6 du plan → doit afficher []). Retirable : supprimer la ligne <link …mobile.css> d'index.html.
   Blocs : A ≤900 réparations · B ≤768 mise en page · C ≤640 tableaux en cartes · D doigt · E sans survol ·
           F barre du haut (sous html.mbarre-on, posée par modules/mobile-barre.js) · G appli installée. */

/* ═══ A. ≤900 px : réparations alignées sur le tiroir existant ═══ */
@media (max-width:900px){
  /* A1 Colonnes collantes : lève *{max-width:100vw} (styles.css) dans les zones qui défilent.
     Les largeurs écrites dans les balises (min/max-width des cellules) restent prioritaires. */
  #cm-planning-scroll *, #cm-simple-scroll *, #ec-cal-scroll *, #planning-content *,
  [id^="interv-calendar-scroll-"] *, #trello-board *{ max-width:none }

  /* A2 Tiroir ☰ : au-dessus des pages plein écran (ticket z50, fil messages z120), sous les fenêtres (.overlay 200).
     Il passe aussi AU-DESSUS du ☰ (z100) → le logo n'est plus caché ; encoche iPhone et hauteur réelle. */
  .sidebar{ height:100vh; height:100dvh; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px) }
  .sidebar.mobile-open{ z-index:170 }
  .mobile-overlay.show{ z-index:169 }
  .sidebar.mobile-open .logo-name{ display:block }          /* débris du menu « icônes seules » (styles.css ≤900) */
  .sidebar .nav-item span.nav-badge{ display:inline-block } /* compteur #nb-open réaffiché ; display:none écrit dans la balise reste prioritaire */
  .mobile-menu-btn{ left:calc(14px + env(safe-area-inset-left,0px)) } /* ☰ hors de l'encoche en paysage */

  /* A1 bis Grille Interventions (#interventions-content, interventions.js) : le TABLEAU seul défile
     (styles.css table{display:block;overflow-x:auto}) → plus de 2e zone de défilement dans le cadre (équipe F) */
  #interventions-content table{ max-width:100% !important }

  /* A3 Fiche ticket #ticket-page (styles.css .ticket-*) */
  .ticket-page{ left:0 !important; right:0 !important; width:auto !important } /* plus de bande vide de 232 px entre 641 et 900 px */
  .ticket-topbar{ flex-wrap:wrap; gap:8px !important; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 64px !important } /* « Retour » dégagé du ☰ */
  .ticket-topbar-title{ flex:1 1 100%; order:10; white-space:normal }
  .ticket-topbar-back{ min-height:40px }
  .ticket-topbar-back > span{ display:none }                /* « Échap » */
  .ticket-body{ flex-direction:column }
  .ticket-main{ order:1; padding:14px 12px !important; overflow:visible }
  .ticket-sidebar{ order:2; width:auto !important; border-right:0 !important; border-top:1px solid var(--border); padding:14px 12px !important; overflow:visible }

  /* A4 Bouton 📄 PDF (export-pdf.js) : outil de bureau ; cachait « mois suivant » en Interventions */
  .exp-pdf-btn{ display:none !important }

  /* A5 Filtres en 16 px (bat .filters select{12px!important}) → plus de zoom automatique sur iPhone */
  .filters select, .filters input:not([type=checkbox]):not([type=radio]){ font-size:16px !important }

  /* A6 Bandeau d'annonces (index.html, top:0 z9998) : passe en bas, ne couvre plus ☰ */
  #announcement-banner{ top:auto !important; bottom:0; padding-bottom:env(safe-area-inset-bottom,0px) }

  /* A7 Fenêtres : vraie hauteur iPhone + pied collé en bas (.modal défile déjà en overflow-y:auto) */
  .overlay .modal{ max-height:calc(100dvh - 24px) !important; margin:12px auto !important }
  .modal-actions{ flex-wrap:wrap; position:sticky; bottom:0; z-index:2; background:var(--bg2) }
  .modal-actions .btn{ flex:1 1 auto; justify-content:center }
  #cm-resa-readonly > div > div:last-child{ position:sticky; bottom:-20px; background:var(--bg2); padding:10px 0 } /* « Fermer » toujours visible (cm-smoobu.js) */

  /* A8 Conversation voyageurs plein écran (cm-messages.js) : encoche et barre d'accueil */
  #cm-mobile-thread{ padding-top:env(safe-area-inset-top,0px) !important; padding-bottom:env(safe-area-inset-bottom,0px) !important }
  #cm-mobile-thread > div:first-child{ flex-wrap:wrap !important; row-gap:6px }
  #cm-mobile-thread > div:first-child > div:last-child{ flex-shrink:1 !important; flex-wrap:wrap; margin-left:auto }

  /* A9 Écran de connexion (panneau width:440px) */
  #agent-selector-screen{ overflow-y:auto !important; align-items:flex-start !important; padding:calc(16px + env(safe-area-inset-top,0px)) 12px 16px }
  #agent-selector-screen > div[style*="width:440px"]{ width:100% !important; max-width:440px; padding:22px 18px !important; margin:auto }
  #agent-selector-screen .ops-readout, #agent-selector-screen .ops-corner{ display:none }
}

/* ═══ B. ≤768 px : mise en page ═══ */
@media (max-width:768px){
  /* B1 Grilles fixes non couvertes par styles.css */
  [style*="grid-template-columns:1fr 340px"],[style*="grid-template-columns:1fr 260px"],
  [style*="grid-template-columns:1fr 280px"],[style*="grid-template-columns:420px 1fr"],
  [style*="grid-template-columns:300px 1fr"],[style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns:230px 1fr 320px"],[style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1.1fr 2fr"],[style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr auto;gap:20px"],
  [style*="minmax(400px"],[style*="minmax(340px"],[style*="minmax(320px"],[style*="minmax(300px"]
  { grid-template-columns:minmax(0,1fr) !important }
  [style*="grid-template-columns:repeat(3,"], .report-grid, .agent-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)) !important }
  :is(#cm-stats-content,#ec-stats-host) [style*="grid-template-columns:150px 1fr 70px 92px"]{ grid-template-columns:minmax(0,1fr) 36px auto auto !important; gap:6px !important }
  :is(#cm-stats-content,#ec-stats-host) :is([style*="grid-template-columns:170px 1fr 100px"],[style*="grid-template-columns:170px 1fr 110px"],[style*="grid-template-columns:150px 1fr 100px"])
    { grid-template-columns:minmax(0,1.3fr) minmax(30px,1fr) auto !important }
  :is(#cm-stats-content,#ec-stats-host) [style*="min-width:190px;background:linear-gradient"]{ min-width:0 !important }
  #cm-stats-content [style*="top:calc(100% + 6px);right:0"]{ right:auto !important; left:0 !important; max-width:calc(100vw - 24px) !important; max-height:60vh !important } /* menu « Tous les logements » coupé */
  #cm-prix-content [style*="display:flex;gap:12px;font-size:11.5px;color:var(--text3);padding-top:10px"]{ flex-wrap:wrap !important }
  #cm-resas-content [style*="grid-column:span 2"]{ grid-column:1/-1 !important }

  /* B2 Carte Trello #modal-trello-card (« 1fr 460px ») : plein écran, 1 colonne, 1 seule zone qui défile */
  #modal-trello-card .modal{ width:100vw !important; max-width:100vw !important; max-height:100vh !important; max-height:100dvh !important; margin:0 !important; border-radius:0 !important; padding:0 !important }
  #modal-trello-card .modal > div:first-child{ position:sticky; top:0; z-index:3; background:var(--bg2); padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px !important; gap:8px !important }
  #modal-trello-card .modal > div[style*="1fr 460px"]{ grid-template-columns:minmax(0,1fr) !important; min-height:0 !important }
  #modal-trello-card .modal > div[style*="1fr 460px"] > div{ max-height:none !important; overflow:visible !important; padding:14px 12px !important }
  #modal-trello-card .modal > div[style*="1fr 460px"] > div:last-child{ border-left:0 !important; border-top:1px solid var(--border) }
  #trello-card-comments-list{ min-height:0 !important }
  #modal-trello-card .modal-actions{ margin-top:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)) !important }
  #modal-trello-card .tr-deplacer{ display:block !important }         /* liste « Déplacer vers la colonne » (index.html) */
  #trello-card-checklist-list + div{ flex-wrap:wrap !important }
  #trello-card-checklist-input{ flex:1 1 100% !important }
  #trello-card-checklist-assignee{ flex:1 1 auto; width:auto !important }
  #modal-trello-card #trello-card-title{ min-width:0 !important; width:0 }  /* 📱 V5.002 (mobile) : le titre (flex:1) gardait 229 px → ✕ hors écran */

  /* B3 Tableau Trello : une colonne par écran, glissement aimanté */
  #trello-board{ scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scroll-padding:0 12px; min-height:0 !important }
  #trello-board .trello-col, #trello-board .trello-col-add{ scroll-snap-align:start; width:calc(100vw - 56px) !important; min-width:calc(100vw - 56px) !important; max-width:none !important }
  #trello-board .trello-col{ max-height:calc(100vh - 190px); max-height:calc(100dvh - 190px) }
  #trello-board .trello-card{ padding:10px 12px !important }           /* bat [class*="-card"] (0,2,0) */
  #trello-board .trello-card-title, #trello-board .trello-card-icons{ padding:0 !important; border-radius:0 !important }
  .trello-col-menu{ position:fixed; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow-y:auto } /* trello.js calcule en coordonnées d'écran ; jamais hors de l'écran */
  #trello-col-nav{ display:flex !important }                           /* onglets de colonnes, créés par trello.js (équipe B) */
  #trello-col-nav::-webkit-scrollbar{ display:none }                    /* scrollbar-width:none (posé par le JS) ne suffit pas sur Safari */

  /* B4 Plannings : colonne des noms plus étroite (elle reste collée grâce à A1) */
  #cm-planning-scroll [style*="min-width:160px;max-width:160px"]{ min-width:104px !important; max-width:104px !important; padding-left:8px !important; padding-right:6px !important; white-space:normal !important }
  [id^="interv-calendar-scroll-"] [style*="position:sticky;left:0"]{ min-width:100px !important; max-width:100px !important; white-space:normal !important }
  #interventions-content table :is(th,td):first-child{ min-width:96px !important; max-width:110px !important; white-space:normal !important } /* colonne Logement ≈ 100 px (vraie grille, équipe F) */
  #cm-simple-scroll{ scroll-snap-type:x mandatory !important; gap:10px !important }
  #cm-simple-scroll > div{ width:100% !important; flex:0 0 100% !important; padding:10px 8px 6px !important }
  #tab-channel-planning [style^="width:1px;height:24px"]{ display:none !important }
  /* 📱 V5.002 (mobile) : nom du logement sur 2 lignes (l'élément intérieur gardait nowrap + « … ») ; pastille « ⚠ Double résa » en dessous */
  #cm-planning-scroll [style*="min-width:160px;max-width:160px"]{ flex-wrap:wrap !important; row-gap:2px !important }
  #cm-planning-scroll [style*="min-width:160px;max-width:160px"] [style*="text-overflow:ellipsis"]{ white-space:normal !important; line-height:1.2 }
  #cm-planning-scroll [style*="min-width:160px;max-width:160px"] > [style*="flex:1;min-width:0"]{ min-width:70px !important }

  /* B5 Tableaux : 1re colonne collée (le tableau défile déjà) + filtres des Clefs */
  #clef-grid table :is(th,td):first-child{ position:sticky; left:0; z-index:1; background:var(--bg2) }
  /* Planning RH : 2e ligne d'en-tête = noms des employés (Date en rowspan) → seule la 1re ligne d'en-tête est collée (équipe F) */
  #planning-content table :is(tbody td:first-child, tfoot td:first-child, thead tr:first-child th:first-child){ position:sticky; left:0; z-index:1; background:var(--bg2) }
  #tab-clefs div:has(> #clef-search){ flex-wrap:wrap !important }
  #clef-search{ width:100% !important; flex:1 1 100% }
  /* 📱 V5.002 (mobile) : Planning RH — le tableau défile aussi en hauteur → l'en-tête (noms des employés) reste visible ;
     rh.js fait défiler le TABLEAU jusqu'à aujourd'hui. Case « Date » (2 lignes) au-dessus de tout. */
  #planning-content table{ max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px) }
  #planning-content thead th{ position:sticky; top:0; z-index:2; background:var(--bg2) }
  #planning-content table thead tr:first-child th:first-child{ z-index:3 }
  /* 📱 V5.002 (mobile) : cartes chiffres (Tickets…) en 2×2 — bat .stats{1fr} de styles.css ≤480 */
  .content .stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important }

  /* B6 Récap (cm-recap.js) */
  #cm-recap-content [style*="minmax(400px,1fr)"]{ grid-template-columns:1fr !important }
  #cm-recap-content [style*="max-height:74vh"]{ max-height:none !important; overflow:visible !important }
  #cm-recap-content [style*="flex:1;min-width:120px"]{ min-width:calc(33.3% - 7px) !important; padding:8px !important }

  /* B7 Espace client (propriétaire / prestataire) — scroll-margin = hauteur de la barre du haut (bloc F) */
  #tab-espaceclient div:has(> #ec-tab-calendrier){ flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none; scroll-snap-type:x proximity; scroll-margin-top:calc(70px + env(safe-area-inset-top,0px)) }
  #tab-espaceclient div:has(> #ec-tab-calendrier)::-webkit-scrollbar{ display:none }
  #tab-espaceclient div:has(> #ec-tab-calendrier) > .ec-subtab{ flex:0 0 auto !important; scroll-snap-align:start; min-height:40px; font-size:13px !important; padding:8px 14px !important }
  #ec-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; margin-bottom:12px !important } /* bat .stats{1fr} des règles ≤480 et ≤380 */
  #ec-kpis .stat{ padding:8px 10px !important }
  #ec-kpis .stat-val{ font-size:18px !important }
  #ec-content{ scroll-margin-top:calc(70px + env(safe-area-inset-top,0px)) }
  #ec-content > div[style*="calc(100vh - 235px)"]{ height:calc(100dvh - 130px) !important; min-height:360px !important } /* messagerie-proprio.js */
  #tab-espaceclient .ec-engagement{ padding:10px 12px !important; gap:10px !important }  /* classe posée par supervision.js (équipe E) */
  #ec-content table.ec-clefs{ min-width:0 !important }                                    /* cartes des Clés, suite en C */
  #ec-block-modal > div{ min-width:0 !important; width:100% }
}
@media (max-width:480px){ .grid2{ grid-template-columns:1fr } }

/* ═══ C. ≤640 px : tableaux clés en cartes (ordinateur intact) ═══ */
@media (max-width:640px){
  /* Tickets (colonnes : 1 #, 2 AVA, 3 titre, 4 logement, 5 type, 6 priorité, 7 agent, 8 statut, 9 créé, 10 modifié) */
  #tab-tickets .tbl-wrap{ background:none; border:0; box-shadow:none }
  #tab-tickets thead{ display:none }
  #ticket-list{ display:flex; flex-direction:column; gap:8px }
  #ticket-list tr{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:12px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:12px }
  #ticket-list td{ display:block; padding:0 !important; border:0 !important; white-space:normal !important; background:none !important }
  #ticket-list td:nth-child(3){ order:-1; flex:1 1 100%; font-size:15px }
  #ticket-list td:nth-child(3) .ticket-title::after{ content:''; position:absolute; inset:0 }  /* toute la carte ouvre le ticket */
  #ticket-list td:nth-child(4){ flex:1 1 100% }
  #ticket-list td:nth-child(9), #ticket-list td:nth-child(10){ display:none }

  /* Réservations (cm-resas.js) : chaque ligne devient une carte — ordre 5 (voyageur) · 7 · 4 · 1-3 · 6/8/9 ; tri par défaut gardé */
  #cm-resas-content table thead{ display:none }
  #cm-resas-content table, #cm-resas-content tbody{ display:block !important; overflow:visible !important }
  #cm-resas-content tbody tr{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:10px 12px; border-bottom:1px solid var(--border) }
  #cm-resas-content tbody td{ padding:0 !important; white-space:normal !important; border:0 }
  #cm-resas-content tbody td:nth-child(5){ order:1; flex:1 1 60% }
  #cm-resas-content tbody td:nth-child(7){ order:2; margin-left:auto }
  #cm-resas-content tbody td:nth-child(4){ order:3; flex:1 1 100%; color:var(--text2) }
  #cm-resas-content tbody td:nth-child(1), #cm-resas-content tbody td:nth-child(2), #cm-resas-content tbody td:nth-child(3){ order:4 }
  #cm-resas-content tbody td:nth-child(6), #cm-resas-content tbody td:nth-child(8), #cm-resas-content tbody td:nth-child(9){ order:5 }

  /* Contacts (cm-contacts.js) : même principe, numéro de téléphone agrandi */
  #cm-contacts-content [style*="grid-template-columns:2fr 1fr 1fr"]{ grid-template-columns:1fr !important }
  #cm-contacts-content table thead{ display:none }
  #cm-contacts-content table, #cm-contacts-content tbody{ display:block !important }
  #cm-contacts-content tbody tr{ display:flex; flex-wrap:wrap; gap:4px 12px; padding:10px 12px; border-bottom:1px solid var(--border) }
  #cm-contacts-content tbody td{ padding:0 !important; white-space:normal !important }
  #cm-contacts-content tbody td:first-child{ flex:1 1 100% }
  #cm-contacts-content tbody td:nth-child(3) a{ display:inline-block; padding:6px 0; font-size:14px }
  #modal-cm-contact div[onclick^="cmContactsCloseDetail"]{ flex-wrap:wrap }

  /* Clés du propriétaire : table.ec-clefs → cartes, libellé lu dans data-label (posés par supervision.js, équipe E) */
  #ec-content table.ec-clefs, #ec-content table.ec-clefs tbody, #ec-content table.ec-clefs tr{ display:block }
  #ec-content table.ec-clefs{ overflow:visible }
  #ec-content table.ec-clefs thead, #ec-content table.ec-clefs tr:has(> th){ display:none }
  #ec-content table.ec-clefs tr{ background:var(--bg2); border:1px solid var(--border); border-radius:12px; margin:0 0 10px; padding:6px 12px }
  #ec-content table.ec-clefs td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0 !important; white-space:normal !important; border-left:0 !important; text-align:right }
  #ec-content table.ec-clefs td[data-label]::before{ content:attr(data-label); flex:0 0 auto; font-size:12px; color:var(--text3); text-align:left }
  #ec-content table.ec-clefs td :is(select,input){ max-width:60% !important; width:60% !important }
  /* 📱 V5.002 (mobile) : Inventaire du propriétaire (supervision.js) — nom sur sa ligne, quantité et pastille dessous : plus de défilement sur le côté */
  #ec-content table:has(button[onclick^="ecInvAjuster"]) tr{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between }
  #ec-content table:has(button[onclick^="ecInvAjuster"]) td:first-child{ flex:1 1 100%; padding-bottom:0 !important }

  #tp-comments .cf-meta{ flex-wrap:wrap; padding-right:80px }
  :is(#tab-channel-prix,#cm-stats-content,#ec-stats-host,#tab-channel-messages,#tab-channel-recap) :is(input[type=checkbox],input[type=radio]){ min-height:0 !important; padding:0 !important }
  #modal-swikly-lier [style*="grid-template-columns:1fr auto auto"]{ grid-template-columns:1fr auto !important }
}

/* ═══ D. Doigt (tactile, ≤900) : zones à toucher ≥ 40-44 px ═══ */
@media (max-width:900px) and (pointer:coarse){
  .btn{ min-height:44px !important }                 /* bat 38 px (styles.css) */
  .btn-sm{ min-height:40px !important }
  .nav-item{ min-height:44px }
  .sidebar .nav-section-label.nav-collapsible{ min-height:44px; font-size:12px !important; padding:14px 12px 8px !important } /* bat 10 px */
  .modal-close, .toast-close, .trello-col-btn{ min-width:44px; min-height:44px }
  #notifs-bell, #theme-toggle-btn{ width:40px !important; height:40px !important } /* 26×26 écrits dans la balise (index.html) */
  #cm-recap-content span[onclick^="recapToggleCheck"]{ width:40px !important; height:40px !important }
  #cm-recap-content :is(span[onclick^="recapToggleMenage"],span[onclick^="openNewTicket"]){ min-height:40px; padding:8px 14px !important; font-size:13px !important }
  #cm-recap-content button[onclick^="recapToggleFilter"]{ min-height:40px; padding:8px 14px !important }
  #cm-recap-content :is(a[href^="tel:"],a[href^="mailto:"],a[href^="sms:"]){ min-height:40px; padding:8px 12px !important; font-size:13px !important } /* 📱 V5.002 (mobile) : Appeler / Écrire */
  #cm-stats-content [style*="top:calc(100% + 6px);right:0"] label{ min-height:40px }
  #trello-card-comments-list button{ min-width:36px; min-height:36px }
  #trello-card-checklist-list input[type=checkbox]{ width:22px !important; height:22px !important }
  #submit-status-select{ width:44px !important }
  #mention-box [data-i]{ padding:11px 12px !important; font-size:15px }
  #tab-espaceclient :is(#modal-ec-parrainage button[title="Fermer"]){ min-width:44px; min-height:44px }
  .tk-edit-tactile:not([hidden]){ display:inline-flex !important }  /* ✏ Modifier du ticket (créé par tickets.js, équipe C) : l'attribut hidden reste respecté */
  :is(#cm-stats-content,#ec-stats-host) button[onclick^="cmStatsTelComparer"]{ min-height:40px }  /* « ＋ Comparer » (cm-stats.js, équipe D) */
}

/* ═══ E. Sans survol (tactile, ≤900) : effets collés + aides clavier inutiles ═══ */
@media (max-width:900px) and (hover:none){
  .btn:hover, .stat:hover, .trello-card:hover{ transform:none }
  #ec-kpis .stat{ transform:none !important; box-shadow:none !important }
  .trello-add-form-hint, #tp-desc kbd{ display:none }
}

/* ═══ F. ≤900 px : barre du haut FIXE (☰ + titre + 🔔), créée par modules/mobile-barre.js ═══
   La barre naît avec l'attribut hidden : sans cette règle (ordinateur, ou CSS absent) elle reste invisible.
   Position fixe (pas de sticky) → aucun overflow de styles.css touché. z-index 45 : sous la fiche ticket (50),
   la conversation voyageurs (120), le ☰ (100), le tiroir ouvert (170) et les fenêtres (200). */
@media (max-width:900px){
  html.mbarre-on #mbarre{ display:flex; align-items:center; gap:8px; position:fixed; top:0; left:0; right:0; z-index:45;
    height:calc(60px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) calc(10px + env(safe-area-inset-right,0px)) 0 calc(64px + env(safe-area-inset-left,0px));
    background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.25) }
  html.mbarre-on #mbarre-titre{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em }
  html.mbarre-on #mbarre-cloche{ position:relative; flex:0 0 auto; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center;
    border-radius:10px; background:var(--bg2); border:1px solid var(--border); color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent }
  html.mbarre-on #mbarre-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#ef4444; color:#fff;
    font-size:10px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg) }
  html.mbarre-on #mbarre-badge[hidden]{ display:none }
  /* ☰ centré dans la barre ; sa pastille passe sur la cloche */
  html.mbarre-on .mobile-menu-btn{ top:calc(10px + env(safe-area-inset-top,0px)) !important }
  html.mbarre-on .mobile-menu-btn .mobile-menu-notifs-badge{ display:none !important }
  /* contenu décalé de la hauteur de la barre (le body porte déjà l'encoche) */
  html.mbarre-on .content{ padding-top:68px !important }
  /* fenêtre des notifications sous la barre */
  html.mbarre-on .notifs-popup{ top:calc(64px + env(safe-area-inset-top,0px)) !important; max-height:calc(100vh - 84px - env(safe-area-inset-top,0px)) !important; max-height:calc(100dvh - 84px - env(safe-area-inset-top,0px)) !important }
}

/* ═══ G. Appli installée au téléphone (écran d'accueil) : barre d'état fondue → marges de sécurité partout ═══ */
@media (max-width:900px) and (display-mode:standalone){
  .sidebar{ padding-left:env(safe-area-inset-left,0px) }                       /* logo hors de l'encoche en paysage (le haut est compté en A2) */
  #announcement-banner{ padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px) }
}