{% load i18n %}
{% load interventions_tags %}
{% comment %}
  Template guidé : Inspection d'une zone d'intégration d'eau pluviale
  Slug: inspection_rain_water

  Variables disponibles (depuis intervention_detail context) :
    guided_data_json        - JSON string des données sauvegardées
    guided_operation_data   - GuidedOperationData instance or None
    save_guided_url         - URL POST pour sauvegarder le JSON
    upload_guided_media_url - URL POST pour uploader un média
  Boutons edit/read rendus par le bloc parent dans intervention_detail.html :
    id="guidedEditBtn" / id="guidedReadBtn"
{% endcomment %}

<style>
  /* Premium CSS styles for GIEP Form */
  .guided-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
  }
  .guided-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }
  .device-card {
    border-radius: 12px;
    border: 2px solid #dee2e6;
    background: #ffffff;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
  }
  .device-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #adb5bd;
  }
  .device-card.active[data-device="evc"] {
    border-color: #2e7d32;
    background-color: #f1f8e9;
  }
  .device-card.active[data-device="oed"] {
    border-color: #0277bd;
    background-color: #e1f5fe;
  }
  .device-card.active[data-device="ta"] {
    border-color: #00796b;
    background-color: #e0f2f1;
  }
  .device-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.5rem;
    transition: all 0.25s ease;
  }
  .device-card[data-device="evc"] .device-icon {
    background-color: #e8f5e9;
    color: #2e7d32;
  }
  .device-card[data-device="oed"] .device-icon {
    background-color: #e1f5fe;
    color: #0277bd;
  }
  .device-card[data-device="ta"] .device-icon {
    background-color: #e0f2f1;
    color: #00796b;
  }
  .device-card.active .device-icon {
    transform: scale(1.1);
  }
  
  /* Segmented control styling */
  .segmented-control {
    display: inline-flex;
    background-color: #f1f3f5;
    border-radius: 8px;
    padding: 3px;
    border: 1px solid #e9ecef;
  }
  .segmented-control .btn-check + .btn {
    border: none;
    border-radius: 6px;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    background-color: transparent;
    transition: all 0.2s ease;
  }
  .segmented-control .btn-check:checked + .btn-outline-success {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3);
  }
  .segmented-control .btn-check:checked + .btn-outline-danger {
    background-color: #c62828 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(198, 40, 40, 0.3);
  }
  .segmented-control .btn-check:checked + .btn-outline-warning {
    background-color: #f9a825 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(249, 168, 37, 0.3);
  }
  .segmented-control .btn-check:checked + .btn-outline-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
  }
  .segmented-control .btn-check:checked + .btn-outline-info {
    background-color: #0277bd !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 119, 189, 0.3);
  }

  .custom-switch-card {
    border-left: 4px solid #dee2e6;
    transition: border-color 0.3s ease;
  }
  .custom-switch-card.active {
    border-left-color: #0d6efd;
  }
  
  .nested-fields {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nested-fields.show {
    max-height: 2000px;
    opacity: 1;
    margin-top: 1rem;
  }
  
  /* Badges color schemes for read mode device types */
  .badge-evc {
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
    border: 1px solid #c8e6c9 !important;
  }
  .badge-oed {
    background-color: #e1f5fe !important;
    color: #0277bd !important;
    border: 1px solid #b3e5fc !important;
  }
  .badge-ta {
    background-color: #e0f2f1 !important;
    color: #00796b !important;
    border: 1px solid #b2dfdb !important;
  }
  .asset-badge-name {
    max-width: 250px;
    display: inline-block;
    vertical-align: bottom;
  }
  @media (max-width: 576px) {
    .asset-badge-name {
      max-width: 120px;
    }
  }
  .guided-card.clickable-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    padding-right: 3.5rem !important;
  }
  .guided-card.clickable-card:hover {
    transform: translateY(-2px);
    background-color: #f8f9fa !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  }
  .guided-card.clickable-card .chevron-icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    transition: transform 0.2s ease;
  }
</style>

{# ─────────────────────────────────────────────── MODE VISUALISATION ─── #}
<div class="guided-read-mode" id="guidedReadMode">
  <div id="guidedReadContent">
    <p class="text-muted fst-italic">{% translate "Aucune donnée enregistrée pour ce template." %}</p>
  </div>
</div>

{# ─────────────────────────────────────────────── MODE ÉDITION ──────── #}
{% if 'operations' in allowed_update_fields %}
<div class="guided-edit-mode d-none" id="guidedEditMode">

  <div id="guidedAlertContainer" class="mb-3"></div>

  {# ── INDEX DES OUVRAGES (EDIT MODE) ── #}
  <div id="ouvragesListWrapper" class="mb-4">
    {# ── QUESTIONS GÉNÉRIQUES ── #}
    <div class="guided-card border-primary-subtle mb-4">
      <h6 class="fw-bold mb-3 text-primary text-uppercase border-bottom pb-2">
        <i class="bi bi-cloud-sun-fill me-2"></i>{% translate "Conditions météorologiques" %}
      </h6>
      <div class="row g-3">
        <div class="col-12 col-md-6">
          <label class="form-label d-block fw-semibold mb-2"><i class="bi bi-cloud-rain me-1 text-primary"></i>{% translate "Date de la dernière pluie" %}</label>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="date_derniere_pluie" id="pluie_aujourdhui" value="aujourdhui">
            <label class="btn btn-outline-info" for="pluie_aujourdhui">{% translate "Aujourd'hui" %}</label>

            <input class="btn-check" type="radio" name="date_derniere_pluie" id="pluie_moins_24h" value="moins_24h">
            <label class="btn btn-outline-info" for="pluie_moins_24h">{% translate "Moins de 24h" %}</label>

            <input class="btn-check" type="radio" name="date_derniere_pluie" id="pluie_plus_24h" value="plus_24h">
            <label class="btn btn-outline-info" for="pluie_plus_24h">{% translate "Plus de 24h" %}</label>

            <input class="btn-check" type="radio" name="date_derniere_pluie" id="pluie_null" value="null" checked>
            <label class="btn btn-outline-secondary" for="pluie_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <label class="form-label d-block fw-semibold mb-2"><i class="bi bi-lightning-charge me-1 text-danger"></i>{% translate "Orage il y a moins d'une heure" %}</label>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="orage_moins_une_heure" id="orage_oui" value="true">
            <label class="btn btn-outline-danger" for="orage_oui">{% translate "Oui" %}</label>

            <input class="btn-check" type="radio" name="orage_moins_une_heure" id="orage_non" value="false">
            <label class="btn btn-outline-success" for="orage_non">{% translate "Non" %}</label>

            <input class="btn-check" type="radio" name="orage_moins_une_heure" id="orage_null" value="null" checked>
            <label class="btn btn-outline-secondary" for="orage_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="fw-bold mb-0 text-uppercase text-secondary">
        <i class="bi bi-list-check me-2"></i>{% translate "Ouvrages inspectés" %}
      </h6>
    </div>
    <div id="ouvragesListContainer" class="mb-3">
      <!-- Rendu dynamique via renderOuvragesList() -->
    </div>
    <button type="button" id="addNewOuvrageBtn" class="btn btn-success w-100 py-2.5 fw-semibold border-0" style="background-color: #2e7d32; box-shadow: 0 4px 12px rgba(46,125,50,0.2);">
      <i class="bi bi-plus-circle-fill me-2"></i>{% translate "Ajouter un ouvrage" %}
    </button>
  </div>

  {# ── FORMULAIRE DU QUESTIONNAIRE POUR L'OUVRAGE ACTIF ── #}
  <div id="guidedQuestionnaireForm" class="d-none">
    
    <!-- En-tête formulaire ouvrage -->
    <div class="guided-card border-primary bg-primary-subtle bg-opacity-10 d-flex justify-content-between align-items-center py-2 px-3 mb-3">
      <div class="d-flex align-items-center gap-2">
        <i class="bi bi-pencil-square text-primary fs-5"></i>
        <h6 id="questionnaireFormHeader" class="mb-0 fw-bold text-primary">{% translate "Ouvrage #1 — Inspection" %}</h6>
      </div>
      <button type="button" id="backToOuvragesBtn" class="btn btn-sm btn-outline-primary fw-semibold">
        <i class="bi bi-chevron-left me-1"></i>{% translate "Retour à la liste" %}
      </button>
    </div>

    {# ── LIAISON ASSET GIEP ── #}
    <div class="guided-card border-primary-subtle position-relative">
      <h6 class="border-bottom pb-2 mb-3 text-primary fw-bold">
        <i class="bi bi-link-45deg me-1"></i>{% translate "Équipement GIEP associé (Optionnel)" %}
      </h6>
      
      <div class="mb-3 position-relative">
        <div class="input-group">
          <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
          <input type="text" id="giep_asset_search" class="form-control border-start-0" placeholder="{% translate 'Rechercher par code (ex: BI-01...) ou par type...' %}" autocomplete="off">
          <button type="button" id="giep_asset_map_btn" class="btn btn-primary">
            <i class="bi bi-geo-alt-fill me-1"></i>{% translate "Choisir sur la carte" %}
          </button>
        </div>
        
        <!-- Dropdown d'autocomplétion -->
        <div id="giep_asset_autocomplete_results" class="list-group position-absolute w-100 shadow-lg d-none" style="z-index: 1050; max-height: 250px; overflow-y: auto; background: white;">
        </div>
      </div>
      
      <!-- Affichage de l'asset sélectionné -->
      <div id="giep_selected_asset_display" class="p-2 rounded bg-light border d-flex justify-content-between align-items-center">
        <span id="giep_selected_asset_text" class="text-muted small">{% translate "Aucun équipement lié." %}</span>
        <button type="button" id="giep_clear_asset_btn" class="btn btn-outline-danger btn-sm d-none">
          <i class="bi bi-x-circle me-1"></i>{% translate "Délier" %}
        </button>
      </div>
    </div>

  {# ── ÉTAPE 1 : Type de dispositif ── #}
  <div class="guided-card">
    <p class="fw-semibold mb-3">{% translate "Étape 1 — Type de dispositif" %}</p>
    <div class="row g-3">
      <div class="col-12 col-md-4">
        <div class="device-card d-flex flex-column align-items-center justify-content-center h-100" data-device="evc">
          <div class="device-icon"><i class="bi bi-flower1"></i></div>
          <h6 class="mb-1">{% translate "Espace vert creux" %}</h6>
          <span class="badge bg-success-subtle text-success">EVC</span>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="device-card d-flex flex-column align-items-center justify-content-center h-100" data-device="oed">
          <div class="device-icon"><i class="bi bi-grid-3x3-gap-fill"></i></div>
          <h6 class="mb-1">{% translate "Massif drainant" %}</h6>
          <span class="badge bg-info-subtle text-info">OED</span>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="device-card d-flex flex-column align-items-center justify-content-center h-100" data-device="ta">
          <div class="device-icon"><i class="bi bi-cloud-rain-fill"></i></div>
          <h6 class="mb-1">{% translate "Technique alternative" %}</h6>
          <span class="badge bg-teal-subtle text-teal">TA / Bassin d'orage</span>
        </div>
      </div>
    </div>
    
    <div class="d-none">
      <input type="radio" name="guided_device_type" id="guided_type_evc" value="evc">
      <input type="radio" name="guided_device_type" id="guided_type_oed" value="oed">
      <input type="radio" name="guided_device_type" id="guided_type_ta" value="ta">
    </div>
  </div>

  {# ── ÉTAPE 2a : EVC ── #}
  <div id="guided_section_evc" class="d-none">
    <div class="alert alert-success d-flex align-items-center mb-4 py-2">
      <i class="bi bi-flower1 me-2 fs-5"></i>
      <strong>{% translate "Espace vert creux (EVC)" %}</strong>
    </div>

    {# EVC - Points d'entrée #}
    <div class="guided-card">
      <h6 class="border-bottom pb-2 mb-3 text-success fw-bold"><i class="bi bi-box-arrow-in-right me-1"></i>{% translate "Points d'entrée dans l'ouvrage" %}</h6>
      
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "L'eau peut-elle facilement entrer dans l'ouvrage ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check conditional-toggle" type="radio" name="evc_point_entree_ok" id="evc_pe_oui" value="true" data-target="evc_pe_sub" data-show-val="false">
          <label class="btn btn-outline-success" for="evc_pe_oui">{% translate "Oui" %}</label>

          <input class="btn-check conditional-toggle" type="radio" name="evc_point_entree_ok" id="evc_pe_non" value="false" data-target="evc_pe_sub" data-show-val="false">
          <label class="btn btn-outline-danger" for="evc_pe_non">{% translate "Non" %}</label>

          <input class="btn-check conditional-toggle" type="radio" name="evc_point_entree_ok" id="evc_pe_null" value="null" data-target="evc_pe_sub" data-show-val="false">
          <label class="btn btn-outline-secondary" for="evc_pe_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Sub-questions points d'entrée (visible if ok is false) #}
      <div id="evc_pe_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Des feuilles ou branches bloquent-elles l'eau ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_pe_feuilles" id="evc_pe_f_oui" value="true">
            <label class="btn btn-outline-danger" for="evc_pe_f_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_feuilles" id="evc_pe_f_non" value="false">
            <label class="btn btn-outline-success" for="evc_pe_f_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_feuilles" id="evc_pe_f_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_pe_f_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Un amas de détritus bloque-t-il l'eau ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_pe_detritus" id="evc_pe_d_oui" value="true">
            <label class="btn btn-outline-danger" for="evc_pe_d_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_detritus" id="evc_pe_d_non" value="false">
            <label class="btn btn-outline-success" for="evc_pe_d_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_detritus" id="evc_pe_d_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_pe_d_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "La surface de ruissellement amène-t-elle bien l'eau dans les points d'entrée ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_pe_ruissellement" id="evc_pe_r_oui" value="true">
            <label class="btn btn-outline-success" for="evc_pe_r_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_ruissellement" id="evc_pe_r_non" value="false">
            <label class="btn btn-outline-danger" for="evc_pe_r_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_ruissellement" id="evc_pe_r_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_pe_r_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "L'empierrement de sédimentation est à un niveau inférieur ou égal au niveau de la surface de ruissellement ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_pe_niveau_empierrement" id="evc_pe_ne_oui" value="true">
            <label class="btn btn-outline-success" for="evc_pe_ne_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_niveau_empierrement" id="evc_pe_ne_non" value="false">
            <label class="btn btn-outline-danger" for="evc_pe_ne_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="evc_pe_niveau_empierrement" id="evc_pe_ne_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_pe_ne_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "D'autres éléments empêchent-ils l'eau d'entrer ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="evc_pe_autres" id="evc_pe_a_oui" value="true" data-target="evc_pe_autres_sub" data-show-val="true">
            <label class="btn btn-outline-danger" for="evc_pe_a_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="evc_pe_autres" id="evc_pe_a_non" value="false" data-target="evc_pe_autres_sub" data-show-val="true">
            <label class="btn btn-outline-success" for="evc_pe_a_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="evc_pe_autres" id="evc_pe_a_null" value="null" data-target="evc_pe_autres_sub" data-show-val="true">
            <label class="btn btn-outline-secondary" for="evc_pe_a_null">{% translate "Non vérifié" %}</label>
          </div>
          <div id="evc_pe_autres_sub" class="nested-fields">
            <textarea class="form-control form-control-sm" id="evc_pe_autres_precision" rows="2" placeholder="{% translate 'Précisez les autres éléments empêchant l\'entrée d\'eau...' %}"></textarea>
          </div>
        </div>
      </div>

      {# Empierrement présent check #}
      <div class="custom-switch-card border rounded p-3 mb-3 mt-3 bg-light">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h6 class="mb-0 fw-semibold">{% translate "L'ouvrage dispose-t-il d'un empierrement ?" %}</h6>
            <span class="small text-muted">{% translate "Activer pour compléter l'état de l'empierrement" %}</span>
          </div>
          <div class="form-check form-switch fs-5">
            <input class="form-check-input guided-presence-toggle" type="checkbox" id="evc_pe_empierrement_present" data-show-target="evc_pe_empierrement_sub">
          </div>
        </div>
        
        <div id="evc_pe_empierrement_sub" class="nested-fields">
          <div class="mb-3">
            <p class="mb-1 small fw-semibold text-muted">{% translate "L'empierrement est-il en bon état ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check conditional-toggle" type="radio" name="evc_pe_empierrement_bon_etat" id="evc_pe_eb_oui" value="true" data-target="evc_pe_empierrement_defauts" data-show-val="false">
              <label class="btn btn-outline-success" for="evc_pe_eb_oui">{% translate "Oui" %}</label>
              <input class="btn-check conditional-toggle" type="radio" name="evc_pe_empierrement_bon_etat" id="evc_pe_eb_non" value="false" data-target="evc_pe_empierrement_defauts" data-show-val="false">
              <label class="btn btn-outline-danger" for="evc_pe_eb_non">{% translate "Non" %}</label>
              <input class="btn-check conditional-toggle" type="radio" name="evc_pe_empierrement_bon_etat" id="evc_pe_eb_null" value="null" data-target="evc_pe_empierrement_defauts" data-show-val="false">
              <label class="btn btn-outline-secondary" for="evc_pe_eb_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
          <div id="evc_pe_empierrement_defauts" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
            <p class="small text-muted mb-2">{% translate "Sélectionnez les défauts constatés sur l'empierrement :" %}</p>
            <div class="form-check mb-1">
              <input class="form-check-input" type="checkbox" id="evc_pe_empierrement_colmate">
              <label class="form-check-label small" for="evc_pe_empierrement_colmate">{% translate "Colmaté par les sédiments" %}</label>
            </div>
            <div class="form-check mb-1">
              <input class="form-check-input" type="checkbox" id="evc_pe_empierrement_emporte">
              <label class="form-check-label small" for="evc_pe_empierrement_emporte">{% translate "Emporté par l'eau" %}</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="evc_pe_empierrement_envahi">
              <label class="form-check-label small" for="evc_pe_empierrement_envahi">{% translate "Envahi d'adventices" %}</label>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-3 border-top pt-2">
        <div class="d-flex gap-2 mb-2">
          <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="evc_point_entree" title="{% translate 'Prendre une photo (appareil)' %}">
            <i class="bi bi-camera-fill"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="evc_point_entree" title="{% translate 'Sélectionner des fichiers' %}">
            <i class="bi bi-folder2-open"></i>
          </button>
        </div>
        <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key="evc_point_entree"></div>
      </div>
    </div>

    {# EVC - Espace vert #}
    <div class="guided-card">
      <h6 class="border-bottom pb-2 mb-3 text-success fw-bold"><i class="bi bi-flower1 me-1"></i>{% translate "Espace vert" %}</h6>
      
      {# Végétation #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Quel est l'état de la végétation ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_vegetation_etat" id="evc_ev_v_bon" value="bon" data-target="evc_ev_veg_sub" data-show-val="mauvais">
          <label class="btn btn-outline-success" for="evc_ev_v_bon">{% translate "Bon" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_vegetation_etat" id="evc_ev_v_mauvais" value="mauvais" data-target="evc_ev_veg_sub" data-show-val="mauvais">
          <label class="btn btn-outline-danger" for="evc_ev_v_mauvais">{% translate "Mauvais" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_vegetation_etat" id="evc_ev_v_null" value="null" data-target="evc_ev_veg_sub" data-show-val="mauvais">
          <label class="btn btn-outline-secondary" for="evc_ev_v_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Plantes mortes (if vegetation is mauvais) #}
      <div id="evc_ev_veg_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle mb-3">
        <p class="mb-1 small fw-semibold text-muted">{% translate "Présence de plantes mortes ou absentes :" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="evc_ev_plantes_mortes" id="evc_ev_pm_plus" value="plus_10">
          <label class="btn btn-outline-danger" for="evc_ev_pm_plus">{% translate "Sur + de 10% de la surface" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_plantes_mortes" id="evc_ev_pm_moins" value="moins_10">
          <label class="btn btn-outline-success" for="evc_ev_pm_moins">{% translate "Sur - de 10% de la surface" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_plantes_mortes" id="evc_ev_pm_null" value="null">
          <label class="btn btn-outline-secondary" for="evc_ev_pm_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Chenaux d'érosion #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de chenaux d'érosion ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="evc_ev_chenaux_erosion" id="evc_ev_ce_oui" value="true">
          <label class="btn btn-outline-danger" for="evc_ev_ce_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_chenaux_erosion" id="evc_ev_ce_non" value="false">
          <label class="btn btn-outline-success" for="evc_ev_ce_non">{% translate "Non" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_chenaux_erosion" id="evc_ev_ce_null" value="null">
          <label class="btn btn-outline-secondary" for="evc_ev_ce_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Flaques d'eau #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de flaques d'eau persistantes dans l'ouvrage ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="evc_ev_flaques" id="evc_ev_fl_oui" value="true">
          <label class="btn btn-outline-danger" for="evc_ev_fl_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_flaques" id="evc_ev_fl_non" value="false">
          <label class="btn btn-outline-success" for="evc_ev_fl_non">{% translate "Non" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_flaques" id="evc_ev_fl_null" value="null">
          <label class="btn btn-outline-secondary" for="evc_ev_fl_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Sédiments #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de sédiments dans l'ouvrage ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_sediments" id="evc_ev_se_oui" value="true" data-target="evc_ev_se_sub" data-show-val="true">
          <label class="btn btn-outline-danger" for="evc_ev_se_oui">{% translate "Oui" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_sediments" id="evc_ev_se_non" value="false" data-target="evc_ev_se_sub" data-show-val="true">
          <label class="btn btn-outline-success" for="evc_ev_se_non">{% translate "Non" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_sediments" id="evc_ev_se_null" value="null" data-target="evc_ev_se_sub" data-show-val="true">
          <label class="btn btn-outline-secondary" for="evc_ev_se_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Croûte de sédimentation > 5cm (if sediments is true) #}
      <div id="evc_ev_se_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle mb-3">
        <p class="mb-1 small fw-semibold text-muted">{% translate "La croûte de sédimentation est-elle supérieure à 5 cm ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="evc_ev_croute_sediments" id="evc_ev_cr_oui" value="true">
          <label class="btn btn-outline-danger" for="evc_ev_cr_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_croute_sediments" id="evc_ev_cr_non" value="false">
          <label class="btn btn-outline-success" for="evc_ev_cr_non">{% translate "Non" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_croute_sediments" id="evc_ev_cr_null" value="null">
          <label class="btn btn-outline-secondary" for="evc_ev_cr_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Détritus #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de détritus dans l'ouvrage ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="evc_ev_detritus_presence" id="evc_ev_dp_oui" value="true">
          <label class="btn btn-outline-danger" for="evc_ev_dp_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_detritus_presence" id="evc_ev_dp_non" value="false">
          <label class="btn btn-outline-success" for="evc_ev_dp_non">{% translate "Non" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_detritus_presence" id="evc_ev_dp_null" value="null">
          <label class="btn btn-outline-secondary" for="evc_ev_dp_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Espèces exotiques envahissantes #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence d'espèces exotiques envahissantes ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="evc_ev_envahissantes" id="evc_ev_ee_oui" value="true">
          <label class="btn btn-outline-danger" for="evc_ev_ee_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_envahissantes" id="evc_ev_ee_non" value="false">
          <label class="btn btn-outline-success" for="evc_ev_ee_non">{% translate "Non" %}</label>
          <input class="btn-check" type="radio" name="evc_ev_envahissantes" id="evc_ev_ee_null" value="null">
          <label class="btn btn-outline-secondary" for="evc_ev_ee_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Traces de passage #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Traces de passage d'usagers ?" %}</p>
        <div class="segmented-control mb-2">
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_passage" id="evc_ev_p_oui" value="true" data-target="evc_ev_p_sub" data-show-val="true">
          <label class="btn btn-outline-danger" for="evc_ev_p_oui">{% translate "Oui" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_passage" id="evc_ev_p_non" value="false" data-target="evc_ev_p_sub" data-show-val="true">
          <label class="btn btn-outline-success" for="evc_ev_p_non">{% translate "Non" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="evc_ev_passage" id="evc_ev_p_null" value="null" data-target="evc_ev_p_sub" data-show-val="true">
          <label class="btn btn-outline-secondary" for="evc_ev_p_null">{% translate "Non vérifié" %}</label>
        </div>
        
        <div id="evc_ev_p_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Quel type d'usagers ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_ev_usagers_type" id="evc_ev_u_vehicule" value="vehicule">
            <label class="btn btn-outline-danger" for="evc_ev_u_vehicule"><i class="bi bi-car-front me-1"></i>{% translate "Véhicules" %}</label>
            <input class="btn-check" type="radio" name="evc_ev_usagers_type" id="evc_ev_u_pietons" value="pietons">
            <label class="btn btn-outline-warning" for="evc_ev_u_pietons"><i class="bi bi-person me-1"></i>{% translate "Piétons" %}</label>
            <input class="btn-check" type="radio" name="evc_ev_usagers_type" id="evc_ev_u_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_ev_u_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
      </div>

      <div class="mt-3 border-top pt-2">
        <div class="d-flex gap-2 mb-2">
          <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="evc_espace_vert" title="{% translate 'Prendre une photo (appareil)' %}">
            <i class="bi bi-camera-fill"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="evc_espace_vert" title="{% translate 'Sélectionner des fichiers' %}">
            <i class="bi bi-folder2-open"></i>
          </button>
        </div>
        <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key="evc_espace_vert"></div>
      </div>
    </div>

    {# EVC - Surverse #}
    <div class="guided-card custom-switch-card border rounded p-3 mb-3 bg-light">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 fw-semibold text-success"><i class="bi bi-water me-1"></i>{% translate "Une surverse est-elle présente ?" %}</h6>
          <span class="small text-muted">{% translate "Activer si le système dispose d'une évacuation de trop-plein" %}</span>
        </div>
        <div class="form-check form-switch fs-5">
          <input class="form-check-input guided-presence-toggle" type="checkbox" id="evc_surverse_presente" data-show-target="evc_surverse_sub">
        </div>
      </div>

      <div id="evc_surverse_sub" class="nested-fields mt-3">
        <div class="mb-3">
          <p class="mb-1 small fw-semibold">{% translate "La grille de surverse est propre et dégagée ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_sv_grille_propre" id="evc_sv_gp_oui" value="true">
            <label class="btn btn-outline-success" for="evc_sv_gp_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="evc_sv_grille_propre" id="evc_sv_gp_non" value="false">
            <label class="btn btn-outline-danger" for="evc_sv_gp_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="evc_sv_grille_propre" id="evc_sv_gp_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_sv_gp_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        
        <div class="mb-3">
          <p class="mb-1 small fw-semibold">{% translate "La décantation est vide ou peu remplie ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_sv_decantation_vide" id="evc_sv_dv_oui" value="true">
            <label class="btn btn-outline-success" for="evc_sv_dv_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="evc_sv_decantation_vide" id="evc_sv_dv_non" value="false">
            <label class="btn btn-outline-danger" for="evc_sv_dv_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="evc_sv_decantation_vide" id="evc_sv_dv_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_sv_dv_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>

        <div class="mb-3">
          <p class="mb-1 small fw-semibold">{% translate "La surverse est-elle plus haute que le fond de l'ouvrage ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="evc_sv_haute" id="evc_sv_sh_oui" value="true">
            <label class="btn btn-outline-success" for="evc_sv_sh_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="evc_sv_haute" id="evc_sv_sh_non" value="false">
            <label class="btn btn-outline-danger" for="evc_sv_sh_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="evc_sv_haute" id="evc_sv_sh_null" value="null">
            <label class="btn btn-outline-secondary" for="evc_sv_sh_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>

        <div class="mt-3 border-top pt-2">
          <div class="d-flex gap-2 mb-2">
            <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="evc_surverse" title="{% translate 'Prendre une photo (appareil)' %}">
              <i class="bi bi-camera-fill"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="evc_surverse" title="{% translate 'Sélectionner des fichiers' %}">
              <i class="bi bi-folder2-open"></i>
            </button>
          </div>
          <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key="evc_surverse"></div>
        </div>
      </div>
    </div>
  </div>{# /section_evc #}

  {# ── ÉTAPE 2b : OED ── #}
  <div id="guided_section_oed" class="d-none">
    <div class="alert alert-info d-flex align-items-center mb-4 py-2">
      <i class="bi bi-grid-3x3-gap-fill me-2 fs-5"></i>
      <strong>{% translate "Massif drainant (OED)" %}</strong>
    </div>

    {# OED - Etat de la chaussée #}
    <div class="guided-card">
      <h6 class="border-bottom pb-2 mb-3 text-info fw-bold"><i class="bi bi-road-perspective me-1"></i>{% translate "État général du revêtement adjacent / chaussée" %}</h6>
      
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "La surface au-dessus du massif drainant est en bon état général ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check conditional-toggle" type="radio" name="oed_eg_ok" id="oed_eg_oui" value="true" data-target="oed_eg_sub" data-show-val="false">
          <label class="btn btn-outline-success" for="oed_eg_oui">{% translate "Oui" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="oed_eg_ok" id="oed_eg_non" value="false" data-target="oed_eg_sub" data-show-val="false">
          <label class="btn btn-outline-danger" for="oed_eg_non">{% translate "Non" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="oed_eg_ok" id="oed_eg_null" value="null" data-target="oed_eg_sub" data-show-val="false">
          <label class="btn btn-outline-secondary" for="oed_eg_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Sub-questions (visible if eg_ok is false) #}
      <div id="oed_eg_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Présence d'ornières ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="oed_eg_ornieres" id="oed_eg_or_oui" value="true">
            <label class="btn btn-outline-danger" for="oed_eg_or_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="oed_eg_ornieres" id="oed_eg_or_non" value="false">
            <label class="btn btn-outline-success" for="oed_eg_or_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="oed_eg_ornieres" id="oed_eg_or_null" value="null">
            <label class="btn btn-outline-secondary" for="oed_eg_or_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Présence de fissures ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="oed_eg_fissures" id="oed_eg_fi_oui" value="true">
            <label class="btn btn-outline-danger" for="oed_eg_fi_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="oed_eg_fissures" id="oed_eg_fi_non" value="false">
            <label class="btn btn-outline-success" for="oed_eg_fi_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="oed_eg_fissures" id="oed_eg_fi_null" value="null">
            <label class="btn btn-outline-secondary" for="oed_eg_fi_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Présence de trous ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="oed_eg_trous" id="oed_eg_tr_oui" value="true">
            <label class="btn btn-outline-danger" for="oed_eg_tr_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="oed_eg_trous" id="oed_eg_tr_non" value="false">
            <label class="btn btn-outline-success" for="oed_eg_tr_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="oed_eg_trous" id="oed_eg_tr_null" value="null">
            <label class="btn btn-outline-secondary" for="oed_eg_tr_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>
      </div>
      
      <div class="mt-3 border-top pt-2">
        <div class="d-flex gap-2 mb-2">
          <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="oed_etat_general" title="{% translate 'Prendre une photo (appareil)' %}">
            <i class="bi bi-camera-fill"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="oed_etat_general" title="{% translate 'Sélectionner des fichiers' %}">
            <i class="bi bi-folder2-open"></i>
          </button>
        </div>
        <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key="oed_etat_general"></div>
      </div>
    </div>

    {# OED - Bouche d'injection and drain #}
    <div class="guided-card custom-switch-card border rounded p-3 mb-3 bg-light">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 fw-semibold text-info"><i class="bi bi-funnel me-1"></i>{% translate "Une bouche d'injection est-elle présente ?" %}</h6>
          <span class="small text-muted">{% translate "Activer pour inspecter les conduits d'injection d'eau et de drainage" %}</span>
        </div>
        <div class="form-check form-switch fs-5">
          <input class="form-check-input guided-presence-toggle" type="checkbox" id="oed_bi_presente" data-show-target="oed_bi_sub">
        </div>
      </div>

      <div id="oed_bi_sub" class="nested-fields mt-3">
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Les niveaux du revêtement adjacent conduisent-ils bien l'eau vers la bouche d'injection ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="oed_bi_niveaux" id="oed_bi_ni_oui" value="true">
            <label class="btn btn-outline-success" for="oed_bi_ni_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_niveaux" id="oed_bi_ni_non" value="false">
            <label class="btn btn-outline-danger" for="oed_bi_ni_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_niveaux" id="oed_bi_ni_null" value="null">
            <label class="btn btn-outline-secondary" for="oed_bi_ni_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>

        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "La grille est propre et dégagée ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="oed_bi_grille" id="oed_bi_gr_oui" value="true">
            <label class="btn btn-outline-success" for="oed_bi_gr_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_grille" id="oed_bi_gr_non" value="false">
            <label class="btn btn-outline-danger" for="oed_bi_gr_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_grille" id="oed_bi_gr_null" value="null">
            <label class="btn btn-outline-secondary" for="oed_bi_gr_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>

        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "La décantation est-elle vide ou presque ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="oed_bi_decantation" id="oed_bi_de_oui" value="true">
            <label class="btn btn-outline-success" for="oed_bi_de_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_decantation" id="oed_bi_de_non" value="false">
            <label class="btn btn-outline-danger" for="oed_bi_de_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_decantation" id="oed_bi_de_null" value="null">
            <label class="btn btn-outline-secondary" for="oed_bi_de_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>

        {# Filtre #}
        <div class="mb-3 border-top pt-2">
          <p class="mb-1 small fw-semibold text-muted">{% translate "La bouche d'injection dispose-t-elle habituellement d'un filtre ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="oed_bi_filtre_present" id="oed_bi_fp_oui" value="true" data-target="oed_bi_filtre_sub" data-show-val="true">
            <label class="btn btn-outline-info" for="oed_bi_fp_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_bi_filtre_present" id="oed_bi_fp_non" value="false" data-target="oed_bi_filtre_sub" data-show-val="true">
            <label class="btn btn-outline-secondary" for="oed_bi_fp_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_bi_filtre_present" id="oed_bi_fp_null" value="null" data-target="oed_bi_filtre_sub" data-show-val="true">
            <label class="btn btn-outline-secondary" for="oed_bi_fp_null">{% translate "Non vérifié" %}</label>
          </div>
          
          <div id="oed_bi_filtre_sub" class="nested-fields ps-3 border-start border-2 border-info-subtle">
            <div class="mb-2">
              <p class="mb-1 small fw-semibold text-muted">{% translate "Le filtre est propre ?" %}</p>
              <div class="segmented-control">
                <input class="btn-check" type="radio" name="oed_bi_filtre_propre" id="oed_bi_f_pr_oui" value="true">
                <label class="btn btn-outline-success" for="oed_bi_f_pr_oui">{% translate "Oui" %}</label>
                <input class="btn-check" type="radio" name="oed_bi_filtre_propre" id="oed_bi_f_pr_non" value="false">
                <label class="btn btn-outline-danger" for="oed_bi_f_pr_non">{% translate "Non" %}</label>
                <input class="btn-check" type="radio" name="oed_bi_filtre_propre" id="oed_bi_f_pr_null" value="null">
                <label class="btn btn-outline-secondary" for="oed_bi_f_pr_null">{% translate "Non vérifié" %}</label>
              </div>
            </div>
            <div>
              <p class="mb-1 small fw-semibold text-muted">{% translate "Le filtre est en bon état ?" %}</p>
              <div class="segmented-control">
                <input class="btn-check" type="radio" name="oed_bi_filtre_bon" id="oed_bi_f_b_oui" value="true">
                <label class="btn btn-outline-success" for="oed_bi_f_b_oui">{% translate "Oui" %}</label>
                <input class="btn-check" type="radio" name="oed_bi_filtre_bon" id="oed_bi_f_b_non" value="false">
                <label class="btn btn-outline-danger" for="oed_bi_f_b_non">{% translate "Non" %}</label>
                <input class="btn-check" type="radio" name="oed_bi_filtre_bon" id="oed_bi_f_b_null" value="null">
                <label class="btn btn-outline-secondary" for="oed_bi_f_b_null">{% translate "Non vérifié" %}</label>
              </div>
            </div>
          </div>
        </div>

        {# Drain colmaté #}
        <div class="mb-3 border-top pt-2">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Le drain semble colmaté ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="oed_bi_drain_colmate" id="oed_bi_dc_oui" value="true">
            <label class="btn btn-outline-danger" for="oed_bi_dc_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_drain_colmate" id="oed_bi_dc_non" value="false">
            <label class="btn btn-outline-success" for="oed_bi_dc_non">{% translate "Non" %}</label>
            <input class="btn-check" type="radio" name="oed_bi_drain_colmate" id="oed_bi_dc_null" value="null">
            <label class="btn btn-outline-secondary" for="oed_bi_dc_null">{% translate "Non vérifié" %}</label>
          </div>
        </div>

        <div class="mt-3 border-top pt-2">
          <div class="d-flex gap-2 mb-2">
            <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="oed_bouche_injection" title="{% translate 'Prendre une photo (appareil)' %}">
              <i class="bi bi-camera-fill"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="oed_bouche_injection" title="{% translate 'Sélectionner des fichiers' %}">
              <i class="bi bi-folder2-open"></i>
            </button>
          </div>
          <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key="oed_bouche_injection"></div>
        </div>
      </div>
    </div>

    {# OED - Revêtement enherbé / minéral #}
    <div class="guided-card custom-switch-card border rounded p-3 mb-3 bg-light">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 fw-semibold text-info"><i class="bi bi-grid me-1"></i>{% translate "Structure enherbée ou remplissage minéral ?" %}</h6>
          <span class="small text-muted">{% translate "Dalles gazon, pavés à joints larges, dalles alvéolaires végétalisées/gravier, etc." %}</span>
        </div>
        <div class="form-check form-switch fs-5">
          <input class="form-check-input guided-presence-toggle" type="checkbox" id="oed_revetement_herbe_mineral_presente" data-show-target="oed_rhm_sub">
        </div>
      </div>

      <div id="oed_rhm_sub" class="nested-fields mt-3">
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "De l'eau stagne-t-elle en surface ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="oed_rhm_stagne" id="oed_rhm_st_oui" value="true" data-target="oed_rhm_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-danger" for="oed_rhm_st_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rhm_stagne" id="oed_rhm_st_non" value="false" data-target="oed_rhm_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-success" for="oed_rhm_st_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rhm_stagne" id="oed_rhm_st_null" value="null" data-target="oed_rhm_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-secondary" for="oed_rhm_st_null">{% translate "Non vérifié" %}</label>
          </div>
          
          <div id="oed_rhm_stagne_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
            <p class="mb-1 small fw-semibold text-muted">{% translate "L'eau stagne plus de 2 heures ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="oed_rhm_stagne_plus_2h" id="oed_rhm_st2_oui" value="true">
              <label class="btn btn-outline-danger" for="oed_rhm_st2_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="oed_rhm_stagne_plus_2h" id="oed_rhm_st2_non" value="false">
              <label class="btn btn-outline-success" for="oed_rhm_st2_non">{% translate "Non" %}</label>
              <input class="btn-check" type="radio" name="oed_rhm_stagne_plus_2h" id="oed_rhm_st2_null" value="null">
              <label class="btn btn-outline-secondary" for="oed_rhm_st2_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
        </div>

        <div class="mb-3 border-top pt-2">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Les joints sont-ils en bon état ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="oed_rhm_joints" id="oed_rhm_jo_oui" value="true" data-target="oed_rhm_joints_sub" data-show-val="false">
            <label class="btn btn-outline-success" for="oed_rhm_jo_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rhm_joints" id="oed_rhm_jo_non" value="false" data-target="oed_rhm_joints_sub" data-show-val="false">
            <label class="btn btn-outline-danger" for="oed_rhm_jo_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rhm_joints" id="oed_rhm_jo_null" value="null" data-target="oed_rhm_joints_sub" data-show-val="false">
            <label class="btn btn-outline-secondary" for="oed_rhm_jo_null">{% translate "Non vérifié" %}</label>
          </div>
          
          <div id="oed_rhm_joints_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
            <div class="mb-2">
              <p class="mb-1 small fw-semibold text-muted">{% translate "Présence importante de fines dans les joints ?" %}</p>
              <div class="segmented-control">
                <input class="btn-check" type="radio" name="oed_rhm_joints_fines" id="oed_rhm_jf_oui" value="true">
                <label class="btn btn-outline-danger" for="oed_rhm_jf_oui">{% translate "Oui" %}</label>
                <input class="btn-check" type="radio" name="oed_rhm_joints_fines" id="oed_rhm_jf_non" value="false">
                <label class="btn btn-outline-success" for="oed_rhm_jf_non">{% translate "Non" %}</label>
                <input class="btn-check" type="radio" name="oed_rhm_joints_fines" id="oed_rhm_jf_null" value="null">
                <label class="btn btn-outline-secondary" for="oed_rhm_jf_null">{% translate "Non vérifié" %}</label>
              </div>
            </div>
            <div>
              <p class="mb-1 small fw-semibold text-muted">{% translate "Le niveau du matériau de remplissage est plus haut que la structure ?" %}</p>
              <div class="segmented-control">
                <input class="btn-check" type="radio" name="oed_rhm_joints_remplissage" id="oed_rhm_jr_oui" value="true">
                <label class="btn btn-outline-danger" for="oed_rhm_jr_oui">{% translate "Oui" %}</label>
                <input class="btn-check" type="radio" name="oed_rhm_joints_remplissage" id="oed_rhm_jr_non" value="false">
                <label class="btn btn-outline-success" for="oed_rhm_jr_non">{% translate "Non" %}</label>
                <input class="btn-check" type="radio" name="oed_rhm_joints_remplissage" id="oed_rhm_jr_null" value="null">
                <label class="btn btn-outline-secondary" for="oed_rhm_jr_null">{% translate "Non vérifié" %}</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {# OED - Revêtement modulaire / continu poreux #}
    <div class="guided-card custom-switch-card border rounded p-3 mb-3 bg-light">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 fw-semibold text-info"><i class="bi bi-grid-1x2 me-1"></i>{% translate "Modulaire poreux ou continu poreux ?" %}</h6>
          <span class="small text-muted">{% translate "Béton poreux, enrobés bitumineux poreux, graviers liés à la résine, EPDM, etc." %}</span>
        </div>
        <div class="form-check form-switch fs-5">
          <input class="form-check-input guided-presence-toggle" type="checkbox" id="oed_revetement_poreux_presente" data-show-target="oed_rp_sub">
        </div>
      </div>

      <div id="oed_rp_sub" class="nested-fields mt-3">
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "De l'eau stagne-t-elle en surface ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="oed_rp_stagne" id="oed_rp_st_oui" value="true" data-target="oed_rp_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-danger" for="oed_rp_st_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rp_stagne" id="oed_rp_st_non" value="false" data-target="oed_rp_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-success" for="oed_rp_st_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rp_stagne" id="oed_rp_st_null" value="null" data-target="oed_rp_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-secondary" for="oed_rp_st_null">{% translate "Non vérifié" %}</label>
          </div>
          
          <div id="oed_rp_stagne_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
            <p class="mb-1 small fw-semibold text-muted">{% translate "L'eau stagne plus de 2 heures ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="oed_rp_stagne_plus_2h" id="oed_rp_st2_oui" value="true">
              <label class="btn btn-outline-danger" for="oed_rp_st2_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="oed_rp_stagne_plus_2h" id="oed_rp_st2_non" value="false">
              <label class="btn btn-outline-success" for="oed_rp_st2_non">{% translate "Non" %}</label>
              <input class="btn-check" type="radio" name="oed_rp_stagne_plus_2h" id="oed_rp_st2_null" value="null">
              <label class="btn btn-outline-secondary" for="oed_rp_st2_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
        </div>

        <div class="mb-3 border-top pt-2">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Présence de dépôts visibles (poussières, mousses, etc.) ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="oed_rp_depots" id="oed_rp_de_oui" value="true" data-target="oed_rp_depots_sub" data-show-val="true">
            <label class="btn btn-outline-danger" for="oed_rp_de_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rp_depots" id="oed_rp_de_non" value="false" data-target="oed_rp_depots_sub" data-show-val="true">
            <label class="btn btn-outline-success" for="oed_rp_de_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rp_depots" id="oed_rp_de_null" value="null" data-target="oed_rp_depots_sub" data-show-val="true">
            <label class="btn btn-outline-secondary" for="oed_rp_de_null">{% translate "Non vérifié" %}</label>
          </div>
          
          <div id="oed_rp_depots_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
            <p class="mb-1 small fw-semibold text-muted">{% translate "Un test de perméabilité est nécessaire pour valider le colmatage ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="oed_rp_test_permeabilite" id="oed_rp_tp_oui" value="true">
              <label class="btn btn-outline-danger" for="oed_rp_tp_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="oed_rp_test_permeabilite" id="oed_rp_tp_non" value="false">
              <label class="btn btn-outline-success" for="oed_rp_tp_non">{% translate "Non" %}</label>
            </div>
          </div>
        </div>
      </div>
    </div>

    {# OED - Revêtement matériaux non agrégés #}
    <div class="guided-card custom-switch-card border rounded p-3 mb-3 bg-light">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 fw-semibold text-info"><i class="bi bi-hash me-1"></i>{% translate "Revêtement en matériaux non agrégés ?" %}</h6>
          <span class="small text-muted">{% translate "Mulch végétal, graviers calcaires/non calcaires, terre battue, etc." %}</span>
        </div>
        <div class="form-check form-switch fs-5">
          <input class="form-check-input guided-presence-toggle" type="checkbox" id="oed_revetement_non_agrege_presente" data-show-target="oed_rna_sub">
        </div>
      </div>

      <div id="oed_rna_sub" class="nested-fields mt-3">
        <div class="mb-3">
          <p class="mb-1 small fw-semibold text-muted">{% translate "De l'eau stagne-t-elle en surface ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="oed_rna_stagne" id="oed_rna_st_oui" value="true" data-target="oed_rna_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-danger" for="oed_rna_st_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rna_stagne" id="oed_rna_st_non" value="false" data-target="oed_rna_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-success" for="oed_rna_st_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rna_stagne" id="oed_rna_st_null" value="null" data-target="oed_rna_stagne_sub" data-show-val="true">
            <label class="btn btn-outline-secondary" for="oed_rna_st_null">{% translate "Non vérifié" %}</label>
          </div>
          
          <div id="oed_rna_stagne_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
            <p class="mb-1 small fw-semibold text-muted">{% translate "L'eau stagne plus de 2 heures ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="oed_rna_stagne_plus_2h" id="oed_rna_st2_oui" value="true">
              <label class="btn btn-outline-danger" for="oed_rna_st2_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="oed_rna_stagne_plus_2h" id="oed_rna_st2_non" value="false">
              <label class="btn btn-outline-success" for="oed_rna_st2_non">{% translate "Non" %}</label>
              <input class="btn-check" type="radio" name="oed_rna_stagne_plus_2h" id="oed_rna_st2_null" value="null">
              <label class="btn btn-outline-secondary" for="oed_rna_st2_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
        </div>

        <div class="mb-3 border-top pt-2">
          <p class="mb-1 small fw-semibold text-muted">{% translate "Le volume de matière est-il en suffisance ?" %}</p>
          <div class="segmented-control mb-2">
            <input class="btn-check conditional-toggle" type="radio" name="oed_rna_matiere" id="oed_rna_ma_oui" value="true" data-target="oed_rna_matiere_sub" data-show-val="false">
            <label class="btn btn-outline-success" for="oed_rna_ma_oui">{% translate "Oui" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rna_matiere" id="oed_rna_ma_non" value="false" data-target="oed_rna_matiere_sub" data-show-val="false">
            <label class="btn btn-outline-danger" for="oed_rna_ma_non">{% translate "Non" %}</label>
            <input class="btn-check conditional-toggle" type="radio" name="oed_rna_matiere" id="oed_rna_ma_null" value="null" data-target="oed_rna_matiere_sub" data-show-val="false">
            <label class="btn btn-outline-secondary" for="oed_rna_ma_null">{% translate "Non vérifié" %}</label>
          </div>
          
          <div id="oed_rna_matiere_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
            <p class="mb-1 small fw-semibold text-muted">{% translate "Le géotextile est-il visible ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="oed_rna_geotextile" id="oed_rna_ge_oui" value="true">
              <label class="btn btn-outline-danger" for="oed_rna_ge_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="oed_rna_geotextile" id="oed_rna_ge_non" value="false">
              <label class="btn btn-outline-success" for="oed_rna_ge_non">{% translate "Non" %}</label>
              <input class="btn-check" type="radio" name="oed_rna_geotextile" id="oed_rna_ge_null" value="null">
              <label class="btn btn-outline-secondary" for="oed_rna_ge_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>{# /section_oed #}

  {# ── ÉTAPE 2c : TA ── #}
  <div id="guided_section_ta" class="d-none">
    <div class="alert alert-info d-flex align-items-center mb-4 py-2" style="background-color:#e0f2f1; border-color:#b2dfdb; color:#00796b;">
      <i class="bi bi-cloud-rain-fill me-2 fs-5"></i>
      <strong>{% translate "Technique alternative / Bassin d'orage (TA)" %}</strong>
    </div>

    {# TA - Points d'entrée #}
    <div class="guided-card">
      <h6 class="border-bottom pb-2 mb-3 text-teal fw-bold" style="color:#00796b;"><i class="bi bi-box-arrow-in-right me-1"></i>{% translate "Points d'entrée dans l'ouvrage" %}</h6>
      
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "L'eau peut-elle facilement entrer dans l'ouvrage ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="ta_pe_ok" id="ta_pe_o_oui" value="true">
          <label class="btn btn-outline-success" for="ta_pe_o_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="ta_pe_ok" id="ta_pe_o_non" value="false">
          <label class="btn btn-outline-danger" for="ta_pe_o_non">{% translate "Non" %}</label>
          <input class="btn-check" type="radio" name="ta_pe_ok" id="ta_pe_o_null" value="null">
          <label class="btn btn-outline-secondary" for="ta_pe_o_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      <div class="mb-3 border-top pt-2">
        <p class="mb-1 fw-semibold">{% translate "Les conduits et dispositifs amenant l'eau sont-ils fonctionnels ?" %}</p>
        <div class="segmented-control mb-2">
          <input class="btn-check conditional-toggle" type="radio" name="ta_pe_conduits_ok" id="ta_pe_co_oui" value="true" data-target="ta_pe_conduits_sub" data-show-val="false">
          <label class="btn btn-outline-success" for="ta_pe_co_oui">{% translate "Oui" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="ta_pe_conduits_ok" id="ta_pe_co_non" value="false" data-target="ta_pe_conduits_sub" data-show-val="false">
          <label class="btn btn-outline-danger" for="ta_pe_co_non">{% translate "Non" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="ta_pe_conduits_ok" id="ta_pe_co_null" value="null" data-target="ta_pe_conduits_sub" data-show-val="false">
          <label class="btn btn-outline-secondary" for="ta_pe_co_null">{% translate "Non vérifié" %}</label>
        </div>

        {# Sub conduits non-fonctionnels #}
        <div id="ta_pe_conduits_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
          <div class="mb-2">
            <p class="mb-1 small fw-semibold text-muted">{% translate "Les grilles sont-elles propres et dégagées ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="ta_pe_grilles" id="ta_pe_g_oui" value="true">
              <label class="btn btn-outline-success" for="ta_pe_g_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="ta_pe_grilles" id="ta_pe_g_non" value="false">
              <label class="btn btn-outline-danger" for="ta_pe_g_non">{% translate "Non" %}</label>
              <input class="btn-check" type="radio" name="ta_pe_grilles" id="ta_pe_g_null" value="null">
              <label class="btn btn-outline-secondary" for="ta_pe_g_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
          <div class="mb-2">
            <p class="mb-1 small fw-semibold text-muted">{% translate "Des feuilles ou branches bloquent-elles l'eau ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="ta_pe_feuilles" id="ta_pe_f_oui" value="true">
              <label class="btn btn-outline-danger" for="ta_pe_f_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="ta_pe_feuilles" id="ta_pe_f_non" value="false">
              <label class="btn btn-outline-success" for="ta_pe_f_non">{% translate "Non" %}</label>
              <input class="btn-check" type="radio" name="ta_pe_feuilles" id="ta_pe_f_null" value="null">
              <label class="btn btn-outline-secondary" for="ta_pe_f_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
          <div>
            <p class="mb-1 small fw-semibold text-muted">{% translate "Un amas de détritus bloque-t-il l'eau ?" %}</p>
            <div class="segmented-control">
              <input class="btn-check" type="radio" name="ta_pe_detritus" id="ta_pe_d_oui" value="true">
              <label class="btn btn-outline-danger" for="ta_pe_d_oui">{% translate "Oui" %}</label>
              <input class="btn-check" type="radio" name="ta_pe_detritus" id="ta_pe_d_non" value="false">
              <label class="btn btn-outline-success" for="ta_pe_d_non">{% translate "Non" %}</label>
              <input class="btn-check" type="radio" name="ta_pe_detritus" id="ta_pe_d_null" value="null">
              <label class="btn btn-outline-secondary" for="ta_pe_d_null">{% translate "Non vérifié" %}</label>
            </div>
          </div>
        </div>
      </div>

      <div class="mb-3 border-top pt-2">
        <p class="mb-1 fw-semibold">{% translate "La décantation est-elle vide ou presque ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="ta_pe_decantation" id="ta_pe_de_oui" value="true">
          <label class="btn btn-outline-success" for="ta_pe_de_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="ta_pe_decantation" id="ta_pe_de_non" value="false">
          <label class="btn btn-outline-danger" for="ta_pe_de_non">{% translate "Non" %}</label>
          <input class="btn-check" type="radio" name="ta_pe_decantation" id="ta_pe_de_null" value="null">
          <label class="btn btn-outline-secondary" for="ta_pe_de_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      <div class="mt-3 border-top pt-2">
        <div class="d-flex gap-2 mb-2">
          <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="ta_point_entree" title="{% translate 'Prendre une photo (appareil)' %}">
            <i class="bi bi-camera-fill"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="ta_point_entree" title="{% translate 'Sélectionner des fichiers' %}">
            <i class="bi bi-folder2-open"></i>
          </button>
        </div>
        <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key="ta_point_entree"></div>
      </div>
    </div>

    {# TA - Bassin d'orage #}
    <div class="guided-card">
      <h6 class="border-bottom pb-2 mb-3 text-teal fw-bold" style="color:#00796b;"><i class="bi bi-cloud-snow me-1"></i>{% translate "Bassin d'orage" %}</h6>
      
      {# Végétation #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Quel est l'état de la végétation ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check conditional-toggle" type="radio" name="ta_bo_vegetation_etat" id="ta_bo_v_bon" value="bon" data-target="ta_bo_veg_sub" data-show-val="mauvais">
          <label class="btn btn-outline-success" for="ta_bo_v_bon">{% translate "Bon" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="ta_bo_vegetation_etat" id="ta_bo_v_mauvais" value="mauvais" data-target="ta_bo_veg_sub" data-show-val="mauvais">
          <label class="btn btn-outline-danger" for="ta_bo_v_mauvais">{% translate "Mauvais" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="ta_bo_vegetation_etat" id="ta_bo_v_null" value="null" data-target="ta_bo_veg_sub" data-show-val="mauvais">
          <label class="btn btn-outline-secondary" for="ta_bo_v_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Plantes mortes (if vegetation is mauvais) #}
      <div id="ta_bo_veg_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle mb-3">
        <p class="mb-1 small fw-semibold text-muted">{% translate "Présence de plantes mortes ou absentes :" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="ta_bo_plantes_mortes" id="ta_bo_pm_plus" value="plus_10">
          <label class="btn btn-outline-danger" for="ta_bo_pm_plus">{% translate "Sur + de 10% de la surface" %}</label>
          <input class="btn-check" type="radio" name="ta_bo_plantes_mortes" id="ta_bo_pm_moins" value="moins_10">
          <label class="btn btn-outline-success" for="ta_bo_pm_moins">{% translate "Sur - de 10% de la surface" %}</label>
          <input class="btn-check" type="radio" name="ta_bo_plantes_mortes" id="ta_bo_pm_null" value="null">
          <label class="btn btn-outline-secondary" for="ta_bo_pm_null">{% translate "Non vérifié" %}</label>
        </div>
      </div>

      {# Chenaux d'érosion #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de chenaux d'érosion ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="ta_bo_chenaux" id="ta_bo_ce_oui" value="true">
          <label class="btn btn-outline-danger" for="ta_bo_ce_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="ta_bo_chenaux" id="ta_bo_ce_non" value="false">
          <label class="btn btn-outline-success" for="ta_bo_ce_non">{% translate "Non" %}</label>
        </div>
      </div>

      {# Flaques #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de flaques d'eau persistantes ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="ta_bo_flaques" id="ta_bo_fl_oui" value="true">
          <label class="btn btn-outline-danger" for="ta_bo_fl_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="ta_bo_flaques" id="ta_bo_fl_non" value="false">
          <label class="btn btn-outline-success" for="ta_bo_fl_non">{% translate "Non" %}</label>
        </div>
      </div>

      {# Sédiments #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de sédiments dans l'ouvrage ?" %}</p>
        <div class="segmented-control mb-2">
          <input class="btn-check conditional-toggle" type="radio" name="ta_bo_sediments" id="ta_bo_se_oui" value="true" data-target="ta_bo_se_sub" data-show-val="true">
          <label class="btn btn-outline-danger" for="ta_bo_se_oui">{% translate "Oui" %}</label>
          <input class="btn-check conditional-toggle" type="radio" name="ta_bo_sediments" id="ta_bo_se_non" value="false" data-target="ta_bo_se_sub" data-show-val="true">
          <label class="btn btn-outline-success" for="ta_bo_se_non">{% translate "Non" %}</label>
        </div>

        <div id="ta_bo_se_sub" class="nested-fields ps-3 border-start border-2 border-danger-subtle">
          <p class="mb-1 small fw-semibold text-muted">{% translate "L'ouvrage est-il rempli au 5e de sa capacité ?" %}</p>
          <div class="segmented-control">
            <input class="btn-check" type="radio" name="ta_bo_rempli_cinquieme" id="ta_bo_rc_oui" value="true">
            <label class="btn btn-outline-danger" for="ta_bo_rc_oui">{% translate "Oui" %}</label>
            <input class="btn-check" type="radio" name="ta_bo_rempli_cinquieme" id="ta_bo_rc_non" value="false">
            <label class="btn btn-outline-success" for="ta_bo_rc_non">{% translate "Non" %}</label>
          </div>
        </div>
      </div>

      {# Détritus #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence de détritus dans l'ouvrage ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="ta_bo_detritus" id="ta_bo_de_oui" value="true">
          <label class="btn btn-outline-danger" for="ta_bo_de_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="ta_bo_detritus" id="ta_bo_de_non" value="false">
          <label class="btn btn-outline-success" for="ta_bo_de_non">{% translate "Non" %}</label>
        </div>
      </div>

      {# Espèces envahissantes #}
      <div class="mb-3">
        <p class="mb-1 fw-semibold">{% translate "Présence d'espèces exotiques envahissantes ?" %}</p>
        <div class="segmented-control">
          <input class="btn-check" type="radio" name="ta_bo_envahissantes" id="ta_bo_ee_oui" value="true">
          <label class="btn btn-outline-danger" for="ta_bo_ee_oui">{% translate "Oui" %}</label>
          <input class="btn-check" type="radio" name="ta_bo_envahissantes" id="ta_bo_ee_non" value="false">
          <label class="btn btn-outline-success" for="ta_bo_ee_non">{% translate "Non" %}</label>
        </div>
      </div>

      <div class="mt-3 border-top pt-2">
        <div class="d-flex gap-2 mb-2">
          <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="ta_bassin_orage" title="{% translate 'Prendre une photo (appareil)' %}">
            <i class="bi bi-camera-fill"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="ta_bassin_orage" title="{% translate 'Sélectionner des fichiers' %}">
            <i class="bi bi-folder2-open"></i>
          </button>
        </div>
        <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key="ta_bassin_orage"></div>
      </div>
    </div>
  </div>{# /section_ta #}


  {# ── Actions recommandées (Général) ── #}
  <div class="guided-card">
    <h6 class="border-bottom pb-2 mb-3 text-secondary fw-bold"><i class="bi bi-bookmark-star me-1"></i>{% translate "Actions recommandées" %}</h6>
    
    <div class="form-check mb-2">
      <input class="form-check-input" type="checkbox" id="act_aucune">
      <label class="form-check-label fw-bold" for="act_aucune">{% translate "Aucune action nécessaire" %}</label>
    </div>
    
    <div class="ps-3">
      <div class="form-check mb-1">
        <input class="form-check-input" type="checkbox" id="act_preventif">
        <label class="form-check-label" for="act_preventif">{% translate "Renforcement de l'entretien préventif" %}</label>
      </div>
      <div class="form-check mb-1">
        <input class="form-check-input" type="checkbox" id="act_curatif">
        <label class="form-check-label text-danger fw-semibold" for="act_curatif">{% translate "Entretien curatif / Réparation / Adaptation nécessaire" %}</label>
      </div>
      <div class="form-check mb-1">
        <input class="form-check-input" type="checkbox" id="act_permeabilite">
        <label class="form-check-label" for="act_permeabilite">{% translate "Test de perméabilité" %}</label>
      </div>
      <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" id="act_camera">
        <label class="form-check-label" for="act_camera">{% translate "Inspection par caméra" %}</label>
      </div>
    </div>

    <div class="mb-3">
      <label for="act_precision" class="form-label small fw-semibold text-muted">{% translate "Précisions sur les actions à entreprendre" %}</label>
      <textarea class="form-control form-control-sm" id="act_precision" rows="2" placeholder="{% translate 'Renseignez ici les détails des actions...' %}"></textarea>
    </div>
  </div>

  {# ── Observations (Général) ── #}
  <div class="guided-card">
    <h6 class="border-bottom pb-2 mb-3 text-secondary fw-bold"><i class="bi bi-chat-left-text me-1"></i>{% translate "Remarques et observations complémentaires" %}</h6>
    <textarea class="form-control form-control-sm" id="guided_observations" rows="3" placeholder="{% translate 'Saisissez vos remarques... Pensez à noter les éléments perturbateurs liés au contexte/usage autour (ex: chantier, commerce...)' %}"></textarea>
  </div>

  {# ── Photos générales ── #}
  <div class="guided-card">
    <h6 class="border-bottom pb-2 mb-3 text-secondary fw-bold"><i class="bi bi-paperclip me-1"></i>{% translate "Photos / Documents généraux" %}</h6>
    <div class="mt-2">
      <div class="d-flex gap-2 mb-2">
        <button type="button" class="btn btn-sm btn-outline-primary guided-camera-btn" data-field-key="" title="{% translate 'Prendre une photo (appareil)' %}">
          <i class="bi bi-camera-fill"></i>
        </button>
        <button type="button" class="btn btn-sm btn-outline-secondary guided-file-btn" data-field-key="" title="{% translate 'Sélectionner des fichiers' %}">
          <i class="bi bi-folder2-open"></i>
        </button>
      </div>
      <div class="guided-media-zone d-flex flex-wrap gap-2" data-field-key=""></div>
    </div>
  </div>

  <!-- Validation bottom bar -->
  <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
    <div></div>
    <button type="button" id="backToOuvragesBottomBtn" class="btn btn-primary px-4 py-2 fw-semibold">
      <i class="bi bi-check-circle-fill me-2"></i>{% translate "Valider cet ouvrage" %}
    </button>
  </div>
</div>{# /guidedQuestionnaireForm #}

</div>{# /guided-edit-mode #}
{% endif %}{# /can_edit #}

{# ── Input fichier caché ── #}
<input type="file" id="guidedFileInput" class="d-none" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx" multiple>
<input type="file" id="guidedCameraInput" class="d-none" accept="image/*" capture="environment">
<input type="hidden" id="guidedFileInputKey" value="">

{{ guided_data_json|json_script:"guidedDataJson" }}
{{ guided_media_json|json_script:"guidedMediaJson" }}

{# ═══════════════════════════════════════════════════════════════════════ JS #}
<script>
(function () {
  'use strict';

  const card = document.getElementById('guidedOperationBlock');
  if (!card) return;

  const saveUrl        = card.dataset.saveUrl;
  const uploadUrl      = card.dataset.uploadMediaUrl;
  const readMode       = document.getElementById('guidedReadMode');
  const editMode       = document.getElementById('guidedEditMode');
  const canEdit        = !!editMode;
  const alertContainer = document.getElementById('guidedAlertContainer');
  const interventionId = "{{ intervention.id }}";
  const interventionLon = parseFloat("{{ intervention.lon|default_if_none:'' }}".replace(',', '.'));
  const interventionLat = parseFloat("{{ intervention.lat|default_if_none:'' }}".replace(',', '.'));

  // ── Parse saved data ──────────────────────────────────────────────────
  let savedData = {};
  try {
    savedData = JSON.parse(document.getElementById('guidedDataJson').textContent);
  } catch(e) {}

  let existingMedia = [];
  try {
    existingMedia = JSON.parse(document.getElementById('guidedMediaJson').textContent) || [];
  } catch(e) {}

  // Local list of ouvrages
  let localOuvrages = [];
  if (savedData) {
    if (savedData.device_type && !savedData.ouvrages) {
      localOuvrages = [{ ...savedData, local_id: "0" }];
    } else {
      localOuvrages = savedData.ouvrages || [];
    }
  }
  let currentOuvrageIndex = -1;
  let selectedAsset = null; // { id, code, name }

  // ── Toggle edit / read ────────────────────────────────────────────────
  function showRead() {
    readMode && readMode.classList.remove('d-none');
    editMode && editMode.classList.add('d-none');
    stopMapSelection();
    updateMapSelectedAsset();
  }

  function showEdit() {
    readMode && readMode.classList.add('d-none');
    editMode && editMode.classList.remove('d-none');
    
    // Normalize data for multi-ouvrages
    if (savedData.device_type && !savedData.ouvrages) {
      localOuvrages = [{ ...savedData, local_id: "0" }];
    } else {
      localOuvrages = savedData.ouvrages || [];
    }

    // Set weather conditions
    setRadioChecked('date_derniere_pluie', savedData.date_derniere_pluie);
    setRadioChecked('orage_moins_une_heure', savedData.orage_moins_une_heure);
    
    showOuvragesListMode();
  }

  document.addEventListener('cms-edit-mode-enter', () => { if (canEdit) showEdit(); });
  document.addEventListener('cms-edit-mode-exit',  showRead);

  // ── Ouvrages List Navigation ──────────────────────────────────────────
  function showOuvragesListMode() {
    document.getElementById('ouvragesListWrapper').classList.remove('d-none');
    document.getElementById('guidedQuestionnaireForm').classList.add('d-none');
    renderOuvragesList();
    currentOuvrageIndex = -1;
    stopMapSelection();
  }

  function showQuestionnaireFormMode(index) {
    document.getElementById('ouvragesListWrapper').classList.add('d-none');
    document.getElementById('guidedQuestionnaireForm').classList.remove('d-none');
    
    currentOuvrageIndex = index;
    
    const headerText = document.getElementById('questionnaireFormHeader');
    if (headerText) {
      headerText.textContent = `Ouvrage #${index + 1} — Inspection`;
    }
    
    resetFormFields();
    populateForm(localOuvrages[index]);
    
    document.getElementById('guidedOperationBlock')?.scrollIntoView({ behavior: 'smooth' });
  }

  function addNewOuvrage() {
    const newOuv = {
      local_id: "ouv_" + Date.now() + "_" + Math.floor(Math.random() * 1000),
      device_type: "evc", // default to EVC
      rwi_asset_id: null,
      rwi_asset_code: null,
      rwi_asset_name: null,
      evc: {
        point_entree: { ok: null },
        espace_vert: { vegetation_etat: null },
        surverse: { presente: false }
      },
      actions: { aucune: true },
      observations: ""
    };
    
    localOuvrages.push(newOuv);
    showQuestionnaireFormMode(localOuvrages.length - 1);
  }

  function editOuvrage(index) {
    showQuestionnaireFormMode(index);
  }

  function deleteOuvrage(index) {
    if (!confirm("Voulez-vous vraiment supprimer cet ouvrage ?")) return;
    
    const localId = localOuvrages[index].local_id;
    existingMedia = existingMedia.filter(m => !m.field_key.startsWith(localId + "_"));
    
    localOuvrages.splice(index, 1);
    renderOuvragesList();
    updateMapSelectedAsset();
    saveGuidedData().catch(err => {
      console.error(err);
      showAlert("Erreur lors de la sauvegarde automatique après suppression.", "danger");
    });
  }

  function backToOuvrages() {
    if (currentOuvrageIndex !== -1) {
      localOuvrages[currentOuvrageIndex] = {
        ...localOuvrages[currentOuvrageIndex],
        ...collectData()
      };
    }
    showOuvragesListMode();
    updateMapSelectedAsset();
    saveGuidedData().catch(err => {
      console.error(err);
      showAlert("Erreur lors de la sauvegarde automatique.", "danger");
    });
  }

  function renderOuvragesList() {
    const listContainer = document.getElementById('ouvragesListContainer');
    if (!listContainer) return;
    
    listContainer.innerHTML = '';
    
    if (localOuvrages.length === 0) {
      listContainer.innerHTML = `
        <div class="text-center py-4 text-muted border rounded bg-light mb-3">
          <i class="bi bi-inboxes fs-2 d-block mb-2 text-secondary"></i>
          <p class="mb-0 fw-semibold">Aucun ouvrage inspecté pour le moment.</p>
          <span class="small text-muted">Veuillez ajouter un premier ouvrage pour commencer le questionnaire.</span>
        </div>
      `;
      return;
    }
    
    localOuvrages.forEach((ouv, idx) => {
      let badge = '';
      let borderStyle = '';
      if (ouv.device_type === 'evc') {
        badge = '<span class="badge bg-success-subtle text-success border border-success-subtle">Espace vert creux (EVC)</span>';
        borderStyle = 'border-left: 5px solid #2e7d32;';
      } else if (ouv.device_type === 'oed') {
        badge = '<span class="badge bg-info-subtle text-info border border-info-subtle">Massif drainant (OED)</span>';
        borderStyle = 'border-left: 5px solid #0277bd;';
      } else if (ouv.device_type === 'ta') {
        badge = '<span class="badge bg-teal-subtle text-teal border border-teal-subtle">Technique alternative (TA)</span>';
        borderStyle = 'border-left: 5px solid #00796b;';
      } else {
        badge = '<span class="badge bg-secondary-subtle text-secondary">Non renseigné</span>';
        borderStyle = 'border-left: 5px solid #6c757d;';
      }
      
      let assetInfo = '';
      if (ouv.rwi_asset_code) {
        assetInfo = `<div class="mt-2 small text-primary"><i class="bi bi-pin-map-fill me-1"></i> Équipement lié: <strong>${escHtml(ouv.rwi_asset_code)}</strong> <span class="asset-badge-name text-truncate d-inline-block align-bottom" title="${escHtml(ouv.rwi_asset_name)}">(${escHtml(ouv.rwi_asset_name)})</span></div>`;
      } else {
        assetInfo = `<div class="mt-2 small text-muted fst-italic"><i class="bi bi-link-45deg me-1"></i> Aucun équipement lié</div>`;
      }
      
      const el = document.createElement('div');
      el.className = 'guided-card clickable-card p-3 mb-2';
      el.style = borderStyle;
      
      const details = buildOuvrageDetailPreviewHtml(ouv, existingMedia);
      
      el.innerHTML = `
        <div class="d-flex justify-content-between align-items-center w-100 flex-wrap gap-2">
          <div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
              <h6 class="mb-0 fw-bold">Ouvrage #${idx + 1}</h6>
              ${badge}
            </div>
            ${assetInfo}
          </div>
          <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-sm btn-outline-primary edit-ouvrage-btn" data-index="${idx}">
              <i class="bi bi-pencil-fill me-1"></i> Modifier
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger delete-ouvrage-btn" data-index="${idx}">
              <i class="bi bi-trash-fill"></i>
            </button>
            <i class="bi bi-chevron-down chevron-icon fs-5 text-secondary ms-1"></i>
          </div>
        </div>
        <div class="card-details-toggle d-none w-100 mt-3 border-top pt-3">
          <div class="row g-3">
            ${details || '<div class="col-12 text-muted fst-italic">Aucune réponse saisie pour le moment.</div>'}
          </div>
        </div>
      `;
      
      el.addEventListener('click', function(e) {
        if (e.target.closest('button') || e.target.closest('a') || e.target.closest('input')) return;
        const detailsContainer = this.querySelector('.card-details-toggle');
        if (detailsContainer) {
          detailsContainer.classList.toggle('d-none');
          const chevron = this.querySelector('.chevron-icon');
          if (chevron) {
            chevron.classList.toggle('bi-chevron-down');
            chevron.classList.toggle('bi-chevron-up');
          }
        }
      });
      
      listContainer.appendChild(el);
    });
    
    // Wire edit buttons
    listContainer.querySelectorAll('.edit-ouvrage-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const index = parseInt(btn.dataset.index);
        editOuvrage(index);
      });
    });
    
    // Wire delete buttons
    listContainer.querySelectorAll('.delete-ouvrage-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const index = parseInt(btn.dataset.index);
        deleteOuvrage(index);
      });
    });
  }

  // ── Asset Selection Logic ─────────────────────────────────────────────
  let cachedGiepGeojson = null;
  let mapStyleLoadListenerAttached = false;

  function fetchGiepGeojsonIfNeeded() {
    if (cachedGiepGeojson) {
      return Promise.resolve(cachedGiepGeojson);
    }
    const geojsonUrl = `/interventions/${interventionId}/guided-operation/giep-assets/geojson/?_t=${Date.now()}`;
    return fetch(geojsonUrl)
      .then(resp => resp.json())
      .then(geojson => {
        cachedGiepGeojson = geojson;
        return geojson;
      });
  }

  function getAllSelectedAssets() {
    const list = [];
    const seenIds = new Set();

    const addAsset = (id, code) => {
      if (id && !seenIds.has(String(id))) {
        seenIds.add(String(id));
        list.push({ id: String(id), code });
      }
    };

    localOuvrages.forEach((ouv, idx) => {
      if (idx === currentOuvrageIndex) {
        if (selectedAsset) {
          addAsset(selectedAsset.id, selectedAsset.code);
        }
      } else {
        if (ouv.rwi_asset_id) {
          addAsset(ouv.rwi_asset_id, ouv.rwi_asset_code);
        }
      }
    });

    return list;
  }

  function updateMapSelectedAsset(fitBounds) {
    const activeMap = (typeof map !== 'undefined' && map) || window.map;
    console.log("[GIEP Map] updateMapSelectedAsset. Map defined:", !!activeMap);
    if (!activeMap) return;
    
    const isLoaded = typeof activeMap._loaded !== 'undefined' ? activeMap._loaded : activeMap.isStyleLoaded();
    console.log("[GIEP Map] Map style loaded check:", isLoaded);
    if (!isLoaded) {
      if (!mapStyleLoadListenerAttached) {
        mapStyleLoadListenerAttached = true;
        activeMap.once('load', () => {
          mapStyleLoadListenerAttached = false;
          console.log("[GIEP Map] Map style load event fired!");
          updateMapSelectedAsset(fitBounds);
        });
      }
      return;
    }

    const selectedList = getAllSelectedAssets();
    console.log("[GIEP Map] Selected GIEP list:", selectedList);

    if (selectedList.length === 0) {
      console.log("[GIEP Map] No GIEP selected. Removing layers.");
      if (activeMap.getLayer('giep-selected-asset-layer')) activeMap.removeLayer('giep-selected-asset-layer');
      if (activeMap.getLayer('giep-selected-asset-outline-layer')) activeMap.removeLayer('giep-selected-asset-outline-layer');
      if (activeMap.getLayer('giep-selected-asset-circle-layer')) activeMap.removeLayer('giep-selected-asset-circle-layer');
      if (activeMap.getLayer('giep-selected-asset-label-layer')) activeMap.removeLayer('giep-selected-asset-label-layer');
      if (activeMap.getSource('giep-selected-asset')) activeMap.removeSource('giep-selected-asset');
      return;
    }

    fetchGiepGeojsonIfNeeded()
      .then(geojson => {
        console.log("[GIEP Map] GeoJSON loaded. Feature count:", geojson.features.length);
        const selectedIds = new Set(selectedList.map(item => String(item.id)));
        const selectedFeatures = geojson.features.filter(f => selectedIds.has(String(f.properties.id)));
        console.log("[GIEP Map] Selected features in GeoJSON:", selectedFeatures);

        if (activeMap.getSource('giep-selected-asset')) {
          console.log("[GIEP Map] Updating existing source");
          activeMap.getSource('giep-selected-asset').setData({
            type: 'FeatureCollection',
            features: selectedFeatures
          });
        } else {
          console.log("[GIEP Map] Creating new source");
          activeMap.addSource('giep-selected-asset', {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: selectedFeatures
            }
          });
        }

        if (!activeMap.getLayer('giep-selected-asset-layer')) {
          console.log("[GIEP Map] Adding fill layer");
          activeMap.addLayer({
            id: 'giep-selected-asset-layer',
            type: 'fill',
            source: 'giep-selected-asset',
            paint: {
              'fill-color': '#0277bd',
              'fill-opacity': 0.4
            }
          });
        }

        if (!activeMap.getLayer('giep-selected-asset-outline-layer')) {
          console.log("[GIEP Map] Adding outline layer");
          activeMap.addLayer({
            id: 'giep-selected-asset-outline-layer',
            type: 'line',
            source: 'giep-selected-asset',
            paint: {
              'line-color': '#01579B',
              'line-width': 3
            }
          });
        }

        if (!activeMap.getLayer('giep-selected-asset-circle-layer')) {
          console.log("[GIEP Map] Adding circle layer for point geometries");
          activeMap.addLayer({
            id: 'giep-selected-asset-circle-layer',
            type: 'circle',
            source: 'giep-selected-asset',
            filter: ['==', ['geometry-type'], 'Point'],
            paint: {
              'circle-color': '#0277bd',
              'circle-radius': 8,
              'circle-stroke-color': '#01579B',
              'circle-stroke-width': 2
            }
          });
        }

        if (!activeMap.getLayer('giep-selected-asset-label-layer')) {
          console.log("[GIEP Map] Adding label layer");
          activeMap.addLayer({
            id: 'giep-selected-asset-label-layer',
            type: 'symbol',
            source: 'giep-selected-asset',
            layout: {
              'text-field': ['get', 'code'],
              'text-font': ['Noto Sans Regular'],
              'text-size': 12,
              'text-anchor': 'center',
              'text-allow-overlap': true
            },
            paint: {
              'text-color': '#01579B',
              'text-halo-color': 'rgba(255, 255, 255, 0.95)',
              'text-halo-width': 2
            }
          });
        }

        if (fitBounds && selectedFeatures.length > 0 && typeof maplibregl !== 'undefined') {
          console.log("[GIEP Map] Fitting bounds to selection");
          try {
            activeMap.resize();
          } catch (e) {}
          const bounds = new maplibregl.LngLatBounds();
          
          if (!isNaN(interventionLon) && !isNaN(interventionLat)) {
            bounds.extend([interventionLon, interventionLat]);
          }
          
          selectedFeatures.forEach(f => {
            if (f.geometry) {
              if (f.geometry.type === 'Point') {
                bounds.extend(f.geometry.coordinates);
              } else if (f.geometry.type === 'Polygon') {
                f.geometry.coordinates[0].forEach(coord => bounds.extend(coord));
              } else if (f.geometry.type === 'MultiPolygon') {
                f.geometry.coordinates.forEach(poly => {
                  poly[0].forEach(coord => bounds.extend(coord));
                });
              } else if (f.geometry.type === 'LineString') {
                f.geometry.coordinates.forEach(coord => bounds.extend(coord));
              } else if (f.geometry.type === 'MultiLineString') {
                f.geometry.coordinates.forEach(line => {
                  line.forEach(coord => bounds.extend(coord));
                });
              }
            }
          });
          
          activeMap.fitBounds(bounds, { padding: 50, maxZoom: 18 });
        }
      })
      .catch(err => {
        console.error("Error drawing GIEP selected assets on map:", err);
      });
  }

  function selectGIEPAsset(id, code, name) {
    selectedAsset = { id, code, name };
    
    const displayText = document.getElementById('giep_selected_asset_text');
    const clearBtn = document.getElementById('giep_clear_asset_btn');
    
    if (displayText) {
      displayText.innerHTML = `<span class="badge bg-success text-white py-1 px-2 d-inline-flex align-items-center gap-1" style="max-width: 100%;"><i class="bi bi-pin-map-fill me-1"></i> <strong>${escHtml(code)}</strong> <span class="asset-badge-name text-truncate" title="${escHtml(name)}">(${escHtml(name)})</span></span>`;
    }
    if (clearBtn) {
      clearBtn.classList.remove('d-none');
    }
    updateMapSelectedAsset(true);
  }
  
  function clearGIEPAsset() {
    selectedAsset = null;
    
    const displayText = document.getElementById('giep_selected_asset_text');
    const clearBtn = document.getElementById('giep_clear_asset_btn');
    
    if (displayText) {
      displayText.innerHTML = '<span class="text-muted small">Aucun équipement lié.</span>';
    }
    if (clearBtn) {
      clearBtn.classList.add('d-none');
    }
    updateMapSelectedAsset(false);
  }

  // Autocomplete and proximity search
  const searchInput = document.getElementById('giep_asset_search');
  const resultsDropdown = document.getElementById('giep_asset_autocomplete_results');
  
  if (searchInput && resultsDropdown) {
    searchInput.addEventListener('focus', () => {
      const q = searchInput.value.trim();
      if (q === '') {
        fetchNearbyGIEPAssets();
      } else {
        fetchAutocompleteGIEPAssets(q);
      }
    });
    
    searchInput.addEventListener('input', debounce(() => {
      const q = searchInput.value.trim();
      if (q === '') {
        fetchNearbyGIEPAssets();
      } else {
        fetchAutocompleteGIEPAssets(q);
      }
    }, 250));
    
    document.addEventListener('click', (e) => {
      if (!searchInput.contains(e.target) && !resultsDropdown.contains(e.target)) {
        resultsDropdown.classList.add('d-none');
      }
    });
  }
  
  function fetchNearbyGIEPAssets() {
    const url = `/interventions/${interventionId}/guided-operation/giep-assets/nearby/`;
    fetch(url)
      .then(resp => resp.json())
      .then(data => renderAssetResults(data, true))
      .catch(err => console.error("Error fetching nearby GIEP assets:", err));
  }
  
  function fetchAutocompleteGIEPAssets(q) {
    const url = `/interventions/${interventionId}/guided-operation/giep-assets/autocomplete/?q=${encodeURIComponent(q)}`;
    fetch(url)
      .then(resp => resp.json())
      .then(data => renderAssetResults(data, false))
      .catch(err => console.error("Error autocomplete GIEP assets:", err));
  }
  
  function renderAssetResults(assets, isNearby) {
    resultsDropdown.innerHTML = '';
    
    if (assets.length === 0) {
      resultsDropdown.innerHTML = '<div class="list-group-item text-muted small py-2">Aucun équipement trouvé.</div>';
      resultsDropdown.classList.remove('d-none');
      return;
    }
    
    if (isNearby) {
      const header = document.createElement('div');
      header.className = 'list-group-item bg-light text-muted small py-1 fw-bold';
      header.innerHTML = '<i class="bi bi-geo-fill me-1"></i> Équipements GIEP à proximité :';
      resultsDropdown.appendChild(header);
    }
    
    assets.forEach(asset => {
      const item = document.createElement('button');
      item.type = 'button';
      item.className = 'list-group-item list-group-item-action text-start py-2 small';
      
      let label = asset.label;
      if (asset.distance !== null && asset.distance !== undefined) {
        label += ` <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle ms-2">à ${asset.distance}m</span>`;
      }
      
      item.innerHTML = label;
      item.addEventListener('click', () => {
        selectGIEPAsset(asset.id, asset.code, asset.structure_type);
        resultsDropdown.classList.add('d-none');
        searchInput.value = '';
      });
      resultsDropdown.appendChild(item);
    });
    
    resultsDropdown.classList.remove('d-none');
  }

  // ── Maplibre Selection Logic ──────────────────────────────────────────
  let mapSelectActive = false;
  
  function startMapSelection() {
    if (mapSelectActive) return;
    mapSelectActive = true;

    if (typeof window.openMap === 'function') {
      window.openMap();
    }
    
    document.getElementById('giep_map_selection_banner')?.remove();
    
    const banner = document.createElement('div');
    banner.id = 'giep_map_selection_banner';
    banner.className = 'alert alert-primary d-flex justify-content-between align-items-center py-2 mb-3';
    const bannerText = typeof window.openMap === 'function'
      ? "📍 Veuillez cliquer sur un équipement GIEP sur la carte pour l'associer."
      : "📍 Veuillez cliquer sur un équipement GIEP sur la carte de droite pour l'associer.";
    banner.innerHTML = `
      <span><i class="bi bi-info-circle-fill me-2"></i> ${bannerText}</span>
      <button type="button" id="giep_map_cancel_btn" class="btn btn-sm btn-outline-primary">Annuler</button>
    `;
    alertContainer.appendChild(banner);
    
    document.getElementById('giep_map_cancel_btn').addEventListener('click', stopMapSelection);
    
    const geojsonUrl = `/interventions/${interventionId}/guided-operation/giep-assets/geojson/?_t=${Date.now()}`;
    fetch(geojsonUrl)
      .then(resp => resp.json())
      .then(geojson => {
        if (!mapSelectActive) return;
        
        if (typeof map === 'undefined' || !map) {
          console.warn("Global map instance is not available.");
          showAlert("La carte interactive n'est pas chargée sur cette page.", "warning");
          stopMapSelection();
          return;
        }

        const setupMapLayers = () => {
          if (!mapSelectActive) return;

          if (map.getLayer('giep-assets-temp-layer')) map.removeLayer('giep-assets-temp-layer');
          if (map.getSource('giep-assets-temp')) map.removeSource('giep-assets-temp');
          
          map.addSource('giep-assets-temp', {
            type: 'geojson',
            data: geojson
          });
          
          map.addLayer({
            id: 'giep-assets-temp-layer',
            type: 'fill',
            source: 'giep-assets-temp',
            paint: {
              'fill-color': [
                'match', ['get', 'structure_type'],
                ['massif drainant', 'tranchee drainante', 'collecteur en beton poreux', 'empierrement sedimentation'], '#8d6e63',
                ['jardin de pluie', 'noue', 'toiture verte', 'bande filtrante', 'espace vert sur dalle'], '#009688',
                ['bassin sec/infiltration', 'bassin en eau', 'bassin orage', 'citerne', 'toiture stockante', 'SAUL-vide', 'SAUL-terre'], '#0277bd',
                '#0277bd'
              ],
              'fill-opacity': 0.6,
              'fill-outline-color': '#01579B'
            }
          });
          
          map.on('mouseenter', 'giep-assets-temp-layer', onMapMouseEnter);
          map.on('mouseleave', 'giep-assets-temp-layer', onMapMouseLeave);
          map.on('click', 'giep-assets-temp-layer', onMapLayerClick);
          
          if (!isNaN(interventionLon) && !isNaN(interventionLat)) {
            // Bounding box with 50m radius around intervention centroid
            const latOffset = 50 / 111111;
            const lonOffset = 50 / (111111 * Math.cos(interventionLat * Math.PI / 180));
            
            const sw = [interventionLon - lonOffset, interventionLat - latOffset];
            const ne = [interventionLon + lonOffset, interventionLat + latOffset];
            
            map.fitBounds([sw, ne], { padding: 50, maxZoom: 18 });
          } else if (geojson.features && geojson.features.length > 0) {
            // Fallback to bounding box of loaded features
            const bounds = new maplibregl.LngLatBounds();
            geojson.features.forEach(f => {
              if (f.geometry) {
                if (f.geometry.type === 'Point') {
                  bounds.extend(f.geometry.coordinates);
                } else if (f.geometry.type === 'Polygon') {
                  f.geometry.coordinates[0].forEach(coord => bounds.extend(coord));
                } else if (f.geometry.type === 'MultiPolygon') {
                  f.geometry.coordinates.forEach(poly => {
                    poly[0].forEach(coord => bounds.extend(coord));
                  });
                }
              }
            });
            map.fitBounds(bounds, { padding: 50, maxZoom: 18 });
          }
        };

        if (map.isStyleLoaded()) {
          setupMapLayers();
        } else {
          map.once('load', setupMapLayers);
        }
      })
      .catch(err => {
        console.error("Error fetching GIEP assets GeoJSON", err);
        showAlert("Impossible de charger les équipements GIEP sur la carte.", "danger");
        stopMapSelection();
      });
  }
  
  function onMapMouseEnter() {
    map.getCanvas().style.cursor = 'pointer';
  }
  
  function onMapMouseLeave() {
    map.getCanvas().style.cursor = '';
  }
  
  function onMapLayerClick(e) {
    if (e.preventDefault) e.preventDefault();
    if (e.originalEvent && e.originalEvent.stopPropagation) e.originalEvent.stopPropagation();

    if (!e.features || e.features.length === 0) return;
    const props = e.features[0].properties;
    
    selectGIEPAsset(props.id, props.code, props.structure_type_display || props.structure_type);
    stopMapSelection();
  }
  
  function stopMapSelection() {
    mapSelectActive = false;
    document.getElementById('giep_map_selection_banner')?.remove();
    
    if (typeof map !== 'undefined' && map) {
      try {
        if (map.getCanvas()) {
          map.getCanvas().style.cursor = '';
        }
      } catch (e) {}
      
      map.off('mouseenter', 'giep-assets-temp-layer', onMapMouseEnter);
      map.off('mouseleave', 'giep-assets-temp-layer', onMapMouseLeave);
      map.off('click', 'giep-assets-temp-layer', onMapLayerClick);
      
      if (map.isStyleLoaded()) {
        if (map.getLayer('giep-assets-temp-layer')) map.removeLayer('giep-assets-temp-layer');
        if (map.getSource('giep-assets-temp')) map.removeSource('giep-assets-temp');
      }
    }

    if (typeof window.closeMap === 'function') {
      window.closeMap();
    }
  }

  // ── Debounce and Helpers ──────────────────────────────────────────────
  function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }

  // ── Conditional and toggle triggers ──────────────────────────────────
  function selectDeviceType(type) {
    const radio = document.getElementById(`guided_type_${type}`);
    if (radio) {
      radio.checked = true;
      radio.dispatchEvent(new Event('change'));
    }
    
    document.querySelectorAll('.device-card').forEach(card => {
      const cardDevice = card.dataset.device;
      card.classList.toggle('active', cardDevice === type);
    });
    
    const sEvc = document.getElementById('guided_section_evc');
    const sOed = document.getElementById('guided_section_oed');
    const sTa  = document.getElementById('guided_section_ta');
    
    sEvc && sEvc.classList.toggle('d-none', type !== 'evc');
    sOed && sOed.classList.toggle('d-none', type !== 'oed');
    sTa  && sTa.classList.toggle('d-none', type !== 'ta');
  }

  function wireDeviceCards() {
    document.querySelectorAll('.device-card').forEach(card => {
      card.addEventListener('click', () => {
        const type = card.dataset.device;
        selectDeviceType(type);
      });
    });
  }

  function wireConditionalToggles() {
    document.querySelectorAll('.conditional-toggle').forEach(input => {
      input.addEventListener('change', () => {
        const targetId = input.dataset.target;
        if (!targetId) return;
        const target = document.getElementById(targetId);
        if (!target) return;
        
        const showVal = input.dataset.showVal;
        const groupName = input.name;
        const checkedInput = document.querySelector(`[name="${groupName}"]:checked`);
        const shouldShow = checkedInput && checkedInput.value === showVal;
        
        target.classList.toggle('show', shouldShow);
      });
    });
  }

  function wirePresenceToggles() {
    document.querySelectorAll('.guided-presence-toggle').forEach(input => {
      input.addEventListener('change', () => {
        const targetId = input.dataset.showTarget;
        if (!targetId) return;
        const target = document.getElementById(targetId);
        if (!target) return;
        
        const show = input.checked;
        target.classList.toggle('show', show);
        
        const card = input.closest('.custom-switch-card');
        if (card) {
          card.classList.toggle('active', show);
        }
      });
    });
  }

  function triggerAllConditionalVisibility() {
    const activeDeviceType = document.querySelector('[name="guided_device_type"]:checked')?.value;
    if (activeDeviceType) {
      selectDeviceType(activeDeviceType);
    }
    
    document.querySelectorAll('.btn-check:checked, input[type="radio"]:checked, input[type="checkbox"]').forEach(r => {
      r.dispatchEvent(new Event('change'));
    });
  }

  // ── Populate form from saved data ─────────────────────────────────────
  function setRadioChecked(name, val) {
    if (val === null || val === undefined) {
      const nullRadio = document.querySelector(`[name="${name}"][value="null"]`);
      if (nullRadio) nullRadio.checked = true;
      return;
    }
    const strVal = String(val);
    document.querySelectorAll(`[name="${name}"]`).forEach(r => {
      r.checked = (r.value === strVal);
    });
  }

  function setCheckboxChecked(id, val) {
    const el = document.getElementById(id);
    if (el) el.checked = !!val;
  }

  function setTextAreaValue(id, val) {
    const el = document.getElementById(id);
    if (el) el.value = val || '';
  }

  function resetFormFields() {
    document.querySelectorAll('#guidedQuestionnaireForm input[type="radio"]').forEach(r => {
      r.checked = false;
    });
    document.querySelectorAll('#guidedQuestionnaireForm input[type="checkbox"]').forEach(c => {
      c.checked = false;
    });
    document.querySelectorAll('#guidedQuestionnaireForm textarea, #guidedQuestionnaireForm input[type="text"]').forEach(t => {
      t.value = '';
    });
    document.querySelectorAll('#guidedQuestionnaireForm .nested-fields').forEach(n => {
      n.classList.remove('show');
    });
    document.querySelectorAll('#guidedQuestionnaireForm .custom-switch-card').forEach(card => {
      card.classList.remove('active');
    });
    clearGIEPAsset();
  }

  function populateForm(d) {
    if (!d || !editMode) return;

    // ── Asset linkage ──
    if (d.rwi_asset_id) {
      selectGIEPAsset(d.rwi_asset_id, d.rwi_asset_code, d.rwi_asset_name);
    } else {
      clearGIEPAsset();
    }

    // ── Device Type ──
    const deviceType = d.device_type || '';
    if (deviceType) {
      setRadioChecked('guided_device_type', deviceType);
      selectDeviceType(deviceType);
    }

    // ── EVC ──
    if (deviceType === 'evc' && d.evc) {
      const evc = d.evc;
      if (evc.point_entree) {
        const pe = evc.point_entree;
        setRadioChecked('evc_point_entree_ok', pe.ok);
        setRadioChecked('evc_pe_feuilles', pe.feuilles_branches);
        setRadioChecked('evc_pe_detritus', pe.amas_detritus);
        setRadioChecked('evc_pe_ruissellement', pe.surface_ruissellement);
        setRadioChecked('evc_pe_niveau_empierrement', pe.niveau_empierrement);
        setRadioChecked('evc_pe_autres', pe.autres_elements);
        setTextAreaValue('evc_pe_autres_precision', pe.autres_elements_precision);
        
        // Empierrement
        setCheckboxChecked('evc_pe_empierrement_present', pe.empierrement_bon_etat !== null && pe.empierrement_bon_etat !== undefined);
        setRadioChecked('evc_pe_empierrement_bon_etat', pe.empierrement_bon_etat);
        setCheckboxChecked('evc_pe_empierrement_colmate', pe.empierrement_colmate);
        setCheckboxChecked('evc_pe_empierrement_emporte', pe.empierrement_emporte);
        setCheckboxChecked('evc_pe_empierrement_envahi', pe.empierrement_envahi);
      }
      if (evc.espace_vert) {
        const ev = evc.espace_vert;
        setRadioChecked('evc_ev_vegetation_etat', ev.vegetation_etat);
        setRadioChecked('evc_ev_plantes_mortes', ev.plantes_mortes);
        setRadioChecked('evc_ev_chenaux_erosion', ev.chenaux_erosion);
        setRadioChecked('evc_ev_flaques', ev.flaques_eau);
        setRadioChecked('evc_ev_sediments', ev.sediments_presence);
        setRadioChecked('evc_ev_croute_sediments', ev.croute_sediments);
        setRadioChecked('evc_ev_detritus_presence', ev.detritus_presence);
        setRadioChecked('evc_ev_envahissantes', ev.especes_envahissantes);
        setRadioChecked('evc_ev_passage', ev.passage_usagers);
        setRadioChecked('evc_ev_usagers_type', ev.usagers_type);
      }
      if (evc.surverse) {
        const sv = evc.surverse;
        setCheckboxChecked('evc_surverse_presente', !!sv.presente);
        setRadioChecked('evc_sv_grille_propre', sv.grille_propre);
        setRadioChecked('evc_sv_decantation_vide', sv.decantation_vide);
        setRadioChecked('evc_sv_haute', sv.surverse_haute);
      }
    }

    // ── OED ──
    if (deviceType === 'oed' && d.oed) {
      const oed = d.oed;
      if (oed.etat_general) {
        const eg = oed.etat_general;
        setRadioChecked('oed_eg_ok', eg.ok);
        setRadioChecked('oed_eg_ornieres', eg.ornieres);
        setRadioChecked('oed_eg_fissures', eg.fissures);
        setRadioChecked('oed_eg_trous', eg.trous);
      }
      if (oed.bouche_injection) {
        const bi = oed.bouche_injection;
        setCheckboxChecked('oed_bi_presente', !!bi.presente);
        setRadioChecked('oed_bi_niveaux', bi.niveaux_conduisent);
        setRadioChecked('oed_bi_grille', bi.grille_propre);
        setRadioChecked('oed_bi_decantation', bi.decantation_vide);
        setRadioChecked('oed_bi_filtre_present', bi.a_filtre);
        setRadioChecked('oed_bi_filtre_propre', bi.filtre_propre);
        setRadioChecked('oed_bi_filtre_bon', bi.filtre_bon_etat);
        setRadioChecked('oed_bi_drain_colmate', bi.drain_colmate);
      }
      if (oed.revetement_herbe_mineral) {
        const rhm = oed.revetement_herbe_mineral;
        setCheckboxChecked('oed_revetement_herbe_mineral_presente', !!rhm.presente);
        setRadioChecked('oed_rhm_stagne', rhm.stagne);
        setRadioChecked('oed_rhm_stagne_plus_2h', rhm.stagne_plus_2h);
        setRadioChecked('oed_rhm_joints', rhm.joints_bon_etat);
        setRadioChecked('oed_rhm_joints_fines', rhm.fines_joints);
        setRadioChecked('oed_rhm_joints_remplissage', rhm.remplissage_haut);
      }
      if (oed.revetement_poreux) {
        const rp = oed.revetement_poreux;
        setCheckboxChecked('oed_revetement_poreux_presente', !!rp.presente);
        setRadioChecked('oed_rp_stagne', rp.stagne);
        setRadioChecked('oed_rp_stagne_plus_2h', rp.stagne_plus_2h);
        setRadioChecked('oed_rp_depots', rp.depots_visibles);
        setRadioChecked('oed_rp_test_permeabilite', rp.test_permeabilite_necessaire);
      }
      if (oed.revetement_non_agrege) {
        const rna = oed.revetement_non_agrege;
        setCheckboxChecked('oed_revetement_non_agrege_presente', !!rna.presente);
        setRadioChecked('oed_rna_stagne', rna.stagne);
        setRadioChecked('oed_rna_stagne_plus_2h', rna.stagne_plus_2h);
        setRadioChecked('oed_rna_matiere', rna.matiere_suffisante);
        setRadioChecked('oed_rna_geotextile', rna.geotextile_visible);
      }
    }

    // ── TA ──
    if (deviceType === 'ta' && d.ta) {
      const ta = d.ta;
      if (ta.point_entree) {
        const pe = ta.point_entree;
        setRadioChecked('ta_pe_ok', pe.ok);
        setRadioChecked('ta_pe_conduits_ok', pe.conduits_fonctionnels);
        setRadioChecked('ta_pe_grilles', pe.grilles_propres);
        setRadioChecked('ta_pe_feuilles', pe.feuilles_branches);
        setRadioChecked('ta_pe_detritus', pe.amas_detritus);
        setRadioChecked('ta_pe_decantation', pe.decantation_vide);
      }
      if (ta.bassin_orage) {
        const bo = ta.bassin_orage;
        setRadioChecked('ta_bo_vegetation_etat', bo.vegetation_etat);
        setRadioChecked('ta_bo_plantes_mortes', bo.plantes_mortes);
        setRadioChecked('ta_bo_chenaux', bo.chenaux_erosion);
        setRadioChecked('ta_bo_flaques', bo.flaques_eau);
        setRadioChecked('ta_bo_sediments', bo.sediments_presence);
        setRadioChecked('ta_bo_rempli_cinquieme', bo.rempli_cinquieme);
        setRadioChecked('ta_bo_detritus', bo.detritus_presence);
        setRadioChecked('ta_bo_envahissantes', bo.especes_envahissantes);
      }
    }

    // ── Actions ──
    if (d.actions) {
      const act = d.actions;
      setCheckboxChecked('act_aucune', act.aucune);
      setCheckboxChecked('act_preventif', act.renforcement_preventif);
      setCheckboxChecked('act_curatif', act.entretien_curatif);
      setCheckboxChecked('act_permeabilite', act.test_permeabilite);
      setCheckboxChecked('act_camera', act.inspection_camera);
      setTextAreaValue('act_precision', act.actions_precision);
    }

    // ── Observations ──
    setTextAreaValue('guided_observations', d.observations);

    // ── Triggers and Media ──
    triggerAllConditionalVisibility();
    loadExistingMedia(d.local_id);
  }

  function loadExistingMedia(localId) {
    document.querySelectorAll('.guided-media-zone').forEach(z => { z.innerHTML = ''; });
    existingMedia.forEach(media => {
      let match = false;
      let baseKey = media.field_key;
      
      if (localId === "0") {
        if (media.field_key.startsWith("ouv_")) {
          match = false;
        } else {
          match = true;
          baseKey = media.field_key;
        }
      } else {
        if (media.field_key.startsWith(localId + "_")) {
          match = true;
          baseKey = media.field_key.substring(localId.length + 1);
        }
      }
      
      if (match) {
        insertMediaThumb(media, baseKey);
      }
    });
  }

  // ── Collect form → JSON ───────────────────────────────────────────────
  function getRadioValue(name) {
    const r = document.querySelector(`[name="${name}"]:checked`);
    if (!r) return null;
    if (r.value === 'true')  return true;
    if (r.value === 'false') return false;
    if (r.value === 'null')  return null;
    return r.value;
  }
  
  function getCheckboxValue(id) {
    const el = document.getElementById(id);
    return el ? el.checked : false;
  }
  
  function getTextAreaValue(id) {
    const el = document.getElementById(id);
    return el ? el.value.trim() : '';
  }

  function collectData() {
    const deviceType = getRadioValue('guided_device_type');
    const data = { 
      device_type: deviceType,
      actions: {
        aucune:                 getCheckboxValue('act_aucune'),
        renforcement_preventif: getCheckboxValue('act_preventif'),
        entretien_curatif:      getCheckboxValue('act_curatif'),
        test_permeabilite:      getCheckboxValue('act_permeabilite'),
        inspection_camera:      getCheckboxValue('act_camera'),
        actions_precision:      getTextAreaValue('act_precision')
      },
      observations: getTextAreaValue('guided_observations')
    };

    if (selectedAsset) {
      data.rwi_asset_id = selectedAsset.id;
      data.rwi_asset_code = selectedAsset.code;
      data.rwi_asset_name = selectedAsset.name;
    } else {
      data.rwi_asset_id = null;
      data.rwi_asset_code = null;
      data.rwi_asset_name = null;
    }

    if (deviceType === 'evc') {
      const empierrementPresent = getCheckboxValue('evc_pe_empierrement_present');
      data.evc = {
        point_entree: {
          ok:                        getRadioValue('evc_point_entree_ok'),
          feuilles_branches:         getRadioValue('evc_pe_feuilles'),
          amas_detritus:             getRadioValue('evc_pe_detritus'),
          surface_ruissellement:     getRadioValue('evc_pe_ruissellement'),
          niveau_empierrement:       getRadioValue('evc_pe_niveau_empierrement'),
          autres_elements:           getRadioValue('evc_pe_autres'),
          autres_elements_precision: getTextAreaValue('evc_pe_autres_precision'),
          
          empierrement_bon_etat:     empierrementPresent ? getRadioValue('evc_pe_empierrement_bon_etat') : null,
          empierrement_colmate:      empierrementPresent ? getCheckboxValue('evc_pe_empierrement_colmate') : false,
          empierrement_emporte:      empierrementPresent ? getCheckboxValue('evc_pe_empierrement_emporte') : false,
          empierrement_envahi:       empierrementPresent ? getCheckboxValue('evc_pe_empierrement_envahi') : false
        },
        espace_vert: {
          vegetation_etat:           getRadioValue('evc_ev_vegetation_etat'),
          plantes_mortes:            getRadioValue('evc_ev_plantes_mortes'),
          chenaux_erosion:           getRadioValue('evc_ev_chenaux_erosion'),
          flaques_eau:               getRadioValue('evc_ev_flaques'),
          sediments_presence:        getRadioValue('evc_ev_sediments'),
          croute_sediments:          getRadioValue('evc_ev_croute_sediments'),
          detritus_presence:         getRadioValue('evc_ev_detritus_presence'),
          especes_envahissantes:     getRadioValue('evc_ev_envahissantes'),
          passage_usagers:           getRadioValue('evc_ev_passage'),
          usagers_type:              getRadioValue('evc_ev_usagers_type')
        },
        surverse: {
          presente:                  getCheckboxValue('evc_surverse_presente'),
          grille_propre:             getRadioValue('evc_sv_grille_propre'),
          decantation_vide:          getRadioValue('evc_sv_decantation_vide'),
          surverse_haute:            getRadioValue('evc_sv_haute')
        }
      };
    } else if (deviceType === 'oed') {
      const biPresent = getCheckboxValue('oed_bi_presente');
      const rhmPresent = getCheckboxValue('oed_revetement_herbe_mineral_presente');
      const rpPresent = getCheckboxValue('oed_revetement_poreux_presente');
      const rnaPresent = getCheckboxValue('oed_revetement_non_agrege_presente');
      
      data.oed = {
        etat_general: {
          ok:                        getRadioValue('oed_eg_ok'),
          ornieres:                  getRadioValue('oed_eg_ornieres'),
          fissures:                  getRadioValue('oed_eg_fissures'),
          trous:                     getRadioValue('oed_eg_trous')
        },
        bouche_injection: {
          presente:                  biPresent,
          niveaux_conduisent:        biPresent ? getRadioValue('oed_bi_niveaux') : null,
          grille_propre:             biPresent ? getRadioValue('oed_bi_grille') : null,
          decantation_vide:          biPresent ? getRadioValue('oed_bi_decantation') : null,
          a_filtre:                  biPresent ? getRadioValue('oed_bi_filtre_present') : null,
          filtre_propre:             biPresent ? getRadioValue('oed_bi_filtre_propre') : null,
          filtre_bon_etat:           biPresent ? getRadioValue('oed_bi_filtre_bon') : null,
          drain_colmate:             biPresent ? getRadioValue('oed_bi_drain_colmate') : null
        },
        revetement_herbe_mineral: {
          presente:                  rhmPresent,
          stagne:                    rhmPresent ? getRadioValue('oed_rhm_stagne') : null,
          stagne_plus_2h:            rhmPresent ? getRadioValue('oed_rhm_stagne_plus_2h') : null,
          joints_bon_etat:           rhmPresent ? getRadioValue('oed_rhm_joints') : null,
          fines_joints:              rhmPresent ? getRadioValue('oed_rhm_joints_fines') : null,
          remplissage_haut:          rhmPresent ? getRadioValue('oed_rhm_joints_remplissage') : null
        },
        revetement_poreux: {
          presente:                  rpPresent,
          stagne:                    rpPresent ? getRadioValue('oed_rp_stagne') : null,
          stagne_plus_2h:            rpPresent ? getRadioValue('oed_rp_stagne_plus_2h') : null,
          depots_visibles:           rpPresent ? getRadioValue('oed_rp_depots') : null,
          test_permeabilite_necessaire: rpPresent ? getRadioValue('oed_rp_test_permeabilite') : null
        },
        revetement_non_agrege: {
          presente:                  rnaPresent,
          stagne:                    rnaPresent ? getRadioValue('oed_rna_stagne') : null,
          stagne_plus_2h:            rnaPresent ? getRadioValue('oed_rna_stagne_plus_2h') : null,
          matiere_suffisante:        rnaPresent ? getRadioValue('oed_rna_matiere') : null,
          geotextile_visible:        rnaPresent ? getCheckboxValue('oed_rna_geotextile') : null
        }
      };
    } else if (deviceType === 'ta') {
      data.ta = {
        point_entree: {
          ok:                        getRadioValue('ta_pe_ok'),
          conduits_fonctionnels:     getRadioValue('ta_pe_conduits_ok'),
          grilles_propres:           getRadioValue('ta_pe_grilles'),
          feuilles_branches:         getRadioValue('ta_pe_feuilles'),
          amas_detritus:             getRadioValue('ta_pe_detritus'),
          decantation_vide:          getRadioValue('ta_pe_decantation')
        },
        bassin_orage: {
          vegetation_etat:           getRadioValue('ta_bo_vegetation_etat'),
          plantes_mortes:            getRadioValue('ta_bo_plantes_mortes'),
          chenaux_erosion:           getRadioValue('ta_bo_chenaux'),
          flaques_eau:               getRadioValue('ta_bo_flaques'),
          sediments_presence:        getRadioValue('ta_bo_sediments'),
          rempli_cinquieme:          getRadioValue('ta_bo_rempli_cinquieme'),
          detritus_presence:         getRadioValue('ta_bo_detritus'),
          especes_envahissantes:     getRadioValue('ta_bo_envahissantes')
        }
      };
    }
    return data;
  }

  // ── Alert helpers ─────────────────────────────────────────────────────
  function showAlert(msg, type) {
    if (!alertContainer) return;
    alertContainer.innerHTML = `<div class="alert alert-${type} alert-dismissible py-2" role="alert">
      ${msg}
      <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
    </div>`;
  }

  // ── Read mode renderer ────────────────────────────────────────────────
  function escHtml(s) {
    if (!s) return '';
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  function localMediaZone(localId, baseFieldKey, media) {
    const items = (media || []).filter(m => {
      if (localId === "0") {
        return m.field_key === baseFieldKey;
      } else {
        return m.field_key === `${localId}_${baseFieldKey}`;
      }
    });
    if (!items.length) return '';
    const thumbs = items.map(m => {
      if (m.media_type === 'photo') {
        return '<a href="' + escHtml(m.file_url) + '" target="_blank">'
          + '<img src="' + escHtml(m.file_url) + '" alt="' + escHtml(m.description) + '"'
          + ' class="img-thumbnail" style="width:56px;height:56px;object-fit:cover;"></a>';
      }
      return '<a href="' + escHtml(m.file_url) + '" target="_blank" class="btn btn-outline-secondary btn-sm">'
        + '<i class="bi bi-file-earmark me-1"></i>' + escHtml(m.description || 'Document') + '</a>';
    }).join('');
    return '<div class="d-flex flex-wrap gap-2 mt-2">' + thumbs + '</div>';
  }

  function badgeVal(val, labelOui, labelNon, labelNonVerifie) {
    if (val === true)  return '<span class="badge bg-success-subtle text-success border border-success-subtle"><i class="bi bi-check-circle-fill me-1"></i>' + (labelOui || "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}") + '</span>';
    if (val === false) return '<span class="badge bg-danger-subtle text-danger border border-danger-subtle"><i class="bi bi-x-circle-fill me-1"></i>' + (labelNon || "{% filter escapejs %}{% translate "Non" %}{% endfilter %}") + '</span>';
    return '<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle"><i class="bi bi-question-circle me-1"></i>' + (labelNonVerifie || "{% filter escapejs %}{% translate "Non vérifié" %}{% endfilter %}") + '</span>';
  }

  function badgePresence(presente) {
    if (presente === true)  return '<span class="badge bg-success">' + "{% filter escapejs %}{% translate "Présent" %}{% endfilter %}" + '</span>';
    if (presente === false) return '<span class="badge bg-secondary">' + "{% filter escapejs %}{% translate "Absent" %}{% endfilter %}" + '</span>';
    return '<span class="badge bg-light text-muted">' + "{% filter escapejs %}{% translate "Non renseigné" %}{% endfilter %}" + '</span>';
  }

  function badgePlantesMortes(val) {
    if (val === 'plus_10') {
      return '<span class="badge bg-danger-subtle text-danger border border-danger-subtle"><i class="bi bi-x-circle-fill me-1"></i>' + "{% filter escapejs %}{% translate "Sur + de 10% de surface" %}{% endfilter %}" + '</span>';
    }
    if (val === 'moins_10') {
      return '<span class="badge bg-warning-subtle text-warning border border-warning-subtle"><i class="bi bi-exclamation-circle-fill me-1"></i>' + "{% filter escapejs %}{% translate "Sur - de 10% de surface" %}{% endfilter %}" + '</span>';
    }
    return '<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle"><i class="bi bi-question-circle me-1"></i>' + "{% filter escapejs %}{% translate "Non vérifié" %}{% endfilter %}" + '</span>';
  }

  function subQuestionHtml(label, val, yesText, noText, nullText) {
    return '<div class="d-flex justify-content-between align-items-center border-bottom border-light py-1 ps-3">'
      + '<span class="small text-muted">' + escHtml(label) + '</span>'
      + '<div>' + badgeVal(val, yesText, noText, nullText) + '</div>'
      + '</div>';
  }

  function buildOuvrageDetailPreviewHtml(ouv, media) {
    let cols = '';

    // ── EVC ──
    if (ouv.device_type === 'evc' && ouv.evc) {
      const evc = ouv.evc;
      const pe  = evc.point_entree || {};
      
      // Points d'entrée EVC
      let peHtml = '<div class="mb-3 d-flex justify-content-between align-items-center"><strong>' 
        + "{% filter escapejs %}{% translate "L'eau peut facilement entrer ?" %}{% endfilter %}" + '</strong>' + badgeVal(pe.ok) + '</div>';
      if (pe.ok === false) {
        peHtml += '<div class="border rounded p-2 bg-light mb-3">';
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "Des feuilles ou branches bloquent l'eau ?" %}{% endfilter %}", pe.feuilles_branches, "{% filter escapejs %}{% translate "Oui (bloquant)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "Un amas de détritus bloque l'eau ?" %}{% endfilter %}", pe.amas_detritus, "{% filter escapejs %}{% translate "Oui (bloquant)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "La surface de ruissellement amène l'eau ?" %}{% endfilter %}", pe.surface_ruissellement);
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "Empierrement inférieur/égal au ruissellement ?" %}{% endfilter %}", pe.niveau_empierrement);
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "D'autres éléments gênent l'entrée d'eau ?" %}{% endfilter %}", pe.autres_elements);
        if (pe.autres_elements && pe.autres_elements_precision) {
          peHtml += '<div class="p-2 bg-white small text-muted fst-italic border-top"><strong>' + "{% filter escapejs %}{% translate "Détails :" %}{% endfilter %}" + '</strong> ' + escHtml(pe.autres_elements_precision) + '</div>';
        }
        peHtml += '</div>';
      }
      
      // Empierrement EVC
      const hasEmpierrement = pe.empierrement_bon_etat !== null && pe.empierrement_bon_etat !== undefined;
      peHtml += '<div class="border-top pt-2 mt-2">';
      peHtml += '<div class="d-flex justify-content-between align-items-center mb-1"><span>' + "{% filter escapejs %}{% translate "Empierrement de sédimentation :" %}{% endfilter %}" + '</span>' + badgePresence(hasEmpierrement) + '</div>';
      if (hasEmpierrement) {
        peHtml += '<div class="d-flex justify-content-between align-items-center mb-2"><span>' + "{% filter escapejs %}{% translate "Empierrement en bon état ?" %}{% endfilter %}" + '</span>' + badgeVal(pe.empierrement_bon_etat) + '</div>';
        if (pe.empierrement_bon_etat === false) {
          peHtml += '<div class="ps-3 small text-danger"><i class="bi bi-exclamation-triangle-fill me-1"></i>';
          const defects = [];
          if (pe.empierrement_colmate) defects.push("{% filter escapejs %}{% translate "Colmaté par les sédiments" %}{% endfilter %}");
          if (pe.empierrement_emporte) defects.push("{% filter escapejs %}{% translate "Emporté par l'eau" %}{% endfilter %}");
          if (pe.empierrement_envahi)  defects.push("{% filter escapejs %}{% translate "Envahi d'adventices" %}{% endfilter %}");
          peHtml += defects.join(', ') || "{% filter escapejs %}{% translate "Aucun détail renseigné" %}{% endfilter %}";
          peHtml += '</div>';
        }
      }
      peHtml += '</div>';

      cols += '<div class="col-12"><div class="border rounded p-3 border-success-subtle">'
        + '<p class="fw-bold mb-3 text-success text-uppercase small border-bottom pb-1"><i class="bi bi-box-arrow-in-right me-1"></i>' + "{% filter escapejs %}{% translate "Points d'entrée" %}{% endfilter %}" + '</p>'
        + peHtml + localMediaZone(ouv.local_id, 'evc_point_entree', media) + '</div></div>';

      // Espace vert EVC
      const ev = ouv.espace_vert || (evc.espace_vert || {});
      let evHtml = '<div class="mb-3 d-flex justify-content-between align-items-center"><strong>' 
        + '{% translate "État de la végétation" %}</strong>' + badgeVal(ev.vegetation_etat === 'bon', "{% filter escapejs %}{% translate "Bon" %}{% endfilter %}", "{% filter escapejs %}{% translate "Mauvais" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non renseigné" %}{% endfilter %}") + '</div>';
      if (ev.vegetation_etat === 'mauvais') {
        evHtml += '<div class="d-flex justify-content-between align-items-center border-bottom border-light py-1 ps-3">'
          + '<span class="small text-muted">' + "{% filter escapejs %}{% translate "Plantes mortes ou absentes" %}{% endfilter %}" + '</span>'
          + '<div>' + badgePlantesMortes(ev.plantes_mortes) + '</div>'
          + '</div>';
      }
      evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Chenaux d'érosion" %}{% endfilter %}", ev.chenaux_erosion, "{% filter escapejs %}{% translate "Présents" %}{% endfilter %}", "{% filter escapejs %}{% translate "Absents" %}{% endfilter %}");
      evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Flaques d'eau" %}{% endfilter %}", ev.flaques_eau, "{% filter escapejs %}{% translate "Présents" %}{% endfilter %}", "{% filter escapejs %}{% translate "Absents" %}{% endfilter %}");
      evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence de sédiments" %}{% endfilter %}", ev.sediments_presence, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
      if (ev.sediments_presence === true) {
        evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Croûte de sédimentation > 5 cm" %}{% endfilter %}", ev.croute_sediments);
      }
      evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence de détritus" %}{% endfilter %}", ev.detritus_presence, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
      evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Espèces exotiques envahissantes" %}{% endfilter %}", ev.especes_envahissantes, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
      evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Traces de passage d'usagers" %}{% endfilter %}", ev.passage_usagers, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
      if (ev.passage_usagers === true) {
        evHtml += subQuestionHtml("{% filter escapejs %}{% translate "Type d'usagers" %}{% endfilter %}", ev.usagers_type === 'vehicule' ? true : (ev.usagers_type === 'pietons' ? false : null), "{% filter escapejs %}{% translate "Véhicules" %}{% endfilter %}", "{% filter escapejs %}{% translate "Piétons" %}{% endfilter %}");
      }

      cols += '<div class="col-12"><div class="border rounded p-3 border-success-subtle">'
        + '<p class="fw-bold mb-3 text-success text-uppercase small border-bottom pb-1"><i class="bi bi-flower1 me-1"></i>' + "{% filter escapejs %}{% translate "Espace vert & Végétation" %}{% endfilter %}" + '</p>'
        + evHtml + localMediaZone(ouv.local_id, 'evc_espace_vert', media) + '</div></div>';

      // Surverse EVC
      const sv = evc.surverse || {};
      let svHtml = '';
      if (sv.presente === true) {
        svHtml += '<div class="badge bg-success mb-3"><i class="bi bi-check-circle me-1"></i>' + "{% filter escapejs %}{% translate "Surverse présente" %}{% endfilter %}" + '</div>';
        svHtml += subQuestionHtml("{% filter escapejs %}{% translate "Grille de surverse propre & dégagée" %}{% endfilter %}", sv.grille_propre);
        svHtml += subQuestionHtml("{% filter escapejs %}{% translate "Décantation vide ou peu remplie" %}{% endfilter %}", sv.decantation_vide);
        svHtml += subQuestionHtml("{% filter escapejs %}{% translate "Surverse surélevée par rapport au fond" %}{% endfilter %}", sv.surverse_haute);
      } else {
        svHtml += '<div class="badge bg-secondary mb-3"><i class="bi bi-x-circle me-1"></i>' + "{% filter escapejs %}{% translate "Pas de surverse" %}{% endfilter %}" + '</div>';
      }
      cols += '<div class="col-12"><div class="border rounded p-3 border-success-subtle">'
        + '<p class="fw-bold mb-2 text-success text-uppercase small border-bottom pb-1"><i class="bi bi-water me-1"></i>' + "{% filter escapejs %}{% translate "Surverse" %}{% endfilter %}" + '</p>'
        + svHtml + localMediaZone(ouv.local_id, 'evc_surverse', media) + '</div></div>';
    }

    // ── OED ──
    if (ouv.device_type === 'oed' && ouv.oed) {
      const oed = ouv.oed;
      
      // Etat général chaussée OED
      const eg = oed.etat_general || {};
      let egHtml = '<div class="mb-3 d-flex justify-content-between align-items-center"><strong>' 
        + '{% translate "Revêtement en bon état ?" %}</strong>' + badgeVal(eg.ok, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}") + '</div>';
      if (eg.ok === false) {
        egHtml += '<div class="border rounded p-2 bg-light">';
        egHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence d'ornières" %}{% endfilter %}", eg.ornieres, "{% filter escapejs %}{% translate "Oui (défaut)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        egHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence de fissures" %}{% endfilter %}", eg.fissures, "{% filter escapejs %}{% translate "Oui (défaut)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        egHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence de trous" %}{% endfilter %}", eg.trous, "{% filter escapejs %}{% translate "Oui (défaut)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        egHtml += '</div>';
      }
      cols += '<div class="col-12 col-md-6"><div class="border rounded p-3 h-100 border-info-subtle">'
        + '<p class="fw-bold mb-3 text-info text-uppercase small border-bottom pb-1"><i class="bi bi-road-perspective me-1"></i>' + "{% filter escapejs %}{% translate "État du revêtement" %}{% endfilter %}" + '</p>'
        + egHtml + localMediaZone(ouv.local_id, 'oed_etat_general', media) + '</div></div>';

      // Bouche d'injection OED
      const bi = oed.bouche_injection || {};
      let biHtml = '';
      if (bi.presente === true) {
        biHtml += '<div class="badge bg-success mb-3"><i class="bi bi-check-circle me-1"></i>' + "{% filter escapejs %}{% translate "Bouche d'injection présente" %}{% endfilter %}" + '</div>';
        biHtml += subQuestionHtml("{% filter escapejs %}{% translate "Les niveaux conduisent bien l'eau" %}{% endfilter %}", bi.niveaux_conduisent);
        biHtml += subQuestionHtml("{% filter escapejs %}{% translate "Grille propre et dégagée" %}{% endfilter %}", bi.grille_propre);
        biHtml += subQuestionHtml("{% filter escapejs %}{% translate "Décantation vide ou presque" %}{% endfilter %}", bi.decantation_vide);
        
        biHtml += '<div class="border-top pt-2 mt-2">';
        biHtml += '<div class="d-flex justify-content-between align-items-center mb-2"><span>' + "{% filter escapejs %}{% translate "Dispose d'un filtre ?" %}{% endfilter %}" + '</span>' + badgeVal(bi.a_filtre) + '</div>';
        if (bi.a_filtre === true) {
          biHtml += '<div class="border rounded p-2 bg-light mb-2">';
          biHtml += subQuestionHtml("{% filter escapejs %}{% translate "Filtre propre ?" %}{% endfilter %}", bi.filter_propre || bi.filtre_propre);
          biHtml += subQuestionHtml("{% filter escapejs %}{% translate "Filtre en bon état ?" %}{% endfilter %}", bi.filtre_bon_etat);
          biHtml += '</div>';
        }
        biHtml += '</div>';
        
        biHtml += subQuestionHtml("{% filter escapejs %}{% translate "Le drain semble colmaté ?" %}{% endfilter %}", bi.drain_colmate, "{% filter escapejs %}{% translate "Oui (colmaté)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
      } else {
        biHtml += '<div class="badge bg-secondary mb-3"><i class="bi bi-x-circle me-1"></i>' + "{% filter escapejs %}{% translate "Bouche d'injection absente" %}{% endfilter %}" + '</div>';
      }
      cols += '<div class="col-12 col-md-6"><div class="border rounded p-3 h-100 border-info-subtle">'
        + '<p class="fw-bold mb-3 text-info text-uppercase small border-bottom pb-1"><i class="bi bi-funnel me-1"></i>' + "{% filter escapejs %}{% translate "Bouche d'injection & Drainage" %}{% endfilter %}" + '</p>'
        + biHtml + localMediaZone(ouv.local_id, 'oed_bouche_injection', media) + '</div></div>';

      // Revêtement OED
      let revHtml = '';
      
      // Section Structure enherbée/minérale
      const rhm = oed.revetement_herbe_mineral || {};
      if (rhm.presente) {
        revHtml += '<div class="border rounded p-3 mb-3 border-info">';
        revHtml += '<p class="fw-bold text-info small mb-2 text-uppercase"><i class="bi bi-grid me-1"></i>' + "{% filter escapejs %}{% translate "Structure enherbée ou remplissage minéral" %}{% endfilter %}" + '</p>';
        revHtml += subQuestionHtml("{% filter escapejs %}{% translate "De l'eau stagne en surface ?" %}{% endfilter %}", rhm.stagne, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        if (rhm.stagne === true) {
          revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Stagnation de plus de 2 heures ?" %}{% endfilter %}", rhm.stagne_plus_2h);
        }
        revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Les joints sont en bon état ?" %}{% endfilter %}", rhm.joints_bon_etat);
        if (rhm.joints_bon_etat === false) {
          revHtml += '<div class="border rounded p-2 bg-light mb-2">';
          revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence importante de fines" %}{% endfilter %}", rhm.fines_joints);
          revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Matériau plus haut que la structure" %}{% endfilter %}", rhm.remplissage_haut);
          revHtml += '</div>';
        }
        revHtml += '</div>';
      }

      // Section Modulaire/Continu poreux
      const rp = oed.revetement_poreux || {};
      if (rp.presente) {
        revHtml += '<div class="border rounded p-3 mb-3 border-info">';
        revHtml += '<p class="fw-bold text-info small mb-2 text-uppercase"><i class="bi bi-grid-1x2 me-1"></i>' + "{% filter escapejs %}{% translate "Revêtement modulaire ou continu poreux" %}{% endfilter %}" + '</p>';
        revHtml += subQuestionHtml("{% filter escapejs %}{% translate "De l'eau stagne en surface ?" %}{% endfilter %}", rp.stagne, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        if (rp.stagne === true) {
          revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Stagnation de plus de 2 heures ?" %}{% endfilter %}", rp.stagne_plus_2h);
        }
        revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence de dépôts visibles" %}{% endfilter %}", rp.depots_visibles);
        if (rp.depots_visibles === true) {
          revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Test de perméabilité requis ?" %}{% endfilter %}", rp.test_permeabilite_necessaire);
        }
        revHtml += '</div>';
      }

      // Section Matériaux non agrégés
      const rna = oed.revetement_non_agrege || {};
      if (rna.presente) {
        revHtml += '<div class="border rounded p-3 mb-3 border-info">';
        revHtml += '<p class="fw-bold text-info small mb-2 text-uppercase"><i class="bi bi-hash me-1"></i>' + "{% filter escapejs %}{% translate "Matériaux non agrégés (graviers/mulch)" %}{% endfilter %}" + '</p>';
        revHtml += subQuestionHtml("{% filter escapejs %}{% translate "De l'eau stagne en surface ?" %}{% endfilter %}", rna.stagne, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        if (rna.stagne === true) {
          revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Stagnation de plus de 2 heures ?" %}{% endfilter %}", rna.stagne_plus_2h);
        }
        revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Volume de matière suffisant ?" %}{% endfilter %}", rna.matiere_suffisante);
        if (rna.matiere_suffisante === false) {
          revHtml += subQuestionHtml("{% filter escapejs %}{% translate "Géotextile visible ?" %}{% endfilter %}", rna.geotextile_visible);
        }
        revHtml += '</div>';
      }

      if (!revHtml) {
        revHtml = '<p class="text-muted fst-italic small">' + "{% filter escapejs %}{% translate "Aucune structure de revêtement spécifique renseignée." %}{% endfilter %}" + '</p>';
      }

      cols += '<div class="col-12"><div class="border rounded p-3 border-info-subtle">'
        + '<p class="fw-bold mb-3 text-info text-uppercase small border-bottom pb-1"><i class="bi bi-border-style me-1"></i>' + "{% filter escapejs %}{% translate "Spécificités du revêtement" %}{% endfilter %}" + '</p>'
        + revHtml + '</div></div>';
    }

    // ── TA ──
    if (ouv.device_type === 'ta' && ouv.ta) {
      const ta = ouv.ta;
      
      // Points d'entrée TA
      const pe = ta.point_entree || {};
      let peHtml = '<div class="mb-3 d-flex justify-content-between align-items-center"><strong>' 
        + "{% filter escapejs %}{% translate "L'eau peut facilement entrer ?" %}{% endfilter %}" + '</strong>' + badgeVal(pe.ok) + '</div>';
      
      peHtml += '<div class="border-top pt-2 mt-2">';
      peHtml += '<div class="d-flex justify-content-between align-items-center mb-2"><span>' + "{% filter escapejs %}{% translate "Conduits et dispositifs fonctionnels ?" %}{% endfilter %}" + '</span>' + badgeVal(pe.conduits_fonctionnels) + '</div>';
      if (pe.conduits_fonctionnels === false) {
        peHtml += '<div class="border rounded p-2 bg-light mb-2">';
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "Les grilles sont propres & dégagées" %}{% endfilter %}", pe.grilles_propres);
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "Des feuilles/branches bloquent ?" %}{% endfilter %}", pe.feuilles_branches, "{% filter escapejs %}{% translate "Oui (bloquant)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        peHtml += subQuestionHtml("{% filter escapejs %}{% translate "Un amas de détritus bloque ?" %}{% endfilter %}", pe.amas_detritus, "{% filter escapejs %}{% translate "Oui (bloquant)" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
        peHtml += '</div>';
      }
      peHtml += '</div>';
      
      peHtml += subQuestionHtml("{% filter escapejs %}{% translate "La décantation est vide ou presque" %}{% endfilter %}", pe.decantation_vide);

      cols += '<div class="col-12 col-md-6"><div class="border rounded p-3 h-100" style="border-color:#b2dfdb;">'
        + '<p class="fw-bold mb-3 text-teal text-uppercase small border-bottom pb-1" style="color:#00796b;"><i class="bi bi-box-arrow-in-right me-1"></i>' + "{% filter escapejs %}{% translate "Points d'entrée" %}{% endfilter %}" + '</p>'
        + peHtml + localMediaZone(ouv.local_id, 'ta_point_entree', media) + '</div></div>';

      // Bassin d'orage TA
      const bo = ta.bassin_orage || {};
      let boHtml = '<div class="mb-3 d-flex justify-content-between align-items-center"><strong>' 
        + '{% translate "État de la végétation" %}</strong>' + badgeVal(bo.vegetation_etat === 'bon', "{% filter escapejs %}{% translate "Bon" %}{% endfilter %}", "{% filter escapejs %}{% translate "Mauvais" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non renseigné" %}{% endfilter %}") + '</div>';
      if (bo.vegetation_etat === 'mauvais') {
        boHtml += '<div class="d-flex justify-content-between align-items-center border-bottom border-light py-1 ps-3">'
          + '<span class="small text-muted">' + "{% filter escapejs %}{% translate "Plantes mortes ou absentes" %}{% endfilter %}" + '</span>'
          + '<div>' + badgePlantesMortes(bo.plantes_mortes) + '</div>'
          + '</div>';
      }
      boHtml += subQuestionHtml("{% filter escapejs %}{% translate "Chenaux d'érosion" %}{% endfilter %}", bo.chenaux_erosion, "{% filter escapejs %}{% translate "Présents" %}{% endfilter %}", "{% filter escapejs %}{% translate "Absents" %}{% endfilter %}");
      boHtml += subQuestionHtml("{% filter escapejs %}{% translate "Flaques d'eau" %}{% endfilter %}", bo.flaques_eau, "{% filter escapejs %}{% translate "Présentes" %}{% endfilter %}", "{% filter escapejs %}{% translate "Absentes" %}{% endfilter %}");
      boHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence de sédiments" %}{% endfilter %}", bo.sediments_presence, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
      if (bo.sediments_presence === true) {
        boHtml += subQuestionHtml("{% filter escapejs %}{% translate "Rempli au 5e de sa capacité" %}{% endfilter %}", bo.rempli_cinquieme);
      }
      boHtml += subQuestionHtml("{% filter escapejs %}{% translate "Présence de détritus" %}{% endfilter %}", bo.detritus_presence, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");
      boHtml += subQuestionHtml("{% filter escapejs %}{% translate "Espèces exotiques envahissantes" %}{% endfilter %}", bo.especes_envahissantes, "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}", "{% filter escapejs %}{% translate "Non" %}{% endfilter %}");

      cols += '<div class="col-12 col-md-6"><div class="border rounded p-3 h-100" style="border-color:#b2dfdb;">'
        + '<p class="fw-bold mb-3 text-teal text-uppercase small border-bottom pb-1" style="color:#00796b;"><i class="bi bi-cloud-snow me-1"></i>' + "{% filter escapejs %}{% translate "Bassin d'orage" %}{% endfilter %}" + '</p>'
        + boHtml + localMediaZone(ouv.local_id, 'ta_bassin_orage', media) + '</div></div>';
    }

    // ── Actions recommandées (Général) ──
    if (ouv.actions) {
      const act = ouv.actions;
      let actHtml = '';
      if (act.aucune) {
        actHtml += '<span class="badge bg-success-subtle text-success border border-success-subtle me-2 mb-2 p-2"><i class="bi bi-check-circle-fill me-1"></i>' + "{% filter escapejs %}{% translate "Aucune action nécessaire" %}{% endfilter %}" + '</span>';
      }
      if (act.renforcement_preventif) {
        actHtml += '<span class="badge bg-warning-subtle text-warning border border-warning-subtle me-2 mb-2 p-2"><i class="bi bi-clock-history me-1"></i>' + "{% filter escapejs %}{% translate "Renforcer l'entretien préventif" %}{% endfilter %}" + '</span>';
      }
      if (act.entretien_curatif) {
        actHtml += '<span class="badge bg-danger-subtle text-danger border border-danger-subtle me-2 mb-2 p-2"><i class="bi bi-exclamation-triangle-fill me-1"></i>' + "{% filter escapejs %}{% translate "Entretien curatif / Réparation requis" %}{% endfilter %}" + '</span>';
      }
      if (act.test_permeabilite) {
        actHtml += '<span class="badge bg-info-subtle text-info border border-info-subtle me-2 mb-2 p-2"><i class="bi bi-speedometer2 me-1"></i>' + "{% filter escapejs %}{% translate "Faire un test de perméabilité" %}{% endfilter %}" + '</span>';
      }
      if (act.inspection_camera) {
        actHtml += '<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle me-2 mb-2 p-2"><i class="bi bi-camera-video-fill me-1"></i>' + "{% filter escapejs %}{% translate "Faire une inspection caméra" %}{% endfilter %}" + '</span>';
      }
      
      if (!actHtml) {
        actHtml = '<p class="text-muted fst-italic small">' + "{% filter escapejs %}{% translate "Aucune action recommandée n'a été cochée." %}{% endfilter %}" + '</p>';
      } else if (act.actions_precision) {
        actHtml += '<div class="mt-3 p-3 rounded bg-light border-start border-3 border-warning small"><strong>' + "{% filter escapejs %}{% translate "Précisions :" %}{% endfilter %}" + '</strong><p class="mb-0 text-muted mt-1">' + escHtml(act.actions_precision) + '</p></div>';
      }
      
      cols += '<div class="col-12"><div class="border rounded p-3 border-secondary-subtle">'
        + '<p class="fw-bold mb-3 text-muted text-uppercase small border-bottom pb-1"><i class="bi bi-bookmark-star me-1"></i>' + "{% filter escapejs %}{% translate "Actions recommandées" %}{% endfilter %}" + '</p>'
        + actHtml + '</div></div>';
    }

    // ── Observations (Général) ──
    if (ouv.observations) {
      cols += '<div class="col-12"><div class="border rounded p-3 border-secondary-subtle">'
        + '<p class="fw-bold mb-2 text-muted text-uppercase small border-bottom pb-1"><i class="bi bi-chat-left-text me-1"></i>' + "{% filter escapejs %}{% translate "Remarques et observations" %}{% endfilter %}" + '</p>'
        + '<p class="mb-0 small text-muted font-monospace">' + escHtml(ouv.observations) + '</p></div></div>';
    }

    // ── Médias généraux ──
    const genMedia = (media || []).filter(m => {
      if (ouv.local_id === "0") {
        return m.field_key === "";
      } else {
        return m.field_key === `${ouv.local_id}_`;
      }
    });
    if (genMedia.length) {
      const thumbs = genMedia.map(m => {
        if (m.media_type === 'photo') {
          return '<a href="' + escHtml(m.file_url) + '" target="_blank">'
            + '<img src="' + escHtml(m.file_url) + '" alt="' + escHtml(m.description) + '"'
            + ' class="img-thumbnail" style="width:56px;height:56px;object-fit:cover;"></a>';
        }
        return '<a href="' + escHtml(m.file_url) + '" target="_blank" class="btn btn-outline-secondary btn-sm">'
          + '<i class="bi bi-file-earmark me-1"></i>' + escHtml(m.description || 'Document') + '</a>';
      }).join('');
      cols += '<div class="col-12"><div class="border rounded p-3 border-secondary-subtle">'
        + '<p class="text-muted small fw-bold mb-2 text-uppercase border-bottom pb-1"><i class="bi bi-paperclip me-1"></i>' + "{% filter escapejs %}{% translate "Documents / Photos généraux" %}{% endfilter %}" + '</p>'
        + '<div class="d-flex flex-wrap gap-2">' + thumbs + '</div></div></div>';
    }

    return cols;
  }

  function renderReadMode(d, media) {
    const readContent = document.getElementById('guidedReadContent');
    if (!readContent) return;

    localOuvrages = [];
    if (d && d.device_type && !d.ouvrages) {
      localOuvrages = [{ ...d, local_id: "0" }];
    } else if (d && d.ouvrages) {
      localOuvrages = d.ouvrages;
    }

    const hasWeather = d && (d.date_derniere_pluie !== undefined || d.orage_moins_une_heure !== undefined);
    let weatherHtml = '';
    if (hasWeather) {
      const pluieVal = d.date_derniere_pluie;
      const orageVal = d.orage_moins_une_heure;
      
      let pluieLabel = "{% filter escapejs %}{% translate "Non vérifié" %}{% endfilter %}";
      let pluieBadgeClass = "bg-secondary";
      if (pluieVal === 'aujourdhui') {
        pluieLabel = "{% filter escapejs %}{% translate "Aujourd'hui" %}{% endfilter %}";
        pluieBadgeClass = "bg-info text-white";
      } else if (pluieVal === 'moins_24h') {
        pluieLabel = "{% filter escapejs %}{% translate "Moins de 24h" %}{% endfilter %}";
        pluieBadgeClass = "bg-info text-white";
      } else if (pluieVal === 'plus_24h') {
        pluieLabel = "{% filter escapejs %}{% translate "Plus de 24h" %}{% endfilter %}";
        pluieBadgeClass = "bg-info text-white";
      }

      let orageLabel = "{% filter escapejs %}{% translate "Non vérifié" %}{% endfilter %}";
      let orageBadgeClass = "bg-secondary";
      if (orageVal === 'true' || orageVal === true) {
        orageLabel = "{% filter escapejs %}{% translate "Oui" %}{% endfilter %}";
        orageBadgeClass = "bg-danger text-white";
      } else if (orageVal === 'false' || orageVal === false) {
        orageLabel = "{% filter escapejs %}{% translate "Non" %}{% endfilter %}";
        orageBadgeClass = "bg-success text-white";
      }

      weatherHtml = `
        <div class="guided-card border-primary-subtle bg-light-subtle p-3 mb-4">
          <h6 class="fw-bold mb-3 text-primary border-bottom pb-2">
            <i class="bi bi-cloud-sun-fill me-2"></i>{% filter escapejs %}{% translate "Conditions météorologiques" %}{% endfilter %}
          </h6>
          <div class="row g-3">
            <div class="col-12 col-md-6 d-flex align-items-center justify-content-between">
              <span class="fw-semibold text-muted">{% filter escapejs %}{% translate "Date de la dernière pluie" %}{% endfilter %} :</span>
              <span class="badge ${pluieBadgeClass} py-1.5 px-3 fs-7">${pluieLabel}</span>
            </div>
            <div class="col-12 col-md-6 d-flex align-items-center justify-content-between">
              <span class="fw-semibold text-muted">{% filter escapejs %}{% translate "Orage il y a moins d'une heure" %}{% endfilter %} :</span>
              <span class="badge ${orageBadgeClass} py-1.5 px-3 fs-7">${orageLabel}</span>
            </div>
          </div>
        </div>
      `;
    }

    if (localOuvrages.length === 0 && !hasWeather) {
      readContent.innerHTML = '<p class="text-muted fst-italic">' + "{% filter escapejs %}{% translate "Aucune donnée enregistrée pour ce template." %}{% endfilter %}" + '</p>';
      return;
    }

    let allOuvragesHtml = '';

    localOuvrages.forEach((ouv, index) => {
      // Device Header Badge
      let typeBadge, themeColor, borderLeftStyle;
      if (ouv.device_type === 'evc') {
        typeBadge = '<span class="badge badge-evc py-2 px-3"><i class="bi bi-flower1 me-2"></i>' + "{% filter escapejs %}{% translate "Espace vert creux (EVC)" %}{% endfilter %}" + '</span>';
        themeColor = 'success';
        borderLeftStyle = 'border-left: 5px solid #2e7d32;';
      } else if (ouv.device_type === 'oed') {
        typeBadge = '<span class="badge badge-oed py-2 px-3"><i class="bi bi-grid-3x3-gap-fill me-2"></i>' + "{% filter escapejs %}{% translate "Massif drainant (OED)" %}{% endfilter %}" + '</span>';
        themeColor = 'info';
        borderLeftStyle = 'border-left: 5px solid #0277bd;';
      } else if (ouv.device_type === 'ta') {
        typeBadge = '<span class="badge badge-ta py-2 px-3"><i class="bi bi-cloud-rain-fill me-2"></i>' + "{% filter escapejs %}{% translate "Technique alternative / Bassin d'orage (TA)" %}{% endfilter %}" + '</span>';
        themeColor = 'teal';
        borderLeftStyle = 'border-left: 5px solid #00796b;';
      } else {
        typeBadge = '<span class="badge bg-secondary py-2 px-3">' + "{% filter escapejs %}{% translate "Non renseigné" %}{% endfilter %}" + '</span>';
        themeColor = 'secondary';
        borderLeftStyle = 'border-left: 5px solid #6c757d;';
      }
      
      let assetBadge = '';
      if (ouv.rwi_asset_code) {
        assetBadge = `<span class="badge bg-primary-subtle text-primary border border-primary-subtle py-2 px-3 d-inline-flex align-items-center gap-1"><i class="bi bi-pin-map-fill me-1"></i>📌 ${escHtml(ouv.rwi_asset_code)} <span class="asset-badge-name text-truncate" title="${escHtml(ouv.rwi_asset_name)}">(${escHtml(ouv.rwi_asset_name)})</span></span>`;
      }

      const cols = buildOuvrageDetailPreviewHtml(ouv, media);

      allOuvragesHtml += `
        <div class="guided-card clickable-card p-4 mb-4" style="${borderLeftStyle}">
          <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div class="d-flex align-items-center gap-3 flex-wrap">
              <h5 class="fw-bold mb-0 text-${themeColor}">Ouvrage #${index + 1}</h5>
              ${typeBadge}
              ${assetBadge}
            </div>
            <i class="bi bi-chevron-down chevron-icon fs-5 text-secondary"></i>
          </div>
          <div class="card-details-toggle d-none w-100 mt-3 border-top pt-3">
            <div class="row g-3">
              ${cols || '<div class="col-12 text-muted fst-italic">Aucune réponse saisie pour le moment.</div>'}
            </div>
          </div>
        </div>
      `;
    });

    readContent.innerHTML = weatherHtml + allOuvragesHtml;

    // Wire collapsible cards in read mode
    readContent.querySelectorAll('.guided-card.clickable-card').forEach(card => {
      card.addEventListener('click', (e) => {
        if (e.target.closest('a') || e.target.closest('button') || e.target.closest('input')) return;
        const detailsContainer = card.querySelector('.card-details-toggle');
        if (detailsContainer) {
          detailsContainer.classList.toggle('d-none');
          const chevron = card.querySelector('.chevron-icon');
          if (chevron) {
            chevron.classList.toggle('bi-chevron-down');
            chevron.classList.toggle('bi-chevron-up');
          }
        }
      });
    });
  }

  // ── Save (via bouton global cms-save-before) ────────────────────────
  async function saveGuidedData() {
    if (currentOuvrageIndex !== -1) {
      localOuvrages[currentOuvrageIndex] = {
        ...localOuvrages[currentOuvrageIndex],
        ...collectData()
      };
    }

    const data = {
      ouvrages: localOuvrages,
      date_derniere_pluie: getRadioValue('date_derniere_pluie') === 'null' ? null : getRadioValue('date_derniere_pluie'),
      orage_moins_une_heure: getRadioValue('orage_moins_une_heure') === 'true' ? true : (getRadioValue('orage_moins_une_heure') === 'false' ? false : null)
    };

    const resp = await fetch(saveUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken'),
      },
      body: JSON.stringify({ data }),
    });
    const json = await resp.json();
    if (json.success) {
      savedData = data;
      renderReadMode(savedData, existingMedia);
      updateMapSelectedAsset();
    } else {
      throw new Error(json.error || "{% filter escapejs %}{% translate "Erreur lors de l'enregistrement." %}{% endfilter %}");
    }
    return json;
  }

  document.addEventListener('cms-save-before', (e) => {
    if (!canEdit || editMode.classList.contains('d-none')) return;
    e.detail.addSavePromise(saveGuidedData());
  });

  // ── Media upload ──────────────────────────────────────────────────────
  const fileInput    = document.getElementById('guidedFileInput');
  const cameraInput  = document.getElementById('guidedCameraInput');
  const fileInputKey = document.getElementById('guidedFileInputKey');

  async function handleUpload(files) {
    if (!files.length) return;
    if (currentOuvrageIndex === -1) return;

    const baseKey = fileInputKey.value;
    const localId = localOuvrages[currentOuvrageIndex].local_id;
    const fieldKey = localId === "0" ? baseKey : `${localId}_${baseKey}`;

    for (const file of files) {
      const isPhoto    = file.type.startsWith('image/');
      const mediaType  = isPhoto ? 'photo' : 'document';
      const formData   = new FormData();
      formData.append('file',       file);
      formData.append('field_key',  fieldKey);
      formData.append('media_type', mediaType);
      formData.append('csrfmiddlewaretoken', getCookie('csrftoken'));

      try {
        const resp = await fetch(uploadUrl, { method: 'POST', body: formData });
        const json = await resp.json();
        if (json.success) {
          existingMedia.push(json);
          insertMediaThumb(json, baseKey);
        } else {
          showAlert(json.error || "{% filter escapejs %}{% translate "Erreur lors de l'upload." %}{% endfilter %}", 'danger');
        }
      } catch(e) {
        showAlert("{% filter escapejs %}{% translate "Erreur réseau lors de l'upload." %}{% endfilter %}", 'danger');
      }
    }
  }

  window.insertGuidedMediaThumbMobile = function(media, prefixedFieldKey) {
    if (existingMedia.some(m => String(m.media_id) === String(media.media_id))) return;
    existingMedia.push(media);
    
    if (currentOuvrageIndex !== -1) {
      const localId = localOuvrages[currentOuvrageIndex].local_id;
      let baseKey = prefixedFieldKey;
      let match = false;
      if (localId === "0") {
        if (!prefixedFieldKey.startsWith("ouv_")) {
          match = true;
          baseKey = prefixedFieldKey;
        }
      } else {
        if (prefixedFieldKey.startsWith(localId + "_")) {
          match = true;
          baseKey = prefixedFieldKey.substring(localId.length + 1);
        }
      }
      if (match) {
        insertMediaThumb(media, baseKey);
      }
    }
  };

  document.querySelectorAll('.guided-camera-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const fieldKey = btn.dataset.fieldKey ?? '';
      fileInputKey.value = fieldKey;

      const cameraModalEl = document.getElementById('cameraModal');
      const openCameraModalBtn = document.getElementById('open-camera-modal-btn');
      if (cameraModalEl && openCameraModalBtn) {
        const localId = currentOuvrageIndex !== -1 ? localOuvrages[currentOuvrageIndex].local_id : "0";
        const fullFieldKey = localId === "0" ? fieldKey : `${localId}_${fieldKey}`;
        
        cameraModalEl.dataset.isGuided = "true";
        cameraModalEl.dataset.guidedFieldKey = fullFieldKey;
        cameraModalEl.dataset.guidedUploadUrl = uploadUrl;
        openCameraModalBtn.click();
      } else if (cameraInput) {
        cameraInput.value = '';
        cameraInput.click();
      }
    });
  });

  document.querySelectorAll('.guided-file-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const fieldKey = btn.dataset.fieldKey ?? '';
      fileInputKey.value = fieldKey;
      if (fileInput) {
        fileInput.value = '';
        fileInput.click();
      }
    });
  });

  fileInput && fileInput.addEventListener('change', async () => {
    await handleUpload(Array.from(fileInput.files));
  });

  cameraInput && cameraInput.addEventListener('change', async () => {
    await handleUpload(Array.from(cameraInput.files));
  });

  function insertMediaThumb(media, baseKey) {
    const zone = document.querySelector(`.guided-media-zone[data-field-key="${baseKey}"]`);
    if (!zone) return;

    const wrap = document.createElement('div');
    wrap.className   = 'position-relative';
    wrap.dataset.mediaId = media.media_id;

    if (media.media_type === 'photo') {
      wrap.innerHTML = `
        <img src="${media.file_url}" alt="${media.description || ''}"
             class="img-thumbnail" style="width:56px;height:56px;object-fit:cover;">
        <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 p-0 guided-media-delete"
                style="width:18px;height:18px;font-size:10px;line-height:1;"
                data-media-id="${media.media_id}" title="Supprimer">
          <i class="bi bi-x"></i>
        </button>`;
    } else {
      wrap.innerHTML = `
        <a href="${media.file_url}" target="_blank" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-file-earmark me-1"></i>${media.description || 'Document'}
        </a>
        <button type="button" class="btn btn-danger btn-sm ms-1 guided-media-delete"
                data-media-id="${media.media_id}" title="Supprimer">
          <i class="bi bi-x"></i>
        </button>`;
    }
    zone.appendChild(wrap);
    wireDeleteButtons();
  }

  function wireDeleteButtons() {
    document.querySelectorAll('.guided-media-delete').forEach(btn => {
      if (btn._guidedWired) return;
      btn._guidedWired = true;
      btn.addEventListener('click', async () => {
        const mediaId  = btn.dataset.mediaId;
        const deleteUrl = `{% url 'interventions:delete_guided_operation_media' media_id=0 %}`.replace('/0/', `/${mediaId}/`);
        if (!confirm("{% filter escapejs %}{% translate "Supprimer ce fichier ?" %}{% endfilter %}")) return;
        try {
          const resp = await fetch(deleteUrl, {
            method: 'POST',
            headers: { 'X-CSRFToken': getCookie('csrftoken') },
          });
          const json = await resp.json();
          if (json.success) {
            btn.closest('[data-media-id]')?.remove();
            existingMedia = existingMedia.filter(m => String(m.media_id) !== String(mediaId));
          }
        } catch(e) {
          showAlert("{% filter escapejs %}{% translate "Erreur lors de la suppression." %}{% endfilter %}", 'danger');
        }
      });
    });
  }

  function getCookie(name) {
    const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : '';
  }

  // ── Init ──────────────────────────────────────────────────────────────
  renderReadMode(savedData, existingMedia);

  // Poll for window.map or map to load the selected asset on the map
  let mapCheckIterations = 0;
  const mapCheckInterval = setInterval(() => {
    mapCheckIterations++;
    if (mapCheckIterations > 600) {
      clearInterval(mapCheckInterval);
      return;
    }
    const activeMap = (typeof map !== 'undefined' && map) || window.map;
    if (activeMap) {
      clearInterval(mapCheckInterval);
      updateMapSelectedAsset(true);
    }
  }, 500);

  // Trigger update and fit bounds when map FAB is clicked (on mobile)
  document.getElementById('map-fab-btn')?.addEventListener('click', () => {
    setTimeout(() => {
      updateMapSelectedAsset(true);
    }, 200);
  });

  if (editMode) {
    // Top-level edit mode bindings
    document.getElementById('addNewOuvrageBtn')?.addEventListener('click', addNewOuvrage);
    document.getElementById('backToOuvragesBtn')?.addEventListener('click', backToOuvrages);
    document.getElementById('backToOuvragesBottomBtn')?.addEventListener('click', backToOuvrages);
    
    // Asset linkage bindings
    document.getElementById('giep_asset_map_btn')?.addEventListener('click', startMapSelection);
    document.getElementById('giep_clear_asset_btn')?.addEventListener('click', clearGIEPAsset);

    wireDeviceCards();
    wireConditionalToggles();
    wirePresenceToggles();
    wireDeleteButtons();

    // Auto-save on weather change
    document.querySelectorAll('input[name="date_derniere_pluie"], input[name="orage_moins_une_heure"]').forEach(input => {
      input.addEventListener('change', () => {
        saveGuidedData().catch(err => {
          console.error(err);
          showAlert("Erreur lors de la sauvegarde automatique.", "danger");
        });
      });
    });
  }

})();
</script>