/* The look of every page: the screen (index.html), the city pages, the index
   and "près de moi" (city.html), the report form (_report.html).

   A pharmacy's green cross lit at night: one green, kept for what is on
   garde and for the way there; amber for the visitor and for warnings.
   One theme at every hour, whatever the phone prefers: warm paper, not
   white, because it is read at night.
   System fonts only: nothing to download, and Arabic gets the phone's own
   Arabic face. Logical properties throughout, so /ar mirrors with no rule
   of its own. */
:root{
  --bg:#f1ede4;--panel:#fbf9f3;--line:#d9d2c3;--fg:#16201c;--muted:#56615c;
  --go:#0b6b3a;--go-ink:#fff;--plain:#5d6b77;--you:#a85400;--edge:#fff;
  --shade:0 1px 2px rgba(40,30,10,.08);
  color-scheme:only light;
}
*{box-sizing:border-box}
/* What is not true yet (static/offline.js) stays out of sight whatever its tag is laid out as. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
/* Arabic is read a size up and needs room above and below its letters. */
:lang(ar){font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,sans-serif;line-height:1.7}
html:lang(ar){font-size:106.25%}
a{color:inherit}
:focus-visible{outline:3px solid var(--you);outline-offset:2px}
.wrap{max-width:480px;margin:0 auto;padding:0 14px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px}

/* Head: the cross, what the page is, which night; the other language. */
header{padding-block:12px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
nav{flex:1 0 100%;display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{font-size:1.2rem;line-height:1.25;font-weight:800;margin:0;letter-spacing:-.01em;
  padding-inline-start:30px;position:relative;flex:1;min-width:0;text-wrap:balance}
:lang(ar) h1{letter-spacing:0;line-height:1.5}
h1::before{content:"";position:absolute;inset-inline-start:0;top:.12em;width:20px;height:20px;background:var(--go);
  clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}
h1 small{display:block;font-weight:500;font-size:.85rem;color:var(--muted);letter-spacing:0;margin-top:1px}
h2{font-size:.95rem;font-weight:700;margin:10px 0 0;color:var(--fg)}
.lang,nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.9rem;white-space:nowrap}
.lang,nav a[hreflang]{border:1px solid var(--line);border-radius:999px;padding:0 14px;text-decoration:none;background:var(--panel)}

/* The map. */
#map{height:250px;border:1px solid var(--line);border-radius:16px;background:var(--panel);z-index:0;
  scroll-margin-top:8px;font:inherit}
.leaflet-container{background:var(--panel)}
/* Each tile half a pixel over its neighbours, painted over them: the map
   starts wherever the lines above it end, a fraction of a pixel down the
   page, and there Leaflet's own tiles, which it adds one to the other
   (plus-lighter), leave a white line where two of them meet. */
.leaflet-container img.leaflet-tile{mix-blend-mode:normal;width:256.5px!important;height:256.5px!important}
.leaflet-container .leaflet-control-attribution{background:var(--panel);color:var(--muted);opacity:.9;font-size:10px}
.leaflet-container .leaflet-control-attribution a{color:var(--muted)}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--panel);color:var(--fg);border-color:var(--line)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--fg)}
.leaflet-popup-content{margin:10px 14px;font-weight:700;font-size:.9rem}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
.pin{background:var(--go);color:var(--go-ink);border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center;
  font:800 13px/1 system-ui,sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .15s}
.pin.osm{background:var(--plain);color:var(--edge);font-size:12px}
/* From a pin moved off the ones it would cover to its true place (map.js). */
.tie{stroke:var(--plain);stroke-width:1.5;fill:none}
.pin.sel{transform:scale(1.35);outline:3px solid var(--you);z-index:1000!important}
.you{background:var(--you);border-radius:50%;border:3px solid var(--edge);box-shadow:0 0 0 6px color-mix(in srgb,var(--you) 30%,transparent)}

/* Lists and cards. A card: number, who, how far; under them, the card's
   whole width, the address and until when; then the way there and the
   phone, each a full thumb wide; the report under them. */
#list,section{display:flex;flex-direction:column;gap:10px}
ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ol>li{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 14px 4px;box-shadow:var(--shade);
  display:grid;grid-template-columns:auto 1fr;row-gap:10px;align-items:center;scroll-margin:8px}
ol>li.sel{border-color:var(--go);box-shadow:inset 0 0 0 1px var(--go)}
.n{grid-column:1;width:30px;height:30px;margin-inline-end:10px;border-radius:50%;border:0;padding:0;background:var(--go);color:var(--go-ink);
  font:800 .9rem/1 system-ui,sans-serif;display:grid;place-items:center;cursor:pointer}
.n.osm{background:var(--plain);color:var(--edge)}
.who{grid-column:2;min-width:0}
.what{grid-column:1/-1;min-width:0}
/* How far, beside the name. */
.dist{float:right;padding-inline-start:12px;font-weight:800;font-size:1.08rem;line-height:1.3;white-space:nowrap;unicode-bidi:isolate}
[dir=rtl] .dist{float:left}
.name{font-weight:800;font-size:1.08rem;line-height:1.3}
.addr,.note,.src{color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
.addr:empty{display:none}
.sub{color:var(--go);font-weight:650;font-size:.9rem}
.addr+.sub,.tel{margin-top:4px}
/* The city, then the hours, a dot between them. A line too long for the
   phone breaks between the two and nowhere else, so an hour never sits alone
   on a line; the dot is drawn in the room each part keeps before it, which
   at the start of a line lies outside the card's text and is cut off. */
.sub{overflow:hidden}
.both{display:flex;flex-wrap:wrap;margin-inline-start:-.9em}
.both span{padding-inline-start:.9em;position:relative}
.both span+span::before{content:"·";position:absolute;inset-inline-start:0;width:.9em;text-align:center}
.osm~.what .sub{color:var(--muted);font-weight:500}
/* A number the source masked cannot be dialled: it is read, not pressed. */
.tel{color:var(--muted);font-size:.85rem}
.note,.src{margin:0}
.acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acts>a{flex:1 1 0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;padding:0 12px;font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);color:var(--fg);unicode-bidi:isolate}
.acts>a.go{background:var(--go);color:var(--go-ink);border-color:var(--go);flex-grow:1.2}
.acts>a::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.go{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.7 11.3l-9-9a1 1 0 00-1.4 0l-9 9a1 1 0 000 1.4l9 9a1 1 0 001.4 0l9-9a1 1 0 000-1.4zM14 14.5V12h-4v3H8v-4a1 1 0 011-1h5V7.5l3.5 3.5z'/%3E%3C/svg%3E")}
[href^="tel:"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%3E%3C/svg%3E")}
.apps{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:.85rem}
.apps a{min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;padding:0 12px;
  font-weight:700;text-decoration:none;color:var(--fg)}
button.rep{flex:1 0 100%;font:inherit;font-size:.8rem;color:var(--muted);background:none;border:0;min-height:36px;padding:0;
  text-align:end;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Sentences that stand in for a list, or come before one. */
.msg{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0}
.warn{border-inline-start:4px solid var(--you)}
#starts{border-inline-start:4px solid var(--go);font-weight:650}
.more{margin:0;font-size:.9rem}
.more a,footer a{display:inline-flex;align-items:center;min-height:44px}
.big{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:14px;padding:8px 16px;
  font-weight:800;font-size:1.05rem;text-align:center;text-decoration:none;background:var(--go);color:var(--go-ink)}

/* Cities: chips on the screen that waits for a position, two columns on the index. */
p.cities{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
p.cities br{flex:1 0 100%;content:""}
p.cities a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;font-weight:600;font-size:.9rem;background:var(--bg)}
ul.cities{list-style:none;margin:0;padding:0;columns:2;column-gap:14px}
ul.cities li{break-inside:avoid}
ul.cities a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
footer{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);
  border-top:1px solid var(--line);padding-top:6px;margin-top:8px}

/* "Signaler une erreur": a sheet from the bottom of the phone. */
#report{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:20px 20px 0 0;
  padding:18px 16px calc(16px + env(safe-area-inset-bottom));width:100%;max-width:480px;margin-bottom:0;max-height:92vh}
#report::backdrop{background:rgba(0,0,0,.65)}
#report form{display:flex;flex-direction:column;gap:6px}
#report h2,#report p{margin:0}
#report h2{font-size:1.1rem}
#report .who{font-weight:800;color:var(--go)}
#report label{display:flex;gap:12px;align-items:center;min-height:46px;border-bottom:1px solid var(--line)}
#report input{width:22px;height:22px;margin:0;accent-color:var(--go);flex:none}
#report label.wide{flex-direction:column;align-items:stretch;gap:6px;color:var(--muted);font-size:.9rem;border:0;padding-top:8px}
#report textarea{font:inherit;font-size:1rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;resize:vertical}
#report .said{color:var(--you);font-weight:600}
#report .acts{margin-top:8px}
#report .acts button{flex:1;font:inherit;font-weight:700;min-height:48px;border-radius:12px;border:1px solid var(--line);
  color:var(--fg);background:none;cursor:pointer}
#report .acts button[type=submit]{background:var(--go);color:var(--go-ink);border-color:var(--go)}

/* Whole pixels: a map a fraction of a pixel tall shows a seam between its tiles. */
@media (min-height:760px){#map{height:290px}}
@media (min-width:700px){
  #report{border-radius:20px;margin-bottom:auto}
  ul.cities{columns:3}
}
@media (prefers-reduced-motion:reduce){.pin{transition:none}}