/**
 * =============================================================================
 * Fichier      : app/modules/Home/assets/css/home-touch.css
 * Auteur       : Régis KREMER (Baithz) — Bassin de Pompey
 * Version      : 1.0.1 (2026-01-07)
 * Objet        : HOME — UI Touch (Mobile/Tablette) “app-like” (override only)
 * -----------------------------------------------------------------------------
 * Description  :
 * - Override strict pour mobile/tablette sans casser le desktop.
 * - HOME (layout.php) : pas de <main> (règle v3.8.0) => scroll géré par body/.home-page.
 * - Convertit la home en pile de cartes lisibles + actu en panneau scrollable.
 * - Respecte la charte MonAppli Touch (tap targets, radius, shadows, motion).
 *
 * Règles anti-régression :
 * - Ne modifie pas le HTML (override CSS uniquement).
 * - Ne touche jamais au desktop : scope STRICT html[data-device] + body[data-module="home"].
 * - Ne casse pas les IDs utilisés par JS (#mon-slider, #territoryNews*, #prev, #next).
 * - Ne casse pas le header fixe (style.css) ni le footer tiroir (main.js).
 *
 * CHANGELOG
 * -----------------------------------------------------------------------------
 * 1.0.1 (2026-01-07)
 * - [FIX] HOME sans <main> : suppression du lock global + scroll restauré via body/.home-page.
 * - [SAFE] Conserve “app-like” (cartes + listes internes) sans bloquer le contenu sous le fold.
 *
 * 1.0.0 (2026-01-07)
 * - [ADD] Layout Touch : pile de cartes + actu optimisées + safe-area.
 * =============================================================================
 */

/* ==========================================================================
   0) SCOPE STRICT + TOKENS TOUCH (HOME)
   ========================================================================== */

html[data-device="mobile"] body[data-module="home"],
html[data-device="tablet"] body[data-module="home"]{
  /* Palette officielle */
  --t-bleu: #226196;
  --t-canard: #006C63;
  --t-framboise: #AF1578;
  --t-orange: #EF7D00;
  --t-vert: #99A400;

  /* Spacing / radius / shadows */
  --t-s8: 8px;
  --t-s12: 12px;
  --t-s16: 16px;
  --t-s20: 20px;
  --t-s24: 24px;

  --t-r-card: 16px;
  --t-r-chip: 999px;

  --t-border: 1px solid rgba(15, 23, 42, 0.10);
  --t-shadow: 0 6px 18px rgba(2, 6, 23, 0.10);

  /* Surfaces */
  --t-bg: #f0f4f8;
  --t-card: #ffffff;
  --t-text: #0f172a;
  --t-muted: rgba(15, 23, 42, 0.62);

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

  /* Safe areas */
  --t-safe-top: env(safe-area-inset-top, 0px);
  --t-safe-bottom: env(safe-area-inset-bottom, 0px);

  background: var(--t-bg);
  color: var(--t-text);
}

/* Focus propre */
html[data-device="mobile"] body[data-module="home"] :focus-visible,
html[data-device="tablet"] body[data-module="home"] :focus-visible{
  outline: 2px solid rgba(34, 97, 150, 0.55);
  outline-offset: 2px;
}

/* Motion */
@media (prefers-reduced-motion: reduce){
  html[data-device="mobile"] body[data-module="home"] *,
  html[data-device="tablet"] body[data-module="home"] *{
    transition: none !important;
    scroll-behavior: auto !important;
    animation: none !important;
  }
}

/* ==========================================================================
   1) SHELL HOME : scroll autorisé (pas de <main> sur Home)
   ========================================================================== */

/* IMPORTANT : layout.php HOME n’a pas de <main> => on ne lock JAMAIS le body */
html[data-device="mobile"] body[data-module="home"],
html[data-device="tablet"] body[data-module="home"]{
  height: auto !important;
  min-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Si un <main> apparaît un jour sur home, ne pas casser : on le laisse “transparent” */
html[data-device="mobile"] body[data-module="home"] main,
html[data-device="tablet"] body[data-module="home"] main{
  height: auto !important;
  overflow: visible !important;
}

/* Zone home : padding haut + marge basse pour footer tiroir + safe-area */
html[data-device="mobile"] body[data-module="home"] .home-page,
html[data-device="tablet"] body[data-module="home"] .home-page{
  /* Le header est géré côté style.css, on réserve de l’air sans figer */
  padding: calc(72px + var(--t-safe-top)) var(--t-s16)
           calc(var(--t-s24) + var(--t-safe-bottom) + 24px);
}

/* ==========================================================================
   2) GRILLE => PILE (mobile) / 2 COL (tablette)
   ========================================================================== */

html[data-device="mobile"] body[data-module="home"] .home-grid{
  display: flex;
  flex-direction: column;
  gap: var(--t-s16);
  min-height: unset;
}

html[data-device="tablet"] body[data-module="home"] .home-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: auto auto auto;
  gap: var(--t-s16);
  min-height: unset;
}

/* ==========================================================================
   3) CARTES : lisibilité + tap targets
   ========================================================================== */

html[data-device="mobile"] body[data-module="home"] .card,
html[data-device="tablet"] body[data-module="home"] .card{
  border-radius: var(--t-r-card);
  border: var(--t-border);
  box-shadow: var(--t-shadow);
  background: var(--t-card);
  overflow: hidden; /* coins propres pour images/overlays */
}

/* Titres / textes : petites corrections de densité mobile */
html[data-device="mobile"] body[data-module="home"] .card h1,
html[data-device="mobile"] body[data-module="home"] .card h2,
html[data-device="mobile"] body[data-module="home"] .card h3{
  line-height: 1.15;
}

html[data-device="mobile"] body[data-module="home"] .card p{
  line-height: 1.35;
}

/* Boutons/inputs minimum 44px */
html[data-device="mobile"] body[data-module="home"] .btn,
html[data-device="tablet"] body[data-module="home"] .btn,
html[data-device="mobile"] body[data-module="home"] button,
html[data-device="tablet"] body[data-module="home"] button,
html[data-device="mobile"] body[data-module="home"] select,
html[data-device="tablet"] body[data-module="home"] select,
html[data-device="mobile"] body[data-module="home"] a.btn,
html[data-device="tablet"] body[data-module="home"] a.btn{
  min-height: var(--t-tap);
}

/* Liens “cartes” : tap target */
html[data-device="mobile"] body[data-module="home"] a,
html[data-device="tablet"] body[data-module="home"] a{
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   4) SLIDER : hauteur utile + coins + overlay OK
   ========================================================================== */

/* Le wrapper slider (sans casser les IDs) */
html[data-device="mobile"] body[data-module="home"] .hero-slider{
  min-height: 42vh;
  border-radius: var(--t-r-card);
  box-shadow: var(--t-shadow);
  overflow: hidden;
}

/* Tablette : place le slider dans la colonne gauche */
html[data-device="tablet"] body[data-module="home"] .hero-slider{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  min-height: 360px;
}

/* Contrôles du slider : 44px */
html[data-device="mobile"] body[data-module="home"] #prev,
html[data-device="mobile"] body[data-module="home"] #next,
html[data-device="tablet"] body[data-module="home"] #prev,
html[data-device="tablet"] body[data-module="home"] #next{
  min-width: var(--t-tap);
  min-height: var(--t-tap);
}

/* Texte dans le hero : lisible en touch */
html[data-device="mobile"] body[data-module="home"] .hero-content,
html[data-device="tablet"] body[data-module="home"] .hero-content{
  padding: var(--t-s16);
}

/* ==========================================================================
   5) ACTUS : panneau dédié + scroll interne liste
   ========================================================================== */

html[data-device="mobile"] body[data-module="home"] .card--news{
  padding: var(--t-s16);
}

html[data-device="tablet"] body[data-module="home"] .card--news{
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  padding: var(--t-s16);
}

/* Header actus : aération */
html[data-device="mobile"] body[data-module="home"] .card--news .card-header,
html[data-device="tablet"] body[data-module="home"] .card--news .card-header{
  gap: var(--t-s12);
  align-items: flex-start;
}

/* Select “clean” : full width + touch */
html[data-device="mobile"] body[data-module="home"] .card--news .select-clean,
html[data-device="tablet"] body[data-module="home"] .card--news .select-clean{
  width: 100%;
  min-height: var(--t-tap);
  border-radius: 12px;
  border: var(--t-border);
  background: rgba(255,255,255,0.9);
}

/* La liste scrolle (interne) sans bloquer le scroll de page */
html[data-device="mobile"] body[data-module="home"] .card--news .news-list-scroll,
html[data-device="tablet"] body[data-module="home"] .card--news .news-list-scroll{
  max-height: 48vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  overscroll-behavior: contain;
}

/* Items actus : tap friendly */
html[data-device="mobile"] body[data-module="home"] .card--news .news-item,
html[data-device="tablet"] body[data-module="home"] .card--news .news-item{
  padding: var(--t-s12);
  border-radius: 12px;
}

/* ==========================================================================
   6) CARTES “LIGNE 2” : grille tablette, ordre naturel mobile
   ========================================================================== */

html[data-device="tablet"] body[data-module="home"] .card--info{ grid-column: 1 / 2; grid-row: 2 / 3; }
html[data-device="tablet"] body[data-module="home"] .card--focus{ grid-column: 1 / 2; grid-row: 3 / 4; }
html[data-device="tablet"] body[data-module="home"] .card--hero{ grid-column: 1 / 2; grid-row: 4 / 5; }

/* Image carte "Mon signalement" plus compacte en touch */
html[data-device="mobile"] body[data-module="home"] .card--focus .card-image-top{
  height: 160px;
  object-fit: cover;
}

/* ==========================================================================
   7) FOOTER TIROIR : ergonomie touch (sans casser JS)
   ========================================================================== */

html[data-device="mobile"] body[data-module="home"] .footer-handle,
html[data-device="tablet"] body[data-module="home"] .footer-handle{
  width: 140px;
  height: max(var(--t-tap), 44px);
  top: calc(-1 * max(var(--t-tap), 44px) - 1px);
  border-radius: 14px 14px 0 0;
}

/* Optionnel : rend le handle plus “tapable” sans changer le JS */
html[data-device="mobile"] body[data-module="home"] .footer-handle::before,
html[data-device="tablet"] body[data-module="home"] .footer-handle::before{
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  transform: translateY(14px);
}

/* ==========================================================================
   8) Micro-corrections : scrollbars, images, compat
   ========================================================================== */

/* Scrollbar discrète (WebKit) : uniquement sur listes internes */
html[data-device="mobile"] body[data-module="home"] .news-list-scroll::-webkit-scrollbar,
html[data-device="tablet"] body[data-module="home"] .news-list-scroll::-webkit-scrollbar{
  width: 8px;
}
html[data-device="mobile"] body[data-module="home"] .news-list-scroll::-webkit-scrollbar-thumb,
html[data-device="tablet"] body[data-module="home"] .news-list-scroll::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}

/* Images générales dans home : ne débordent jamais */
html[data-device="mobile"] body[data-module="home"] img,
html[data-device="tablet"] body[data-module="home"] img{
  max-width: 100%;
  height: auto;
}