/* Pharmacies de garde Maroc — direction « Fanous ».
   La pharmacie de garde est la lumière qui reste allumée dans la médina : une lanterne marocaine en laiton,
   ajourée d'étoiles à huit branches, éclaire le haut de page. Bleu nuit de Fès, laiton, parchemin ;
   le vert signale ce qui est ouvert, le rouge est réservé aux urgences. La croix verte n'est qu'un
   signe de pharmacie, jamais mêlée aux motifs islamiques. Titres en El Messiri (inspirée de la
   calligraphie), texte en IBM Plex Sans Arabic. Nuit par défaut, jour au choix.
   Propriétés logiques : la même feuille sert le français et l'arabe (droite à gauche).
   Accessibilité : cibles ≥ 44 px, focus 3 px, information jamais portée par la seule couleur. */
*{margin:0;padding:0;box-sizing:border-box}
:root{ /* jour : parchemin et encre bleu nuit */
  --bg:#F5EEDF; --bg-2:#FFFBF2; --bg-3:#EBE1CC; --ink:#14224A; --ink-2:#3F4A68; --ink-3:#5E6680;
  --line:#DCCFB4; --line-2:#E8DEC9;
  --brass:#D9A441; --brass-txt:#8A5E0F; --on-brass:#14224A; --open:#1E8A57; --open-soft:#DDF0E4; --open-txt:#14653F;
  --red:#B4232C; --focus:#14224A;
  --glow:rgba(217,164,65,.20);
  --r:16px; --r-sm:10px; --wide:1080px; --gut:clamp(16px,4vw,32px);
  --shadow:0 1px 2px rgba(20,34,74,.06),0 12px 30px -18px rgba(20,34,74,.35);
}
body.night{ /* nuit : bleu de Fès, laiton, parchemin */
  --bg:#0E1B3D; --bg-2:#16264F; --bg-3:#1D2F5C; --ink:#F3E9D2; --ink-2:#D2C6AA; --ink-3:#AFA48B;
  --line:#34457A; --line-2:#22345F;
  --brass:#D9A441; --brass-txt:#E8BE6A; --on-brass:#0E1B3D; --open:#2BB673; --open-soft:rgba(43,182,115,.16); --open-txt:#7BE3AE;
  --red:#FF8A8F; --focus:#E8BE6A;
  --glow:rgba(255,196,92,.26);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -16px rgba(0,0,0,.7);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:17px;line-height:1.6;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background-color .25s,color .25s}
[dir=rtl] body{font-size:18px;line-height:1.8}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:2000;background:var(--brass);color:var(--on-brass);padding:10px 16px;border-radius:8px;font-weight:700}
.skip:focus{inset-inline-start:8px}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic .fill{fill:currentColor;stroke:none}
[dir=rtl] .flip{transform:scaleX(-1)}
bdi[dir=ltr]{unicode-bidi:isolate}

/* ── Signe de pharmacie et lanterne ── */
.mark{width:28px;height:28px;border-radius:7px;background:var(--open);display:grid;place-items:center;flex-shrink:0}
.mark svg{width:16px;height:16px;fill:var(--bg)}
.fanous{display:block;width:clamp(170px,20vw,240px);height:auto;overflow:visible}
.fanous .halo{opacity:.35}
body.night .fanous .halo{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .fanous .trous g{animation:allume .5s ease-out both;animation-delay:calc(var(--i) * 90ms + 200ms)}
  .fanous .halo{animation:halo 1.4s ease-out both}
  @keyframes allume{from{fill:#5E3F10}}
  @keyframes halo{from{opacity:0}}
}
/* Moucharabieh : treillis d'étoiles très discret derrière le haut de page, halo de la lanterne */
.lattice{background-image:radial-gradient(ellipse 60% 70% at var(--glow-x,80%) 45%,var(--glow),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='.18'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E");background-size:auto,40px 40px}
[dir=rtl] .lattice{--glow-x:20%}

/* ── En-tête ── */
.top .wrap{display:flex;align-items:center;gap:10px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:'El Messiri',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.2}
.spacer{flex:1}
.lang{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:700;font-family:'IBM Plex Sans Arabic',sans-serif}
.lang:hover{border-color:var(--brass);background:var(--bg-3)}
.top-sos{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;text-decoration:none;font-weight:700;color:var(--red);border:1.5px solid color-mix(in srgb,var(--red) 45%,transparent);transition:background .15s}
.top-sos:hover{background:color-mix(in srgb,var(--red) 10%,transparent)}
.top-sos .ic{width:18px;height:18px}
.toggle{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--bg-2);border-radius:50%;cursor:pointer;transition:border-color .15s}
.toggle:hover{border-color:var(--ink-3)}
.toggle .moon{display:block}.toggle .sun{display:none}
body.night .toggle .moon{display:none}body.night .toggle .sun{display:block}

/* ── Haut de page ── */
.top{border-bottom:1px solid var(--line)}
.hero{padding:clamp(24px,5vw,56px) 0 clamp(24px,4vw,44px);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:center}
.crumbs{font-size:.92rem;color:var(--ink-3);margin-bottom:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li:not(:last-child)::after{content:"/";margin-inline-start:6px;color:var(--line)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.now{font-size:.95rem;color:var(--ink-2);margin-bottom:12px;min-height:1.6em}
.now:not(:empty)::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--open);box-shadow:0 0 0 4px var(--open-soft);margin-inline:4px 10px;vertical-align:.05em}
.now b{color:var(--ink);font-weight:700}
.hero h1{font-family:'El Messiri',sans-serif;font-weight:700;font-size:clamp(2.4rem,6.4vw,4.5rem);line-height:1.15;max-width:15ch;color:var(--ink)}
[dir=rtl] .hero h1{line-height:1.4}
.hero .sub{margin-top:14px;font-size:1.12rem;color:var(--ink-2);max-width:46ch}
.sign{padding-top:0}

/* ── Carte de recherche : 1) ma position, 2) une ville ── */
.search{margin-top:26px;max-width:600px}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.geo-btn{width:100%;display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 14px;border:0;border-radius:var(--r-sm);text-align:start;
  background:var(--brass);color:var(--on-brass);cursor:pointer;transition:transform .12s,filter .15s}
.geo-btn:hover{filter:brightness(1.1)}
.geo-btn:active{transform:scale(.985)}
.geo-btn:disabled{opacity:.8;cursor:progress}
.geo-ic{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--on-brass) 14%,transparent);display:grid;place-items:center;flex-shrink:0}
.geo-btn.busy .geo-ic .ic{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.geo-txt{flex:1;min-width:0;line-height:1.3}
.geo-txt b{display:block;font-size:1.12rem}
.geo-txt small{display:block;font-size:.92rem;opacity:.9;margin-top:3px}
.orsep{display:flex;align-items:center;gap:12px;margin:14px 0 10px;color:var(--ink-3);font-size:.93rem}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--line)}
.cities{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cities a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding-inline:16px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg);text-decoration:none;font-weight:700;transition:border-color .15s,background .15s}
.cities a:hover,.cities a[aria-current]{border-color:var(--brass);background:var(--bg-3)}
.cities .arrow{width:18px;height:18px;color:var(--ink-3)}
.trust{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:.93rem;color:var(--ink-2)}
.trust .ic{width:20px;height:20px;color:var(--open-txt);margin-top:2px}
.trust a{font-weight:700;color:var(--ink)}
.quick{margin-top:4px;font-size:.95rem;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;font-weight:700;color:var(--ink);background:var(--bg-2);transition:border-color .15s,background .15s}
.quick a:hover{border-color:var(--brass);background:var(--bg-3)}
.notice{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);border-inline-start:4px solid var(--red);background:var(--bg-3);font-size:.95rem;display:none}
.notice.show{display:block}

/* ── Gardes du jour ── */
.results{display:none;padding-top:40px;scroll-margin-top:12px}
.results.show{display:block}
.rhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding-bottom:14px;border-bottom:2px solid var(--brass)}
.rhead .n{font-family:'El Messiri',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.2}
.rhead .meta{color:var(--ink-2);font-size:.97rem;margin-top:2px}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px;margin-top:18px}
.row{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:14px;padding:16px 18px}
.row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding-inline:10px 12px;border-radius:999px;font-size:.88rem;font-weight:700;background:var(--open-soft);color:var(--open-txt)}
.live{width:8px;height:8px;border-radius:50%;background:var(--open);box-shadow:0 0 0 3px color-mix(in srgb,var(--open) 30%,transparent)}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:.87rem;font-weight:700;border:1.5px solid var(--brass);color:var(--brass-txt)}
.row .name{font-size:1.16rem;font-weight:700;line-height:1.35}
.row .addr{color:var(--ink-2);margin-top:3px}
.row .hrs{margin-top:6px;font-size:.97rem}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px}
.btn{flex:1 1 auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;border-radius:var(--r-sm);font-weight:700;text-decoration:none;text-align:center;transition:filter .15s,background .15s,border-color .15s}
.btn .ic{width:20px;height:20px}
.btn.call{background:var(--brass);color:var(--on-brass)}
.btn.call:hover{filter:brightness(1.1)}
.btn.dir{border:1.5px solid var(--line);color:var(--ink)}
.btn.dir:hover{border-color:var(--ink-3);background:var(--bg-3)}
.btn.wa{flex:0 0 auto;border:1.5px solid var(--line);background:var(--bg-2);color:var(--ink)}
.btn.wa .ic{color:#1FA855}
.btn.wa:hover{border-color:#1FA855}
.ramadan{margin-top:14px;padding:12px 16px;border-radius:12px;border:1.5px solid var(--brass);color:var(--ink)}
.list .empty{grid-column:1/-1}
.empty{padding:16px;border:1.5px dashed var(--line);border-radius:12px;color:var(--ink-2)}

/* ── Accueil : les gardes du jour dans chaque ville ── */
.citycount{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.citycount a{display:flex;flex-direction:column;gap:2px;min-height:72px;justify-content:center;padding:12px 16px;border:1px solid var(--line);border-inline-start:3px solid var(--brass);border-radius:12px;background:var(--bg-2);text-decoration:none;transition:border-color .15s,background .15s}
.citycount a:hover{border-color:var(--brass);background:var(--bg-3)}
.citycount b{font-family:'El Messiri',sans-serif;font-size:1.2rem}
.citycount span{color:var(--ink-2);font-size:.95rem}

/* ── Prochains jours : liste compacte par jour ── */
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.day{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.day h3{font-family:'El Messiri',sans-serif;font-size:1.15rem;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.day ul{list-style:none}
.day li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)}
.day li:last-child{border-bottom:0}
.dn{font-weight:700;grid-column:1}
.dq{grid-column:1;color:var(--ink-2);font-size:.92rem}
.dh{white-space:nowrap;color:var(--brass-txt);font-weight:700;margin-inline-start:6px}
.dt{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:10px;font-weight:700;text-decoration:none;white-space:nowrap;font-size:.92rem}
.dt:hover{border-color:var(--brass)}

/* ── Contenu ── */
.block{padding-top:clamp(52px,8vw,88px)}
.block h2{font-family:'El Messiri',sans-serif;font-weight:700;font-size:clamp(1.6rem,3.4vw,2.25rem);line-height:1.25;margin-bottom:16px;max-width:26ch}
.lead{color:var(--ink-2);max-width:62ch;margin-bottom:22px}
.answer{max-width:68ch;border-inline-start:3px solid var(--brass);padding-block:4px;padding-inline-start:20px}
.answer p + p{margin-top:12px}
.answer a{font-weight:700}
.note{color:var(--ink-3);font-size:.9rem;margin-top:12px}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;max-width:980px}
.cols h3{font-weight:700;font-size:1.05rem;margin-bottom:6px}
.cols p{color:var(--ink-2)}
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{min-height:56px;display:flex;align-items:center;padding-block:12px;padding-inline:0 40px;font-weight:700;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:6px;font-size:1.5rem;font-weight:400;color:var(--ink-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--ink-2);max-width:64ch}

/* ── Urgences ── */
.emerg{margin-top:clamp(56px,8vw,96px);background:var(--bg-2);border-top:1px solid var(--line)}
.emerg .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-top:28px;padding-bottom:28px}
.emerg p{max-width:46ch;color:var(--ink-2)}
.emerg p b{color:var(--ink)}
.nums{display:flex;gap:12px;flex-wrap:wrap}
.num{display:flex;flex-direction:column;justify-content:center;min-height:76px;min-width:120px;padding:8px 18px;border:2px solid color-mix(in srgb,var(--red) 55%,transparent);border-radius:12px;text-decoration:none;line-height:1;transition:background .15s}
.num:hover{background:color-mix(in srgb,var(--red) 10%,transparent)}
.num b{font-family:'El Messiri',sans-serif;font-weight:700;font-size:2.2rem;color:var(--red)}
.num span{font-size:.9rem;color:var(--ink-2);margin-top:6px;line-height:1.3}

/* ── Pied ── */
footer{padding:0 0 48px;font-size:.95rem;color:var(--ink-2);background:var(--bg-2);border-top:1px solid var(--line)}
footer .wrap{padding-top:36px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot b{display:block;color:var(--ink);margin-bottom:6px}
.foot ul{list-style:none}
.foot a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.fine{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero .wrap{text-align:center}
  .sign{order:-1;display:flex;justify-content:center}
  .fanous{width:118px}
  .hero.city .sign{display:none}
  .hero h1,.hero .sub{margin-inline:auto}
  .search{margin-inline:auto;text-align:start}
  .trust{text-align:start}
  .quick,.crumbs ol{justify-content:center}
  .lattice,[dir=rtl] .lattice{--glow-x:50%}
  .cols{grid-template-columns:minmax(0,1fr);gap:20px}
  .foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body{font-size:16px}
  [dir=rtl] body{font-size:17px}
  .top .wrap{gap:6px}
  .brand span{font-size:.98rem}
  .top-sos span{display:none}
  .top-sos,.lang{padding:0 11px}
  .panel{padding:12px}
  .cities{grid-template-columns:minmax(0,1fr)}
  .num{flex:1;min-width:0;padding:8px 12px}
  .btn.wa{flex:1 1 100%}
}
@media (max-width:400px){ .brand span{display:none} }