/* =====================================================================
   Opera Populi : base (reset, typographie, layout)
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-md) / var(--lh-base) var(--font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
p, li, h1, h2, h3, h4, dd, dt, blockquote { overflow-wrap: break-word; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--st-pending-bg); color: var(--st-pending-fg); }

/* ---------- Typographie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-variation-settings: var(--soft);
  line-height: var(--lh-tight);
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
p { text-wrap: pretty; }
em { font-style: italic; }
strong { font-weight: var(--fw-semibold); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Puce alignée sur la première ligne quand le surtitre passe sur deux lignes */
.eyebrow > .tessera { margin-top: calc((1lh - .7em) / 2); }
.lede { font-size: var(--fs-lg); color: var(--text-muted); max-width: 58ch; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -4rem; z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--text); color: var(--text-inverse);
  font-weight: var(--fw-semibold);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--sp-3); }

/* ---------- Vues : body[data-view="loading" | "guest" | "member" | "error"] ---------- */
body:not([data-view="guest"]) .only-guest,
body:not([data-view="member"]) .only-member,
body:not([data-view="loading"]) .only-loading,
body:not([data-view="error"]) .only-error { display: none !important; }
/* Phase de l'œuvre (seuil de démarrage, ui/counters-view.js) : body[data-phase="waiting" | "ready" | "started" | "prestart"]
   (prestart : avant démarrage, nombre d'idées reçues illisible : affichage de waiting, jauge en attente) */
body:not([data-phase="waiting"]):not([data-phase="prestart"]) .only-waiting,
body:not([data-phase="waiting"]):not([data-phase="ready"]):not([data-phase="prestart"]) .only-prestart,
body[data-phase="waiting"] .hide-waiting, body[data-phase="prestart"] .hide-waiting { display: none !important; }
body[data-phase="waiting"] .only-started, body[data-phase="ready"] .only-started, body[data-phase="prestart"] .only-started { display: none !important; }
/* Compte anonyme (ui/anon-view.js) : body[data-anon] */
body:not([data-anon]) .only-anon { display: none !important; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)); }
.section--tight { padding-block: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.section__head { display: grid; gap: var(--sp-3); margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-7)); max-width: 44rem; }
.section__head--row {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sp-4); max-width: none;
}
.stack { display: grid; gap: var(--sp-3); align-content: start; }

/* Accueil invité : présentation + scène d'authentification */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  padding-block: clamp(var(--sp-6), 6vw, var(--sp-8)) clamp(var(--sp-7), 6vw, var(--sp-8));
}
.hero__intro { display: grid; gap: var(--sp-5); align-content: center; }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr); align-items: center; }
}

/* Espace membre : panneau Proposer sur toute la largeur, puis mes idées (une seule colonne, comme les autres panneaux) */
.member-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--sp-6), 4vw, var(--sp-7)); padding-bottom: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.journal + .member-layout { padding-top: clamp(var(--sp-7), 6vw, var(--sp-9)); }

/* Journal : top 10 + colonne éditoriale */
.cycle__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--sp-6), 4vw, var(--sp-7)); }
@media (min-width: 62rem) {
  .cycle__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Mobile : place pour la barre de navigation basse de l'espace membre */
@media (max-width: 59.99rem) {
  body[data-view="member"] { padding-bottom: calc(var(--nav-mobile-h) + env(safe-area-inset-bottom)); }
  /* Focus jamais masqué par la barre basse (complété par ui/nav.js) */
  html:has(body[data-view="member"]) { scroll-padding-bottom: calc(var(--nav-mobile-h) + env(safe-area-inset-bottom) + var(--sp-3)); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}