/* NBA Academy — la coque, le verre et les pages. Toutes les couleurs viennent de tokens.css.
   Mise en page : une barre latérale de verre (Mac) qui devient barre d'onglets en bas (iPhone), posée sur le décor ambiant. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; overflow-x: hidden;
  background: repeating-linear-gradient(115deg, transparent 0 46px, var(--ambient-trame) 46px 48px), var(--bg);
  color: var(--text); font: 400 var(--fs-md)/1.55 var(--font-body); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--gold-fill-to); color: var(--on-gold); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); }
.skip:focus { left: 8px; }

/* Le décor derrière le verre : des nappes floues qui dérivent lentement. */
body::before {
  content: ''; position: fixed; inset: -12vmax; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(50vmax 38vmax at 84% 8%, var(--ambient-1), transparent 68%),
    radial-gradient(40vmax 34vmax at 12% 92%, var(--ambient-2), transparent 68%),
    radial-gradient(30vmax 26vmax at 62% 70%, var(--ambient-3), transparent 70%),
    radial-gradient(26vmax 22vmax at 18% 18%, var(--ambient-1), transparent 70%);
  animation: drift 70s var(--ease-in-out) infinite alternate;
}
@keyframes drift { to { transform: translate3d(-4vmax, 3vmax, 0) rotate(6deg); } }

/* ───── Le verre ─────
   Façon Apple : un voile flouté et saturé, une lumière qui tombe du haut (reflet), un liseré dégradé sur le bord
   (vif en haut à gauche, éteint au milieu, qui revient en bas à droite) et une ombre douce. */
:root {
  --rim: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 32%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.45));
  --glass-top: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.14));
  --glass-blur-strong: blur(42px) saturate(210%) brightness(1.05);
}
:root[data-theme='dark'] {
  --rim: linear-gradient(150deg, rgba(255, 236, 205, 0.5), rgba(255, 236, 205, 0.1) 32%, rgba(255, 236, 205, 0) 58%, rgba(226, 194, 122, 0.28));
  --glass-top: linear-gradient(180deg, rgba(255, 240, 220, 0.10), rgba(255, 240, 220, 0.02) 46%, rgba(255, 240, 220, 0.04));
}
.glass {
  position: relative; isolation: isolate;
  background: var(--glass-top), var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
  border: 0;
  box-shadow: var(--glass-inset), var(--glass-shadow);
}
.glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-sheen), var(--glass-caustic); pointer-events: none; z-index: -1; }
.glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass--strong { background: var(--glass-top), var(--glass-bg-strong); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-top), var(--glass-bg-strong); } }
/* Les cartes qu'on touche se soulèvent, et une lumière les traverse. */
.lift { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); overflow: hidden; }
.lift:hover { transform: translateY(-3px); box-shadow: var(--glass-inset), var(--glass-shadow-lift); }
.lift > .shine { position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); opacity: 0; }
.lift:hover > .shine { animation: shine 900ms var(--ease-out); }
@keyframes shine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }

/* Le grain, très léger, par-dessus tout (comme faberlo.com). */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 200; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, 1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Les pictos de verre (public/js/icons.js). */
.gicon { width: 38px; height: 38px; flex: none; display: block; filter: drop-shadow(0 4px 7px rgba(42, 13, 19, 0.28)); transition: transform var(--t-med) var(--ease-spring); }
:root[data-theme='dark'] .gicon { filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.55)); }

.control {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: var(--glass-control); box-shadow: var(--glass-inset);
  border-radius: var(--r-pill); padding: 8px 14px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  transition: background var(--t-fast);
}
.control:hover { background: var(--glass-control-hover); }
.control--danger { color: var(--danger); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; border: 0; border-radius: var(--r-pill); padding: 11px 20px; text-decoration: none;
  background: var(--fill-sheen), linear-gradient(180deg, var(--gold-fill-from), var(--gold-fill-to));
  color: var(--on-gold); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: inset 0 1px 0 var(--fill-edge), 0 8px 22px rgba(var(--gold-rgb), 0.24);
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast);
}
.btn { overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 32%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent); animation: sheen 5.5s var(--ease-in-out) infinite; pointer-events: none; }
@keyframes sheen { 0%, 64% { left: -50%; } 100% { left: 130%; } }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn--wide { width: 100%; }
.eyebrow { font: 600 0.69rem/1.2 var(--font-accent); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.tag { display: inline-block; font: 600 0.66rem/1 var(--font-accent); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-bright); }
.soon { margin-left: auto; font: 600 0.6rem/1 var(--font-accent); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 7px; border-radius: var(--r-pill); background: var(--wine-soft); color: var(--muted); }
.badge-team { display: inline-flex; align-items: center; font: 600 0.6rem/1 var(--font-accent); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-pill); background: var(--wine); color: var(--cream); vertical-align: 2px; }

/* Le statut d'un membre : une pastille colorée et son libellé. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--muted)) 22%, transparent); }
.tone-gold { --tone: var(--gold); } .tone-wine { --tone: var(--wine); } .tone-info { --tone: var(--info); }
.tone-ok { --tone: var(--ok); } .tone-sky { --tone: var(--sky); } .tone-sun { --tone: var(--sun); } .tone-muted { --tone: var(--muted); }

/* L'avatar : la photo, ou l'initiale sur l'aplat bordeaux. */
.ava {
  --size: 40px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font: 400 calc(var(--size) * 0.38)/1 var(--font-varsity); color: var(--on-gold);
  background: linear-gradient(160deg, var(--gold-fill-from), var(--gold-fill-to)); box-shadow: inset 0 0 0 2px var(--gold-line);
  text-decoration: none;
}
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava--sm { --size: 30px; } .ava--lg { --size: 96px; } .ava--xl { --size: 128px; }

/* ───── La coque ───── */
.topbar, .tabbar { display: none; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }
.side {
  position: sticky; top: 12px; align-self: start; height: calc(100dvh - 24px);
  margin: 12px 0 12px 12px; border-radius: var(--r-xl);
  display: flex; flex-direction: column; padding: 18px 12px 14px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; text-decoration: none; }
.brand img { width: 52px; height: auto; filter: drop-shadow(0 4px 8px rgba(42, 13, 19, 0.25)); }
.brand__name { font: 400 0.94rem/1.05 var(--font-varsity); letter-spacing: 0.02em; color: var(--wine); }
:root[data-theme='dark'] .brand__name { color: var(--gold-bright); }
.brand__sub { display: block; margin-top: 4px; font: 600 0.62rem/1 var(--font-accent); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav__link {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; text-decoration: none;
  border: 0; background: transparent; padding: 7px 10px; border-radius: var(--r-md);
  font-weight: 600; font-size: 0.92rem; color: var(--text-2); transition: background var(--t-fast);
}
.nav__link .gicon { width: 36px; height: 36px; }
.nav__link:hover .gicon, .tab:hover .gicon { transform: translateY(-1px) scale(1.04); }
.nav__link[aria-current='page'] .gicon { transform: scale(1.06); }
.nav__link:hover:not([aria-disabled='true']) { background: var(--glass-control); box-shadow: var(--glass-inset); color: var(--text); }
.nav__link[aria-current='page'] {
  color: var(--text);
  background: var(--glass-sheen), linear-gradient(145deg, rgba(var(--gold-rgb), 0.24), rgba(var(--gold-rgb), 0.05));
  box-shadow: var(--glass-inset), 0 0 0 1px var(--gold-line);
}
.nav__link[aria-disabled='true'] { cursor: not-allowed; color: var(--muted); }
.nav__link[aria-disabled='true'] .gicon, .tab[aria-disabled='true'] .gicon { filter: grayscale(1) opacity(0.45); }
.nav__sep { height: 1px; background: var(--line); margin: 8px 10px; }
.nav__label { font: 600 0.6rem/1 var(--font-accent); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 2px; }
.side__foot { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); background: var(--glass-control); box-shadow: var(--glass-inset); font-size: var(--fs-sm); text-decoration: none; min-width: 0; }
.me > span:last-child { min-width: 0; }
.me b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__row { display: flex; gap: 8px; }
.side__row .control { flex: 1; }

.main { min-width: 0; padding: 28px clamp(16px, 4vw, 52px) 64px; outline: none; }
.view { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.loading { color: var(--muted); padding: 40px 0; }
.head { display: flex; flex-direction: column; gap: 10px; max-width: 64ch; }
.head h1 { font: 800 clamp(2.1rem, 5vw, 3.25rem)/1.02 var(--font-display); font-stretch: 112%; letter-spacing: -0.02em; }
.head p { color: var(--text-2); font-size: 1rem; }

/* ───── Ressources ───── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip[aria-pressed='true'] { background: var(--fill-sheen), linear-gradient(180deg, var(--gold-fill-from), var(--gold-fill-to)); color: var(--on-gold); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.res { border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.res h3 { font: 700 1.12rem/1.25 var(--font-display); }
.res p { color: var(--text-2); font-size: 0.9rem; flex: 1; }
.res__act { display: flex; gap: 8px; margin-top: 4px; }
.res__act .btn { flex: 1; }
.res-content { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.6; padding: 16px; border-radius: var(--r-md); background: var(--glass-field); box-shadow: var(--glass-inset); max-height: 52vh; overflow: auto; }

/* ───── Formation ───── */
.prog { border-radius: var(--r-xl); padding: 22px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.prog__crest { width: 86px; height: auto; filter: drop-shadow(0 8px 16px rgba(42, 13, 19, 0.28)); }
.prog__big { font: 800 2.1rem/1 var(--font-display); font-stretch: 112%; }
.prog__big span { font-size: 1.05rem; color: var(--muted); font-weight: 600; }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--wine-soft); overflow: hidden; margin-top: 10px; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-fill-to)); transition: width 500ms var(--ease-out); }
.prog__next { font-size: var(--fs-sm); color: var(--text-2); margin-top: 8px; }
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.mod { border-radius: var(--r-lg); overflow: hidden; }
.mod__head { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; border: 0; background: transparent; text-align: left; padding: 14px 16px; }
.mod__head img { width: 58px; height: 58px; }
.mod__n { display: block; font: 400 0.8rem/1 var(--font-varsity); color: var(--gold-bright); letter-spacing: 0.04em; }
.mod__t { display: block; font: 700 1.06rem/1.2 var(--font-display); margin-top: 4px; }
.mod__m { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.mod__m b { color: var(--gold-bright); font-weight: 600; }
.chev { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-control); box-shadow: var(--glass-inset); transition: transform var(--t-med) var(--ease-out); }
.mod[data-open] .chev { transform: rotate(180deg); }
.mod__mini { height: 3px; background: var(--wine-soft); margin: 0 16px; border-radius: 3px; overflow: hidden; }
.mod__mini i { display: block; height: 100%; background: var(--gold); transition: width 400ms var(--ease-out); }
.lessons { list-style: none; margin: 0; padding: 8px 10px 12px; display: none; }
.mod[data-open] .lessons { display: block; }
.lesson { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r-sm); font-size: 0.88rem; }
.lesson + .lesson { border-top: 1px solid var(--line); }
.lesson label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.check { appearance: none; margin: 0; width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--glass-field); display: grid; place-items: center; cursor: pointer; }
.check:checked { background: var(--ok); border-color: var(--ok); }
.check:checked::after { content: ''; width: 5px; height: 10px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check:disabled { cursor: not-allowed; opacity: 0.5; }
.later { font: 600 0.6rem/1 var(--font-accent); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 4px 7px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); flex: none; }
.share-btn { border: 0; background: var(--gold-soft); color: var(--gold-bright); border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--fs-xs); font-weight: 700; flex: none; }

/* ───── Communauté ───── */
.comm { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.box { border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.box h3 { font: 700 0.94rem/1.2 var(--font-display); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.box h3 small { font: 500 var(--fs-xs) var(--font-body); color: var(--muted); }
.channels { display: flex; flex-direction: column; gap: 2px; }
.channel { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 9px 10px; border-radius: var(--r-sm); font-weight: 600; font-size: 0.88rem; color: var(--text-2); }
.channel span:first-child { color: var(--gold); font-weight: 800; }
.channel small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.channel:hover { background: var(--glass-control); }
.channel[aria-current='page'] { background: var(--glass-control); box-shadow: var(--glass-inset); color: var(--text); }
.invite__link { display: flex; gap: 6px; }
.field-ro { flex: 1; min-width: 0; border: 0; border-radius: var(--r-sm); padding: 9px 10px; background: var(--glass-field); box-shadow: var(--glass-inset); font: 500 0.78rem/1 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--text-2); }
.invite__count { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.invite__count b { font: 800 1.5rem/1 var(--font-display); color: var(--text); }
.people { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.person { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); text-decoration: none; min-width: 0; }
.person:hover { background: var(--glass-control); }
.person > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person b { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.composer { border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.composer textarea, .input, .textarea {
  width: 100%; border: 0; border-radius: var(--r-md); padding: 12px 14px; background: var(--glass-field); box-shadow: var(--glass-inset);
  font-size: 0.94rem; color: var(--text);
}
.composer textarea { min-height: 76px; resize: vertical; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row--end { justify-content: flex-end; }
.select { border: 0; border-radius: var(--r-pill); padding: 8px 12px; background: var(--glass-control); box-shadow: var(--glass-inset); font-size: var(--fs-sm); font-weight: 600; max-width: 100%; color: var(--text); }
.composer .row .btn { margin-left: auto; }
.attached { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.gate { border-radius: var(--r-lg); padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gate p { flex: 1; min-width: 200px; color: var(--text-2); }
.post { border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.who { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; min-width: 0; }
.who > span:nth-child(2) { min-width: 0; }
.who a { text-decoration: none; font-weight: 700; }
.who a:hover { text-decoration: underline; }
.who small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.post__body { font-size: 0.94rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.learned { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--glass-control); box-shadow: var(--glass-inset); text-decoration: none; }
.learned img { width: 44px; height: 44px; }
.learned b { display: block; font-size: 0.88rem; }
.learned small { color: var(--muted); font-size: var(--fs-xs); }
.acts { display: flex; gap: 4px; flex-wrap: wrap; }
.act { border: 0; background: transparent; padding: 5px 10px; border-radius: var(--r-pill); font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.act:hover { background: var(--glass-control); color: var(--text); }
.act[aria-pressed='true'] { color: var(--gold-bright); background: var(--gold-soft); }
.act--end { margin-left: auto; }
.replies { display: flex; flex-direction: column; gap: 10px; margin-left: 18px; padding-left: 14px; border-left: 2px solid var(--gold-line); }
.reply-form { display: flex; gap: 8px; }
.reply-form .input { padding: 9px 12px; font-size: 0.88rem; }
.empty { border-radius: var(--r-lg); padding: 28px; text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty img { width: 72px; }

/* ───── Profil ───── */
.profile { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.card-id { border-radius: var(--r-xl); padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.card-id h2 { font: 800 1.6rem/1.1 var(--font-display); font-stretch: 110%; }
.card-id .bio { color: var(--text-2); font-size: 0.92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.facts { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; font-size: var(--fs-sm); }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.facts dt, .facts span:first-child { color: var(--muted); }
.facts span:last-child { text-align: right; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.stat { border-radius: var(--r-md); padding: 12px; background: var(--glass-control); box-shadow: var(--glass-inset); }
.stat b { display: block; font: 800 1.5rem/1 var(--font-display); }
.stat span { font-size: var(--fs-xs); color: var(--muted); }
.form { border-radius: var(--r-xl); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.form h2 { font: 700 1.12rem/1.2 var(--font-display); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.field small { font-weight: 400; color: var(--muted); }
.fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.textarea { min-height: 96px; resize: vertical; }
.statuses { display: flex; flex-wrap: wrap; gap: 8px; }
.statuses label { cursor: pointer; }
.statuses input { position: absolute; opacity: 0; pointer-events: none; }
.statuses .status { padding: 8px 12px; border-radius: var(--r-pill); background: var(--glass-control); box-shadow: var(--glass-inset); font-size: var(--fs-sm); }
.statuses input:checked + .status { background: var(--glass-sheen), linear-gradient(145deg, rgba(var(--gold-rgb), 0.26), rgba(var(--gold-rgb), 0.06)); box-shadow: var(--glass-inset), 0 0 0 1px var(--gold-line); color: var(--text); }
.statuses input:focus-visible + .status { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.photo__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }

/* ───── Connexion ───── */
.auth { max-width: 440px; margin: 4vh auto 0; border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.auth__top { display: flex; align-items: center; gap: 14px; }
.auth__top img { width: 60px; }
.auth h1 { font: 800 1.6rem/1.1 var(--font-display); font-stretch: 110%; }
.auth__alt { text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.auth__alt a { color: var(--gold-bright); font-weight: 700; }
.invited-by { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--gold-soft); font-size: var(--fs-sm); }

/* ───── Feuille et message ───── */
.sheet-bg { position: fixed; inset: 0; z-index: 90; background: var(--backdrop); display: grid; place-items: center; padding: 16px; }
.sheet { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: var(--r-xl); padding: 24px; display: flex; flex-direction: column; gap: 14px; background-color: var(--glass-bg-strong); }
.sheet__top { display: flex; align-items: flex-start; gap: 12px; }
.sheet__top h2 { font: 800 1.4rem/1.15 var(--font-display); flex: 1; }
.x { width: 34px; height: 34px; padding: 0; flex: none; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; z-index: 95; padding: 11px 18px; border-radius: var(--r-pill); font-size: 0.88rem; font-weight: 600; background-color: var(--glass-bg-strong); transition: opacity 240ms, transform 240ms var(--ease-out); pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───── iPhone ───── */
@media (max-width: 900px) {
  .shell { display: block; }
  .side { display: none; }
  .topbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 50;
    margin: calc(10px + env(safe-area-inset-top, 0px)) 12px 0; padding: 7px 8px 7px 12px; border-radius: var(--r-pill);
  }
  .topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .topbar__brand img { width: 40px; height: auto; }
  .topbar .brand__name { font-size: 0.8rem; }
  .topbar__end { margin-left: auto; display: flex; gap: 6px; align-items: center; }
  .main { padding: 22px 16px calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    display: grid; grid-template-columns: 1.2fr 1.45fr 1.2fr 0.8fr 0.8fr; position: fixed; z-index: 60;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px; padding: 6px;
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; border: 0; background: transparent; padding: 4px 2px; border-radius: 20px; font-size: 0.62rem; line-height: 1.1; text-align: center; font-weight: 600; color: var(--text-2); text-decoration: none; min-width: 0; }
  .tab .gicon { width: 32px; height: 32px; }
  .tab[aria-current='page'] { background: linear-gradient(145deg, rgba(var(--gold-rgb), 0.26), rgba(var(--gold-rgb), 0.06)); box-shadow: var(--glass-inset); color: var(--text); }
  .tab[aria-disabled='true'] { color: var(--muted); cursor: not-allowed; }
  .comm, .profile { grid-template-columns: minmax(0, 1fr); }
  /* Sur téléphone : les canaux, puis le fil, puis l'invitation. */
  .comm { display: flex; flex-direction: column; }
  .aside { display: contents; }
  .comm > .feed, .aside > .box { min-width: 0; width: 100%; }
  .aside > .box:first-child { order: 1; }
  .comm > .feed { order: 2; }
  #invite-box { order: 3; }
  .channels { flex-direction: row; overflow-x: auto; margin: 0 -4px; padding: 2px 4px; }
  .channel { flex: none; }
  .channel small { display: none; }
  .aside .box--people { display: none; }
  .prog { grid-template-columns: auto minmax(0, 1fr); }
  .prog .btn { grid-column: 1 / -1; }
  .prog__crest { width: 64px; }
  .fields-2 { grid-template-columns: minmax(0, 1fr); }
  .toast { bottom: calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ───── Les canaux : une couleur chacun ───── */
.ch-gold { --ch: var(--ch-gold); } .ch-blue { --ch: var(--ch-blue); } .ch-green { --ch: var(--ch-green); }
.ch-violet { --ch: var(--ch-violet); } .ch-wine { --ch: var(--ch-wine); } .ch-all { --ch: var(--text-2); }
.channel .hash {
  width: 26px; height: 26px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font: 800 0.82rem/1 var(--font-display); color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ch) 70%, white), var(--ch) 60%, color-mix(in srgb, var(--ch) 70%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 8px color-mix(in srgb, var(--ch) 35%, transparent);
}
.channel[aria-current='page'] { background: color-mix(in srgb, var(--ch) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ch) 45%, transparent); color: var(--text); }
.chip-ch {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; color: color-mix(in srgb, var(--ch) 75%, var(--text));
  background: color-mix(in srgb, var(--ch) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ch) 30%, transparent);
}
.chip-ch::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ch); }
/* Un message porte la lumière de son canal en haut de la carte. */
.post[class*='ch-']::before { background: radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--ch) 16%, transparent), transparent 70%), var(--glass-sheen); }
.head--ch .eyebrow { color: color-mix(in srgb, var(--ch) 80%, var(--text)); }
.head--ch h1 span { color: var(--ch); }
.select--ch { box-shadow: var(--glass-inset), inset 0 0 0 1.5px color-mix(in srgb, var(--ch) 45%, transparent); }

/* ───── Formation : bientôt ───── */
.soon-banner { border-radius: var(--r-xl); padding: 22px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.soon-banner img { width: 78px; height: auto; filter: drop-shadow(0 8px 16px rgba(42, 13, 19, 0.28)); }
.soon-banner h2 { font: 800 1.5rem/1.1 var(--font-display); font-stretch: 110%; margin-top: 6px; }
.soon-banner p { color: var(--text-2); margin-top: 6px; }
.pulse { display: inline-flex; align-items: center; gap: 8px; }
.pulse::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--gold)); animation: pulse 1.8s var(--ease-in-out) infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.mod-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.mod-tile { border-radius: var(--r-lg); padding: 16px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.mod-tile img { width: 56px; height: 56px; }
.mod-tile .mod__t { margin-top: 5px; }

/* ───── Ressources : verrouillées sans e-mail ───── */
.lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.lock svg { width: 13px; height: 13px; }
.unlock { border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.unlock p { flex: 1; min-width: 220px; color: var(--text-2); }

/* ───── La landing ─────
   Plein écran, sans barre latérale : l'écusson, une promesse, le champ e-mail. Inspirée de faberlo.com (épurée,
   un objet au centre, un grand titre, un seul champ), en plus court. */
body.is-landing .shell { display: block; }
body.is-landing .side, body.is-landing .tabbar, body.is-landing .topbar { display: none; }
body.is-landing .main { padding: 0; }
body.is-landing .view { max-width: none; gap: 0; }
.ld-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); }
.ld-nav .brand { padding: 0; }
.ld-nav .brand img { width: 48px; filter: drop-shadow(0 4px 8px rgba(42, 13, 19, 0.25)); }
.ld-nav__end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ld-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: clamp(18px, 5vh, 56px) 16px clamp(48px, 9vh, 96px); }
.ld-crest { width: clamp(118px, 17vw, 168px); height: auto; filter: drop-shadow(0 22px 34px rgba(42, 13, 19, 0.32)); animation: float 7s var(--ease-in-out) infinite; transform-style: preserve-3d; will-change: transform; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ld-eyebrow { font: 600 0.72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); min-height: 1em; }
.ld-title { font: 800 clamp(2.6rem, 8vw, 5.4rem)/0.98 var(--font-display); font-stretch: 108%; letter-spacing: -0.035em; max-width: 14ch; }
.ld-title em { font: 400 1em/1 var(--font-varsity); font-style: normal; letter-spacing: -0.01em; color: var(--wine); }
:root[data-theme='dark'] .ld-title em { color: var(--gold-bright); }
.ld-sub { max-width: 46ch; color: var(--text-2); font-size: clamp(1rem, 1.6vw, 1.12rem); }
.ld-form { width: min(560px, 100%); border-radius: 26px; padding: 10px; display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 8px; }
.ld-form__row { display: flex; gap: 8px; align-items: center; }
.ld-form__row .input { flex: 1; min-width: 0; font-size: 1.02rem; padding: 15px 16px; border-radius: 18px; background: transparent; box-shadow: none; }
.ld-form__row .input:focus { outline: none; }
.ld-form:focus-within { box-shadow: var(--glass-inset), var(--glass-shadow-lift), 0 0 0 3px rgba(var(--gold-rgb), 0.28); }
.ld-form .btn { padding: 14px 22px; border-radius: 18px; flex: none; }
.ld-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; color: var(--muted); padding: 2px 10px 6px; cursor: pointer; }
.ld-consent .check { width: 18px; height: 18px; margin-top: 1px; }
.ld-step { display: flex; flex-direction: column; gap: 10px; padding: 6px 8px 8px; }
.ld-step h2 { font: 700 1.1rem/1.2 var(--font-display); }
.ld-step p { color: var(--text-2); font-size: 0.9rem; }
.ld-step .fields-2 { gap: 10px; }
.ld-later { background: none; border: 0; color: var(--muted); font-size: 0.85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 6px; align-self: center; }
.ld-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 0.84rem; color: var(--text-2); margin-top: 4px; }
.ld-status .pulse { --tone: var(--ok); }
.ld-status .pulse.is-soon { --tone: var(--gold); }
.ld-section { padding: clamp(56px, 10vh, 110px) 16px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.ld-section--band { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.ld-statement { font: 800 clamp(2rem, 5.4vw, 3.8rem)/1.05 var(--font-display); font-stretch: 106%; letter-spacing: -0.03em; max-width: 17ch; }
.ld-statement .w { color: color-mix(in srgb, var(--text) 18%, transparent); transition: color 260ms var(--ease-out); }
.ld-statement .w.on { color: var(--text); }
.ld-statement .w.accent.on { color: var(--wine); }
:root[data-theme='dark'] .ld-statement .w.accent.on { color: var(--gold-bright); }
.ld-preview { width: min(980px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; text-align: left; }
.ld-foot { padding: 32px 16px calc(36px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 0.8rem; color: var(--muted); }
.ld-foot .suite { display: flex; align-items: center; gap: 10px; }
.ld-foot button { background: none; border: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; padding: 0; }
.legal { color: var(--text-2); font-size: 0.9rem; display: flex; flex-direction: column; gap: 10px; }

/* L'apparition au défilement : posée seulement si le script tourne (sinon tout reste visible). */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; }
.caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--text); vertical-align: -0.15em; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 600px) {
  .ld-form__row { flex-direction: column; align-items: stretch; }
  .ld-form .btn { width: 100%; }
  .soon-banner { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .soon-banner img { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after, .ld-crest, .btn::after, .pulse::before, .caret { animation: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ───── Le texte d'une ressource (md() dans app.js) ───── */
.res-content.md { white-space: normal; display: flex; flex-direction: column; gap: 10px; }
.md h3 { font: 700 1rem/1.25 var(--font-display); margin-top: 6px; }
.md p { margin: 0; }
.md ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 5px; }
.md ul.md-check { list-style: none; padding-left: 0; }
.md ul.md-check li { display: flex; gap: 9px; }
.md ul.md-check li::before { content: ''; flex: none; width: 15px; height: 15px; margin-top: 3px; border-radius: 4px; border: 1.5px solid var(--gold-line); background: var(--glass-field); }
.md code { font: 500 0.82em/1.4 ui-monospace, 'SF Mono', Menlo, monospace; background: var(--wine-soft); padding: 1px 5px; border-radius: 5px; }
.md-code { position: relative; }
.md pre { margin: 0; padding: 42px 16px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--wine-deep, #2a0d13) 92%, black); color: #f3e8d2; overflow-x: auto; }
.md pre code { background: none; padding: 0; color: inherit; font-size: 0.8rem; white-space: pre; }
.md-copy { position: absolute; top: 8px; right: 8px; padding: 5px 10px; font-size: 0.72rem; background: rgba(255, 255, 255, 0.14); color: #f3e8d2; box-shadow: none; }
.md-copy:hover { background: rgba(255, 255, 255, 0.24); }
.tag--new { background: var(--ok-soft); color: var(--ok); }
.tag--journal { background: var(--info-soft); color: var(--info); }

/* ───── Réglages ───── */
.settings__title { display: flex; align-items: center; gap: 10px; }
.settings__title .gicon { width: 32px; height: 32px; }
.setting { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.setting__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.setting__head span { font-size: var(--fs-xs); }
.setting > p { font-size: 0.86rem; }
.prefs { display: flex; flex-direction: column; gap: 8px; }
.pref { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; cursor: pointer; }
.steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: var(--text-2); }
.nav__link--team { margin-bottom: 2px; }

/* ───── Espace Équipe ───── */
.team-stats { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.team-stats .stat { border-radius: var(--r-lg); padding: 14px 18px; min-width: 150px; flex: 1; background: none; }
.team-list { display: flex; flex-direction: column; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.team-row__main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.team-row__main small { color: var(--muted); font-size: var(--fs-xs); }
.team-row__acts { display: flex; gap: 6px; }
.team-row__acts .btn { padding: 8px 14px; }
.pill { font: 600 0.62rem/1 var(--font-accent); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-pill); background: var(--wine-soft); color: var(--muted); flex: none; }
.pill--on { background: var(--ok-soft); color: var(--ok); }

/* ───── Fluidité : l'entrée des pages, les cartes qui montent, le toucher ───── */
.view-in > * { animation: view-in 340ms var(--ease-out) both; }
.view-in > *:nth-child(2) { animation-delay: 40ms; }
.view-in > *:nth-child(3) { animation-delay: 80ms; }
.view-in > *:nth-child(n+4) { animation-delay: 120ms; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
.sheet-bg:not([hidden]) { animation: fade-in 220ms var(--ease-out) both; }
.sheet-bg:not([hidden]) .sheet { animation: sheet-up 420ms var(--ease-spring) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
.tab, .nav__link, .chip, .control, .btn, .mod-tile, .channel { -webkit-user-select: none; user-select: none; }
.tab:active, .chip:active, .control:active, .mod-tile:active, .channel:active { transform: scale(0.96); transition: transform 80ms; }
.tab .gicon { transition: transform var(--t-med) var(--ease-spring); }
.tab[aria-current='page'] .gicon { transform: translateY(-2px) scale(1.1); }
@media (max-width: 900px) {
  .sheet-bg { align-items: end; padding: 0 0 env(safe-area-inset-bottom, 0px); }
  .sheet { width: 100%; border-radius: 30px 30px 0 0; max-height: 88dvh; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .sheet::after { border-radius: 30px 30px 0 0; }
}

/* ───── Les catégories : une bande qui défile sur téléphone, le nombre de ressources ───── */
.chip__n { margin-left: 6px; font-size: 0.72em; font-weight: 700; opacity: 0.65; }
@media (max-width: 700px) {
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 6px; scroll-padding: 0 16px; }
  .chips--scroll::-webkit-scrollbar { display: none; }
  .chips--scroll .chip { flex: none; }
}
.empty .gicon { width: 64px; height: 64px; }

/* ───── Les prompts : les titres de partie en or, les champs à remplir en valeur ───── */
.md pre .sec { color: #e2c27a; font-weight: 700; }
.md pre .ph { color: #ffd98a; background: rgba(226, 194, 122, 0.16); border-radius: 4px; padding: 0 2px; }
.md .ph { color: var(--gold-bright); background: var(--gold-soft); border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* ───── La carte d'un module ───── */
.mod-tile { width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; grid-template-columns: 56px minmax(0, 1fr) auto; }
.mod-tile__more { font-size: 1.5rem; color: var(--muted); padding-right: 4px; }
.mod-sheet { display: flex; flex-direction: column; gap: 12px; }
.mod-sheet .sheet__top { align-items: flex-start; justify-content: space-between; }
.mod-sheet__icon { width: 92px; height: 92px; filter: drop-shadow(0 12px 18px rgba(42, 13, 19, 0.3)); }
.mod-sheet h2 { font: 800 1.8rem/1.05 var(--font-display); font-stretch: 110%; letter-spacing: -0.02em; }
.mod-sheet__sum { font-size: 1.02rem; color: var(--text-2); }
.mod-sheet__parts { border-radius: var(--r-md); padding: 14px 16px; background: var(--glass-control); box-shadow: var(--glass-inset); display: flex; flex-direction: column; gap: 8px; }
.mod-sheet__parts ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.noted { padding: 12px 14px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--text); font-size: 0.92rem; }
.team-interests { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
.team-interests div { display: flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .view-in > *, .sheet-bg:not([hidden]), .sheet-bg:not([hidden]) .sheet { animation: none; } }
.channel .hash { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
/* Les prompts se lisent sur téléphone : les lignes reviennent à la ligne dans le cadre, sans défilement de côté. */
.md pre { overflow-x: hidden; }
.md pre code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ═════ Ressources gratuites, troisième version (Théo, 03/10) ═════ */
.obj { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(42, 13, 19, 0.26)); }
:root[data-theme='dark'] .obj { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55)); }
.back { align-self: flex-start; text-decoration: none; font-weight: 700; font-size: 0.9rem; color: var(--gold-bright); padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: var(--glass-control); box-shadow: var(--glass-inset); }

/* Les dix cartes carrées : du verre teinté de la couleur de la catégorie. */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat-card {
  aspect-ratio: 1 / 1; border-radius: 28px; padding: 14px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--cat) 34%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--cat) 16%, transparent), color-mix(in srgb, var(--cat) 6%, transparent)),
    var(--glass-top), var(--glass-bg);
  box-shadow: var(--glass-inset), var(--glass-shadow), inset 0 0 0 1px color-mix(in srgb, var(--cat) 30%, transparent);
}
.cat-card__icon { width: 46%; aspect-ratio: 1; transition: transform var(--t-med) var(--ease-spring); }
.cat-card:hover .cat-card__icon, .cat-card:active .cat-card__icon { transform: translateY(-3px) scale(1.06) rotate(-3deg); }
.cat-card__label { font: 800 1.02rem/1.15 var(--font-display); font-stretch: 105%; text-wrap: balance; }
.cat-card__n { font-size: 0.74rem; font-weight: 700; color: color-mix(in srgb, var(--cat) 70%, var(--text)); padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--cat) 14%, transparent); }

/* L'en-tête d'une catégorie ou d'une école. */
.cat-head { display: flex; align-items: center; gap: 16px; }
.cat-head__icon { width: 84px; height: 84px; flex: none; }
.cat-head h1 { font: 800 clamp(2rem, 6vw, 3rem)/1 var(--font-display); font-stretch: 110%; letter-spacing: -0.02em; color: var(--text); }
.cat-head .eyebrow { color: color-mix(in srgb, var(--cat) 75%, var(--text)); }

/* Les ressources : des cartes horizontales façon booster (bords crantés, reflet holographique). */
.boosters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.booster {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; gap: 10px;
  width: 100%; min-height: 150px; padding: 20px 14px 20px 20px; border: 0; cursor: pointer; text-align: left; color: #fff;
  border-radius: 18px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--cat) 82%, white), var(--cat) 45%, color-mix(in srgb, var(--cat) 62%, black));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--cat) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  -webkit-mask: radial-gradient(4.5px at 50% 0, #0000 96%, #000) 50% 0 / 11px 51% repeat-x, radial-gradient(4.5px at 50% 100%, #0000 96%, #000) 50% 100% / 11px 51% repeat-x;
  mask: radial-gradient(4.5px at 50% 0, #0000 96%, #000) 50% 0 / 11px 51% repeat-x, radial-gradient(4.5px at 50% 100%, #0000 96%, #000) 50% 100% / 11px 51% repeat-x;
  transition: transform var(--t-med) var(--ease-out);
}
.booster:hover { transform: translateY(-3px) rotate(-0.4deg); }
.booster:active { transform: scale(0.98); }
.booster::before { content: ''; position: absolute; inset: 9px 0; border-top: 1.5px dashed rgba(255, 255, 255, 0.35); border-bottom: 1.5px dashed rgba(255, 255, 255, 0.35); pointer-events: none; }
.booster__foil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.7) 38%, rgba(255, 210, 250, 0.5) 44%, rgba(170, 230, 255, 0.5) 50%, transparent 62%) 0 0 / 300% 100%;
  animation: foil 6s var(--ease-in-out) infinite;
}
@keyframes foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.booster__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.booster__tag { align-self: flex-start; font: 600 0.62rem/1 var(--font-accent); letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.booster__title { font: 800 1.12rem/1.18 var(--font-display); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); text-wrap: balance; }
.booster__desc { font-size: 0.84rem; line-height: 1.4; color: rgba(255, 255, 255, 0.9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.booster__ai { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); }
.booster__ai svg { width: 12px; height: 12px; }
.booster__icon { width: 92px; height: 92px; transform: rotate(8deg); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.3)); }
.booster__icon .obj { filter: none; }

/* La ressource ouverte. */
.res-sheet { display: flex; flex-direction: column; gap: 12px; }
.res-sheet .sheet__top { justify-content: space-between; align-items: flex-start; }
.res-sheet__icon { width: 72px; height: 72px; }
.res-sheet h2 { font: 800 1.5rem/1.12 var(--font-display); font-stretch: 108%; letter-spacing: -0.01em; }
.res-sheet .booster__tag { background: color-mix(in srgb, var(--cat) 16%, transparent); color: color-mix(in srgb, var(--cat) 80%, var(--text)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 30%, transparent); }
.any-ai { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 700; color: var(--text-2); padding: 9px 12px; border-radius: var(--r-md); background: var(--glass-control); box-shadow: var(--glass-inset); }
.any-ai svg { width: 22px; height: 22px; flex: none; }
.empty__icon { width: 72px; height: 72px; }
.learned svg { width: 44px; height: 44px; }

/* ═════ Notre accompagnement : les écoles ═════ */
.schools { display: flex; flex-direction: column; gap: 16px; }
.school {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 18px 18px 14px;
  border-radius: 26px; text-decoration: none; color: var(--text);
  background:
    radial-gradient(70% 120% at 0% 50%, color-mix(in srgb, var(--cat) 30%, transparent), transparent 70%),
    var(--glass-top), var(--glass-bg);
  box-shadow: var(--glass-inset), var(--glass-shadow), inset 0 0 0 1px color-mix(in srgb, var(--cat) 28%, transparent);
}
.school__icon { width: 88px; height: 88px; }
.school__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.school__name { font: 400 1.35rem/1.05 var(--font-varsity); letter-spacing: 0.01em; color: color-mix(in srgb, var(--cat) 78%, var(--text)); }
.school__tag { font-weight: 700; font-size: 0.92rem; }
.school__mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.school__mods span { font-size: 0.74rem; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--cat) 13%, transparent); color: var(--text-2); }
.school__more { font-size: 1.8rem; color: var(--muted); }
.school-title { font-family: var(--font-varsity) !important; font-weight: 400 !important; }
.school-sum { font-size: 1.02rem; color: var(--text-2); max-width: 60ch; }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.module { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 24px; align-items: start;
  box-shadow: var(--glass-inset), var(--glass-shadow), inset 0 0 0 1px color-mix(in srgb, var(--cat) 22%, transparent); }
.module__icon { width: 72px; height: 72px; }
.module__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.module h2 { font: 800 1.2rem/1.15 var(--font-display); }
.module p { color: var(--text-2); font-size: 0.92rem; }
.module ol { margin: 4px 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.open-soon { border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--cat) 26%, transparent), transparent 70%), var(--glass-top), var(--glass-bg); }
.open-soon h2 { font: 800 1.4rem/1.1 var(--font-display); }
.open-soon .ld-form { width: 100%; margin: 0; }
@media (max-width: 600px) {
  .school { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .school__icon { width: 64px; height: 64px; }
  .booster { grid-template-columns: minmax(0, 1fr) 76px; min-height: 140px; }
  .booster__icon { width: 76px; height: 76px; }
  .cat-head__icon { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .booster__foil { animation: none; } }

/* La landing : les dix catégories de ressources gratuites, comme dans l'app. */
.ld-h2 { font: 800 clamp(1.7rem, 4.4vw, 2.6rem)/1.05 var(--font-display); font-stretch: 106%; letter-spacing: -0.02em; max-width: 18ch; }
.ld-cats { width: min(1040px, 100%); text-align: center; }
.ld-note { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; }
.ld-note svg { width: 22px; height: 22px; }
/* La barre de la landing reste en haut : un fond de verre pour que le contenu passe dessous proprement. */
.ld-nav {
  margin: calc(8px + env(safe-area-inset-top, 0px)) 12px 0; top: calc(8px + env(safe-area-inset-top, 0px));
  padding: 8px 10px 8px 14px; border-radius: var(--r-pill);
  background: var(--glass-top), var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--glass-inset), var(--glass-shadow-sm);
}

/* ═════ Communauté, troisième version ═════ */
.ch-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ch-card { border-radius: 22px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text-2); text-align: center;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--cat) 22%, transparent), transparent 70%), var(--glass-top), var(--glass-bg); }
.ch-card__icon { width: 46px; height: 46px; display: grid; place-items: center; transition: transform var(--t-med) var(--ease-spring); }
.ch-card__icon svg, .ch-card__icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(42, 13, 19, 0.25)); }
.ch-card__name { font-weight: 700; font-size: 0.82rem; line-height: 1.15; }
.ch-card[aria-current='page'] { color: var(--text); background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--cat) 40%, transparent), transparent 75%), var(--glass-top), var(--glass-bg-strong);
  box-shadow: var(--glass-inset), var(--glass-shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--cat) 55%, transparent); }
.ch-card[aria-current='page'] .ch-card__icon { transform: translateY(-2px) scale(1.1); }
@media (max-width: 700px) {
  .ch-row { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px; }
  .ch-row::-webkit-scrollbar { display: none; }
  .ch-card { flex: none; width: 96px; }
}
.ch-title { display: flex; align-items: center; gap: 12px; }
.ch-title__icon { width: 52px; height: 52px; display: grid; place-items: center; }
.ch-title__icon svg, .ch-title__icon img { width: 100%; height: 100%; object-fit: contain; }
.ch-title h2 { font: 800 1.5rem/1.1 var(--font-display); color: color-mix(in srgb, var(--cat) 70%, var(--text)); }
.ch-title p { color: var(--text-2); font-size: 0.92rem; }
.comm { grid-template-columns: minmax(0, 1fr) 300px; }
.composer { gap: 12px; padding: 16px; box-shadow: var(--glass-inset), var(--glass-shadow), inset 0 0 0 1px color-mix(in srgb, var(--cat) 25%, transparent); }
.composer__top { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.composer textarea { min-height: 140px; font-size: 1rem; line-height: 1.5; }
.composer__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.composer__bar .control svg { width: 22px; height: 22px; }
.c-thumb { position: relative; display: inline-block; margin-left: 52px; }
.c-thumb img { max-height: 180px; border-radius: var(--r-md); box-shadow: var(--glass-shadow-sm); display: block; }
.c-thumb .x { position: absolute; top: 6px; right: 6px; }
.post__ch { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px 4px 5px; border-radius: var(--r-pill);
  color: color-mix(in srgb, var(--cat) 75%, var(--text)); background: color-mix(in srgb, var(--cat) 13%, transparent); }
.post__ch svg, .post__ch img { width: 20px; height: 20px; object-fit: contain; }
.post__img { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--r-md); overflow: hidden; align-self: flex-start; max-width: 100%; }
.post__img img { display: block; max-height: 340px; max-width: 100%; border-radius: var(--r-md); }
.zoomed { width: 100%; border-radius: var(--r-md); }
.edit-form { display: flex; flex-direction: column; gap: 8px; }
.served { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); font-size: 0.84rem; font-weight: 700;
  background: var(--glass-control); color: var(--text-2); box-shadow: var(--glass-inset); transition: background var(--t-fast), color var(--t-fast); }
.served[aria-pressed='true'] { background: linear-gradient(180deg, #3fd07f, #1d9a58); color: #fff; box-shadow: 0 6px 16px rgba(29, 154, 88, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.served b { font-weight: 800; }
.served.pop { animation: pop 420ms var(--ease-spring); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.linklike { border: 0; background: none; padding: 0; color: var(--gold-bright); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 900px) { .comm { grid-template-columns: minmax(0, 1fr); } }

/* ═════ La carte étudiante (Théo, 03/10) : holographique, elle suit la souris ou l'inclinaison du téléphone ═════ */
.scard-wrap { perspective: 900px; }
.scard {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1.586 / 1; width: 100%; max-width: 440px; margin: 0 auto;
  border-radius: 22px; padding: 18px 20px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(140deg, color-mix(in srgb, var(--card) 78%, white), var(--card) 45%, color-mix(in srgb, var(--card) 55%, black));
  box-shadow: 0 24px 50px color-mix(in srgb, var(--card) 40%, transparent), 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 120ms linear;
}
.scard__holo { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0.45;
  background: conic-gradient(from 210deg at var(--mx) var(--my), #ff7ad9, #ffd36e, #7affc1, #6ec8ff, #b98bff, #ff7ad9); filter: blur(18px) saturate(1.3); }
.scard__shine { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 60% at var(--mx) var(--my), rgba(255, 255, 255, 0.45), transparent 60%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); mix-blend-mode: overlay; }
.scard::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 9px); }
.scard__top { display: flex; align-items: center; gap: 10px; }
.scard__top img { width: 34px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) brightness(1.15); }
.scard__top b { display: block; font: 400 0.95rem/1 var(--font-varsity); letter-spacing: 0.02em; }
.scard__top small { display: block; font: 600 0.58rem/1.4 var(--font-accent); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.scard__no { margin-left: auto; font: 800 1rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.08em; padding: 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.scard__mid { display: flex; align-items: center; gap: 14px; }
.scard__mid .ava { --size: 64px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 8px 18px rgba(0, 0, 0, 0.3); }
.scard__name { display: block; font: 800 1.3rem/1.1 var(--font-display); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.scard__rank { display: block; font: 400 1.05rem/1.2 var(--font-varsity); color: #ffe7a8; letter-spacing: 0.02em; margin-top: 2px; }
.scard__detail { display: block; font-size: 0.74rem; font-weight: 600; opacity: 0.9; }
.scard__bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.scard__bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.scard__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe7a8, #fff); box-shadow: 0 0 10px rgba(255, 231, 168, 0.8); }
.scard__foot { display: flex; justify-content: space-between; font: 600 0.56rem/1 var(--font-accent); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.scard--founder { --card: #a8853f; }
.scard--founder .scard__holo { opacity: 0.7; }
.scard--founder .scard__rank { color: #fff6dc; text-shadow: 0 0 12px rgba(255, 220, 140, 0.9); }
.card-colors { border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(140deg, color-mix(in srgb, var(--sw) 70%, white), var(--sw)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 8px rgba(0, 0, 0, 0.2); }
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--sw); }
.toggle { position: relative; width: 50px; height: 30px; flex: none; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; border-radius: 30px; background: var(--surface-3); transition: background var(--t-fast); }
.toggle span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); transition: transform var(--t-med) var(--ease-spring); }
.toggle input:checked + span { background: var(--ok); }
.toggle input:checked + span::after { transform: translateX(20px); }
.toggle input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.profile { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
@media (max-width: 900px) { .profile { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .scard { transform: none; } }
/* Le reflet reste discret : il brille surtout quand la carte bouge (Théo : « un peu brillante sur le côté »). */
.scard__holo { opacity: 0.22; filter: blur(26px) saturate(1.1); background: conic-gradient(from 210deg at var(--mx) var(--my), rgba(255, 122, 217, 0.9), rgba(255, 211, 110, 0.9), rgba(122, 255, 193, 0.9), rgba(110, 200, 255, 0.9), rgba(185, 139, 255, 0.9), rgba(255, 122, 217, 0.9)); }
.scard--founder .scard__holo { opacity: 0.26; }
.scard__shine { background: radial-gradient(45% 55% at var(--mx) var(--my), rgba(255, 255, 255, 0.5), transparent 65%), linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%); }

/* ═════ La carte étudiante, quatrième version : de vraies matières (Théo, 03/10) ═════
   La matière vit dans .scard__mat ; les reflets suivent --mx / --my, posés image par image par tiltLoop (app.js).
   Chaque finition donne aussi ses encres : --ink (texte), --ink-2 (texte secondaire), --accent (le rang). */
.scard { background: none; color: var(--ink); transition: none; will-change: transform; --ink: #fff; --ink-2: rgba(255, 255, 255, 0.72); --accent: #ffe7a8;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.scard__mat { position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; }
.scard::after { display: none; }
.scard__detail, .scard__foot, .scard__top small { color: var(--ink-2); opacity: 1; }
.scard__rank { color: var(--accent); }
.scard__no { background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.scard__bar { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.scard__bar i { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, white)); }
.scard__holo { opacity: 0.16; }
/* Le vernis : une bande de lumière qui traverse la carte selon l'inclinaison. */
.scard__shine { mix-blend-mode: soft-light;
  background:
    linear-gradient(115deg, transparent calc(var(--mx) - 28%), rgba(255, 255, 255, 0.55) var(--mx), transparent calc(var(--mx) + 28%)),
    radial-gradient(50% 60% at var(--mx) var(--my), rgba(255, 255, 255, 0.35), transparent 65%); }

/* Les finitions. Les métaux : un brossage fin + une bande de reflet qui glisse avec --mx. */
[data-finish] { --mx: 50%; --my: 50%; }
[data-finish='carbone'] .scard__mat, [data-finish='carbone'] .swatch__mat {
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 7px),
    conic-gradient(from 45deg, #262626 0 25%, #101010 0 50%, #1f1f1f 0 75%, #080808 0) 0 0 / 10px 10px,
    #111; }
[data-finish='carbone'] { --accent: #e2c27a; }
[data-finish='adamantium'] .scard__mat, [data-finish='adamantium'] .swatch__mat {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px, transparent 2px 4px),
    linear-gradient(100deg, #6c7889 0%, #c9d3df calc(var(--mx) - 22%), #f8fbff var(--mx), #aab6c5 calc(var(--mx) + 22%), #5d6878 100%); }
[data-finish='adamantium'] { --ink: #111a26; --ink-2: rgba(17, 26, 38, 0.66); --accent: #2f4f7a; }
[data-finish='titane'] .scard__mat, [data-finish='titane'] .swatch__mat {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, #24282f 0%, #4f5761 calc(var(--mx) - 18%), #8d96a3 var(--mx), #434a54 calc(var(--mx) + 18%), #1c1f24 100%); }
[data-finish='titane'] { --accent: #cfe0f5; }
[data-finish='or'] .scard__mat, [data-finish='or'] .swatch__mat {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, #7a5a22 0%, #d4ad5f calc(var(--mx) - 20%), #fff3cc var(--mx), #c9a45c calc(var(--mx) + 20%), #6d5020 100%); }
[data-finish='or'] { --ink: #2a1806; --ink-2: rgba(42, 24, 6, 0.68); --accent: #651d2b; }
[data-finish='obsidienne'] .scard__mat, [data-finish='obsidienne'] .swatch__mat {
  background:
    radial-gradient(90% 80% at var(--mx) var(--my), rgba(140, 100, 255, 0.32), transparent 55%),
    radial-gradient(80% 70% at calc(100% - var(--mx)) 100%, rgba(0, 210, 190, 0.22), transparent 55%),
    linear-gradient(150deg, #1d1b26, #050507); }
[data-finish='obsidienne'] { --accent: #cdb8ff; }
[data-finish='bordeaux'] .scard__mat, [data-finish='bordeaux'] .swatch__mat { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 50%), linear-gradient(150deg, #a33a50, #651d2b 45%, #2a0d13); }
[data-finish='marine'] .scard__mat, [data-finish='marine'] .swatch__mat { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 50%), linear-gradient(150deg, #33599e, #15295a 50%, #08122b); }
[data-finish='emeraude'] .scard__mat, [data-finish='emeraude'] .swatch__mat { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 50%), linear-gradient(150deg, #25a06f, #0f5239 50%, #052419); }
/* Les laqués portent un filet d'or, comme un diplôme. */
[data-finish='bordeaux'], [data-finish='marine'], [data-finish='emeraude'] { --accent: #f3d78f; }
.scard[data-finish='bordeaux'], .scard[data-finish='marine'], .scard[data-finish='emeraude'] {
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px rgba(226, 194, 122, 0.75), inset 0 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 0 6px rgba(226, 194, 122, 0.35); }
/* Les encres gravées sur les métaux clairs. */
.scard[data-finish='adamantium'] .scard__name, .scard[data-finish='or'] .scard__name { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.scard[data-finish='adamantium'] .scard__top img, .scard[data-finish='or'] .scard__top img { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)); }
/* Le fondateur : un liseré qui brille tout autour. */
.scard--founder { box-shadow: 0 26px 54px rgba(120, 90, 30, 0.35), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px rgba(255, 236, 180, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.scard--founder .scard__rank { color: var(--accent); text-shadow: none; }

/* Le choix de la finition : un petit échantillon de la matière, avec son nom. */
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatch { width: auto; height: auto; border-radius: 14px; background: none; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 5px; align-items: center; color: var(--text-2); font-size: 0.7rem; font-weight: 700; }
.swatch__mat { width: 100%; aspect-ratio: 1.586 / 1; border-radius: 9px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.swatch[aria-pressed='true'] { color: var(--text); }
.swatch[aria-pressed='true'] .swatch__mat { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold), 0 4px 10px rgba(0, 0, 0, 0.22); }
/* Plus d'arc-en-ciel : sur le carbone et les laqués il faisait bon marché. Les reflets viennent du vernis et des métaux. */
.scard__holo { display: none; }
[data-finish='carbone'] .scard__mat, [data-finish='carbone'] .swatch__mat {
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.1), transparent 50%),
    linear-gradient(115deg, transparent calc(var(--mx) - 30%), rgba(255, 255, 255, 0.07) var(--mx), transparent calc(var(--mx) + 30%)),
    conic-gradient(from 45deg, #1f1f21 0 25%, #121213 0 50%, #1a1a1c 0 75%, #0c0c0d 0) 0 0 / 7px 7px,
    #111; }
/* Les finitions verrouillées pour les étudiants, et les modules qui se touchent. */
.swatch--locked .swatch__mat { position: relative; filter: saturate(0.6) brightness(0.8); }
.swatch__lock { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.swatch__lock svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.swatch--locked .swatch__label { color: var(--muted); }
.module { width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; transition: transform var(--t-med) var(--ease-out); }
.module:active { transform: scale(0.98); }
.soon-sheet h2 { font: 800 1.6rem/1.1 var(--font-display); }
.soon-sheet .res-sheet__icon { width: 96px; height: 96px; }
/* Les fenêtres qui montent du bas : un verre presque opaque, pour que la page derrière ne brouille pas le texte. */
.sheet.glass { background: var(--glass-top), color-mix(in srgb, var(--surface) 93%, transparent); }
:root[data-theme='dark'] .sheet.glass { background: var(--glass-top), color-mix(in srgb, var(--surface) 95%, transparent); }
.sheet-bg { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.res-sheet__icon .gicon, .res-sheet__icon .obj { width: 100%; height: 100%; }
/* « Gratuits. » sur l'accueil : en grand et en gras (Théo, 03/10). */
.ld-free { font: 800 clamp(2rem, 6vw, 3.2rem)/1 var(--font-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--wine); margin-top: -4px; }
:root[data-theme='dark'] .ld-free { color: var(--gold-bright); }