/* SobriZen V4 — repères visuels, navigation directe et garde-fous responsive */
:root{
  /* Fond inspiré d'un hôpital moderne : lumière, eau, hygiène, calme */
  --bg:#eefafd;
  --card:#ffffff;
  --text:#173b42;
  --muted:#607b82;
  --line:#cfe7ec;
  --soft:#e3f6f8;
  --peach:#fff4e8;
  --lavender:#f1efff;
  --hospital-ice:#eefafd;
  --hospital-aqua:#dff5f7;
  --hospital-blue:#cdeef3;
  --hospital-mint:#e7f7f2;
  --hospital-glass:#f8feff;
  --shadow:0 12px 32px rgba(45,112,124,.10);
  --axis-home:#16a34a;
  --axis-progress:#0284c7;
  --axis-journey:#ea580c;
  --axis-journal:#7c3aed;
  --axis-movement:#0d9488;
  --axis-games:#d97706;
  --axis-community:#e11d48;
  --axis-profile:#2563eb;
  --axis-current:var(--axis-home);
}
body[data-page="home"]{--axis-current:var(--axis-home);--green:var(--axis-home)}
body[data-page="progress"]{--axis-current:var(--axis-progress);--green:var(--axis-progress)}
body[data-page="journey"]{--axis-current:var(--axis-journey);--green:var(--axis-journey)}
body[data-page="journal"]{--axis-current:var(--axis-journal);--green:var(--axis-journal)}
body[data-page="movement"]{--axis-current:var(--axis-movement);--green:var(--axis-movement)}
body[data-page="games"]{--axis-current:var(--axis-games);--green:var(--axis-games)}
body[data-page="community"]{--axis-current:var(--axis-community);--green:var(--axis-community)}
body[data-page="profile"]{--axis-current:var(--axis-profile);--green:var(--axis-profile)}

body{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(238,250,253,.92) 42%,rgba(220,244,247,.90) 100%),
    radial-gradient(circle at 84% 4%,rgba(142,224,232,.28),transparent 31rem),
    radial-gradient(circle at 12% 35%,rgba(196,239,244,.30),transparent 25rem),
    var(--hospital-ice);
  background-attachment:fixed;
  transition:background-color .2s ease;
}
body.dark{
  --bg:#102c32;
  --card:#17383e;
  --text:#eefcfe;
  --muted:#b6d7dc;
  --line:#31545b;
  --soft:#1d4850;
  background:
    radial-gradient(circle at 90% 4%,rgba(79,176,190,.18),transparent 28rem),
    linear-gradient(180deg,#102c32 0%,#14363c 100%);
}
.welcome-hero{
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),transparent 36%),
    linear-gradient(145deg,#38aebb 0%,#58c7cf 48%,#95dde2 100%);
}
.welcome-hero em{color:#ffffff}
.welcome-hero:after{border-color:#ffffff66;box-shadow:0 0 0 50px #ffffff14,0 0 0 100px #ffffff0b}

#content,#content *,.main,.card,.stat,.game-card,.mv-card,.tl-action-card,.tl-history-event{min-width:0}
#content :where(h1,h2,h3,p,small,span,strong,b,a,button,label,summary,td,th),
dialog :where(h1,h2,h3,p,small,span,strong,b,a,button,label,summary){
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
button,.tag,.badge,.secondary,.primary{max-width:100%;white-space:normal}
input,textarea,select{min-width:0;max-width:100%}
.card{overflow:hidden}
.card h2,.card h3{max-width:100%}
.greeting{max-width:820px}
.greeting p{max-width:680px}
.primary{color:#fff}
body.dark .primary{color:#fff}
.tl-hero,.card.green{color:#fff}
.tl-hero .tag{color:#fff}
.entry-body{overflow-wrap:anywhere;word-break:break-word}
.search{min-width:min(100%,260px)}
.row>*{min-width:0}

#appNav{
  background:linear-gradient(180deg,#fbfeff 0%,#effafb 100%);
  border-color:var(--line);
  z-index:40
}
body.dark #appNav{background:linear-gradient(180deg,#17383e 0%,#123037 100%)}
#appNav>.brand{flex-shrink:0}
#appNav .badge{border:1px solid color-mix(in srgb,var(--axis-current) 24%,var(--line))}
#nav{gap:7px}
#nav button{
  --nav-accent:var(--axis-home);
  position:relative;
  min-height:48px;
  border:1px solid transparent;
  border-radius:15px;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
#nav button:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 8px;
  background:var(--nav-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--nav-accent) 13%,transparent);
}
#nav button[data-page="home"]{--nav-accent:var(--axis-home)}
#nav button[data-page="progress"]{--nav-accent:var(--axis-progress)}
#nav button[data-page="journey"]{--nav-accent:var(--axis-journey)}
#nav button[data-page="journal"]{--nav-accent:var(--axis-journal)}
#nav button[data-move="open"]{--nav-accent:var(--axis-movement)}
#nav button[data-page="games"]{--nav-accent:var(--axis-games)}
#nav button[data-page="community"]{--nav-accent:var(--axis-community)}
#nav button[data-page="profile"]{--nav-accent:var(--axis-profile)}
#nav button:hover{background:color-mix(in srgb,var(--nav-accent) 8%,transparent);transform:translateX(2px)}
#nav button.selected{
  background:color-mix(in srgb,var(--nav-accent) 13%,var(--card));
  border-color:color-mix(in srgb,var(--nav-accent) 25%,var(--line));
  color:var(--nav-accent);
}
#nav button.selected:before{box-shadow:0 0 0 5px color-mix(in srgb,var(--nav-accent) 18%,transparent)}
#nav button svg{color:var(--nav-accent);flex:0 0 auto}
.aside-bottom{
  border-top:1px solid var(--line);
  margin-top:auto;
}
.aside-bottom>a,.aside-bottom p a{font-weight:700}
.aside-bottom .primary{background:linear-gradient(135deg,#ef4444,#e11d48)}
.drawer-close,.menu-toggle,.nav-scrim{display:none}

header{
  position:sticky;
  top:0;
  z-index:24;
  background:rgba(248,254,255,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(179,220,227,.58);
}
body.dark header{background:rgba(16,44,50,.88)}
header:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,var(--axis-current),transparent 70%);
  opacity:.22;
}
.menu-toggle,.drawer-close{
  width:44px;
  height:44px;
  padding:0;
  place-items:center;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--axis-current);
  box-shadow:var(--shadow);
  font-size:22px;
}
.header-identity{gap:10px}
#headerDate{text-transform:capitalize}
#content>.greeting:first-child{padding-top:6px}
#content>.greeting:first-child .eyebrow{color:var(--axis-current)}

.tl-actions .tl-action-card:nth-child(1)>span{color:var(--axis-progress)}
.tl-actions .tl-action-card:nth-child(2)>span{color:var(--axis-journey)}
.tl-actions .tl-action-card:nth-child(3)>span{color:var(--axis-journal)}
.game-card>span{filter:saturate(1.15)}
.game-card:hover,.tl-action-card:hover,.mv-card:hover{border-color:color-mix(in srgb,var(--axis-current) 28%,var(--line))}
.mv-safety:not([open]){padding-bottom:0}
.mv-safety summary{font-weight:750}

@media(max-width:800px){
  #workspace{display:block}
  .main{padding:0 16px 26px}
  #appNav{
    display:flex;
    position:fixed;
    inset:0 auto 0 0;
    width:min(88vw,340px);
    height:100dvh;
    padding:72px 18px calc(22px + env(safe-area-inset-bottom));
    border:0;
    border-right:1px solid var(--line);
    box-shadow:24px 0 70px #0b1f1a38;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(-105%);
    transition:transform .22s ease;
    background:var(--card);
    z-index:90;
  }
  body.menu-open{overflow:hidden}
  body.menu-open #appNav{transform:translateX(0)}
  #appNav>.brand{display:flex;margin:0 0 10px}
  #appNav>.badge{display:inline-block;margin:0 0 22px;align-self:flex-start}
  #appNav .aside-bottom{display:block;padding-top:18px}
  #nav{display:grid!important;grid-template-columns:1fr!important;gap:7px;width:100%}
  #nav button{
    flex-direction:row!important;
    justify-content:flex-start;
    gap:12px;
    padding:12px 14px;
    font-size:15px;
    text-align:left;
  }
  #nav button span{font-size:14px;letter-spacing:0}
  #nav button:before{display:block}
  .drawer-close{
    display:grid;
    position:absolute;
    top:16px;
    right:16px;
  }
  .menu-toggle{display:grid;flex:0 0 44px}
  .nav-scrim{
    display:block;
    position:fixed;
    inset:0;
    border:0;
    border-radius:0;
    padding:0;
    background:#071d1870;
    opacity:0;
    pointer-events:none;
    z-index:80;
    transition:opacity .2s ease;
  }
  body.menu-open .nav-scrim{opacity:1;pointer-events:auto}
  header{
    height:auto;
    min-height:70px;
    margin:0 -16px 16px;
    padding:10px 16px;
    gap:8px;
  }
  header .row{flex-wrap:nowrap;gap:7px}
  .brand--mobile{display:flex}
  .brand--mobile .brand-wordmark{width:100px}
  #headerDate{display:none}
  .greeting{margin:8px 0 20px}
  .greeting h1{font-size:clamp(28px,8vw,34px)}
  .greeting p{font-size:14px;line-height:1.5}
  .card{overflow:hidden}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:last-child:nth-child(odd){grid-column:1/-1}
  .stat b{overflow-wrap:anywhere}
  .tl-actions{grid-template-columns:1fr}
  .tl-action-card{min-height:0!important}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-card{min-width:0}
  footer{padding-bottom:34px}
  #notice{bottom:22px}
}
@media(max-width:520px){
  .main{padding-left:13px;padding-right:13px}
  header{margin-left:-13px;margin-right:-13px;padding-left:13px;padding-right:13px}
  header .secondary[data-action="help"]{padding:10px 11px;font-size:12px}
  header [data-action="theme"]{display:none}
  .brand--mobile .brand-wordmark{width:92px}
  .avatar{width:38px;height:38px;flex:0 0 38px}
  .card{padding:17px 15px}
  .two-fields{grid-template-columns:1fr}
  .tl-choice>span,.mv-tabs button{overflow-wrap:anywhere}
  .post-top{align-items:flex-start}
  .post-top>.tag{max-width:40%;text-align:center}
  dialog{width:min(100% - 14px,620px)}
  #modalContent{padding:18px 15px}
}
@media(max-width:360px){
  .brand--mobile .brand-wordmark{display:none}
  header .secondary[data-action="help"]{font-size:0;width:40px;height:40px;padding:0}
  header .secondary[data-action="help"]:after{content:"Aide";font-size:11px}
  .game-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat:last-child:nth-child(odd){grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  #appNav,.nav-scrim,#nav button{transition:none!important}
}


/* Extra narrow-content fixes */
@media(max-width:700px){
  .mv-level-head{gap:9px;flex-wrap:wrap}
  .mv-level-head .tag{white-space:normal;text-align:center}
  .pg-year-label{min-width:0;max-width:100%}
  .pg-table th[scope=row]{white-space:normal}
}
@media(max-width:420px){
  .pg-table{min-width:480px}
  .tl-heading{flex-wrap:wrap}
  .tl-heading>.tag{max-width:100%}
}


/* Hospital-clean surfaces */
.card,.stat,.game-card,.mv-card,.tl-action-card,dialog{
  background:linear-gradient(180deg,#ffffff 0%,#fbfeff 100%);
  border-color:var(--line);
}
body.dark .card,body.dark .stat,body.dark .game-card,body.dark .mv-card,body.dark .tl-action-card,body.dark dialog{
  background:linear-gradient(180deg,#17383e 0%,#15343a 100%);
}
.card.peach{background:linear-gradient(180deg,#fffaf4 0%,#fff3e7 100%)}
.card.purple{background:linear-gradient(180deg,#faf9ff 0%,#f1efff 100%)}
.card.green,.tl-hero{
  background:linear-gradient(145deg,var(--axis-current),color-mix(in srgb,var(--axis-current) 70%,#73d5df));
}
input,textarea,select{
  background:#ffffff;
  border-color:#c9e3e8;
}
body.dark input,body.dark textarea,body.dark select{background:#17383e;border-color:#31545b}
.tabs,.secondary,.badge,.tag{
  background:color-mix(in srgb,var(--hospital-aqua) 78%,#ffffff);
}
body.dark .tabs,body.dark .secondary,body.dark .badge,body.dark .tag{
  background:color-mix(in srgb,var(--soft) 88%,#102c32);
}
#content:before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,#b9e4e9,transparent);
  margin-bottom:10px;
  opacity:.65;
}