/* ════════════════════════════════════════════════════════════════
   TribesFlow Mobile — Design system & shell (mobile-first)
   Conçu téléphone d'abord, s'élargit en paysage / tablette.
   Aucune dépendance, aucun positionnement absolu fragile.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* Palette TribesFlow */
  --papier:#F5F0E8;
  --encre:#1A1814;
  --terre:#B87333;
  --marine:#2B4561;
  --mousse:#6B7F5C;
  --rouille:#B85F3A;
  --or:#C8A24B;
  /* Couleurs d'accent par domaine */
  --c-tribu:#B85F3A; --c-foyer:#2B4561; --c-patrimoine:#6B7F5C; --c-souvenirs:#C8A24B;
  /* Surfaces */
  --bg:#14110D;            /* fond app (sombre, chaleureux) */
  --card:#211c16;          /* carte */
  --card-2:#2b251d;        /* carte survol/active */
  --line:rgba(245,240,232,.12);
  --txt:#F5F0E8;
  --txt-soft:rgba(245,240,232,.62);
  /* Polices */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'Montserrat',sans-serif;
  /* Mesures */
  --header-h:54px;
  --nav-h:64px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --radius:16px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
svg{display:block;width:1em;height:1em;}
.ic svg{width:1em;height:1em;}
html,body{height:100%;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--txt);
  overflow:hidden;            /* le scroll vit dans .app-main */
  -webkit-font-smoothing:antialiased;
}

/* ── Structure générale : header / main scrollable / nav basse ── */
.app{
  display:flex; flex-direction:column;
  height:100dvh; height:100vh;
}
.app-header{
  flex:0 0 auto;
  height:calc(var(--header-h) + var(--safe-top));
  padding:var(--safe-top) 16px 0;
  display:flex; align-items:center; gap:10px;
  background:rgba(20,17,13,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:relative; z-index:20;
}
.app-header .logo{
  font-family:var(--serif); font-size:1.35rem; font-weight:600;
  color:var(--or); letter-spacing:.01em; white-space:nowrap;
  text-decoration:none; display:flex; align-items:center; gap:7px;
}
.app-header .logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--terre); display:inline-block; }
.app-header .titre{ font-family:var(--serif); font-size:1.15rem; font-weight:500; flex:1; }
.app-header .spacer{ flex:1; }
.app-header .pill{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt); background:rgba(245,240,232,.10); border:1px solid var(--line);
  padding:6px 11px; border-radius:20px; white-space:nowrap;
}
.app-header .ic{
  width:36px; height:36px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,240,232,.08); border:1px solid var(--line);
  color:var(--txt); text-decoration:none; font-size:1rem;
}
.app-header .back{ font-size:1.2rem; }

.app-main{
  flex:1 1 auto;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 14px calc(14px + var(--safe-bot));
}

/* ── Barre de navigation basse (4-5 onglets) ── */
.app-nav{
  flex:0 0 auto;
  height:calc(var(--nav-h) + var(--safe-bot));
  padding-bottom:var(--safe-bot);
  display:flex; align-items:stretch;
  background:rgba(20,17,13,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  position:relative; z-index:20;
}
.app-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-decoration:none; color:var(--txt-soft); font-family:var(--mono);
  font-size:.56rem; letter-spacing:.05em; text-transform:uppercase;
}
.app-nav a .ic{ font-size:1.3rem; line-height:1; }
.app-nav a.actif{ color:var(--or); }
.app-nav a:active{ background:rgba(245,240,232,.05); }

/* ── Hero de page (titre + sous-titre) ── */
.hero{ padding:6px 2px 14px; }
.hero .eyebrow{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terre); }
.hero h1{ font-family:var(--serif); font-size:1.9rem; font-weight:600; line-height:1.05; margin-top:3px; }
.hero p{ color:var(--txt-soft); font-size:.9rem; margin-top:6px; line-height:1.4; }

/* ── Grille de rubriques (accueil) — remplit l'espace, responsive ── */
.tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media (min-width:560px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .tiles{ grid-template-columns:repeat(4,1fr); } }
.tile{
  display:flex; flex-direction:column; gap:8px;
  border:none; border-radius:var(--radius); padding:16px 15px;
  text-decoration:none; color:var(--txt);
  min-height:118px; position:relative; overflow:hidden;
  transition:transform .12s, filter .12s;
}
.tile:active{ transform:scale(.97); filter:brightness(1.15); }
.tile .ic{ font-size:1.7rem; line-height:1; }
.tile .nom{ font-family:var(--serif); font-size:1.2rem; font-weight:600; line-height:1.1; margin-top:auto; }
.tile .sub{ font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
/* Cartes en couleurs MÉLANGÉES : chaque tuile sa teinte (via .c1..c8),
   le sous-titre rappelle le domaine. Palette riche et variée. */
.tile .ic{ color:rgba(245,240,232,.92); }
.tile.c1{ background:#3B4A33; } .tile.c1 .ic{ color:#C0DD97; }   /* vert mousse */
.tile.c2{ background:#22364A; } .tile.c2 .ic{ color:#B5D4F4; }   /* bleu marine */
.tile.c3{ background:#5A3122; } .tile.c3 .ic{ color:#F5C4B3; }   /* terre rouille */
.tile.c4{ background:#5A4A1C; } .tile.c4 .ic{ color:#FAC775; }   /* or */
.tile.c5{ background:#3A4536; } .tile.c5 .ic{ color:#C0DD97; }   /* olive */
.tile.c6{ background:#4A2A3A; } .tile.c6 .ic{ color:#F4C0D1; }   /* prune */
.tile.c7{ background:#234642; } .tile.c7 .ic{ color:#9FE1CB; }   /* sarcelle */
.tile.c8{ background:#473655; } .tile.c8 .ic{ color:#CECBF6; }   /* violet doux */

/* ── Cartes & listes génériques (pour les rubriques) ── */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.card h2{ font-family:var(--serif); font-size:1.3rem; font-weight:600; margin-bottom:10px; }
.row{ display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:none; }
.row .r-ic{ font-size:1.3rem; flex:0 0 auto; }
.row .r-main{ flex:1; min-width:0; }
.row .r-main .t{ font-size:.96rem; }
.row .r-main .d{ font-size:.78rem; color:var(--txt-soft); margin-top:2px; }
.row .r-val{ font-family:var(--mono); font-size:.9rem; white-space:nowrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 18px; border-radius:12px; border:1px solid var(--line);
  background:var(--terre); color:#fff; text-decoration:none; cursor:pointer; width:100%;
}
.btn.ghost{ background:transparent; color:var(--txt); }
.muted{ color:var(--txt-soft); font-size:.82rem; line-height:1.5; }

/* KPI en bandeau */
.kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.kpi .v{ font-family:var(--serif); font-size:1.6rem; }
.kpi .v.pos{ color:var(--mousse); } .kpi .v.neg{ color:var(--rouille); }
.kpi .l{ font-family:var(--mono); font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-soft); margin-top:4px; }

/* Écran de connexion */
.gate{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--bg); padding:30px; text-align:center; }
.gate .logo{ font-family:var(--serif); font-size:2.4rem; color:var(--or); }
.gate input{ width:100%; max-width:280px; padding:14px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:1rem; text-align:center; }
.gate .who{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:320px; }
.gate .who button{ padding:12px 18px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--txt); font-family:var(--serif); font-size:1.1rem; cursor:pointer; }
.gate .who button:active{ background:var(--card-2); }
.hidden{ display:none !important; }