/* ================================================================
   BARAHEEN v7.9 — COUCHE MOBILE
   Chargée en dernier. Ne redéfinit pas le design : elle le durcit
   pour les petits écrans et ajoute la coque applicative (PWA).
   ================================================================ */

/* ---------------------------------------------------------------
   1. GARDE-FOU CONTRE LE DÉBORDEMENT HORIZONTAL
   La cause n°1 d'une « vue tronquée » sur téléphone est un élément
   plus large que le viewport qui crée un défilement latéral.
   --------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }

img, video, iframe, svg, canvas, embed, object {
  max-width: 100%;
  height: auto;
}
pre, code, kbd { max-width: 100%; overflow-x: auto; }

/* Les mots très longs (URL, translittérations) ne poussent plus la page */
p, li, h1, h2, h3, h4, td, th, .mtitle, .shub-card h3 { overflow-wrap: anywhere; }

/* Toute grille peut se réduire : sans min-width:0 une piste 1fr
   refuse de descendre sous la largeur de son contenu. */
.mid > *, .ed-grid > *, .arts > *, .shub-grid > *, .cgrid > * { min-width: 0; }

/* Tableaux : défilement local plutôt que débordement de page */
.entry table, .page-content table { display: block; overflow-x: auto; max-width: 100%; }

/* ---------------------------------------------------------------
   2. ZONES SÛRES (encoche, barre gestuelle)
   --------------------------------------------------------------- */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --botnav-h: 62px;
}
.wrap { padding-inline: max(20px, var(--safe-l)) max(20px, var(--safe-r)); }
.site-header { padding-top: var(--safe-t); }

/* ---------------------------------------------------------------
   3. TYPOGRAPHIE FLUIDE
   --------------------------------------------------------------- */
@media (max-width: 780px) {
  h1, .hero h1, .acct-head h1 { font-size: clamp(21px, 5.6vw, 30px); line-height: 1.45; }
  h2, .v6-head h2, .arts-head h2 { font-size: clamp(18px, 4.6vw, 24px); }
  h3 { font-size: clamp(15.5px, 4vw, 19px); }
  .hero p.lead, .hero-in p.lead { font-size: 14.5px; }
  .entry, .page-content { font-size: 15.5px; line-height: 1.95; }
}

/* ---------------------------------------------------------------
   4. CIBLES TACTILES ≥ 44 px  (recommandation WCAG 2.5.5)
   --------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn, .icbtn, .ak-filters a, .acct-tabs a, .nav-main a,
  .macts .btn, .sc-item, .pill-tv {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .ed-bar button { min-width: 42px; min-height: 42px; }
  input, select, textarea {
    font-size: 16px;    /* < 16px déclenche le zoom automatique sur iOS */
    min-height: 44px;
  }
  textarea { min-height: 96px; }
}

/* ---------------------------------------------------------------
   5. REPLIS DE MISE EN PAGE
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* Aucune colonne collante sur petit écran : elle mange la hauteur utile */
  .side-stack, .pcard-side, .ed-side, .acct-side { position: static !important; }
}

@media (max-width: 700px) {
  .wrap { padding-inline: max(15px, var(--safe-l)) max(15px, var(--safe-r)); }
  .arts, .arts.cols3, .cgrid, .pillars, .stats-bar,
  .shub-grid, .f-row, .f-nets, .sc-grid { grid-template-columns: 1fr !important; }
  .site-footer .grid { grid-template-columns: 1fr; }
  .card, .acct-card, .ed-card { padding: 18px 16px; }
  .book-incol .in, .book .in { padding: 22px 16px; }

  /* En-têtes de section : titre puis lien, sans écrasement */
  .arts-head, .v6-head { flex-wrap: wrap; gap: 8px; }

  /* Liste des articles du membre */
  .mrow { flex-direction: column; align-items: stretch; }
  .macts { width: 100%; }
  .macts .btn { flex: 1; justify-content: center; }

  /* Onglets défilables plutôt que repliés sur 3 lignes */
  .acct-tabs, .ak-filters {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-block-end: 4px;
  }
  .acct-tabs::-webkit-scrollbar, .ak-filters::-webkit-scrollbar { display: none; }
  .acct-tabs a, .ak-filters a { flex: 0 0 auto; }

  /* En-tête de profil centré */
  .acct-head { flex-direction: column; text-align: center; }
  .acct-head .btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .acct-av { width: 62px; height: 62px; font-size: 24px; }
  .ed-title { font-size: 19px; }
  .st { font-size: 11px; padding: 2px 9px; }
}

/* ---------------------------------------------------------------
   6. BARRE DE NAVIGATION INFÉRIEURE (coque applicative)
   --------------------------------------------------------------- */
.botnav { display: none; }

@media (max-width: 860px) {
  .botnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    padding-bottom: var(--safe-b);
  }
  .botnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--botnav-h);
    padding: 7px 4px;
    color: var(--muted);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 800;
    transition: color .16s;
    position: relative;
  }
  .botnav a svg { width: 21px; height: 21px; }
  .botnav a.on { color: var(--gold); }
  .botnav a.on::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 26%;
    height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: var(--gold);
  }
  .botnav a:active { background: color-mix(in srgb, var(--gold) 9%, transparent); }

  .botnav .bdot {
    position: absolute;
    top: 8px;
    inset-inline-end: 26%;
    min-width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--live);
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
    display: grid;
    place-items: center;
    padding-inline: 3px;
  }

  /* Réserve l'espace pour que rien ne passe sous la barre */
  body { padding-bottom: calc(var(--botnav-h) + var(--safe-b)); }
  .backtop { bottom: calc(var(--botnav-h) + var(--safe-b) + 14px); }
}

/* ---------------------------------------------------------------
   7. MENU PRINCIPAL EN PLEIN ÉCRAN
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-main {
    inset: calc(66px + var(--safe-t)) 0 0 0 !important;
    overflow-y: auto;
    padding-bottom: calc(var(--botnav-h) + var(--safe-b) + 20px) !important;
    gap: 2px;
  }
  .nav-main a {
    padding: 13px 6px;
    border-bottom: 1px solid var(--border) !important;
    font-size: 15.5px;
  }
  .nav-main a.active { border-bottom-color: var(--gold) !important; }
  body.nav-open { overflow: hidden; }   /* évite le double défilement */
}

/* ---------------------------------------------------------------
   8. INVITE D'INSTALLATION
   --------------------------------------------------------------- */
.pwa-prompt {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(var(--botnav-h) + var(--safe-b) + 12px);
  z-index: 80;
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 14px 40px #0004;
}
.pwa-prompt.show { display: flex; }
.pwa-prompt img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.pwa-prompt .tx { flex: 1; min-width: 0; }
.pwa-prompt b { display: block; font-size: 13.5px; color: var(--strong); }
.pwa-prompt span { font-size: 11.5px; color: var(--muted); }
.pwa-prompt button {
  border: none; border-radius: 999px; padding: 9px 17px;
  font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer;
  background: var(--gold); color: #0B1220; flex: none;
}
.pwa-prompt .x {
  background: transparent; color: var(--muted);
  padding: 6px 9px; font-size: 17px;
}

/* En mode application installée, l'invite et le pied de page sont inutiles */
@media (display-mode: standalone) {
  .pwa-prompt { display: none !important; }
  .site-footer .grid { display: none; }
}

/* ---------------------------------------------------------------
   9. CONFORT
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .botnav, .pwa-prompt, .side-stack, .backtop, .join-band { display: none !important; }
  .mid { grid-template-columns: 1fr !important; }
}