/* ===================================================================
   GBU Connect — Design system « Foyer »
   Tokens et composants fidèles au handoff Claude Design.
   =================================================================== */
:root {
  /* Palette normative du document maitre (handoff 01/09/2026), derivee de
     l'ambre du logo. Deux corrections mesurees par son audit :
       - le texte sur l'ambre est en ENCRE, jamais blanc (3,04:1 -> 5,19:1) ;
       - les gris remontent au-dessus de 4,5:1 (--muted 7,5:1, --faint 5,1:1
         plancher absolu — les anciens tombaient a 4,0 et 2,9).
     Correction du 01/09 (recette NAVIGATEUR) : --faint etait calibre sur le
     blanc des cartes, mais sert aussi sur le creme (--panel2, --bg). Il y
     tombait a 4,27:1. Assombri pour tenir 4,5:1 sur TOUS les fonds de
     l'application, mesure a l'ecran. */
  --bg:#FBF6EF; --panel:#FFFFFF; --panel2:#F4EADC; --border:#E5D9C9; --line:#F0E6D8;
  --text:#2A211B; --muted:#5F5346; --faint:#6E6053;
  --primary:#E8732A; --primary-bord:#C6611C; --primary-hover:#FF8A1E;
  --primary-press:#96430F;   /* texte orange sur fond clair · 6,8:1 */
  --soft:#FBF1E6;
  /* Degrade celebration : reserve au logo et aux bannieres de fete,
     jamais un bouton ordinaire — banalise, il ne signale plus rien. */
  --grad:linear-gradient(135deg,#EE7B2E 0%,#DC6620 50%,#C6551B 100%);
  --on-primary:#2A211B;
  --shadow:0 10px 30px rgba(42,33,27,.10);
  --display:'Newsreader',serif; --ui:'Hanken Grotesk',sans-serif;
  --ok:#226B42; --ok-bg:#E8F3EB; --live:#A81F12; --focus:#8F3A1C;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:var(--bg); color:var(--text); font-family:var(--ui);
  font-size:14px; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
::placeholder { color:var(--faint); }

@keyframes gbuLive { 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes gbuBars { 0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);} }

/* ===================== Shell ===================== */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:258px; flex:none; background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:22px 16px;
  position:sticky; top:0; height:100vh;
}
.brand { display:flex; align-items:center; gap:11px; padding:0 8px 22px; }
.brand .logo {
  height:38px; width:auto; flex:none; display:block;
  object-fit:contain;                 /* logo officiel GBUM (fond detoure) */
}
.brand .name { font-weight:700; font-size:16px; line-height:1.05; }
.brand .sub { font-size:12px; color:var(--faint); }

.nav { display:flex; flex-direction:column; gap:3px; }
.nav-item {
  display:flex; align-items:center; gap:12px;
  /* 44 px de haut : mesure a l'ecran, pas dans la feuille de style. La
     recette navigateur du 01/09 a montre 41 px reels — sous le doigt d'un
     etudiant sur telephone, trois pixels manquants font une commande
     ratee. */
  min-height:44px;
  padding:11px 12px; border-radius:11px; color:var(--muted);
  font-size:14.5px; font-weight:500; transition:none;
}
.nav-item svg { width:19px; height:19px; flex:none; }
.nav-item:hover { background:var(--soft); }
/* L'element actif portait l'ambre vif sur creme : 2,72:1, sous le seuil de
   lisibilite. L'ambre reste la couleur des ACTIONS ; ici c'est un etat, il
   se dit avec l'orange fonce (5,2:1) et une barre laterale. */
.nav-item.active {
  color:var(--primary-press); background:var(--soft); font-weight:700;
  box-shadow:inset 3px 0 0 var(--primary);
}
.nav-badge {
  margin-left:auto; background:var(--primary); color:var(--on-primary);
  font-size:12px; font-weight:700; padding:1px 7px; border-radius:9px;
}
.nav-live {
  margin-left:auto; display:flex; align-items:center; gap:4px;
  color:var(--live); font-size:12px; font-weight:700;
}
.nav-live .dot {
  width:7px; height:7px; border-radius:50%; background:var(--live);
  animation:gbuLive 1.4s infinite;
}
.sidebar-bottom { margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.user-card {
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px;
  background:var(--panel2); border:1px solid var(--border);
}
.user-card .meta { line-height:1.15; min-width:0; }
.user-card .meta .n { font-weight:600; font-size:13px; }
/* 4,27:1 mesure : sous le seuil. --muted donne 7,5:1 sur le meme fond. */
.user-card .meta .r { font-size:12px; color:var(--muted); }
.user-card .meta .r span { color:var(--primary-press); font-weight:600; }

/* avatars */
.avatar {
  border-radius:50%; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:700; flex:none;
}
.avatar.s28 { width:28px; height:28px; font-size:12px; }
.avatar.s36 { width:36px; height:36px; font-size:13px; }
.avatar.s38 { width:38px; height:38px; font-size:13px; }
.avatar.s42 { width:42px; height:42px; font-size:14px; }
.avatar.s62 { width:84px; height:84px; font-size:26px; }

/* main + header */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  display:flex; align-items:center; gap:18px; padding:18px 30px;
  border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:20;
}
.topbar .title { font-family:var(--display); font-size:24px; font-weight:500; line-height:1.1; }
.topbar .subtitle { font-size:12.5px; color:var(--faint); margin-top:2px; }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:16px; }
.search {
  display:flex; align-items:center; gap:7px; background:var(--panel2);
  border:1px solid var(--border); border-radius:11px; padding:8px 12px;
  color:var(--faint); font-size:13px; width:230px;
}
.search input { border:none; background:none; outline:none; color:var(--text); width:100%; font-size:13px; }
.badge-enc {
  display:flex; align-items:center; gap:6px; background:var(--ok-bg); color:var(--ok);
  padding:7px 12px; border-radius:20px; font-size:12px; font-weight:600;
}
.content { flex:1; padding:28px 30px; }

/* ===================== Composants ===================== */
.two-col { display:flex; gap:26px; align-items:flex-start; }
.col-main { flex:1; min-width:0; }
.rail { width:300px; flex:none; display:flex; flex-direction:column; gap:18px; }

.card {
  background:var(--panel); border:1px solid var(--border); border-radius:18px;
  padding:18px 20px; box-shadow:var(--shadow);
}
.card-tight { border-radius:16px; padding:14px 16px; box-shadow:none; }
.section-title { font-family:var(--display); font-size:20px; font-weight:500; margin:24px 2px 14px; }
.section-title:first-child { margin-top:0; }

.serif { font-family:var(--display); font-weight:500; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }

/* boutons */
.btn {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  min-height:44px;
  padding:10px 16px; border-radius:11px; font-weight:600; font-size:13.5px;
}
.btn svg { width:15px; height:15px; }
.btn-primary { background:var(--primary); color:var(--on-primary);
  border:1px solid var(--primary-bord); font-weight:700; }
.btn-primary:hover { background:var(--primary-hover); }
button:focus-visible, a:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid var(--focus); outline-offset:2px;
}
.btn-soft { background:var(--soft); color:var(--primary-press); }
.btn-ghost { background:var(--panel); border:1px solid var(--border); color:var(--text); }
.btn-live { background:var(--live); color:#fff; }
.btn-block { width:100%; }
.btn-lg { padding:13px 20px; font-size:15px; }

/* tags / pills */
.tag {
  font-size:12px; font-weight:600; color:var(--primary-press); background:var(--soft);
  padding:5px 11px; border-radius:14px;
}
.tag-ok { color:var(--ok); background:var(--ok-bg); }
.pill {
  padding:9px 16px; border-radius:50px; font-size:13.5px; font-weight:600;
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
}
.pill.active { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }

/* bannière dégradé */
.banner {
  border-radius:20px; position:relative; overflow:hidden;
  /* Chaleur DOUCE : le retour d'Esaie (« les couleurs sont fortes ») a
     tranche — l'accueil quotidien n'est pas une banniere de celebration.
     Creme ambre, texte encre ; l'orange vif reste aux actions. */
  background:linear-gradient(140deg,#FBF1E6 0%,#F6E3CB 60%,#F0D9B8 100%);
  border:1px solid var(--border);
  padding:22px 24px; color:var(--text); box-shadow:var(--shadow);
}
.live-pill {
  display:inline-flex; align-items:center; gap:5px; background:var(--live); color:#fff;
  padding:3px 9px; border-radius:7px; font-size:12px; font-weight:700;
}
.live-pill .dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:gbuLive 1.4s infinite; }
/* Action posee sur un fond colore (banniere, carte orange). Elle etait
   definie uniquement sous .banner, si bien que le bouton « Demarrer
   maintenant » de Reunions — hors banniere — n'avait presque aucun style et
   se lisait a peine. Un bouton BLANC PLEIN a texte orange se detache sur
   n'importe quel fond chaud, et se lit sans effort. */
.glass {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; border:1px solid var(--border);
  padding:10px 18px; border-radius:12px;
  font-weight:700; font-size:13.5px; color:var(--primary-press);
  box-shadow:0 6px 16px rgba(42,33,27,.16); transition:transform .12s ease, box-shadow .12s ease;
}
.glass:hover { box-shadow:0 9px 22px rgba(42,33,27,.22); transform:translateY(-1px); }
.glass svg { stroke:currentColor; }
.banner .glass { margin-top:16px; }

/* fil d'actualités */
.post .head { display:flex; align-items:center; gap:11px; }
.post .author { font-weight:600; font-size:14.5px; }
.post .ptitle { font-family:var(--display); font-size:18px; font-weight:500; margin-top:13px; }
.post .body { font-size:14px; color:var(--muted); line-height:1.55; margin-top:6px; }
.post .actions { display:flex; align-items:center; gap:20px; margin-top:15px; color:var(--faint); font-size:13px; }
.post .actions svg { width:16px; height:16px; }
.act { display:flex; align-items:center; gap:6px; }

/* listes rail */
.rail-row { display:flex; align-items:center; gap:11px; padding:9px 0; }
.rail-row + .rail-row { border-top:1px solid var(--line); }
.datechip {
  width:42px; height:42px; border-radius:11px; background:var(--soft); color:var(--primary-press);
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; line-height:1;
}
.datechip .d { font-weight:700; font-size:15px; }
.datechip .m { font-size:12px; text-transform:uppercase; }

/* placeholder vidéo */
.video-ph {
  background-color:#2A211B;
  background-image:repeating-linear-gradient(45deg, rgba(232,115,42,.18) 0 12px, rgba(232,115,42,.05) 12px 24px);
  border-radius:16px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.8); font-family:ui-monospace,monospace; font-size:12px;
}
.eq { display:inline-flex; align-items:flex-end; gap:3px; height:16px; }
/* Les barres de voix ne bougent QUE si la personne parle : une animation
   permanente racontait que le micro captait, meme coupe (Esaie, 01/09).
   L'animation est portee par « .parle » (salle.css) ; ici, elles reposent. */
.eq i { width:3px; height:100%; background:currentColor; border-radius:2px;
  transform-origin:bottom; transform:scaleY(.28); }
.parle .eq i { animation:gbuBars .8s infinite; }
.eq i:nth-child(2){ animation-delay:.2s; } .eq i:nth-child(3){ animation-delay:.4s; }

/* grilles */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* toggles */
.toggle { width:42px; height:24px; border-radius:50px; background:var(--border); position:relative; flex:none; }
.toggle.on { background:var(--primary); }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
.toggle.on::after { left:21px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:12.5px; color:var(--muted); font-weight:600; }
.field input, .field select, .input {
  background:var(--panel2); border:1px solid var(--border); border-radius:11px;
  min-height:44px;
  padding:11px 13px; font-size:14px; color:var(--text); outline:none; font-family:inherit;
}
.divider { height:1px; background:var(--line); margin:16px 0; }

/* utilitaires */
.flex { display:flex; }
.between { display:flex; align-items:center; justify-content:space-between; }
.gap8 { gap:8px; } .gap12 { gap:12px; } .gap16 { gap:16px; }
.center { display:flex; align-items:center; }
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt18{margin-top:18px;} .mt24{margin-top:24px;}
.note { font-size:12.5px; color:var(--faint); }

@media (max-width: 980px) {
  .two-col { flex-direction:column; }
  .rail { width:100%; }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}

/* ===================== Disponibilités (sondage) ===================== */
.avail-row {
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--border); border-radius:14px; padding:13px 16px;
}
.avail-btn {
  padding:8px 14px; border-radius:10px; font-size:12.5px; font-weight:600;
  background:transparent; color:var(--faint); border:1px solid var(--border);
}
.avail-btn.on-yes   { background:var(--ok-bg); color:var(--ok); border-color:var(--ok); }
.avail-btn.on-maybe { background:var(--soft); color:var(--primary-press); border-color:var(--primary-press); }
.avail-btn.on-no    { background:#FBEAE7; color:#B0473F; border-color:#B0473F; }

.wa-icon {
  width:38px; height:38px; flex:none; border-radius:11px; background:#EAF4EC; color:#2F7D52;
  display:flex; align-items:center; justify-content:center;
}
.btn-wa { background:#25D366; color:#06281D; border:1px solid #1EA854; }
.btn-wa:hover { background:#1FB458; }
.salut-pill {
  font-size:12.5px; background:var(--soft); color:var(--primary-press);
  padding:6px 12px; border-radius:12px;
}

.delivery-row {
  display:flex; align-items:center; gap:13px; padding:13px 18px;
  border-bottom:1px solid var(--line);
}
.delivery-row:last-child { border-bottom:none; }
.status-badge {
  font-size:12px; font-weight:600; padding:5px 12px; border-radius:14px;
  width:84px; text-align:center; flex:none;
}
.status-repondu   { background:var(--ok-bg); color:var(--ok); }
.status-lu        { background:var(--soft); color:var(--primary-press); }
.status-envoye    { background:var(--panel2); color:var(--muted); }
.status-a_envoyer { background:var(--panel2); color:var(--faint); border:1px dashed var(--border); }

/* Tableau des réponses — ⚠ mêmes pistes sur les 3 rangées (voir handoff) */
.dispo-scroll { overflow-x:auto; }
.dispo-inner  { min-width:760px; }
.dispo-grid   { display:grid; grid-template-columns:186px repeat(8,minmax(0,1fr)); align-items:center; }
.dispo-grid + .dispo-grid { border-top:1px solid var(--line); }
.dispo-head { background:var(--panel2); border-bottom:1px solid var(--border); }
.dispo-col  { padding:13px 8px; text-align:center; border-left:1px solid var(--border); }
.dispo-cell {
  display:flex; align-items:center; justify-content:center; height:52px;
  border-left:1px solid var(--border); font-size:15px; font-weight:700;
}
.dispo-cell.c-yes   { color:var(--ok); background:var(--ok-bg); }
.dispo-cell.c-maybe { color:var(--primary-press); background:var(--soft); }
.dispo-cell.c-no    { color:#B0473F; }
.dispo-cell.c-none  { color:var(--faint); }
.dispo-total { background:var(--panel2); }
.dispo-total .dispo-cell { height:46px; font-size:14px; color:var(--muted); background:transparent; }
.dispo-total .dispo-cell.best { background:var(--primary); color:var(--on-primary); }

/* ===================== États vides ===================== */
.vide {
  text-align:center; padding:34px 24px; color:var(--faint);
  background:var(--panel); border:1px dashed var(--border); border-radius:18px;
}
.vide .ico { font-size:26px; opacity:.55; }
.vide .titre { font-family:var(--display); font-size:17px; color:var(--muted); margin-top:10px; }
.vide .txt { font-size:13px; line-height:1.55; margin-top:6px; max-width:380px; margin-left:auto; margin-right:auto; }
.rail .vide { padding:22px 16px; border-radius:16px; }
.rail .vide .txt { font-size:12.5px; }

/* ===================== Mobile : barre de navigation basse =====================
   Sous 860px la barre laterale de 258px devorait l'ecran (132px restants sur
   un telephone de 390px, avec defilement horizontal). Elle est remplacee par
   une barre d'onglets en bas, conformement aux maquettes du handoff. */
.barre-mobile, .entete-mobile, .voile-menu, .feuille-menu { display:none; }

@media (max-width: 860px) {
  .sidebar { display:none; }
  .app { flex-direction:column; }

  .entete-mobile {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; background:var(--panel);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:30;
  }
  .entete-mobile img { height:30px; width:auto; }
  .entete-mobile .titre { font-weight:700; font-size:15px; }
  .entete-mobile .moi {
    margin-left:auto; display:flex; align-items:center; gap:8px;
    font-size:12px; color:var(--faint);
  }

  .topbar { padding:14px 16px; position:static; }
  .topbar .right { display:none; }
  .topbar .title { font-size:20px; }
  .content { padding:16px 14px 86px; }   /* place pour la barre du bas */

  /* align-items:stretch est INDISPENSABLE : herite de flex-start, en
     direction colonne les blocs prennent la largeur de leur contenu. Le
     tableau des reponses (min-width 760px) imposait alors 762px a toute
     la page sur un ecran de 375px. */
  .two-col { flex-direction:column; gap:16px; align-items:stretch; }
  .col-main, .rail { width:100%; min-width:0; max-width:100%; }
  .grid-3, .grid-4 { grid-template-columns:1fr; }
  .card { padding:16px; border-radius:16px; }

  .barre-mobile {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--panel); border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(42,33,27,.07);
  }
  .barre-mobile a, .barre-mobile button {
    /* min-width:0 — sans lui, la largeur intrinseque du bouton « Plus »
       l'empeche de se comprimer et le dernier onglet sort de l'ecran. */
    flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:7px 2px; color:var(--faint); font-size:12px; font-weight:600;
    min-height:52px; justify-content:center;      /* cible tactile >= 44px */
  }
  .barre-mobile svg { width:21px; height:21px; }
  .barre-mobile .actif { color:var(--primary); }
  .barre-mobile .pastille {
    position:absolute; transform:translate(13px,-11px);
    background:var(--primary); color:var(--on-primary); font-size:12px; font-weight:700;
    min-width:15px; height:15px; border-radius:8px; display:flex;
    align-items:center; justify-content:center; padding:0 3px;
  }

  .voile-menu { display:none; position:fixed; inset:0; background:rgba(42,33,27,.45); z-index:60; }
  .voile-menu.ouvert { display:block; }
  .feuille-menu {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--panel); border-radius:20px 20px 0 0; padding:16px 14px
      calc(16px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .22s;
    max-height:78vh; overflow-y:auto;
  }
  .feuille-menu.ouvert { transform:translateY(0); }
  .feuille-menu .poignee {
    width:38px; height:4px; border-radius:2px; background:var(--border);
    margin:0 auto 12px;
  }
  .feuille-menu .nav-item { font-size:15px; padding:13px 12px; }
}

/* Commandes pas encore actives : signalees plutot que muettes.
   Un bouton qui ne fait rien sans le dire est pire qu'un bouton absent. */
.bientot { opacity:.5; cursor:not-allowed; position:relative; }
.bientot:hover::after {
  content:"Bientôt disponible"; position:absolute; left:50%; bottom:calc(100% + 6px);
  transform:translateX(-50%); white-space:nowrap; background:var(--text);
  color:#fff; font-size:12px; font-weight:600; padding:5px 9px; border-radius:7px; z-index:40;
}
/* Un paragraphe entierement en orange se lit mal et crie : la couleur
   perd son role des qu'elle recouvre tout. On la garde pour l'amorce en
   gras — celle qui annonce le sujet — et le corps revient au texte noir,
   simplement pose sur un fond doux. */
.bandeau-info {
  display:flex; align-items:flex-start; gap:10px; background:var(--soft);
  border:1px solid var(--border); border-radius:14px; padding:13px 16px;
  font-size:12.5px; color:var(--text); line-height:1.65; margin-bottom:18px;
}
.bandeau-info b:first-child { color:var(--primary-press); }

/* Invitation a installer l'application (PWA) */
.barre-install {
  display:none; position:fixed; left:14px; right:14px; bottom:80px; z-index:55;
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:11px 13px; align-items:center; gap:11px; box-shadow:var(--shadow);
}
.barre-install img { width:36px; height:36px; border-radius:9px; }
@media (min-width: 861px) { .barre-install { left:auto; right:24px; bottom:24px; width:360px; } }

/* ===================== Galerie des activités ===================== */
.galerie {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
}
.photo {
  position:relative; margin:0; border-radius:16px; overflow:hidden;
  background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow);
}
.photo img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in;
  background:var(--panel2);
}
.photo figcaption { padding:10px 12px 12px; }
.photo figcaption .t { font-weight:600; font-size:13.5px; line-height:1.3; }
.photo figcaption .a { font-size:12px; color:var(--faint); margin-top:2px; }
.photo .suppr {
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(42,33,27,.6); color:#fff; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.photo .suppr:hover { background:#B0473F; }

.visionneuse {
  display:none; position:fixed; inset:0; z-index:90; background:rgba(20,16,13,.94);
  align-items:center; justify-content:center; padding:24px; flex-direction:column; gap:14px;
}
.visionneuse.ouverte { display:flex; }
.visionneuse img { max-width:100%; max-height:82vh; border-radius:12px; object-fit:contain; }
.visionneuse .legende { color:#F5EFE7; font-size:14px; font-weight:600; text-align:center; }
.visionneuse .fermer {
  position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:17px;
}
@media (max-width: 860px) {
  .galerie { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .visionneuse { padding:12px; }
}

/* ===================== Connexion & activation =====================
   Ces pages ont leur propre mise en page, hors du gabarit principal :
   elles doivent donc porter leur propre adaptation au telephone. */
.page-connexion {
  display:flex; min-height:100vh; align-items:center; justify-content:center;
  padding:20px;
}
.carte-connexion {
  width:100%; max-width:920px; display:flex; border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow); background:var(--panel); border:1px solid var(--border);
}
.volet-marque {
  flex:1; border-radius:0; display:flex; flex-direction:column;
  justify-content:center; min-height:460px;
}
.volet-marque .accroche { font-size:30px; line-height:1.25; margin-top:30px; }
.volet-formulaire {
  flex:1; padding:48px 44px; display:flex; flex-direction:column; justify-content:center;
}
.carte-simple { width:420px; max-width:100%; padding:28px; }

@media (max-width: 780px) {
  /* En dessous de 780px les deux volets cote a cote deviennent illisibles
     (le texte de gauche se retrouve a un mot par ligne). On empile, et on
     reduit le volet de marque a un simple bandeau. */
  .page-connexion { align-items:flex-start; padding:14px; }
  .carte-connexion { flex-direction:column; max-width:460px; }
  .volet-marque { min-height:0; padding:20px; }
  .volet-marque .accroche { font-size:21px; margin-top:16px; }
  .volet-marque > div:nth-child(3) { font-size:13px; margin-top:8px; max-width:none; }
  .volet-formulaire { padding:22px 20px 26px; }
}
@media (max-width: 460px) {
  /* Sur un telephone tenu verticalement, l'argumentaire n'apporte rien :
     seul compte le formulaire. On ne garde que l'identite visuelle. */
  .volet-marque .accroche,
  .volet-marque > div:nth-child(3),
  .volet-marque > div:nth-child(4) { display:none; }
  .volet-marque { padding:16px 20px; }
}

/* Coordonnées dans l'annuaire */
.contact { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }

/* ===================== Accueil ===================== */
.accueil-hero { padding:26px 28px; }
.accueil-hero .salut { font-family:var(--display); font-size:27px; font-weight:500; line-height:1.15; }
.accueil-hero .sous { font-size:13px; opacity:.9; margin-top:5px; }
.accueil-hero .verset {
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.28);
  font-family:var(--display); font-size:16px; line-height:1.5;
}
.accueil-hero .verset .ref { display:block; font-family:var(--ui); font-size:12.5px; opacity:.85; margin-top:6px; }

/* Ce qui attend l'utilisateur */
.attente {
  display:flex; align-items:center; gap:13px; padding:15px 17px;
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow);
}
.attente.urgent { border-color:var(--primary); border-width:2px; }
.attente.calme { box-shadow:none; background:var(--panel2); }
.attente .ic { font-size:22px; flex:none; }
.attente .t { font-weight:600; font-size:14.5px; line-height:1.3; }
.attente .d { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; }

/* Accès rapides */
.raccourcis { display:grid; gap:12px; grid-template-columns:repeat(2, 1fr); }
.raccourci {
  display:block; padding:16px; border-radius:16px; background:var(--panel);
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.raccourci:hover { border-color:var(--primary); background:var(--soft); }
.raccourci .ic { font-size:22px; }
.raccourci .t { font-weight:600; font-size:14.5px; margin-top:9px; }
.raccourci .d { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; }

/* Aperçu des photos récentes */
/* minmax(0,1fr) et non 1fr : « 1fr » vaut « minmax(auto,1fr) », et la
   largeur naturelle des photos poussait alors les colonnes a 92px dans un
   conteneur de 362 — la page debordait de 16px sur tous les telephones. */
.apercu-photos { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.apercu-photos img {
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; display:block;
  border:1px solid var(--border);
}

@media (max-width: 860px) {
  .accueil-hero { padding:20px; }
  .accueil-hero .salut { font-size:22px; }
  .accueil-hero .verset { font-size:14.5px; margin-top:14px; padding-top:12px; }
  .raccourcis { grid-template-columns:1fr; }
  .attente { flex-wrap:wrap; }
  .attente .btn { width:100%; justify-content:center; }
}

/* ===================== Diffusion en direct ===================== */
.regarder { display:flex; gap:20px; align-items:flex-start; }
.col-video { flex:1; min-width:0; }
.col-echanges { width:340px; flex:none; }
.cadre-video {
  position:relative; width:100%; aspect-ratio:16/9; border-radius:18px;
  overflow:hidden; background:#0F0C0A; box-shadow:var(--shadow);
}
.cadre-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.onglets-echanges { display:flex; gap:4px; padding:10px 12px; border-bottom:1px solid var(--border); }
.onglets-echanges .onglet-e {
  flex:1; padding:9px 6px; border-radius:10px; font-size:12.5px;
  font-weight:600; color:var(--muted);
}
.onglets-echanges .onglet-e.actif { background:var(--soft); color:var(--primary-press); }
.liste-echanges {
  flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column;
  gap:9px; min-height:260px; max-height:50vh;
}
.msg-live { margin-bottom:9px; }
.msg-live .a { font-size:12px; color:var(--primary-press); font-weight:600; }
.msg-live .t { font-size:13.5px; line-height:1.45; }
.question {
  background:var(--panel2); border:1px solid var(--border); border-radius:12px;
  padding:11px 13px; margin-bottom:9px;
}
.question .txt { font-size:13.5px; line-height:1.45; }
.question .vote {
  background:var(--soft); color:var(--primary-press); font-size:12px;
  font-weight:700; padding:5px 11px; border-radius:12px;
}
.form-echange { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); }

@media (max-width: 860px) {
  .regarder { flex-direction:column; }
  .col-echanges { width:100%; }
  .liste-echanges { max-height:42vh; }
}

/* Activités & documents */
.activite { display:flex; align-items:center; gap:16px; padding:15px 18px; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.type-doc {
  width:52px; flex:none; text-align:center; font-size:12px; font-weight:700;
  color:var(--primary-press); background:var(--soft); border-radius:8px; padding:7px 4px;
}
textarea.input { resize:vertical; font-family:inherit; line-height:1.5; }
details > summary::-webkit-details-marker { display:none; }
@media (max-width: 860px) { .duo { grid-template-columns:1fr; } }

/* Disponibilités déjà exprimées par les autres */
.deja { font-size:12px; color:var(--faint); margin-top:5px; }
.pastille-oui {
  display:inline-block; background:var(--ok-bg); color:var(--ok);
  font-weight:700; padding:1px 7px; border-radius:9px; font-size:12px;
}
.avail-row.populaire { border-color:var(--ok); background:#FBFDFB; }

/* Réponses au sondage : tableau sur grand écran, liste sur téléphone.
   Le tableau fait 760px de large ; sur un mobile les créneaux cochés
   sortaient de l'écran et paraissaient absents. */
.reponses-liste { display:none; }
.resume-creneaux { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.resume-creneaux .cr {
  font-size:12px; font-weight:600; padding:3px 9px; border-radius:10px;
}
.resume-creneaux .cr.oui { background:var(--ok-bg); color:var(--ok); }
.resume-creneaux .cr.peut { background:var(--soft); color:var(--primary-press); }
@media (max-width: 860px) {
  .reponses-liste { display:block; }
  .dispo-scroll { display:none; }
}

/* Bilan d'une activité archivée */
.bilan { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.chiffre {
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:16px 12px; text-align:center; box-shadow:var(--shadow);
}
.chiffre .n { font-family:var(--display); font-size:27px; color:var(--primary-press); line-height:1; }
.chiffre .l { font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width: 860px) { .bilan { grid-template-columns:repeat(2, 1fr); } }

/* Photo d'identité dans les avatars (repli sur les initiales si absente) */
.avatar { overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Module camp ───────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.carte-camp { display:block; color:inherit; text-decoration:none; transition:transform .12s, box-shadow .12s; }
.carte-camp:hover { transform:translateY(-2px); box-shadow:var(--shadow); }

.camp-onglets {
  display:flex; gap:4px; margin:18px 0 20px; overflow-x:auto;
  border-bottom:1px solid var(--border); padding-bottom:0;
}
.camp-onglets a {
  flex:none; padding:10px 16px; font-size:13.5px; font-weight:600;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  border-bottom:2.5px solid transparent; margin-bottom:-1px;
}
.camp-onglets a:hover { color:var(--text); }
.camp-onglets a.actif { color:var(--primary-press); border-bottom-color:var(--primary); }

/* Barres de repartition. Une piste toujours visible, meme a 0 % : sans elle
   on ne distingue pas « aucun » de « pas encore calcule ». */
.barre-ligne { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.barre-lib { width:150px; flex:none; font-size:12.5px; color:var(--muted); }
.barre-piste { flex:1; height:9px; border-radius:99px; background:var(--soft); overflow:hidden; }
.barre-part { height:100%; border-radius:99px; background:var(--primary); min-width:2px; }
.barre-val { width:38px; flex:none; text-align:right; font-size:13px; font-weight:700; }
.barre-part.etat-inscrit      { background:#C9BBAD; }
.barre-part.etat-valide_ville { background:#E8A33C; }
.barre-part.etat-valide_sn    { background:var(--primary); }
.barre-part.etat-solde        { background:var(--ok); }

.solde-bloc { text-align:center; padding:6px 0 2px; }
.solde-val { font-family:var(--display); font-size:30px; color:var(--primary-press); line-height:1.1; }
.solde-val span { font-size:14px; color:var(--muted); }
.ligne-info { display:flex; justify-content:space-between; align-items:center;
              font-size:13px; padding:5px 0; }
.ligne-info span { color:var(--muted); }

.filtres { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.filtres .input { flex:1; min-width:130px; font-size:13px; padding:9px 11px; }

.pastille {
  width:32px; height:32px; flex:none; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:#fff; background:var(--muted);
}
.pastille.pm { background:#3C6E8F; }
.pastille.pf { background:#9C5A8C; }

.pastilles { display:flex; flex-wrap:wrap; gap:7px; }
.jeton {
  display:inline-flex; flex-direction:column; gap:1px; padding:6px 11px;
  border-radius:10px; background:var(--soft); font-size:12px; font-weight:600;
}
.jeton i { font-style:normal; font-size:12px; font-weight:400; color:var(--muted); }
.jeton.pm { background:#EAF1F6; }
.jeton.pf { background:#F6EBF3; }

/* Fiche participant : repliee par defaut. 213 fiches ouvertes seraient
   illisibles, et le navigateur ne cherche que dans ce qui est affiche. */
.fiche-part { border-bottom:1px solid var(--line); }
.fiche-part:last-child { border-bottom:none; }
.fiche-part > summary {
  display:flex; align-items:center; gap:11px; padding:11px 16px;
  cursor:pointer; list-style:none;
}
.fiche-part > summary::-webkit-details-marker { display:none; }
.fiche-part > summary:hover { background:var(--panel2); }
.fiche-tags { display:flex; flex-wrap:wrap; gap:6px; flex:none;
              align-items:center; justify-content:flex-end; }
.fiche-tags .tag { white-space:nowrap; }
.fiche-part[open] > summary { background:var(--panel2); }
.fiche-corps { padding:4px 16px 18px; background:var(--panel2); }
.fiche-infos { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 18px; }
.fiche-infos > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.fiche-infos span { font-size:12px; color:var(--faint); text-transform:uppercase;
                    letter-spacing:.4px; }
.fiche-infos b { font-size:13px; font-weight:600; }
.fiche-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.fiche-edition { display:flex; flex-wrap:wrap; gap:11px; align-items:flex-end; margin-top:14px; }
.fiche-edition .field { margin:0; flex:1; min-width:150px; }

.etat-tag.etat-inscrit      { color:#6E6157; background:#F1EAE1; }
.etat-tag.etat-valide_ville { color:#96631A; background:#FBF0DC; }
.etat-tag.etat-valide_sn    { color:var(--primary-press); background:var(--soft); }
.etat-tag.etat-solde        { color:var(--ok); background:var(--ok-bg); }

.grid-chambres { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.chambre.pleine { border-color:#DCCFA8; }
.occup { font-family:var(--display); font-size:22px; color:var(--primary-press); line-height:1; }
.occup span { font-size:13px; color:var(--muted); }
.occupant { display:flex; align-items:center; gap:8px; padding:5px 0;
            border-bottom:1px solid var(--line); }
.occupant:last-child { border-bottom:none; }
.btn-x {
  border:none; background:transparent; color:var(--faint); font-size:17px;
  line-height:1; cursor:pointer; padding:2px 5px; border-radius:6px;
}
.btn-x:hover { color:var(--live); background:#FBEAE7; }

@media (max-width:860px) {
  .grid-2 { grid-template-columns:1fr; }
  .fiche-infos { grid-template-columns:repeat(2,1fr); }
  .barre-lib { width:104px; font-size:12px; }
  /* Les etiquettes comprimaient le nom en colonne de deux mots. Sur mobile
     elles descendent en bloc sous le nom, alignees sous la pastille. */
  .fiche-part > summary { flex-wrap:wrap; }
  .fiche-tags { flex:1 1 100%; padding-left:43px; justify-content:flex-start; }
}

/* Le bilan d'un camp compte six cases, pas quatre : une grille figee a
   quatre colonnes laissait une seconde rangee bancale. */
.bilan.auto { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }

/* Sur telephone, la fiche d'annuaire se couche.
   Le portrait en grand donnait UNE fiche par ecran : sept membres, sept
   ecrans a faire defiler pour trouver un numero. Or on ouvre l'annuaire
   pour joindre quelqu'un vite. Portrait a gauche, identite a droite,
   moyens de contact dessous : quatre fiches tiennent dans l'ecran.
   Les !important repondent aux styles en ligne du gabarit, qui centrent
   la carte pour la version bureau. */
@media (max-width:860px) {
  .grid-4 > .card {
    display:grid; grid-template-columns:56px 1fr;
    column-gap:14px; row-gap:2px; align-items:center;
    text-align:left !important; padding:14px !important;
  }
  .grid-4 > .card > .avatar {
    grid-column:1; grid-row:1 / span 3; margin:0 !important;
    width:56px; height:56px; font-size:19px;
  }
  .grid-4 > .card > div { margin-top:0 !important; }
  .grid-4 > .card > .tag { justify-self:start; margin-top:5px !important; }
  .grid-4 > .card > .contact {
    grid-column:1 / -1; margin-top:12px; padding-top:11px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .grid-4 > .card > .contact > .center { justify-content:flex-start !important;
                                         margin-top:0 !important; }
}

/* Dépôt de photo depuis l'avatar : la cible de clic est l'avatar lui-même,
   ce qui evite une troisieme colonne de boutons sur une ligne deja chargee. */
.avatar-depot { position:relative; cursor:pointer; }
.avatar-depot .depot-ico {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:13px; border-radius:50%;
  background:rgba(42,33,27,.55); opacity:0; transition:opacity .12s;
}
.avatar-depot:hover .depot-ico, .avatar-depot:focus-within .depot-ico { opacity:1; }

/* ── Socle : structures et personnes ───────────────────────────────────── */
.fil { display:flex; flex-wrap:wrap; align-items:center; gap:7px;
       font-size:12.5px; color:var(--muted); margin-bottom:16px; }
.fil a { color:var(--muted); text-decoration:none; }
.fil a:hover { color:var(--primary-press); text-decoration:underline; }
.fil span { color:var(--faint); }
.fil b { color:var(--text); font-weight:600; }

.rang-structure {
  display:flex; align-items:center; gap:11px; padding:11px 16px;
  color:inherit; text-decoration:none; border-bottom:1px solid var(--line);
  position:relative;
}
.rang-structure:last-child { border-bottom:none; }
.rang-structure:hover { background:var(--panel2); }
/* Le trait de branche remplace l'indentation seule : sur une liste a plat,
   la profondeur ne se lit pas d'un coup d'oeil. */
.rang-structure .branche {
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--line); margin-left:-12px;
}
.genre-struct {
  width:26px; height:26px; flex:none; border-radius:6px; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:#fff; background:var(--muted);
}
.genre-struct.grand { width:46px; height:46px; font-size:19px; border-radius:11px; }
.genre-struct.t-mouvement  { background:var(--primary-press); }
.genre-struct.t-instance   { background:#3C6E8F; }
.genre-struct.t-commission { background:#7A5BA0; }
.genre-struct.t-ville      { background:#A9612A; }
.genre-struct.t-bureau     { background:#8A6A1F; }
.genre-struct.t-cellule    { background:#3E6F58; }

@media (max-width:860px) {
  .rang-structure { padding-left:14px !important; }
  .rang-structure .branche { display:none; }
}

/* Compteur de messages publics non traités, dans la barre latérale. */
.pastille-nav {
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  background:var(--primary); color:var(--on-primary); font-size:12px;
  font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}

/* Composition d'un bureau : les postes vacants restent visibles mais en
   retrait — c'est ce qui reste à pourvoir, pas une anomalie. */
.num-poste {
  width:22px; height:22px; flex:none; border-radius:5px; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:var(--muted); background:var(--soft);
}
.poste-vacant { background:repeating-linear-gradient(135deg,
  transparent, transparent 9px, rgba(160,148,138,.055) 9px, rgba(160,148,138,.055) 18px); }
.poste-vacant .num-poste { color:var(--faint); background:transparent;
  border:1px dashed var(--border); }

/* Gouvernance : une échéance dépassée doit se voir sans lire l'étiquette. */
.ligne-retard { box-shadow:inset 3px 0 0 var(--live); }
.ligne-presence {
  display:flex; align-items:center; gap:9px; padding:5px 0;
  border-bottom:1px solid var(--line);
}
.ligne-presence:last-child { border-bottom:none; }

/* Album volumineux : le surplus reste dans le HTML mais hors flux, pour que
   le bouton « afficher les autres » n'ait rien à recharger. */
.photo.au-dela { display:none; }

/* Guide de démarrage : visible une fois, puis il s'efface de lui-même. */
.premiers-pas { margin:14px 0 16px; padding-left:22px; display:flex;
                flex-direction:column; gap:9px; }
.premiers-pas li { font-size:14px; line-height:1.6; color:var(--muted); }
.premiers-pas li::marker { color:var(--primary); font-weight:700; }

/* Ligne de budget : prévu à gauche, jauge au milieu, réalisé à droite. */
.ligne-budget { display:flex; align-items:center; gap:12px; margin-bottom:11px;
                flex-wrap:wrap; }
.ligne-budget .poste { width:170px; flex:none; font-size:13px; color:var(--muted); }
.ligne-budget .reel { width:96px; flex:none; text-align:right; font-size:13.5px;
                      font-weight:700; font-variant-numeric:tabular-nums; }
.ligne-budget .reel.depasse { color:var(--live); }
@media (max-width:720px) {
  .ligne-budget .poste { width:100%; }
  .ligne-budget .reel { width:auto; }
}

/* ===================================================================
   Voir ce qu'on tape.
   Un mot de passe saisi a l'aveugle est la premiere cause d'echec de
   connexion sur telephone. L'oeil se pose dans le champ lui-meme, pas a
   cote : la zone de frappe reste entiere.
   =================================================================== */
.mdp-enveloppe { position:relative; display:block; }
.mdp-enveloppe input { padding-right:46px; width:100%; }
.mdp-oeil {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; padding:0; border:0; background:none;
  border-radius:9px; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:color .14s ease, background-color .14s ease;
}
.mdp-oeil svg { width:19px; height:19px; }
.mdp-oeil:hover { color:var(--primary); background:var(--panel2); }
.mdp-oeil:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* La reponse en direct a « est-ce que les deux sont pareils ? » — au lieu
   de l'apprendre apres avoir valide. */
.mdp-verdict {
  font-size:12px; line-height:1.5; margin-top:6px; min-height:1em;
  transition:color .14s ease;
}
.mdp-verdict.ok { color:#2F7D52; }
.mdp-verdict.non { color:#B0473F; }

/* La deconnexion, dans la carte du compte : c'est une commande, donc une
   cible de 44 px comme les autres (elle mesurait 18x18 a l'ecran). */
.lien-quitter {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; border-radius:11px;
  color:var(--muted);
}
.lien-quitter:hover { background:var(--soft); color:var(--primary-press); }