/* ================================================================== */
/* RESET & BASE VARIABLES                                             */
/* ================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; font-family: system-ui, -apple-system, sans-serif; background: #6B6969; overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100%; height: 100dvh; position: relative; }

/* ================================================================== */
/* ETATS UX (STATE 0, STATE 1, STATE 2)                               */
/* ================================================================== */

/* STATE 0: Accueil */
.state-0 #topbar { display: flex; }
.state-0 #map-wrap { flex: 1; height: 100%; }
.state-0 #panel-state1, .state-0 #panel-state2, .state-0 #panel-state3, .state-0 #btn-reopen-search { display: none; }

/* STATE 1: Parcelle sélectionnée */
.state-1 #topbar { display: none; }
.state-1 #map-wrap { flex: 1; min-height: 0; }
.state-1 #panel-state1 {
  display: flex;
  flex-direction: column;
  flex: none;
  flex-shrink: 0;
  height: auto;
  min-height: 200px;
  max-height: min(42vh, 340px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  padding: 16px 20px;
  padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
/* Ici, on cache le panneau 2 ET le panneau 3 */
.state-1 #panel-state2, .state-1 #panel-state3 { display: none; }
.state-1 #btn-reopen-search { display: flex; }

/* STATE 2: Résultats Scan */
.state-2 #topbar { display: none; }
.state-2 #map-wrap { display: none; } 
/* Ici, on cache le panneau 1 ET le panneau 3 */
.state-2 #panel-state1, .state-2 #panel-state3 { display: none; }
.state-2 #panel-state2 { display: block; flex: 1; background: #F8FAFC; overflow-y: auto; padding: 20px; }
.state-2 #btn-reopen-search { display: none; }

/* ================================================================== */
/* TOPBAR & SEARCH (État 0)                                           */
/* ================================================================== */
#topbar { background: #3C3C3C; padding: 12px 14px; border-bottom: 1px solid #E6E6E6; flex-shrink: 0; position: relative; z-index: 1000; }
.search-wrap { position: relative; display: flex; gap: 8px; width: 100%; }
#search-mode { background: #222222; color: #f1f5f9; border: 1.5px solid #E6E6E6; border-radius: 16px; padding: 0 10px; outline: none; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
#search-mode:focus { border-color: #CD002B; }
#adresse-input { flex: 1; width: 100%; padding: 14px 16px; background: #E6E6E6; border: 1.5px solid #3C3C3C; border-radius: 3px; color: #151616; font-size: 1rem; outline: none; transition: border-color 0.2s; }
#adresse-input:focus { border-color: #CD002B; }
#suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #E6E6E6; border: 1px solid #3C3C3C; border-radius: 8px; z-index: 2000; display: none; max-height: 250px; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.sug-item { padding: 14px 16px; font-size: 0.95rem; cursor: pointer; border-bottom: 1px solid #c8c8c8; color: #151616; font-weight: 500; }
.sug-item:last-child { border-bottom: none; }
.sug-item:hover { background: #CD002B; color: white; }

#btn-reopen-search { position: absolute; top: 12px; left: 12px; z-index: 999; background: #ffffff; border: 2px solid #e2e8f0; border-radius: 50px; padding: 8px 16px; font-size: 0.9rem; font-weight: 700; color: #334155; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); align-items: center; gap: 6px; }
#btn-reopen-search:hover { background: #f1f5f9; }

/* ================================================================== */
/* MAP                                                                */
/* ================================================================== */
#map-wrap { position: relative; z-index: 1; background: #1e293b; width: 100%; }
#map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.leaflet-popup-content-wrapper { background: #1e293b; color: #fde047; font-weight: bold; border-radius: 12px; padding: 4px; }
.leaflet-popup-tip { background: #1e293b; }
.leaflet-popup-content { margin: 10px 14px; font-family: system-ui, sans-serif; text-align: center; }

/* ================================================================== */
/* PANEL ÉTAT 1 (Résumé bas de page)                                  */
/* ================================================================== */
.info-rapide-header { font-size: 1rem; font-weight: 900; color: #0f172a; border-bottom: 2px solid #f1f5f9; padding-bottom: 8px; margin-bottom: 12px; display: flex; justify-content: space-between; }
.panel-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: auto; }
.dt-group { display: flex; flex-direction: column; }
.dt-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 4px; }
.dt-lbl { font-size: 0.7rem; color: #64748b; text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em; }
.dt-lbl-sub { font-size: 0.65rem; font-weight: 700; color: #94a3b8; text-transform: none; letter-spacing: 0; margin-left: 0.35rem; }
.dt-val { font-size: 0.9rem; color: #0f172a; font-weight: 700; word-break: break-word; }
.panel-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn-secondary { background: #ffffff; border: 2px solid #e2e8f0; color: #334155; border-radius: 10px; padding: 10px 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-primary { background: #CD002B; color: white; border: none; border-radius: 10px; padding: 10px; font-weight: 800; font-size: 0.95rem; cursor: pointer; flex: 1; display: flex; justify-content: center; align-items: center; }
.btn-primary:hover { background: #A10022; }
.btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }

/* ================================================================== */
/* Bannières Supérieures (Header unifié Panel 2 & 3)                  */
/* ================================================================== */
.res-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    background: #ffffff; 
    z-index: 50; 
    padding: 16px 20px; 
    border-bottom: 1px solid #e2e8f0; 
    margin-bottom: 24px;
}
#panel-state2 .res-header { margin: -20px -20px 24px -20px; }
.res-title { font-size: 1.4rem; font-weight: 900; color: #0f172a; }
.res-actions-top { display: flex; gap: 8px; }

/* ================================================================== */
/* PANEL ÉTAT 2 (Résultats complets)                                  */
/* ================================================================== */
.sec-title { font-size: 1.1rem; font-weight: 900; color: #222222; margin-bottom: 16px; margin-top: 24px; }
.block-light { background: #ffffff; padding: 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.block-gray { background: #e2e8f0; padding: 16px; border-radius: 12px; margin-bottom: 16px; }
.block-title { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; margin-bottom: 14px; color: #0f172a; display: flex; align-items: baseline; justify-content: space-between; }
.block-title-ref { font-size: 0.7rem; color: #64748b; font-weight: 500; font-style: italic; }

.dt-row-light { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; gap: 15px; }
.dt-row-light:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.dt-lbl-light { color: #475569; font-weight: 600; font-size: 0.85rem; flex-shrink: 0; max-width: 45%; }
.dt-val-light { color: #0f172a; font-weight: 800; text-align: right; font-size: 0.85rem; line-height: 1.4; word-break: break-word; }
.zone-badge { color: #CD002B; font-weight: 900; background: #fff1f2; padding: 4px 12px; border-radius: 8px; border: 1px solid #fecdd3; }

.r-desc-dark { color: #0f172a; font-size: 0.9rem; margin-bottom: 8px; }
.r-sub-dark { color: #475563; font-size: 0.85rem; margin-bottom: 8px; }
.inner-card { background: #ffffff; padding: 14px; border-radius: 10px; margin-bottom: 10px; }
.inner-card-title { font-weight: 800; color: #0f172a; font-size: 0.95rem; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 6px; }

/* Boîtes d'alerte, notes et astuces du PLU-H */
.info-note {
    background-color: #fef9c3;
    border: 1px solid #fde047;
    color: #854d0e;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 4px;
}
.info-note b, .info-note strong {
    color: #713f12;
    font-weight: 800;
}

.doc-item { display: flex; align-items: center; padding: 14px; font-size: 0.9rem; color: #0f172a; background: #ffffff; border-radius: 10px; margin-bottom: 8px; font-weight: 700; border: 1px solid #e2e8f0; text-decoration: none; }
.doc-item:hover { background: #f1f5f9; }

.print-actions { display: flex; gap: 10px; margin-top: 32px; margin-bottom: 38px; }
.btn-print { flex: 1; padding: 14px; border: 2px solid #0f172a; border-radius: 12px; background: white; color: #0f172a; font-size: 0.9rem; font-weight: 800; cursor: pointer; text-align: center; }
.btn-print:hover { background: #f1f5f9; }

#btn-go-capa {
  width: 100%;
  margin-bottom: 20px;
  font-size: 1.05rem;
  padding: 16px;
}

/* ================================================================== */
/* ÉTAT 3 : ÉTUDE DE CAPACITÉ (DESIGN SOBRE & MOBILE)                 */
/* ================================================================== */
.state-3 #topbar, 
.state-3 #map-wrap, 
.state-3 #panel-state1, 
.state-3 #panel-state2, 
.state-3 #btn-reopen-search { 
  display: none !important; 
}
.state-3 #panel-state3 { 
  display: flex; 
  flex-direction: column; 
  flex: 1; 
  background: #ffffff; 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch; 
  padding-bottom: 40px; 
}

.capa-header { } 
.capa-container { padding: 0 20px; }
.capa-sec-title { margin-top: 0; }

.capa-block { 
  background: #ffffff; 
  border: 1px solid #e2e8f0; 
  border-radius: 12px; 
  margin-bottom: 20px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.capa-block-alt { background: #f8fafc; }
.capa-block-results { border: 2px solid #334155; padding: 16px; }

.capa-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 12px; 
  border-bottom: 1px solid #f1f5f9; 
}
.capa-row:last-child { border-bottom: none; }
.capa-row-col { flex-direction: column; align-items: flex-start; gap: 8px; }

.capa-label { font-size: 0.9rem; font-weight: 600; color: #334155; }
.text-dark { color: #334155 !important; }
.text-bold-dark { font-weight: 800 !important; color: #000 !important; }
.text-sub { color: #475569 !important; }
.val-major { font-size: 1.2rem; color: #000 !important; }
.val-medium { font-size: 1.1rem; color: #000 !important; }
.capa-helper { font-size: 0.75rem; color: #64748b; padding: 0 12px 12px 12px; line-height: 1.4; }

.dashed-top { border-top: 1px dashed #cbd5e1; padding-top: 10px; }
.solid-top { border-top: 1px solid #e2e8f0; padding-top: 12px; }
.no-border-bottom { border-bottom: none !important; }
.mt-small { margin-top: 8px; }

.capa-input { 
  width: 90px; 
  padding: 10px; 
  text-align: right; 
  border: 2px solid #e2e8f0; 
  border-radius: 8px; 
  font-size: 1.05rem; 
  font-weight: 700; 
  color: #0f172a; 
  background: #f8fafc; 
  outline: none; 
  transition: border-color 0.2s;
}
.capa-input:focus { border-color: #334155; background: #ffffff; }
.input-alt { background: #ffffff; border-color: #cbd5e1; }

.capa-select { 
  width: 100%; 
  padding: 12px; 
  border: 2px solid #e2e8f0; 
  border-radius: 8px; 
  font-size: 0.95rem; 
  font-weight: 600; 
  color: #0f172a; 
  background: #f8fafc; 
  outline: none; 
  -webkit-appearance: none; 
  appearance: none;
}
.capa-select:focus { border-color: #334155; background: #ffffff; }
.capa-input::-webkit-outer-spin-button, .capa-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.capa-input[type=number] { -moz-appearance: textfield; }

.input-mandatory-fallback { border: 2px solid #f97316 !important; background-color: #fff7ed !important; transition: all 0.2s ease; }
.input-mandatory-fallback::placeholder { color: #fdba74 !important; }

/* ================================================================== */
/* CUSTOMISATION DU MENU DES CALQUES LEAFLET                          */
/* ================================================================== */
.leaflet-control-layers { border: none !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; background: transparent !important; }
.leaflet-control-layers-toggle { width: 52px !important; height: 52px !important; background-color: #4D5156 !important; background-position: center !important; background-size: 42px 42px !important; border-radius: 8px !important; border: 1.5px solid #3C3C3C !important; transition: border-color 0.2s ease, background-color 0.2s ease !important; }
.leaflet-control-layers-toggle:hover, .leaflet-control-layers-toggle:focus, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { border-color: #CD002B !important; background-color: #ffffff !important; }
.leaflet-control-layers-expanded { padding: 12px 16px !important; background: #EEEEEE !important; border: 1px solid #3C3C3C !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important; color: #151616 !important; }
.leaflet-control-layers-list label { font-family: system-ui, -apple-system, sans-serif !important; font-size: 0.95rem !important; font-weight: 600 !important; margin-bottom: 12px !important; cursor: pointer; display: flex; align-items: center; }
.leaflet-control-layers-list label:last-child { margin-bottom: 0 !important; }
.leaflet-control-layers-list input[type="checkbox"], .leaflet-control-layers-list input[type="radio"] { margin-right: 10px !important; width: 20px !important; height: 20px !important; cursor: pointer; accent-color: #0d7801 !important; }

/* ================================================================== */
/* RÈGLES D'IMPRESSION PRO (CARTOUCHE & A4)                           */
/* ================================================================== */
#print-cartouche { display: none; }

/* 🛑 TRÈS IMPORTANT : Ces règles s'appliquent AVANT l'ouverture de la fenêtre d'impression,
      pour laisser à Leaflet le temps (1.5s) de charger la carte en Haute Définition. */
body.is-printing #app { display: block !important; height: auto !important; }

body.is-printing #panel-state1, 
body.is-printing #panel-state2, 
body.is-printing #panel-state3, 
body.is-printing #topbar, 
body.is-printing #btn-reopen-search { display: none !important; }

/* Le conteneur Flexbox qui force le format A4 (19cm x 27.5cm) */
body.is-printing #map-wrap { 
    display: flex !important; 
    flex-direction: column !important;
    position: relative !important; 
    width: 718px !important; 
    height: 1040px !important; 
    border: 2px solid #0f172a !important; 
    box-sizing: border-box !important; 
    margin: 0 !important; padding: 0 !important; 
    background: white !important;
    overflow: hidden !important;
}

body.is-printing #map { 
    width: 100% !important; 
    height: 850px !important; 
    position: relative !important; 
    flex: none !important;
    border-bottom: 2px solid #0f172a !important;
}

/* Le Cartouche d'architecte */
body.is-printing #print-cartouche { 
    display: flex !important; 
    flex-direction: column !important; 
    height: 190px !important; 
    width: 100% !important; 
    background: white !important; 
    padding: 0 !important; 
    font-family: system-ui, sans-serif !important;
}

.cartouche-header { display: flex; justify-content: space-between; align-items: center; background: #0f172a !important; color: white !important; padding: 8px 16px; }
.cartouche-header h2 { margin: 0; font-size: 16px; font-weight: 900; color: white !important; letter-spacing: 0.05em; }
.cartouche-header .date-print { font-size: 12px; font-weight: 600; color: #94a3b8 !important; }

.cartouche-body { display: flex; flex: 1; }
.c-col { padding: 12px 16px; border-right: 1px solid #e2e8f0 !important; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.c-col:last-child { border-right: none !important; }
.c-label { font-size: 10px; color: #64748b !important; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; letter-spacing: 0.05em; }
.c-val { font-size: 14px; color: #0f172a !important; font-weight: 700; line-height: 1.4; }

.c-scale-box { align-items: center; background: #f8fafc !important; }
.scale-graphic-container { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0; }
.scale-bar { height: 8px; border: 2px solid #0f172a !important; border-top: none !important; }
.scale-bar-label { font-size: 13px; font-weight: 900; color: #0f172a !important; line-height: 0.8; }

.cartouche-footer { text-align: center; font-size: 10px; color: #94a3b8 !important; padding: 8px; border-top: 1px solid #e2e8f0 !important; font-style: italic; }

/* 🖨️ CE QUI PARS À L'IMPRIMANTE */
@media print {
    @page { size: A4 portrait; margin: 1cm; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
    
    /* 1. RÈGLE GÉNÉRALE : On libère la hauteur pour autoriser le multipage */
    html, body { height: auto !important; overflow: visible !important; background: white !important; margin: 0; padding: 0; }
    #app { height: auto !important; overflow: visible !important; display: block !important; }
    
    /* 2. IMPRESSION PLAN (Garde la taille fixe A4) */
    body.is-printing html, body.is-printing { width: 19cm !important; }
    body.is-printing #app { width: 19cm !important; }

    /* 3. IMPRESSION TEXTE - RAPPORT (Panel 2) */
    body.is-printing-results #map-wrap,
    body.is-printing-results #print-cartouche,
    body.is-printing-results #topbar,
    body.is-printing-results #panel-state1,
    body.is-printing-results #panel-state3 { display: none !important; }
    
    body.is-printing-results #panel-state2 { 
        display: block !important; 
        height: auto !important; 
        max-height: none !important; 
        overflow: visible !important; 
        background: white !important; 
        padding: 0 !important; 
    }
    /* On cache les boutons d'action du rapport */
    body.is-printing-results .print-actions, 
    body.is-printing-results .res-actions-top, 
    body.is-printing-results #btn-go-capa { display: none !important; }

    /* 4. IMPRESSION TEXTE - SCÉNARIO (Panel 3) */
    body.is-printing-capa #map-wrap,
    body.is-printing-capa #topbar,
    body.is-printing-capa #panel-state1,
    body.is-printing-capa #panel-state2,
    body.is-printing-capa #print-cartouche { display: none !important; }
    
    body.is-printing-capa #panel-state3 { 
        display: block !important; 
        height: auto !important; 
        max-height: none !important; 
        overflow: visible !important; 
        background: white !important; 
        padding: 0 !important; 
    }
    body.is-printing-capa #btn-st3-back, 
    body.is-printing-capa #btn-print-scenario-map, 
    body.is-printing-capa #btn-print-scenario-text { display: none !important; }
}