/* Fluvo — mise en page telephone.
   L'interface heritee de Kaleo est faite pour trois colonnes cote a cote.
   Sous 760 px on passe a UNE colonne : la liste, puis la conversation
   par-dessus, avec un bouton retour. Le rail devient un dock flottant en bas
   (couleurs : net.css §17). */

@media (max-width: 760px) {
  html, body { overscroll-behavior-y: none; }

  #app {
    flex-direction: column;
    padding: 0 !important;
    gap: 0 !important;
    height: 100dvh;
    background: var(--n-surf);
  }

  /* --- rail : dock flottant en bas, détaché des bords --- */
  #rail {
    order: 3;
    width: auto !important;
    margin: 4px 10px calc(10px + env(safe-area-inset-bottom));
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    flex-direction: row !important;
    justify-content: space-around;
    align-items: center;
    gap: 0 !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 22px !important;
    overflow-x: auto;
    z-index: 40;
  }
  #logo-rail, .rail-sep { display: none !important; }
  #rail .rail-haut, #rail .rail-reseaux {
    display: flex; flex-direction: row; gap: 2px; align-items: center;
  }
  /* Vues et réseaux défilent ; Réglages reste à droite, jamais coupé (320 px). */
  #rail .rail-haut, #rail .rail-reseaux { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #rail .rail-haut { flex: 0 1 auto; }
  #rail .rail-reseaux { flex: 0 1 auto; max-width: 42vw; }
  #b-reglages { flex: none; }
  .rail-item { padding: 5px 8px !important; min-width: 52px; min-height: 44px; }
  .rail-item .ri { font-size: 19px; }

  /* --- panneau : plein ecran par defaut --- */
  #panneau {
    order: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0;
  }
  #panneau .h { padding-top: calc(8px + env(safe-area-inset-top)); }

  /* --- conversation : par-dessus, seulement quand elle est ouverte --- */
  #vue {
    order: 2;
    position: fixed;
    inset: 0;
    z-index: 50;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.mob-conv #vue { display: flex; }
  body.mob-conv #panneau, body.mob-conv #rail { display: none !important; }

  /* --- lisibilite --- */
  .fil { padding: 10px 12px 8px !important; }
  .msg, #vue .msg { max-width: 88% !important; }
  .saisie input, .saisie textarea { font-size: 16px !important; }  /* < 16px : iOS zoome */
  .rech input { font-size: 16px !important; }
  .liste .chat { padding-top: 12px !important; padding-bottom: 12px !important; }
  #vue header.h h1 { font-size: 16.5px; }
  #panneau header.h h1 { font-size: 26px; }

  /* --- bouton retour injecte par mobile.js --- */
  .mob-retour {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-right: 6px; flex: none;
    border: 1px solid var(--bord); border-radius: 10px;
    background: var(--bg3); color: var(--txt); font-size: 19px; line-height: 1;
    cursor: pointer;
  }
  .mob-retour:active { background: var(--bg4); }

  /* --- modales : plein ecran --- */
  .modal .boite {
    width: 100vw !important; max-width: 100vw !important;
    max-height: 100dvh !important; border-radius: 0 !important;
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
  }
  .frg-corps { max-height: none !important; }
}

@media (max-width: 760px) and (orientation: landscape) {
  #rail { margin-bottom: 6px; }
}

/* Galerie « Tous les médias » sur téléphone : l'en-tête était en une seule
   ligne sans retour, le bouton « Chercher » et la croix sortaient de l'écran —
   la recherche par description semblait ne pas marcher. */
@media (max-width: 760px) {
  #gglobale .gh { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  #gglobale .gh b { flex: 1 1 auto; order: 1; }
  #gglobale .gh .icone { order: 2; margin-left: auto; }
  #gglobale .gh .q { order: 3; flex: 1 1 55%; min-width: 0; }
  #gglobale .gh .go-visuel { order: 4; flex: none; padding: 8px 14px; }
  #gglobale .gfiltres { padding: 8px 12px; gap: 6px; }
  #gglobale .info { margin-left: 0; width: 100%; }
}