/* ── REPRISE (IA + humain) ── bloo-header ──
 * FICHIER : assets/css/bloo-www-mobile.css
 * ROLE : Barre de navigation basse app-like pour le site vitrine en mobile (<=768px). Masquee sur bureau.
 *        Barre fixe en bas (5 onglets), panneau "Plus" en feuille coulissante, en-tete compact, marge basse
 *        pour le contenu, sections du pied pliables.
 * ENTREES/SORTIES : .app-bar, .app-bar-tab, .app-more, .app-more-scrim, .app-more-sheet, .app-more-handle,
 *                   .app-more-grid, .app-more-actions, .app-more-row, .ft-col-toggle, .ft-col-body.
 *                   Variables attendues : --nav-bg, --color-outline-variant, --color-on-surface-faint,
 *                   --color-primary, --color-surface-container, --surf-glass, --color-primary-container,
 *                   --color-on-surface, --font-sans, --motion-dur, --motion-ease, --radius-card, --radius-btn,
 *                   --radius-pill, --layout-nav-h.
 * DEPEND : tokens.css (tokens), bloo-www-2026.css (boutons .btn, .burger, .nav-cta, .nav-links), bloo-site-footer.css
 *          (.ft, .ft-grid, .ft-grid5, .ft-bottom).
 * APPELE PAR : www/_partials/header.php via bloo_inline_css() (recopiee inline <style id="www-mobile">).
 *              Pages statiques (www/index.html…) : copie inline <style id="www-mobile">.
 * REPRISE :
 *   - Tout le contenu est dans des @media : aucun style n'affecte le bureau.
 *   - env(safe-area-inset-bottom) gere les encoches iOS (iPhone a barre d'accueil).
 *   - La barre utilise les memes icones FA que le reste du site (sous-ensemble fa-site.min.css).
 *   - L'onglet actif est marque .on par bloo-www-mobile.js cote client.
 * MAJ :
 *   - 2026-10-26 · Connexion + Inscription compactes dans l'en-tête ; boutons flottants (accessibilité, haut de page) au-dessus de la barre
 *   - 2026-10-26 · rel3440 · creation
 * ── fin REPRISE ── */

/* ============================================================
   MOBILE APP BAR — visible uniquement sous 769px
   ============================================================ */
@media(max-width:768px){
  /* Compact header */
  :root{--layout-nav-h:56px}
  header.nav{height:56px}
  /* [2026-10-26] Connexion et Inscription restent dans l'en-tête (compactes) ; la langue passe dans « Plus » */
  header.nav .nav-cta .lang{display:none}
  header.nav .nav-cta .btn-ghost,
  header.nav .nav-cta .btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;height:40px;padding:0 12px;font-size:13px;white-space:nowrap;border-radius:var(--radius-btn,12px)}
  header.nav .nav-cta .btn-primary{font-size:0}
  header.nav .nav-cta .btn-primary::after{font-size:13px;font-weight:600;content:"S\2019inscrire"}
  html[lang^="nl"] header.nav .nav-cta .btn-primary::after{content:"Registreren"}
  html[lang^="de"] header.nav .nav-cta .btn-primary::after{content:"Registrieren"}
  html[lang^="en"] header.nav .nav-cta .btn-primary::after{content:"Sign up"}
  header.nav .nav-cta{margin-left:auto;min-width:0}
  header.nav .burger{display:none!important}
  header.nav .nav-cta{gap:8px}
  html{scroll-padding-top:56px}

  /* [2026-10-27] Rendu « app mobile » (demande de Gilles) : pas de surbrillance grise ni de délai au toucher, appui visible, feuille « Plus »
     qu'on referme en la tirant vers le bas (bloo-www-mobile.js), pas de sélection de texte sur les commandes */
  html{-webkit-tap-highlight-color:transparent}
  a,button,summary,label,select,[role="button"],[role="tab"]{touch-action:manipulation}
  .app-bar,.app-more-sheet,.btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .app-bar-tab .lc,.btn{transition:transform .12s ease-out}
  .app-bar-tab:active .lc{transform:scale(.86)}
  .btn:active{transform:scale(.97)}
  .app-more-sheet{overscroll-behavior:contain;touch-action:pan-y}

  /* ── Bottom tab bar ── */
  .app-bar{
    position:fixed;bottom:0;left:0;right:0;z-index:60;
    display:flex;align-items:stretch;justify-content:space-around;
    height:calc(60px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--nav-bg,rgba(255,255,255,.94));
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--color-outline-variant,var(--line,#e3e6ee))
  }
  .app-bar-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;flex:1;min-width:0;padding:6px 4px;
    background:none;border:none;
    color:var(--color-on-surface-faint,var(--ink-3,#8078a0));
    font-family:var(--font-sans,var(--sans,system-ui,sans-serif));font-size:10px;font-weight:600;
    text-decoration:none;cursor:pointer;
    transition:color var(--motion-dur,.2s) var(--motion-ease,ease);
    -webkit-tap-highlight-color:transparent
  }
  .app-bar-tab .lc{width:20px;height:20px}
  .app-bar-tab span{display:block;line-height:1}
  .app-bar-tab.on{color:var(--color-primary,var(--brand,#100848))}
  .app-bar-tab:active{opacity:.7}

  /* ── Boutons flottants (accessibilité, retour en haut) : toujours AU-DESSUS de la barre du bas, jamais dessus ── */
  .fab-a11y,.fab-top{width:44px;height:44px;bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
  .fab-a11y{left:12px!important}
  .fab-top{right:12px!important}
  .a11y-panel{left:12px!important;bottom:calc(124px + env(safe-area-inset-bottom,0px))!important}
  body:has(.app-more.open) .fab{display:none}
  /* Boutons flottants au repos (1,5 s sans toucher) : translucides, on voit le contenu derrière ; ils se réveillent au toucher */
  .fab-a11y,.fab-top.show{transition:opacity 1.6s ease,background-color 1.6s ease,color 1.6s ease,box-shadow 1.2s ease,transform .2s}
  .fab-a11y.fab-idle{opacity:.4;box-shadow:none}
  .fab-top.show.fab-idle{opacity:.45;background:color-mix(in srgb,var(--brand,#2f6bff) 12%,transparent);color:#111;border-color:transparent;box-shadow:none}

  /* ── Content clearance ── */
  main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  footer.ft{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}

  /* ── "Plus" bottom sheet ── */
  .app-more{
    position:fixed;inset:0;z-index:80;
    display:flex;flex-direction:column;justify-content:flex-end;
    visibility:hidden;opacity:0;
    transition:opacity .2s var(--motion-ease,ease),visibility 0s linear .2s
  }
  .app-more.open{
    visibility:visible;opacity:1;
    transition:opacity .2s var(--motion-ease,ease),visibility 0s
  }
  .app-more-scrim{
    position:absolute;inset:0;
    background:rgba(6,10,22,.55);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)
  }
  .app-more-sheet{
    position:relative;z-index:1;
    background:var(--color-surface-container,var(--surf-2,#f3f4f8));
    border-radius:20px 20px 0 0;
    border-top:1px solid var(--color-outline-variant,var(--line,#e3e6ee));
    padding:8px 20px calc(76px + env(safe-area-inset-bottom,0px));
    max-height:80vh;overflow-y:auto;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.2,.7,.2,1)
  }
  .app-more.open .app-more-sheet{transform:none}
  .app-more-handle{
    width:36px;height:4px;border-radius:2px;
    background:var(--color-on-surface-faint,var(--ink-3,#8078a0));opacity:.4;
    margin:0 auto 16px
  }
  .app-more-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    margin-bottom:16px
  }
  .app-more-grid a{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:16px 8px;
    border-radius:var(--radius-card,16px);
    background:var(--surf-glass,var(--nav-bg,rgba(255,255,255,.9)));
    border:1px solid var(--color-outline-variant,var(--line,#e3e6ee));
    color:var(--color-on-surface,var(--ink,#14172b));
    font-size:12px;font-weight:600;text-align:center;text-decoration:none;
    transition:background var(--motion-dur,.2s)
  }
  .app-more-grid a .lc{width:22px;height:22px;color:var(--color-primary,var(--brand,#100848))}
  .app-more-grid a:active{background:var(--color-primary-container,var(--surf-2,rgba(16,8,72,.08)))}
  .app-more-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
  .app-more-actions .btn{width:100%;justify-content:center}
  .app-more-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 0;border-top:1px solid var(--color-outline-variant,var(--line,#e3e6ee))
  }
  .app-more-row-label{font-weight:600;font-size:13px;color:var(--color-on-surface,var(--ink,#14172b))}
  .app-more-row .lang{
    display:flex;gap:4px;
    border:1px solid var(--color-outline-variant,var(--line,#e3e6ee));border-radius:9px;padding:2px
  }
  .app-more-row .lang a{
    font-size:13px;font-weight:700;
    color:var(--color-on-surface-faint,var(--ink-3,#8078a0));
    padding:6px 10px;border-radius:7px;
    text-decoration:none;
    transition:background var(--motion-dur,.2s),color var(--motion-dur,.2s)
  }
  .app-more-row .lang a.on{color:var(--color-on-surface,var(--ink,#14172b));background:var(--surf-glass,var(--nav-bg,rgba(255,255,255,.9)))}

  /* ── Footer sections collapsible ── */
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>h4{
    cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    padding:12px 0;margin-bottom:0
  }
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>h4::after{
    content:"";display:inline-block;width:8px;height:8px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .2s;opacity:.5
  }
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>h4.open::after{
    transform:rotate(-135deg)
  }
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>a{
    max-height:0;overflow:hidden;padding:0;margin:0;opacity:0;
    transition:max-height .25s ease,opacity .2s,padding .2s
  }
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>h4.open~a,
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>h4.open~button{
    max-height:44px;opacity:1;padding:5px 0
  }
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>button.ft-linkbtn{
    max-height:0;overflow:hidden;padding:0;margin:0;opacity:0;
    transition:max-height .25s ease,opacity .2s,padding .2s
  }
  .ft .ft-grid.ft-grid5{grid-template-columns:1fr!important}
  .ft .ft-grid.ft-grid5>div:not(.ft-brand){border-top:1px solid rgba(255,255,255,.08)}

  /* [2026-10-27] Audit réel de 517 pages à 375 px : croix du bandeau d'annonce (www-index-annonce.js) trop petite sur 184 pages,
     listes à puces à mots composés longs (NL/DE : Ons bos, Unser Wald) et tableau des secrets (Développeurs NL/DE) qui débordaient */
  .annc-x{min-width:44px;min-height:44px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center}
  .pg-features{grid-template-columns:minmax(0,1fr)!important}
  .pg-features li{min-width:0;overflow-wrap:anywhere;hyphens:auto}
  table.dv-tbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* [2026-10-27] Transition de page douce entre deux pages du site (navigateurs qui la gèrent ; ignorée sinon et si « réduire les animations ») */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* Desktop — bar and sheet hidden */
@media(min-width:769px){
  .app-bar,.app-more{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .app-bar-tab .lc,.btn{transition:none!important}
  .app-bar-tab:active .lc,.btn:active{transform:none!important}
  .app-more-sheet{transition:none!important}
  .app-more{transition:none!important}
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>a,
  .ft .ft-grid.ft-grid5>div:not(.ft-brand)>button.ft-linkbtn{transition:none!important}
}

@media(max-width:349px){
  header.nav .nav-cta .btn-primary{display:none}
}