/* ======================================================
   FONTS
====================================================== */

@font-face{
font-family:'HelveticaNowDisplay';
src:url('fonts/HelveticaNowDisplay-Medium.woff2') format('woff2');
font-weight:600;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:'HelveticaNowDisplay';
src:url('fonts/HelveticaNowDisplay-Regular.woff2') format('woff2');
font-weight:400;
font-style:normal;
font-display:swap;
}

/* ======================================================
   VARIABLES
====================================================== */

:root{

--primary-color:#DBFEBE;
--secondary-color:#ff4013;

--background-color:#1e2430;
--card-background:rgba(255,255,255,0.05);

--text-color:#ffffff;
--input-background:rgba(255,255,255,0.08);

--border-soft:rgba(255,255,255,0.08);

}

/* ======================================================
   GLOBAL
====================================================== */

body{

font-family:'HelveticaNowDisplay',sans-serif;

background:linear-gradient(180deg,#1e2430,#141922);
color:var(--text-color);

margin:0;
padding:20px;

min-height:100vh;

/* 🔥 CENTRAGE PARFAIT */
display:flex;
align-items:center;
justify-content:center;

box-sizing:border-box;

}

.sources-box {
  margin: 20px auto;
  max-width: 600px;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  background: rgba(255,255,255,0.05);
  padding: 10px;
  border-radius: 10px;
}

.sources-box a,
.sources-box a:visited,
.sources-box a:active,
.sources-box a:link {
  color: #cbd5e1 !important;
  text-decoration: none !important;
}

.sources-box a:hover {
  color: #a3ff00 !important;
  text-decoration: underline;
}

.sources-box p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}

.tooltip-mini {
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  white-space: nowrap;
}

.leaflet-tooltip {
  border: none !important;
  background: transparent !important;
}

.analysis-summary {
  text-align: center;
  margin: 10px 0 10px;
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.6;
}

.radius-block {
  margin-top: 0px;
  text-align: center;
  margin-bottom: 25px;
}

.radius-toggle {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.priority-badge{
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;

  background:rgba(0,255,136,0.15);
  color:#00ff88;

  border:1px solid rgba(0,255,136,0.3);
}

.action-card{
  position: relative;
  overflow: hidden;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: 18px;

  padding: 28px; /* au lieu de 22px */
  margin-bottom: 28px; /* au lieu de 18px */

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.05);

  transition: all 0.3s ease;
}

.action-card.rank-1{
  border: 1px solid #00ff88;
}

/* 🔥 force full green */
.action-card.rank-1::before{
  background: linear-gradient(90deg,#00ff88,#7dff7a) !important;
}

.action-card.rank-1{
  border-top: 2px solid #00ff88 !important;
}

.action-card.rank-1.conv,
.action-card.rank-1.ads,
.action-card.rank-1.seo{
  border-top: 2px solid #00ff88 !important;
}

/* override des couleurs internes */
.action-card.rank-1 .action-type {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

/* badge prioritaire */
.action-card.rank-1 .priority-badge {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

/* PAR DÉFAUT */
.action-card::before{
  background: linear-gradient(90deg,#00ff88,#7dff7a);
}

/* SEO */
.action-card.seo::before{
  background: linear-gradient(90deg,#00ff88,#7dff7a);
}

/* ADS */
.action-card.ads::before{
  background: linear-gradient(90deg,#3b82f6,#60a5fa);
}

/* CONVERSION */
.action-card.conv::before{
  background: linear-gradient(90deg,#ff7a18,#ffb347);
}

.action-card:hover{
  transform: translateY(-4px) scale(1.01);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.8),
    0 0 30px rgba(0,255,136,0.15);
}

.action-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.action-header-top {
  display: flex;
  margin-bottom: 6px;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* TYPE COULEUR PAR STRATÉGIE */

.action-card.seo {
  border-top: 2px solid #00ff88;
}

.action-card.ads {
  border-top: 2px solid #3b82f6;
}

.action-card.conv {
  border-top: 2px solid #ff7a18;
}

/* nom ville */
.action-header strong{
  font-size:17px;
}

.action-type {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
}

/* SEO */
.action-card.seo .action-type{
  background: rgba(0,255,136,0.12);
  color:#00ff88;
  border:1px solid rgba(0,255,136,0.3);
}

/* ADS */
.action-card.ads .action-type{
  background: rgba(59,130,246,0.12);
  color:#3b82f6;
  border:1px solid rgba(59,130,246,0.3);
}

/* CONV */
.action-card.conv .action-type{
  background: rgba(255,122,24,0.12);
  color:#ff7a18;
  border:1px solid rgba(255,122,24,0.3);
}

.action-card:hover::before{
  height:5px;
}

.action-intent{
  font-size:12px;
  opacity:0.6;
  margin-bottom: 16px;
}

.action-block {
  margin-bottom: 16px;
}

.action-block p {
  margin: 4px 0 0;
  opacity: 0.85;
  line-height: 1.6;
}

.label {
  font-size: 12px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-result {
  margin-top: 18px;
  padding: 10px;
  background: rgba(0,255,136,0.08);
  border-radius: 8px;
  font-weight: 500;
  color: #00ff88;
}

.action-item {
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}

.action-city {
  font-weight: 600;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 13px;
  opacity: 0.8;
}

.action-result {
  margin-top: 5px;
  font-size: 13px;
  color: #00ff88;
}

.radius-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #444;
  background: transparent;
  color: #ccc;
  cursor: pointer;
  transition: 0.2s;
}

/* 🔥 STYLE CTA (comme nouvelle recherche) */
.radius-btn.active {
  background: linear-gradient(135deg, #a3ff00, #00ff88);
  color: #0f172a;
  font-weight: 600;
  border: none;
  box-shadow: 0 8px 20px rgba(0,255,136,0.25);
  transform: translateY(-1px);
}

/* hover léger */
.radius-btn.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,255,136,0.35);
}

.radius-input-wrapper {
  display: none;
  margin-top: 10px;
  justify-content: center;
  gap: 5px;
}

.radius-input-wrapper input {
  width: 70px;
  text-align: center;
}

.radius-hint {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 6px;
}

.radius-badge{
  position:absolute;
  top:20px;
  left:20px;

  background:rgba(15,20,30,0.9);
  backdrop-filter:blur(8px);

  padding:8px 12px;
  border-radius:10px;

  font-size:12px;
  color:#fff;
  opacity:0.8;

  z-index:1000;

  box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

.leaflet-control-container {display: none;}

.data-source {
  cursor: pointer;
}

.data-update {
  font-size: 13px;
  color: #cbd5e1;
  margin: 10px 0 5px !important;
  text-align: center;

  display: inline-block;
  padding: 6px 12px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;

  backdrop-filter: blur(6px);
}

.leaflet-heatmap-layer {
  filter: blur(10px) saturate(1.6) contrast(1.3);
  opacity: 0.9;
}

h1,h2,h3{
word-break:break-word;
}

/* ================= RESULT CLEAN ================= */

#result {
  margin-top: 50px;
  width: 100%;
}

/* ❌ SUPPRESSION TOTALE de #result > div */

/* ================= TYPO PREMIUM ================= */

#result h2 {
  font-size: 26px;
  margin-bottom: 20px;
  margin-top: 40px;
  font-weight: 700;
}

#result h3 {
  font-size: 20px;
  margin-bottom: 18px;
  margin-top: 25px;
  font-weight: 600;
}

#result p {
  line-height: 1.7;
  margin-bottom: 14px;
  opacity: 0.9;
  text-align: justify;
}



/* ================= LISTES PREMIUM ================= */

.audit-section ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.audit-section ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.audit-section ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #7dff7a;
  font-weight: bold;
}

/* ================= TABLEAUX PREMIUM ================= */

#result table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
}

#result th {
  text-align: left;
  padding: 14px;
  background: rgba(255,255,255,0.06);
  font-weight: 600;
  font-size: 14px;
}

#result td {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}

#result tr {
  transition: 0.2s;
}

#result tr:hover {
  background: rgba(125,255,122,0.08);
}

/* ================= CARDS AMÉLIORÉES ================= */

.audit-section {
  text-align: left;
  margin-bottom: 30px;
  padding: 28px;

  border-radius: 16px;

  background: linear-gradient(180deg,#1e2430,#19202a);

  border: 1px solid rgba(255,255,255,0.06);

  box-shadow: 0 15px 40px rgba(0,0,0,0.6);

  transition: all 0.25s ease;
}

.audit-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
}

/* ================= PRIORITÉ VISUELLE ================= */

.audit-section.priority-high {
  border-left: 4px solid #00ff88;
}

.audit-section.priority-medium {
  border-left: 4px solid #ffaa00;
}

.audit-section.priority-low {
  border-left: 4px solid #4da6ff;
}

/* ================= SCORE BOX UPGRADE ================= */

.score-box {
  font-size: 36px;
  font-weight: 800;
  padding: 25px;

  border-radius: 14px;

  background: linear-gradient(135deg,#ff4013,#ff7a50);
  color: #1e2430;

  box-shadow: 0 15px 40px rgba(255,64,19,0.5);

  letter-spacing: 1px;
}

.data-item{
  background:#1f2a38;
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  border:1px solid var(--border-soft);
  box-shadow:0 6px 16px rgba(0,0,0,0.4);

  cursor:pointer;
  transition:all 0.25s ease;
}

/* 🔥 HOVER */
.data-item:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#DBFEBE,#9cff66);
  color:#1e2430;
  box-shadow:0 10px 25px rgba(0,0,0,0.6);
}

/* 🔥 ACTIVE CLICK */
.data-item:active{
  transform:scale(0.96);
}



/* ================= DATA TABLE (COMMUNES / CONCURRENTS) ================= */

.data-panel table{
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
}

/* HEADER */
.data-panel th{
  text-align:left;
  padding:14px;
  background:rgba(255,255,255,0.06);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
}

/* CELLULES */
.data-panel td{
  padding:14px;
  border-top:1px solid rgba(255,255,255,0.06);
  text-align:left;
}

/* COLONNE NUMÉRIQUE À DROITE */
.data-panel td:last-child{
  text-align:right;
  font-weight:600;
}

/* HOVER LIGNE */
.data-panel tr{
  transition:0.2s;
}

.data-panel tr:hover{
  background:rgba(125,255,122,0.08);
}

/* 🔥 TOP LIGNES */
.data-panel tr:nth-child(2){
  border-left:4px solid #00ff88;
}

.data-panel tr:nth-child(3){
  border-left:4px solid #7dff7a;
}

.data-panel tr:nth-child(4){
  border-left:4px solid #ffaa00;
}

/* ================= ALIGNEMENT TABLE ================= */

.data-panel th:last-child,
.data-panel td:last-child{
  text-align:right;
}

.data-panel td:last-child{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* ================= RANKING STYLE ================= */

.data-panel strong{
  color:#DBFEBE;
  font-weight:700;
}

.data-panel tr:nth-child(2) strong{
  color:#00ff88;
}

.data-panel tr:nth-child(3) strong{
  color:#7dff7a;
}

.data-panel tr:nth-child(4) strong{
  color:#ffaa00;
}



/* ======================================================
   CONTAINER
====================================================== */

.container{

max-width:1024px;
width:100%;

background:var(--card-background);

padding:2.5rem;

border-radius:16px;

box-shadow:0 20px 60px rgba(0,0,0,0.5);

display:flex;
flex-direction:column;
align-items:center;
text-align:center;

backdrop-filter:blur(10px);

}

/* ======================================================
   LOGO
====================================================== */

.logo-link{
display:block;
margin-bottom:2rem;
}

.logo{
max-width:110px;
}

/* ======================================================
   TITRES
====================================================== */

h1{
font-size:2.4rem;
margin-bottom:1rem;
}

h3{
font-size:1.3rem;
margin-bottom:1rem;
}

/* ======================================================
   TEXTE
====================================================== */

p{
line-height:1.6;
margin-bottom:1.5rem;
opacity:0.85;
}

/* ======================================================
   INPUT
====================================================== */

input:focus{
outline:none;
box-shadow:0 0 0 2px var(--primary-color);
transform:scale(1.02);
}

/* ======================================================
   BUTTON
====================================================== */

button {
  width: 100%;
  padding: 16px;
  position: relative;
  z-index: 10;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(135deg,#DBFEBE,#9cff66);
  color: #1e2430;
  transition: all 0.25s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(156,255,102,0.35);
}

#livePotentiel {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0.8;
}


/* ======================================================
   LOADING
====================================================== */

#loading {
  display: none;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 150px;
  margin-top: 25px;
}

.map-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  background: rgba(10, 15, 25, 0.85);
  backdrop-filter: blur(4px);
  z-index: 10;
  border-radius: 12px;
}

.map-loader p {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.7;
}

/* si pas déjà présent */
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top: 3px solid #00ff88;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ======================================================
   AUDIT CONTAINER
====================================================== */

.audit-kpi {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 25px 0 30px;
}

.kpi {
  flex: 1;
  padding: 18px;
  border-radius: 14px;

  background: linear-gradient(135deg, rgba(219,254,190,0.1), rgba(156,255,102,0.05));
  border: 1px solid rgba(219,254,190,0.15);

  text-align: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: 0.25s;
}

.kpi:hover {
  transform: translateY(-4px);
}

.kpi-label {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: #DBFEBE;
}

.audit-card {
  max-width: 720px;
  margin: 40px auto;
  padding: 35px;
  border-radius: 22px;

  background: linear-gradient(180deg, #1e2430, #141922);

  border: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 25px 80px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);

  position: relative;
  overflow: hidden;
}

.audit-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.audit-score {
  width: 100%;
}

.score-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg,#00ff88,#7dff7a);
}

.audit-scores {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.audit-score {
  text-align: center;
}

.audit-score strong {
  font-size: 18px;
  display: block;
  margin-top: 5px;
}

.audit-section {
  margin-top: 25px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

.audit-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.audit-section ul,
.audit-section ol {
  padding-left: 18px;
  margin: 0;
}

.audit-final {
  margin-top: 25px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #00ff88;
}

.audit-container{
  width:100%;
  max-width:900px;
  margin:40px auto 0;
}

.audit-section{
  background:linear-gradient(180deg,#1e2430,#19202a);
  border-radius:14px;
  padding:24px;
  margin-bottom:20px;

  border:1px solid rgba(255,255,255,0.06);

  transition:all 0.25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.audit-section:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,0.7);
}

/* priorité visuelle */
.priority-high{
  border-left:4px solid #00ff88;
}

.priority-medium{
  border-left:4px solid #ffaa00;
}

.priority-low{
  border-left:4px solid #4da6ff;
}

/* ======================================================
   DATA DASHBOARD
====================================================== */

.data-dashboard{

display:flex;
justify-content:center;
gap:12px;

margin:20px 0;

flex-wrap:wrap;

}

.data-item{

background:#1f2a38;

padding:12px 18px;

border-radius:10px;

font-weight:600;
font-size:14px;

border:1px solid var(--border-soft);

box-shadow:0 6px 16px rgba(0,0,0,0.4);

}

/* ======================================================
   SCORE GLOBAL
====================================================== */



.score-box{

text-align:center;

font-size:32px;
font-weight:700;

padding:22px;

border-radius:12px;

margin:30px 0;

background:linear-gradient(135deg,#ff4013,#ff7a50);
color:#1e2430;

box-shadow:0 10px 30px rgba(255,64,19,0.4);

}

/* ================= SCORE DASHBOARD PREMIUM ================= */

.score-dashboard{
  margin-top:25px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.score-item{
  display:flex;
  text-align: left;
  justify-content:space-between;
  align-items:center;

  background:rgba(255,255,255,0.04);
  padding:12px 16px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);

  font-size:14px;
}

.score-item strong{
  font-size:16px;
  font-weight:700;
  color:#DBFEBE;
}

.score-item.high strong{
  color:#00ff88;
}

.score-item.medium strong{
  color:#ffaa00;
}

.score-item.low strong{
  color:#4da6ff;
}


.score-bar{
  width:100%;
  height:6px;
  background:#2a3444;
  border-radius:4px;
  overflow:hidden;
}

.score-fill{
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg,#00ff88,#7dff7a);
}

/* 🔥 niveaux */
.score-fill.high{
  background:linear-gradient(90deg,#00ff88,#7dff7a);
}

.score-fill.medium{
  background:linear-gradient(90deg,#ffaa00,#ffd166);
}

.score-fill.low{
  background:linear-gradient(90deg,#4da6ff,#7fb3ff);
}

/* ================= ESPACE ENTRE SCORES ET SECTIONS ================= */

.score-dashboard{
  margin-bottom:30px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.audit-section:first-of-type{
  margin-top:10px;
}

/* ======================================================
   SECTIONS RAPPORT
====================================================== */

.audit-section{

text-align:left;
margin-top:30px;
margin-bottom:30px;
padding:30px;

border-radius:14px;

background:linear-gradient(180deg,#1e2430,#19202a);

border:1px solid rgba(255,255,255,0.06);

box-shadow:0 10px 30px rgba(0,0,0,0.5);

}

.audit-section ul,
.audit-section ol{

padding-left:20px;
margin-bottom:20px;

}

.audit-section p{
margin-bottom:10px;
line-height:1.7;
}

.audit-section li{
margin-bottom:8px;
opacity:0.9;
}

.audit-section h3{

font-size:20px;
font-weight:700;
margin-bottom:20px;
color:#ffffff;
}

.audit-section strong{
color:#DBFEBE;
display:block;
margin-bottom:10px;
}

.audit-section:hover{
transform:translateY(-4px);
}

/* ======================================================
   MAP
====================================================== */

#mapSection{
margin-top:40px;
width:100%;
}

#map{
border-radius:14px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.6);
height: 576px !important;
width: 100%;
}

/* ======================================================
   SCORE BADGE (GAME CHANGER)
====================================================== */

#map-container{
position:relative;
}

.score-badge{

position:absolute;
top:20px;
right:20px;

background:rgba(15,20,30,0.95);
backdrop-filter:blur(10px);

padding:18px;

border-radius:14px;

color:#fff;

z-index:1000;

box-shadow:0 15px 40px rgba(0,0,0,0.6);

min-width:190px;

transition:0.3s;
}

.score-badge:hover{
transform:scale(1.05);
}

.score-title{
font-size:12px;
opacity:0.6;
}

.score-value{
font-size:28px;
font-weight:700;
margin:5px 0;
}



.score-label{
font-size:14px;
margin-bottom:6px;
}

.score-money{
font-size:15px;
font-weight:600;
}

.score-max{
  font-size:14px;
  opacity:0.6;
  margin-left:2px;
}


#map {
  position: relative;
  z-index: 1;
}

#zoneInsight {
  margin-top: 20px;
}

#map-container #zoneInsight {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2000;
}

.zone-card{
  background:rgba(15,20,30,0.95);
  border-radius:14px;
  padding:16px 18px;
  min-width:220px;

  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);

  text-align:left;
  color:#fff;

  transition:0.3s;
}

.zone-card:hover{
  transform:translateY(-3px);
}

.zone-card {
  position: relative;
  overflow: hidden;
}

.zone-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

/* couleurs */
.zone-card.high::before {
  background: #00ff88;
}

.zone-card.medium::before {
  background: #ffb800;
}

.zone-card.low::before {
  background: #ff3b3b;
}

.zone-title{
  font-size:14px;
  opacity:0.7;
  margin-bottom:6px;
}

.zone-money{
  font-size:20px;
  font-weight:700;
  color:#00ff88;
  margin-bottom:8px;
}

.zone-line{
  font-size:13px;
  opacity:0.85;
  margin-bottom:8px;
}

.data-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:20px 0;
}

.data-tabs .tab{
  width:auto;              /* 🔥 important */
  max-width:none;          /* 🔥 important */
  padding:10px 18px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);

  background:rgba(255,255,255,0.05);
  color:#fff;

  cursor:pointer;
  transition:all 0.25s ease;
}

/* 🔥 HOVER */
.data-tabs .tab:hover{
  background:rgba(255,255,255,0.1);
}

/* 🔥 ACTIVE */
.data-tabs .tab.active{
  background:linear-gradient(135deg,#DBFEBE,#9cff66);
  color:#1e2430;
  box-shadow:0 5px 20px rgba(156,255,102,0.3);
}

.popup-card{
  font-family: 'HelveticaNowDisplay', sans-serif;
  line-height:1.5;
  font-size:13px;
}

.leaflet-popup-content-wrapper{
  background:linear-gradient(180deg,#ffffff,#f1f5f9);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.leaflet-popup-tip{
  background:#f1f5f9;
}

.reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin: 25px auto 25px;
  padding: 10px 18px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.04);
  color: #fff;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.25s ease;

  backdrop-filter: blur(6px);
}

.reset-btn {
  width: fit-content;
  padding: 12px 22px;
  border-radius: 12px;

  background: linear-gradient(135deg,#DBFEBE,#9cff66);
  color: #1e2430;

  font-weight: 700;
}

/* hover */
.reset-btn:hover {
  background: linear-gradient(135deg,#DBFEBE,#9cff66);
  color: #1e2430;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(156,255,102,0.25);
}

/* click */
.reset-btn:active {
  transform: scale(0.96);
}

/* icône */
.reset-btn .icon {
  font-size: 14px;
  opacity: 0.8;
}

.popup-main{
  font-size:18px;
  font-weight:800;
  color:#16a34a;
}

.popup-card{
  position:relative;
  overflow:hidden;
  padding-top:10px;
}

#city {
  width: 100%;
  padding: 16px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);

  background: rgba(255,255,255,0.04);
  color: white;

  font-size: 15px;

  margin-bottom: 20px;

  transition: all 0.25s ease;
}

#city:focus {
  border: 1px solid #7CFF6B;
  box-shadow: 0 0 0 3px rgba(124,255,107,0.15);
}

.hero-inputs {
  width: 100%;
  overflow: hidden;
  max-width: 600px;
margin: 30px auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);

  padding: 30px 30px 35px;
  border-radius: 16px;

  backdrop-filter: blur(12px);

  box-shadow: 
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.05);

  margin-top: 25px;
}

* {
  box-sizing: border-box;
}

.panier-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px 0 24px;
}

/* WRAPPER */
.panier-wrapper {
  position: relative;
  width: 220px;
}

/* INPUT */
#panier {
  width: 100%;
  text-align: center;
  padding: 14px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.06);
  color: white;

  font-size: 18px;
  font-weight: 600;

  transition: all 0.2s ease;
}

/* FOCUS */
#panier:focus {
  border: 1px solid #7CFF6B;
  box-shadow: 0 0 0 3px rgba(124,255,107,0.15);
}

/* EURO */
.euro {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  opacity: 0.5;
  font-size: 14px;
}

/* ❌ SUPPRIME LES FLÈCHES */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.panier-wrapper .euro {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

#panier:focus {
  outline: none;
  border: 1px solid #7CFF6B;
  box-shadow: 0 0 0 2px rgba(124,255,107,0.2);
}

/* LABEL */
.panier-label {
  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 0.3px;
}


.popup-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  opacity:0.9;
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}

.popup-card.high::before{
  background:#00ff88;
}

.popup-card.medium::before{
  background:#ffb800;
}

.popup-card.low::before{
  background:#60a5fa;
}

/* ======================================================
   BOOKING
====================================================== */

#bookingSection{
display:none;
margin-top:40px;
width:100%;
}

.calendar-frame{

width:100%;
height:750px;

border:none;

border-radius:12px;

}

.empty-state{
padding:20px;
text-align:center;
opacity:0.6;
}

/* ======================================================
   FOOTER
====================================================== */

footer{
text-align:center;
margin-top:40px;
}

footer a{
color:var(--primary-color);
}

footer{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
}


.top-zones {
  margin-top: 15px;
  text-align: center;
}

.top-title {
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.top-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.zone-chip {
  transition: all 0.2s ease;
}

.zone-chip:hover {
  background: rgba(0,255,136,0.25);
  transform: translateY(-2px);
}

/* ======================================================
   MOBILE (<= 600px)
====================================================== */


@media (max-width: 768px) {

  .container {
    padding: 15px;
  }

   .zone-chip {
    font-size: 11px;
    padding: 5px 10px;
  }

  h1 {
    font-size: 22px;
    text-align: center;
  }

  h2 {
    font-size: 18px;
    text-align: center;
  }

  /* 🔥 KPI CARDS → STACK */
 .audit-kpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.audit-kpi .kpi:nth-child(3) {
  grid-column: span 2;
}

.audit-card {
  backdrop-filter: blur(10px);
}
  .kpi {
    width: 100%;
    padding: 20px;
    border-radius: 16px;
  }

  .kpi-value {
    font-size: 24px;
  }

  /* 🔥 SCORE BAR */
  .audit-score {
    margin-top: 20px;
  }

  /* 🔥 CARDS */
  .audit-card {
    padding: 20px;
    border-radius: 18px;
  }

  .audit-section {
    margin-top: 20px;
  }

  .audit-section h3 {
    font-size: 18px;
  }

  .audit-section li {
    font-size: 14px;
    line-height: 1.5;
  }

  /* 🔥 ZONE CARD */
  .zone-card {
    padding: 15px;
  }

  .zone-money {
    font-size: 22px;
  }

  /* 🔥 MAP HEIGHT */
  #map {
    height: 300px;
  }

  /* 🔥 BUTTON */
  #ctaBtn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
  }

}

@media (max-width: 600px) {

  /* ================= GLOBAL ================= */

  body {
    padding: 15px;
  }

  .container {
    padding: 1.2rem;
    border-radius: 14px;
  }

  /* ================= HERO ================= */

  h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  h2 {
    font-size: 1.4rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  p {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .logo {
    max-width: 80px;
  }

  /* ================= INPUTS ================= */

  .hero-inputs {
    padding: 16px;
    margin-top: 15px;
    border-radius: 14px;
  }

  #city {
    padding: 14px;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .panier-wrapper {
    width: 100%;
    max-width: 220px;
  }

  #panier {
    font-size: 16px;
    padding: 12px;
  }

  .panier-label {
    font-size: 11px;
  }

  /* ================= BUTTON ================= */

  .hero-inputs button {
    margin-top: 18px;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    border-radius: 12px;
  }

  button:active {
    transform: scale(0.97);
  }

  /* ================= MAP ================= */

  #map {
    height: 260px !important;
    border-radius: 12px;
  }

  /* ================= SCORE BADGE ================= */

  .score-badge {
    top: 10px;
    right: 10px;
    padding: 10px;
    min-width: 140px;
  }

  .score-value {
    font-size: 20px;
  }

  /* ================= ZONE INSIGHT ================= */

#zoneInsight {
  text-align: left;
}

#zoneInsight .zone-card {
  text-align: left;
  align-items: flex-start;
}

  #zoneInsight {
    position: relative;
    margin-top: 15px;
  }

.zone-card {
  width: calc(100% - 32px);
  max-width: 420px;
  margin: 0 auto;
}

#zoneInsight {
  position: relative !important;
  left: auto !important;
  right: auto !important;

  display: flex;
  justify-content: center;
}

  /* 👉 TITRE */
  .zone-title {
    text-align: center;
    margin-bottom: 6px;
  }

  /* 🔥 FIX CENTRAGE PARFAIT */
.zone-money {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

  /* 🔥 équilibre visuel emoji */
  .zone-money::before {
    content: "💰";
    font-size: 20px;
    transform: translateY(1px);
  }

  /* 👉 lignes infos */
.zone-line {
  width: 100%;
  text-align: center; /* 🔥 ou left si tu préfères */
}

  /* ================= TABS ================= */

  .data-tabs {
    gap: 8px;
    flex-wrap: wrap;
  }

  .data-tabs .tab {
    flex: 1;
    font-size: 13px;
    padding: 10px;
  }

  /* ================= TABLE → MOBILE CARDS ================= */

  .data-panel table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
  }

  .data-panel thead {
    display: none;
  }

  .data-panel tr {
    display: block;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
  }

  /* ❌ reset général */
.data-panel td {
  display: block;
  padding: 6px 0;
  border: none;
  font-size: 13px;
}

/* ✅ SEULEMENT les colonnes data */
.data-panel td:not(:first-child) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  .data-panel td span:first-child {
    opacity: 0.6;
  }

  .data-panel td span:last-child {
    font-weight: 600;
  }

}