/* Madrassah.re — habillage commun : palette de l'application, mouvement Material, zoom des captures.
   Chargé après les styles propres à chaque page, il harmonise les jetons de couleur sans les réécrire. */

:root {
  --paper:#FAF7F0; --surface:#FFFFFF; --sunk:#F1EDE4;
  --ink:#16221D; --ink-soft:#4B5A54; --ink-faint:#86948E;
  --rule:#E4DDD0; --rule-strong:#CFC5B4;

  --green:#0F6B43; --gold:#C08A2E;

  /* jetons d'accent des pages existantes, réalignés sur l'identité */
  --verdigris:#0F6B43; --verdigris-wash:#E4F0EA;
  --lapis:#1C5E7A;     --lapis-wash:#E3EFF3;
  --ochre:#C08A2E;     --ochre-wash:#F7EEDC;
  --rust:#A8452F;      --rust-wash:#F8E9E4;
  --parent:#0F6B43;    --prof:#1C5E7A;

  --c1:#0F6B43; --c2:#1C5E7A; --c3:#C08A2E; --c4:#7A3B57;
  --c5:#A8452F; --c6:#3F5D8A; --c7:#4A6B2F;

  /* mouvement : courbes et durées Material 3 */
  --ease-emph:cubic-bezier(.2,0,0,1);
  --ease-std:cubic-bezier(.2,0,0,1);
  --d-short:180ms; --d-med:280ms; --d-long:420ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0F1714; --surface:#17211D; --sunk:#131B18;
    --ink:#E8EFEA; --ink-soft:#A7B7AF; --ink-faint:#7A8B83;
    --rule:#26332D; --rule-strong:#36463E;
    --green:#5FC08F; --gold:#DCA84F;
    --verdigris:#5FC08F; --verdigris-wash:#123326;
    --lapis:#79B6CE;     --lapis-wash:#102C36;
    --ochre:#DCA84F;     --ochre-wash:#2E2411;
    --rust:#E08A72;      --rust-wash:#33201A;
    --parent:#5FC08F;    --prof:#79B6CE;
    --c1:#5FC08F; --c2:#79B6CE; --c3:#DCA84F; --c4:#D08CAC;
    --c5:#E08A72; --c6:#8FAEDD; --c7:#A6C87A;
  }
}
:root[data-theme="dark"] {
  --paper:#0F1714; --surface:#17211D; --sunk:#131B18;
  --ink:#E8EFEA; --ink-soft:#A7B7AF; --ink-faint:#7A8B83;
  --rule:#26332D; --rule-strong:#36463E;
  --green:#5FC08F; --gold:#DCA84F;
  --verdigris:#5FC08F; --verdigris-wash:#123326;
  --lapis:#79B6CE;     --lapis-wash:#102C36;
  --ochre:#DCA84F;     --ochre-wash:#2E2411;
  --rust:#E08A72;      --rust-wash:#33201A;
  --parent:#5FC08F;    --prof:#79B6CE;
  --c1:#5FC08F; --c2:#79B6CE; --c3:#DCA84F; --c4:#D08CAC;
  --c5:#E08A72; --c6:#8FAEDD; --c7:#A6C87A;
}
:root[data-theme="light"] {
  --paper:#FAF7F0; --surface:#FFFFFF; --sunk:#F1EDE4;
  --ink:#16221D; --ink-soft:#4B5A54; --ink-faint:#86948E;
  --rule:#E4DDD0; --rule-strong:#CFC5B4;
  --green:#0F6B43; --gold:#C08A2E;
  --verdigris:#0F6B43; --verdigris-wash:#E4F0EA;
  --lapis:#1C5E7A;     --lapis-wash:#E3EFF3;
  --ochre:#C08A2E;     --ochre-wash:#F7EEDC;
  --rust:#A8452F;      --rust-wash:#F8E9E4;
  --parent:#0F6B43;    --prof:#1C5E7A;
  --c1:#0F6B43; --c2:#1C5E7A; --c3:#C08A2E; --c4:#7A3B57;
  --c5:#A8452F; --c6:#3F5D8A; --c7:#4A6B2F;
}

/* ---------- formes arrondies, à l'image de l'application ---------- */
.card, .klass, .term, .tip, .warn, .note, .notes, .callout,
.scroller, .stats, .stat, .session-band, .track-head, .shot, .frame, .phone,
ol.steps > li { border-radius:16px !important; }
.chip, .code, .num, .where, .toc a, .eyebrow + *, .subject-code { border-radius:999px; }
.toc a { border-radius:999px !important; padding:0.375rem 0.8125rem; }

/* ---------- mouvement d'entrée ---------- */
[data-reveal] {
  opacity:0; transform:translateY(14px);
  transition:opacity var(--d-long) var(--ease-emph), transform var(--d-long) var(--ease-emph);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-in { opacity:1; transform:none; }

/* ---------- élévation au survol ---------- */
.card, .klass, .term, .phone, .frame, .stat {
  transition:box-shadow var(--d-med) var(--ease-std),
             transform var(--d-med) var(--ease-std),
             border-color var(--d-med) var(--ease-std);
}
.klass:hover, .term:hover, .stat:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.5);
}

/* ---------- ondulation Material ---------- */
.ripple-host { position:relative; overflow:hidden; }
.ripple {
  position:absolute; border-radius:50%; pointer-events:none;
  background:currentColor; opacity:.16; transform:scale(0);
  animation:ripple var(--d-long) var(--ease-emph) forwards;
}
@keyframes ripple { to { transform:scale(2.4); opacity:0; } }

/* ---------- captures cliquables ---------- */
.frame, .phone { cursor:zoom-in; }
.frame:hover, .phone:hover { box-shadow:0 14px 34px -20px rgba(0,0,0,.55); }

.zoom-hint {
  display:inline-flex; align-items:center; gap:0.375rem;
  font-size:0.72rem; color:var(--ink-faint);
}
.zoom-hint svg { width:13px; height:13px; }

/* ---------- visionneuse ---------- */
.lb {
  position:fixed; inset:0; z-index:9999;
  background:rgba(12,18,15,.88);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--d-med) var(--ease-std), visibility var(--d-med);
  overscroll-behavior:contain;
}
.lb.is-open { opacity:1; visibility:visible; }
.lb-stage { width:100%; height:100%; overflow:auto; display:flex; align-items:center; justify-content:center; padding:2.5rem 1rem; }
.lb img {
  max-width:min(1200px,94vw); max-height:88vh; width:auto; height:auto;
  border-radius:12px; background:#fff;
  box-shadow:0 24px 70px -30px rgba(0,0,0,.9);
  transform:scale(.94); opacity:0;
  transition:transform var(--d-long) var(--ease-emph), opacity var(--d-med) var(--ease-std);
  cursor:zoom-in;
}
.lb.is-open img { transform:scale(1); opacity:1; }
.lb img.is-zoomed { max-width:none; max-height:none; width:min(2400px,240vw); cursor:zoom-out; }
.lb-close {
  position:fixed; top:1rem; right:1rem; z-index:2;
  width:44px; height:44px; border-radius:999px;
  border:none; background:rgba(255,255,255,.14); color:#fff;
  font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--d-short) var(--ease-std);
}
.lb-close:hover { background:rgba(255,255,255,.26); }
.lb-caption {
  position:fixed; left:50%; bottom:1rem; transform:translateX(-50%);
  color:rgba(255,255,255,.82); font-size:0.8125rem; text-align:center;
  padding:0.375rem 0.875rem; border-radius:999px; background:rgba(0,0,0,.35);
  max-width:88vw;
}

/* ---------- bandeau de marque des pages internes ---------- */
.brandbar {
  display:inline-flex; align-items:center; gap:0.5625rem;
  text-decoration:none; align-self:flex-start;
  padding:0.375rem 0.875rem 0.375rem 0.375rem;
  border:1px solid var(--rule); border-radius:999px; background:var(--surface);
  transition:border-color var(--d-short) var(--ease-std), box-shadow var(--d-short) var(--ease-std);
}
.brandbar:hover { border-color:var(--green); box-shadow:0 6px 18px -12px rgba(0,0,0,.5); }
.brandbar .mark {
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.brandbar .mark svg { width:17px; height:17px; }
.brandbar b { font-size:0.9375rem; font-weight:700; letter-spacing:-0.02em; color:var(--green); }
.brandbar b i { font-style:normal; color:var(--gold); }
.brandbar .sep { color:var(--ink-faint); font-size:0.78rem; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  .ripple { display:none; }
  .lb, .lb img { transition:none; }
  .klass:hover, .term:hover, .stat:hover, .card:hover { transform:none; }
}