/* ============================================================================
   zzz-tablet-app.css — REFONTE APP étendue aux TABLETTES TACTILES (2026-08-16)
   ----------------------------------------------------------------------------
   Objectif : le look « application » (thème sombre + barre du haut + barre du
   bas + colonne centrée) apparaît aussi sur TABLETTE, en portrait ET paysage.

   SÉCURITÉ / PORTÉE :
   • Scopé html.apprefonte + @media (pointer: coarse)  → un ORDINATEUR À SOURIS
     n'est JAMAIS touché : le BUREAU reste 100 % identique. Plafond 1366px.
   • Le socle refonte (app-refonte.css + zz-*-app.css) s'active désormais aussi
     sur tablette tactile (même media « (pointer: coarse) and (max-width:1366px) »).
     CE fichier ne fait qu'ajouter ce qui manque au-delà de 900px : forcer la
     coquille mobile et centrer la colonne pour ne pas « étirer » le téléphone.
   • 100 % additif / réversible : supprimer ce fichier = retour à l'état d'avant.
   • Ne touche ni le GARDIEN ni ÉTINCELLES.
   ============================================================================ */

/* ---- A) FORCER LA COQUILLE MOBILE au-delà de 900px (tablette tactile) ----
   Le site de base bascule en « bureau » à ≥901px (barre latérale + grille 2
   colonnes) et masque la barre du bas. Sur tablette tactile, on rétablit la
   coquille « app » : une seule colonne, pas de rail, barre du bas visible. */
@media (pointer: coarse) and (min-width: 901px) and (max-width: 1366px),
       (display-mode: standalone) and (min-width: 901px) and (max-width: 1366px) {
  html.apprefonte .pub-shell   { grid-template-columns: 1fr !important; }
  html.apprefonte .pub-rail    { display: none !important; }  /* barre latérale bureau masquée */
  html.apprefonte .pub-topnav  { display: none !important; }  /* menu horizontal bureau masqué */
  /* Barre du bas rétablie (le site la masque via @media (min-width:901px)). */
  html.apprefonte .bottom-nav  { display: flex !important; }
  /* Espace bas pour barre du bas + boutons flottants. */
  html.apprefonte .pub-content {
    padding-bottom: calc(var(--ar-navh) + var(--ar-safe-b) + 88px) !important;
  }
  /* Les 4 CTA « bureau » (.pub-cdp-group) sont en position:absolute (placement
     bureau) ; le socle ne les remet en flux qu'à ≤900px. Comme sur TÉLÉPHONE
     (design validé), on les masque ici — accès conservé via la feuille
     « Mes raccourcis » (tap Gardien) et la barre du bas. */
  html.apprefonte .pub-cdp-group { display: none !important; }
}

/* ---- B) COLONNE APP CENTRÉE (portrait + paysage) : ne pas étirer ----
   La mise en page est pensée « une colonne téléphone ». Sur tablette large on
   la CENTRE dans une colonne de lecture confortable au lieu de l'étirer. */
@media (pointer: coarse) and (min-width: 769px) and (max-width: 1366px),
       (display-mode: standalone) and (min-width: 769px) and (max-width: 1366px) {
  html.apprefonte .pub-content,
  html.apprefonte main.container,
  html.apprefonte .ppx-wrap {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Barre du bas : items REGROUPÉS au centre (pas étirés sur 1366px). */
  html.apprefonte .bottom-nav {
    justify-content: center !important;
    gap: 10px !important;
  }
  html.apprefonte .bottom-nav .bn-item {
    flex: 0 1 104px !important;
    max-width: 120px;
  }

  /* Feuille « raccourcis » : centrée sur la colonne. */
  html.apprefonte .ar-shortcuts-sheet {
    left: 50% !important; right: auto !important;
    width: min(780px, 100%) !important;
    transform: translateX(-50%) translateY(115%) !important;
  }
  html.apprefonte .ar-shortcuts-sheet.ar-open {
    transform: translateX(-50%) !important;
  }

  /* Boutons flottants alignés sur le bord de la colonne centrée. */
  html.apprefonte .gw-launcher { right: max(12px, calc((100% - 780px) / 2)) !important; }
  html.apprefonte #secuFab     { right: max(12px, calc((100% - 780px) / 2)) !important; }
  html.apprefonte .obw-launch  { left:  max(16px, calc((100% - 780px) / 2)) !important; }
}