/* PharmaGarde237 — feuille de style commune (site public + espaces privés) */
:root{--emerald:#10B981;--emerald-600:#059669;--emerald-700:#047857;--teal:#0EA5E9;--teal-600:#0284C7;--teal-700:#0369A1;--gold:#F59E0B;--gold-700:#B45309;--star:#F59E0B;--mint:#D1FAE5;--sky:#E0F2FE;--card:#FFFFFF;--ink:#0F2A22;--muted:#5B7268;--line:#DCEBE4;--ink-900:#08231B;--sidebar-w:250px;--header-h:64px;--font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;--font-body:'Public Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;}
  *{box-sizing:border-box}html,body{margin:0;padding:0}
  /* Taille de base : celle du navigateur, soit 16 px. C'est la norme, et
     c'est le réglage que l'utilisateur a éventuellement changé lui-même —
     on ne l'écrase pas.

     Les ESPACES D'ADMINISTRATION montent d'un cran, à 17 px. Ce sont des
     écrans sur lesquels on passe des heures à relire des fiches et des
     tableaux, souvent à un mètre de l'écran. Toute la feuille de style
     étant en `rem`, ce seul réglage met l'ensemble à l'échelle sans
     retoucher une seule règle. On reste dans les clous : 17 px est au-dessus
     du minimum recommandé, et la mise à l'échelle demeure proportionnelle
     — un utilisateur qui zoome ou qui a agrandi la police de son système
     garde son réglage. */
  html{font-size:100%}
  html.espace-admin{font-size:106.25%}   /* 17 px pour une base à 16 px */
  body{font-family:var(--font-body);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;background:radial-gradient(1200px 620px at 92% -12%,rgba(14,165,233,.16),transparent 60%),radial-gradient(1000px 640px at -12% 6%,rgba(16,185,129,.18),transparent 55%),radial-gradient(900px 700px at 50% 128%,rgba(245,158,11,.10),transparent 60%),linear-gradient(180deg,#F4FCF9 0%,#EAF6F3 55%,#E7F4F7 100%);background-attachment:fixed;}
  a{text-decoration:none;color:inherit}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em}
  .view{display:none}.view.active{display:block}
  .app-header{position:sticky;top:0;z-index:1030;height:var(--header-h);display:flex;align-items:center;gap:12px;padding:0 18px;background:rgba(255,255,255,.8);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:11px;cursor:pointer}
  .brand .cross{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:21px;background:linear-gradient(135deg,var(--emerald),var(--teal));box-shadow:0 6px 16px rgba(16,185,129,.42)}
  .brand-name{font-family:var(--font-display);font-weight:700;font-size:1.14rem;line-height:1}.brand-sub{font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .header-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
  .lang-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
  .lang-toggle button{border:0;background:transparent;border-radius:999px;font-weight:600;font-size:.80rem;padding:5px 12px;color:var(--muted);cursor:pointer}
  .lang-toggle button.active{background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff}
  .btn-login{background:linear-gradient(135deg,var(--gold),#FBBF24);color:#3a2606;border:0;font-weight:700;border-radius:999px;padding:9px 18px;font-size:.86rem;display:inline-flex;align-items:center;gap:7px;box-shadow:0 4px 12px rgba(245,158,11,.35);cursor:pointer}
  .btn-login:hover{filter:brightness(1.05)}
  .menu-btn{border:1px solid var(--line);background:#fff;border-radius:10px;width:40px;height:40px;font-size:19px}
  .sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--sidebar-w);background:linear-gradient(180deg,var(--emerald-600),var(--teal-600));color:#eafff8;padding:18px 14px;overflow-y:auto;z-index:1020}
  .side-eyebrow{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:0 10px;margin:6px 0 10px}
  .nav-link-c{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:#eafff8;font-weight:500;font-size:.94rem;margin-bottom:3px;cursor:pointer;transition:background .15s}
  .nav-link-c i{font-size:1.12rem;width:22px;text-align:center;color:rgba(255,255,255,.85)}
  .nav-link-c:hover{background:rgba(255,255,255,.14);color:#fff}.nav-link-c.active{background:#fff;color:var(--emerald-700)}.nav-link-c.active i{color:var(--emerald-700)}
  .side-foot{margin-top:16px;padding:14px 12px;border-top:1px solid rgba(255,255,255,.22);font-size:.75rem;color:rgba(255,255,255,.85);line-height:1.5}
  .side-profile{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:16px;margin-bottom:16px;text-align:center}
  .side-profile .savatar{width:66px;height:66px;border-radius:50%;margin:0 auto 9px;background:rgba(255,255,255,.28);display:grid;place-items:center;font-size:26px;color:#fff;font-family:var(--font-display);font-weight:700;overflow:hidden;position:relative;border:2px solid rgba(255,255,255,.65)}
  .side-profile .savatar img{width:100%;height:100%;object-fit:cover}
  .avatar-edit{position:absolute;bottom:-2px;right:-2px;background:var(--gold);color:#3a2606;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;cursor:pointer;border:2px solid #fff}
  .side-profile .sname{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1rem;line-height:1.15}
  .side-profile .sphone{font-size:.78rem;color:rgba(255,255,255,.85);margin-top:2px}
  .side-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:8px;border:0;border-radius:10px;padding:9px;font-weight:700;font-size:.82rem;cursor:pointer}
  .side-btn.primary{background:#fff;color:var(--emerald-700)}.side-btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4)}
  .main{margin-left:var(--sidebar-w);padding:26px clamp(16px,3vw,38px) 0}
  .section+.section{margin-top:34px}
  .eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-600);font-weight:700}
  .sec-title{font-size:1.5rem;font-weight:700;margin:6px 0 0}.sec-lead{color:var(--muted);margin:4px 0 0;max-width:60ch}
  .news-strip{background:linear-gradient(120deg,var(--teal-600),var(--emerald-600));color:#fff;border-radius:16px;overflow:hidden;display:flex;min-height:92px;box-shadow:0 10px 26px rgba(8,145,178,.22)}
  /* Feature 5: Ministry watermark on the Officiel news flag */
  .news-flag{background:linear-gradient(135deg,var(--gold),#FBBF24);color:#3a2606;display:flex;flex-direction:column;justify-content:center;padding:0 20px;font-weight:700;min-width:150px;position:relative;overflow:hidden}
  .news-flag small{position:relative;z-index:1;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.85}.news-flag .flag-main{position:relative;z-index:1;font-family:var(--font-display);font-size:1.02rem;line-height:1.05;margin-top:3px}
  .news-body{padding:16px 22px;flex:1;display:flex;align-items:center}
  .news-headline{font-family:var(--font-display);font-weight:600;font-size:1.02rem}.news-meta{font-size:.78rem;color:#d9f4ff;margin-top:3px}
  .news-strip .carousel-indicators [data-bs-target]{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.6}.news-strip .carousel-indicators .active{opacity:1}
  .duty{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;border-radius:22px;padding:30px clamp(22px,4vw,42px);box-shadow:0 16px 40px rgba(16,185,129,.28)}
  .duty::after{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%)}
  .duty-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 13px;font-weight:700;font-size:.76rem}
  .duty-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:beat 1.8s infinite}
  .duty-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4vw,2.5rem);margin:16px 0 4px;line-height:1.02}
  .duty-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px;color:rgba(255,255,255,.92);font-size:.94rem;position:relative;z-index:1}
  .duty-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:1}
  .btn-ghost-gold{background:linear-gradient(135deg,var(--gold),#FBBF24);color:#3a2606;border:0;font-weight:700;border-radius:11px;padding:11px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
  .btn-outline-soft{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:11px;padding:11px 18px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
  .btn-outline-soft:hover{background:rgba(255,255,255,.24);color:#fff}
  #map{height:420px;width:100%;border-radius:18px;border:1px solid var(--line);z-index:1}
  .map-wrap{position:relative}
  .map-legend{position:absolute;left:14px;bottom:14px;z-index:500;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-size:.78rem;box-shadow:0 6px 20px rgba(0,0,0,.12);display:flex;gap:16px}
  .lg-item{display:flex;align-items:center;gap:7px}.lg-pin{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}.lg-pin.g{background:var(--emerald)}.lg-pin.d{background:var(--gold)}
  .mappin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2.5px solid #fff;box-shadow:0 5px 12px rgba(0,0,0,.32);background:var(--emerald);position:relative}
  .mappin.duty{background:var(--gold);width:36px;height:36px}
  .mappin.duty::before{content:"";position:absolute;inset:-7px;border-radius:50% 50% 50% 0;border:2px solid var(--gold);animation:pinring 1.9s ease-out infinite}
  .mappin-sign{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(45deg)}
  .mappin-sign span{width:15px;height:15px;background:#fff;border-radius:50%;display:grid;place-items:center;color:var(--emerald-700);font-size:11px;font-weight:800;line-height:1}
  .mappin.duty .mappin-sign span{color:var(--gold-700);width:17px;height:17px}
  .pop-name{font-family:var(--font-display);font-weight:600;font-size:.98rem}.pop-q{color:var(--muted);font-size:.8rem;margin-top:2px}
  /* La liste des pharmacies est un RAIL HORIZONTAL, plus une grille :
     empilées verticalement, vingt officines faisaient une page à rallonge.
     Une carte pleinement visible + un aperçu de la suivante invite à
     faire défiler ; scroll-snap donne l'accroche au doigt. */
  .ph-search{position:relative;max-width:560px}
  .ph-search .bi-search{position:absolute;left:14px;top:13px;color:var(--muted);pointer-events:none}
  .ph-search .field{margin:0;padding-left:38px}
  .ph-rail-wrap{position:relative;margin-top:14px}

  /* Le rail est réglé sur l'ID, pas sur la classe, et en !important.
     Raison concrète : un navigateur qui a gardé l'ANCIEN index.html en cache
     sert un conteneur portant encore class="ph-grid" — classe qui n'existe
     plus dans cette feuille. Le conteneur redevenait alors un simple bloc et
     les cartes s'empilaient sur toute la largeur. Cibler #phGrid met la mise
     en page à l'abri de ce décalage entre HTML et CSS mis en cache. */
  #phGrid{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    gap:16px;
    scroll-snap-type:x mandatory;
    padding:4px 2px 14px;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
  }
  /* clamp : ~1 carte + l'aperçu de la suivante sur téléphone (82vw),
     plafonnée à 330px sur grand écran où plusieurs cartes tiennent. */
  #phGrid>.ph-card{
    flex:0 0 clamp(260px,82vw,330px)!important;
    width:clamp(260px,82vw,330px);
    scroll-snap-align:start;
  }
  #phGrid::-webkit-scrollbar{height:8px}
  #phGrid::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

  .ph-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
    background:var(--card);color:var(--teal-600);cursor:pointer;
    box-shadow:0 6px 18px rgba(15,42,34,.14);display:grid;place-items:center}
  .ph-nav.prev{left:-4px}.ph-nav.next{right:-4px}
  .ph-nav:hover{background:var(--teal-600);color:#fff}
  @media (max-width:640px){ .ph-nav{display:none!important} }   /* mobile : au doigt */
  .ph-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;flex-direction:column;gap:10px;min-height:186px;position:relative;overflow:hidden}
  .ph-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--emerald)}
  .ph-card.duty::before{background:linear-gradient(180deg,var(--gold),#FBBF24)}.ph-card.closed::before{background:#cbd5cf}
  .ph-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,42,34,.12);border-color:#b9e6d5}
  .ph-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .ph-cross{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:none;background:var(--mint);color:var(--emerald-700);overflow:hidden}
  .ph-cross img{width:100%;height:100%;object-fit:cover}.ph-card.duty .ph-cross{background:#FEF3C7;color:var(--gold-700)}
  .ph-name{font-family:var(--font-display);font-weight:600;font-size:1.06rem;line-height:1.1}.ph-quarter{font-size:.82rem;color:var(--muted);margin-top:2px}
  .chip{font-size:.68rem;font-weight:700;padding:4px 9px;border-radius:999px}
  .chip-duty{background:#FEF3C7;color:var(--gold-700)}.chip-open{background:var(--mint);color:var(--emerald-700)}.chip-closed{background:#eef1f0;color:#7a8983}
  .card-rate{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--muted)}.card-rate .stars{color:var(--star)}
  .ph-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:6px}
  .ph-hours{font-size:.8rem;color:var(--muted)}.ph-hours i{color:var(--emerald);margin-right:5px}
  .ph-go{font-weight:700;font-size:.84rem;color:var(--teal-600);display:inline-flex;align-items:center;gap:5px}.ph-card:hover .ph-go{gap:9px}
  .statband{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .statband .s{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center;box-shadow:0 10px 30px rgba(15,42,34,.05);position:relative;overflow:hidden}
  .statband .s::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.12),transparent 70%)}
  .statband .s i{font-size:1.5rem;color:var(--teal-600)}.statband .s .num{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--emerald-700);line-height:1;margin:8px 0 2px}.statband .s small{color:var(--muted);font-weight:600}
  @media(max-width:640px){.statband{grid-template-columns:1fr}}
  /* Feature 11: medicine search results */
  .med-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fff;cursor:pointer}
  .med-row:hover{border-color:#b9e6d5;background:#fbfffe}
  .med-row .mpl{width:40px;height:40px;border-radius:10px;background:var(--sky);color:var(--teal-700);display:grid;place-items:center;flex:none}
  .med-row mark{background:#FEF3C7;color:inherit;padding:0 2px;border-radius:3px}
  .site-footer{margin-left:calc(-1*clamp(16px,3vw,38px));margin-right:calc(-1*clamp(16px,3vw,38px));margin-top:44px;background:linear-gradient(160deg,var(--ink-900),#0c3227);color:#cfe6dc;padding:44px clamp(16px,3vw,38px) 22px}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;max-width:1100px}
  @media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:22px}}
  .foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:12px}.foot-brand .cross{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--emerald),var(--teal));display:grid;place-items:center;color:#fff;font-size:20px}.foot-brand b{font-family:var(--font-display);font-size:1.15rem;color:#fff}
  .site-footer h5{color:#fff;font-family:var(--font-display);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px}
  .site-footer p,.site-footer a{color:#a9cdbf;font-size:.9rem;line-height:1.7}.site-footer a:hover{color:#fff}
  .foot-line{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}.foot-line i{color:var(--gold);margin-top:3px}
  /* Feature GO-4: discrete staff-entrance icons share the social-icon styling */
  .socials{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}.socials a,.socials .social-btn{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-size:18px;transition:background .15s;border:0;padding:0;cursor:pointer;font-family:inherit}.socials a:hover,.socials .social-btn:hover{background:linear-gradient(135deg,var(--emerald),var(--teal))}
  .gov-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.4);color:#F7C46C;border-radius:999px;padding:6px 12px;font-size:.74rem;font-weight:700;margin-bottom:14px}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:16px;font-size:.8rem;color:#87b0a1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;max-width:1100px}
  .center-wrap{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;justify-content:center;padding:28px}
  .card-auth{width:100%;max-width:460px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(15,42,34,.14)}
  .card-head{background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;padding:26px 28px}
  .card-head.pro{background:linear-gradient(135deg,var(--teal-700),var(--emerald-700))}
  .card-head.super{background:linear-gradient(135deg,#334155,#0f172a)}
  .card-head .cross{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:23px;margin-bottom:12px}
  .card-head h1{font-size:1.45rem;margin:0}.card-head p{margin:4px 0 0;opacity:.9;font-size:.9rem}
  .tabs{display:flex;border-bottom:1px solid var(--line)}
  .tab{flex:1;text-align:center;padding:15px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;font-size:.92rem}.tab.active{color:var(--emerald-700);border-bottom-color:var(--emerald)}
  .cbody{padding:26px 28px}
  label{font-size:.82rem;font-weight:600;margin-bottom:5px;display:block}
  .field{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-family:inherit;font-size:.95rem;margin-bottom:14px;background:#fbfefd}
  .field:focus{outline:0;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.18)}
  .btn-go{width:100%;padding:12px;border:0;border-radius:12px;font-weight:700;color:#fff;font-size:1rem;cursor:pointer;background:linear-gradient(135deg,var(--emerald),var(--teal));box-shadow:0 8px 20px rgba(16,185,129,.3)}
  .btn-go:hover{filter:brightness(1.05)}
  .btn-out{width:100%;padding:12px;border:1px solid #FCA5A5;border-radius:12px;font-weight:700;color:#B91C1C;background:#fff;cursor:pointer}.btn-out:hover{background:#FEF2F2}
  .msg{padding:11px 13px;border-radius:11px;font-size:.85rem;margin-bottom:14px;display:none}
  .msg.err{display:block;background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C}.msg.ok{display:block;background:var(--mint);border:1px solid #A7F3D0;color:var(--emerald-700)}
  .foot{text-align:center;margin-top:6px;font-size:.9rem;color:var(--muted)}
  .linky{color:var(--teal-600);font-weight:600;cursor:pointer}.hide{display:none}
  .info-note{background:#FFFBEB;border:1px solid #FDE68A;border-radius:11px;padding:10px 12px;font-size:.78rem;color:#92400E;margin-top:14px;line-height:1.5}.info-note code{background:#fff;padding:1px 5px;border-radius:5px}
  .backbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
  .btn-back{border:1px solid var(--line);background:#fff;border-radius:11px;padding:8px 14px;font-weight:600;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:7px}.btn-back:hover{background:#f3faf7}
  .ph-hero{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;gap:18px;align-items:center;box-shadow:0 10px 30px rgba(15,42,34,.06)}
  .ph-hero .big-cross{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;display:grid;place-items:center;font-size:32px;flex:none;overflow:hidden}.ph-hero .big-cross img{width:100%;height:100%;object-fit:cover}
  .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
  .prod{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
  .prod .pimg{height:110px;background:var(--sky);display:grid;place-items:center;color:var(--teal-700);font-size:26px;overflow:hidden}.prod .pimg img{width:100%;height:100%;object-fit:cover}.prod .pbody{padding:12px 14px}.prod b{font-family:var(--font-display);font-size:.98rem}.prod small{color:var(--muted)}
  .stars{color:var(--star);letter-spacing:1px}
  .rate-summary{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:0 10px 30px rgba(15,42,34,.05)}
  .rate-big{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:var(--emerald-700);line-height:1}
  .review{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
  .review .rh{display:flex;align-items:center;gap:10px;margin-bottom:6px}.review .rav{width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--emerald-700);display:grid;place-items:center;font-weight:700}.review .rn{font-weight:700;font-size:.9rem}.review .rt{font-size:.9rem;color:#33463f}
  .star-pick{font-size:1.7rem;color:#d7ded9;cursor:pointer;display:inline-flex;gap:4px}.star-pick i.on{color:var(--star)}
  .chat{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:380px;box-shadow:0 10px 30px rgba(15,42,34,.06)}
  .chat-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.chat-head .on{width:9px;height:9px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.2)}
  .chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#fbfefd,#f4faf8)}
  .bubble{max-width:78%;padding:10px 14px;border-radius:14px;font-size:.9rem;line-height:1.35}
  .bubble.me{align-self:flex-end;background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;border-bottom-right-radius:4px}
  .bubble.them{align-self:flex-start;background:#eef4f1;color:var(--ink);border-bottom-left-radius:4px}.bubble .who{font-size:.66rem;opacity:.7;margin-bottom:2px;font-weight:700}
  .chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}.chat-input input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-family:inherit}.chat-input input:focus{outline:0;border-color:var(--emerald)}
  .chat-send{border:0;border-radius:50%;width:42px;height:42px;background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;font-size:17px;cursor:pointer;flex:none}
  .chat-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;color:var(--muted);text-align:center;padding:24px}
  /* Les espaces d'administration occupent TOUTE la largeur de l'écran.
     Ils étaient plafonnés à 1000 px et centrés : sur un écran de bureau,
     deux tiers de la surface restaient vides pendant que le rail des
     pharmacies et le tableau des comptes défilaient dans un couloir.
     Ce sont des écrans de travail, pas des pages de lecture. */
  .admin-shell{max-width:none;margin:0}
  .admin-top{background:linear-gradient(135deg,var(--emerald-600),var(--teal-600));color:#fff;border-radius:20px;padding:22px 26px;display:flex;align-items:center;gap:16px;box-shadow:0 16px 40px rgba(8,145,178,.22)}
  .admin-top.super{background:linear-gradient(135deg,#334155,#0f172a)}
  .avatar-up{width:74px;height:74px;border-radius:18px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:30px;overflow:hidden;position:relative;flex:none;border:2px solid rgba(255,255,255,.5)}.avatar-up img{width:100%;height:100%;object-fit:cover}
  .admin-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:18px}@media(max-width:860px){.admin-grid{grid-template-columns:1fr}}
  .panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(15,42,34,.05)}
  .panel h3{font-size:1.05rem;margin:0 0 4px;display:flex;align-items:center;gap:8px}.panel .hint{color:var(--muted);font-size:.83rem;margin:0 0 14px}
  .prod-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
  .prod-row .thumb{width:46px;height:46px;border-radius:10px;background:var(--sky);color:var(--teal-700);display:grid;place-items:center;font-size:18px;flex:none;overflow:hidden;position:relative}.prod-row .thumb img{width:100%;height:100%;object-fit:cover}.prod-row .thumb .cam{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.3);color:#fff;opacity:0;cursor:pointer}.prod-row .thumb:hover .cam{opacity:1}
  .prod-row b{font-size:.94rem}.prod-row .rm{margin-left:auto;color:#B91C1C;cursor:pointer;background:none;border:0;font-size:16px}
  .inbox-item{display:flex;gap:11px;align-items:center;padding:11px;border-radius:12px;cursor:pointer}.inbox-item:hover,.inbox-item.active{background:#f1faf6}
  .inbox-item .ava{width:38px;height:38px;border-radius:50%;background:var(--mint);color:var(--emerald-700);display:grid;place-items:center;font-weight:700;flex:none}.inbox-item .nm{font-weight:600;font-size:.9rem}.inbox-item .pv{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .badge-new{margin-left:auto;background:var(--gold);color:#3a2606;font-size:.64rem;font-weight:700;padding:2px 7px;border-radius:999px}
  .stat{display:flex;gap:14px;margin-top:14px}.stat .box{flex:1;background:rgba(255,255,255,.16);border-radius:14px;padding:12px;text-align:center}.stat .box b{font-family:var(--font-display);font-size:1.35rem;display:block}.stat .box small{opacity:.85;font-size:.72rem}
  .prow{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;flex-wrap:wrap}
  .prow .pl{width:40px;height:40px;border-radius:10px;background:var(--mint);color:var(--emerald-700);display:grid;place-items:center;overflow:hidden;flex:none}.prow .pl img{width:100%;height:100%;object-fit:cover}
  .plink{font-family:ui-monospace,monospace;font-size:.78rem;background:#f1f7f4;border:1px solid var(--line);border-radius:8px;padding:3px 8px;cursor:pointer;color:var(--teal-700)}
  .mini{font-size:.76rem;color:var(--muted)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:560px){.grid2{grid-template-columns:1fr}}
  .duty-radio{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--gold-700);cursor:pointer}
  @keyframes beat{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
  @keyframes pinring{0%{transform:rotate(-45deg) scale(.7);opacity:.9}100%{transform:rotate(-45deg) scale(1.5);opacity:0}}
  :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
  @media (max-width:991.98px){.sidebar{transform:translateX(-100%);transition:transform .25s;box-shadow:6px 0 30px rgba(0,0,0,.2)}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.scrim{position:fixed;inset:var(--header-h) 0 0 0;background:rgba(4,20,15,.45);z-index:1015;display:none}.scrim.show{display:block}}
  @media (min-width:992px){.menu-btn{display:none}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  /* customer database dashboard */
  .subtabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
  .subtab{padding:9px 16px;border-radius:999px;font-weight:700;font-size:.86rem;color:var(--muted);background:#eef1f0;cursor:pointer;border:0}
  .subtab.active{background:linear-gradient(135deg,#334155,#0f172a);color:#fff}
  .stat-mini-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
  .stat-mini{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
  .stat-mini b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--emerald-700)}
  .stat-mini small{color:var(--muted);font-size:.76rem}
  .dbtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;max-height:520px;overflow-y:auto}
  table.dbtable{width:100%;border-collapse:collapse;font-size:.84rem;min-width:960px}
  table.dbtable th{text-align:left;background:#f4f8f7;color:var(--emerald-700);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
  table.dbtable td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
  table.dbtable tr:last-child td{border-bottom:0}
  table.dbtable tr:hover td{background:#fbfffe}
  .hash-chip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.74rem;background:#f4f8f7;border:1px solid var(--line);border-radius:8px;padding:3px 7px;cursor:pointer;display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  .hash-chip.full{max-width:none;white-space:normal;word-break:break-all}
  .pill-count{background:var(--mint);color:var(--emerald-700);border-radius:999px;padding:2px 9px;font-weight:700;font-size:.76rem}
  .pill-never{background:#FEF2F2;color:#B91C1C;border-radius:999px;padding:2px 9px;font-weight:700;font-size:.76rem}
  .db-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
  .db-toolbar input{max-width:280px}
  .btn-mini-refresh{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;font-weight:700;font-size:.82rem;color:var(--emerald-700);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  @media (max-width:760px){.stat-mini-row{grid-template-columns:repeat(2,1fr)}}
  /* Feature 3: hub-and-spoke group chat */
  #gchat-fab{position:fixed;right:22px;bottom:22px;z-index:1050;width:58px;height:58px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;font-size:24px;box-shadow:0 10px 26px rgba(16,185,129,.4);cursor:pointer}
  #gchat-panel{display:flex;position:fixed;right:22px;bottom:92px;z-index:1050;width:min(720px,92vw);box-shadow:0 20px 60px rgba(15,42,34,.28);border-radius:18px;overflow:hidden}
  #gchat-panel.hide{display:none}
  #gchat-switcher{width:220px;background:#fff;border-right:1px solid var(--line);max-height:440px;overflow-y:auto}

  /* =====================================================================
     ADAPTATION À TOUS LES ÉCRANS (responsive)
     ---------------------------------------------------------------------
     Ce bloc reste VOLONTAIREMENT à la fin du fichier : il redéfinit des
     règles déclarées plus haut (.admin-grid, .news-strip, #gchat-panel…)
     et compte sur la cascade CSS pour l'emporter. Ne rien insérer après.

     Rappel de la règle qui a causé la panne : un style="…" écrit dans le
     HTML l'emporte TOUJOURS sur une règle @media, quelle que soit la
     largeur de l'écran. Aucune propriété de mise en page susceptible de
     changer avec la taille de l'écran (grid-template-columns, flex-direction,
     width, min-width, max-width, height) ne doit être écrite en ligne dans
     le HTML de ce projet — elle vient ici.

     Repères utilisés : 1100 (deux colonnes → une), 991.98 (barre latérale
     escamotable, déjà en place plus haut), 760 (téléphone en paysage /
     petite tablette), 560 et 400 (téléphone).
     ===================================================================== */

  /* ---- 1. Aucun débordement horizontal, jamais --------------------------
     overflow-x n'est posé QUE sur <html>. Sur <body> il ferait de body un
     conteneur de défilement et casserait le position:sticky de l'en-tête. */
  html{overflow-x:hidden}
  body{max-width:100%}
  img,svg,video,canvas,iframe{max-width:100%}
  .view,.main,.admin-shell,.panel,.section,.card-auth,.news-body,.ph-hero>div{min-width:0}
  /* Un <input> refuse de descendre sous sa largeur intrinsèque (une vingtaine
     de caractères) tant que min-width vaut « auto ». Dans une rangée flex —
     champ + bouton d'envoi — il poussait le bouton hors de l'écran à 320 px. */
  .field,.chat-input input,input,select,textarea{min-width:0}
  /* Un mot insécable (jeton, adresse, e-mail, empreinte) ne doit pas
     élargir la page : il se coupe. */
  .plink,.foot-line span,.prod b,.ph-name,.inbox-item .nm,.duty-name{overflow-wrap:anywhere}
  /* Un <code> sans espace — une liste de colonnes CSV, une adresse, une
     empreinte — ne doit pas pousser la page : il n'offre aucun point de
     coupure naturel et débordait de 644 px sur téléphone. */
  code,.hint code,.mini code{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
  /* Hauteurs d'écran : 100vh ignore la barre d'adresse mobile, 100dvh non. */
  @supports (min-height:100dvh){
    body{min-height:100dvh}
    .center-wrap{min-height:calc(100dvh - var(--header-h))}
  }

  /* ---- 2. Champs de saisie : pas de zoom automatique sur iOS ------------
     Safari iOS zoome dès qu'un champ fait moins de 16px, ce qui décale
     toute la page et oblige l'utilisateur à dézoomer à la main. */
  @media (max-width:991.98px){
    .field,.chat-input input,input,select,textarea{font-size:16px}
    /* background-attachment:fixed provoque des à-coups au défilement
       sur iOS et Android : inutile sur petit écran. */
    body{background-attachment:scroll}
  }

  /* ---- 3. En-tête -------------------------------------------------------- */
  .app-header{padding:0 clamp(10px,3vw,18px)}
  .brand{min-width:0}
  .brand>span:last-child{min-width:0;overflow:hidden}
  .brand-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-tools{flex:none}
  @media (max-width:560px){
    .brand .cross{width:34px;height:34px;flex:none;font-size:18px}
    .brand-name{font-size:1rem}
    .brand-sub{font-size:.62rem;letter-spacing:.10em}
    .lang-toggle button{padding:5px 9px;font-size:.75rem}
    .btn-login{padding:9px 12px}
  }
  @media (max-width:430px){
    /* L'icône suffit : le libellé « Se connecter » faisait déborder
       l'en-tête à 320 px de large. */
    .btn-login span{display:none}
    .brand-sub{display:none}
  }

  /* ---- 4. Bandeau doré « Officiel » + actualités ------------------------- */
  .news-strip{flex-wrap:wrap}
  .news-flag{min-width:0}
  @media (max-width:760px){
    .news-strip{flex-direction:column}
    .news-flag{width:100%;padding:12px 18px}
    .news-body{padding:14px 18px}
  }

  /* ---- 5. Garde du soir et fiche pharmacie ------------------------------- */
  .duty-meta{gap:12px 20px}
  @media (max-width:560px){
    .duty{padding:22px 18px;border-radius:18px}
    .duty-actions .btn-ghost-gold,.duty-actions .btn-outline-soft{flex:1 1 100%;justify-content:center}
    .ph-hero{flex-direction:column;text-align:center;padding:20px}
    .ph-hero .big-cross{margin:0 auto}
    .rate-summary{flex-wrap:wrap;gap:12px;padding:16px}
    .bubble{max-width:88%}
  }
  @media (max-width:420px){
    /* Rien à régler ici pour le rail : la largeur des cartes suit déjà la
       largeur d'écran via clamp(260px,82vw,330px). */
    .prod-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  }

  /* ---- 6. Carte ---------------------------------------------------------- */
  @media (max-width:760px){
    #map{height:340px}
    /* La légende s'étalait hors du cadre : elle occupe toute la largeur. */
    .map-legend{left:10px;right:10px;bottom:10px;font-size:.72rem;padding:8px 10px;justify-content:center}
  }
  @media (max-width:380px){ #map{height:280px} }

  /* ---- 7. Pages d'administration ----------------------------------------
     C'est le défaut principal corrigé : les panneaux étaient figés sur
     deux colonnes et la moitié du contenu sortait de l'écran. Le passage
     à une colonne se déclenche dès 1100 px. */
  @media (max-width:1100px){
    .admin-grid{grid-template-columns:1fr}
  }
  /* Occuper toute la largeur ne veut pas dire étirer chaque champ jusqu'au
     bord : un champ de saisie de deux mètres de long est inutilisable, et
     une ligne de texte trop longue se relit mal. Les panneaux prennent la
     largeur, leurs contenus gardent une mesure lisible. */
  .panel > .hint, .panel > p{max-width:78ch}
  .panel .field, .panel textarea, .panel .pw-field, .panel .geo-row{max-width:760px}
  .panel .grid2 .field{max-width:none}
  .subtab{display:inline-flex;align-items:center;gap:6px}
  .news-form{display:flex;gap:8px;flex-wrap:wrap}
  .news-form .field{margin:0;min-width:0}
  .news-form #nw-head{flex:2 1 220px}
  .news-form #nw-src{flex:1 1 150px}
  .news-form .chat-send{border-radius:12px;width:46px;flex:none}
  @media (max-width:760px){
    .admin-top{flex-direction:column;text-align:center;gap:12px;padding:20px 18px}
    .admin-top .avatar-up{margin:0 auto}
    .admin-top .stat{justify-content:center;width:100%}
    .backbar{flex-wrap:wrap}
    .panel{padding:16px 14px}
    .subtab{flex:1 1 auto;justify-content:center;font-size:.8rem;padding:9px 11px}
    .db-toolbar{flex-direction:column;align-items:stretch}
    .db-toolbar input{max-width:none}
    .news-form #nw-head,.news-form #nw-src{flex:1 1 100%}
    /* Le tableau des clients reste large, mais il défile DANS son cadre :
       c'est la page entière qui ne doit pas défiler latéralement. */
    table.dbtable{min-width:720px}
    .chat-inbox{height:260px}
  }
  @media (max-width:380px){
    .stat-mini-row{grid-template-columns:1fr}
    .statband .s{padding:18px}
  }

  /* ---- 8. Messagerie flottante -------------------------------------------
     720 px de large et une colonne de 220 px ne tiennent pas sur un
     téléphone : le panneau devient une feuille ancrée en bas d'écran, la
     liste des conversations passant en bandeau horizontal au-dessus. */
  #gchat-panel .chat{flex:1;height:440px;border-radius:0}
  @media (max-width:760px){
    #gchat-panel{left:0;right:0;bottom:0;width:auto;max-width:none;
      flex-direction:column;border-radius:16px 16px 0 0}
    #gchat-switcher{width:auto;max-height:108px;border-right:0;border-bottom:1px solid var(--line)}
    /* flex:none est indispensable : en colonne, le flex:1 du desktop
       ramène la base à 0 et écrase la hauteur du fil de discussion. */
    #gchat-panel .chat{flex:none;height:min(60vh,420px)}
    #gchat-fab{right:16px;bottom:16px}
  }

  /* =====================================================================
     SÉLECTEUR DE POSITION SUR CARTE (super-administration)
     ===================================================================== */
  .geo-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
  .geo-row .field{flex:1 1 200px;margin:0;min-width:0}
  .geo-row .btn-mini-refresh{flex:none}
  .picker-map{height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
  /* Leaflet se place au-dessus de tout si on ne le contient pas : dans une
     modale Bootstrap, ses contrôles passeraient par-dessus l'en-tête. */
  .picker-map .leaflet-pane,.picker-map .leaflet-control{z-index:1}
  @media (max-width:560px){
    .picker-map{height:220px}
    .geo-row .btn-mini-refresh{flex:1 1 100%;justify-content:center}
  }

  /* =====================================================================
     ACCÈS & SÉCURITÉ (super-administration)
     ===================================================================== */
  .acces-item{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:10px;background:#F8FCFB}
  .acces-t{font-weight:700;font-size:.9rem;margin-bottom:6px}
  .acces-u{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .acces-u code{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:9px;
    padding:8px 11px;font-size:.84rem;word-break:break-all}
  .acces-u .btn-mini-refresh{flex:none}
  @media (max-width:560px){ .acces-u code{font-size:.78rem} }

  /* =====================================================================
     AFFICHER / MASQUER LE MOT DE PASSE
     ---------------------------------------------------------------------
     La cible fait 40x40 px : en dessous, on la rate au doigt. Elle est
     posée SUR le champ, dont la réserve à droite (padding-right) empêche
     le texte saisi de passer dessous.
     ===================================================================== */
  .pw-field{position:relative;display:block}
  .pw-field .field{padding-right:46px}
  .pw-eye{position:absolute;top:0;right:2px;width:42px;height:44px;
    display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;
    color:var(--muted);font-size:1.05rem;border-radius:10px;line-height:1}
  .pw-eye:hover{color:var(--emerald-700)}
  .pw-eye:active{transform:scale(.94)}
  /* Safari/iOS ajoute sa propre icône dans les champs mot de passe :
     deux yeux côte à côte, dont un qui ne fait rien. */
  .pw-field input::-ms-reveal,.pw-field input::-ms-clear,
  .pw-field input::-webkit-credentials-auto-fill-button{display:none}

  /* =====================================================================
     MISE EN VALEUR DES DEUX LOGOS
     ---------------------------------------------------------------------
     Le logo PharmaGarde237 est circulaire : il tient dans une pastille
     ronde. L'emblème du Ministère (parapluie CSU/UHC et la file de
     personnes) est une illustration large et détaillée : enfermé dans un
     rond, il devenait illisible. Il reçoit donc une plaque blanche
     rectangulaire, plus haute et plus large, qui le met réellement en
     valeur dans le bandeau doré.
     ===================================================================== */

  /* ---- logo du site, en-tête ---- */
  .brand-logo{width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:#fff;
    display:grid;place-items:center;overflow:hidden;
    border:2px solid rgba(255,255,255,.92);
    box-shadow:0 3px 12px rgba(15,155,142,.24),0 0 0 1px rgba(21,128,61,.12)}
  .brand-logo img{width:100%;height:100%;object-fit:contain;display:block;padding:1px}
  .brand{cursor:pointer;gap:12px;min-width:0}

  /* ---- logo sur les cartes de connexion ---- */
  .card-head .cross.logo{background:#fff;padding:5px;overflow:hidden}
  .card-head .cross.logo img{width:100%;height:100%;object-fit:contain;display:block}

  /* ---- emblème du Ministère, bandeau doré « Officiel » ----
     La plaque blanche arrondie encadre le logo ; object-fit:contain garde
     ses proportions, rien n'est rogné. */
  .news-flag{position:relative;flex-direction:row;align-items:center;gap:14px;overflow:hidden}
  .flag-labels{position:relative;z-index:1;min-width:0}
  /* display:block, PAS grid + place-items:center. Dans une grille centrée,
     le pourcentage de hauteur de l'image ne se résout pas contre la boîte :
     l'image reprenait son ratio, dépassait, et overflow:hidden rognait le
     haut du parapluie et le mot MINSANTE. */
  .ministry-badge{display:block;position:relative;z-index:1;
    width:82px;height:78px;flex:0 0 82px;border-radius:14px;background:#fff;
    border:2px solid rgba(255,255,255,.95);overflow:hidden;padding:4px;
    box-shadow:0 5px 16px rgba(120,53,15,.30)}
  .ministry-badge img{width:100%;height:100%;object-fit:contain;display:block}
  .flag-labels small{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
    font-weight:700;opacity:.9;line-height:1.4}
  .news-flag .flag-main{font-weight:800;line-height:1.2;font-size:.95rem;margin-top:2px}

  /* ---- pied de page ----
     Le logo joue deux fois : petit et net dans le bloc marque, puis en
     filigrane très léger en bas à droite. Assez discret pour ne pas gêner
     la lecture, assez présent pour signer la page. */
  .foot-logo{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#fff;
    display:grid;place-items:center;overflow:hidden}
  .foot-logo img{width:100%;height:100%;object-fit:contain;display:block;padding:1px}
  .site-footer{position:relative;overflow:hidden}
  .site-footer::after{content:"";position:absolute;right:-30px;bottom:-30px;
    width:210px;height:210px;
    background:url("/img/logo-pharmagarde237-embleme.png") no-repeat center/contain;
    opacity:.05;pointer-events:none;z-index:0}
  .site-footer .foot-grid,.site-footer .foot-bottom{position:relative;z-index:1}
  @media (max-width:560px){ .site-footer::after{width:150px;height:150px;right:-24px;bottom:-24px} }

  @media (max-width:560px){
    .ministry-badge{width:70px;height:68px;flex-basis:70px;border-radius:12px}
    .news-flag .flag-main{font-size:.88rem}
    .brand-logo{width:40px;height:40px;flex-basis:40px}
  }
  @media (max-width:380px){
    .ministry-badge{width:58px;height:56px;flex-basis:58px;padding:3px}
    .news-flag .flag-main{font-size:.8rem}
    .news-flag{padding:11px 12px;gap:10px}
  }

  /* ---- 9. Cartes de connexion et pied de page ---------------------------- */
  @media (max-width:560px){
    .center-wrap{padding:20px 14px}
    .card-head{padding:22px 20px}
    .card-head h1{font-size:1.25rem}
    .cbody{padding:20px}
    .tab{padding:13px 8px;font-size:.86rem}
    .site-footer{padding:34px clamp(16px,3vw,38px) 20px}
  }

  /* =====================================================================
     GÉOLOCALISATION, LOCALITÉ ACTIVE ET FILTRES
     ===================================================================== */
  .duty-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
  /* Département et région sous le titre : « Douala IV » seul ne situe rien
     pour qui n'est pas de la ville, et deux arrondissements du pays peuvent
     porter le même nom. */
  .duty-sub{margin-top:4px;color:var(--muted);letter-spacing:.02em}
  /* Réserve sur une position seulement approximative. Assez visible pour
     être lue, assez discrète pour ne pas ressembler à une panne.

     PAS de `display` ici, et pas de pictogramme en ::before. Les deux
     ensemble produisaient un triangle orange seul et permanent en haut de
     l'accueil : `display:flex` déclaré après `.hide{display:none}` gagnait
     à égalité de spécificité, l'élément restait donc affiché même vide, et
     le ::before dessinait son triangle dans le vide. */
  .duty-geo-note{margin-top:6px;max-width:52ch;color:var(--gold-700)}
  .geo-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
    border-radius:16px;padding:16px 18px;box-shadow:0 10px 30px rgba(15,42,34,.06)}
  .geo-card>i{font-size:1.5rem;color:var(--teal-600);flex:none;margin-top:2px}
  .geo-card-actions{display:flex;gap:8px;flex-wrap:wrap}
  .geo-card .btn-outline-soft{color:var(--teal-700);border-color:var(--line);background:#f6fbf9}
  .loc-picker{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px;
    box-shadow:0 10px 30px rgba(15,42,34,.06);max-width:520px}
  .loc-picker .field{margin-bottom:10px}

  /* Distance et durée du trajet tracé dans la carte. */
  .route-msg{margin-top:10px;padding:9px 13px;border-radius:11px;font-size:.86rem;font-weight:600;
    background:var(--mint);border:1px solid var(--emerald);color:var(--emerald-700)}
  .route-msg.err{background:#FEF3C7;border-color:#FCD34D;color:var(--gold-700)}
  .route-msg.hide{display:none}

  /* ---- plusieurs pharmacies de garde le même soir ----
     Une seule : la carte occupe la largeur, comme avant. Plusieurs : rail
     horizontal, la première pleinement visible et les suivantes atteintes
     en faisant défiler. Empiler quatre cartes vertes de 400 px repousserait
     la carte et la recherche hors de l'écran. */
  .duty-compte{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700;
    font-size:.88rem;color:var(--emerald-700)}
  .duty-rail-wrap{position:relative}
  /* PAS de `scroll-behavior:smooth` ici, et ce n'est pas un oubli : mesuré
     dans le navigateur, il ANNULE purement et simplement tout défilement
     programmé sur ce rail — les flèches devenaient inertes. Le défilement
     est donc instantané, ce qui est de toute façon plus sûr sur un
     téléphone d'entrée de gamme. Le geste au doigt, lui, reste fluide :
     c'est le navigateur qui l'anime. */
  .duty-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:thin}
  /* Chaque carte occupe TOUTE la largeur du rail, à toutes les tailles
     d'écran : on en voit une, entière, et la suivante s'annonce par le
     bouton. `scroll-snap` évite de s'arrêter au milieu de deux cartes, où
     aucune n'est lisible. */
  .duty-rail > .duty{flex:0 0 100%;scroll-snap-align:start;min-width:0}
  /* La carte entière ouvre la pharmacie : elle doit se voir comme telle. */
  .duty-rail > .duty{cursor:pointer;transition:transform .15s,box-shadow .15s}
  .duty-rail > .duty:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(16,185,129,.34)}
  .duty-rail > .duty:focus-visible{outline:3px solid #fff;outline-offset:-5px}
  .duty-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;
    border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--ink);
    font-size:19px;cursor:pointer;box-shadow:0 6px 18px rgba(15,42,34,.16)}
  .duty-nav.prev{left:-6px}.duty-nav.next{right:-6px}
  .duty-nav:hover{background:#fff}
  /* Sans pointeur (téléphone), les flèches ne servent à rien : on fait
     défiler au doigt, et elles masqueraient une partie de la carte. */
  @media (hover:none){ .duty-nav{display:none} }
  /* Aucune garde : pas de carte verte, juste le message. Le dégradé donnait
     à « aucune pharmacie de garde » l'allure d'une bonne nouvelle. */
  .duty-vide{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;
    color:var(--ink)}
  .duty-vide .duty-name{font-family:var(--font-display);font-weight:700;font-size:1.2rem}

  /* Les deux compteurs de l'arrondissement, côte à côte et jamais
     confondus : ce qui est de garde, et ce qui existe. Les mélanger en une
     seule ligne était la source des écrans qui se contredisaient. */
  .ph-compteurs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .ph-compteurs.hide{display:none}
  .ph-compteur{display:inline-flex;align-items:baseline;gap:6px;background:#fff;
    border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.84rem;color:var(--muted)}
  .ph-compteur b{font-family:var(--font-display);font-size:1.05rem;color:var(--ink)}
  .ph-compteur.garde{background:var(--mint);border-color:var(--emerald);color:var(--emerald-700)}
  .ph-compteur.garde b{color:var(--emerald-700)}
  /* Zéro de garde n'est pas une anomalie qu'on masque : c'est une réponse,
     et elle doit se lire aussi clairement qu'un chiffre positif. */
  .ph-compteur.vide{background:#FEF3C7;border-color:#FCD34D;color:var(--gold-700)}
  .ph-compteur.vide b{color:var(--gold-700)}

  /* Une officine proposée en ALTERNATIVE porte une marque explicite : elle
     n'est pas dans l'arrondissement de l'utilisateur, et rien ne doit
     laisser croire le contraire. */
  .duty-alt-marque{margin-top:10px;display:inline-block;background:#FEF3C7;color:var(--gold-700);
    border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:700}

  /* Bandeau de repli : il doit se remarquer sans crier — c'est une nuance
     importante (« la garde n'est pas ici »), pas une erreur. */
  .duty-fallback{position:relative;z-index:1;background:rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.55);border-radius:12px;padding:9px 13px;
    font-size:.86rem;font-weight:600;margin-bottom:14px;display:flex;gap:8px;align-items:flex-start}
  .duty-place{position:relative;z-index:1;font-size:.9rem;opacity:.95;margin-top:6px}
  .duty-countdown{position:relative;z-index:1;font-size:.9rem;margin-top:6px;font-weight:700}
  .duty-next{position:relative;z-index:1;font-size:.86rem;margin-top:12px;opacity:.92}
  .duty-stamp{position:relative;z-index:1;font-size:.76rem;margin-top:4px;opacity:.8}
  .duty-report{position:relative;z-index:1;margin-top:10px;background:none;border:0;padding:0;
    color:rgba(255,255,255,.9);font-size:.8rem;text-decoration:underline;cursor:pointer;font-family:inherit}

  .ph-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .ph-filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;
    font-weight:700;font-size:.82rem;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .ph-filter.actif{background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;border-color:transparent}
  @media (max-width:560px){
    .duty-head{align-items:flex-start}
    .ph-filter{flex:1 1 auto;justify-content:center}
  }
  .pop-actions{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 12px}
  .pop-actions a{color:var(--teal-600);font-weight:700;font-size:.84rem;display:inline-flex;align-items:center;gap:5px}
  .pop-actions a:hover{color:var(--emerald-700)}

  /* ---- vérification publique et confiance ---- */
  .duty-verif{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:12px;font-size:.84rem}
  .duty-verif a{color:#fff;text-decoration:underline;display:inline-flex;align-items:center;gap:5px;font-weight:600}
  .duty-trust{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:3px 11px;font-weight:700;cursor:help}
  .duty-confirm{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;font-size:.84rem}
  .duty-confirm button{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff;
    border-radius:999px;padding:5px 12px;font-weight:700;font-size:.8rem;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;font-family:inherit}
  .duty-confirm button:hover{background:rgba(255,255,255,.26)}

  /* ---- déclaration de garde par l'officine ---- */
  .garde-etat{border-radius:12px;padding:11px 14px;font-weight:700;font-size:.9rem;border:1px solid var(--line);background:#F8FCFB}
  /* Déclaration annulée par le Ministère : une information que l'officine
     doit lire, pas un détail à glisser en petits caractères. */
  .garde-retrait{margin-top:10px;border-radius:12px;padding:11px 14px;font-size:.87rem;
    border:1px solid #FCD34D;background:#FFFBEB;color:var(--gold-700)}

  /* ---- statut d'ouverture, dans l'espace pharmacie ----
     Deux boutons de taille égale : aucun des deux n'est « le bon », c'est
     à l'officine de dire. Celui en vigueur est plein, l'autre en contour. */
  .statut-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .statut-btn{border:2px solid var(--line);background:#fff;border-radius:13px;padding:13px 12px;
    font-family:inherit;font-weight:700;font-size:.92rem;cursor:pointer;color:var(--muted);
    display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .statut-btn:hover{border-color:var(--muted)}
  .statut-btn.ouvert.actif{background:var(--emerald);border-color:var(--emerald);color:#fff}
  .statut-btn.ferme.actif{background:#B91C1C;border-color:#B91C1C;color:#fff}
  @media (max-width:420px){ .statut-choix{grid-template-columns:1fr} }

  /* ---- module de gestion d'officine (espace pharmacie uniquement) ----
     Des listes longues qu'on parcourt vite : le catalogue fait plus de
     cinquante références, le stock autant de lots. Hauteur bornée et
     défilement dans le cadre — c'est la page entière qui ne doit pas
     s'allonger sans fin. */
  .of-liste{margin-top:10px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
  .of-ligne{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px}
  .of-ligne.bloque{background:#FEF2F2;border-color:#FCA5A5}
  .of-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
  .of-prix-champ{margin:0;width:120px}
  .of-classe{display:inline-block;background:var(--mint);color:var(--emerald-700);
    border-radius:999px;padding:1px 9px;font-size:.72rem;font-weight:700;margin-right:6px}
  /* Le statut réglementaire se remarque : il commande le contrôle à la
     délivrance, et le confondre avec un produit libre serait une faute. */
  .of-liste-reg{display:inline-block;background:#FEF3C7;color:var(--gold-700);
    border-radius:999px;padding:1px 9px;font-size:.72rem;font-weight:700;margin-right:6px;text-transform:uppercase}
  /* L'absence de prix est la raison n°1 pour laquelle un produit ne peut
     pas être vendu : elle est écrite en toutes lettres, pas suggérée. */
  .of-sans-prix{color:#B91C1C;font-weight:700;font-size:.84rem}
  .of-peremption{display:inline-block;border-radius:999px;padding:1px 9px;
    font-size:.72rem;font-weight:700;margin-top:3px}
  .of-peremption.info{background:#E0F2FE;color:var(--teal-700)}
  .of-peremption.attention{background:#FEF3C7;color:var(--gold-700)}
  .of-peremption.urgent{background:#FFEDD5;color:#C2410C}
  .of-peremption.perime{background:#FEE2E2;color:#B91C1C}
  .of-statut{display:inline-block;background:#FEE2E2;color:#B91C1C;border-radius:999px;
    padding:1px 9px;font-size:.72rem;font-weight:700;margin-top:3px}
  @media (max-width:560px){
    .of-actions{margin-left:0;width:100%}
    .of-prix-champ{flex:1;width:auto}
  }

  /* ---- comptoir (espace pharmacie uniquement) ---- */
  /* Le total doit se lire d'un coup d'œil, de l'autre côté du comptoir. */
  .ca-total{margin:14px 0;padding:14px 18px;border-radius:14px;text-align:right;
    background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;
    font-family:var(--font-display);font-weight:800;font-size:1.6rem}
  .ca-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px}
  .ca-mode{border:2px solid var(--line);background:#fff;border-radius:12px;padding:11px 10px;
    font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--muted)}
  .ca-mode:hover{border-color:var(--muted)}
  .ca-mode.actif{background:var(--mint);border-color:var(--emerald);color:var(--emerald-700)}
  /* Le contrôle à la délivrance ne se glisse pas en petits caractères :
     délivrer un psychotrope sans ordonnance est une faute professionnelle. */
  .ca-controle{margin:10px 0;padding:11px 14px;border-radius:12px;
    border:1px solid #FCD34D;background:#FFFBEB;color:var(--gold-700);font-size:.88rem}
  .ca-ticket{padding:13px 16px;border-radius:13px;border:1px dashed var(--line);background:#F8FCFB}

  /* ---- première configuration de l'Admin Pharmacie ----
     Les deux étapes sont montrées ensemble : on voit ce qui reste au
     lieu de découvrir la seconde après avoir cru avoir fini. */
  .cfg-etapes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .cfg-etape{flex:1;min-width:150px;border:1px solid var(--line);border-radius:12px;
    padding:9px 12px;font-size:.85rem;font-weight:600;color:var(--muted);background:#fff}
  .cfg-etape.active{border-color:var(--emerald);background:var(--mint);color:var(--emerald-700)}
  .cfg-etape.fait{border-color:#A7F3D0;color:var(--emerald-700)}
  .cfg-etape i{margin-right:5px}

  /* ---- alertes (module E) ----
     La couleur porte l'urgence, la barre de gauche la rend lisible même
     sur un écran de téléphone en plein soleil. Une alerte acquittée reste
     visible mais s'efface : elle n'est pas supprimée, elle est en
     sourdine — et il faut pouvoir le vérifier. */
  .al-compteurs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
  .al-compteur{border:1px solid var(--line);border-radius:13px;padding:11px 13px;background:#fff;text-align:center}
  .al-compteur b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.1}
  .al-compteur small{color:var(--muted);font-size:.74rem}
  .al-compteur.critique b{color:#B91C1C} .al-compteur.urgent b{color:#C2410C}
  .al-compteur.attention b{color:var(--gold-700)} .al-compteur.info b{color:var(--teal-700)}
  .of-alerte{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;background:#fff;
    border:1px solid var(--line);border-left:5px solid var(--line);border-radius:12px;padding:11px 14px}
  .of-alerte.critique{border-left-color:#B91C1C;background:#FEF2F2}
  .of-alerte.urgent{border-left-color:#C2410C;background:#FFF7ED}
  .of-alerte.attention{border-left-color:var(--gold-700);background:#FFFBEB}
  .of-alerte.info{border-left-color:var(--teal-600);background:#F0F9FF}
  .of-alerte.acquittee{opacity:.6;background:#fff;border-left-color:var(--line)}
  .al-action{display:block;margin-top:4px;font-size:.82rem;color:var(--emerald-700);font-weight:600}
  .al-palier{display:inline-block;border-radius:999px;padding:1px 9px;font-size:.7rem;font-weight:800;
    background:#fff;border:1px solid currentColor;margin-right:6px}

  /* ---- pilotage (module F) ----
     Un indicateur sans son unité ni sa période ne veut rien dire : chaque
     tuile porte les deux. */
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:16px}
  .kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px}
  .kpi b{display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--emerald-700);line-height:1.15}
  .kpi small{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
  .kpi.alerte b{color:#B91C1C}
  .abc,.xyz{display:inline-block;border-radius:6px;padding:1px 7px;font-size:.72rem;font-weight:800;margin-right:4px}
  .abc.A{background:#D1FAE5;color:var(--emerald-700)} .abc.B{background:#FEF3C7;color:var(--gold-700)}
  .abc.C{background:#F3F4F6;color:var(--muted)}
  .xyz.X{background:#DBEAFE;color:#1D4ED8} .xyz.Y{background:#E0E7FF;color:#4338CA}
  .xyz.Z{background:#FEE2E2;color:#B91C1C}
  .barre{height:7px;border-radius:999px;background:#EEF2F1;overflow:hidden;margin-top:5px}
  .barre span{display:block;height:100%;background:linear-gradient(90deg,var(--emerald),var(--teal))}

  /* ---- rôles internes et journal (module G) ---- */
  .of-role{display:inline-block;border-radius:999px;padding:1px 9px;font-size:.72rem;font-weight:700}
  .of-role.titulaire{background:#D1FAE5;color:var(--emerald-700)}
  .of-role.pharmacien{background:#DBEAFE;color:#1D4ED8}
  .of-role.vendeur{background:#F3F4F6;color:var(--muted)}
  .of-inactif{opacity:.55}
  .of-journal{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;margin-top:10px}
  .of-journal .ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:.83rem;
    border-bottom:1px solid var(--line);padding:6px 2px}
  .of-journal .quand{color:var(--muted);font-size:.76rem;min-width:118px}
  .of-journal .quoi{font-weight:700;color:var(--teal-700);min-width:150px}

  /* ---- inventaire tournant (module B5) ----
     Le comptage est À L'AVEUGLE : le champ de saisie ne s'accompagne
     d'aucune quantité théorique, sinon on la recopie. */
  .inv-ligne{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff;
    border:1px solid var(--line);border-radius:12px;padding:9px 13px}
  .inv-ligne.comptee{background:#F0FDF4;border-color:#A7F3D0}
  .inv-champ{margin:0;width:110px}
  .inv-ecart{font-weight:800}
  .inv-ecart.positif{color:var(--emerald-700)} .inv-ecart.negatif{color:#B91C1C}
  @media (max-width:560px){ .al-compteurs{grid-template-columns:repeat(2,1fr)} .inv-champ{flex:1;width:auto} }

  /* ---- tableau de bord de la garde (Ministère) ----
     Les officines de garde, groupées par arrondissement. Le groupement
     n'est pas décoratif : plusieurs pharmacies peuvent être de garde au
     même endroit le même soir, et une liste à plat ne le montrerait pas. */
  .garde-groupe{margin-bottom:14px}
  .garde-groupe-titre{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;
    color:var(--teal-700);padding:6px 2px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .garde-ligne{align-items:flex-start}
  /* L'origine de la garde, d'un coup d'œil : une déclaration d'officine et
     une désignation du Ministère n'ont pas la même valeur, et les afficher
     de la même façon reviendrait à les confondre. */
  .garde-origine{display:inline-block;border-radius:999px;padding:2px 9px;font-size:.72rem;
    font-weight:700;margin-top:4px}
  .garde-origine.officielle{background:#D1FAE5;color:var(--emerald-700)}
  .garde-origine.declaree{background:#DBEAFE;color:#1D4ED8}
  .garde-origine.signalee{background:#F3F4F6;color:var(--muted)}
  .garde-origine.contestee{background:#FEE2E2;color:#B91C1C}
  .garde-origine.manuelle{background:#FEF3C7;color:var(--gold-700)}
  .garde-etat.actif{background:var(--mint);border-color:#A7F3D0;color:var(--emerald-700)}
  .garde-etat.conteste{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
  .garde-etat.hors{background:#eef1f0;color:var(--muted)}

  /* ---- carte indisponible ---- */
  #map.carte-hs{display:grid;place-items:center;background:#F4F8F7;border:1px dashed var(--line)}
  .carte-hs-msg{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
    padding:24px;color:var(--muted);max-width:340px}
  .carte-hs-msg i{font-size:1.8rem;color:var(--teal-600)}

/* ---------- identifiant de compte, sécurité et assistance ----------
   Le code se lit à voix haute et se recopie sur un cahier : caractères
   espacés, taille généreuse, et un bouton de copie à côté — pas dessous,
   où il passerait inaperçu sur un téléphone. */
.account-id-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--mint);border:1px solid #A7F3D0;border-radius:14px;padding:12px 15px}
.account-id-box code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.15rem;
  font-weight:700;letter-spacing:.08em;color:var(--emerald-700);user-select:all}
.sec-etat{display:flex;align-items:center;gap:12px;border-radius:13px;padding:12px 15px;
  border:1px solid var(--line);background:#fff}
.sec-etat i{font-size:1.4rem}
.sec-etat.ok i{color:var(--emerald)} .sec-etat.ok{background:#F0FDF4;border-color:#A7F3D0}
.sec-etat.warn i{color:var(--gold-700)} .sec-etat.warn{background:#FFFBEB;border-color:#FDE68A}
.sec-etat.err i{color:#B91C1C} .sec-etat.err{background:#FEF2F2;border-color:#FCA5A5}
.sec-alerte{border-left:4px solid var(--line);border-radius:10px;padding:9px 13px;margin-top:9px;background:#fff}
.sec-alerte.critique{border-left-color:#B91C1C;background:#FEF2F2}
.sec-alerte.urgent{border-left-color:#C2410C;background:#FFF7ED}
.sec-alerte.attention{border-left-color:var(--gold-700);background:#FFFBEB}
.sec-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding:9px 2px}
.sec-ligne:last-child{border-bottom:0}
.sec-ligne.sensible{background:#FFFBEB;border-radius:8px;padding-inline:8px}
.sec-chip{font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 9px;
  background:#F3F4F6;color:var(--muted);white-space:nowrap}
.sec-chip.ok{background:var(--mint);color:var(--emerald-700)}
.sec-chip.echec{background:#FEE2E2;color:#B91C1C}

/* ---------- fenêtres d'administration (vérification, saisie) ----------
   Une opération sensible mérite un écran, pas une boîte de dialogue du
   navigateur : celle-ci masque le contexte, n'accepte qu'une ligne, et
   ne dit ce qui manque qu'après avoir tout effacé. */
.modal-fond{position:fixed;inset:0;z-index:1200;background:rgba(15,42,34,.55);
  display:grid;place-items:center;padding:18px;overflow-y:auto}
.modal-fond.hide{display:none}
.modal-boite{background:#fff;border-radius:18px;padding:22px 24px;width:min(560px,100%);
  box-shadow:0 24px 70px rgba(15,42,34,.34);max-height:92vh;overflow-y:auto}
.modal-boite h3{margin:0 0 8px;font-size:1.15rem}
.modal-boite label{display:block;margin-top:12px;font-weight:600;font-size:.88rem}
.verif-methodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:6px}
.verif-methode{text-align:left;border:2px solid var(--line);background:#fff;border-radius:12px;
  padding:10px 12px;font-family:inherit;cursor:pointer;color:var(--muted)}
.verif-methode:hover{border-color:var(--muted)}
.verif-methode.actif{background:var(--mint);border-color:var(--emerald);color:var(--emerald-700)}
.verif-methode b{display:block;font-size:.9rem}
.verif-methode small{display:block;font-size:.75rem;line-height:1.3;margin-top:2px}

/* ---------- H1 · disponibilité annoncée (site public) ----------
   Deux états, deux couleurs, et rien d'autre à lire : le public n'a
   besoin que de « l'avez-vous, oui ou non ». */
.dispo-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.dispo-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:11px 14px}
.dispo-item i{font-size:1.15rem}
.dispo-item.oui i{color:var(--emerald)}
.dispo-item.non i{color:#B91C1C}
.dispo-item > div{flex:1;min-width:0}
.dispo-etat{font-size:.74rem;font-weight:800;border-radius:999px;padding:2px 10px;white-space:nowrap}
.dispo-item.oui .dispo-etat{background:var(--mint);color:var(--emerald-700)}
.dispo-item.non .dispo-etat{background:#FEE2E2;color:#B91C1C}

/* ---------- commande « me localiser » dans la carte ---------- */
.leaflet-control.pg-locate{width:34px;height:34px;display:grid;place-items:center;
  background:#fff;color:var(--emerald-700);font-size:17px;cursor:pointer}
.leaflet-control.pg-locate:hover{background:var(--mint)}

/* ---------- recherche parmi les 357 arrondissements ---------- */
.arr-recherche{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.arr-champ{position:relative}
.arr-champ i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.arr-champ .field{padding-left:36px;margin:0}
.arr-compte{margin-top:6px;color:var(--muted)}
/* Hauteur bornée : 357 entrées ne doivent jamais pousser la page. */
.arr-resultats{margin-top:8px;max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.arr-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-family:inherit}
.arr-item:hover,.arr-item:focus-visible{background:var(--mint);border-color:var(--emerald)}
/* L'arrondissement où l'on se trouve, repéré dans la liste : sans marque,
   rien ne distingue « là où je suis » de « là où je pourrais aller ». */
.arr-item.ici{border-color:var(--emerald);background:var(--mint)}
.arr-item.ici .arr-nom{color:var(--emerald-700)}
.arr-nom{font-weight:700;font-size:.92rem;color:var(--ink)}
.arr-ctx{flex:1;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arr-pastille{flex:0 0 auto;min-width:26px;text-align:center;border-radius:999px;padding:2px 8px;
  font-size:.74rem;font-weight:700}
.arr-pastille.pleine{background:var(--mint);color:var(--emerald-700)}
.arr-pastille.vide{background:#F3F4F6;color:#9CA3AF}
@media (max-width:560px){
  .arr-ctx{white-space:normal}
  .arr-item{flex-wrap:wrap;gap:4px 10px}
}

/* Attribution d'un arrondissement à une pharmacie : la liste des 357
   au-dessus, la saisie libre en dessous. Sur écran étroit, l'une sous
   l'autre ; à partir de 620 px, côte à côte. */
.arr-attribution{display:grid;gap:8px}
.arr-attribution .field{margin-bottom:0}
@media (min-width:620px){ .arr-attribution{grid-template-columns:1fr 1fr;align-items:center} }

/* ---------- administration : rail horizontal des pharmacies ---------- */
.ph-recherche{margin:10px 0 12px}
.ph-recherche .mini{margin-top:6px;color:var(--muted)}
/* Une seule ligne qui défile. scroll-snap cale les vignettes proprement. */
.ph-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ph-rail::-webkit-scrollbar{height:8px}
.ph-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.ph-rail::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.ph-vignette{flex:0 0 168px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;
  text-align:left;cursor:pointer;font-family:inherit;position:relative;
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 12px}
.ph-vignette:hover{border-color:var(--emerald);background:#F8FFFC}
.ph-vignette.active{border-color:var(--emerald);background:var(--mint);
  box-shadow:0 4px 14px rgba(16,185,129,.22)}
/* Liseré doré : la pharmacie de garde doit sauter aux yeux dans le rail. */
.ph-vignette.garde{border-left:4px solid var(--gold)}
.ph-vignette-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--mint);color:var(--emerald-700);overflow:hidden;font-size:14px}
.ph-vignette-logo img{width:100%;height:100%;object-fit:cover}
.ph-vignette-nom{font-weight:700;font-size:.84rem;line-height:1.2;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph-vignette-lieu{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-vignette-alertes{position:absolute;top:8px;right:8px;display:flex;gap:3px}
.ph-alerte{font-size:.7rem;color:var(--gold-700)}
.ph-alerte.grave{color:#B91C1C}
.ph-invite{padding:14px;text-align:center;border:1px dashed var(--line);border-radius:13px;color:var(--muted)}
.ph-fiche{border-color:var(--emerald)}
@media (max-width:560px){
  .ph-vignette{flex-basis:146px}
}