/* 07/11 (patron, chantier mobile étape a) : coquille du réseau social sur téléphone.
   Chargé sur toutes les pages sociales (server.page). Ne s'applique qu'en dessous de 820 px.
   - En-tête : hauteur = barre + zone sûre de l'iPhone (sinon le contenu remonte dans la barre d'état) ; fond plein, sans flou.
   - Bouton menu : cible de 44 px minimum, forme ovale, bien centré dans l'en-tête.
   - Rigidité d'application : pas de défilement ni d'élastique latéral, pas de rebond vertical du fond. */

@media (max-width: 820px) {
  html, body {
    overflow-x: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
  }

  /* en-tête : la hauteur inclut la zone sûre, le contenu reste sous la barre d'état */
  .top {
    height: calc(var(--top, 56px) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    align-items: center;
    background: #070b16;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .top .ico,
  .top .gr-top,
  .top .srch-ic {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* bouton menu : net, ovale, 44 px, pouce */
  .top .ico.burger {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 2px;
    border-radius: 999px;
    background: rgba(247, 201, 72, .12);
    border: 1px solid rgba(247, 201, 72, .55);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .top .ico.burger .ic { width: 22px; height: 22px; }
}

/* 07/11 (étape b) : fil plein écran, défilement vertical par carte (fil_mixte.py : .fx-feed > article.fx) */
@media (max-width: 820px) {
  html:has(.fx-feed) { scroll-snap-type: y proximity; }
  .fx-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 16px;
  }
  .fx-feed > article.fx {
    scroll-snap-align: start;
    min-height: calc(100dvh - 190px);
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
  }
  .fx-feed > article.fx .fx-img img,
  .fx-feed > article.fx .fx-mt img {
    width: 100%;
    max-height: 62dvh;
    object-fit: cover;
  }
  .fx-feed a,
  .fx-feed button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* 07/11 (page sociale mobile) : sur le profil, le FLUX est la page principale — une seule pile verticale plein écran, tous types mélangés
   (idées, analyses, photos, vidéos, audios, podcasts) ; rubriques du profil en pastilles défilables dans leur propre ligne */
@media (max-width: 820px) {
  html:has(.pp .feed) { scroll-snap-type: y proximity; }
  .pp .feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 16px;
  }
  .pp .feed > article.card {
    scroll-snap-align: start;
    min-height: calc(100dvh - 190px);
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
  }
  .pp .feed > article.card img {
    max-width: 100%;
    max-height: 62dvh;
    object-fit: cover;
  }
  .pp-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 6px;
  }
  .pp-nav::-webkit-scrollbar { display: none; }
  .pp-nav > a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    white-space: nowrap;
  }
}

/* 07/11 (bascule Flux / Grille du profil) : le flux reste la vue principale, la grille est la vue d'ensemble */
.pp-vue { display: none; }
@media (max-width: 820px) {
  .pp-vue {
    display: flex;
    gap: 8px;
    margin: 6px 0 12px;
  }
  .pp-vue button {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(138, 149, 168, .4);
    background: transparent;
    color: inherit;
    font: 700 14px system-ui;
  }
  .pp-vue button.on {
    background: #f7c948;
    border-color: #f7c948;
    color: #111;
  }
  .pp.vue-grille .feed.pp-feed {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;   /* écrase .pp-feed (important, profil) */
    gap: 3px;
    padding: 0;
  }
  .pp.vue-grille .feed > article.card {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    scroll-snap-align: none;
  }
  .pp.vue-grille .feed > article.card > * { display: none; }
  .pp.vue-grille .feed > article.card > *:has(img) {
    display: block;
    position: absolute;
    inset: 0;
  }
  .pp.vue-grille .feed > article.card img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
  .pp.vue-grille .feed > article.card:not(:has(img)) {
    display: flex;
    align-items: flex-end;
    padding: 10px;
  }
  .pp.vue-grille .feed > article.card:not(:has(img)) > * {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
  }
}

/* 07/11 (points 3, 4, 5) — titre lisible en clair ; accueil du fil allégé sur téléphone ; bouton flottant masqué pendant le défilement */
:root[data-theme=light] .fx-trbar-hd b,
html[data-theme=light] .fx-trbar-hd b { color: #0f1628; }

@media (max-width: 820px) {
  html:has(.fx-feed) nav.cmu,
  html:has(.fx-feed) section.ecl-fil { display: none !important; }
  html.sm-scroll .dk-el,
  html.sm-scroll .bt-fab {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .dk-el, .bt-fab { transition: opacity .2s ease; }
}

/* 07/11 (flux façon TikTok, point 1) : actions (iris, notes, commentaires, partage) en colonne à droite de la carte,
   même composant de réactions (referencement.py .rf-bar) ; le texte de la carte laisse la place à la colonne */
@media (max-width: 820px) {
  /* carte en deux colonnes : le contenu à gauche (il ne passe jamais sous la colonne), la barre d'actions sur le bord droit */
  .fx-feed > article.fx {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    column-gap: 6px;
    align-items: start;
  }
  .fx-feed > article.fx > * { grid-column: 1; min-width: 0; }
  .fx-feed > article.fx > .rf-bar {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0 0 12px;
    z-index: 2;
  }
  .fx-feed > article.fx .rf-bar .rf-b {
    width: 50px;
    min-height: 50px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    background: rgba(7, 11, 22, .72);
    border: 1px solid rgba(247, 201, 72, .45);
  }
}

/* 07/11 (barre du bas, décision du patron) : Accueil · Amis · ŒIL de création (centre) · Messages · Profil */
@media (max-width: 820px) {
  .sg-bottom { justify-content: space-around; align-items: flex-end; }
  .sg-bottom > a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
  }
  .sg-bottom > a em { font-style: normal; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .sg-bottom > a.bt-cre { flex: 0 0 auto; padding: 0 6px; }
  .bt-cre-o {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 46px;
    border-radius: 0;
    clip-path: polygon(0.0% 50.0%, 6.2% 38.3%, 12.5% 28.1%, 18.8% 19.5%, 25.0% 12.5%, 31.2% 7.0%, 37.5% 3.1%, 43.8% 0.8%, 50.0% 0.0%, 56.2% 0.8%, 62.5% 3.1%, 68.8% 7.0%, 75.0% 12.5%, 81.2% 19.5%, 87.5% 28.1%, 93.8% 38.3%, 100.0% 50.0%, 93.8% 61.7%, 87.5% 71.9%, 81.2% 80.5%, 75.0% 87.5%, 68.8% 93.0%, 62.5% 96.9%, 56.2% 99.2%, 50.0% 100.0%, 43.8% 99.2%, 37.5% 96.9%, 31.2% 93.0%, 25.0% 87.5%, 18.8% 80.5%, 12.5% 71.9%, 6.2% 61.7%);   /* amande d'œil, comme la photo de profil */
    background: #f7c948;
    color: #111;
    box-shadow: 0 0 0 3px rgba(247, 201, 72, .22);
  }
  .bt-cre-o .ic { width: 30px; height: 30px; }
  .bt-cre-o b {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #111;
    color: #f7c948;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .bt-cre-o b .ic { width: 12px; height: 12px; }
}

/* 07/11 (décision du patron) : la barre du bas revient sur TOUS les téléphones (elle était masquée depuis le 31/10 par charte.css) */
@media (max-width: 820px) {
  nav.sg-bottom { display: flex !important; }
}

/* 07/11 : cinq onglets de même largeur ; l'œil central garde sa taille */
@media (max-width: 820px) {
  nav.sg-bottom > a:not(.bt-cre) { flex: 1 1 0 !important; width: 0; }
  nav.sg-bottom > a.bt-cre { flex: 0 0 76px !important; width: 76px; }
}

/* 07/11 (patron) : barre du bas uniquement dans le SIGHT Network ; Campus, Studio, Affiliate, etc. n'en ont pas */
@media (max-width: 820px) {
  nav.sg-bottom[data-reseau="0"] { display: none !important; }
}

/* Tranche 1 (07/11, patron) — barre d'onglets du réseau, défilable : LIVE à gauche, Pour toi · Boutique · Suivi · Communauté ; Boutique en « bientôt » (marketplace en stand-by) */
.sg-tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; background: rgba(2, 5, 12, .9); border-bottom: 1px solid rgba(247, 201, 72, .14); position: sticky; top: var(--top, 56px); z-index: 19; }
.sg-tabs::-webkit-scrollbar { display: none; }
.sg-tab, .sg-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(247, 201, 72, .22); color: #d8dfef; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.sg-tab.on { background: #f7c948; color: #111; border-color: #f7c948; }
.sg-tab.soon { opacity: .55; cursor: default; }
.sg-tab.soon small { margin-left: 6px; font-size: 11px; font-weight: 600; color: #9aa6c2; }
.sg-live { color: #ff5c74; border-color: rgba(255, 92, 116, .45); letter-spacing: .04em; }
.sg-live .ic { width: 20px; height: 20px; }