/* Halal Central Vietnam — charte : vert impérial #133115 · or #C6A250 · crème #F7F2E6 */
:root{
  --green-950:#0B2010;
  --green-900:#133115;
  --green-800:#1B4423;
  --green-700:#235631;
  --gold:#C6A250;
  --gold-soft:#E5D3A1;
  --gold-pale:#F4EBD3;
  --cream:#F7F2E6;
  --paper:#FDFBF4;
  --ink:#1E2B20;
  --muted:#5C6A5E;
  --line:#E3DCC8;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Be Vietnam Pro",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.65;font-weight:400}
::selection{background:var(--gold);color:var(--green-950)}

/* Révélation au scroll (désactivée si reduced-motion) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
img{max-width:100%}

/* Bandeau officiel */
.gov-bar{background:var(--green-950);color:var(--gold-soft);font-size:.78rem;letter-spacing:.04em}
.gov-bar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 24px}
.lang{display:flex;align-items:center;gap:8px;color:#7d8f7f}
.lang button{background:none;border:none;color:var(--gold-soft);font:inherit;cursor:pointer;padding:2px 4px;letter-spacing:.08em}
.lang button.active{color:#fff;border-bottom:1px solid var(--gold)}

/* En-tête sceau */
.masthead{background:linear-gradient(180deg,var(--cream),var(--paper));border-bottom:1px solid var(--line)}
.masthead-inner{display:flex;align-items:center;gap:26px;padding:34px 24px 26px}
.seal{filter:drop-shadow(0 4px 14px rgba(19,49,21,.25))}
.masthead-kicker{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.masthead-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,4vw,2.6rem);color:var(--green-900);letter-spacing:.06em;line-height:1.15;margin:2px 0}
.masthead-motto{color:var(--gold);font-size:.9rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500}
.gold-rule{height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-soft) 50%,var(--gold));box-shadow:0 1px 0 rgba(19,49,21,.15)}

/* Héro — motif géométrique islamique en filigrane */
.hero{background-color:var(--green-900);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C6A250' stroke-opacity='.10'%3E%3Cpath d='M32 2L62 32L32 62L2 32Z'/%3E%3Cpath d='M32 14L50 32L32 50L14 32Z'/%3E%3Ccircle cx='32' cy='32' r='7'/%3E%3Cpath d='M2 2h12M2 2v12M62 2h-12M62 2v12M2 62h12M2 62v-12M62 62h-12M62 62v-12'/%3E%3C/g%3E%3C/svg%3E");color:var(--cream);padding:64px 0 56px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(198,162,80,.25);pointer-events:none}
.hero::before{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(198,162,80,.18);pointer-events:none}
.hero h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.2rem);max-width:760px;line-height:1.3}
.hero-sub{max-width:720px;margin-top:16px;color:#CBD6C6;font-weight:300}
.stats{display:flex;gap:48px;margin-top:38px;flex-wrap:wrap}
.stat strong{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--gold-soft);line-height:1.1}
.stat span{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#9DB09B}

/* Registre */
.registry{padding:58px 24px 30px}
.registry-head h3,.cert h3{font-family:var(--serif);font-size:1.6rem;color:var(--green-900);font-weight:600}
.registry-head h3::after,.cert-grid>div>h3::after,.prayer h3::after{content:"";display:block;width:54px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin-top:10px;border-radius:2px}
.registry-note{color:var(--muted);font-size:.9rem;margin-top:4px}
.filters{display:flex;gap:12px;margin:26px 0 14px;flex-wrap:wrap}
.filters input,.filters select{font:inherit;padding:11px 16px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);min-width:220px}
.filters input{flex:1}
.filters :focus{outline:2px solid var(--gold);outline-offset:1px}
.cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.cat{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.88rem;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;transition:.15s}
.cat svg{width:16px;height:16px;fill:var(--gold);stroke:var(--gold)}
.cat:hover{border-color:var(--gold)}
.cat.active{background:var(--green-900);color:var(--cream);border-color:var(--green-900)}
.cat.active svg{fill:var(--gold-soft);stroke:var(--gold-soft)}

/* Carte interactive — tuiles harmonisées à la charte (teinte parchemin) */
.map-shell{position:relative;margin-bottom:26px;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(19,49,21,.06)}
#map{height:420px;background:var(--cream)}
.leaflet-tile-pane{filter:sepia(.32) saturate(.72) brightness(1.03) contrast(.97)}
.near-btn{position:absolute;top:14px;right:14px;z-index:800;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.84rem;font-weight:600;padding:9px 15px;border:1px solid var(--gold);border-radius:999px;background:var(--green-900);color:var(--gold-soft);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.near-btn:hover{background:var(--green-800)}
.near-btn[disabled]{opacity:.6;cursor:wait}
.hcv-pin{background:var(--green-900);border:2px solid var(--gold);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hcv-pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--gold)}
.hcv-me{background:#fff;border:3px solid var(--green-800);border-radius:50%;box-shadow:0 0 0 4px rgba(35,86,49,.25)}
.leaflet-popup-content-wrapper{border-radius:8px;border:1px solid var(--gold-soft);font-family:var(--sans)}
.leaflet-popup-content{margin:14px 16px;line-height:1.5}
.hcv-pop-name{font-family:var(--serif);font-weight:600;color:var(--green-900);font-size:1.05rem}
.hcv-pop-badge{font-size:.65rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);display:block;margin:2px 0 6px}
.hcv-pop a{color:var(--green-800)}
.card-dist{color:var(--gold);font-weight:600}
@media (max-width:640px){#map{height:320px}}

/* Cartes-certificats */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 24px 20px;position:relative;box-shadow:0 2px 10px rgba(19,49,21,.05);transition:transform .25s ease,box-shadow .25s ease;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(19,49,21,.13)}
.card::before{content:"";position:absolute;inset:6px;border:1px solid var(--gold-pale);border-radius:6px;pointer-events:none}
.card::after{content:"";position:absolute;right:12px;bottom:12px;width:78px;height:78px;background:url(/img/logo-192.png) center/contain no-repeat;opacity:.07;pointer-events:none}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card h4{font-family:var(--serif);font-size:1.25rem;color:var(--green-900);font-weight:600;line-height:1.25}
.card .regno{font-size:.7rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.badge{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
.badge-cert{background:var(--green-900);color:var(--gold-soft)}
.badge-friendly{background:var(--gold-pale);color:var(--green-800);border:1px solid var(--gold-soft)}
.card-desc{font-size:.92rem;color:var(--muted);margin:12px 0 14px}
.card-meta{font-size:.88rem;display:grid;gap:5px}
.card-meta a{color:var(--green-800);text-decoration:none;border-bottom:1px solid var(--gold-soft)}
.card-meta a:hover{color:var(--gold)}
.card-verified{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.card-verified::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--green-900);color:var(--gold-soft);font-size:.65rem}
.empty{color:var(--muted);padding:30px 0}
.onboarding{margin:30px 0 10px;font-size:.85rem;color:var(--muted);font-style:italic}

/* Horaires de prière — arches de mihrab + filigrane */
.prayer{background-color:var(--green-900);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C6A250' stroke-opacity='.08'%3E%3Cpath d='M32 2L62 32L32 62L2 32Z'/%3E%3Cpath d='M32 14L50 32L32 50L14 32Z'/%3E%3Ccircle cx='32' cy='32' r='7'/%3E%3C/g%3E%3C/svg%3E");color:var(--cream);padding:56px 0;margin-top:64px;position:relative}
.prayer::before{content:"۞";position:absolute;top:-19px;left:50%;transform:translateX(-50%);background:var(--paper);color:var(--gold);font-size:1.5rem;line-height:1;padding:4px 20px}
.prayer h3{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--gold-soft)}
.prayer-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.prayer-date{color:#9DB09B;font-size:.9rem;margin-top:4px}
#pt-city{font:inherit;padding:10px 16px;border:1px solid var(--green-700);border-radius:6px;background:var(--green-950);color:var(--cream)}
#pt-city:focus{outline:2px solid var(--gold)}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:26px}
.pt-cell{background:var(--green-950);border:1px solid var(--green-700);border-radius:64px 64px 10px 10px;padding:26px 14px 16px;text-align:center;position:relative}
.pt-cell .pt-name{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}
.pt-cell .pt-sub{display:block;font-size:.68rem;color:#7d8f7f;margin-top:1px}
.pt-cell .pt-time{font-family:var(--serif);font-size:1.5rem;color:var(--cream);margin-top:8px}
.pt-cell.next{border-color:var(--gold);background:linear-gradient(180deg,#1a4423,var(--green-950))}
.pt-cell.next::before{content:attr(data-next);position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--green-950);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pt-cell.next .pt-time{color:var(--gold-soft)}
.pt-countdown{font-size:.68rem;color:var(--gold);margin-top:4px;display:block}
.pt-note{margin-top:20px;font-size:.78rem;color:#7d8f7f;font-style:italic}

/* Certification — sceau en filigrane comme un document officiel */
.cert{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;position:relative;overflow:hidden}
.cert::after{content:"";position:absolute;right:-70px;bottom:-70px;width:360px;height:360px;background:url(/img/logo-badge.png) center/contain no-repeat;opacity:.05;pointer-events:none}
.cert-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px}
.cert p{margin-top:12px;color:var(--muted)}
.cert-levels{list-style:none;margin-top:18px;display:grid;gap:12px}
.apply{background:var(--green-900);color:var(--cream);border-radius:12px;padding:32px;align-self:start}
.apply h3{color:var(--gold-soft)}
.apply p{color:#CBD6C6}
.btn{display:inline-block;margin-top:18px;background:var(--gold);color:var(--green-950);font-weight:600;text-decoration:none;padding:12px 22px;border-radius:6px;font-size:.92rem}
.btn:hover{background:var(--gold-soft)}

/* Pied */
.foot{background:var(--green-950);color:#9DB09B;padding:44px 0}
.foot-inner{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.foot-name{font-family:var(--serif);color:var(--cream);font-size:1.1rem}
.foot-cities{font-size:.82rem;letter-spacing:.06em}
.foot-motto{color:var(--gold);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin-top:2px}
.foot-legal{font-size:.75rem;margin-left:auto;max-width:340px}

@media (max-width:780px){
  .masthead-inner{gap:18px}
  .seal{width:72px;height:72px}
  .cert-grid{grid-template-columns:1fr;gap:32px}
  .foot-legal{margin-left:0}
  .stats{gap:28px}
}