/* Charte graphique Nevorus — feuille commune à tous les documents publiés.
 *
 * Reprise du site nevorus.com : mêmes couleurs, mêmes polices, mêmes gestes.
 * Un document Nevorus ne redéfinit PAS ses couleurs ; il utilise ces variables.
 * Changer l'identité doit se faire ici, une fois, pas dans quinze fichiers.
 *
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
 *   <link rel="stylesheet" href="charte-nevorus.css">
 *
 * Voir CHARTE.md pour les règles d'emploi et les contre-exemples.
 */

:root {
  /* Fond crème du site, et sa variante pour les surfaces posées dessus. */
  --nv-creme:        #FAF6F0;
  --nv-creme-2:      #F4EBE2;
  --nv-blanc:        #FFFFFF;

  /* Les verts. « encre » pour le texte, « nuit » pour les aplats sombres. */
  --nv-encre:        #102720;
  --nv-nuit:         #0A1C17;
  --nv-vert:         #346757;
  --nv-vert-clair:   #3C7363;
  --nv-gris:         #3A4F47;
  --nv-gris-clair:   #6B7E76;

  /* L'orange, unique couleur d'accent. Il ne sert qu'à désigner. */
  --nv-orange:       #EF8830;
  --nv-orange-pale:  #FBE6D2;

  /* Le texte posé sur un aplat vert nuit — bandeau, en-tête de tableau, carte
   * pleine. Il ne suit PAS l'inversion du thème : en sombre, --nv-creme-2
   * devient un vert foncé, et un titre écrit avec lui disparaissait dans son
   * propre fond. Défaut trouvé à l'usage, pas en relisant. */
  --nv-sur-nuit:     #F4EBE2;

  --nv-regle:        rgba(16, 39, 32, 0.14);
  --nv-ombre:        0 1px 2px rgba(16, 39, 32, 0.06);

  --nv-titre:  Montserrat, "Helvetica Neue", Arial, sans-serif;
  --nv-texte:  Montserrat, "Helvetica Neue", Arial, sans-serif;
  --nv-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light dark;
}

/* Le document se lit aussi en thème sombre : le vert nuit devient le fond,
 * le crème devient le texte. L'orange ne bouge pas — il tient sur les deux. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nv-creme:      #0A1C17;
    --nv-creme-2:    #102720;
    --nv-blanc:      #102720;
    --nv-encre:      #F4EBE2;
    --nv-nuit:       #071410;
    --nv-sur-nuit:   #F4EBE2;
    --nv-vert:       #6FAE99;
    --nv-vert-clair: #5C9B86;
    --nv-gris:       #B7C5BE;
    --nv-gris-clair: #8A9A93;
    --nv-orange-pale:#2E2117;
    --nv-regle:      rgba(244, 235, 226, 0.16);
    --nv-ombre:      none;
  }
}
:root[data-theme="dark"] {
  --nv-creme:      #0A1C17;
  --nv-creme-2:    #102720;
  --nv-blanc:      #102720;
  --nv-encre:      #F4EBE2;
  --nv-nuit:       #071410;
  --nv-vert:       #6FAE99;
  --nv-vert-clair: #5C9B86;
  --nv-gris:       #B7C5BE;
  --nv-gris-clair: #8A9A93;
  --nv-orange-pale:#2E2117;
  --nv-regle:      rgba(244, 235, 226, 0.16);
  --nv-ombre:      none;
}

body {
  background: var(--nv-creme);
  color: var(--nv-encre);
  font-family: var(--nv-texte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

.nv-page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── Bandeau de titre ──────────────────────────────────────────────────────
 * Tout document Nevorus s'ouvre par un aplat vert nuit : le nom de la maison
 * en orange, le titre en Montserrat maigre, une ligne de contexte. */
.nv-bandeau {
  background: var(--nv-nuit);
  color: var(--nv-sur-nuit);
  padding: 2.75rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.nv-bandeau h1 {
  font-family: var(--nv-titre);
  font-weight: 200;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--nv-sur-nuit);
  text-wrap: balance;
  margin: 0;
}
.nv-bandeau .nv-sous-titre {
  color: color-mix(in srgb, var(--nv-sur-nuit) 75%, transparent);
  max-width: 48rem;
  margin: 0;
}

/* La marque, en tête de bandeau. Jamais deux fois dans un même document. */
.nv-marque {
  font-family: var(--nv-titre);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nv-orange);
}

/* ── Titres de section ─────────────────────────────────────────────────────
 * Capitales espacées, soulignées d'un trait orange : c'est la signature
 * visuelle des documents Nevorus, reprise de la charte de gouvernance. */
.nv-section { display: flex; flex-direction: column; gap: 1rem; }
.nv-section > h2 {
  font-family: var(--nv-titre);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nv-encre);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--nv-orange);
  margin: 0;
}
h3 {
  font-family: var(--nv-titre);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

p { margin: 0; }
.nv-chapeau { font-size: 1.08rem; color: var(--nv-gris); max-width: 46rem; }
.nv-note    { color: var(--nv-gris); max-width: 46rem; }
strong, b   { font-weight: 600; }
a { color: var(--nv-vert); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--nv-orange); outline-offset: 2px; }

/* Ce qui mérite d'être désigné l'est en orange, jamais en gras coloré. */
.nv-accent { color: var(--nv-orange); }

/* ── Encadré ───────────────────────────────────────────────────────────────
 * Pour une règle, une définition, un principe : fond neutre, liseré orange. */
.nv-encadre {
  background: var(--nv-creme-2);
  border-left: 3px solid var(--nv-orange);
  padding: 1rem 1.25rem;
  font-style: italic;
  color: var(--nv-gris);
}
.nv-encadre b, .nv-encadre strong { color: var(--nv-encre); font-style: normal; }

/* ── Cartes ────────────────────────────────────────────────────────────────*/
.nv-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.nv-carte {
  background: var(--nv-blanc);
  border: 1px solid var(--nv-regle);
  box-shadow: var(--nv-ombre);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nv-carte.nv-pleine { background: var(--nv-nuit); color: var(--nv-sur-nuit); border-color: transparent; }
.nv-carte.nv-pleine h3 { color: var(--nv-sur-nuit); }
.nv-carte p { font-size: 0.95rem; color: var(--nv-gris); }
.nv-carte.nv-pleine p { color: color-mix(in srgb, var(--nv-sur-nuit) 78%, transparent); }

/* Étiquette technique : mono, discrète, pour un code, un profil, un identifiant. */
.nv-etiquette {
  font-family: var(--nv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--nv-vert);
  background: color-mix(in srgb, var(--nv-vert) 12%, transparent);
  padding: 0.12rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
}
.nv-etiquette.nv-etiquette-orange { color: var(--nv-orange); background: var(--nv-orange-pale); }

/* ── Tableaux ──────────────────────────────────────────────────────────────
 * En-tête vert nuit, lignes alternées : lisible imprimé comme à l'écran.
 *
 * Un tableau ne dépasse JAMAIS la largeur de la page : une cellule trop longue
 * va à la ligne, y compris au milieu d'une suite sans espace — un identifiant,
 * une liste séparée par des virgules — que rien d'autre ne saurait couper.
 * Faire défiler vers la droite oblige à revenir vers la gauche, et on y perd
 * la ligne qu'on suivait ; à l'impression, la partie hors champ disparaît.
 *
 * .nv-scroll reste, en dernier recours : un tableau vraiment trop dense sur un
 * téléphone défilera plutôt que d'écraser ses colonnes à trois lettres. */
.nv-scroll { overflow-x: auto; }
table.nv-table {
  border-collapse: collapse;
  width: 100%;
  /* FIXE, et c'est tout le mécanisme : en disposition automatique, une cellule
   * contenant une longue suite sans espace impose sa largeur à la table, qui
   * déborde — ou, si on l'autorise à couper partout, écrase les autres colonnes
   * jusqu'à une lettre par ligne. En disposition fixe, les largeurs viennent de
   * l'en-tête (ou des <col>), jamais du contenu : la table tient dans la page,
   * et chaque colonne garde la sienne. */
  table-layout: fixed;
  font-size: 0.95rem;
}
/* Le contenu s'adapte donc à sa colonne, en coupant au besoin une suite
 * qu'aucune césure naturelle ne briserait. */
table.nv-table th, table.nv-table td { overflow-wrap: anywhere; }
/* Ce qui ne doit pas être coupé : une date, un montant, un compte. */
table.nv-table .nv-num { overflow-wrap: normal; white-space: nowrap; }
table.nv-table thead th {
  background: var(--nv-nuit);
  color: var(--nv-sur-nuit);
  font-family: var(--nv-titre);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.7rem 0.8rem;
}
table.nv-table td { padding: 0.65rem 0.8rem; vertical-align: top; border-bottom: 1px solid var(--nv-regle); }
table.nv-table tbody tr:nth-child(odd) td { background: var(--nv-creme-2); }
table.nv-table tbody tr:last-child td { border-bottom: none; }
table.nv-table .nv-num { font-family: var(--nv-mono); font-variant-numeric: tabular-nums; }

/* ── Chiffres mis en avant ────────────────────────────────────────────────*/
.nv-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.nv-chiffre { background: var(--nv-blanc); border: 1px solid var(--nv-regle); padding: 0.9rem 1rem; }
.nv-chiffre b {
  display: block;
  font-family: var(--nv-mono);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--nv-orange);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.nv-chiffre span { font-size: 0.88rem; color: var(--nv-gris); }

/* ── Figures ──────────────────────────────────────────────────────────────*/
figure.nv-figure { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
figure.nv-figure svg { width: 100%; height: auto; background: var(--nv-blanc); border: 1px solid var(--nv-regle); }
figure.nv-figure figcaption { font-size: 0.9rem; color: var(--nv-gris-clair); }

/* ── Listes ordonnées de travaux ──────────────────────────────────────────*/
ol.nv-etapes { margin: 0; padding-left: 1.3rem; color: var(--nv-gris); display: flex; flex-direction: column; gap: 0.5rem; }
ol.nv-etapes::marker, ol.nv-etapes li::marker { color: var(--nv-orange); font-family: var(--nv-mono); }
ol.nv-etapes b { color: var(--nv-encre); font-weight: 600; }

/* ── Pied de document ─────────────────────────────────────────────────────*/
.nv-pied { border-top: 1px solid var(--nv-regle); padding-top: 1rem; color: var(--nv-gris-clair); font-size: 0.87rem; }

img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }