/**
 * =============================================================================
 * Fichier      : app/modules/Signalement/assets/css/signalement-touch.css
 * Auteur       : Régis KREMER (Baithz) — Bassin de Pompey
 * Version      : 1.1.0 (2026-01-07)
 * Objet        : Signalement — UI Touch (Mobile/Tablette) App-like + map full + bottom-sheet
 * -----------------------------------------------------------------------------
 * Description  :
 * - Scope STRICT mobile/tablette uniquement (aucun impact desktop).
 * - FULL SCREEN PWA : la vue Touch casse tout container parent (max-width/padding/margins).
 * - Layout “app” : header fixe + screen (scroll interne unique) + bottom bar.
 * - Étape 3 : carte FULL dans l’écran (sans container) ; overlays + panel bottom-sheet (mobile) / split (tablet).
 * -----------------------------------------------------------------------------
 * Règles anti-régression :
 * - Ne s’applique jamais sans html[data-device="mobile|tablet"] + body[data-module="signalement"].
 * - N’impacte pas le desktop : aucune règle globale hors scope.
 * - Conserve les IDs/structures attendus par signalement-touch.js (#signalementMap, #sigT_locPanel, etc.).
 * - Ne dépend d’aucun wrapper layout : neutralise .container/.wrapper/.content/.page dans le scope.
 * -----------------------------------------------------------------------------
 * CHANGELOG
 * -----------------------------------------------------------------------------
 * 1.1.0 (2026-01-07)
 * - [UX] Étape 3 refaite : map FULL + panel bottom-sheet (mobile) / split (tablet).
 * - [FIX] FULL SCREEN HARD OVERRIDE : neutralisation containers (max-width/padding/margins) + .sigT en fixed inset:0.
 * - [SAFE] Tokens officiels + tap targets 44px + focus-visible + reduced-motion + safe-area.
 * =============================================================================
 */

/* ==========================================================================
   0) SCOPE STRICT + TOKENS TOUCH
   ========================================================================== */
html[data-device="mobile"] body[data-module="signalement"],
html[data-device="tablet"] body[data-module="signalement"]{
  /* Palette officielle */
  --t-blue: #226196;
  --t-duck: #006C63;
  --t-rasp: #AF1578;
  --t-orange: #EF7D00;
  --t-green: #99A400;

  /* Surfaces */
  --t-bg: #edf2f7;
  --t-card: #ffffff;
  --t-text: #0f172a;
  --t-muted: #64748b;
  --t-border: rgba(15, 23, 42, 0.10);

  /* Spacing base 8px */
  --t-8: 8px;
  --t-12: 12px;
  --t-16: 16px;
  --t-20: 20px;
  --t-24: 24px;

  /* Radius / shadows */
  --t-r-card: 16px;
  --t-r-chip: 999px;
  --t-shadow: 0 10px 28px rgba(15,23,42,0.10);
  --t-shadow-soft: 0 6px 18px rgba(15,23,42,0.10);

  /* Tap targets */
  --t-tap: 44px;

  /* Font */
  --t-font: "Luciole", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================
   0bis) FULL SCREEN HARD OVERRIDE (PWA / anti-container)
   - verrouille le scroll global
   - neutralise les wrappers classiques du layout qui enferment la page
   ========================================================================== */
html[data-device="mobile"] body[data-module="signalement"],
html[data-device="tablet"] body[data-module="signalement"]{
  height: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--t-bg);
  font-family: var(--t-font);
  color: var(--t-text);
}

/* Neutralisation des containers parents (sans toucher au HTML) */
html[data-device="mobile"] body[data-module="signalement"] .container,
html[data-device="tablet"] body[data-module="signalement"] .container,
html[data-device="mobile"] body[data-module="signalement"] .wrapper,
html[data-device="tablet"] body[data-module="signalement"] .wrapper,
html[data-device="mobile"] body[data-module="signalement"] .content,
html[data-device="tablet"] body[data-module="signalement"] .content,
html[data-device="mobile"] body[data-module="signalement"] .page,
html[data-device="tablet"] body[data-module="signalement"] .page,
html[data-device="mobile"] body[data-module="signalement"] main,
html[data-device="tablet"] body[data-module="signalement"] main{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Empêche certains layouts d’imposer un padding au 1er enfant */
html[data-device="mobile"] body[data-module="signalement"] .container > *,
html[data-device="tablet"] body[data-module="signalement"] .container > *{
  max-width: none !important;
}

/* ==========================================================================
   1) WRAPPER APP (FULL SCREEN FIXED)
   ========================================================================== */
html[data-device="mobile"] body[data-module="signalement"] .sigT,
html[data-device="tablet"] body[data-module="signalement"] .sigT{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--t-bg);
  z-index: 9990; /* au-dessus des wrappers layout, sous modales */
}

/* Fallback iOS (anciennes implémentations) */
@supports (-webkit-touch-callout: none){
  html[data-device="mobile"] body[data-module="signalement"] .sigT,
  html[data-device="tablet"] body[data-module="signalement"] .sigT{
    height: 100vh;
  }
}

/* ==========================================================================
   2) HEADER + PROGRESS (FIXES)
   ========================================================================== */
.sigT__header{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--t-16);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-border);
}
.sigT__headerLeft{ display:flex; align-items:center; gap: var(--t-12); }
.sigT__backHome{
  width: var(--t-tap);
  height: var(--t-tap);
  border-radius: 14px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--t-text);
  border: 1px solid var(--t-border);
  background: #fff;
}
.sigT__titles{ display:flex; flex-direction:column; line-height: 1.05; }
.sigT__title{ font-weight: 800; letter-spacing: 0.2px; }
.sigT__subtitle{ color: var(--t-muted); font-size: 12px; margin-top: 2px; }
.sigT__iconBtn{
  width: var(--t-tap);
  height: var(--t-tap);
  border-radius: 14px;
  border: 1px solid var(--t-border);
  background: #fff;
  font-weight: 800;
}

.sigT__progress{
  padding: var(--t-12) var(--t-16) var(--t-16);
}
.sigT__progressTrack{
  height: 10px;
  border-radius: var(--t-r-chip);
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}
.sigT__progressBar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--t-orange), var(--t-blue));
  border-radius: var(--t-r-chip);
  transition: width 180ms ease;
}
.sigT__progressMeta{
  display:flex;
  justify-content: space-between;
  margin-top: var(--t-12);
  color: var(--t-muted);
  font-size: 12px;
}
.sigT__progressHint{ max-width: 55%; text-align:right; }

/* ==========================================================================
   3) SCREEN (SCROLL INTERNE UNIQUE)
   ========================================================================== */
.sigT__screen{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--t-16) calc(84px + env(safe-area-inset-bottom)) var(--t-16);
}

/* ==========================================================================
   4) CARDS / STEPS (par défaut)
   ========================================================================== */
.sigT__step{
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-r-card);
  box-shadow: var(--t-shadow-soft);
  padding: var(--t-16);
  margin: var(--t-16) 0;
}
.sigT__h2{ margin: 0 0 var(--t-12); font-size: 18px; }
.sigT__p{ margin: 0 0 var(--t-16); color: var(--t-muted); font-size: 14px; }

.sigT__error{
  margin-top: var(--t-12);
  padding: var(--t-12);
  border-radius: 14px;
  border: 1px solid rgba(175,21,120,0.22);
  background: rgba(175,21,120,0.08);
  color: var(--t-rasp);
  font-weight: 700;
}

/* ==========================================================================
   5) STEP 1 : CATS
   ========================================================================== */
.sigT__gridCats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--t-12);
}
html[data-device="tablet"] body[data-module="signalement"] .sigT__gridCats{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sigT__cat{
  min-height: 96px;
  border-radius: var(--t-r-card);
  border: 1px solid var(--t-border);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
  padding: var(--t-12);
  display:flex;
  flex-direction: column;
  gap: var(--t-8);
  justify-content:center;
  align-items:center;
}
.sigT__cat[aria-pressed="true"]{
  border-color: rgba(34,97,150,0.35);
  background: rgba(34,97,150,0.06);
}
.sigT__catIcon img{
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.sigT__catLabel{
  font-size: 13px;
  font-weight: 800;
  text-align:center;
}

/* ==========================================================================
   6) FIELDS
   ========================================================================== */
.sigT__form{ display:flex; flex-direction: column; gap: var(--t-16); }
.sigT__field{ display:flex; flex-direction: column; gap: var(--t-8); }
.sigT__field label{ font-weight: 800; font-size: 13px; }
.sigT__req{ color: var(--t-rasp); }

.sigT__field input[type="text"],
.sigT__field input[type="email"],
.sigT__field input[type="tel"],
.sigT__field select,
.sigT__field textarea{
  width: 100%;
  min-height: var(--t-tap);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.18);
  padding: 10px 12px;
  font-size: 15px;
  background: #fff;
  outline: none;
}
.sigT__field textarea{ min-height: 140px; resize: vertical; }
.sigT__field input:focus-visible,
.sigT__field select:focus-visible,
.sigT__field textarea:focus-visible{
  border-color: rgba(34,97,150,0.55);
  box-shadow: 0 0 0 3px rgba(34,97,150,0.18);
}
.sigT__fieldError{
  color: var(--t-rasp);
  font-weight: 700;
  font-size: 12px;
}

/* Autocomplete list (liste existante) */
.sigT .autocomplete-list{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.18);
  box-shadow: var(--t-shadow-soft);
}

/* ==========================================================================
   7) STEP 3 : MAP FULL + PANEL (BOTTOM-SHEET)
   IMPORTANT :
   - la carte doit être FULL dans la zone visible, sans être "dans un container"
   - on neutralise le padding de .sigT__screen uniquement pour l’étape map
   ========================================================================== */

/* Étape map : enlève l’effet "card" (full stage) */
.sigT__step--map{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Quand l’étape 3 est affichée, la screen devient FULL width/height (sans padding) */
.sigT__screen:has(.sigT__step[data-step="3"]:not([hidden])){
  padding: 0 !important;
}

/* Stage = plein écran utile : prend toute la screen */
.sigT__mapStage{
  position: relative;
  height: 100%;
  min-height: calc(100dvh - 64px - 10px - 12px - 16px - (84px + env(safe-area-inset-bottom)));
  background: rgba(15,23,42,0.06);
}

/* Map full */
.sigT__mapFull{ position: absolute; inset: 0; }
.sigT__map{ position: absolute; inset: 0; }

/* Overlays 44px */
.sigT__mapBtn{
  position: absolute;
  z-index: 20;
  width: var(--t-tap);
  height: var(--t-tap);
  border-radius: 16px;
  border: 1px solid var(--t-border);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(15,23,42,0.16);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sigT__mapBtn img{ width: 22px; height: 22px; }
.sigT__mapBtn--geo{ left: 12px; top: 12px; }
.sigT__mapBtn--layer{ right: 12px; top: 12px; font-size: 18px; }

/* Bandeau d’info sur la carte */
.sigT__mapChip{
  position: absolute;
  left: 12px;
  right: 12px;
  top: 64px;
  z-index: 20;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(15,23,42,0.78);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

/* Panel = bottom-sheet (mobile) */
.sigT__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;

  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 -16px 40px rgba(15,23,42,0.18);

  border-radius: 22px 22px 0 0;
  height: 44%;
  min-height: 240px;
  max-height: 85%;

  display: flex;
  flex-direction: column;
}
.sigT__panelHandle{
  width: 54px;
  height: 6px;
  border-radius: var(--t-r-chip);
  background: rgba(15,23,42,0.14);
  margin: 10px auto 6px;
}
.sigT__panelBody{
  padding: 0 var(--t-16) calc(var(--t-16) + env(safe-area-inset-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sigT__hintBox{
  margin-top: var(--t-12);
  padding: var(--t-12);
  border-radius: 14px;
  border: 1px solid rgba(0,108,99,0.22);
  background: rgba(0,108,99,0.06);
  color: var(--t-duck);
  font-weight: 700;
  font-size: 12px;
}

/* Tablette : split (map 65% / panel 35%) */
html[data-device="tablet"] body[data-module="signalement"] .sigT__mapStage{
  display: grid;
  grid-template-columns: 65% 35%;
  height: 100%;
}
html[data-device="tablet"] body[data-module="signalement"] .sigT__mapFull{
  position: relative;
  inset: auto;
}
html[data-device="tablet"] body[data-module="signalement"] .sigT__panel{
  position: relative;
  border-radius: 0;
  height: 100%;
  max-height: none;
  box-shadow: none;
  border-left: 1px solid rgba(15,23,42,0.10);
  border-top: none;
}

/* Fallback si :has() non supporté : classe utilitaire (JS peut la poser si besoin) */
html[data-device="mobile"] body[data-module="signalement"] .sigT__screen.sigT__screen--mapFull,
html[data-device="tablet"] body[data-module="signalement"] .sigT__screen.sigT__screen--mapFull{
  padding: 0 !important;
}

/* ==========================================================================
   8) UPLOAD
   ========================================================================== */
.sigT__upload{ display:flex; flex-direction: column; gap: var(--t-12); }
.sigT__uploadBtn{
  height: var(--t-tap);
  border-radius: 14px;
  border: 1px dashed rgba(15,23,42,0.28);
  background: rgba(255,255,255,0.94);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--t-12);
  padding: 10px 14px;
  font-weight: 800;
}
.sigT__uploadIcon{ width: 22px; height: 22px; }
.sigT__chip{
  height: 40px;
  border-radius: var(--t-r-chip);
  border: 1px solid rgba(15,23,42,0.18);
  background: #fff;
  padding: 0 14px;
  font-weight: 800;
  align-self: flex-start;
}

.sigT__thumbs{ display:flex; flex-wrap: wrap; gap: var(--t-8); }
.sigT__thumb{
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
}
.sigT__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.sigT__thumbDel{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(175,21,120,0.92);
  color: #fff;
  font-weight: 900;
}

/* Mini progress */
.sigT__progressRow{ display:flex; align-items:center; gap: var(--t-12); }
.sigT__progressMini{
  flex: 1;
  height: 10px;
  border-radius: var(--t-r-chip);
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}
.sigT__progressMini .progress-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--t-green), var(--t-blue));
  border-radius: var(--t-r-chip);
  transition: width 160ms ease;
}
.sigT__progressRow .progress-text{
  font-size: 12px;
  color: var(--t-muted);
  min-width: 42px;
  text-align: right;
}

/* ==========================================================================
   9) SUCCESS
   ========================================================================== */
.sigT__successCard{
  border-radius: var(--t-r-card);
  border: 1px solid rgba(0,108,99,0.22);
  background: rgba(0,108,99,0.06);
  padding: var(--t-16);
  display:flex;
  flex-direction: column;
  gap: var(--t-16);
}
.sigT__successIcon{
  width: 56px; height: 56px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,108,99,0.16);
  color: var(--t-duck);
  font-weight: 900;
  font-size: 28px;
}
.sigT__successTitle{ font-weight: 900; font-size: 18px; }
.sigT__successDesc{ color: var(--t-muted); margin-top: 2px; }
.sigT__successTrack{ margin-top: var(--t-8); font-size: 14px; }
.sigT__successActions{ display:flex; gap: var(--t-12); flex-wrap: wrap; }

/* ==========================================================================
   10) BOTTOM BAR + BUTTONS
   ========================================================================== */
.sigT__bottomBar{
  position: sticky;
  bottom: 0;
  z-index: 60;
  padding: var(--t-12) var(--t-16) calc(var(--t-12) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--t-border);
  display:flex;
  gap: var(--t-12);
}

.sigT__btn{
  height: var(--t-tap);
  border-radius: 16px;
  border: 1px solid var(--t-border);
  background: #fff;
  padding: 0 14px;
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--t-text);
  flex: 1;
}
.sigT__btn--primary{
  border-color: rgba(34,97,150,0.22);
  background: linear-gradient(180deg, rgba(34,97,150,1), rgba(0,108,99,1));
  color: #fff;
}
.sigT__btn--ghost{ background: #fff; }
.sigT__btn--danger{
  background: rgba(175,21,120,0.92);
  color: #fff;
  border-color: rgba(175,21,120,0.22);
}
.sigT__btn:disabled{ opacity: 0.55; }

/* ==========================================================================
   11) MODAL / BOTTOM-SHEET
   ========================================================================== */
.sigT__modalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15,23,42,0.44);
  padding: 0 var(--t-16) calc(env(safe-area-inset-bottom));
}
html[data-device="tablet"] body[data-module="signalement"] .sigT__modalOverlay{
  align-items: center;
}
.sigT__sheet{
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: var(--t-16);
  box-shadow: var(--t-shadow);
}
html[data-device="tablet"] body[data-module="signalement"] .sigT__sheet{ border-radius: 22px; }
.sigT__sheetHandle{
  width: 54px;
  height: 6px;
  border-radius: var(--t-r-chip);
  background: rgba(15,23,42,0.14);
  margin: 0 auto var(--t-12);
}
.sigT__sheetTitle{ margin: 0 0 var(--t-8); font-size: 16px; font-weight: 900; }
.sigT__sheetText{ margin: 0 0 var(--t-16); color: var(--t-muted); font-size: 13px; }
.sigT__sheetActions{ display:flex; gap: var(--t-12); flex-wrap: wrap; }
.sigT__muted{ color: var(--t-muted); }

/* ==========================================================================
   12) TOAST
   ========================================================================== */
.sigT__toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 10000;
  background: rgba(15,23,42,0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px;
  max-width: min(560px, calc(100vw - 32px));
  box-shadow: var(--t-shadow);
  font-weight: 800;
  font-size: 13px;
}

/* ==========================================================================
   13) MOTION / ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .sigT__progressBar,
  .sigT__progressMini .progress-bar{
    transition: none;
  }
}

/* Focus visible (sobre) */
.sigT :focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(239,125,0,0.22);
}