/* ==========================================================================
   ACADÉMIE · REFONTE MOBILE « APPLICATION » (academie-mobile.css)
   --------------------------------------------------------------------------
   Chargée depuis academie-pwa-tags.php avec media="(max-width:768px)" :
   le fichier n'est jamais appliqué sur desktop, le rendu PC reste
   strictement identique.

   Fonctionne avec academie-mobile.js qui :
   - pose les classes bp-mob + bp-page-<slug> sur <html> (scoping par page),
   - injecte la barre d'onglets fixe (#bp-tabbar),
   - réordonne l'accueil façon app (leçon du jour en premier).

   Les !important sont nécessaires : les <style> inline des pages sont
   déclarés APRÈS ce lien dans le <head> et gagneraient sinon.
   ========================================================================== */

@media (max-width: 768px) {

  /* ===============================================================
     1. SOCLE GLOBAL
     =============================================================== */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* Évite le zoom automatique d'iOS au focus d'un champ (<16px) */
  input, select, textarea { font-size: 16px !important; }

  button, a { -webkit-tap-highlight-color: transparent; }

  .wrap { max-width: 100% !important; }
  .card { padding: 18px 16px !important; border-radius: 20px !important; }

  /* Mascotte flottante desktop : inutile sur téléphone */
  .pulsy-wrap { display: none !important; }

  /* ===============================================================
     2. BARRE D'ONGLETS
     Les styles de #bp-tabbar (et la réservation d'espace en bas)
     vivent dans academie-mobile.js, injectés avec la barre : ils
     restent corrects même si cette feuille est périmée en cache.
     =============================================================== */

  /* Bouton son flottant (academie-sons.js) : au-dessus du footer
     fixe des pages leçon / révision */
  .bp-page-lecon #bp-son-btn,
  .bp-page-revision #bp-son-btn {
    bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }

  /* ===============================================================
     3. ACCUEIL (.bp-page-accueil)
        Écran d'app : en-tête compact (logo · profil · stats en une
        rangée), puis salutation → LEÇON DU JOUR (CTA visible sans
        défiler) → objectif de la semaine → raccourcis → parcours.
        (academie-mobile.js déplace .week et #pwa-card dans .stage)
     =============================================================== */
  .bp-page-accueil body { display: block !important; }

  .bp-page-accueil .sidebar {
    display: block !important;      /* neutralise gap + margin:auto du flex desktop */
    flex: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    border-right: none !important;
    border-bottom: none !important;
    background: transparent !important;
    padding: 12px 16px 0 !important;
  }

  /* Chrome desktop retiré : lien retour + anciens onglets
     (remplacés par la barre du bas) */
  .bp-page-accueil .sidebar .back { display: none !important; }
  .bp-page-accueil .sidebar .tabs { display: none !important; }

  .bp-page-accueil .logo { margin: 0 0 10px !important; }
  .bp-page-accueil .logo-txt { font-size: 15px !important; }

  /* Profil : simple rangée avatar + nom, sans carte */
  .bp-page-accueil .profile {
    background: transparent !important;
    border: none !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
  }
  .bp-page-accueil .profile .avatar { width: 46px !important; height: 46px !important; }
  .bp-page-accueil .p-name { font-size: 16px !important; }

  /* Stats : UNE rangée de pastilles, cœurs · niveau (extensible) · série */
  .bp-page-accueil .stats {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .bp-page-accueil .stat {
    border-radius: 14px !important;
    padding: 9px 11px !important;
    margin: 0 !important;
    min-width: 0;
  }
  .bp-page-accueil .stat.hrt { grid-row: 1; grid-column: 1; }
  .bp-page-accueil .stat.lvl { grid-row: 1; grid-column: 2; }
  .bp-page-accueil .stat.srk { grid-row: 1; grid-column: 3; }

  /* Contenu principal */
  .bp-page-accueil .stage {
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 10px 16px 24px !important;
  }

  .bp-page-accueil .hello { margin: 0 0 12px !important; }
  .bp-page-accueil .hello .h-date { font-size: 10.5px !important; }
  .bp-page-accueil .hello h1 { font-size: 20px !important; line-height: 1.25 !important; }

  /* Leçon du jour : carte héros, bouton pleine largeur */
  .bp-page-accueil .next {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    border-radius: 22px !important;
  }
  .bp-page-accueil .next h2 { font-size: 19px !important; }
  .bp-page-accueil .next .bar { max-width: none !important; }
  .bp-page-accueil .btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 15px 20px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  /* Objectif / chaîne de la semaine (déplacée sous le héros par le JS) */
  .bp-page-accueil .week {
    border-radius: 18px !important;
    padding: 14px !important;
    margin: 12px 0 0 !important;
  }
  .bp-page-accueil .week-head h3 { font-size: 13px !important; }

  /* Carte d'installation PWA : déjà proposée par le navigateur / le
     bandeau d'installation, retirée de l'accueil mobile */
  .bp-page-accueil #pwa-card { display: none !important; }

  /* Raccourcis (révision / quiz) : cartes liste, bouton sous le texte */
  .revbar {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    margin-top: 12px !important;
  }
  .revbar .rv-txt { font-size: 13.5px !important; line-height: 1.45 !important; }
  .revbar .rv-go {
    grid-column: 2;
    justify-self: start;
    padding: 8px 16px !important;
    border-radius: 999px !important;
  }

  /* Section « Votre parcours » : redondante avec l'onglet Parcours
     de la barre du bas, retirée de l'accueil mobile */
  .bp-page-accueil .journey { display: none !important; }

  /* ===============================================================
     4. PAGES AVEC .topbar (leçon, révision, quêtes, boutique)
        En-tête d'application : compact, fond flouté
     =============================================================== */
  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 40;
    background: rgba(11, 18, 32, .9) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 10px 14px !important;
    gap: 12px !important;
  }
  .topbar h1 { font-size: 18px !important; }
  .quit {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    flex-shrink: 0;
  }

  /* Zone de contenu : padding bas selon le footer fixe éventuel */
  .bp-page-lecon .stage,
  .bp-page-revision .stage {
    padding: 12px 14px 175px !important;
  }
  .bp-page-quetes .stage,
  .bp-page-boutique .stage {
    padding: 10px 14px 30px !important;
  }
  .footer-in {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .footer .btn {
    max-width: none !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  /* ===============================================================
     5. LEÇON + RÉVISION (exercices)
     =============================================================== */
  .ex-q { font-size: 18px !important; }
  .disco h2 { font-size: 22px !important; }
  .endscreen h2 { font-size: 22px !important; }

  /* QCM : boutons de réponse tactiles */
  .opts { gap: 10px !important; }
  .opts .opt {
    padding: 15px 16px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  /* Vrai/Faux : 2 colonnes conservées, resserrées */
  .tf { gap: 10px !important; }
  .tf .opt { padding: 17px 10px !important; font-size: 16px !important; border-radius: 16px !important; }

  /* Association : 2 colonnes nécessaires au jeu, tout est resserré */
  .match-grid { gap: 8px !important; }
  .mcard {
    min-height: 56px !important;
    padding: 10px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  /* Texte à trous */
  .gap-slot { min-width: 96px !important; }
  .chip { padding: 11px 16px !important; }

  /* Écran de fin */
  .end-stats { flex-wrap: wrap !important; justify-content: center !important; }

  /* ===============================================================
     6. QUIZ (défs, hebdo) + ACCÈS : classes communes .qbar/.opt/.mrow
     =============================================================== */
  .qtext { font-size: 1rem !important; }

  .card .go, .card .next {
    padding: 15px !important;
    border-radius: 15px !important;
    font-size: 1rem !important;
  }
  .card .opt {
    padding: 13px 14px !important;
    border-radius: 14px !important;
  }

  /* Association quiz : 2 colonnes conservées, resserrées */
  .mrow { gap: 6px !important; }
  .mleft { padding: 10px !important; font-size: .8rem !important; border-radius: 12px !important; }

  .gaptxt .hole { min-width: 76px !important; }

  /* ===============================================================
     7. PAGES AVEC LIEN RETOUR .back (parcours, profil, packs,
        pulsy, accès) : bouton retour façon app
     =============================================================== */
  a.back {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 9px 15px !important;
    border-radius: 999px !important;
    font-size: .84rem !important;
  }

  /* ===============================================================
     8. QUÊTES
     =============================================================== */
  .quest {
    flex-wrap: wrap !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }
  .q-claim {
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  /* ===============================================================
     9. BOUTIQUE / PACKS / PULSY · listes façon app
     =============================================================== */
  .grid  { grid-template-columns: 1fr !important; gap: 10px !important; }     /* boutique */
  .packs { grid-template-columns: 1fr !important; gap: 10px !important; }     /* packs    */
  .items { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* pulsy    */

  .item, .pack { border-radius: 18px !important; }

  /* ===============================================================
     10. PARCOURS
     =============================================================== */
  .resume .grow   { min-width: 150px !important; }
  .acces-box span { min-width: 150px !important; }

  /* ===============================================================
     11. PROFIL
     =============================================================== */
  .titles, .badges {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
  .head .lvl { min-width: 0 !important; flex-basis: 100% !important; }
  .head .avatar { width: 64px !important; height: 64px !important; }
  .pulsy-box { justify-content: center !important; }
  .save { width: 100%; }

  /* ===============================================================
     12. CONNEXION (.bp-page-connexion)
     =============================================================== */
  .bp-page-connexion .stage {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .bp-page-connexion .pulsy-side { flex: none !important; }
  .bp-page-connexion .pulsy-side svg { width: 120px !important; }
  .bp-page-connexion .card { max-width: 100% !important; }
  .bp-page-connexion .tabs button { padding: 13px !important; }
  .go { border-radius: 15px !important; }

  /* ===============================================================
     13. PWA installée : respect de l'encoche / barre système
     =============================================================== */
  @media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); }
    .topbar { top: env(safe-area-inset-top); }
  }
}

/* ==========================================================================
   TRÈS PETITS ÉCRANS (≤ 480px) : affinage
   ========================================================================== */
@media (max-width: 480px) {
  .titles, .badges { grid-template-columns: 1fr !important; }
  #result .big { font-size: 2.2rem !important; }
  .end-stat { min-width: 88px !important; }
}
