/* ============================================================
   SUSPENSION  feuille de style de l'application (v2)
   ------------------------------------------------------------
   Ce fichier etait auparavant incruste dans index.php. Il est
   maintenant EXTERNE et versionne (?v=horodatage) : le navigateur
   recharge automatiquement la bonne version a chaque deploiement.

   ORGANISATION (l'ordre des regles est conserve, il compte) :
   1. Tokens (:root)  couleurs et variables : C'EST ICI qu'on
      change une couleur pour toute l'application.
   2. Base et composants (boutons, cartes, champs, marqueurs...)
   3. Layout ordinateur / navigation / immersion / responsive
   4. Couche v2 (finitions) puis REVUE DES ECRANS > 720 px
   5. UTILITAIRES facon Tailwind (tout en bas)  a utiliser pour
      TOUT NOUVEAU code : class="flex items-center gap-2 p-3"...

   La version Sass de ce fichier vit dans assets/scss/ : vous
   pouvez travailler dans l'un ou l'autre (voir ARCHITECTURE-CSS.md).
   ============================================================ */

  :root{
    --green:#1e7a3c; --green-dark:#155c2c; --green-light:#e8f5ec;
    --blue:#1d5fb4; --blue-light:#e7f0fb;
    --red:#b42318; --red-light:#fdecea;
    --orange:#c4680a; --orange-light:#fdf1e2;
    --ink:#1a1f23; --grey:#6b7480; --grey-light:#f2f4f6; --border:#e1e5ea;
  }
  *{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* iOS : SANS ça, Safari gonfle les textes et tout déborde */
  html,body{height:100%}
  body{background:#191d23;overflow:hidden;overflow-x:hidden}
  /* ---- Ressenti d'application NATIVE ----
     pas de rebond « page web », pas de halo bleu au toucher, pas de sélection
     de texte accidentelle sur l'interface, retour tactile sur chaque bouton. */
  html,body{overscroll-behavior:none}
  body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
  .tabbar,.topbar,.fabs-round,.fabs-go,.ob-brand,.screen-header{user-select:none;-webkit-user-select:none}
  .btn:active,.tab:active,.ob-cta:active{transform:scale(.97)}
  .btn,.tab,.ob-cta{transition:transform .09s ease,filter .09s ease}
  .btn:active{filter:brightness(.96)}
  .tabbar{padding-bottom:max(6px, env(safe-area-inset-bottom))} /* encoche iPhone */
  .sheet{padding-bottom:max(14px, env(safe-area-inset-bottom))}
  .screen{animation:screenin .18s ease} /* transition d'écran discrète, façon native */
  @keyframes screenin{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}
  /* Badge BÊTA : assumé, comme les grandes apps en préversion */
  .beta-badge{display:inline-block;background:#ff7a1a;color:#fff;font-size:9px;font-weight:800;letter-spacing:1px;border-radius:5px;padding:2px 5px;vertical-align:middle;margin-left:6px}
  /* Compte à rebours de sortie officielle (accueil invités) */
  .launch-cd{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:10px 14px;margin:12px 0;text-align:center}
  .launch-cd b{font-size:12px;letter-spacing:.5px}
  .launch-cd .cd{display:flex;justify-content:center;gap:10px;margin-top:6px}
  .launch-cd .cd div{min-width:52px}
  .launch-cd .cd b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
  .launch-cd .cd span{font-size:9.5px;opacity:.85;text-transform:uppercase;letter-spacing:1px}
  /* Les 3 gestes : comprendre le produit en une ligne */
  .ob-steps{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
  .ob-steps span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 11px;font-size:11.5px;white-space:nowrap}
  .ob-steps span b{color:#ffd08a;margin-right:2px}
  .ob-steps i{opacity:.7;font-style:normal}
  /* Carrousel d'accueil : les valeurs se découvrent en glissant, façon stores */
  .ob-carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ob-carousel::-webkit-scrollbar{display:none}
  .ob-card{flex:0 0 76%;max-width:290px;scroll-snap-align:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:13px 14px 11px;font-size:26px}
  .ob-card b{display:block;font-size:14.5px;margin:5px 0 4px}
  .ob-card p{font-size:12px;line-height:1.5;opacity:.95;margin:0;font-weight:400}
  .ob-swipe{text-align:center;font-size:10px;opacity:.6;letter-spacing:2px;margin:2px 0 10px}
  /* Comparatif face aux concurrents : eux / nous */
  .ob-vs{background:rgba(0,0,0,.18);border-radius:14px;padding:12px;margin-bottom:12px}
  .ob-vs>b{font-size:12.5px;display:block;text-align:center;margin-bottom:6px}
  .vs-row{display:flex;gap:8px;align-items:stretch;margin-top:6px}
  .vs-row span{flex:1;font-size:10.5px;line-height:1.45;background:rgba(255,255,255,.08);border-radius:9px;padding:7px 8px;opacity:.85}
  .vs-row .vs-us{background:rgba(46,204,113,.25);border:1px solid rgba(46,204,113,.5);opacity:1;font-weight:600}
  /* Visite immersive : voile, projecteur, bulle */
  #tourOv{position:fixed;inset:0;z-index:130;display:none}
  #tourHole{position:absolute;border-radius:18px;box-shadow:0 0 0 9999px rgba(10,16,22,.62);border:2.5px solid #ffd08a;pointer-events:none;transition:all .35s ease;animation:tourpulse 1.6s infinite}
  @keyframes tourpulse{0%,100%{border-color:#ffd08a}50%{border-color:#ff7a1a}}
  #tourTip{position:absolute;left:14px;right:14px;max-width:430px;margin:0 auto;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 12px 44px rgba(0,0,0,.45);animation:screenin .25s ease}
  #tourTip p{font-size:13.5px;line-height:1.55;color:var(--ink);margin:0}
  /* ---- Anti-coupure universel : AUCUN texte tronqué à droite ou à gauche ----
     Le piège CSS : un enfant de flex/grid a min-width:auto et refuse de
     rétrécir → il déborde et le centrage coupe des deux côtés. */
  .kpis>.kpi,.statsbar .sb,.screen-header>div,.hist-item .h-l,.card>*,.info-strip>*{min-width:0}
  .card,.kpi,.toast,.sheet,.screen-header,.info-strip,.auth-card{overflow-wrap:break-word;word-break:break-word;max-width:100%}
  .kpi .v{font-size:17px}
  .kpi .l{white-space:normal}
  .content{overflow-x:hidden}

  /* =========================================================
     LAYOUT DESKTOP : panneau latéral + téléphone
     ========================================================= */
  .layout{height:100%;display:flex;align-items:center;justify-content:center;gap:40px;padding:20px}

  .side{width:330px;max-height:92vh;overflow-y:auto;color:#c9d2dc;display:flex;flex-direction:column;gap:16px}
  .side h1{color:#fff;font-size:21px;line-height:1.25}
  .side h1 small{display:block;font-size:12px;font-weight:500;color:#8b96a3;margin-top:4px}
  .side .s-card{background:#22272e;border:1px solid #30363e;border-radius:14px;padding:14px 16px}
  .side .s-card h3{font-size:13px;color:#fff;margin-bottom:8px}
  .side .s-card p{font-size:12px;line-height:1.5;color:#9aa4b0}
  .side label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;padding:7px 0}
  .side select{background:#2d333b;color:#e6e9ec;border:1px solid #444c56;border-radius:8px;padding:5px 8px;font-size:12px}
  .side input[type=checkbox]{width:16px;height:16px;accent-color:var(--green)}
  .side .s-btn{width:100%;background:#2d333b;color:#e6e9ec;border:1px solid #444c56;border-radius:9px;padding:9px;font-size:12.5px;cursor:pointer;margin-top:6px}
  .side .s-btn:hover{background:#3a424c}
  .mod-list{display:flex;flex-direction:column;gap:7px}
  .mod-item{display:flex;gap:10px;align-items:center;font-size:12.5px;background:#1b2026;border:1px solid #2b323b;border-radius:10px;padding:9px 12px;cursor:pointer;color:#c9d2dc}
  .mod-item:hover{border-color:var(--green)}
  .mod-item .m-ico{font-size:17px}

  /* =========================================================
     TÉLÉPHONE / APP
     ========================================================= */
  .device{width:392px;height:min(800px,92vh);background:#000;border-radius:42px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.55);flex:0 0 auto}
  .app{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fafbfc;position:relative;display:flex;flex-direction:column}

  /* --- Barre d'application (haut) --- */
  .appbar{flex:0 0 auto;height:calc(52px + env(safe-area-inset-top,0px));padding:0 14px 0 16px;padding-top:env(safe-area-inset-top,0px);box-sizing:border-box;display:flex;align-items:center;gap:9px;background:#fff;border-bottom:1px solid var(--border);z-index:45}
  .appbar .a-logo{font-size:19px}
  .appbar .a-name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.1}
  .appbar .a-name small{display:block;font-size:9.5px;font-weight:600;color:var(--green);letter-spacing:.4px;text-transform:uppercase}
  .appbar .a-sp{flex:1}
  .appbar .a-clock{font-size:12.5px;font-weight:600;color:var(--grey)}
  .bell{position:relative;font-size:19px;cursor:pointer;user-select:none;padding:5px}
  .bell .bdg{position:absolute;top:0;right:-2px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 5px}
  .gear{display:block;font-size:19px;cursor:pointer;padding:5px}
  .ab-act,.ab-tag,.ab-live,.ab-search,.nav-eco{display:none}

  /* --- Écrans --- */
  .screens{flex:1;position:relative;overflow:hidden;min-height:0}
  .screen{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;background:#fafbfc;-webkit-overflow-scrolling:touch}
  .screen.active{display:flex}
  .screen-header{padding:13px 18px 11px;background:#fff;border-bottom:1px solid var(--border)}
  .screen-header h2{font-size:18px;color:var(--ink)}
  .screen-header p{font-size:12.5px;color:var(--grey);margin-top:2px}
  .content{padding:16px 18px 24px;display:flex;flex-direction:column;gap:12px}

  /* --- Barre de vie du quartier --- */
  .statsbar{flex:0 0 auto;display:flex;background:#fff;border-top:1px solid var(--border);padding:6px 2px 5px}
  .statsbar .sb{flex:1;text-align:center;font-size:9.5px;color:var(--grey);line-height:1.25;cursor:pointer}
  .statsbar .sb b{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
  .statsbar .sb.hot b{color:var(--green)}
  @media (min-width:1000px){.statsbar{display:none}}

  /* --- Tab bar (bas) --- */
  .tabbar{flex:0 0 auto;display:flex;background:#fff;border-top:1px solid var(--border);z-index:45;padding-bottom:env(safe-area-inset-bottom)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--grey);font-size:9.5px;user-select:none;padding:7px 0 6px}
  .tab .ico{font-size:19px;line-height:1}
  .tab.active{color:var(--green);font-weight:700}

  /* --- Boutons / cartes / pastilles --- */
  .btn{display:block;width:100%;padding:13px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;text-align:center;transition:filter .15s,transform .1s}
  .btn:active{filter:brightness(.9);transform:scale(.985)}
  .btn-green{background:var(--green);color:#fff}
  .btn-blue{background:var(--blue);color:#fff}
  .btn-red{background:var(--red);color:#fff}
  .btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--border)}
  .btn-ghost{background:transparent;color:var(--grey);font-weight:500}
  .card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
  .card h3{font-size:14.5px;color:var(--ink);margin-bottom:4px}
  .card p{font-size:12.5px;color:var(--grey);line-height:1.45}
  .pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
  .pill-green{background:var(--green-light);color:var(--green)}
  .pill-blue{background:var(--blue-light);color:var(--blue)}
  .pill-red{background:var(--red-light);color:var(--red)}
  .pill-orange{background:var(--orange-light);color:var(--orange)}
  .info-strip{font-size:11.5px;color:var(--grey);background:var(--grey-light);border-radius:10px;padding:9px 12px;line-height:1.45}
  /* 16px minimum : sous ce seuil, iOS zoome tout seul au focus et l'écran reste coupé */
  input.field,select.field,textarea.field{width:100%;padding:11px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:16px;color:var(--ink);outline:none}
  input.field:focus{border-color:var(--blue)}
  /* Correctif style formulaires (select natif mal rendu, ex : Entraide du quartier) */
  select.field{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7480' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;padding-right:36px;cursor:pointer}
  .hist-item .btn{flex-shrink:0}
  a.btn{text-decoration:none}

  /* Messagerie */
  .chatbox{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0 10px}
  .bub{max-width:80%;padding:9px 12px;border-radius:15px;font-size:13.5px;line-height:1.35;word-break:break-word}
  .bub.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
  .bub.yo{align-self:flex-start;background:var(--grey-light);color:var(--ink);border-bottom-left-radius:4px}
  .bub .bt{display:block;font-size:9.5px;opacity:.7;margin-top:2px;text-align:right}
  .chatrow{display:flex;gap:8px}
  /* Emojis + réponses rapides : comme les grandes messageries */
  .emorow{display:flex;gap:2px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
  .emorow span{font-size:22px;padding:4px 7px;border-radius:9px;cursor:pointer;flex:0 0 auto;transition:transform .12s}
  .emorow span:active{transform:scale(1.35)}
  .qrow{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}
  .qr-btn{border:1.5px solid var(--green);background:var(--green-light);color:var(--ink);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;transition:transform .1s}
  .qr-btn:active{transform:scale(.94)}
  /* Interactions sociales du mur : j'aime, commentaires */
  .post-card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:10px 12px;margin-bottom:9px}
  .post-acts{display:flex;gap:14px;margin-top:7px;font-size:12.5px;color:var(--grey)}
  .post-acts span{cursor:pointer;user-select:none;transition:transform .1s;display:inline-flex;align-items:center;gap:4px}
  .post-acts span:active{transform:scale(1.2)}
  .post-acts .liked{color:#e0245e;font-weight:700}
  .post-com{border-left:2.5px solid var(--border);margin:7px 0 0 4px;padding:2px 0 2px 9px;font-size:12px}
  .chatrow .field{flex:1}

  /* --- Carte Leaflet --- */
  .map-wrap{flex:1;position:relative;min-height:0}
  #map{position:absolute;inset:0;z-index:1}
  .sos-desk{display:none;position:fixed;left:24px;bottom:24px;z-index:96;height:56px;width:56px;border-radius:28px;background:var(--red);color:#fff;border:none;box-shadow:0 4px 16px rgba(0,0,0,.22);font-size:22px;font-weight:800;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;animation:sosPulse 2.2s ease-in-out infinite}
  .sos-desk:active{transform:scale(.94)}
  .sos-desk:hover{transform:scale(1.05)}
  @keyframes sosPulse{0%,100%{box-shadow:0 4px 16px rgba(192,57,43,.4)}50%{box-shadow:0 4px 24px rgba(192,57,43,.85)}}
  /* SOS visible à TOUTES les tailles d'écran et de zoom navigateur (il ne
     disparaît plus quand la fenêtre rétrécit). Sur petit écran, il remonte
     au dessus de la barre d'onglets. Masqué en conduite et en immersion. */
  .sos-desk{display:flex}
  @media (max-width:999px){.sos-desk{left:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));height:50px;width:50px;font-size:19px}}
  body:has(.app.nav) .sos-desk,body:has(.app.immersion) .sos-desk{display:none}
  /* Les fiches et panneaux passent AU DESSUS du SOS : plus de chevauchement d'affichage */
  .sos-desk{z-index:55}
  .map-legend{position:absolute;top:62px;left:10px;z-index:40;background:#fff;border-radius:10px;padding:7px 10px;font-size:10.5px;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:3px}
  .map-legend [data-f]{cursor:pointer;user-select:none;-webkit-user-select:none}
  .map-legend [data-f].off{opacity:.35;text-decoration:line-through}
  /* Légende REPLIABLE : repliée par défaut sur téléphone pour dégager la carte */
  .map-legend.min [data-f]{display:none}
  .map-legend.min{padding:6px 10px}
  .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
  .marker-place{background:var(--blue);border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 0 6px rgba(29,95,180,.28),0 2px 8px rgba(0,0,0,.4);animation:breathe 2s ease-in-out infinite;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
  .me-halo{position:absolute;inset:-7px;border-radius:50%;background:rgba(122,30,180,.16);border:2px solid rgba(122,30,180,.35);animation:breathe 2s ease-in-out infinite}
  /* Urgence citoyenne : marqueur rouge qui pulse fort, impossible à rater */
  .sos-marker{width:34px;height:34px;background:var(--red);color:#fff;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 0 8px rgba(180,35,24,.3),0 2px 10px rgba(0,0,0,.4);animation:sospulse 1s ease-in-out infinite}
  @keyframes sospulse{0%,100%{transform:scale(1);box-shadow:0 0 0 8px rgba(180,35,24,.3)}50%{transform:scale(1.15);box-shadow:0 0 0 16px rgba(180,35,24,.15)}}
  /* Les voitures des voisins GLISSENT entre deux positions (temps réel façon Uber) ;
     la transition est coupée pendant le zoom pour ne pas déformer l'animation Leaflet */
  .oth-marker{transition:transform 1.4s linear}
  .nozoomtrans .oth-marker{transition:none !important}
  @keyframes breathe{0%,100%{box-shadow:0 0 0 4px rgba(29,95,180,.18),0 1px 6px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 10px rgba(29,95,180,.28),0 1px 6px rgba(0,0,0,.35)}}
  .marker-pmr{background:var(--orange);border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 0 6px rgba(196,104,10,.25),0 2px 8px rgba(0,0,0,.4);color:#fff;display:flex;align-items:center;justify-content:center}
  .marker-me{background:#7a1eb4;border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 0 6px rgba(122,30,180,.2)}
  .marker-new{animation:pulse 1.2s ease-out 4}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(29,95,180,.55)}100%{box-shadow:0 0 0 18px rgba(29,95,180,0)}}
  .car-emoji{font-size:24px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

  /* --- FABs carte + indicateur de trajet --- */
  .fabs{position:absolute;right:12px;bottom:16px;z-index:41;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .fabs-round,.fabs-go{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .fabs-round,.fabs-go{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .fab{height:46px;min-width:46px;border-radius:23px;background:#fff;border:none;box-shadow:0 4px 16px rgba(0,0,0,.22);font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s}
  .fab:active{transform:scale(.94)}
  .fab-go{background:var(--green);color:#fff;font-size:13.5px;font-weight:700;padding:0 16px;gap:7px}
  .trip-chip{position:absolute;top:62px;right:10px;z-index:41;background:var(--ink);color:#fff;border-radius:20px;padding:8px 13px;font-size:12px;font-weight:600;display:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}
  .trip-chip.on{display:block}

  /* --- Vue navigation façon Waze --- */
  .navtop{position:absolute;top:10px;left:12px;right:12px;z-index:47;display:none;background:var(--ink);color:#fff;border-radius:14px;padding:11px 14px;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .navbot{position:absolute;bottom:14px;left:12px;right:12px;z-index:47;display:none;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border-radius:16px;padding:11px 14px;box-shadow:0 10px 34px rgba(0,0,0,.28)}
  .navbot .nb-dist{font-size:22px;font-weight:800;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums}
  .navbot .nb-sub{font-size:11.5px;color:var(--grey)}
  /* Suivi Uber côté libérateur : la voiture se rapproche en direct */
  .apprbot{position:absolute;bottom:14px;left:12px;right:12px;z-index:46;display:none;align-items:center;gap:10px;background:#fff;border-left:5px solid var(--green);border-radius:16px;padding:11px 14px;box-shadow:0 10px 34px rgba(0,0,0,.25)}
  .apprbot.on{display:flex}
  .apprbot .ab-d{font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
  .apprbot .ab-s{font-size:11.5px;color:var(--grey)}
  .app.nav .apprbot{display:none}
  .nav-fabs{position:absolute;bottom:92px;right:12px;z-index:47;display:none;flex-direction:column;gap:9px}
  .alert-pick{position:absolute;bottom:92px;left:12px;right:70px;z-index:48;display:none;gap:8px;background:#fff;border-radius:14px;padding:10px;box-shadow:0 10px 34px rgba(0,0,0,.28);justify-content:space-around}
  .alert-pick.open{display:flex}
  .alert-pick button{border:none;background:var(--grey-light);border-radius:12px;padding:8px 6px;font-size:11px;cursor:pointer;flex:1;line-height:1.3}
  .alert-pick button span{display:block;font-size:20px}
  .nav-quit{position:absolute;top:calc(58px + env(safe-area-inset-top,0px));right:12px;z-index:90;display:none;background:var(--red);color:#fff;border:none;border-radius:50%;width:46px;height:46px;font-size:20px;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;align-items:center;justify-content:center}
  .app.nav .nav-quit{display:flex}
  .app.nav .navtop{display:block}
  .app.nav .navbot{display:flex}
  .app.nav .nav-fabs{display:flex}
  .app.nav .fabs,.app.nav .status-card,.app.nav .map-legend,.app.nav .rdv-banner,.app.nav .statsbar,.app.nav .mapsearch{display:none}
  /* Immersion 3D : carte inclinée façon Waze pendant la conduite */
  .app.nav.nav3d .map-wrap{perspective:1000px;overflow:hidden}
  .app.nav.nav3d #map{transform:rotateX(38deg) scale(1.75);transform-origin:center 72%;transition:transform .6s ease}
  /* Marqueur d'alerte v2 : pastille blanche 32 px, bien plus facile à toucher */
  .marker-alert{width:32px;height:32px;background:#fff;border:2.5px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.35)}
  .fab-zoom{font-size:22px;font-weight:800;color:var(--ink);background:#fff}

  /* ============================================================
     MODE IMMERSION : survol cinématique du quartier (bouton 🌍)
     La carte s'incline, l'interface s'efface, bandeaux cinéma,
     la caméra vole de point en point avec commentaire et voix.
     ============================================================ */
  .app.immersion .fabs,.app.immersion .status-card,.app.immersion .map-legend,.app.immersion .rdv-banner,
  .app.immersion .statsbar,.app.immersion .mapsearch,.app.immersion .trip-chip,.app.immersion .apprbot{display:none !important}
  .app.immersion .map-wrap{perspective:1100px;overflow:hidden}
  .app.immersion #map{transform:rotateX(24deg) scale(1.45);transform-origin:center 68%;transition:transform 1.6s cubic-bezier(.25,.8,.3,1)}
  /* Ambiance selon l'heure : crépuscule doré, nuit profonde (tuiles seulement) */
  .app.immersion.imm-dusk .leaflet-tile-pane{filter:sepia(.32) saturate(1.15) brightness(.96)}
  .app.immersion.imm-night .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.65)}
  #immOv{position:absolute;inset:0;z-index:52;display:none;pointer-events:none}
  .app.immersion #immOv{display:block}
  #immOv .imm-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(6,12,20,.55) 100%)}
  #immOv .imm-bar{position:absolute;left:0;right:0;height:56px}
  #immOv .imm-bar.top{top:0;background:linear-gradient(#04070c,rgba(4,7,12,0))}
  #immOv .imm-bar.bot{bottom:0;background:linear-gradient(rgba(4,7,12,0),#04070c)}
  #immCard{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:53;display:none;width:min(440px,93%);
    background:rgba(9,15,23,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;
    border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:14px 16px;box-shadow:0 18px 54px rgba(0,0,0,.55)}
  .app.immersion #immCard{display:block}
  #immCard.slide{animation:immin .55s ease}
  @keyframes immin{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%)}}
  #immCard .im-head{display:flex;gap:11px;align-items:flex-start}
  #immCard .im-ico{font-size:30px;line-height:1.1}
  #immCard h4{font-size:15.5px;margin:1px 0 3px;letter-spacing:-.2px}
  #immCard p{font-size:12.5px;opacity:.88;line-height:1.5;margin:0}
  #immCard .im-dots{display:flex;gap:4px;margin-top:10px}
  #immCard .im-dots span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.22);transition:background .3s}
  #immCard .im-dots span.on{background:#ffd08a}
  #immCard .im-ctrl{display:flex;gap:8px;margin-top:11px}
  #immCard .im-ctrl button{flex:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:9px 4px;font-size:12.5px;font-weight:600;cursor:pointer}
  #immCard .im-ctrl button:active{transform:scale(.96)}
  #immCard .im-ctrl .imx{background:rgba(180,35,24,.85);border:none}
  .fab-imm{background:linear-gradient(135deg,#0e7a3e,#155c8a);color:#fff;font-size:19px}
  .marker-radar{font-size:15px;line-height:1;opacity:.85}
  .status-card{display:none}
  @media (min-width:1000px){
    .status-card{display:block;position:absolute;left:16px;bottom:20px;z-index:41;width:344px;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 8px 30px rgba(0,0,0,.18);max-height:calc(100% - 90px);overflow-y:auto}
    .status-card h4{font-size:16px;color:var(--ink);margin-bottom:6px}
    .status-card .st-line{font-size:12.5px;color:var(--grey);line-height:1.5;padding:4px 0;border-bottom:1px solid var(--grey-light);display:flex;gap:8px;align-items:flex-start}
    .status-card .st-line:last-of-type{border-bottom:none}
    .status-card .st-line b{color:var(--ink)}
    .status-card .btn{padding:10px;font-size:13.5px;margin-top:8px}
  }

  /* --- Bottom sheet + overlay --- */
  .sheet-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:75; /* au dessus de la recherche (70) : plus jamais coupee */opacity:0;pointer-events:none;transition:opacity .25s}
  .sheet-overlay.open{opacity:1;pointer-events:auto}
  .sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.18);padding:12px 18px calc(16px + env(safe-area-inset-bottom));z-index:76;max-height:78%;overflow-y:auto;transform:translateY(105%);transition:transform .3s ease;visibility:hidden}
  .sheet.open{transform:translateY(0);visibility:visible}
  .sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 10px;cursor:pointer}
  .close-x{position:absolute;top:10px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--grey-light);color:var(--grey);border:none;font-size:14px;font-weight:700;cursor:pointer;line-height:1;z-index:2}

  /* --- Panneau activité --- */
  .feed-panel{position:absolute;top:0;right:0;bottom:0;width:86%;max-width:340px;background:#fff;z-index:77;box-shadow:-8px 0 30px rgba(0,0,0,.2); /* au dessus de la recherche : plus jamais transperce */transform:translateX(110%);transition:transform .3s ease;display:flex;flex-direction:column;visibility:hidden}
  .feed-panel.open{transform:none;visibility:visible}
  .feed-head{padding:14px 18px 10px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
  .feed-head h3{font-size:15px;color:var(--ink)}
  .feed-list{flex:1;overflow-y:auto;padding:8px 16px calc(10px + env(safe-area-inset-bottom))}
  .feed-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--grey-light);font-size:12.5px;color:var(--ink);line-height:1.4}
  .feed-item .f-ico{font-size:18px}
  .feed-item .f-t{color:var(--grey);font-size:10.5px;display:block;margin-top:2px}

  /* --- Toasts empilés (fermeture fiable : ✕, tap, auto) --- */
  .toasts{position:absolute;top:58px;left:12px;right:12px;z-index:85;display:flex;flex-direction:column;gap:8px;pointer-events:none}
  .toastn{pointer-events:auto;background:var(--ink);color:#fff;border-radius:14px;padding:11px 12px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(-14px);transition:opacity .28s ease,transform .28s ease;cursor:pointer}
  .toastn.show{opacity:1;transform:none}
  .toastn.hide{opacity:0;transform:translateY(-14px)}
  .toastn .t-ico{font-size:18px}
  .toastn .t-tx{flex:1;min-width:0}
  .toastn b{display:block;font-size:13px;margin-bottom:1px}
  .toastn .t-x{background:rgba(255,255,255,.14);border:none;color:#fff;width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;flex:0 0 22px;line-height:1}

  /* --- Marqueur borne électrique + bannière demain matin --- */
  .marker-elec{background:var(--green);color:#fff;border:2.5px solid #fff;border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1}
  .rdv-banner{display:none;align-items:center;gap:8px;margin-top:8px;background:linear-gradient(90deg,#fff7e8,#fdf1e2);border:1px solid #f0ddc2;border-radius:11px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--orange);cursor:pointer;overflow:hidden}
  .rdv-banner span:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .rdv-banner .r-sp{flex:1}
  .rdv-banner:hover{filter:brightness(.98)}

  /* --- Tutoriel --- */
  .tuto{position:absolute;inset:0;z-index:78;background:rgba(14,18,22,.62);display:none;align-items:flex-end;justify-content:center;padding:18px;overflow-y:auto}
  .tuto.open{display:flex}
  .tuto-card{background:#fff;border-radius:18px;padding:20px 18px calc(16px + env(safe-area-inset-bottom));width:100%;box-shadow:0 14px 44px rgba(0,0,0,.35);text-align:center;max-height:calc(100% - 16px);overflow-y:auto}
  .tuto-card .tu-ico{font-size:42px;display:block;margin-bottom:8px}
  .tuto-card h3{font-size:17px;color:var(--ink);margin-bottom:6px}
  .tuto-card p{font-size:13px;color:var(--grey);line-height:1.5;min-height:58px}
  .tuto-dots{display:flex;gap:6px;justify-content:center;margin:12px 0}
  .tuto-dots span{width:7px;height:7px;border-radius:50%;background:var(--border)}
  .tuto-dots span.on{background:var(--green);width:18px;border-radius:4px}
  .tuto-row{display:flex;gap:10px}
  .tuto-row .btn{flex:1}

  /* --- Minuteurs / étapes / attestations --- */
  .timer-ring{width:180px;height:180px;margin:8px auto;position:relative}
  .timer-ring svg{transform:rotate(-90deg);width:180px;height:180px}
  .timer-ring .tval{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .timer-ring .tval .big{font-size:34px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .timer-ring .tval .small{font-size:11px;color:var(--grey);margin-top:2px}
  .steps{display:flex;flex-direction:column}
  .step{display:flex;gap:12px}
  .step .rail{display:flex;flex-direction:column;align-items:center}
  .step .n{width:26px;height:26px;border-radius:50%;background:var(--grey-light);color:var(--grey);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 26px}
  .step.done .n{background:var(--green);color:#fff}
  .step.now .n{background:var(--green-light);color:var(--green);border:2px solid var(--green)}
  .step .line{width:2px;flex:1;background:var(--border);min-height:14px}
  .step .stxt{padding-bottom:14px;font-size:12.5px;color:var(--grey)}
  .step .stxt b{color:var(--ink);font-size:13px;display:block}
  .progressbar{height:6px;border-radius:3px;background:var(--grey-light);overflow:hidden;margin-top:8px}
  .progressbar>div{height:100%;background:var(--green);width:0%;transition:width .5s linear;border-radius:3px}
  .attestation{border:1.5px dashed var(--green);background:var(--green-light);border-radius:14px;padding:14px;font-size:12px;color:var(--ink);line-height:1.6}
  .attestation h4{font-size:13px;color:var(--green-dark);margin-bottom:6px}
  .stars{display:flex;gap:8px;justify-content:center;font-size:30px;cursor:pointer;user-select:none}
  .stars span{color:#d5dae0;transition:color .1s,transform .1s}
  .stars span.on{color:#f5b301;transform:scale(1.1)}
  .hist-item{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--grey-light);font-size:12.5px;gap:8px}
  .hist-item:last-child{border-bottom:none}
  .hist-item .h-l b{display:block;color:var(--ink);font-size:13px}
  .hist-item .h-l span{color:var(--grey);font-size:11.5px}
  .avatar{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto}
  .kpis{display:flex;gap:10px}
  .kpi{flex:1;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}
  .kpi .v{font-size:18px;font-weight:700;color:var(--ink)}
  .kpi .l{font-size:10.5px;color:var(--grey)}
  .upload-zone{border:2px dashed var(--border);border-radius:14px;padding:26px 14px;text-align:center;color:var(--grey);font-size:13px;cursor:pointer;background:#fff}
  .upload-zone:hover{border-color:var(--blue)}
  .upload-zone .u-ico{font-size:30px;display:block;margin-bottom:6px}
  .spinner{width:34px;height:34px;border:4px solid var(--grey-light);border-top-color:var(--blue);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .center{text-align:center}
  .mt8{margin-top:8px}

  /* --- Accueil : overlay plein écran --- */
  .onboarding{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;overflow-y:auto;background:linear-gradient(170deg,var(--green-dark) 0%,var(--green) 58%,#2f9e57 100%);transition:opacity .35s,visibility .35s}
  .onboarding.hidden{opacity:0;visibility:hidden;pointer-events:none}
  .ob-brand{padding:calc(30px + env(safe-area-inset-top)) 24px 0;text-align:center;color:#fff}
  .ob-brand .ob-logo{font-size:44px;line-height:1;margin-bottom:10px;display:block}
  .ob-brand .ob-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.16);border-radius:20px;padding:5px 14px}
  .ob-inner{margin-top:auto;padding:20px 24px calc(24px + env(safe-area-inset-bottom));color:#fff}
  .ob-inner h2{font-size:clamp(22px,6vw,27px);line-height:1.18;margin-bottom:8px}
  .ob-inner>p{font-size:13.5px;opacity:.92;line-height:1.5;margin-bottom:16px}
  .ob-feats{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
  .ob-feat{display:flex;gap:12px;align-items:center;font-size:13px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 14px;line-height:1.35}
  .ob-legal{font-size:10.5px;opacity:.75;text-align:center;margin-top:11px;line-height:1.4}
  .btn-white{background:#fff;color:var(--green-dark)}
  /* CTA d'arrivée : IMPOSSIBLE à rater  couleur chaude contrastée sur le vert,
     grande taille, ombre portée et respiration douce qui attire l'œil */
  .ob-cta{display:block;width:100%;background:linear-gradient(180deg,#ffc25c,#ff9d2e);color:#4a2c00;font-size:18px;font-weight:800;padding:17px 16px;border:none;border-radius:15px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.25);animation:ctapulse 2.2s ease-in-out infinite;text-align:center;line-height:1.25}
  .ob-cta small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-top:2px}
  .ob-cta:active{transform:scale(.98)}
  @keyframes ctapulse{0%,100%{transform:scale(1);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.25)}50%{transform:scale(1.025);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.18)}}
  .ob-alt{display:block;width:100%;background:transparent;border:none;color:#fff;opacity:.85;font-size:13.5px;font-weight:600;padding:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

  /* --- Inscription / connexion --- */
  /* PIÈGE VERTICAL : justify-content:center + overflow => haut/bas coupés et
     inatteignables quand le contenu dépasse. On centre avec des marges auto :
     ça se centre si ça tient, ça SCROLLE proprement sinon. */
  .auth{position:absolute;inset:0;z-index:82;display:none;flex-direction:column;overflow-y:auto;background:linear-gradient(170deg,var(--green-dark) 0%,var(--green) 58%,#2f9e57 100%);padding:22px}
  .auth::before{content:'';margin-top:auto}
  .auth::after{content:'';margin-bottom:auto}
  .auth.open{display:flex}
  .auth-logo{text-align:center;color:#fff;margin-bottom:14px}
  .auth-logo .al{font-size:38px;display:block;margin-bottom:6px}
  .auth-logo b{font-size:17px}
  .auth-card{background:#fff;border-radius:18px;padding:18px;box-shadow:0 14px 44px rgba(0,0,0,.3)}
  .auth-tabs{display:flex;background:var(--grey-light);border-radius:11px;padding:4px;margin-bottom:14px}
  .auth-tabs button{flex:1;border:none;background:transparent;padding:9px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--grey);cursor:pointer}
  .auth-tabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
  .auth-card .field{margin-bottom:10px}
  .auth-err{display:none;background:var(--red-light);color:var(--red);border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:10px;line-height:1.4}
  .auth-err.on{display:block}
  .auth-note{font-size:10.5px;color:#fff;opacity:.8;text-align:center;margin-top:12px;line-height:1.45}

  /* =========================================================
     MOBILE : app plein écran + réglages en tiroir
     ========================================================= */
  /* Jusqu'à 999 px : application plein écran (fini la « maquette téléphone » sur
     fond sombre qui s'affichait sur les portables avec mise à l'échelle Windows). */
  @media (max-width:999px){
    /* VERROU LARGEUR : rien ne peut dépasser l'écran (sinon le flex centre
       le contenu trop large et coupe des deux côtés : « Ville » à droite,
       ronds de légende à gauche). */
    .layout{padding:0;gap:0;align-items:stretch;justify-content:center;width:100vw;max-width:100vw;overflow-x:hidden;height:100vh;height:100dvh}
    /* CENTRAGE : l'app est une colonne centrée (max 560 px)  sur téléphone elle
       remplit l'écran, sur fenêtre plus large elle reste centrée comme une app */
    /* Hauteur PLEIN ÉCRAN avec repli : 100vh d'abord (partout), 100dvh si géré
       (suit la barre Safari). Sans ce repli, l'app gardait sa hauteur « maquette »
       de 800 px max → bande noire en bas, carte comprimée en haut. */
    .device{width:100vw;max-width:560px;min-width:0;height:100vh;height:100dvh;border-radius:0;padding:0;box-shadow:none;flex:1 1 auto;margin:0 auto}
    .app{border-radius:0;width:100%;max-width:100%;min-width:0;overflow-x:hidden}
    .screens,.screen,.content,.screen-header,.appbar,.tabbar,.statsbar{min-width:0;max-width:100vw}
    .screen-header>div{width:100%;min-width:0}
    .card,.info-strip,.hist-item{min-width:0;max-width:100%}
    .hist-item .h-l{min-width:0;overflow:hidden}
    .gear{display:block}
    .side{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:75vh;max-height:75dvh;background:#191d23;z-index:95;border-radius:18px 18px 0 0;padding:16px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .3s ease;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
    .side.open{transform:none}
    .side h1{font-size:17px}
    .side-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:94;opacity:0;pointer-events:none;transition:opacity .25s}
    .side-overlay.open{opacity:1;pointer-events:auto}
    /* Mobile : cercles 📡🎯 empilés à droite, puis les 2 gestes clés côte à côte,
       pleine largeur avec marges garanties  rien ne touche les bords */
    .fabs{left:12px;right:12px;bottom:12px;align-items:stretch}
    .fabs-round{align-self:flex-end}
    .fabs-go{flex-direction:row;width:100%;gap:8px;align-items:stretch}
    .fab-go{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  }
  /* Très petits écrans : tout doit tenir sans déborder */
  @media (max-width:430px){
    .map-legend{font-size:9.5px;padding:6px 8px;max-width:56vw;left:8px}
    .map-legend span{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .map-legend .dot{flex:0 0 9px}
    #cityChip{padding:8px 10px;font-size:12px}
    .fab-go{font-size:12.5px;padding:0 8px;height:44px}
    .fab{height:40px;min-width:40px;font-size:17px}
    .appbar .a-name small{display:none}
    .trip-chip{font-size:11px;padding:6px 10px;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .statsbar .sb{font-size:9px;min-width:0;overflow:hidden}
    .statsbar .sb b{font-size:13px}
    /* Entraide du quartier : les boutons passent sous le texte, rien ne déborde */
    .hist-item{flex-wrap:wrap;row-gap:6px}
    .hist-item .h-l{flex:1 1 100%;min-width:0}
    .hist-item .btn{width:100% !important;text-align:center}
    .hist-item .pill{margin-left:auto}
    .kpis{gap:7px}
    .kpi{padding:9px 6px}
    .kpi .v{font-size:15px}
    .kpi .l{font-size:9.5px}
    .card{padding:12px}
    .card h3{font-size:14px}
    .card p{font-size:12.5px}
    .screen-header h2{font-size:18px}
  }
  @media (min-width:1000px){
    .side-overlay{display:none}
    .side .s-close{display:none}
  }
  .side .s-close{background:none;border:none;color:#8b96a3;font-size:20px;cursor:pointer;position:absolute;top:12px;right:16px}

  /* =========================================================
     DESKTOP ≥ 1100px : véritable interface web produit
     Carte toujours visible au centre, modules en panneau à droite,
     navigation à gauche, barre du haut avec profil. Panneau démo masqué.
     ========================================================= */
  @media (min-width:1000px){
    .layout{align-items:stretch;padding:0;gap:0}
    .side{display:none}
    .device{flex:1;width:auto;height:100vh;border-radius:0;padding:0;box-shadow:none;background:transparent}
    .app{border-radius:0;display:grid;grid-template-columns:232px 1fr;grid-template-rows:60px 1fr}
    .appbar{grid-column:1/3;grid-row:1;height:60px;padding:0 20px}
    .appbar .a-logo{font-size:23px}
    .appbar .a-name{font-size:16px}
    .ab-act{display:inline-flex !important;align-items:center;gap:6px;background:var(--green-light);color:var(--green);border:none;border-radius:20px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;margin-right:4px}
    .ab-act:hover{filter:brightness(.95)}
    .content{padding:22px 26px}
    .screen-header{padding:16px 22px}
    .card p{font-size:13px}
    .a-user{display:flex !important;align-items:center;gap:9px;cursor:pointer;padding:6px 12px 6px 7px;border-radius:24px;border:1.5px solid var(--border)}
    .a-user:hover{background:var(--grey-light)}
    .a-user .au-av{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
    .a-user .au-nm{font-size:13.5px;font-weight:600;color:var(--ink)}
    .tabbar{grid-column:1;grid-row:2;flex-direction:column;justify-content:flex-start;gap:4px;border-top:none;border-right:1px solid var(--border);padding:14px 10px}
    /* Navigation parlante : chaque entrée dit à quoi elle sert */
    .tab{flex:0 0 auto;display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:center;justify-content:flex-start;text-align:left;padding:11px 14px;font-size:14px;font-weight:600;border-radius:11px}
    .tab .ico{font-size:20px;grid-row:1/3}
    .tab::after{content:attr(data-d);grid-column:2;font-size:11px;color:var(--grey);font-weight:500;line-height:1.3}
    .tab.active{background:var(--green-light)}
    /* Bandeau : devise + recherche d'adresse + vie du quartier en direct */
    .ab-tag{display:inline;font-size:13.5px;color:var(--grey);font-style:italic;margin-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ab-live{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink);background:var(--grey-light);border-radius:20px;padding:8px 15px;margin-right:10px;white-space:nowrap}
    .ab-live b{color:var(--green)}
    .ab-search{display:block;position:relative;width:min(360px,30vw);margin-left:18px;flex:0 1 auto}
    .ab-search input{width:100%;padding:9px 15px;border:1.5px solid var(--border);border-radius:20px;font-size:13.5px;outline:none;background:var(--grey-light);color:var(--ink)}
    .ab-search input:focus{background:#fff;border-color:var(--green)}
    .ab-results{display:none;position:absolute;top:42px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.18);z-index:99;overflow:hidden}
    .abr{padding:11px 15px;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--grey-light)}
    .abr:last-child{border-bottom:none}
    .abr:hover{background:var(--grey-light)}
    /* Résumé personnel ancré en bas de la navigation */
    .nav-eco{display:block;margin-top:auto;background:var(--green-light);border-radius:13px;padding:12px 14px;font-size:12px;line-height:1.7;color:var(--ink)}
    /* Carte permanente + modules en dock droit */
    .screens{grid-column:2;grid-row:2;display:flex}
    .screen{position:static}
    #screen-carte{display:flex !important;flex:1;min-width:0}
    .screen:not(#screen-carte){display:none;width:430px;flex:0 0 430px;border-left:1px solid var(--border);overflow-y:auto;background:#fff}
    .screen.active:not(#screen-carte){display:flex}
    .screen:not(#screen-carte) .content{max-width:none;margin:0}
    /* Fiche latérale pleine hauteur, comme un panneau produit */
    .sheet{left:auto;right:16px;bottom:16px;top:76px;width:430px;border-radius:18px;max-height:none}
    .sheet-overlay{background:rgba(0,0,0,.12)}
    .toasts{left:auto;right:20px;top:74px;width:380px}
    .feed-panel{max-width:400px;top:60px}
    .onboarding,.auth{align-items:center} /* centrage horizontal (axe transverse) uniquement */
    .ob-brand{padding-top:56px}
    .ob-inner{max-width:560px;width:100%;margin:auto auto 0}
    .auth-card,.auth-logo,.auth-note{width:100%;max-width:430px;margin-left:auto;margin-right:auto}
    .tuto{align-items:center}
    .tuto-card{max-width:480px}
    .fabs{right:24px;bottom:24px}
    .map-legend{top:66px;left:14px}
    /* La carte respire : plein écran, sans en-tête mobile (infos dans le bandeau) */
    #screen-carte .screen-header{display:none}
    #screen-carte .map-wrap{height:100%}
    /* Les 2 gestes clés vivent dans le panneau « Bonjour » : pas de doublon flottant */
    .fab-go,.fabs-go{display:none}
    /* EN CONDUITE, on garde le CONTRÔLE de la page : le poste de pilotage reste
       affiché (trajet, 3D, voix, partage, stop) au lieu de tout céder à la carte */
    .app.nav .status-card{display:block}
    /* Dock : en-tête clair avec fermeture évidente ✕ */
    .screen:not(#screen-carte){width:440px;flex:0 0 440px}
    .screen:not(#screen-carte) .screen-header{position:relative;border-bottom:1px solid var(--border);padding-right:56px}
    .dock-x{display:flex !important;align-items:center;justify-content:center;position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:none;background:var(--grey-light);color:var(--grey);font-size:15px;font-weight:700;cursor:pointer}
    .dock-x:hover{background:var(--border);color:var(--ink)}
  }
  .dock-x{display:none}
  /* Écrans desktop étroits (1000-1279 px) : le bandeau garde l'essentiel */
  @media (min-width:1000px) and (max-width:1279px){
    .ab-tag{display:none !important}
    .ab-live{font-size:12px;padding:7px 11px}
  }
  .a-user{display:none}

  /* ===== Grand écran ≥ 1400px : fil d'activité ancré en 3e colonne ===== */
  @media (min-width:1400px){
    .app{grid-template-columns:232px 1fr 340px}
    .appbar{grid-column:1/4}
    .feed-panel{position:static;grid-column:3;grid-row:2;transform:none;visibility:visible;box-shadow:none;border-left:1px solid var(--border);max-width:none;width:auto}
    .feed-panel .close-x{display:none}
    .sheet{right:360px}
    .toasts{right:360px}
    .feedbell{display:none} /* le fil est ancré : la cloche devient inutile, 💬 reste */
  }

  /* ===== RESPONSIVE ORDINATEUR : plus jamais d'ascenseur horizontal =====
     Le fil d'activité replié (translation hors écran) et les éléments du
     bandeau pouvaient déborder et créer une barre de défilement latérale. */
  html,body{overflow-x:hidden}
  @media (min-width:1000px){
    .app{overflow:hidden}
    .appbar{min-width:0}
    .ab-tag{min-width:0;flex:0 1 auto}
    .ab-search{flex:0 1 300px;min-width:140px}
    .screen:not(#screen-carte){width:min(430px,42vw);flex:0 0 min(430px,42vw)}
    .sheet{width:min(430px,42vw)}
  }
  @media (min-width:1000px) and (max-width:1260px){
    .ab-tag{display:none} /* la devise s'efface avant de faire déborder le bandeau */
    .ab-live{font-size:12px;padding:7px 10px}
  }

  /* ================================================================
     REFONTE v2  couche de finition visuelle (sans toucher au layout)
     Palette affinée, ombres douces, arrondis généreux, focus visibles.
     ================================================================ */
  :root{
    --green:#0e7a3e; --green-dark:#0a5a2d; --green-light:#e6f4ea;
    --grey-light:#f4f6f5; --border:#e2e8e4;
    --shadow-1:0 1px 2px rgba(23,48,31,.06),0 4px 14px -6px rgba(23,48,31,.10);
    --shadow-2:0 6px 24px -8px rgba(23,48,31,.22);
  }
  body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  .card{border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow-1)}
  .card h3{letter-spacing:-.2px}
  .screen-header h2{letter-spacing:-.4px}
  .btn{border-radius:12px;font-weight:700}
  .btn-green{box-shadow:0 4px 14px -4px rgba(14,122,62,.45)}
  .btn:hover{filter:brightness(1.03)}
  .field{border-radius:11px;transition:border-color .12s ease,box-shadow .12s ease}
  .field:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(14,122,62,.14)}
  .kpi{border-radius:14px;box-shadow:var(--shadow-1)}
  .pill{font-weight:700}
  .sheet{border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:var(--shadow-2)}
  .toast{border-radius:14px;box-shadow:var(--shadow-2)}
  .hist-item{border-radius:12px}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:#c4cfc8;border-radius:8px;border:2px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:#a9b6ae;background-clip:content-box}
  ::-webkit-scrollbar-track{background:transparent}
  .v2-badge{display:inline-block;background:var(--green-light);color:var(--green-dark);font-size:9.5px;font-weight:800;letter-spacing:.6px;border-radius:5px;padding:2px 6px;vertical-align:middle;margin-left:6px}
  /* ===== MOBILE : L'ESSENTIEL D'ABORD =====
     Les longs pavés explicatifs des cartes se replient sur 3 lignes avec
     « Voir plus » : l'action reste visible, l'explication reste accessible. */
  @media (max-width:999px){
    .card p.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .voirplus{color:var(--green);font-weight:700;font-size:12.5px;margin-top:4px;cursor:pointer;display:inline-block}
    .info-strip{font-size:11px;padding:8px 10px} /* bandeaux d'information plus discrets */
  }
  /* ===== Rencontres de quartier (univers de partage v2) ===== */
  .meet-hero{border:2px solid var(--green);background:linear-gradient(165deg,#f2faf4,#fff)}
  .meet-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin-top:10px;box-shadow:var(--shadow-1)}
  .meet-avs{display:inline-flex}
  .meet-av{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-7px}
  .meet-av:first-child{margin-left:0}

  /* ================================================================
     REVUE DES ÉCRANS > 720 px : chaque palier utilise mieux la place
     ================================================================ */
  /* Tablette 720-999 px : la colonne s'élargit (560 → 640 px) et le SOS
     se colle au bord de l'application au lieu de flotter dans le noir */
  @media (min-width:720px) and (max-width:999px){
    .device{max-width:640px}
    .ob-inner{max-width:640px}
    .mapsearch{max-width:620px}
    .sos-desk{left:max(12px, calc((100vw - 640px)/2 + 14px));bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  }
  /* Dès que la bande latérale est assez large (≥ 850 px), le SOS s'y installe :
     plus aucun chevauchement avec le contenu ni la barre d'onglets */
  @media (min-width:850px) and (max-width:999px){
    .sos-desk{left:calc((100vw - 640px)/2 - 64px);bottom:24px}
  }
  /* SOS : UN SEUL par écran, toujours au bon endroit. Sur la carte il vit
     dans la pile de boutons ronds à droite (toutes tailles). Le bouton fixe
     en bas à gauche ne sert que sur les AUTRES écrans du téléphone. */
  .fab-sos{background:var(--red) !important;color:#fff;font-weight:800}
  @media (min-width:1000px){ .sos-desk{display:none} }
  body.tab-carte .sos-desk{display:none}
  /* Annuaire des voisins : note à côté du nom, bonjour en pastille ronde */
  .v-note{color:#E8930C;font-size:12px;font-weight:800;white-space:nowrap}
  .wave-mini{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#EFF6F1;border:1px solid var(--border);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:8px}
  .wave-mini:active{transform:scale(.92)}
  /* Les lignes de l'annuaire ne passent JAMAIS à la ligne : nom à gauche, 👋 à droite */
  .hist-item.v-row{flex-wrap:nowrap}
  .hist-item.v-row .h-l{flex:1 1 auto;min-width:0}
  /* Très grands écrans ≥ 1600 px : le dock de contenu et les fiches
     s'élargissent (430 → 500 px) pour mieux respirer */
  @media (min-width:1600px){
    .screen:not(#screen-carte){width:500px;flex:0 0 500px}
    .sheet{width:500px}
  }

/* ============================================================
   5. UTILITAIRES facon Tailwind  pour ecrire le FUTUR code sans
   toucher a ce qui precede. Nommage identique a Tailwind, champ
   d'action volontairement reduit a l'essentiel. (.row existe deja
   dans l'app : il est volontairement exclu.)
   ============================================================ */
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.p-0{padding:0}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}
.m-0{margin:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}
.w-full{width:100%}.h-full{height:100%}.min-w-0{min-width:0}.max-w-full{max-width:100%}
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.text-xs{font-size:11px}.text-sm{font-size:12.5px}.text-base{font-size:14px}.text-lg{font-size:16px}.text-xl{font-size:18px}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.text-muted{color:var(--grey)}.text-ink{color:var(--ink)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-blue{color:var(--blue)}.text-white{color:#fff}
.bg-white{background:#fff}.bg-green{background:var(--green)}.bg-green-light{background:var(--green-light)}.bg-red{background:var(--red)}.bg-muted{background:var(--grey-light)}
.rounded{border-radius:8px}.rounded-lg{border-radius:12px}.rounded-xl{border-radius:16px}.rounded-full{border-radius:9999px}
.border{border:1px solid var(--border)}.border-0{border:0}
.shadow{box-shadow:var(--shadow-1)}.shadow-lg{box-shadow:var(--shadow-2)}.shadow-none{box-shadow:none}
.overflow-hidden{overflow:hidden}.relative{position:relative}.absolute{position:absolute}
.cursor-pointer{cursor:pointer}.select-none{user-select:none;-webkit-user-select:none}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nowrap{white-space:nowrap}
@media (max-width:999px){.sm-hidden{display:none}}
@media (min-width:1000px){.lg-hidden{display:none}}

/* Grand écran : le fil d'activité est déjà ancré à droite, le Journal du
   quartier du Profil (même contenu) s'efface : plus de doublon. */
@media (min-width:1400px){ #journalCard{display:none} }
/* La carte « Bonjour » ne domine plus la carte et ne se coupe plus :
   hauteur bornée, défilement interne au delà. */
@media (min-width:1000px){ .status-card{max-height:38vh} }

/* CORRECTIF STRUCTURE (ordinateur) : les enfants de la grille etaient libres
   de pousser au dela de l'ecran (min-height:auto), le bas des panneaux devenait
   inatteignable au defilement. Bornes retablies : chaque panneau defile
   jusqu'a SA fin, toujours. */
@media (min-width:1000px){
  .screens{min-height:0;min-width:0}
  .screens .screen{min-height:0;height:100%;max-height:100%}
  .feed-panel{min-height:0}
}