/* =====================================================================
   collègues · version mobile (téléphones, jusqu'à 760 px)
   Chargé après app.css : on ne touche qu'aux téléphones, le bureau reste
   identique. Direction graphique gardée : fond crème, anthracite, Inter.
   ===================================================================== */

/* La barre d'onglets du bas n'existe que sur téléphone */
.mnav{display:none}

@media (max-width:760px){

  /* ---------- Bases ---------- */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{overflow-x:clip}
  html body{-webkit-tap-highlight-color:transparent}
  /* iPhone zoome sur un champ dont le texte fait moins de 16 px : on l'évite */
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]),
  html body select,html body textarea{font-size:16px!important}
  html body .wrap{padding-left:16px!important;padding-right:16px!important}

  /* ---------- Page publique : en-tête sur une seule ligne ---------- */
  html body:not(.shell):not(.room) #top{
    position:sticky;top:0;z-index:40;flex-wrap:nowrap!important;gap:10px!important;
    padding:10px 16px!important;margin:0 -16px!important;
    background:rgba(246,243,236,.86);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid rgba(230,225,214,.9)}
  html body:not(.shell):not(.room) #top .brand{flex:none;transform:scale(.86);transform-origin:left center;margin-right:-14px}
  html body:not(.shell):not(.room) #top .authbtns{margin-left:auto;gap:6px}
  html body:not(.shell):not(.room) #top .authbtns button{padding:8px 13px!important;font-size:.84rem!important;white-space:nowrap}
  html body:not(.shell):not(.room) #top .right{display:none!important}

  /* Héros : moins de vide, boutons pleine largeur */
  html body:not(.shell):not(.room) .board-head{padding-top:30px!important;padding-bottom:8px!important;gap:12px!important}
  html body:not(.shell):not(.room) .board-head h1{font-size:clamp(2.6rem,12.5vw,3.4rem)!important}
  html body:not(.shell):not(.room) .board-head .lead{font-size:1.02rem!important}
  html body:not(.shell):not(.room) .board-head .hero-cta{justify-self:stretch!important;display:grid!important;width:100%;gap:10px!important}
  html body:not(.shell):not(.room) .board-head .hero-cta .btn{width:100%!important;justify-content:center;min-height:52px}
  html body:not(.shell):not(.room) .board{row-gap:28px!important;gap:28px!important}
  html body:not(.shell):not(.room) .pillars{margin-top:8px!important;gap:14px!important}
  html body:not(.shell):not(.room) .mq{margin-top:36px!important;margin-bottom:0!important}
  html body:not(.shell):not(.room) .bento{margin-top:56px!important;gap:20px!important}
  html body:not(.shell):not(.room) .bento.sec2{padding-top:64px!important;padding-bottom:72px!important}
  html body:not(.shell):not(.room) .bigq{margin:56px 0 0!important;padding:20px 0!important}
  html body:not(.shell):not(.room) .final{margin-top:48px!important}
  html body:not(.shell):not(.room) .bigc,html body:not(.shell):not(.room) .bt{padding-left:18px!important;padding-right:18px!important}

  /* Les jours du programme : une ligne qui défile au doigt */
  html body .seances-pick,html body .seances-pick > *,html body .bc-bar,html body .bc-bar > *{min-width:0!important;max-width:100%}
  html body .seances-pick .days{
    flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scrollbar-width:none;width:100%;gap:4px!important}
  html body .seances-pick .days::-webkit-scrollbar{display:none}
  html body .seances-pick .days > *{flex:none!important;white-space:nowrap!important}
  html body .bc-bar{flex-wrap:wrap!important}

  /* Choix mensuel / trimestriel / annuel : tient sur une ligne */
  html body .pbill,html body .bill{display:flex!important;flex-wrap:nowrap!important;gap:2px!important;width:100%;max-width:100%}
  html body .pbill > *,html body .bill > *{flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap;padding-left:6px!important;padding-right:6px!important;font-size:.8rem!important}
  html body .pbill em,html body .bill em,html body .pbill small,html body .bill small{margin-left:4px!important;padding:2px 5px!important;font-size:.7rem!important}

  /* Lignes qui défilent de côté : jamais de défilement vertical à l'intérieur
     (sur iPhone, un glissé un peu en biais faisait descendre les onglets sous leur trait) */
  html body .rtabs,html body .seg,html body .seances-pick .days,html body.shell .pghead .acts,html body.room .lv-chips,html body .pipe{
    overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  html body .rtabs{scroll-snap-type:x proximity;scrollbar-width:none}
  html body .rtabs::-webkit-scrollbar{display:none}
  html body .rtabs button{flex:none!important;margin-bottom:0!important;scroll-snap-align:start}

  /* ---------- Contrôles segmentés : une ligne qui défile ---------- */
  html body .seg{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;max-width:100%}
  html body .seg::-webkit-scrollbar,html body .pbill::-webkit-scrollbar{display:none}
  html body .seg > *{flex:none!important;white-space:nowrap;scroll-snap-align:start}

  /* ---------- Espace membre ---------- */
  /* Une ligne qui défile ne doit jamais élargir la page */
  html body section[data-view] .view-grid > *,html body .se-bar,html body .se-bar > *,html body .svsa,html body .svsa > *{min-width:0!important;max-width:100%}
  html body.shell{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  html body.shell .top{padding-top:calc(8px + env(safe-area-inset-top,0px))!important;padding-bottom:8px!important}

  /* En-tête de page : icône à côté du titre, texte dessous, actions sur une ligne */
  html body.shell .pghead{padding:18px 16px!important;border-radius:16px!important;gap:14px!important}
  html body.shell .pghead > div:first-child{column-gap:12px!important;row-gap:4px!important;align-items:center!important}
  html body.shell .pghead > div:first-child > p{grid-column:1 / -1!important;margin-top:4px!important}
  html body.shell .pg-ic{grid-row:auto!important;width:40px!important;height:40px!important;border-radius:12px!important}
  html body.shell .pg-ic svg{width:21px!important;height:21px!important}
  html body.shell .pghead h1{font-size:1.65rem!important;line-height:1.1!important}
  html body.shell .pghead p{font-size:.9rem!important;line-height:1.45}
  html body.shell .pghead .acts{width:100%;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px;width:calc(100% + 32px)}
  html body.shell .pghead .acts::-webkit-scrollbar{display:none}
  html body.shell .pghead .acts > *{flex:none;white-space:nowrap;min-height:42px}

  /* Pipeline : une colonne à la fois, qui s'aimante en glissant */
  html body .pipe{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-left:16px;
    margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;scrollbar-width:none}
  html body .pipe::-webkit-scrollbar{display:none}
  html body .pipe > .pcol,html body .pipe > *{scroll-snap-align:start;flex:0 0 84%!important;min-width:84%!important;max-width:84%!important}

  /* Messagerie : toute la hauteur disponible au-dessus des onglets */
  html body.shell .mx{height:calc(100dvh - 300px)!important;min-height:420px}

  /* Fenêtres (fiche entreprise, appels guidés…) : feuille qui monte du bas */
  html body dialog[open]:not(.keep-center){
    width:100%!important;max-width:100%!important;margin:auto 0 0!important;
    max-height:calc(100dvh - 24px)!important;border-radius:20px 20px 0 0!important;
    padding-bottom:max(16px,env(safe-area-inset-bottom,0px))!important}

  /* ---------- Barre d'onglets du bas ---------- */
  .mnav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
    grid-template-columns:repeat(5,1fr);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(250,248,243,.9);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    border-top:1px solid #E6E1D6}
  body.shell:not(.side-open) .mnav{display:grid}
  .mnav a{
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;border-radius:12px;
    color:#6B6B70;text-decoration:none;font:600 .68rem/1.1 Inter,system-ui,sans-serif;letter-spacing:-.005em;position:relative}
  .mnav a svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mnav a[aria-current]{color:#18181B}
  .mnav a[aria-current] .mnav-ic{background:var(--mc,#FFE14D)}
  .mnav-ic{display:grid;place-items:center;width:46px;height:28px;border-radius:999px;transition:background .2s}
  .mnav a .mnav-n{position:absolute;top:2px;left:calc(50% + 8px);min-width:17px;height:17px;padding:0 4px;border-radius:99px;
    background:#FF5A4E;color:#fff;font:700 .64rem/17px Inter,sans-serif;text-align:center;border:2px solid #FAF8F3}
  .mnav a .mnav-n:empty,.mnav a .mnav-n[data-n="0"]{display:none}

  /* Le menu latéral passe au-dessus de la barre du bas */
  html body.side-open #side{z-index:80!important}

  /* ---------- Salles (live, séance, salle d'attente, fin) ---------- */
  html body.room #top{flex-wrap:nowrap!important;gap:8px!important;padding-top:calc(10px + env(safe-area-inset-top,0px))!important;padding-bottom:6px!important}
  html body.room #top .brand{flex:none;transform:scale(.8);transform-origin:left center;margin-right:-26px}
  html body.room #top .right{margin-left:auto!important;flex-wrap:nowrap!important;gap:10px!important;font-size:.84rem!important}
  html body.room #top .right .ctbtn{padding:6px 11px!important}
  html body.room .room-top{gap:8px!important;padding-top:4px}
  html body.room .lv-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;gap:6px!important}
  html body.room .lv-chips > *{flex:none;white-space:nowrap}

  /* Commandes de la visio : barre collée en bas de l'écran, comme une appli d'appel */
  html body.room{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  html body.room .controls{
    position:fixed!important;left:0;right:0;bottom:0;z-index:50;
    display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;
    margin:0!important;width:auto!important;max-width:none!important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))!important;
    border-radius:20px 20px 0 0!important;border:0!important;border-top:1px solid #E6E1D6!important;
    background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:0 -8px 24px rgba(0,0,0,.06)!important}
  html body.room .controls > *{flex:0 0 auto!important;white-space:nowrap;min-height:42px;padding-left:12px!important;padding-right:12px!important;font-size:.88rem!important}
  html body.room .vtile{border-radius:16px!important}

  /* Tour de fin : trois gros boutons lisibles */
  html body.room .end .opts,html body.room .end-opts{gap:8px!important}
}

/* Petits téléphones (iPhone SE, 375 px et moins) */
@media (max-width:380px){
  html body:not(.shell):not(.room) #top .authbtns button{padding:7px 10px!important;font-size:.8rem!important}
  .mnav a{font-size:.62rem}
  .mnav-ic{width:40px}
}