/* ============================================================================
   MEETennis — assets/desktop.css
   Adaptation ordinateur. Se charge APRÈS app.css et app-v2.css.

   L'app a été dessinée pour le pouce : une colonne de 460 px et une barre
   d'onglets en bas. Sur un écran de 27 pouces, cette colonne au milieu du
   vide fait « site mobile mal affiché », et la barre du bas se retrouve à
   40 cm de la souris.

   Le parti pris ici n'est pas d'élargir la colonne — un fil de discussion
   large est illisible — mais de RÉORGANISER : la navigation passe à
   gauche, en barre latérale fixe, et la colonne de lecture reste étroite,
   centrée, avec sa respiration autour. C'est la même logique que sur les
   grands réseaux, et ça ne demande aucune duplication de gabarit : le HTML
   est strictement identique sur les deux appareils.

   Trois paliers :
     · < 900 px   → rien, l'app mobile telle quelle
     · 900–1279   → barre latérale compacte (icônes + libellés courts)
     · ≥ 1280 px  → barre latérale complète et colonne plus généreuse
   ============================================================================ */

/* Le bloc d'identité de la barre latérale n'existe que sur grand écran.
   Sans cette règle de base il se retrouvait en bas du fil sur téléphone. */
.side-brand{display:none}

@media (min-width:900px){

  :root{ --side-w:232px; --col-w:660px; }

  body{padding:0;background:var(--body-bg)}

  /* ---- Le cadre : plus de « téléphone au milieu de l'écran » ------------ */
  .app{
    max-width:none;width:100%;margin:0;min-height:100vh;
    border-radius:0;overflow:visible;box-shadow:none;
    background:var(--app-bg);
    padding:0 32px 80px calc(var(--side-w) + 32px);
  }

  /* Tout le contenu vit dans une colonne de lecture centrée. Les enfants
     directs de .app sont les sections des pages : on les contraint d'un
     coup, sans avoir à toucher un seul gabarit PHP. */
  .app > *{max-width:var(--col-w);margin-left:auto;margin-right:auto}

  /* ---- Barre latérale --------------------------------------------------- */
  .tabbar{
    left:0;top:0;bottom:0;transform:none;
    width:var(--side-w);height:100vh;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;
    padding:96px 14px 24px;
    border-top:0;border-right:1px solid rgba(0,0,0,.07);
    border-radius:0;box-shadow:none;
    background:rgba(255,255,255,.97);
  }
  .tabbar .tab{
    flex:none;flex-direction:row;justify-content:flex-start;gap:14px;
    padding:13px 15px;border-radius:14px;font-size:14.5px;font-weight:700;
    transition:background .18s,color .18s;
  }
  .tabbar .tab:hover{background:rgba(225,94,1,.07);color:var(--brand)}
  .tabbar .tab svg{width:21px;height:21px;flex:none}
  .tabbar .tab.active{background:rgba(225,94,1,.12);color:var(--brand)}
  /* Le liseré du haut n'a plus de sens à la verticale : il devient un
     repère à gauche de l'entrée active. */
  .tabbar .tab.active::before{
    top:50%;left:0;transform:translateY(-50%);
    width:3px;height:22px;border-radius:0 3px 3px 0;
  }

  /* Le logo, en haut de la barre latérale. Il est injecté par
     partials/footer.php et reste masqué sur mobile. */
  .side-brand{
    display:flex;
    position:fixed;top:0;left:0;width:var(--side-w);height:96px;z-index:41;
    align-items:center;gap:11px;padding:0 20px;
    background:rgba(255,255,255,.97);border-right:1px solid rgba(0,0,0,.07);
  }
  .side-brand img{width:38px;height:38px;border-radius:11px;flex:none}
  .side-brand b{font:900 17px/1 Montserrat,sans-serif;color:var(--ink);letter-spacing:-.3px}
  .side-brand small{display:block;font-size:11px;color:var(--ink-soft);font-weight:600;margin-top:3px}

  /* ---- Bandeau ---------------------------------------------------------- */
  /* Le héros pleine largeur écrasait la page. On lui donne les mêmes bords
     que les cartes : il devient un en-tête de section, pas un fond d'écran. */
  .app-hero{border-radius:0 0 28px 28px;margin-top:0}
  .app-hero .top{padding:30px 26px 20px}
  .app-hero .hero-search{padding:0 26px 24px}
  .hero-title{font-size:29px}
  .hero-title.greet{font-size:28px}

  /* ---- Le bouton flottant revient dans la colonne ----------------------- */
  .fab{
    right:auto;left:calc(var(--side-w) + 32px + var(--col-w) - 64px);
    bottom:34px;
  }

  /* ---- Ajustements de contenu ------------------------------------------- */
  .post-imgs img{max-height:560px}
  .feed{gap:20px}
  .post{border-radius:20px}
  .menu-row{padding:17px 18px}
  .menu-row .ml{font-size:15.5px}

  /* Les grilles respirent : deux colonnes plutôt qu'une liste étirée. */
  .f-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .lib-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .rs-group .rs-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* La feuille de publication se comporte en boîte de dialogue centrée :
     une feuille collée en bas d'un écran de 1 400 px n'a aucun sens. */
  .sheet-pub{
    left:50%;bottom:auto;top:50%;max-width:480px;
    border-radius:24px;transform:translate(-50%,-46%) scale(.97);
    opacity:0;transition:transform .24s cubic-bezier(.22,.9,.3,1),opacity .18s;
    padding:20px 22px 24px;
  }
  .sheet-pub.on{transform:translate(-50%,-50%);opacity:1}
  .sheet-pub .grip{display:none}
}

/* ---- Grand écran : on donne un peu plus d'air ----------------------------- */
@media (min-width:1280px){
  :root{ --side-w:264px; --col-w:720px; }
  .app{padding-right:48px}
  .hero-title{font-size:32px}
}

/* ---- Pointeur fin : on rend les états de survol utiles -------------------- */
@media (hover:hover) and (pointer:fine){
  .post-acts .pa,.menu-row,.f-card,.pub-opt,.gm-card,.fo-item{transition:background .16s,box-shadow .16s}
  .menu-row:hover,.fo-item:hover{background:rgba(225,94,1,.05)}
  .f-card:hover{box-shadow:var(--shadow-card)}
  .poll-opt{transition:border-color .16s,background .16s}
}

/* La barre latérale n'existe pas à l'impression. */
@media print{ .side-brand{display:none !important} }