/* ============================================================
   NEXUS VORTEX — LAYOUT
   Container, grille, sections et themes de couleur.
   Chaque section declare ses couleurs ; les composants
   a l'interieur s'y adaptent automatiquement.
   ============================================================ */

/* ---------- Container ---------- */
.nv-container{
  width:100%;
  max-width:var(--nv-container);
  margin-inline:auto;
  padding-inline:var(--nv-gutter);
}
.nv-container--narrow{max-width:960px}

/* ---------- Grille 12 colonnes (8 tablette, 4 mobile) ---------- */
.nv-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--nv-gap);
}

/* ---------- Section ---------- */
.nv-section{
  position:relative;
  padding-block:var(--nv-section);
  background:var(--bg);
  color:var(--fg);
}

/* En-tete de section : label + titre + texte */
.nv-section__head{max-width:var(--nv-measure)}
.nv-section__head .nv-label{margin-bottom:var(--nv-s3)}
.nv-section__head h2{margin-bottom:var(--nv-s3)}

/* Filet de separation discret */
.nv-rule{
  height:1px;
  background:var(--rule);
  border:0;
}

/* ============================================================
   THEMES DE COULEUR
   4 couleurs officielles uniquement.
   --accent-on = couleur des labels et liens : elle doit rester
   lisible, donc brun sur fond clair, ivoire sur fond sombre.
   ============================================================ */

/* Noir — hero, sections fortes, footer */
.t-noir{
  --bg:var(--nv-noir);
  --fg:var(--nv-ivoire);
  --muted:rgba(249,237,207,.66);
  --rule:rgba(249,237,207,.16);
  --accent-on:var(--nv-ivoire);
  --mark:var(--nv-brun);
  --btn-bg:var(--nv-ivoire);
  --btn-fg:var(--nv-noir);
}

/* Ivoire — sections de lecture, respiration */
.t-ivoire{
  --bg:var(--nv-ivoire);
  --fg:var(--nv-noir);
  --muted:rgba(20,20,20,.68);
  --rule:rgba(20,20,20,.14);
  --accent-on:var(--nv-brun);
  --mark:var(--nv-brun);
  --btn-bg:var(--nv-noir);
  --btn-fg:var(--nv-ivoire);
}

/* Vert profond — sections institutionnelles */
.t-vert{
  --bg:var(--nv-vert);
  --fg:var(--nv-ivoire);
  --muted:rgba(249,237,207,.68);
  --rule:rgba(249,237,207,.16);
  --accent-on:var(--nv-ivoire);
  --mark:var(--nv-brun);
  --btn-bg:var(--nv-ivoire);
  --btn-fg:var(--nv-vert);
}

/* Brun — accent ponctuel, une section forte maximum */
.t-brun{
  --bg:var(--nv-brun);
  --fg:var(--nv-ivoire);
  --muted:rgba(249,237,207,.78);
  --rule:rgba(249,237,207,.26);
  --accent-on:var(--nv-ivoire);
  --mark:var(--nv-ivoire);
  --btn-bg:var(--nv-ivoire);
  --btn-fg:var(--nv-brun);
}

/* ---------- Utilitaires d'espacement vertical ---------- */
.nv-mt-2{margin-top:var(--nv-s2)}
.nv-mt-3{margin-top:var(--nv-s3)}
.nv-mt-4{margin-top:var(--nv-s4)}
.nv-mt-5{margin-top:var(--nv-s5)}
.nv-mt-6{margin-top:var(--nv-s6)}
.nv-mt-7{margin-top:var(--nv-s7)}