/* ═══════════════════════════════════════════════════════════════════════════
   TrendJump — vérificateur de zone de vol (/zone/area.html), DA v2
   Remplace area.css : mêmes composants que la home (blanc, Poppins, menthe),
   header et footer du site. Les ids et classes attendus par le script de la
   page sont conservés : #map, #loader, #verdict(.fly/.caution/.nogo),
   #zones-list, .zone-item, .zone-dot.R/.D/.CTR, .zone-tag, .btn-dot.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Héros : bande sombre + panneau de recherche posé dessus ─────────── */
.az-hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;
  padding:clamp(110px,13vw,170px) clamp(20px,4vw,64px) clamp(90px,10vw,130px)}
.az-hero-in{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.az-kick{font-size:13px;font-weight:500;color:#fff;margin-bottom:14px}
.v2 .az-hero h1{color:#fff;font-size:clamp(34px,5vw,62px);line-height:1.05;margin-bottom:18px}
.v2 .az-hero h1 em{color:#fff}
.az-hero p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.65;max-width:62ch}

/* panneau de recherche, à cheval sur le héros et le corps */
.az-search{position:relative;z-index:3;max-width:1200px;margin:-58px auto 0;padding:0 clamp(20px,3vw,40px)}
.az-search-in{background:#fff;border:1px solid var(--line);border-radius:0;padding:clamp(18px,2.4vw,26px);
  box-shadow:0 24px 50px -30px rgba(17,20,23,.35);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.az-search label{flex:1 1 320px;min-width:0;display:block}
.az-search .lbl{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:7px}
.v2 .az-search input{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:0;font-size:15px}
.az-search .btn{flex:0 0 auto}
.btn-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;margin-right:2px}

/* ── Corps ───────────────────────────────────────────────────────────── */
.az-main{max-width:1200px;margin:0 auto;padding:clamp(32px,4vw,56px) clamp(20px,3vw,40px) clamp(64px,8vw,110px);
  display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.az-note{display:flex;gap:14px;align-items:flex-start;background:#FFF8EC;border:1px solid #F3E2C0;
  border-radius:0;padding:18px 22px;font-size:14.5px;line-height:1.6;color:#6B5322}
.az-note b,.az-note strong{color:#4A390F}
.az-note-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#F6C453;color:#3A2C08;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}

/* carte */
.az-map-wrap{position:relative;border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--bg-2)}
#map{height:clamp(360px,52vh,540px);width:100%;background:var(--bg-2)}
.az-map-badge{position:absolute;top:14px;left:14px;z-index:500;background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:0;padding:8px 14px;font-size:12.5px;font-weight:500;color:var(--ink);
  box-shadow:0 10px 24px -14px rgba(15,26,31,.4)}
.az-map-badge b{color:#C0392B}
.az-coords{position:absolute;bottom:14px;left:14px;z-index:500;background:rgba(11,20,23,.82);color:#fff;
  border-radius:0;padding:7px 14px;font-size:12px;font-variant-numeric:tabular-nums;display:none}
.az-coords:not(:empty){display:block}
.leaflet-container{font-family:var(--font-d)!important;background:var(--bg-2)}
.leaflet-popup-content-wrapper{border-radius:0;font-size:13.5px}
.leaflet-control-zoom a{border-radius:0!important;color:var(--ink)!important}

/* loader */
.loader-ring{display:none;align-items:center;justify-content:center;gap:12px;padding:26px;
  background:#fff;border:1px solid var(--line);border-radius:0;font-size:15px;color:var(--ink-2)}
.loader-ring.active{display:flex}
.loader-ring .spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--green);
  border-radius:50%;animation:azspin .7s linear infinite}
@keyframes azspin{to{transform:rotate(360deg)}}

/* verdict */
.verdict{display:none;border-radius:0;padding:clamp(22px,3vw,32px);border:1px solid var(--line);background:#fff}
.verdict.fly{background:#FFFBEB;border-color:#F3E2C0}
.verdict.caution{background:#FFF4EC;border-color:#F6D2B8}
.verdict.nogo{background:#FDF0F0;border-color:#F2CCCC}
.verdict-head{display:flex;gap:16px;align-items:flex-start}
.verdict-icon{flex:0 0 auto;width:46px;height:46px;border-radius:0;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.v2 .verdict-title{font-size:clamp(19px,2vw,25px);font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.25}
.verdict-sub{font-size:15px;line-height:1.7;color:var(--ink-2)}
.verdict-location{margin-top:16px;padding-top:14px;border-top:1px solid rgba(15,26,31,.08);
  font-size:14px;font-weight:500;color:var(--ink)}

/* zones détectées */
.zones-section{display:none}
.v2 .zones-section .section-title{font-size:clamp(20px,2.2vw,28px);font-weight:500;color:var(--ink);margin-bottom:16px}
.zones-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.zone-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:0;padding:16px 18px}
.zone-dot{flex:0 0 auto;width:8px;height:8px;border-radius:0;margin-top:6px;background:#9AA7AD}
.zone-dot.R{background:#E4572E}.zone-dot.D{background:#F6A21E}.zone-dot.CTR{background:#3D8BFD}
.v2 .zone-name{font-size:15.5px;font-weight:500;color:var(--ink);margin-bottom:6px}
.zone-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12.5px;color:var(--muted)}
.zone-tag{padding:3px 10px;border-radius:0;background:var(--bg-2);border:1px solid var(--line);
  font-weight:500;color:var(--ink-2);font-size:11.5px}
.zone-tag.P,.zone-tag.R{background:#FDECE7;border-color:#F6CFC2;color:#A93B18}
.zone-tag.D{background:#FEF5E4;border-color:#F6E0B5;color:#8A5B08}
.zone-tag.CTR,.zone-tag.TMA{background:#EAF2FE;border-color:#CCE0FB;color:#1F5FBF}

/* règles */
.az-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:980px){.az-rules{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.az-rules{grid-template-columns:1fr}}
.rule-card{background:#fff;border:1px solid var(--line);border-radius:0;padding:24px 26px}
.rule-ico{display:flex;width:40px;height:40px;border-radius:0;align-items:center;justify-content:center;
  background:var(--bg-2);font-size:18px;margin-bottom:16px}
.v2 .rule-title{font-size:16.5px;font-weight:500;color:var(--ink);margin-bottom:8px}
.rule-txt{font-size:14.5px;line-height:1.65;color:var(--ink-2)}

/* sources officielles */
.az-src{background:var(--bg-2);border:1px solid var(--line);border-radius:0;padding:clamp(22px,3vw,30px);
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.v2 .az-src h2{font-size:20px;font-weight:500;color:var(--ink);margin-bottom:6px}
.az-src p{font-size:14px;color:var(--ink-2)}
.az-src-links{display:flex;gap:10px;flex-wrap:wrap}
.az-src-links .btn{font-size:14px;padding:11px 18px}
.az-legal{font-size:13px;color:var(--muted);text-align:center;line-height:1.6}
.az-legal a{color:var(--green)}
@media(max-width:640px){
  .az-search{margin-top:-40px}
  .az-search-in{flex-direction:column;align-items:stretch}
  .az-search .btn{width:100%}
}