/* ============================================================
   RCK & KOUBA — LIEUX / PLACES / أماكن (City Guide)
   ============================================================ */
.pl{--pg:#12A150;--pgd:#0C7A3C;--pink:#171B18;--pmut:#68706B;--pline:#E3E8E4;background:#F6F8F6;color:#171B18}
.pl *{box-sizing:border-box}
.pl-wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(12px,3vw,24px)}
/* hero */
.pl-hero{background:linear-gradient(140deg,#0E2417,#123B22 60%,#0C7A3C 140%);color:#fff;
  padding:clamp(2.2rem,6vw,4rem) 0 clamp(4.2rem,7vw,5rem);position:relative;overflow:hidden}
.pl-hero::after{content:"";position:absolute;inset-inline-end:-120px;top:-120px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(18,161,80,.4),transparent 65%)}
.pl-hero h1{color:#fff;font-size:clamp(1.9rem,5vw,3.2rem);margin:0 0 .25em}
.pl-hero .lead{color:rgba(255,255,255,.8);max-width:44em;font-size:1.02rem}
.pl-counters{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.4rem}
.pl-counters b{display:block;font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.4rem);color:#7BE0A8;line-height:1}
html[lang="ar"] .pl-counters b{font-family:var(--font-ar-display)}
.pl-counters span{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.6)}
html[lang="ar"] .pl-counters span{letter-spacing:0;font-size:.8rem}
/* recherche */
.pl-search{position:relative;margin-top:1.6rem;max-width:620px}
.pl-search input{width:100%;border:0;border-radius:999px;padding:1rem 3.2rem 1rem 1.4rem;font:inherit;font-size:1.02rem;
  box-shadow:0 14px 40px rgba(0,0,0,.3);outline:none}
html[dir="rtl"] .pl-search input{padding:1rem 1.4rem 1rem 3.2rem}
.pl-search .ic{position:absolute;top:50%;inset-inline-end:1.1rem;transform:translateY(-50%);font-size:1.15rem;color:var(--pgd)}
.pl-ac{position:absolute;top:calc(100% + 8px);inset-inline:0;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25);
  overflow:hidden;z-index:50;max-height:330px;overflow-y:auto}
.pl-ac[hidden]{display:none}
.pl-ac button{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;background:none;border:0;
  padding:.65rem 1rem;cursor:pointer;font:inherit;border-bottom:1px solid #F0F2F0}
.pl-ac button:hover{background:#EDF7F1}
.pl-ac .i{font-size:1.1rem}
.pl-ac small{color:var(--pmut)}
/* nav categories */
.pl-nav{position:sticky;top:62px;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pline);padding-block:.55rem}
.pl-cats{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
html[dir="rtl"] .pl-cats{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(270deg,#000 calc(100% - 34px),transparent)}
.pl-cats::-webkit-scrollbar{display:none}
@media(min-width:760px){
  .pl-cats{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
  html[dir="rtl"] .pl-cats{-webkit-mask-image:none;mask-image:none}
}
.pl-cat{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45em;border:1px solid var(--pline);background:#fff;
  border-radius:999px;padding:.42rem 1rem;font-family:var(--font-display);font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.18s;color:#171B18}
html[lang="ar"] .pl-cat{letter-spacing:0;font-family:var(--font-ar-display);font-size:.85rem}
.pl-cat:hover{border-color:var(--pg);transform:translateY(-1px)}
.pl-cat.on{background:var(--pg);border-color:var(--pg);color:#fff}
.pl-subs{display:flex;gap:.35rem;overflow-x:auto;margin-top:.5rem;scrollbar-width:none}
.pl-subs:empty{display:none}
.pl-sub{flex:0 0 auto;border:1px dashed var(--pline);background:#FAFBFA;border-radius:999px;padding:.25rem .8rem;
  font-size:.74rem;cursor:pointer;color:var(--pmut)}
.pl-sub.on{background:var(--pgd);color:#fff;border-style:solid;border-color:var(--pgd)}
/* sections */
.pl-sec{margin-block:clamp(1.6rem,3.5vw,2.4rem)}
.pl-sec>h2{font-size:clamp(1.15rem,2.2vw,1.5rem);display:flex;align-items:center;gap:.5em}
.pl-sec>h2::before{content:"";width:5px;height:1.05em;background:var(--pg);border-radius:3px}
/* cards */
.pl-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pl-card{background:#fff;border:1px solid var(--pline);border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:0 6px 22px rgba(20,40,28,.07);transition:.2s;opacity:0;transform:translateY(20px)}
.pl-card.in{opacity:1;transform:none}
.pl-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,40,28,.14);border-color:var(--pg)}
.pl-card .ph{height:130px;background:linear-gradient(135deg,#E7F6EE,#D2EBDD);display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;position:relative;overflow:hidden}
.pl-card .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pl-card .bd{padding:.85rem 1rem 1rem}
.pl-card .k{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pgd);font-family:var(--font-display);font-weight:600}
html[lang="ar"] .pl-card .k{letter-spacing:0;font-family:var(--font-ar-display);font-size:.74rem}
.pl-card h3{font-size:1rem;margin:.15em 0 .3em;line-height:1.25}
.pl-card p{font-size:.85rem;color:var(--pmut);margin:0 0 .5em;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-meta{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;font-size:.72rem;color:var(--pmut)}
.pl-chip{border:1px solid var(--pline);border-radius:999px;padding:.1em .6em;background:#FAFBFA}
.pl-chip.rck{background:rgba(18,161,80,.12);border-color:rgba(18,161,80,.4);color:var(--pgd);font-weight:700}
.pl-chip.dist{background:#EDF7F1;color:var(--pgd);font-weight:700}
.pl-ta{display:inline-flex;align-items:center;gap:.3em;font-weight:700;color:#00AA6C}
.pl-empty{border:1px dashed var(--pline);border-radius:14px;background:#FBFCFB;padding:1.6rem;text-align:center;color:var(--pmut)}
.pl-empty b{display:block;font-size:1.5rem;margin-bottom:.3rem}
/* hub : centres d'intérêt */
.pl-hub{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.7rem}
.pl-tile{position:relative;border:1px solid var(--pline);background:#fff;border-radius:16px;
  padding:1.15rem .8rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.32rem;
  cursor:pointer;font:inherit;text-align:center;overflow:hidden;transition:.22s;
  opacity:0;transform:translateY(18px) scale(.97)}
.pl-tile.in{opacity:1;transform:none}
.pl-tile::before{content:"";position:absolute;inset:0 0 auto;height:70px;pointer-events:none;
  background:radial-gradient(circle at 50% 0,var(--tca),transparent 78%)}
.pl-tile .tic{font-size:2.05rem;line-height:1.2;position:relative}
.pl-tile b{font-family:var(--font-display);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:#171B18}
html[lang="ar"] .pl-tile b{font-family:var(--font-ar-display);letter-spacing:0;font-size:.95rem}
.pl-tile small{color:var(--pmut);font-size:.73rem}
.pl-tile:hover{transform:translateY(-5px);border-color:var(--tc);box-shadow:0 16px 34px var(--tca)}
.pl-tile:active{transform:translateY(-2px) scale(.98)}
.pl-hub-d{grid-column:1/-1;text-align:center;color:var(--pmut);font-size:.86rem;margin:.4rem 0 0}
/* bouton voir plus */
.pl-more{grid-column:1/-1;text-align:center;margin-top:.5rem}
.pl-more button{border:1px solid var(--pg);background:#fff;color:var(--pgd);border-radius:999px;
  padding:.62rem 1.7rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;
  font-size:.78rem;cursor:pointer;transition:.2s}
html[lang="ar"] .pl-more button{font-family:var(--font-ar-display);letter-spacing:0;font-size:.88rem}
.pl-more button:hover{background:var(--pg);color:#fff}
/* carte */
#plMap{height:min(62vh,540px);border-radius:16px;border:1px solid var(--pline);box-shadow:0 10px 30px rgba(20,40,28,.12);z-index:5}
.pl-map-note{font-size:.78rem;color:var(--pmut);margin-top:.5rem}
.leaflet-popup-content{font-family:var(--font-body)}
.plpop b{font-family:var(--font-display)}
.plpop .btn-mini{display:inline-block;background:var(--pg);color:#fff;border-radius:8px;padding:.25em .8em;
  font-size:.78rem;margin-top:.4rem;text-decoration:none}
/* modal fiche */
.pl-modal{position:fixed;inset:0;background:rgba(12,18,14,.55);z-index:140;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:700px){.pl-modal{align-items:center;padding:2rem}}
.pl-modal[hidden]{display:none}
.pl-box{background:#F6F8F6;width:100%;max-width:760px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;position:relative}
@media(min-width:700px){.pl-box{border-radius:18px}}
.pl-box .hd2{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--pline);padding:.85rem 1.1rem;
  display:flex;align-items:center;gap:.7rem;z-index:5}
.pl-box .hd2 h3{margin:0;flex:1;font-size:1.05rem}
.pl-box .x{border:1px solid var(--pline);background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1rem}
.pl-box .bd2{padding:1.1rem 1.2rem 1.6rem}
.pl-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.9rem 0}
.pl-actions a{display:inline-flex;align-items:center;gap:.4em;border-radius:10px;padding:.5em 1em;font-size:.85rem;
  font-weight:700;text-decoration:none;border:1px solid var(--pline);background:#fff;color:#171B18}
.pl-actions a:hover{border-color:var(--pg);color:var(--pgd)}
.pl-actions a.main{background:var(--pg);border-color:var(--pg);color:#fff}
.pl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem;margin:.8rem 0}
.pl-fact{background:#fff;border:1px solid var(--pline);border-radius:10px;padding:.55rem .8rem;font-size:.85rem}
.pl-fact b{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pmut);font-family:var(--font-display)}
html[lang="ar"] .pl-fact b{letter-spacing:0;font-family:var(--font-ar-display);font-size:.72rem}
.pl-near h4{margin:1.2rem 0 .6rem;font-size:.95rem}
.pl-ta-attrib{font-size:.7rem;color:var(--pmut)}
/* ---------- responsive (mobile) ---------- */
@media(max-width:759px){
  .pl-hero{padding-bottom:2.6rem}
  .pl-hero::after{width:220px;height:220px;inset-inline-end:-90px;top:-90px}
  .pl-hero .lead{font-size:.94rem}
  .pl-counters{gap:1.1rem}
  .pl-search input{font-size:16px;padding-block:.85rem}
  .pl-nav{top:56px}
  .pl-cat{padding:.38rem .8rem;font-size:.7rem}
  .pl-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem}
  .pl-card .ph{height:96px;font-size:1.8rem}
  .pl-card .bd{padding:.6rem .7rem .75rem}
  .pl-card h3{font-size:.9rem}
  .pl-card p{font-size:.78rem}
  #plMap{height:60vh}
  .pl-box .bd2{padding:.9rem .9rem 1.3rem}
  .pl-near .pl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .pl-hub{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.55rem}
  .pl-tile{padding:.9rem .5rem .8rem}
  .pl-tile .tic{font-size:1.7rem}
  .pl-tile b{font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){.pl-tile{opacity:1;transform:none;transition:none}}
@media(prefers-reduced-motion:reduce){.pl-card{opacity:1;transform:none;transition:none}}