/* ═══ Naval War of Emperium — page vitrine PvP ════════════════════════════
   Recette design : parallaxe (bannière nwoe.png) + alternance de voiles
   (page multi-slides) + lueurs + Rajdhani + cartes bordées or. */

html { background: var(--bg); }
body.page-nwoe { background: transparent; }
.page-bg-fixed {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100lvh; z-index: -1;
  background-image: url('/images/nwoe.png');
  background-size: cover; background-position: center 30%;
  filter: blur(1px) saturate(1.06) contrast(1.02) brightness(0.68);
  pointer-events: none;
}

.nw-page {
  padding-top: 64px;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  --ink: #eef1f7; --sub: #b3bccb; --faint: #8a94a6;
}
.nw-page p { line-height: 1.6; }
/* Largeur de page : volontairement PAS redefinie ici. `.container` vient de
   main.css (1300px) pour que toutes les pages aient la meme marge. */

/* ── Hero ───────────────────────────────────────────────────────────── */
.nw-hero {
  position: relative;
  padding: 120px 0 78px;
  background:
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(4,6,12,0.96) 100%),
    linear-gradient(90deg, rgba(4,6,12,0.90) 0%, rgba(4,6,12,0.70) 32%, rgba(4,6,12,0.30) 62%, rgba(4,6,12,0.08) 88%),
    radial-gradient(120% 80% at 82% 12%, rgba(110,168,212,0.16), transparent 55%),
    url('/images/nwoe.png') center 30% / cover no-repeat,
    #0a0d14;
  overflow: hidden; text-align: left;
  border-bottom: 1px solid var(--border);
}
.nw-hero .container { position: relative; z-index: 1; }
.section-label {
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--blue);
}
.nw-title {
  font-size: clamp(38px, 5.4vw, 62px); font-weight: 700; color: #fff;
  margin-top: 8px; letter-spacing: 0.01em; line-height: 1.03;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.nw-sub {
  font-size: 18px; color: var(--sub); font-weight: 500;
  margin-top: 16px; max-width: 640px; line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ── Sommaire collant (réutilise .info-toc de main.css) ─────────────────
   .info-toc est déjà stylé globalement ; rien à redéfinir ici. */

/* ── Ouverture du guide — en-tête à deux colonnes ───────────────────────
   Texte à gauche, image du navire à côté. Volontairement PAS une bannière avec
   texte en incrustation : le haut de page en est déjà une, la répéter donnerait
   deux fois le même motif. Le bloc reprend le style de carte des vignettes
   qu'il précède (même fond, même bordure, même arrondi) — en-tête et boutons
   se lisent comme une seule famille. */
.nw-chapter {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 30px; align-items: stretch;
  margin-bottom: 22px; padding: 30px;
  border-radius: 15px;
  scroll-margin-top: 96px;
  background: linear-gradient(165deg, rgba(20,26,38,0.86), rgba(10,14,22,0.92));
  border: 1px solid rgba(201,147,58,0.20);
  box-shadow: 0 14px 36px rgba(0,0,0,0.40);
}
.nw-chapter-body { min-width: 0; align-self: center; }
/* Pas de ratio fixe : avec un ratio, c'est l'IMAGE qui imposait la hauteur de la
   fiche et le texte flottait au milieu d'un grand vide (93 px mesurés en haut
   comme en bas). En `stretch` sans hauteur propre, c'est le texte qui dicte la
   hauteur et l'image s'y cale — plus aucun vide, quelle que soit la longueur du
   texte ou la langue. */
.nw-chapter-art {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden;
  min-height: 200px;
  border: 1px solid rgba(201,147,58,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
/* L'image est en absolu, donc elle ne compte pas dans le calcul de hauteur :
   sinon son ratio propre rendait le cadre plus haut que le texte et le vide
   revenait. Hors flux, c'est la colonne de texte qui fixe la hauteur, et
   l'image remplit ce qu'on lui donne. */
.nw-chapter-art img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.nw-chapter-title {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; color: #fff;
  margin-top: 8px; letter-spacing: 0.01em; line-height: 1.06;
}
.nw-chapter-intro {
  font-size: 16.5px; color: var(--sub); font-weight: 500;
  margin-top: 14px; line-height: 1.62;
}
/* Ce que la NWoE apporte, en étiquettes : elles remplissent le bas de la colonne
   au lieu de laisser du vide, et disent d'un coup d'œil de quoi il s'agit. */
.nw-chapter-tags {
  list-style: none; padding: 0;
  margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 9px;
}
.nw-chapter-tags li {
  font-size: 13px; font-weight: 600; letter-spacing: 0.015em;
  color: #e2c690; padding: 7px 15px; border-radius: 20px;
  background: rgba(232,192,122,0.08);
  border: 1px solid rgba(232,192,122,0.26);
}

/* ── Sections — alternance (impaire sombre / paire révèle la bannière) ── */
.nw-section {
  position: relative; padding: 66px 0;
  background: linear-gradient(180deg, rgba(4,6,12,0.93) 0%, rgba(4,6,12,0.90) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,147,58,0.10);
}
.nw-section:nth-of-type(even) {
  background: linear-gradient(180deg,
    rgba(5,7,13,0.86) 0%, rgba(5,7,13,0.58) 130px,
    rgba(5,7,13,0.58) calc(100% - 130px), rgba(5,7,13,0.86) 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.nw-section:nth-of-type(odd)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 45% at 12% 3%, rgba(110,168,212,0.12), transparent 60%),
    radial-gradient(55% 45% at 92% 97%, rgba(201,147,58,0.10), transparent 62%);
}
.nw-section > .container { position: relative; z-index: 1; }
.nw-section:last-child { border-bottom: none; }
.nw-section-title {
  font-size: clamp(25px, 3.1vw, 34px); font-weight: 700; color: #fff;
  margin-bottom: 12px; text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.nw-section-desc {
  font-size: 16px; color: var(--sub); font-weight: 500;
  max-width: 720px; margin-bottom: 30px; line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ── Carte générique + puce d'icône ─────────────────────────────────── */
.nw-card {
  background: linear-gradient(180deg, rgba(30,34,45,0.72) 0%, rgba(17,20,28,0.76) 100%);
  border: 1px solid rgba(201,147,58,0.16); border-radius: 15px; padding: 24px 22px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nw-card:hover {
  border-color: rgba(201,147,58,0.45); transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,147,58,0.12) inset;
}
.nw-card-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 15px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-lt);
  background: linear-gradient(180deg, rgba(201,147,58,0.20), rgba(201,147,58,0.07));
  border: 1px solid rgba(201,147,58,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.nw-card-icon svg { width: 24px; height: 24px; }
.nw-card-title { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.nw-card-desc { font-size: 14.5px; font-weight: 500; color: var(--sub); line-height: 1.55; }

.nw-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nw-prep-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.nw-prep-grid .nw-card { flex: 1 1 300px; }

/* ── Tableau des niveaux de frégate ─────────────────────────────────── */
.nw-levels {
  border-radius: 15px; overflow: hidden;
  border: 1px solid rgba(201,147,58,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.nw-levels-head, .nw-level-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.8fr; align-items: center;
  gap: 14px; padding: 14px 22px;
}
.nw-levels-head {
  background: rgba(201,147,58,0.12);
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-lt);
}
.nw-level-row {
  background: linear-gradient(180deg, rgba(30,34,45,0.6), rgba(17,20,28,0.66));
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 16px; font-weight: 600; color: var(--ink);
  transition: background 0.15s;
}
.nw-level-row:hover { background: linear-gradient(180deg, rgba(40,45,58,0.7), rgba(22,26,35,0.72)); }
.nw-level-row--max { background: linear-gradient(180deg, rgba(201,147,58,0.14), rgba(17,20,28,0.7)); }
.nw-level-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 4px 10px; border-radius: 8px;
  background: rgba(201,147,58,0.14); border: 1px solid rgba(201,147,58,0.34);
  color: var(--gold-lt); font-weight: 700; font-size: 14px;
}
.nw-level-row--max .nw-level-badge { background: linear-gradient(180deg, var(--gold-lt), var(--gold-dk)); color: #16110a; border-color: transparent; }
.nw-level-cost { color: #fff; }
.nw-level-endur { color: var(--blue); }
.nw-level-chest { color: var(--gold-lt); }
.nw-fineprint { font-size: 13.5px; color: var(--faint); font-weight: 500; margin-top: 14px; max-width: 720px; }

/* ── Étapes de l'assaut ─────────────────────────────────────────────── */
/* ── Étapes d'un thème : un fil, pas des boutons ────────────────────────
   Ces étapes étaient des cartes bordées à pastille d'icône — donc le sosie des
   vignettes de catégorie, alors qu'on ne clique pas dessus. Elles deviennent un
   fil chronologique : pastille numérotée reliée par un trait, texte dessous, et
   pas de cadre du tout. L'icône est retirée (le numéro porte l'ordre, le titre
   porte le sens) : c'est elle qui créait la confusion avec les vignettes. */
.nw-steps {
  list-style: none; padding: 0;
  /* marge basse : sans elle les étapes collaient au bloc suivant (les photos
     dans « Obtenir une frégate », les règles ailleurs) */
  margin: 0 0 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 22px;
}
.nw-step { position: relative; padding: 62px 0 0; text-align: center; }
/* Le trait relie le CENTRE d'une pastille au centre de la suivante : les
   colonnes étant égales, cette distance vaut une colonne + la gouttière, d'où
   `left:50%` et `width: 100% + gap`. Il s'efface sur la dernière étape, qui ne
   mène nulle part. La pastille, peinte après, le masque sur son passage. */
.nw-step::before {
  content: ""; position: absolute; left: 50%; width: calc(100% + 22px);
  top: 22px; height: 2px;
  background: linear-gradient(90deg, rgba(232,192,122,0.42), rgba(232,192,122,0.12));
}
.nw-step:last-child::before { content: none; }
.nw-step-num {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-size: 21px; font-weight: 700;
  color: #e8c07a; line-height: 1;
  background: rgba(9,13,21,0.96);
  border: 2px solid rgba(232,192,122,0.5);
  box-shadow: 0 0 0 5px rgba(9,13,21,0.96);   /* masque le trait sous la pastille */
}
/* Variante à 3 colonnes (les phases d'une mission, pas les étapes d'un parcours) */
.nw-steps--3 { grid-template-columns: repeat(3, 1fr); }
.nw-step-title { font-size: 17.5px; font-weight: 700; color: #fff; margin-bottom: 7px; }
.nw-step-desc { font-size: 14.5px; font-weight: 500; color: var(--sub); line-height: 1.55; }

/* ── Condition de victoire (bandeau) ────────────────────────────────── */
.nw-wincond {
  display: flex; gap: 18px; align-items: center; margin-top: 22px;
  background: linear-gradient(180deg, rgba(201,147,58,0.10), rgba(17,20,28,0.55));
  border: 1px solid rgba(201,147,58,0.3); border-radius: 14px; padding: 22px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.nw-wincond-ico {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; color: var(--gold-lt);
  background: linear-gradient(180deg, rgba(201,147,58,0.22), rgba(201,147,58,0.08));
  border: 1px solid rgba(201,147,58,0.4);
}
.nw-wincond-ico svg { width: 26px; height: 26px; }
.nw-wincond-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.nw-wincond-desc { font-size: 15px; font-weight: 500; color: var(--sub); line-height: 1.55; }

/* ── Butin (gagnant / perdant) ──────────────────────────────────────── */
.nw-spoils-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nw-spoils-card {
  border-radius: 16px; padding: 26px 26px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}
.nw-spoils-card--win  { background: linear-gradient(180deg, rgba(46,213,115,0.10), rgba(17,20,28,0.66)); border: 1px solid rgba(46,213,115,0.3); }
.nw-spoils-card--lose { background: linear-gradient(180deg, rgba(224,85,85,0.10), rgba(17,20,28,0.66)); border: 1px solid rgba(224,85,85,0.3); }
.nw-spoils-head {
  display: flex; align-items: center; gap: 11px;
  font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border2);
}
.nw-spoils-ico { display: inline-flex; width: 30px; height: 30px; }
.nw-spoils-ico svg { width: 26px; height: 26px; }
.nw-spoils-card--win .nw-spoils-ico { color: #6fe0a0; }
.nw-spoils-card--lose .nw-spoils-ico { color: #f08080; }
.nw-spoils-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nw-spoils-list li {
  position: relative; padding-left: 24px; font-size: 15px; font-weight: 500;
  color: var(--ink); line-height: 1.5;
}
.nw-spoils-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px;
  border-radius: 50%;
}
.nw-spoils-card--win .nw-spoils-list li::before { background: #2ed573; box-shadow: 0 0 8px rgba(46,213,115,0.6); }
.nw-spoils-card--lose .nw-spoils-list li::before { background: #e05555; box-shadow: 0 0 8px rgba(224,85,85,0.6); }

/* ── CTA ────────────────────────────────────────────────────────────── */
.nw-cta {
  text-align: center; margin-top: 40px;
  background: linear-gradient(180deg, rgba(88,101,242,0.10), rgba(17,20,28,0.6));
  border: 1px solid rgba(88,101,242,0.28); border-radius: 18px; padding: 40px 30px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.nw-cta-title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.nw-cta-desc { font-size: 15.5px; color: var(--sub); font-weight: 500; max-width: 540px; margin: 0 auto 22px; }
.nw-cta-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: #5865f2; color: #fff; font-size: 15px; font-weight: 700;
  padding: 13px 28px; border-radius: 12px; box-shadow: 0 10px 28px rgba(88,101,242,0.4);
  transition: transform 0.18s, filter 0.18s;
}
.nw-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.nw-cta-btn svg { width: 20px; height: 20px; }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nw-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .nw-pillars, .nw-spoils-grid { grid-template-columns: 1fr; }
  .nw-levels-head { display: none; }
  .nw-level-row { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .nw-wincond { flex-direction: column; text-align: center; align-items: center; }
}

/* ══════════ CARTE MARITIME LIVE ══════════════════════════════════════════ */
.nw-maplayout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
@media(max-width:900px){ .nw-maplayout{ grid-template-columns:1fr; } }

.nw-mapbox{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  border:1px solid rgba(232,192,122,.35); border-radius:14px; background:#0b1826;
  box-shadow:0 18px 55px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.4); }
.nw-mapbox svg{ display:block; width:100%; height:100%; user-select:none; }
.nw-glabel{ fill:#e8c07a; font-weight:700; font-family:inherit; }
/* Repère de la case survolée — discret par construction : à moitié transparent
   et sans interaction, il ne doit jamais gêner la lecture de la carte ni voler
   un survol à une frégate. */
.nw-cellhint{ fill:#e8c07a; fill-opacity:.5; font-weight:700; font-family:inherit;
  pointer-events:none; user-select:none; }
/* Case de terre : rouge, on n'y navigue pas. Même rouge que le statut « en
   guerre » — la palette de la carte n'a pas besoin d'une teinte de plus. */
.nw-cellhint.is-land{ fill:#e2574c; }
.nw-mlabel{ font-family:inherit; font-weight:700; paint-order:stroke;
  stroke:#08111c; stroke-width:3px; stroke-linejoin:round; }
/* .is-war ne porte plus d'animation CSS : la flotte est redessinée à chaque frame,
   l'animation repartait donc de zéro en permanence et ne se voyait jamais. Les
   éclats de bataille sont calculés à la frame dans nwoe-map.js (drawBoom). */

/* ── colonne flotte ── */
.nw-fleet{ background:linear-gradient(180deg,rgba(21,40,62,.92),rgba(13,27,42,.92));
  border:1px solid rgba(232,192,122,.28); border-radius:14px; padding:16px 15px; }
.nw-fleet-title{ display:flex; align-items:center; gap:9px; margin:0 0 13px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#e8c07a; }
.nw-fleet-title svg{ width:17px; height:17px; flex:0 0 auto; }
.nw-fleet-list{ display:flex; flex-direction:column; gap:9px; max-height:560px; overflow-y:auto; }
.nw-fleet-empty{ margin:0; font-size:13px; color:#7d90a6; font-style:italic; }

.nw-fleet-row{ background:rgba(255,255,255,.035); border:1px solid rgba(232,192,122,.18);
  border-left:3px solid rgba(232,192,122,.5); border-radius:9px; padding:9px 11px;
  display:flex; align-items:center; gap:10px; }
.nw-fleet-row.is-navigation{ border-left-color:#7dd3fc; }
.nw-fleet-row.is-guerre{ border-left-color:#e2574c; background:rgba(226,87,76,.08); }
.nw-fleet-row.is-quai{ border-left-color:#8fa3ba; opacity:.72; }
.nw-fleet-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.nw-fleet-guild{ font-size:14.5px; font-weight:700; color:#e6eef7; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.nw-fleet-lv{ font-size:11px; color:#8fa3ba; flex:0 0 auto; }
.nw-fleet-meta{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.nw-badge{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background:color-mix(in srgb, var(--c) 14%, transparent); border-radius:20px; padding:2px 9px; }
.nw-fleet-pos{ font-size:12.5px; font-weight:700; color:#e8c07a; font-variant-numeric:tabular-nums; }
.nw-fleet-nav{ margin-top:6px; font-size:12.5px; color:#a9bccf; }
.nw-fleet-nav b{ color:#7dd3fc; }
.nw-eta{ color:#e6eef7; font-variant-numeric:tabular-nums; }

/* ── zoom / déplacement de la carte maritime ── */
.nw-mapbox svg{ cursor:grab; touch-action:none; }
.nw-mapbox.is-panning svg{ cursor:grabbing; }

/* ── Plein écran ────────────────────────────────────────────────────────
   La vignette ne porte qu'un bouton « agrandir » ; les commandes de zoom
   n'apparaissent qu'en plein écran, où il y a la place et où elles servent —
   ce sont elles qui permettent de zoomer au doigt, la molette n'existant pas
   sur mobile. */
.nw-map-backdrop{
  position:fixed; inset:0; z-index:900;
  background:rgba(4,7,14,.72);
  backdrop-filter:blur(14px) saturate(.9); -webkit-backdrop-filter:blur(14px) saturate(.9);
}
body.nw-map-open{ position:fixed; left:0; right:0; width:100%; }
/* Carrée comme la carte : une fenêtre panoramique n'ajouterait que du vide. */
.nw-mapbox.is-full{
  position:fixed; z-index:901; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(96vw,96svh); height:min(96vw,96svh); aspect-ratio:auto;
  border-color:#e8c07a; box-shadow:0 30px 90px rgba(0,0,0,.75);
}
/* Tient la place de la carte en page pendant qu'elle est ouverte. */
.nw-mapbox-placeholder{
  width:100%; aspect-ratio:1/1; border-radius:14px;
  border:1px dashed rgba(232,192,122,.18); background:rgba(8,17,28,.35);
}
.nw-map-expand, .nw-map-close{
  position:absolute; z-index:8; width:32px; height:32px; border-radius:8px; cursor:pointer;
  background:rgba(8,17,28,.85); border:1px solid rgba(232,192,122,.45); color:#e8c07a;
  display:flex; align-items:center; justify-content:center; transition:.12s;
}
.nw-map-expand{ top:10px; right:10px; }
.nw-map-expand svg{ width:17px; height:17px; }
.nw-map-close{ top:10px; left:10px; font:700 21px/1 'Segoe UI',system-ui,sans-serif; display:none; }
.nw-map-expand:hover, .nw-map-close:hover{ background:rgba(232,192,122,.22); color:#fff; border-color:#e8c07a; }
.nw-map-expand:active, .nw-map-close:active{ transform:scale(.94); }
/* En page : bouton « agrandir » seul. En plein écran : fermeture + zooms. */
.nw-mapbox:not(.is-full) .nw-zoom{ display:none; }
.nw-mapbox.is-full .nw-map-expand{ display:none; }
.nw-mapbox.is-full .nw-map-close{ display:flex; }
.nw-zoom{ position:absolute; top:10px; right:10px; z-index:5; display:flex; flex-direction:column; gap:5px; }
.nw-zoom button{
  width:32px; height:32px; border-radius:8px; cursor:pointer;
  background:rgba(8,17,28,.85); border:1px solid rgba(232,192,122,.45); color:#e8c07a;
  font:700 17px/1 'Segoe UI',system-ui,sans-serif; display:flex; align-items:center; justify-content:center;
  transition:.12s;
}
.nw-zoom button:hover{ background:rgba(232,192,122,.22); color:#fff; border-color:#e8c07a; }
.nw-zoom button:active{ transform:scale(.94); }

/* ── navire : l'onde est animée en JS (voir nwoe-map.js), pas ici ── */
.nw-hit{ pointer-events:all; cursor:pointer; }

/* ── infobulle au survol d'un navire ── */
.nw-tip{ position:absolute; z-index:6; pointer-events:none; min-width:150px; max-width:230px;
  background:rgba(8,17,28,.94); border:1px solid rgba(232,192,122,.45); border-radius:10px;
  padding:9px 11px; box-shadow:0 10px 30px rgba(0,0,0,.55); }
.nw-tip[hidden]{ display:none; }
.nw-tip-head{ display:flex; align-items:center; gap:8px; }
.nw-tip-head img{ width:26px; height:26px; object-fit:contain; image-rendering:pixelated;
  border-radius:4px; background:rgba(255,255,255,.06); flex:0 0 auto; }
.nw-tip-name{ font-size:14px; font-weight:700; color:#e6eef7; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.nw-tip-sub{ display:flex; align-items:center; gap:7px; margin-top:6px; flex-wrap:wrap; }
.nw-tip-badge{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background:color-mix(in srgb, var(--c) 14%, transparent); border-radius:20px; padding:2px 8px; }
.nw-tip-pos{ font-size:12px; font-weight:700; color:#e8c07a; font-variant-numeric:tabular-nums; }
.nw-tip-line{ margin-top:5px; font-size:12px; color:#a9bccf; }

/* ── interrupteur "emblèmes sur la carte" ── */
.nw-switch{ display:flex; align-items:center; gap:9px; cursor:pointer; margin-bottom:12px;
  font-size:12.5px; color:#a9bccf; user-select:none; }
.nw-switch input{ position:absolute; opacity:0; width:0; height:0; }
.nw-switch-track{ position:relative; width:34px; height:18px; border-radius:20px; flex:0 0 auto;
  background:rgba(255,255,255,.12); border:1px solid rgba(232,192,122,.3); transition:.18s; }
.nw-switch-track::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px;
  border-radius:50%; background:#8fa3ba; transition:.18s; }
.nw-switch input:checked + .nw-switch-track{ background:rgba(232,192,122,.35); border-color:#e8c07a; }
.nw-switch input:checked + .nw-switch-track::after{ transform:translateX(16px); background:#e8c07a; }
.nw-switch input:focus-visible + .nw-switch-track{ outline:2px solid #e8c07a; outline-offset:2px; }

/* ── logo de la flotte + emblème dans la liste ── */
.nw-fleet-logo{ display:block; width:132px; max-width:62%; height:auto; margin:2px auto 10px;
  opacity:.95; filter:drop-shadow(0 5px 12px rgba(0,0,0,.5)); }
.nw-fleet-emblem{ width:22px; height:22px; flex:0 0 auto; object-fit:contain;
  image-rendering:pixelated; border-radius:4px; background:rgba(255,255,255,.07); }
.nw-fleet-guild{ flex:1 1 auto; min-width:0; }

/* ── vignette de frégate à droite de chaque ligne (proue en haut) ── */
.nw-fleet-ship{ height:52px; width:auto; flex:0 0 auto; opacity:.92;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.nw-fleet-body{ flex:1 1 auto; min-width:0; }
.nw-fleet-row.is-quai .nw-fleet-ship{ opacity:.55; filter:grayscale(.4); }

/* ═══ Guide — menu de thèmes ═══════════════════════════════════════════
   Le guide est découpé en catégories : une vignette par thème, un seul
   panneau affiché à la fois. Le masquage est conditionné à `.nw-js` posé
   par un script inline juste après le menu — donc (a) sans JS la page
   affiche tout le guide à la suite plutôt que 4 panneaux inaccessibles,
   (b) la classe arrive avant le premier paint : pas de flash "tout ouvert". */

/* Les vignettes et le contenu sont deux slides distinctes. Leur trame est FORCÉE
   au lieu d'être déduite de `:nth-of-type` : la section carte maritime est
   conditionnelle, donc la parité change selon qu'elle est rendue ou non, et le
   contenu du guide se retrouverait tantôt sur fond plein, tantôt sur un voile.
   Vignettes = voile léger (la bannière transparaît), contenu = fond plein : il
   se lit longuement, il ne doit pas dépendre de ce qu'il y a derrière. */
.nw-section--menu,
.nw-section--menu:nth-of-type(odd) {
  padding-top: 40px;
  background: linear-gradient(180deg,
    rgba(5,7,13,0.86) 0%, rgba(5,7,13,0.58) 130px,
    rgba(5,7,13,0.58) calc(100% - 130px), rgba(5,7,13,0.86) 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.nw-section--menu::before { content: none; }

.nw-section--contenu,
.nw-section--contenu:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(4,6,12,0.94) 0%, rgba(4,6,12,0.92) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nw-section--contenu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 45% at 12% 3%, rgba(110,168,212,0.12), transparent 60%),
    radial-gradient(55% 45% at 92% 97%, rgba(201,147,58,0.10), transparent 62%);
}

/* Grille sur 6 colonnes pour pouvoir composer 2 + 3 sans trou. Par défaut une
   vignette occupe 2 colonnes, soit 3 par rangée ; avec exactement 5 catégories,
   les deux premières passent à 3 colonnes et la rangée du bas en accueille 3.
   Le `:nth-last-child(5)` fait que la règle se désactive TOUTE SEULE dès qu'une
   6e catégorie existera : on retombera sur 3 + 3 sans rien changer ici. */
.nw-menu {
  display: grid; gap: 14px; margin: 4px 0 0;
  grid-template-columns: repeat(6, 1fr);
}
.nw-tile { grid-column: span 2; }
.nw-tile:first-child:nth-last-child(5),
.nw-tile:first-child:nth-last-child(5) + .nw-tile { grid-column: span 3; }
.nw-tile {
  position: relative; overflow: hidden; min-height: 224px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 14px;
  padding: 22px 20px; border-radius: 15px; cursor: pointer;
  font-family: inherit; text-align: center; color: var(--ink);
  border: 1px solid rgba(201,147,58,0.18);
  background: linear-gradient(165deg, rgba(20,26,38,0.86), rgba(10,14,22,0.92));
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, background-color 0.18s;
}
/* ── Illustration de catégorie ───────────────────────────────────────────
   Problème constaté en vrai : les captures n'ont pas la même luminosité (une
   plage de sable contre un pont de nuit), si bien qu'à pleine puissance les
   vignettes n'avaient plus le même poids visuel et la rangée paraissait en
   désordre. L'image est donc traitée comme une TEXTURE de fond, pas comme le
   sujet : c'est la carte sombre qui domine au repos, et toutes les vignettes se
   ressemblent. Elle monte en puissance au survol, et le thème ouvert la montre
   franchement — le contraste sert alors à désigner la catégorie active.
   `.nw-tile-media` porte la présence (opacité d'ensemble) et le rapproché ;
   `.nw-tile-mono` à l'intérieur porte la dose de monochrome. */
/* Sélecteur `>` volontaire : `.nw-tile > *` (plus bas) impose position:relative
   et z-index:1 à tout enfant direct. À spécificité égale c'est lui qui gagnait,
   et cette couche se retrouvait en flux, à 0×0 — donc AUCUNE illustration
   affichée, et un item de flex fantôme qui décalait l'emblème d'un cran. */
.nw-tile > .nw-tile-media {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden;
  background: var(--thumb) center / cover no-repeat;
  opacity: 0.26;
  transform: scale(1.01);          /* évite un liseré clair au bord pendant l'animation */
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(.2,.7,.3,1);
}
/* Copie monochrome teintée. `brightness` > 1 est délibéré : la carte de fond est
   très sombre, donc une image ASSOMBRIE s'y fondait au point de disparaître —
   baisser l'opacité ne la rendait pas discrète, elle la faisait disparaître.
   Plus claire que le fond, elle se lit comme une texture même à 18 %.
   `contrast(0.65)` resserre l'écart de luminosité entre captures (une plage de
   sable contre un pont de nuit) — c'est lui qui met les vignettes au même
   niveau. L'ordre compte : chaque filtre CSS clampe son résultat, donc saturer
   avant de régler la luminosité écrêterait le sable et les explosions.
   `sepia(1)` place la teinte à 38,6° (l'or du site à 0,4° près) et
   `hue-rotate(167deg)` l'amène à 208,5°, son bleu. **Retirer le hue-rotate
   suffit à repasser en doré** — c'est le seul réglage à toucher. */
.nw-tile-mono {
  position: absolute; inset: 0;
  background: var(--thumb) center / cover no-repeat;
  filter: grayscale(1) contrast(0.55) brightness(1.08) sepia(1) hue-rotate(167deg) saturate(1.2);
  opacity: 0.90;                   /* repos : 10 % de couleur (0.95 pour 5 %) */
  transition: opacity 0.45s ease;
}
/* Voile constant, au-dessus des deux images : c'est lui qui garantit qu'un titre
   blanc reste lisible, y compris sur le thème ouvert où l'image est franche. */
.nw-tile.has-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8,11,18,0.30) 0%, rgba(8,11,18,0.10) 32%,
      rgba(8,11,18,0.70) 66%, rgba(8,11,18,0.94) 100%),
    radial-gradient(135% 105% at 50% 30%, transparent 45%, rgba(8,11,18,0.55) 100%);
}
.nw-tile:hover .nw-tile-media           { opacity: 0.66; transform: scale(1.07); }
.nw-tile:hover .nw-tile-mono            { opacity: 0.50; }   /* 50 % de couleur */
.nw-tile.is-active .nw-tile-media       { opacity: 0.92; transform: scale(1.07); }
.nw-tile.is-active .nw-tile-mono        { opacity: 0; }      /* 100 % de couleur */

/* Sur photo, le texte a besoin de son propre appui : le voile seul ne suffit
   pas quand la capture est claire (sable, voiles, brouillard). */
.nw-tile.has-thumb .nw-tile-title { text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.7); }
.nw-tile.has-thumb .nw-tile-desc  { color: #c9d3e2; text-shadow: 0 1px 8px rgba(0,0,0,0.85); }
.nw-tile.has-thumb .nw-tile-ico {
  background: rgba(8,11,18,0.55); border-color: rgba(232,192,122,0.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.nw-tile > * { position: relative; z-index: 1; }
.nw-tile:hover {
  border-color: rgba(232,192,122,0.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.42);
}
.nw-tile:focus-visible { outline: 2px solid #e8c07a; outline-offset: 3px; }
/* Thème ouvert : bordure or franche + halo, pastille d'icône pleine. C'est ce
   qui manquait pour que la rangée se lise comme des onglets de catégorie et non
   comme cinq cartes illustrées côte à côte. */
.nw-tile.is-active {
  border-color: #e8c07a;
  background: linear-gradient(165deg, rgba(46,38,22,0.92), rgba(14,17,26,0.94));
  box-shadow: 0 10px 26px rgba(0,0,0,0.5),
              0 0 0 1px rgba(232,192,122,0.55),
              inset 0 0 0 1px rgba(232,192,122,0.22);
}
.nw-tile.is-active .nw-tile-title { color: #fff; }
.nw-tile-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  color: #e8c07a; background: rgba(232,192,122,0.10);
  border: 1px solid rgba(232,192,122,0.22);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.nw-tile-ico svg { width: 25px; height: 25px; }
.nw-tile.is-active .nw-tile-ico,
.nw-tile.has-thumb.is-active .nw-tile-ico {
  background: #e8c07a; border-color: #e8c07a; color: #14181f;
}

/* ── Emblème doré à la place de l'icône au trait ─────────────────────────
   L'emblème est déjà ouvragé et porte sa propre couleur : la pastille bordée
   qui encadrait l'icône au trait ferait doublon et l'enfermerait. On la retire
   entièrement et on laisse l'emblème respirer, plus grand. */
/* Sélecteur volontairement aussi spécifique que `.nw-tile.has-thumb .nw-tile-ico`
   qui pose un fond sombre pour l'icône au trait : sans ça, ce fond restait
   visible derrière l'emblème sur les vignettes illustrées. */
.nw-tile .nw-tile-ico--emblem,
.nw-tile.has-thumb .nw-tile-ico--emblem {
  width: 88px; height: 88px; border: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  opacity: 0.92;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
  transition: opacity 0.18s, filter 0.25s, transform 0.25s;
}
.nw-tile-ico--emblem img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Au survol et sur le thème ouvert, l'emblème s'allume — c'est lui qui porte
   l'état, la pastille pleine n'a plus lieu d'être. */
.nw-tile:hover .nw-tile-ico--emblem {
  opacity: 1; transform: translateY(-1px);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(232,192,122,0.35));
}
.nw-tile.is-active .nw-tile-ico--emblem,
.nw-tile.has-thumb.is-active .nw-tile-ico--emblem {
  background: none; border: 0; opacity: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.65)) drop-shadow(0 0 14px rgba(232,192,122,0.55));
}
.nw-tile-txt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nw-tile-title {
  font-size: 23px; font-weight: 700; color: #fff; line-height: 1.12;
  letter-spacing: 0.005em;
}
.nw-tile-desc  { font-size: 14.5px; font-weight: 500; color: #a9b4c4; line-height: 1.42; }
.nw-tile.is-active .nw-tile-desc { color: var(--sub); }

/* Un seul panneau à la fois — uniquement quand le JS est là (cf. en-tête). */
.nw-js .nw-panel { display: none; }
.nw-js .nw-panel.is-active { display: block; }
.nw-panel + .nw-panel { margin-top: 44px; }          /* lisible aussi sans JS */
/* ── En-tête d'un thème ─────────────────────────────────────────────────
   Bandeau emblème + titre sur l'illustration de la catégorie, fortement
   voilée : c'est un repère (« dans quel guide suis-je ? »), pas une image à
   regarder. L'illustration native fait 1000×500 et le bandeau ~1361 : elle est
   donc légèrement agrandie, sans conséquence à 22 % d'opacité sous un voile —
   ce serait à revoir seulement si on voulait l'afficher franchement. */
.nw-phead {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 24px;
  padding: 26px 30px; margin-bottom: 32px;
  border-radius: 15px;
  background: linear-gradient(165deg, rgba(20,26,38,0.90), rgba(10,14,22,0.94));
  border: 1px solid rgba(232,192,122,0.30);
  box-shadow: 0 12px 32px rgba(0,0,0,0.42);
}
.nw-phead.has-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--thumb) center / cover no-repeat;
  /* même traitement que les vignettes : une seule teinte pour toutes */
  filter: grayscale(1) contrast(0.55) brightness(1.08) sepia(1) hue-rotate(167deg) saturate(1.2);
  opacity: 0.22;
}
/* Voile latéral : le texte se pose à gauche, il lui faut un appui franc de ce
   côté sans éteindre l'image au centre. */
.nw-phead.has-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(8,11,18,0.86) 0%, rgba(8,11,18,0.55) 58%, rgba(8,11,18,0.78) 100%);
}
.nw-phead > * { position: relative; z-index: 1; }
.nw-phead-ico {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 13px; flex: 0 0 auto;
  color: #e8c07a; background: rgba(232,192,122,0.10);
  border: 1px solid rgba(232,192,122,0.28);
}
.nw-phead-ico svg { width: 28px; height: 28px; }
/* L'emblème se passe de pastille : il est déjà ouvragé. */
.nw-phead-ico--emblem {
  width: 78px; height: 78px; border: 0; background: none;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(232,192,122,0.30));
}
.nw-phead-ico--emblem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nw-phead-txt { min-width: 0; }
.nw-phead .nw-panel-title { font-size: clamp(24px, 3vw, 33px); margin-bottom: 7px; }
.nw-phead .nw-panel-desc  { margin-bottom: 0; max-width: 820px; }

.nw-panel-title {
  font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; color: #fff;
  margin-bottom: 10px; text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.nw-panel-desc {
  font-size: 16px; color: var(--sub); font-weight: 500;
  max-width: 780px; margin-bottom: 26px; line-height: 1.6;
}
.nw-sub-title {
  font-size: 18px; font-weight: 700; color: #e8c07a;
  margin: 38px 0 12px; letter-spacing: 0.01em;
}

/* Règles d'un thème — 2×2, plus lisible que 4 cartes étirées sur une ligne. */
.nw-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ── Figure d'illustration d'une étape ──────────────────────────────────
   Capture en jeu (792×501) + minimap repérée (400×400). Les colonnes sont dans
   le rapport qui donne aux DEUX images la même hauteur : 632/400, puisque
   632/1,581 = 400. Le bloc est plafonné à cette largeur, donc aucune des deux
   n'est agrandie — ce qui compte surtout pour la minimap, du pixel art que
   l'étirement rendrait floue. */
.nw-fig { margin: 0 0 32px; }
.nw-fig-pair {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: minmax(0, 632fr) minmax(0, 400fr);
  max-width: 1046px; margin-inline: auto;
}
.nw-fig-pair img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid rgba(201,147,58,0.22);
  box-shadow: 0 10px 28px rgba(0,0,0,0.42);
}
.nw-fig-cap {
  margin-top: 11px; text-align: center;
  font-size: 13.5px; font-weight: 500; color: var(--faint);
}
/* Coordonnées : en chasse fixe, c'est une donnée qu'on recopie en jeu. */
.nw-loc {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 600; color: #e8c07a;
  background: rgba(232,192,122,0.10); border: 1px solid rgba(232,192,122,0.28);
  border-radius: 6px; padding: 3px 9px; margin-left: 4px; white-space: nowrap;
}

/* Effectif d'une phase : sprite du monstre + nom + nombre. Le sprite vient de
   /db/mobs/<id>.png, déjà servi par le site (même source que la Database). */
.nw-mobline {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 4px 0; padding: 5px 11px 5px 6px; border-radius: 20px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(201,147,58,0.16);
  font-size: 13px; font-weight: 500; color: var(--sub);
}
/* Les sprites de mobs ne sont ni carrés ni de taille uniforme (Pirate Skeleton
   39×92, Skeleton General 68×100, Emperium 24×24). On PLAFONNE au lieu d'imposer
   une taille : les grands se calent sur la hauteur, les petits gardent la leur
   plutôt que d'être agrandis. */
.nw-mobline img {
  width: auto; height: auto; max-height: 34px; max-width: 40px;
  image-rendering: pixelated;   /* sprites : un lissage les rendrait pâteux */
}
.nw-mobline b { color: #e8c07a; font-weight: 700; }

/* Figure à une seule image (le duo côte à côte a sa propre règle plus haut). */
.nw-fig-solo { max-width: 860px; margin-inline: auto; }
.nw-fig-solo img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid rgba(201,147,58,0.22);
  box-shadow: 0 10px 28px rgba(0,0,0,0.42);
}

/* Liste de matériaux (quête de construction). */
.nw-mats {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.nw-mat {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 11px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,147,58,0.14);
}
/* Icône d'item servie par la base du site (/db/items/<id>.png, 24×24).
   `pixelated` : ce sont des sprites, un lissage les rendrait pâteux.
   Taille d'affichage = taille native, aucun agrandissement. */
.nw-mat-ico {
  width: 24px; height: 24px; flex: 0 0 auto;
  object-fit: contain; image-rendering: pixelated;
}
/* Le zeny n'est pas un item : pas d'icône en base, on pose une pastille. */
.nw-mat-ico--zeny {
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: #e8c07a;
  background: rgba(232,192,122,0.14); border: 1px solid rgba(232,192,122,0.34);
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
  text-transform: uppercase; line-height: 1;
}
.nw-mat-qty {
  font-size: 15px; font-weight: 700; color: #e8c07a;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.nw-mat-item { font-size: 14.5px; font-weight: 500; color: var(--sub); }

/* Encart d'avertissement au fil d'un panneau. */
.nw-note {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 26px;
  padding: 18px 20px; border-radius: 14px;
  background: rgba(232,192,122,0.06);
  border: 1px solid rgba(232,192,122,0.22);
}
.nw-note-ico { color: #e8c07a; flex: 0 0 auto; }
.nw-note-ico svg { width: 26px; height: 26px; }
.nw-note-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.nw-note-desc { font-size: 15px; color: var(--sub); font-weight: 500; line-height: 1.55; }

@media (max-width: 900px) {
  /* sur 2 rangées, le trait de la 2e étape pointerait hors grille : on le coupe */
  .nw-steps, .nw-steps--3 { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  .nw-step::before { content: none; }
  .nw-menu { grid-template-columns: repeat(2, 1fr); }
  /* en 2 colonnes, chaque vignette reprend une cellule pleine */
  .nw-tile, .nw-tile:first-child:nth-last-child(5),
  .nw-tile:first-child:nth-last-child(5) + .nw-tile { grid-column: auto; }
  .nw-rules { grid-template-columns: 1fr; }
  .nw-mats  { grid-template-columns: repeat(2, 1fr); }
  /* Une colonne : l'image passe SOUS le texte (order) — on garde le titre en
     premier, c'est lui qui annonce la section. */
  .nw-chapter { grid-template-columns: 1fr; gap: 20px; align-items: center; }
  .nw-chapter-art { order: 2; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 620px) {
  /* une seule colonne : le trait horizontal ne relierait plus rien */
  .nw-steps, .nw-steps--3 { grid-template-columns: 1fr; gap: 24px; }
  .nw-step::before { content: none; }
  .nw-fig-pair { grid-template-columns: 1fr; }
  .nw-phead { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .nw-phead-ico--emblem { width: 62px; height: 62px; }
  .nw-menu { grid-template-columns: 1fr; gap: 11px; }
  .nw-tile { grid-column: auto; }
  .nw-tile { min-height: 170px; padding: 16px; }
  .nw-tile > .nw-tile-ico--emblem { width: 74px; height: 74px; }
  .nw-mats { grid-template-columns: 1fr; }
  .nw-note { flex-direction: column; gap: 10px; }
  .nw-chapter { padding: 18px; }
  .nw-chapter-tags { gap: 7px; }
  .nw-chapter-tags li { font-size: 12px; padding: 6px 12px; }
}