/* ============================================================
   peuple-page.css
   Feuille de style PARTAGEE pour toutes les pages de peuples du
   chapitre 2 (templates/chapitre2/2_2_humain.html a 2_21_mogard.html).
   Ne pas modifier sans verifier l'impact sur toutes les pages qui
   l'utilisent (voir AGENTS.md > "Chantier peuples (chapitre 2)" pour
   la liste et le suivi d'avancement). Le contenu (textes de regles,
   images) reste propre a chaque template ; ce fichier ne gere que la
   presentation, commune a toutes les pages.

   Organisation :
   1. BASE
   2. NAVIGATION PRINCIPALE   (candidat a extraction future site entier)
   3. NAVIGATION SECONDAIRE   (candidat a extraction future site entier)
   4. PAGE PEUPLE - CONTENU
   5. FOOTER
   6. RESPONSIVE
   ============================================================ */

@import url('variable.css');

@font-face {
  font-family: 'oxanium';
  src: url('../fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
}

/* ============================================================
   1. BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Largeur du rail de navigation replie (voir section 3), partagee
     entre .nav-chapter et le degagement de contenu (--rail-clearance
     sur .peuple-main) pour n'avoir qu'une seule valeur a changer en
     RWD. */
  --nav-rail-width: 64px;
}

@media (max-width: 767px) {
  html {
    --nav-rail-width: 46px;
  }
}

body {
  margin: 0;
  background-color: var(--fond-global);
  color: var(--texte-principal);
  font-family: 'oxanium', sans-serif;
  overflow-x: hidden;
}

a {
  color: var(--texte-principal);
}

img {
  max-width: 100%;
  display: block;
}

.hidden-content {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   2. NAVIGATION PRINCIPALE
   ============================================================ */

.nav-principale {
  position: relative;
  z-index: 10001;
  background-color: #0b0a09;
  border-bottom: 1px solid rgba(255, 165, 0, 0.16);
}

.bandeau-navprincipale {
  display: flex;
  justify-content: space-between;
  height: 54px;
  padding-right: 15px;
}

.bandeau-navprincipale .logo {
  display: flex;
  align-items: center;
  padding-left: 10px;
  width: 90%;
  height: 54px;
}

.bandeau-navprincipale .logo a {
  color: var(--texte-principal);
  text-decoration: none;
  display: flex;
}

.bandeau-navprincipale .logo a img {
  width: 46px;
  filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.25));
}

.container-icon-navprincipale {
  position: relative;
  width: 160px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: var(--texte-principal);
  cursor: pointer;
}

.container-icon-navprincipale .icon-navprincipale,
.icon-box img {
  width: 22px;
  opacity: 0.9;
}

.search,
.user,
.icon-logout {
  width: 22px;
  opacity: 0.85;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.search:hover,
.user:hover,
.icon-logout:hover {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.45));
}

/* Panneau de recherche */
.search-panel {
  position: absolute;
  top: 50%;
  right: 160px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  background: var(--fond-card);
  border: 1px solid var(--bordure-orange);
  padding: 0.3em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: transform 0.3s ease;
  z-index: 1000;
  width: 220px;
}

.search-panel.active {
  transform: translateY(-50%) scaleX(1);
  display: block;
}

.search-panel form {
  display: flex;
}

.search-panel input#search-input {
  flex: 1;
  border: 1px solid rgba(255, 165, 0, 0.35);
  background: var(--fond-inner);
  color: var(--texte-principal);
  padding: 0.4em;
  font-family: 'oxanium', sans-serif;
}

.search-panel button {
  border: 1px solid rgba(255, 165, 0, 0.35);
  border-left: none;
  background: var(--fond-inner);
  padding: 0.3em 0.6em;
  cursor: pointer;
}

.search-results {
  list-style: none;
  margin: 0.3em 0 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  background: var(--fond-card);
  display: none;
  color: var(--texte-principal);
}

.search-results li {
  padding: 0.5em;
  cursor: pointer;
  border-top: 1px solid rgba(255, 165, 0, 0.1);
}

.search-results li:hover {
  background: rgba(255, 165, 0, 0.1);
  color: var(--orange);
}

.search-panel.active .search-results {
  display: block;
}

/* Menu burger deroulant plein ecran */
.link-box-principale {
  visibility: hidden;
  width: 100%;
  height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.link-box-principale a {
  width: 100%;
  height: 45%;
  text-align: center;
  text-decoration: none;
}

.show {
  visibility: visible;
  height: 700vh;
}

.button {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: 0;
  cursor: pointer;
  transform: translateY(0%);
  overflow: hidden;
  position: relative;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  top: -80px;
  right: 0;
  bottom: 0;
  left: 0;
}

.button::after {
  background-color: #000;
  opacity: 0.28;
  z-index: 2;
}

.button div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.button div::before,
.button div::after {
  position: absolute;
  top: 40%;
  right: 0;
  left: 0;
  color: #fff;
  font-size: 28px;
  font-family: 'elnath';
  line-height: 1;
  text-align: center;
  letter-spacing: 0.06em;
  padding: 25px 0;
  transition: 0.3s ease all;
}

.button:hover::before {
  transform: scale(1.3);
}

.button:hover div::before {
  letter-spacing: 4px;
  opacity: 0;
  transform: scale(4);
}

.button:hover div::after {
  letter-spacing: 0.06em;
  opacity: 1;
  transform: scale(1);
}

.btn-img-intro::before { transform: scale(1); background-image: url("../img/introduction.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-intro div::before { content: "INTRODUCTION ET UNIVERS"; opacity: 1; transform: scale(1); }
.name-a-intro div::after { content: "INTRODUCTION ET UNIVERS"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-regle::before { transform: scale(1); background-image: url("../img/regles.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-regle div::before { content: "REGLES DU JEU"; opacity: 1; transform: scale(1); }
.name-a-regle div::after { content: "REGLES DU JEU"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-crea::before { transform: scale(1); background-image: url("../img/creation-personnage.png"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-crea div::before { content: "CREATION DU PERSONNAGE"; opacity: 1; transform: scale(1); }
.name-a-crea div::after { content: "CREATION DU PERSONNAGE"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-levelup::before { transform: scale(1); background-image: url("../img/level_up.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-levelup div::before { content: "LEVEL UP"; opacity: 1; transform: scale(1); }
.name-a-levelup div::after {
  content: "LEVEL UP";
  letter-spacing: -10px;
  transform: scale(0);
  opacity: 0;
}

.btn-img-corpo::before { transform: scale(1); background-image: url("../img/corporations.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-corpo div::before { content: "CORPORATIONS"; opacity: 1; transform: scale(1); }
.name-a-corpo div::after { content: "CORPORATIONS"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-memo::before { transform: scale(1); background-image: url("../img/memocaps.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-memo div::before { content: "MEMO-CAPS"; opacity: 1; transform: scale(1); }
.name-a-memo div::after { content: "MEMO-CAPS"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-pouvoir::before { transform: scale(1); background-image: url("../img/pouvoir.webp"); background-size: cover; background-position: top; transition: 0.3s ease transform; z-index: 1; }
.name-b-pouvoir div::before { content: "POUVOIRS PSYCHIQUES"; opacity: 1; transform: scale(1); }
.name-a-pouvoir div::after { content: "POUVOIRS PSYCHIQUES"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-stuff::before { transform: scale(1); background-image: url("../img/equipements.webp"); background-size: cover; background-position: top; transition: 0.3s ease transform; z-index: 1; }
.name-b-stuff div::before { content: "EQUIPEMENT"; opacity: 1; transform: scale(1); }
.name-a-stuff div::after { content: "EQUIPEMENT"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-vehicule::before { transform: scale(1); background-image: url("../img/vehicules.png"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-vehicule div::before { content: "VEHICULES"; opacity: 1; transform: scale(1); }
.name-a-vehicule div::after { content: "VEHICULES"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-craft::before { transform: scale(1); background-image: url("../img/craft.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-craft div::before { content: "LE CRAFT"; opacity: 1; transform: scale(1); }
.name-a-craft div::after { content: "LE CRAFT"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-fdp::before { transform: scale(1); background-image: url("../img/fdp.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-fdp div::before { content: "FEUILLE DE PERSONNAGE"; opacity: 1; transform: scale(1); }
.name-a-fdp div::after { content: "FEUILLE DE PERSONNAGE"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.btn-img-aide::before { transform: scale(1); background-image: url("../img/aidemj.webp"); background-size: cover; background-position: center; transition: 0.3s ease transform; z-index: 1; }
.name-b-aide div::before { content: "AIDES MJ"; opacity: 1; transform: scale(1); }
.name-a-aide div::after { content: "AIDES MJ"; letter-spacing: -10px; transform: scale(0); opacity: 0; }

.name-a-intro div::after,
.name-a-regle div::after,
.name-a-crea div::after,
.name-a-levelup div::after,
.name-a-corpo div::after,
.name-a-memo div::after,
.name-a-pouvoir div::after,
.name-a-stuff div::after,
.name-a-vehicule div::after,
.name-a-craft div::after,
.name-a-fdp div::after,
.name-a-aide div::after {
  color: #0b0a09;
  background: var(--linear-orange);
  padding: 15px;
  margin: 0 auto;
  clip-path: polygon(calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0);
}

@media screen and (min-width: 768px) {
  .name-a-intro div::after,
  .name-a-regle div::after,
  .name-a-crea div::after,
  .name-a-levelup div::after,
  .name-a-corpo div::after,
  .name-a-memo div::after,
  .name-a-pouvoir div::after,
  .name-a-stuff div::after,
  .name-a-vehicule div::after,
  .name-a-craft div::after,
  .name-a-fdp div::after,
  .name-a-aide div::after {
    width: 60%;
  }
}

/* ============================================================
   3. NAVIGATION SECONDAIRE (menu lateral)
   ============================================================ */

.nav-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at left center, rgba(255, 165, 0, 0.08), transparent 35%),
    rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 2147483646;
}

/* backdrop-filter: blur() plein ecran est l'un des effets CSS les plus
   couteux a recalculer sur mobile (flou echantillonne a chaque frame
   pendant toute la transition d'opacite) : reserve au desktop, ou le
   GPU encaisse largement, et retire sur mobile ou il causait un rendu
   saccade a l'ouverture du tiroir de navigation (signale le 2026-08-10,
   independant du navigateur — symptome typique d'un cout de composition
   trop eleve, pas d'un bug specifique a un moteur). */
@media (min-width: 768px) {
  .nav-overlay {
    backdrop-filter: blur(4px);
  }
}

.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.nav-open {
  overflow: hidden;
}

.nav-chapter {
  scroll-behavior: auto;
  overflow-anchor: none;
  z-index: 2147483647;
  background-color: #0b0a09;
  border-right: 1px solid rgba(255, 165, 0, 0.14);
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 165, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 86vw);
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transform: translateX(calc(-100% + var(--nav-rail-width)));
  /* Seul transform (et clip-path, coupe en un seul pas via step-end donc
     quasi instantane) reste anime ici : box-shadow et background-color
     changent desormais SANS transition (bascule instantanee avec la
     classe .nav-is-open, voir plus bas). Les faire transitionner en
     parallele du transform forcait un repaint de tout le panneau (jusqu'a
     100vw sur mobile) a chaque frame pendant 0.35s, en plus de la
     composition du transform — cause probable du rendu saccade signale
     sur mobile le 2026-08-10 (transform seul se composite sur le GPU sans
     repaint, box-shadow/background-color non). */
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.1s step-end;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (max-width: 767px) {
  .nav-chapter {
    /* Convention mobile moderne : le tiroir ouvert occupe tout l'ecran
       plutot qu'un panneau partiel. */
    width: 100vw;
  }
}

.nav-chapter::-webkit-scrollbar {
  display: none;
}

/* Les coins biseautes n'ont de sens que sur le panneau large ouvert :
   applique au rail replie (64px), la meme clip-path coupe visiblement
   dans le petit bouton (bug observe, corrige ici en la limitant a
   l'etat ouvert). */
.nav-chapter.nav-is-open {
  transform: translateX(0);
  background-color: rgba(10, 9, 8, 0.98);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-shadow: 24px 0 55px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 165, 0, 0.10), 0 0 0 1px rgba(255, 165, 0, 0.16);
}

/* Rail : etat replie, affiche uniquement le bouton, le trait qui s'estompe
   et le libelle vertical (design/Humains Page Cinematic Direction).
   Positionne par rapport au bord droit de l'element (qui coincide avec
   la limite visible du rail une fois translateX applique). Le libelle
   ("Dossier 2.2", "Dossier 2.3"...) est propre a chaque page : il est
   fourni par --dossier-label, positionne en JS (voir peuple-page.js >
   applyDossierLabel(), lu depuis #peuple-nav-actions-data). Fichier
   partage : ne jamais remettre une valeur en dur ici. */
.nav-chapter:not(.nav-is-open)::before {
  content: "";
  position: absolute;
  right: 31px;
  top: 92px;
  bottom: 96px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 165, 0, 0.55), transparent);
  pointer-events: none;
}

.nav-chapter:not(.nav-is-open)::after {
  content: var(--dossier-label, "Dossier");
  position: absolute;
  right: 26px;
  bottom: 28px;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  font-size: 11px;
  color: #7c766d;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.link-box-chapter {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.98), rgba(8, 7, 6, 0.96));
  border-bottom: 1px solid rgba(255, 165, 0, 0.14);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.nav-chapter:not(.nav-is-open) .link-box-chapter {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  justify-content: flex-end;
  padding: 8px 12px 8px 0;
}

.title-chapter {
  margin: 0;
  font-size: 13px;
  font-family: 'oxanium', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.title-chapter::before {
  content: "// ";
  color: var(--orange);
}

.nav-chapter:not(.nav-is-open) .title-chapter {
  display: none;
}

.nav-menu-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(255, 165, 0, 0.55);
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* ============================================================
   ACTIONS RAPIDES DU TIROIR (profil / recherche / deconnexion)
   Injectees en JS juste sous le header sticky "// NAVIGATION".
   Voir peuple-page.js > injectNavQuickActions().
   ============================================================ */

/* Grille de 4 colonnes strictement egales (logo + deconnexion + profil +
   recherche) : garantit que le logo et chaque icone occupent exactement
   le meme espace et restent repartis uniformement sur l'axe horizontal.
   .peuple-nav-quickactions-icons (le wrapper JS des 3 icones) passe en
   display:contents pour que ses 3 enfants deviennent des items directs
   de cette grille au lieu de rester confines a une seule colonne.
   Plus de position:sticky ici (demande explicite du 2026-08-08) : seul
   le header "// NAVIGATION" (.link-box-chapter) doit rester fixe en
   haut du tiroir, cette rangee defile desormais avec le contenu. Logo
   ajoute le 2026-08-08 (demande explicite : pas de bouton "accueil"
   dans le rail replie, mais un logo cliquable dans le bandeau du
   tiroir ouvert). */
.peuple-nav-quickactions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: rgba(18, 16, 15, 0.92);
  border-bottom: 1px solid rgba(255, 165, 0, 0.14);
}

.nav-chapter:not(.nav-is-open) .peuple-nav-quickactions,
.nav-chapter:not(.nav-is-open) .peuple-nav-search-panel {
  display: none;
}

.peuple-nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.peuple-nav-logo img {
  display: block;
  width: 80px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.25));
  transition: filter 0.2s ease, transform 0.2s ease;
}

.peuple-nav-logo:hover img {
  filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.5));
  transform: scale(1.06);
}

/* display:contents retire le wrapper de la mise en page : ses 3 enfants
   (deconnexion/profil/recherche) deviennent des items directs de la
   grille 4 colonnes de .peuple-nav-quickactions, au meme titre que le
   logo, au lieu de rester confines dans une seule colonne. */
.peuple-nav-quickactions-icons {
  display: contents;
}

/* Prefixees par .peuple-nav-quickactions-icons pour l'emporter sur
   ".nav-chapter a { display: block; ... }" (regle des liens de chapitre,
   plus specifique qu'une simple classe seule) qui matchait aussi le
   lien profil injecte ici et cassait son centrage flex (bug observe :
   seule l'icone profil, un <a>, etait mal centree). */
.peuple-nav-quickactions-icons .peuple-nav-action,
.peuple-nav-quickactions-icons .peuple-nav-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--texte-secondaire);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.peuple-nav-quickactions-icons .peuple-nav-action:hover,
.peuple-nav-quickactions-icons .peuple-nav-action-btn:hover,
.peuple-nav-quickactions-icons .peuple-nav-action[aria-expanded="true"] {
  color: var(--orange);
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.08);
}

.peuple-nav-action-icon {
  display: block;
  width: 36px;
  height: 36px;
  opacity: 0.85;
  object-fit: contain;
}

.peuple-nav-logout-form {
  flex: 1;
  padding: 0;
  border: none;
  background: none;
}

.peuple-nav-search-panel {
  padding: 12px 16px;
  background: rgba(14, 12, 11, 0.95);
  border-bottom: 1px solid rgba(255, 165, 0, 0.14);
}

.peuple-nav-search-panel form {
  display: flex;
}

.peuple-nav-search-panel input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid rgba(255, 165, 0, 0.3);
  background: var(--fond-inner);
  color: var(--texte-principal);
  font-family: 'oxanium', sans-serif;
  font-size: 13px;
}

.peuple-nav-search-panel input:focus {
  outline: none;
  border-color: var(--orange);
}

.peuple-nav-search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.peuple-nav-search-results li + li {
  border-top: 1px solid rgba(255, 165, 0, 0.08);
}

.peuple-nav-search-results a {
  display: block;
  padding: 8px 4px;
  color: var(--texte-secondaire);
  text-decoration: none;
  font-size: 13px;
}

.peuple-nav-search-results a:hover {
  color: var(--orange);
}

/* position:absolute + inset:0 (plutot qu'une largeur/hauteur fixe qui
   dupliquait celle de .nav-menu-toggle) : avec "display:grid;
   place-items:center" sur le parent, un enfant de MEME taille que la
   boite du parent (bordure comprise) n'est pas parfaitement centre a
   cause de la bordure de 1px (le centrage grid se fait sur la boite de
   contenu, plus petite) — ecart d'1px observe et corrige ici, qui
   decalait a la fois les 3 traits du burger et la croix de fermeture. */
.menu-circle {
  position: absolute;
  inset: 0;
  display: block;
}

.menu-circle::before,
.menu-circle::after {
  display: none;
}

.menu-lines,
.menu-cross {
  position: absolute;
  inset: 0;
  display: block;
}

.menu-line {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, #ff9f1c, #ffd089);
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.34);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

/* "top: 50%" positionne le bord HAUT du trait au centre du bouton, pas
   son propre centre : sans le "translateY(-50%)" ci-dessous (qui
   compense la hauteur du trait lui-meme), les 3 traits se retrouvaient
   decales d'1px vers le bas par rapport au vrai centre du carre — cause
   du mauvais centrage du groupe signale. */
.menu-line-1 { top: 50%; transform: translateX(-50%) translateY(calc(-50% - 7px)); }
.menu-line-2 { top: 50%; transform: translateX(-50%) translateY(-50%); }
.menu-line-3 { top: 50%; transform: translateX(-50%) translateY(calc(-50% + 7px)); }

.nav-menu-toggle.is-open .menu-line-1 { transform: translateX(-50%) translateY(calc(-50% + 9px)) rotate(45deg); opacity: 0; }
.nav-menu-toggle.is-open .menu-line-2 { transform: translateX(-50%) translateY(-50%) scaleX(0); opacity: 0; }
.nav-menu-toggle.is-open .menu-line-3 { transform: translateX(-50%) translateY(calc(-50% - 9px)) rotate(-45deg); opacity: 0; }

.menu-cross-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, #ffb347, #ffe0aa);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.menu-cross-line-1 { transform: translate(-50%, -50%) rotate(-90deg) scaleX(0.2); }
.menu-cross-line-2 { transform: translate(-50%, -50%) rotate(90deg) scaleX(0.2); }
.nav-menu-toggle.is-open .menu-cross-line-1 { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
.nav-menu-toggle.is-open .menu-cross-line-2 { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); }

.chapter-block {
  opacity: 0;
  filter: blur(6px);
  transform: translateX(-110px) translateY(8px) scale(0.94);
  /* Vitesse doublee le 2026-08-10 (demande explicite) : durees et delai
     de decalage entre items divises par 2 par rapport a l'original
     (opacity/filter 0.7s->0.35s, transform 1s->0.5s, delai de base
     300ms->150ms, decalage par item 120ms->60ms), pour que les
     boutons/liens du tiroir apparaissent deux fois plus vite sans changer
     l'effet visuel (juste comprime dans le temps). */
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(150ms + var(--stagger-index, 0) * 60ms);
}

.nav-chapter.nav-is-open .chapter-block {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0) translateY(0) scale(1);
}

.chapter-block + .chapter-block {
  margin-top: 8px;
}

/* Cadre exterieur du bouton de chapitre : bordure continue au niveau du
   biseau (technique a deux calques deja utilisee par .peuple-table-wrap/
   .peuple-table-inner et card-ps.css, corrige le 2026-08-08). Un `border`
   classique sur un element avec `clip-path` ne suit pas l'arete diagonale
   du biseau et laisse apparaitre du noir a la place de l'orange dans le
   coin coupe. Ici : calque exterieur peint en orange avec `padding:1px`
   (= epaisseur du trait), calque interieur `.chapter-title` avec le meme
   polygone par-dessus. Le wrapper est ajoute dans nav-secondaire.html
   uniquement, sans toucher aux classes existantes : `style.css` (pages
   non redesignees) n'a pas de regle pour `.chapter-title-frame`, donc ce
   nouveau wrapper reste invisible/neutre sur ces pages-la. */
/* Plus de bordure autour du bouton de chapitre (retire le 2026-08-08,
   retour utilisateur : plus joli sans). Le wrapper reste en place (garde
   la technique a deux calques disponible si la bordure revient un jour)
   mais devient neutre : fond transparent, pas de padding. */
.chapter-title-frame {
  width: calc(100% - 16px);
  margin: 8px auto;
  background: transparent;
  padding: 0;
  clip-path: polygon(calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 0);
}

.chapter-title {
  width: 100%;
  display: block;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'elnath';
  color: var(--texte-principal);
  background: linear-gradient(135deg, rgba(255, 165, 0, 0.16), rgba(255, 165, 0, 0.03)), #121110;
  margin: 0;
  clip-path: polygon(calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 0);
  transition: background-color 0.25s ease;
}

.chapter-title-with-preview {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: stretch;
  min-height: 80px;
  padding: 0;
  overflow: hidden;
}

.chapter-preview-wrapper {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}

.chapter-preview-bg {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.35) brightness(0.6) saturate(1.05);
  transition: filter 0.35s ease;
}

/* Degrade plus visible et teinte orange sur le bord droit (cote texte),
   pour mieux raccorder visuellement l'image et le panneau de titre
   (2026-08-08, retour utilisateur : pas assez visible). */
.chapter-preview-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.1), rgba(255,165,0,0.4));
  pointer-events: none;
}

.chapter-title-texts {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 14px;
  overflow: hidden;
}

.chapter-kicker {
  display: block;
  font-family: 'oxanium', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--orange-light);
}

.chapter-kicker::before {
  content: "> ";
}

.chapter-main-title {
  display: block;
  font-size: 16px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--texte-principal);
}

.chapter-title.is-open .chapter-preview-bg,
.chapter-title.is-parent-current .chapter-preview-bg,
.chapter-title:hover .chapter-preview-bg {
  filter: grayscale(0) brightness(0.85) saturate(1.1);
}

.chapter-title.is-open .chapter-main-title,
.chapter-title.is-parent-current .chapter-main-title {
  color: var(--orange);
}

.chapter-list {
  margin: 0;
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* Vitesse doublee le 2026-08-10 (demande explicite), voir .chapter-block. */
  transition: max-height 0.25s ease, opacity 0.14s ease;
}

.chapter-block.chapter-open .chapter-list {
  max-height: 5000px;
  opacity: 1;
}

.chapter-preview-intro { background-image: url("../img/introduction.webp"); }
.chapter-preview-regles { background-image: url("../img/regles.webp"); }
.chapter-preview-crea { background-image: url("../img/creation-personnage.png"); }
.chapter-preview-levelup { background-image: url("../img/level_up.webp"); }
.chapter-preview-corpo { background-image: url("../img/corporations.webp"); }
.chapter-preview-memo { background-image: url("../img/memocaps.webp"); }
.chapter-preview-pouvoirs { background-image: url("../img/pouvoir.webp"); }
.chapter-preview-equipements { background-image: url("../img/equipements.webp"); }
.chapter-preview-vehicules { background-image: url("../img/vehicules.png"); }
.chapter-preview-craft { background-image: url("../img/craft.webp"); }
.chapter-preview-fdp { background-image: url("../img/fdp.webp"); }
.chapter-preview-aidemj { background-image: url("../img/aidemj.webp"); }

.nav-chapter li,
.nav-chapter a,
.nav-chapter .chapter-title {
  opacity: 1 !important;
}

/* Liste plate sur fond noir (cf. design/Design navigation), plus de
   "cartes" grises a coins coupes par lien (retire le 2026-08-08, retour
   utilisateur : la nav devait rester noire, pas grise comme l'ancien
   rendu). Chaque lien reste distinct via un simple filet de separation. */
.nav-chapter li {
  background: transparent;
  margin: 0 8px;
  border-bottom: 1px solid rgba(255, 165, 0, 0.08);
}

.nav-chapter li:last-child {
  border-bottom: none;
}

/* Espace entre le bouton de chapitre et le premier lien de la liste (cf.
   design/Design navigation) : le reste de la liste s'enchaine desormais a
   plat (filet de separation seulement, pas de marge), donc seul ce premier
   ecart a besoin d'une marge explicite. Applique sur le `li` plutot que sur
   `.chapter-list` lui-meme : `.chapter-list` reste a `max-height:0` tant
   qu'il est ferme, une marge sur le `li` interieur n'ajoute donc aucun
   espace visible avant ouverture (clippee par `overflow:hidden` du
   parent). */
.nav-chapter li:first-child {
  margin-top: 8px;
}

.nav-chapter ul {
  margin: 0;
  padding: 0;
}

.nav-chapter a {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 12px 34px 12px 12px;
  border-left: 2px solid transparent;
}

/* Barre laterale orange (via border-left, pas ::before : ce pseudo-element
   reste libre pour les branches d'arborescence des sous-liens ci-dessous)
   + libelle "Active" (cf. design/Design navigation), sur le lien exactement
   actif ; la barre seule (sans libelle) marque aussi un parent ouvert/actif,
   meme principe que le bouton de chapitre. */
.nav-chapter a.is-current,
.nav-chapter a.is-parent-current {
  border-left-color: var(--orange);
}

.nav-chapter a.is-current::after {
  /* Deux espaces apres l'echappement hexadecimal, pas un seul : en CSS,
     un espace juste apres un `\XXXX` sert a terminer l'echappement (il
     est "consomme", pas affiche) — sans un second espace, "ACTIVE"
     colle directement au chevron (bug corrige le 2026-08-08). */
  content: "\203A  ACTIVE";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

/* Branches d'arborescence devant les sous-liens (2.1, 2.2...), cf.
   design/Design navigation : chaque sous-lien est prefixe par un connecteur
   monospace, "coude" (l shape) uniquement sur le tout dernier de la liste
   pour representer la fin de la branche. */
/* Les sous-liens portent aussi la classe .btn-shine, qui utilise DEJA
   ::before pour son effet de brillance au survol (position:absolute,
   inset:0, translateX(-100%) au repos). Comme un element ne peut avoir
   qu'un seul ::before, cette regle (plus specifique : classe + type)
   l'emporte sur .btn-shine::before pour toutes les proprietes qu'elle
   redefinit — mais il faut explicitement neutraliser celles de
   .btn-shine::before qu'on ne veut pas heriter (position/transform/etc.),
   sinon le texte de la branche se retrouve positionne en absolu et
   translate hors champ, donc invisible (bug corrige le 2026-08-08). */
.sub-link-2 a::before {
  content: "\251C\2500 ";
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  z-index: auto;
  mix-blend-mode: normal;
  font-family: monospace;
  color: var(--orange);
}

.sub-link-2 a:last-child::before {
  content: "\2514\2500 ";
}

.nav-chapter a.is-current {
  color: var(--orange) !important;
  text-shadow: 0 0 10px rgba(255, 165, 0, .35);
}

.nav-chapter a.is-parent-current {
  color: var(--orange) !important;
}

.nav-chapter a.is-parent-current .icone-deroulant {
  transform: translateY(-50%) rotate(180deg);
}

.sub-link-2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateX(-16px);
}

.sub-link-2.show-chapter {
  max-height: 2400px;
  opacity: 1;
  transform: translateX(0);
}

.sub-link-2 a {
  word-break: break-word;
  font-size: 13px;
  padding-left: 16px;
}

.carriere-link {
  padding-left: 18px !important;
}

.carriere-sub-link a {
  padding-left: 28px !important;
}

/* Colle en bout de ligne (bord droit du lien) plutot que juste apres le
   mot du texte (retour utilisateur du 2026-08-08) : l'icone n'a plus a
   suivre le flux du texte, elle est plaquee au bord droit du lien, qui a
   deja `position:relative` (cf. .nav-chapter a). */
.icone-deroulant {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  opacity: 0.8;
  transition: transform 0.3s ease;
}

/* Boutons generiques utilises dans le menu lateral */
.btn {
  --hue: 35;
  --saturation: 100%;
  --lightness: 50%;
  position: relative;
  padding: 0.9rem 1.4rem;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.3;
  color: var(--texte-principal);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  display: block;
  transition: 0.25s;
}

.btn-ghost {
  color: var(--texte-secondaire);
  background-color: transparent;
}

.btn-ghost:hover {
  color: var(--orange);
}

.btn-shine {
  position: relative;
}

.btn-shine::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, hsla(var(--hue), var(--saturation), var(--lightness), 0.35), transparent);
  transform: translateX(-100%);
  transition: 0.6s;
  z-index: 1;
  mix-blend-mode: screen;
  pointer-events: none;
}

.btn-shine:hover::before {
  transform: translateX(100%);
}

/* Le rail gauche (voir regle .nav-chapter plus haut) est desormais le
   comportement par defaut a toutes les tailles d'ecran, plus de variante
   "tiroir du bas" sur mobile. Le RWD mobile (rail plus fin, tiroir ouvert
   plein ecran) est gere via --nav-rail-width (voir section 1. BASE) et
   le bloc @media (max-width: 767px) tout en bas de ce fichier. */

/* ============================================================
   4. PAGE PEUPLE - CONTENU
   ============================================================ */

.peuple-main {
  /* Le rail de navigation (voir section 3) reste affiche en permanence
     sur 64px a gauche, en overlay au-dessus du contenu. Toutes les
     sections principales doivent degager un espace net au-dela pour que
     le texte ne soit jamais colle a la barre noire. */
  --rail-clearance: calc(var(--nav-rail-width) + 40px);

  /* Colorimetrie reprise directement du design source
     (design/Humains Page Cinematic Direction/Humains Codex.dc.html),
     plus sombre que les jetons globaux de variable.css. Redeclarees ici,
     scopees au contenu de cette page uniquement : la nav laterale et le
     reste du site ne sont pas affectes (variable.css n'est pas modifie). */
  --fond-global: #201e1b;
  --fond-section: #232019;
  --fond-card: #262319;
  --fond-inner: #1a1815;
  --texte-principal: #f0ece5;
  --texte-secondaire: #b7b1a7;
  padding-bottom: 60px;
}

/* --- HERO --- */
.peuple-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: #0e0c0b;
}

/* Modificateur experimental (teste d'abord sur les Krogs uniquement,
   cf. AGENTS.md) : hero aux trois quarts de l'ecran au lieu de 62vh,
   pour laisser voir le titre + le premier paragraphe sans scroller.
   Classe optionnelle en plus de .peuple-hero, n'affecte aucune autre
   page tant qu'elle n'est pas ajoutee a son template. */
.peuple-hero--tall {
  min-height: 75vh;
}

/* Image de fond propre a chaque peuple : fournie par --peuple-hero-image
   (style inline sur l'element, resolu par Jinja dans le template de la
   page). Fichier partage : ne jamais coder une image en dur ici.
   --peuple-hero-position permet de recadrer le point d'ancrage par
   page (ex. Krog : portrait avec le visage tout en haut, cf. AGENTS.md)
   sans toucher au comportement par defaut des autres pages. */
.peuple-hero-bg {
  position: absolute;
  inset: -6%;
  background-image: var(--peuple-hero-image);
  background-size: cover;
  background-position: var(--peuple-hero-position, center 20%);
  filter: grayscale(0.5) brightness(0.55);
  animation: peuple-kenburns 15s ease-in-out infinite alternate;
}

@keyframes peuple-kenburns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -1.4%); }
}

/* Variante video du hero (demande explicite du 2026-08-09, exception
   pour /vehicules_vaisseaux qui gardait une video de fond `<video>` dans
   l'ancien gabarit) : meme cadrage/filtre que .peuple-hero-bg, mais sans
   le Ken Burns (la video a deja son propre mouvement) et avec
   object-fit au lieu de background-size. Balise <video> a la place du
   <div>, memes attributs autoplay/muted/loop/playsinline que l'ancien
   gabarit. */
.peuple-hero-bg-video {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: var(--peuple-hero-position, center 20%);
  filter: grayscale(0.5) brightness(0.55);
}

/* Corrige 2 problemes signales le 2026-08-08 : (1) l'ensemble etait juge
   trop sombre (filtre brightness allege ci-dessus de 0.4 a 0.55, palier
   haut du degrade allege de 0.55 a 0.42) ; (2) le dernier palier du
   degrade s'arretait a 0.94, donc 6% de la colorimetrie propre de l'image
   restait visible tout en bas du hero, creant une bande plus claire bien
   visible juste avant la section suivante (fond uni). Le dernier palier
   passe a 1 (totalement opaque) pour garantir une transition franche et
   uniforme vers le fond de la section suivante, quelle que soit l'image. */
.peuple-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 10, 9, 0.42) 0%, rgba(11, 10, 9, 0.28) 40%, rgba(14, 12, 11, 1) 100%);
  z-index: 1;
}

.peuple-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.peuple-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 24px 48px var(--rail-clearance);
}

.peuple-hero-kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--orange-light);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.peuple-hero h1 {
  font-family: 'elnath';
  font-weight: 400;
  font-size: clamp(42px, 11vw, 120px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  color: #f4f0e8;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.peuple-hero-sub {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--texte-secondaire);
  text-transform: uppercase;
  margin-top: 16px;
}

/* --- FICHE TECH / INTRO --- */
.peuple-dossier {
  position: relative;
  padding: 56px 24px 56px var(--rail-clearance);
  background: var(--fond-section);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.peuple-dossier-meta {
  border-left: 1px solid var(--bordure-orange);
  padding-left: 16px;
}

.peuple-dossier-meta span {
  display: block;
  font-size: 12px;
  color: var(--texte-secondaire);
  margin-bottom: 6px;
}

.peuple-dossier-meta .peuple-dossier-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--orange-light);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.peuple-dossier-meta .peuple-dossier-label::before {
  content: "▣ ";
}

.peuple-dossier-meta strong {
  color: var(--texte-principal);
  font-weight: normal;
}

.peuple-dossier-intro h2 {
  font-family: 'elnath';
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  text-transform: uppercase;
  color: var(--texte-principal);
  margin: 0 0 20px 0;
}

.peuple-dossier-intro h2 .bracket {
  color: var(--orange);
}

.peuple-lead {
  font-size: 20px;
  line-height: 1.7;
  color: var(--texte-secondaire);
  text-align: justify;
  margin: 0;
}

/* Surlignage des bonus/valeurs de regle dans le texte (<strong class="orange">),
   repris tel quel du gabarit source de chaque page. La classe elle-meme n'existe
   que dans style.css (non charge par ces pages) ; --orange arrive deja via
   @import url('variable.css') en haut de ce fichier, donc on ne redefinit que
   la classe, pas la variable, pour rester scope a cette feuille de style.
   Bug systemique corrige le 2026-08-07 : faute de cette regle, tous les
   <strong class="orange"> de toutes les pages peuples deja construites
   (Humains a Van'thar) s'affichaient en couleur de texte normale au lieu
   d'orange, sans qu'aucune erreur console ne le signale. Voir AGENTS.md. */
.peuple-main .orange {
  color: var(--orange);
}

/* --- SECTIONS STORYTELLING --- */
.peuple-story {
  position: relative;
  padding: 70px 24px 70px var(--rail-clearance);
  background: var(--fond-global);
}

.peuple-story--alt {
  background: var(--fond-section);
}

/* Comme dans le design source : deux paragraphes cote a cote sur toute
   la largeur du contenu, pas un seul bloc centre et plafonne. Repasse en
   1 colonne naturellement quand la largeur disponible ne tient plus 2
   colonnes de 360px (auto-fit), y compris sur mobile. */
.peuple-divided-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 40px;
  margin-top: 24px;
}

/* Variante empilee : plusieurs paragraphes de longueurs tres inegales
   rendent la colonne "auto-fit" desequilibree (colonnes de hauteurs tres
   differentes). Ici on empile simplement les paragraphes (comme une page
   web classique) sur 1 seule colonne pleine largeur — meme largeur et
   meme alignement a gauche qu'un .peuple-divided-grid a un seul
   paragraphe, pour rester coherent avec les titres/textes des sections
   voisines qui n'utilisent pas cette variante. Ne pas centrer, ne pas
   limiter la largeur, ne pas indenter : un ancien essai (centrage puis
   indentation pour recaler sur la colonne de .peuple-dossier) rendait
   les titres de sections consecutives visuellement desalignes entre
   eux (cf. Innommables, ou "L'age d'or du Pygmalion" et "La fin du
   reve" ne demarraient plus a la meme hauteur). Les paragraphes gardent
   leur espacement via .peuple-story p. */
.peuple-story-stack {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 24px;
}

.peuple-story-tag {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--orange-light);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.peuple-story-tag::before {
  content: "// ";
}

/* Quand un tag "//" introduit directement un bloc .peuple-story-stack (sans
   passer par .peuple-competence-entry), l'espace doit se trouver AU-DESSUS
   du tag (le separant du contenu precedent) et non EN DESSOUS (le tag doit
   rester colle a son propre contenu), pour matcher le style des pages qui
   utilisent .peuple-competence-entry (ex. Les Competences). */
.peuple-story-tag:has(+ .peuple-story-stack) {
  margin-top: 32px;
  margin-bottom: 8px;
}

.peuple-section-title + .peuple-story-tag {
  margin-top: 0;
}

.peuple-story-tag + .peuple-story-stack {
  margin-top: 0;
}

/* Espacement entre groupes empiles verticalement dans une section (ex.
   un bloc par syndrome sur la page Pouvoirs en favoris) : chaque groupe
   garde son propre .peuple-story-tag/.peuple-story-stack a distance,
   sans avoir a reprendre une classe utilitaire de marge par page. */
.bloc-syndrome + .bloc-syndrome {
  margin-top: 56px;
}

.peuple-story p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--texte-secondaire);
  text-align: justify;
  margin: 0 0 18px 0;
}

.peuple-story p:last-child {
  margin-bottom: 0;
}

/* --- ENCARTS "CLASSIQUES" (pages sans cartes avantages/stats, cf. le
   dossier design/Design Introduction/.../Introduction.dc.html et
   Chronologie.dc.html — texte + image, sans le systeme de jeu complet
   des pages peuple). Reutilisent les memes variables de couleur et la
   meme police que le reste du fichier pour rester visuellement
   coherents, mais n'ont pas besoin des cartes/stats/chips. --- */

/* Citation/definition mise en avant : filet orange a gauche, texte
   legerement teinte. Utiliser pour une phrase-cle qu'on veut détacher
   du reste du paragraphe (definition, punchline, synthese). */
.peuple-quote {
  border-left: 2px solid var(--orange);
  padding: 4px 0 4px 22px;
  margin: 30px 0;
}

.peuple-quote p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--orange-light);
  text-align: justify;
  margin: 0;
}

/* Grille de petits faits/elements courts (materiel requis, chiffres
   cles...) : filet fin orange entre les cases, fond legerement plus
   clair que la section, sans le cadrage "carte avantage" (pas de bordure
   epaisse, pas de titre en Elnath). `auto-fit` convient ici car ces
   cases sont volontairement courtes et homogenes (contrairement aux
   cartes avantages qui peuvent varier fortement en longueur). */
.peuple-factgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--bordure-orange);
  border: 1px solid var(--bordure-orange);
  margin-top: 24px;
}

.peuple-fact-item {
  background: var(--fond-inner);
  padding: 20px 22px;
}

.peuple-fact-item span {
  display: block;
}

.peuple-fact-item .peuple-fact-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--orange-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.peuple-fact-item .peuple-fact-value {
  font-size: 15px;
  color: var(--texte-principal);
}

.peuple-fact-item p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texte-secondaire);
  text-align: justify;
  margin: 0;
}

/* Liste d'etapes numerotees (cf. les 4 etapes de creation du personnage) :
   chaque etape est un paragraphe complet, pas juste un court libelle, donc
   une liste verticale avec un grand numero Elnath convient mieux qu'une
   grille de tuiles courtes (`.peuple-factgrid`). Le lien inline `a.orange`
   a l'interieur du texte recoit deja sa couleur via la regle `.orange`
   generale plus haut ; on ajoute juste un etat hover pour le confort. */
.peuple-steps {
  list-style: none;
  margin: 24px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.peuple-steps li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-left: 1px solid var(--bordure-orange);
  padding-left: 20px;
}

.peuple-step-num {
  font-family: 'elnath';
  font-weight: 400;
  font-size: 30px;
  color: var(--orange);
  line-height: 1;
  flex-shrink: 0;
  min-width: 34px;
}

.peuple-steps p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--texte-secondaire);
  text-align: justify;
  margin: 0;
}

.peuple-main a.orange:hover {
  color: var(--orange-light);
}

/* Ligne de metadonnees compacte au-dessus d'un texte descriptif (ex. liste
   de Competences : "Caracteristique associee : X" / "Propriete des
   Corporations : Y" avant la description). Plus discrete qu'un paragraphe
   normal, ne doit pas rivaliser avec le texte a lire. */
.peuple-competence-meta {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texte-secondaire);
  opacity: 0.8;
  margin: 0 0 10px 0;
}

.peuple-competence-entry {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.peuple-competence-entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Espace au-dessus du premier ".peuple-competence-entry" d'une serie
   quand il suit directement un paragraphe de texte courant (pas une
   image de split, qui a deja son propre espace naturel) : un simple
   espacement, sans filet de separation (le filet reste reserve a la
   page Competences, cf. AGENTS.md, retour utilisateur du 2026-08-08).
   Ne s'applique qu'au premier de la serie : les entrees suivantes ont
   deja leur propre `margin-bottom`/`padding-bottom` ci-dessus. */
.peuple-story-stack + .peuple-competence-entry {
  margin-top: 48px;
}

/* Sous-titre numerote a l'interieur d'une grande section (ex. "1.1
   Description des Caracteristiques" sous le titre "1. Les Caracteristiques").
   Plus petit que `.peuple-section-title`, meme principe de soulignement,
   pour ne pas rivaliser visuellement avec le titre de section parent. */
.peuple-subtitle {
  font-family: 'elnath';
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  text-transform: uppercase;
  color: var(--texte-principal);
  margin: 0 0 20px 0;
  position: relative;
  padding-bottom: 10px;
}

.peuple-subtitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 110px;
  height: 2px;
  background: var(--orange);
}

/* Liste avec barre laterale orange continue (cf. "Le Bonus de Caracteristique
   s'applique dans les situations suivantes :"). Remplace l'ancienne puce
   triangulaire par item (regle abandonnee le 2026-08-08 apres retour
   utilisateur) par un seul filet vertical qui longe tout le bloc, sur le
   meme principe que .peuple-quote. */
.peuple-bullets {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--orange);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.peuple-bullets p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--texte-secondaire);
  margin: 0;
  text-align: justify;
}

/* --- Tableaux de donnees stylises (cf. "Regles du Jeu.dc.html",
   design/Design page avec tableau/) : remplace au cas par cas l'ancien
   systeme `.sci-fi-table`/`tableau.css` (utilise par de nombreuses autres
   pages du site, non touche ici) par un cadre a coins coupes, filet
   degrade orange en tete, et un bandeau titre/reference.

   Tous les tableaux restent alignes a gauche (regle actee le 2026-08-08,
   apres retour utilisateur — l'alternance gauche/droite du design source
   a ete abandonnee) : pas de modificateur "aligner a droite".

   Bordure continue sur les coins coupes (corrige le 2026-08-08, meme bug
   que rencontre par le passe sur un autre projet, "le site des Moniers") :
   un `border` classique ne peut pas suivre l'arete diagonale d'un
   `clip-path`, ce qui laissait un trou visible au niveau du biseau. Fix
   repris de la technique deja utilisee par `card-ps.css` sur ce depot :
   deux calques imbriques partageant exactement le meme polygone de
   `clip-path` — `.peuple-table-wrap` (exterieur, rempli de la couleur de
   bordure, avec un `padding` de 1px qui devient l'epaisseur du "trait")
   et `.peuple-table-inner` (interieur, couleur de fond, memes coordonnees
   de decoupe). Comme les deux formes sont des surfaces pleines et non des
   traits, il n'y a plus jamais de trou au niveau de la diagonale. */
.peuple-table-wrap {
  position: relative;
  background: var(--bordure-orange);
  padding: 1px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  max-width: 480px;
  margin: 36px 0;
}

.peuple-table-wrap--wide {
  max-width: 640px;
}

/* Variante pleine largeur pour les grandes tables de reference (ex :
   tables de Repartition du chapitre Combats, 100 entrees en 2 colonnes
   de 50 lignes cote a cote ; table "Les Packs" du chapitre Regles
   avancees, 16 colonnes). `width: 100%` occupe tout l'espace dispo dans
   .peuple-story (au lieu de rester bloque a 1100px avec un grand vide a
   droite) ; .peuple-table-scroll gere le defilement horizontal si meme
   la pleine largeur ne suffit pas a tout afficher sans tasser. */
.peuple-table-wrap--full {
  width: 100%;
  max-width: 100%;
}

.peuple-table-inner {
  position: relative;
  background: var(--fond-inner);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.peuple-table-topline {
  height: 2px;
  background: linear-gradient(90deg, var(--orange), rgba(255, 165, 0, 0.05) 60%);
}

.peuple-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 6px 18px;
}

.peuple-table-head .peuple-table-ref {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--texte-secondaire);
  text-transform: uppercase;
}

.peuple-table-kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--orange-light);
  text-transform: uppercase;
}

.peuple-table-title {
  display: block;
  padding: 0 18px 14px 18px;
  font-family: 'elnath';
  font-size: 17px;
  color: var(--texte-principal);
  text-transform: uppercase;
}

/* Conteneur de defilement horizontal pour les tables tres larges (ex :
   tableau "Les Packs" du chapitre Regles avancees, 16 colonnes). Le
   tableau garde sa largeur naturelle et defile a l'interieur du cadre
   plutot que de deborder de la page. */
.peuple-table-scroll {
  overflow-x: auto;
}

.peuple-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'oxanium', sans-serif;
}

.peuple-table-scroll .peuple-table {
  width: max-content;
  min-width: 100%;
}

.peuple-table th {
  text-align: center;
  padding: 9px 18px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--orange-light);
  text-transform: uppercase;
  font-weight: 400;
  border-bottom: 1px solid var(--bordure-orange);
}

.peuple-table td {
  text-align: center;
  padding: 8px 18px;
  font-size: 15px;
  color: var(--texte-principal);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
}

.peuple-table tr:last-child td {
  border-bottom: none;
}

/* Ligne survolee : cf. design/Design page avec tableau/page avec
   tableau/tableaupresqueparfait.jpg — fond orange chaud sur toute la
   ligne + une barre orange pleine (pas juste un filet) collee au bord
   gauche du tableau. La barre ne doit apparaitre qu'une fois par ligne
   (sur la 1re cellule), jamais repetee entre les colonnes. */
.peuple-table tr:hover td {
  background: rgba(255, 165, 0, 0.09);
}

.peuple-table tr:hover td:first-child {
  box-shadow: inset 4px 0 0 var(--orange);
}

.peuple-table td.peuple-table-neg {
  color: #c9825b;
}

.peuple-table td.peuple-table-pos {
  color: #ffbb66;
}

.peuple-table td.peuple-table-text {
  text-align: left;
  line-height: 1.6;
}

/* Variante split : 2 sous-tableaux cote a cote dans le meme cadre, pour un
   grand tableau (Valeur/Bonus de Caracteristique) coupe en 2 colonnes
   plutot qu'une seule colonne tres haute. */
.peuple-table-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.peuple-table-split > table:first-child {
  border-right: 1px solid var(--bordure-orange);
}

@media (max-width: 640px) {
  .peuple-table-split {
    grid-template-columns: 1fr;
  }

  .peuple-table-split > table:first-child {
    border-right: none;
    border-bottom: 1px solid var(--bordure-orange);
  }
}

/* Liens dans une cellule de tableau (ex. Syndromes : nom + syndrome
   cliquables vers la fiche detail) : eviter le bleu/souligne par defaut
   du navigateur, garder la meme logique hover que le reste du site. */
.peuple-table td a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.peuple-table td a:hover,
.peuple-table td a:focus-visible {
  color: var(--orange);
}

/* En-tete de colonne triable (cf. tri-tableau.js, th.btn-tableau) :
   simple curseur + leger hover pour signaler l'interactivite, sans
   toucher aux classes/attributs que le script cible. */
.peuple-table th.btn-tableau {
  cursor: pointer;
  transition: color 0.2s ease;
}

.peuple-table th.btn-tableau:hover {
  color: var(--orange);
}

.peuple-table th.btn-tableau i {
  margin-left: 4px;
  font-size: 0.85em;
}

/* Barre de recherche (ex. catalogue des Syndromes) : filtre cote client
   deja gere par search-tableau-pouvoir.js via #search-pouvoir-input, ce
   bloc ne fournit que l'habillage visuel. */
.peuple-search-bar {
  position: relative;
  max-width: 520px;
  margin: 32px 0 28px 0;
}

.peuple-search-input {
  width: 100%;
  padding: 13px 46px 13px 18px;
  background: var(--fond-card);
  border: 1px solid var(--bordure-orange);
  color: var(--texte-principal);
  font-family: 'oxanium', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}

.peuple-search-input:focus {
  border-color: var(--orange);
}

.peuple-search-input::placeholder {
  color: var(--texte-secondaire);
}

.peuple-search-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: 0.6;
  pointer-events: none;
}

/* Bande d'illustration pleine largeur, sans texte associe (simple pause
   visuelle entre deux sections, cf. Regles du Jeu.dc.html) : plus courte
   qu'un `.peuple-split` (pense pour un vrai split image+texte cote a cote,
   min-height 60vh sur l'image seule seve ne convient pas ici). */
.peuple-banner-image {
  position: relative;
  width: 100%;
  height: 38vh;
  min-height: 240px;
  overflow: hidden;
}

.peuple-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Contrairement aux `.peuple-split-media img`, il n'y a pas de rideau a
     attendre avant de zoomer (pas d'ouverture animee sur une bande pleine
     largeur) : le zoom demarre donc directement, sans classe JS `is-zooming`. */
  animation: peuple-kenburns 13s ease-in-out infinite alternate;
}

/* --- SECTION AVEC IMAGE (rideau) --- */
.peuple-split {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  background: var(--fond-global);
}

.peuple-split--reverse {
  flex-direction: row-reverse;
}

.peuple-split-media {
  position: relative;
  flex: 1 1 46%;
  min-width: 300px;
  /* height (pas min-height) fige la colonne image a exactement 100vh :
     un flex-item avec une hauteur explicite ignore align-items:stretch,
     donc l'image ne suit plus la hauteur de sa colonne de texte quand
     celle-ci depasse 100vh (trop de paragraphes) — c'est desormais au
     texte de tenir dans ce budget, pas a l'image de s'etirer. */
  height: 100vh;
  overflow: hidden;
}

.peuple-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage par defaut centre ; ajustable par image via la variable
     --peuple-split-position (meme principe que --peuple-hero-position
     pour le hero), utile quand le sujet n'est pas centre dans la photo
     source et se retrouve coupe par la limite image/texte. */
  object-position: var(--peuple-split-position, center);
}

/* Zoom lent et doux (Ken Burns), declenche en JS juste apres l'ouverture
   du rideau (voir peuple-page.js). "infinite alternate" fait remonter
   l'animation en sens inverse a chaque cycle : le zoom ne s'accumule
   jamais, il respire (avant/arriere) tant qu'on reste sur la page,
   revenant progressivement a son point de depart entre deux cycles. */
.peuple-split-media img.is-zooming {
  animation: peuple-kenburns 13s ease-in-out infinite alternate;
}

.peuple-split-curtain {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0b0a09, #3a2412);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.2, 1);
}

.peuple-split--reverse .peuple-split-curtain {
  transform-origin: right;
}

.peuple-split-media.is-revealed .peuple-split-curtain {
  transform: scaleX(0);
}

.peuple-split-text {
  flex: 1 1 420px;
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}


/* Dans la variante inversee (image a droite), c'est ce bloc de texte qui
   se retrouve colle contre le rail de navigation a gauche : il lui faut
   donc le degagement supplementaire, pas a la variante normale (ou c'est
   l'image qui touche le rail). */
.peuple-split--reverse .peuple-split-text {
  padding-left: var(--rail-clearance);
}

.peuple-split-text p {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.8;
  color: var(--texte-secondaire);
  text-align: justify;
  margin: 0 0 20px 0;
}

.peuple-split-text p:last-child {
  margin-bottom: 0;
}

/* --- AVANTAGES --- */
.peuple-avantages {
  padding: 70px 24px 70px var(--rail-clearance);
  background: var(--fond-section);
}

/* Variante de fond pour enchainer plusieurs .peuple-avantages a la suite
   (ex. "Avantages de Carriere" puis "Memo-CAPS") sans qu'elles se
   confondent visuellement en un seul bloc. */
.peuple-avantages--alt {
  background: var(--fond-global);
}

.peuple-section-title {
  font-family: 'elnath';
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  text-transform: uppercase;
  color: var(--texte-principal);
  margin: 0 0 12px 0;
  position: relative;
  padding-bottom: 12px;
}

.peuple-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 130px;
  height: 2px;
  background: var(--orange);
}

.peuple-section-note {
  font-size: 15px;
  color: var(--texte-secondaire);
  margin: 0 0 32px 0;
}

/* 3 colonnes fixes plutot que repeat(auto-fit, minmax(...)) : avec plus
   de 3-4 cartes (ex. 7 chez les Argiliens), auto-fit casait trop de
   colonnes sur grand ecran et donnait des cartes etroites et hautes
   ("colonnes") au lieu du format rectangulaire voulu. Un compte fixe
   garde le meme gabarit quel que soit le nombre d'avantages du peuple. */
.peuple-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Variante "bento" : pour un peuple ayant une carte avantage nettement
   plus longue que les autres (cf. Map'iti / Telekinesie, qui embarque un
   tableau), le grid classique etirait toutes les cartes de la meme ligne
   a la hauteur de la plus longue, laissant un vide enorme dans les
   cartes courtes. Ici la carte `.peuple-card--featured` est placee en
   premiere position et s'etend sur 3 lignes (1 colonne de large), et
   `grid-auto-flow: dense` fait remonter les cartes courtes suivantes
   pour remplir les 2 colonnes restantes sans laisser de trou. Reservee
   aux pages qui ajoutent la classe explicitement (`peuple-cards--bento`),
   n'affecte aucune autre page peuple. */
.peuple-cards--bento {
  grid-auto-flow: dense;
}

.peuple-cards--bento .peuple-card--featured {
  grid-row: span 3;
}

.peuple-cards--bento .peuple-card--wide {
  grid-column: span 2;
}

/* Variante "pleine largeur" : quand une carte est a ce point plus longue
   que les autres que meme le bento (span sur plusieurs lignes) laisse un
   vide important a cote d'elle (cf. Van'thar / "Titre", un jet 1D8 a 8
   rangs bien plus long que "Telekinesie" chez les Map'iti), on abandonne
   le cote-a-cote : la carte prend toute la largeur de la grille dans un
   grand cadre orange marque, et les autres cartes s'enchainent
   normalement en dessous dans la grille standard a 3 colonnes. Ne pas
   combiner avec `peuple-card--featured` / `peuple-cards--bento` sur la
   meme carte. */
.peuple-card--full {
  grid-column: 1 / -1;
  border: 2px solid var(--orange);
  box-shadow: 0 0 24px rgba(255, 165, 0, 0.12);
}

.peuple-card {
  border: 1px solid rgba(255, 165, 0, 0.18);
  background: linear-gradient(160deg, rgba(255, 165, 0, 0.05), transparent 60%), var(--fond-card);
  padding: 22px 20px;
}

.peuple-card h3 {
  font-family: 'elnath';
  font-weight: 400;
  font-size: 16px;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.peuple-card p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte-secondaire);
  margin: 0;
  text-align: justify;
}

/* Contenu riche injecte (|safe) dans une carte avantage : plusieurs
   paragraphes et/ou une liste a puces (cf. cartes Carriere, "Avantages
   de Carriere" qui combine un <p> et un <ul>). */
.peuple-card p:not(:last-child) {
  margin-bottom: 14px;
}

/* Rail vertical continu (au lieu d'un chevron par ligne) le long de
   toute la liste, plus un filet fin entre chaque avantage. IMPORTANT :
   .peuple-card li ne doit PAS etre display:flex — un <li> flex traite
   chaque enfant inline (ex. <strong>) comme un flex-item SEPARE de son
   texte environnant au lieu d'un simple flux de texte, ce qui cassait
   le retour a la ligne ("Competences Privees :" se retrouvait coupe
   sur sa propre ligne). Un <li> bloc normal + padding-left laisse le
   texte (avec ses <strong>) s'ecouler normalement. */
.peuple-card ul {
  list-style: none;
  margin: 14px 0 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid rgba(255, 165, 0, 0.5);
}

.peuple-card ul:first-child {
  margin-top: 0;
}

.peuple-card li {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--texte-secondaire);
  text-align: left;
  padding: 10px 0;
}

.peuple-card li:first-child {
  padding-top: 0;
}

.peuple-card li:last-child {
  padding-bottom: 0;
}

.peuple-card li + li {
  border-top: 1px solid rgba(255, 165, 0, 0.12);
}

/* Petit tableau de donnees (ex. degats par palier) pouvant apparaitre a
   l'interieur d'une carte avantage (cf. Map'iti, Telekinesie). Scope a
   .peuple-card pour ne pas dependre de tableau.css (pense pour l'ancien
   gabarit, pas charge par les pages peuple). */
.peuple-card-table-wrap {
  overflow-x: auto;
  margin: 14px 0;
}

.peuple-card-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 15px;
}

.peuple-card-table th,
.peuple-card-table td {
  padding: 8px 10px;
  text-align: center;
  border: 1px solid rgba(255, 165, 0, 0.25);
  color: var(--texte-secondaire);
}

.peuple-card-table th {
  color: var(--orange);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  background: rgba(255, 165, 0, 0.08);
}

/* Illustration ponctuelle a l'interieur d'une carte avantage (cf. Pigme,
   avantage "Fusion" qui montre la forme fusionnee). Simple image pleine
   largeur, pas de rideau/zoom Ken Burns ici (reserve aux gros visuels de
   .peuple-split). */
.peuple-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 14px 0;
}

/* --- CARTES "PASSE" (cf. design/Design Caste/Caste page template design)
   Biseaux orientes comme le reste du site (coupe haut-droite + bas-gauche,
   coins haut-gauche/bas-droite carres) : la maquette source coupait
   haut-gauche/bas-droite, inverse le 2026-08-08 sur retour utilisateur
   pour rester coherent avec .chapter-title-frame / .peuple-table-wrap.
   Meme technique a deux calques (bordure exterieure peinte + padding,
   contenu interieur avec le meme polygone) que ces deux composants :
   les deux calques reutilisent la MEME chaine de clip-path (pas besoin de
   la recalculer en plus petit, les pourcentages/tailles se recalculent
   naturellement sur la boite, legerement plus petite, du calque interieur
   grace au padding). */
/* Masonry (mansoury.js, deja utilise pour .memos-container) plutot que
   CSS Grid : les cartes Passe ont des hauteurs tres variables (texte de
   longueur inegale), et un display:grid classique laisse un grand trou
   sous chaque carte plus courte que la plus haute de sa ligne au lieu
   de faire remonter la carte suivante. Les elements .peuple-passe-grid-
   sizer / .peuple-passe-gutter-sizer sont des cales invisibles servant
   uniquement a mesurer columnWidth/gutter (cf. peuple-passe-masonry.js),
   meme technique que mansoury-init.js pour les Memo-CAPS. */
.peuple-passe-grid {
  position: relative;
  margin-top: 24px;
}

.peuple-passe-grid-sizer,
.peuple-passe-slot {
  width: 100%;
}

.peuple-passe-gutter-sizer {
  width: 0;
}

.peuple-passe-slot {
  /* Plus large que le gutter horizontal (34px) : au hover, la carte se
     souleve de 6px (.peuple-passe-card:hover) et son panneau d'ombre se
     decale jusqu'a 20px (.peuple-passe-slot:hover::before), donc un
     ecart vertical egal au gutter horizontal laissait un risque reel de
     chevauchement avec la carte suivante dans la meme colonne. */
  margin-bottom: 56px;
}

@media screen and (min-width: 700px) {
  .peuple-passe-grid-sizer,
  .peuple-passe-slot {
    width: calc((100% - 34px) / 2);
  }

  .peuple-passe-gutter-sizer {
    width: 34px;
  }

  /* A 2 colonnes, "2 colonnes cumulees" = la largeur totale de la ligne. */
  .peuple-passe-slot--wide {
    width: 100%;
  }
}

@media screen and (min-width: 1100px) {
  .peuple-passe-grid-sizer,
  .peuple-passe-slot {
    width: calc((100% - 68px) / 3);
  }

  /* Carte "Pouvoirs"/"Pouvoir Psychique" (bloc .fdp-pouvoir-mogard, plus
     longue que les autres avantages) : 2 colonnes + 1 gouttiere cumulees,
     plutot qu'une colonne isolee tres haute a cote de 2 cartes courtes. */
  .peuple-passe-slot--wide {
    width: calc((100% - 68px) / 3 * 2 + 34px);
  }
}

.peuple-passe-card {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.peuple-passe-card:hover {
  transform: translateY(-6px);
}

.peuple-passe-card-inner {
  position: relative;
  background: radial-gradient(120% 100% at 0% 0%, rgba(255, 165, 0, 0.24), transparent 55%), linear-gradient(150deg, rgba(255, 165, 0, 0.12), transparent 70%), #1c1a16;
  clip-path: polygon(calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 0);
  padding: 26px 26px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Repere angulaire decoratif (cf. maquette) : un "L" de deux traits fins
   dans chaque coin carre (haut-gauche / bas-droite). Le repere bas-droite
   etait remonte de 36px dans la maquette source, ce qui le faisait
   chevaucher la ligne de reference en pied de carte — corrige ici a 14px,
   symetrique du repere haut-gauche. */
.peuple-passe-corner {
  position: absolute;
  background: rgba(255, 165, 0, 0.5);
  pointer-events: none;
}

.peuple-passe-corner--tl-h { top: 14px; left: 14px; width: 16px; height: 1px; }
.peuple-passe-corner--tl-v { top: 14px; left: 14px; width: 1px; height: 16px; }
.peuple-passe-corner--br-h { bottom: 14px; right: 14px; width: 16px; height: 1px; }
.peuple-passe-corner--br-v { bottom: 14px; right: 14px; width: 1px; height: 16px; }

.peuple-passe-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.peuple-passe-ref {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--orange-light);
  text-transform: uppercase;
}

.peuple-passe-chevron {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: #5f5a52;
}

.peuple-passe-title {
  font-family: 'elnath';
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--texte-principal);
  text-transform: uppercase;
  margin: 0 0 6px 0;
}

.peuple-passe-underline {
  width: 60px;
  height: 2px;
  background: var(--orange);
  margin-bottom: 18px;
  opacity: 0.85;
}

.peuple-passe-bonuses {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 165, 0, 0.14);
  border-bottom: 1px solid rgba(255, 165, 0, 0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peuple-passe-bonuses li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--texte-secondaire);
  line-height: 1.4;
}

.peuple-passe-bonuses li::before {
  content: "\203A";
  color: var(--orange);
  flex: 0 0 auto;
}

.peuple-passe-card-inner p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texte-secondaire);
  text-align: justify;
  margin: 0;
  flex: 1;
}

/* Contenu riche injecte (|safe), reutilise pour les cartes "Avantage de
   Carriere" (cf. 5_1_ordre.html) : plusieurs paragraphes et/ou liste a
   puces, meme rail vertical que .peuple-card ul. */
.peuple-passe-card-inner p:not(:last-child) {
  margin-bottom: 12px;
}

.peuple-passe-card-inner ul {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid rgba(255, 165, 0, 0.4);
  flex: none;
}

.peuple-passe-card-inner li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte-secondaire);
  padding: 6px 0;
  text-align: left;
}

.peuple-passe-card-inner li:first-child {
  padding-top: 0;
}

.peuple-passe-card-inner li:last-child {
  padding-bottom: 0;
}

.peuple-passe-card-inner li + li {
  border-top: 1px solid rgba(255, 165, 0, 0.1);
}

.peuple-index-type {
  color: var(--orange-light);
  font-size: 0.9em;
}

/* Index Memo-CAPS Acquises : pas de cartes, juste des liens en colonne
   groupes par lettre. Chaque groupe reutilise les coins decoratifs des
   cartes Passe (.peuple-passe-corner, deja un simple repere absolu, pas
   besoin de fond ni de biseau) et un rail vertical orange comme celui
   de .peuple-card ul, mais SEGMENTE par lettre (chaque <ul> porte son
   propre border-left, donc le rail s'interrompt entre deux lettres au
   lieu de courir sur toute la page). */
.peuple-memo-index {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.peuple-memo-index-letter {
  position: relative;
  padding: 22px 26px;
}

.peuple-memo-index-title {
  font-family: 'elnath';
  font-weight: 400;
  font-size: 30px;
  color: var(--texte-principal);
  text-transform: uppercase;
  margin: 0 0 14px 0;
}

.peuple-memo-index-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 2px solid rgba(255, 165, 0, 0.5);
}

.peuple-memo-index-list li {
  padding: 9px 0;
}

.peuple-memo-index-list li + li {
  border-top: 1px solid rgba(255, 165, 0, 0.12);
}

.peuple-memo-index-list a {
  display: block;
  color: var(--texte-secondaire);
  text-decoration: none;
  transition: color 0.2s ease;
}

.peuple-memo-index-list a:hover,
.peuple-memo-index-list a:focus-visible {
  color: var(--orange);
}

.peuple-passe-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 165, 0, 0.1);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #5f5a52;
  text-transform: uppercase;
}

.peuple-passe-foot-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 165, 0, 0.1);
}

/* --- VARIANTE "v2" DES CARTES PASSE (test isole sur Intouchable) ---
   Fusion des maquettes Style B/C/D demandee par l'utilisateur le
   2026-08-08 : disposition d'image diagonale de C (sans la bordure
   orange de C), zoom leger au hover sur l'image, fond plat + bordure
   fine biseautee de B (technique a deux calques : le calque exterieur
   .peuple-passe-card--v2 fournit la couleur de bordure via padding:1px,
   .peuple-passe-card-inner fournit le remplissage), panneau d'ombre qui
   se decale davantage au hover (aussi de B), coins qui s'allongent au
   hover (de D, mais gardes fins : 1px d'epaisseur).
   N'affecte QUE les cartes portant .peuple-passe-card--v2 en plus de
   .peuple-passe-card — les 3 autres pages Caste (Guildien/Baronde/
   Oligarque) gardent l'ancien rendu tant que la variante n'est pas
   validee.

   Le panneau d'ombre est porte par .peuple-passe-slot (nouveau wrapper
   sans clip-path autour de la carte), pas par .peuple-passe-card--v2
   lui-meme : un clip-path sur un element clippe TOUT son contenu, y
   compris ses propres pseudo-elements positionnes en absolu qui
   deborderaient sinon de sa boite (meme avec overflow:visible). Le
   ::before etait donc bien dans le DOM avec les bons styles calcules
   (visible dans l'inspecteur) mais totalement invisible a l'ecran,
   coupe par le clip-path hexagonal de la carte elle-meme. */
.peuple-passe-slot {
  /* align-self:start desactive le stretch par defaut de CSS Grid : sans
     ca, chaque slot est etire a la hauteur de la carte la plus haute de
     sa ligne (align-items:stretch, comportement par defaut de
     .peuple-passe-grid), et le panneau d'ombre (inset:0 dans le slot)
     suivait cet etirement au lieu de la hauteur reelle de sa propre
     carte — d'ou le debordement visible sur les cartes plus courtes que
     leur voisine de ligne. */
  align-self: start;
  position: relative;
}

.peuple-passe-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0c0a09;
  border: 1px solid rgba(255, 165, 0, 0.3);
  clip-path: polygon(calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 0);
  transform: translate(14px, 14px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

.peuple-passe-slot:hover::before {
  transform: translate(20px, 20px);
}

.peuple-passe-card--v2 {
  position: relative;
  z-index: 1;
  background: rgba(255, 165, 0, 0.4);
  padding: 1px;
  clip-path: polygon(calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 0);
}

.peuple-passe-card--v2 .peuple-passe-card-inner {
  background: #17140f;
}

.peuple-passe-card--v2 .peuple-passe-top {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin-bottom: 6px;
}

.peuple-passe-card--v2 .peuple-passe-media {
  position: relative;
  flex: 0 0 40%;
  min-height: 130px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.peuple-passe-card--v2 .peuple-passe-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.peuple-passe-card--v2:hover .peuple-passe-media img {
  transform: scale(1.08);
}

.peuple-passe-card--v2 .peuple-passe-top-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.peuple-passe-card--v2 .peuple-passe-top-text .peuple-passe-head {
  margin-bottom: 8px;
}

.peuple-passe-card--v2 .peuple-passe-top-text .peuple-passe-title {
  margin: 0;
}

.peuple-passe-card--v2 .peuple-passe-underline {
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.peuple-passe-card--v2:hover .peuple-passe-underline {
  width: 110px;
}

.peuple-passe-card--v2 .peuple-passe-corner {
  transition: width 0.3s ease, height 0.3s ease;
}

.peuple-passe-card--v2:hover .peuple-passe-corner--tl-h,
.peuple-passe-card--v2:hover .peuple-passe-corner--br-h {
  width: 28px;
}

.peuple-passe-card--v2:hover .peuple-passe-corner--tl-v,
.peuple-passe-card--v2:hover .peuple-passe-corner--br-v {
  height: 28px;
}

@media screen and (max-width: 480px) {
  .peuple-passe-card--v2 .peuple-passe-top {
    flex-direction: column;
  }

  .peuple-passe-card--v2 .peuple-passe-media {
    flex-basis: auto;
    min-height: 160px;
    clip-path: none;
  }
}

/* --- QUADRANTS --- */
.peuple-quadrants-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--texte-secondaire);
  max-width: 900px;
  margin: 0 0 28px 0;
  text-align: justify;
}

/* 2 colonnes fixes plutot que repeat(auto-fit, minmax(...)) : avec un
   nombre de cartes non multiple du nombre de colonnes calcule, auto-fit
   pouvait laisser une cellule de grille vide qui affichait quand meme le
   fond du conteneur (rectangle orange uni sans bordure ni texte, bug
   observe avec les 4 quadrants). Un compte de colonnes fixe elimine le
   probleme quel que soit le nombre de cartes pair. */
.peuple-grid-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 165, 0, 0.16);
  border: 1px solid rgba(255, 165, 0, 0.16);
}

.peuple-panel {
  background: var(--fond-inner);
  padding: 24px 22px;
}

.peuple-panel h3 {
  font-family: 'elnath';
  font-weight: 400;
  font-size: 16px;
  color: var(--texte-principal);
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.peuple-panel p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texte-secondaire);
  margin: 0;
  text-align: justify;
}

/* --- STATS READOUT --- */
.peuple-stats {
  padding: 70px 24px 70px var(--rail-clearance);
  background: var(--fond-global);
}

.peuple-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 40px;
  margin-top: 30px;
}

.peuple-stats-block .peuple-story-tag {
  margin-bottom: 12px;
}

.peuple-stats-block p {
  font-size: 17px;
  color: var(--texte-secondaire);
  line-height: 1.85;
  margin: 0 0 22px 0;
}

/* --- LISTE DE CARACTERISTIQUES (glossaire type fiche technique, ex.
   Caracteristiques des Pouvoirs) : chaque entree porte un repere FUI
   "// Caracteristique NN" (reutilise .peuple-story-tag) puis un titre
   Elnath, separes par un simple filet plutot qu'un bloc "gras + <br>"
   pour eviter la monotonie d'une longue liste de paragraphes identiques. */
.peuple-carac-list {
  display: flex;
  flex-direction: column;
}

.peuple-carac-entry {
  padding: 28px 0;
  border-top: 1px solid rgba(255, 165, 0, 0.14);
}

.peuple-carac-entry:first-child {
  border-top: none;
  padding-top: 0;
}

.peuple-carac-entry .peuple-story-tag {
  margin-bottom: 6px;
}

.peuple-carac-title {
  font-family: 'elnath';
  font-weight: 400;
  font-size: 21px;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.peuple-carac-entry p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--texte-secondaire);
  margin: 0;
  text-align: justify;
}

.peuple-carac-entry p + p {
  margin-top: 14px;
}

/* Valeurs de caracteristiques / statistiques passives : liste en grille
   2 colonnes avec simple filet, comme le design source (plus de tableau
   encadre). */
.peuple-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-bottom: 20px;
}

.peuple-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 165, 0, 0.12);
  font-size: 15.5px;
  color: var(--texte-secondaire);
  letter-spacing: 0.02em;
}

.peuple-stat-grid--passive .peuple-stat-row {
  padding: 8px 0;
  border-bottom-color: rgba(255, 165, 0, 0.1);
  font-size: 15px;
}

.peuple-stat-value {
  color: var(--orange);
}

.peuple-stats-compact {
  font-size: 15.5px;
  color: var(--texte-principal);
  margin: 0 0 8px 0;
}

.peuple-stats-note {
  font-size: 15px;
  color: #867f74;
  line-height: 1.6;
  margin: 0;
}

.peuple-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255, 165, 0, 0.14);
  border: 1px solid rgba(255, 165, 0, 0.14);
  margin-top: 50px;
}

.peuple-chip {
  background: var(--fond-inner);
  padding: 20px;
}

.peuple-chip span {
  display: block;
}

.peuple-chip-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--orange-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.peuple-chip-value {
  font-size: 16.5px;
  color: var(--texte-principal);
}

.peuple-chip-detail {
  font-size: 14.5px;
  color: var(--texte-secondaire);
  margin-top: 8px;
  line-height: 1.5;
  text-align: justify;
}

/* --- Retour en haut ---
   Volontairement pas centre : cale en bas a droite pour qu'une fois la
   page scrollee jusqu'au footer, le bouton semble faire partie du
   footer (aligne sur la ligne des liens) plutot que de la chevaucher. */
.peuple-scrolltop {
  position: fixed;
  bottom: 11px;
  right: 24px;
  z-index: 500;
  background: rgba(14, 12, 11, 0.85);
  border: 1px solid rgba(255, 165, 0, 0.35);
  color: var(--orange);
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Reveal generique au scroll --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   5. FOOTER
   ============================================================ */

.site-footer {
  width: 100%;
  padding: 25px 15px;
  background: #050505;
  border-top: 1px solid rgba(255, 165, 0, 0.25);
  text-align: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

.footer-nav a,
.footer-nav span {
  color: var(--texte-secondaire);
  font-size: 14px;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--orange);
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media screen and (min-width: 900px) {
  .peuple-dossier {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

@media screen and (min-width: 1440px) {
  /* Le degagement de base (--rail-clearance) s'applique deja a toutes
     les tailles d'ecran ; on ajoute seulement un peu de confort en plus
     sur tres grand ecran, sans jamais redescendre sous la largeur du
     rail (64px) comme le faisait l'ancienne regle. */
  .peuple-split-text {
    padding-right: 64px;
  }
}

/* ============================================================
   MOBILE (<= 767px)
   --nav-rail-width et --rail-clearance sont deja reduits plus haut
   (section 1. BASE / .peuple-main). Le reste ci-dessous couvre tout ce
   qui debordait ou etait ecrase a 320-414px : rail replie plus etroit,
   tiroir ouvert plein ecran, grilles forcees en 1 colonne, images en
   hauteur raisonnable au lieu de 100vh/60vh, paddings resserres.
   ============================================================ */
@media (max-width: 767px) {
  /* Le degagement desktop (rail + 40px de confort) est trop genereux sur
     un petit ecran : on le resserre a rail + 6px, symetrique avec le
     petit respire de 8px laisse a droite plus bas. Regle sur .peuple-main
     pour retomber en cascade sur toutes les sections qui utilisent
     var(--rail-clearance) (y compris .peuple-split--reverse). */
  .peuple-main {
    --rail-clearance: calc(var(--nav-rail-width) + 6px);
  }

  /* --- Rail : decorations du bouton replie repositionnees pour un
     rail de 46px au lieu de 64px --- */
  .nav-chapter:not(.nav-is-open)::before {
    right: 22px;
  }

  .nav-chapter:not(.nav-is-open)::after {
    right: 18px;
    font-size: 10px;
  }

  .nav-menu-toggle {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .nav-chapter:not(.nav-is-open) .link-box-chapter {
    padding-right: 7px;
  }

  /* .menu-circle/.menu-lines/.menu-cross n'ont plus besoin d'une
     largeur/hauteur dupliquee ici : ils remplissent .nav-menu-toggle via
     inset:0 et s'adaptent donc automatiquement a ses 32px mobiles. */

  /* --- Contenu : ne jamais coller au bord, mais exploiter toute la
     largeur (petit respire de 8px de chaque cote, symetrique) --- */
  .peuple-hero-content,
  .peuple-dossier,
  .peuple-story,
  .peuple-avantages,
  .peuple-stats {
    padding-left: var(--rail-clearance);
    padding-right: 8px;
  }

  .peuple-dossier {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .peuple-story,
  .peuple-avantages,
  .peuple-stats {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .peuple-lead {
    font-size: 17px;
  }

  .peuple-story p,
  .peuple-split-text p {
    font-size: 16px;
  }

  /* --- Sections image + texte : empilees, image en hauteur raisonnable
     plutot que 60-100vh, texte sur toute la largeur restante --- */
  .peuple-split {
    min-height: 0;
  }

  .peuple-split,
  .peuple-split--reverse {
    flex-direction: column;
  }

  .peuple-split-media {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 46vh;
  }

  .peuple-split-media img {
    min-height: 46vh;
  }

  .peuple-split-text {
    padding: 28px 8px 28px var(--rail-clearance);
  }

  .peuple-split--reverse .peuple-split-text {
    padding-left: var(--rail-clearance);
  }

  /* --- Grilles : une seule colonne pour laisser la place aux libelles
     longs ("Tol. Technologique", etc.) sans jamais depasser --- */
  .peuple-stat-grid,
  .peuple-stats-grid,
  .peuple-chips,
  .peuple-cards,
  .peuple-grid-panels,
  .peuple-divided-grid {
    grid-template-columns: 1fr;
  }

  /* En 1 colonne, la carte "featured" n'a plus personne a ses cotes :
     annuler les span pour ne pas laisser de lignes vides avant la carte
     suivante (cf. .peuple-cards--bento plus haut). */
  .peuple-card--featured,
  .peuple-card--wide {
    grid-row: auto;
    grid-column: auto;
  }

  .peuple-chips {
    gap: 1px;
  }

  /* --- Footer : liens en colonne plutot qu'en ligne avec separateurs
     "|" (illisible/serre sur petit ecran). La fleche "retour en haut"
     n'essaie plus de s'aligner sur une ligne de liens (qui n'existe
     plus) : simple coin bas-droite, avec une marge basse supplementaire
     sur le footer pour garantir qu'elle ne chevauche jamais le dernier
     lien quelle que soit la longueur du texte centre. --- */
  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .footer-nav span[aria-hidden="true"] {
    display: none;
  }

  .site-footer {
    padding-bottom: 76px;
  }

  .peuple-scrolltop {
    bottom: 16px;
    right: 16px;
  }
}

/* Diagramme "zone de combat" (cf. 13_les_combats.html) : grille 3x3
   remplacant l'ancien tableau rouge/orange/vert (.combat-table dans
   tableau.css) par une version sombre/orange coherente avec le reste
   de la feuille. La case centrale garde le token d'origine. */
.peuple-zone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  max-width: 420px;
  margin: 28px 0;
  background: var(--bordure-orange);
  padding: 3px;
}

.peuple-zone-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  font-family: 'oxanium', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-principal);
  background: var(--fond-inner);
}

.peuple-zone-cell--back {
  color: #ff8a6a;
  box-shadow: inset 0 0 0 1px rgba(255, 138, 106, 0.4);
}

.peuple-zone-cell--flank {
  color: var(--orange-light);
  box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.3);
}

.peuple-zone-cell--space {
  color: #7ed6a5;
  box-shadow: inset 0 0 0 1px rgba(126, 214, 165, 0.35);
}

.peuple-zone-cell--center {
  background-image: url("../img/chapitre1_img/token_zone_combat.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 480px) {
  .peuple-zone-grid {
    max-width: 280px;
  }

  .peuple-zone-cell {
    font-size: 9.5px;
    padding: 4px;
  }
}

/* ============================================================
   MARQUE — grille de cartes (2D20) + popup (4_marque.html)
   ============================================================ */

/* Reprend l'effet "fenetre partagee" du design d'origine
   (grid-marque.css) : background-attachment:fixed sur
   .marque-card-bg fait que TOUTES les cartes affichent un fragment
   de la MEME image, positionnee par rapport au viewport et non a
   la carte — d'ou l'impression de voir au travers de la grille.
   Nouveaute : au repos l'image est assombrie (filter), et se
   revele au survol au lieu d'etre visible en permanence. */
.marque-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  margin-top: 24px;
}

/* IMPORTANT : ni .marque-card ni .marque-card-media (ou un de ses
   ancetres) ne doivent porter transform/filter/will-change. Ces
   proprietes creent un nouveau "containing block" pour l'element, ce
   qui fait que background-attachment:fixed cesse d'etre relatif au
   viewport et redevient relatif a CET element — chaque carte affiche
   alors sa propre vue complete de l'image au lieu d'un fragment
   partage, cassant tout l'effet "fenetre commune". C'est exactement
   ce qui s'est produit avec le filter pose sur .marque-card-bg et le
   transform au hover de .marque-card : corrige en deplacant
   l'assombrissement sur un calque .marque-card-dim separe (anime en
   opacite, pas en filter) et en retirant le transform au hover. */
.marque-card {
  position: relative;
  min-height: 220px;
  cursor: pointer;
  clip-path: polygon(calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 0);
}

.marque-card-media {
  position: absolute;
  inset: 0;
  background-image: url("../img/chapitre5_img/max marlbo.webp");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  clip-path: polygon(calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 0);
}

.marque-card-dim {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.62);
  clip-path: polygon(calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 0);
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.marque-card:hover .marque-card-dim,
.marque-card:focus-visible .marque-card-dim {
  opacity: 0;
}

.marque-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(10, 9, 8, 0) 40%, rgba(10, 9, 8, 0.88) 100%);
}

.marque-card-title {
  font-family: 'elnath';
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--texte-principal);
  text-transform: uppercase;
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.marque-card-underline {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--orange);
  opacity: 0.85;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.marque-card:hover .marque-card-underline,
.marque-card:focus-visible .marque-card-underline {
  width: 70px;
}

@media screen and (max-width: 600px) {
  .marque-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
  }

  .marque-card {
    min-height: 170px;
  }
}

/* --- Popup Marque : meme technique a deux calques que
   .peuple-passe-card (bordure fine biseautee via padding:1px sur le
   calque exterieur, remplissage sur .mark-modal-inner). --- */
.mark-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mark-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

.mark-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 6, 0.82);
  backdrop-filter: blur(6px);
}

.mark-modal-content {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  background: rgba(255, 165, 0, 0.4);
  padding: 1px;
  clip-path: polygon(calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px), 0 0);
  opacity: 0;
}

.mark-modal.is-open .mark-modal-content {
  animation: mark-modal-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mark-modal.is-closing .mark-modal-content {
  animation: mark-modal-leave 0.3s ease forwards;
}

.mark-modal-inner {
  position: relative;
  background: #17140f;
  clip-path: polygon(calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px), 0 0);
  max-height: 86vh;
  overflow-y: auto;
  padding: 40px 36px 36px;
}

.mark-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: 1px solid rgba(255, 165, 0, 0.35);
  color: var(--orange);
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 3;
}

.mark-modal-close:hover {
  transform: rotate(90deg);
  color: var(--orange-light);
}

.mark-modal-body .mark-title {
  font-family: 'elnath';
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.02em;
  color: var(--texte-principal);
  text-transform: uppercase;
  margin: 0 0 20px 0;
  padding-right: 40px;
}

.mark-modal-body .incident-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-light);
  border-bottom: 1px solid rgba(255, 165, 0, 0.2);
  padding-bottom: 10px;
  margin: 0 0 16px 0;
}

.mark-modal-body .incident-description {
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
  color: var(--texte-secondaire);
  background: rgba(255, 165, 0, 0.08);
  border-left: 2px solid var(--orange);
  padding: 14px 18px;
  margin: 0 0 20px 0;
}

.mark-modal-body .mark-description {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--texte-secondaire);
  text-align: justify;
  margin: 0 0 24px 0;
}

.mark-modal-body .modal-actions {
  display: flex;
  justify-content: flex-end;
}

@keyframes mark-modal-enter {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes mark-modal-leave {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.94);
  }
}

@media screen and (max-width: 600px) {
  .mark-modal-inner {
    padding: 34px 22px 28px;
  }
}

/* ============================================================
   SOMMAIRE DE CARRIERE (bandeau d'ancres sous le hero) — variante FUI
   Meme role que .carriere-subnav de chapitre2.css (utilise par les 10
   autres pages Corporation, non touche), mais restylee pour les pages
   passees sous peuple-page.css (ex. 5_1_ordre.html) : biseau, coins,
   trait orange qui grandit au hover du lien actif.
   ============================================================ */
.carriere-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  /* Le rail de navigation fixe est a GAUCHE de l'ecran : le degagement
     doit donc etre en padding-left, pas padding-right (bug d'origine —
     le texte "[ Sommaire // Carrieres ]" passait sous le rail et se
     retrouvait tronque). */
  padding: 18px 24px 18px var(--rail-clearance);
  margin: 0;
  background: var(--fond-section);
  border-top: 1px solid rgba(255, 165, 0, 0.16);
  border-bottom: 1px solid rgba(255, 165, 0, 0.16);
}

.carriere-subnav-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-light);
  white-space: nowrap;
}

.carriere-subnav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.carriere-subnav-links a {
  position: relative;
  font-size: 14.5px;
  color: var(--texte-secondaire);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

.carriere-subnav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--orange);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.carriere-subnav-links a:hover,
.carriere-subnav-links a:focus-visible {
  color: var(--orange);
}

.carriere-subnav-links a:hover::after,
.carriere-subnav-links a:focus-visible::after {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .carriere-subnav {
    padding-left: var(--rail-clearance);
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   ARMES DU PERSONNAGE (/armes_personnage) — onglets de tableau
   et grille de fiches "Concept 05" (cf. design/Design armes/,
   comparatif visuel valide avec l'utilisateur le 2026-08-09).
   Les classes .weapon-tabs/.tab-button/.tab-icon/.tab-label/
   .weapon-tab/.container-arme/.actions-arme/.favori-form sont
   reprises telles quelles depuis l'ancien gabarit (armes.css,
   desormais retire du chargement de cette page) car elles sont
   lues par armes_personnage.js/favoris.js/bouton.css (toujours
   charges) : ne jamais les renommer sans mettre a jour ces
   fichiers JS en meme temps. Scope a .peuple-main pour ne pas
   fuiter sur d'autres pages qui chargeraient encore armes.css.
   ============================================================ */

.peuple-main .weapon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0 0;
}

/* Bordure continue sur le biseau coupe (retour utilisateur du 2026-08-09,
   capture d'ecran a l'appui) : un `border` classique ne peut pas suivre
   l'arete diagonale d'un `clip-path`, ce qui laissait un trou visible au
   niveau du coin coupe — meme bug deja corrige ailleurs sur `.peuple-table-
   wrap`/`.peuple-table-inner`, `.chapter-title-frame`/`.chapter-title`,
   `card-ps.css`. Meme remede : deux calques partageant le meme polygone de
   `clip-path`. `.tab-button` (calque exterieur) devient une surface pleine
   peinte dans la couleur de bordure avec un `padding` de 1px qui en devient
   l'epaisseur ; `.tab-button-inner` (nouveau, calque interieur) porte le
   vrai fond et tout le contenu (icone/libelle/compteur) qui vivait avant
   directement dans `.tab-button`. Necessite d'envelopper le contenu de
   chaque bouton avec `<span class="tab-button-inner">` dans le HTML.

   Onglets retractables (retour utilisateur du 2026-08-09, 9 onglets sur
   /armes_personnage debordaient sur 2 lignes) : chaque onglet est reduit
   par defaut a une largeur fixe qui ne laisse voir que l'icone, et se
   deplie au survol/focus pour reveler le libelle + le compteur — comme un
   dock qui grossit. L'onglet actif reste toujours deplie (repere visuel
   permanent de la categorie selectionnee). Technique : largeur fixe animee
   sur `.tab-button` (pas de grid/fr ici, deja source d'un bug similaire
   ailleurs cette session — un simple `width` anime est plus fiable),
   `overflow:hidden` masque le texte qui deborde en dessous de la largeur
   depliee ; `white-space:nowrap` empeche le libelle de repasser a la ligne
   pendant la transition. */
.peuple-main .tab-button {
  display: block;
  flex: 0 0 auto;
  width: 54px;
  overflow: hidden;
  padding: 1px;
  border: none;
  background: rgba(255, 165, 0, 0.25);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 100%);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

.peuple-main .tab-button:hover,
.peuple-main .tab-button:focus-visible,
.peuple-main .tab-button.active {
  width: 230px;
}

.peuple-main .tab-button-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: var(--fond-card);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 100%);
  font-family: 'oxanium', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texte-secondaire);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.peuple-main .tab-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.75;
}

.peuple-main .tab-label {
  color: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.peuple-main .tab-count {
  font-size: 10px;
  color: var(--texte-secondaire);
  opacity: 0;
  border: 1px solid rgba(255, 165, 0, 0.2);
  padding: 1px 6px;
  transition: opacity 0.2s ease;
}

.peuple-main .tab-button:hover .tab-label,
.peuple-main .tab-button:focus-visible .tab-label,
.peuple-main .tab-button.active .tab-label {
  opacity: 1;
}

.peuple-main .tab-button:hover .tab-count,
.peuple-main .tab-button:focus-visible .tab-count,
.peuple-main .tab-button.active .tab-count {
  opacity: 0.7;
}

.peuple-main .tab-button.active {
  background: var(--orange);
  box-shadow: 0 0 14px rgba(255, 165, 0, 0.12);
}

.peuple-main .tab-button.active .tab-button-inner {
  background: linear-gradient(135deg, rgba(255, 165, 0, 0.22), rgba(255, 165, 0, 0.04)), var(--fond-card);
  color: var(--texte-principal);
}

.peuple-main .tab-button.active .tab-icon {
  opacity: 1;
}

.peuple-main .tab-button.active .tab-count {
  color: var(--orange-light);
  opacity: 1;
}

/* Bascule d'onglet identique a l'ancien gabarit (.weapon-tab.active),
   simplement reskinnee : le tableau interne reutilise .peuple-table-*.
   `margin-top` retire (retour utilisateur du 2026-08-09) : l'ecart entre
   les onglets et le tableau donnait l'impression que le tableau n'etait
   pas associe aux onglets juste au-dessus. Les onglets restent "colles"
   directement contre le haut du tableau. */
.peuple-main .weapon-tab {
  display: none;
  margin-top: 0;
}

.peuple-main .weapon-tab.active {
  display: block;
}

.peuple-main .weapon-tab .peuple-table-wrap {
  max-width: 100%;
  margin-top: 0;
}

/* --- GRILLE DE FICHES ARMES (Concept 05 "Fiche complete") --- */
.peuple-weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.peuple-main .container-arme {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fond-section);
  border: 1px solid rgba(255, 165, 0, 0.25);
  clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.weapon-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--orange);
  border-style: solid;
  border-width: 0;
  z-index: 3;
}

/* Le coin haut-droit a ete retire (retour utilisateur du 2026-08-09) :
   il entrait en collision visuelle avec le motif FUI du bandeau de statut.
   Seul le coin bas-gauche subsiste. */
.weapon-corner--bl {
  bottom: 6px;
  left: 6px;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}

/* Barre de statut orange : sur le concept source ("CONCEPT 05 — FICHE
   COMPLETE"), remplacee ici par la Competence associee a la categorie
   de l'arme (COMP : ...), plus un petit motif FUI a droite reproduit
   depuis design/FUI traits.jpg ("Elements of HUD"). */
.peuple-weapon-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 16px 9px 24px;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.16), transparent);
  border-bottom: 1px solid rgba(255, 165, 0, 0.2);
}

.peuple-weapon-status-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.peuple-weapon-status .dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}

.peuple-weapon-status .txt {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--orange-light);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peuple-weapon-status .fui-trait {
  flex: 0 0 auto;
  color: var(--orange-light);
  opacity: 0.75;
}

.peuple-weapon-figure {
  position: relative;
  flex: 0 0 auto;
  height: 210px;
  overflow: hidden;
  background: var(--fond-inner);
}

.peuple-weapon-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
}

/* Photos d'armures (personnage complet, casque compris) : cadrees par le
   haut plutot que centrees, pour ne jamais couper le casque quand
   l'image est plus haute que large — demande explicite du 2026-08-09,
   scope a la page /liste_armures uniquement (pas aux photos d'armes, deja
   bien cadrees au centre). Leger zoom au survol de la carte, coherent
   avec le zoom Ken Burns deja utilise ailleurs sur les .peuple-split. */
.peuple-main--armures .peuple-weapon-figure img {
  object-position: top;
  transition: transform 0.6s ease;
}

.peuple-main--armures .container-arme:hover .peuple-weapon-figure img {
  transform: scale(1.06);
}

.peuple-weapon-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Decoratif uniquement (degrade + trame FUI) : sans ceci, ce calque
     couvre entierement l'image en dessous et intercepte le survol/clic
     avant qu'il n'atteigne le <img> — cause reelle du bug "curseur et
     clic ne repondent pas" sur les images d'armures (2026-08-09), le
     `cursor:zoom-in` sur [data-peuple-lightbox] etait bien applique a
     l'image mais jamais atteint par la souris. */
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 13, 10, 0) 45%, rgba(15, 13, 10, 0.96) 100%),
    repeating-linear-gradient(0deg, rgba(255, 165, 0, 0.05) 0px, rgba(255, 165, 0, 0.05) 1px, transparent 1px, transparent 5px);
}

.peuple-weapon-figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  /* Meme raison que .peuple-weapon-figure::after ci-dessus : ce bandeau
     texte est positionne par-dessus le bas de l'image, sans ceci il
     bloquerait le clic/hover sur la lightbox pour cette zone precise. */
  pointer-events: none;
}

.peuple-weapon-figcaption .wname {
  display: block;
  font-family: 'elnath';
  font-weight: 400;
  font-size: 22px;
  color: #f4f0e8;
  text-transform: uppercase;
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  line-height: 1.05;
}

.peuple-weapon-figcaption .wcat {
  display: block;
  font-size: 10px;
  color: var(--texte-secondaire);
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* Corps de carte en colonne flex : .peuple-weapon-ads/.peuple-weapon-craft
   sont les seuls blocs a grandir (flex:1) pour absorber la hauteur
   supplementaire imposee par le "stretch" par defaut de .peuple-weapon-grid
   (les cartes d'une meme ligne s'alignent sur la plus haute). Sans ca, une
   fiche au texte court se retrouvait avec ses boutons Favoris/Telecharger
   "remontes", loin du bas de la carte, et un vide non stylise en dessous
   (retour utilisateur du 2026-08-09, capture d'ecran a l'appui). En les
   laissant grandir, l'espace en trop reste a l'interieur d'un encadre
   sombre coherent avec le reste de la carte, et les boutons restent colles
   au bas grace a .peuple-weapon-price/.actions-arme qui suivent normalement. */
.peuple-weapon-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 20px 20px;
}

.peuple-weapon-stats {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin-bottom: 13px;
}

.peuple-weapon-stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255, 165, 0, 0.16);
}

.peuple-weapon-stats .l {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--orange-light);
  font-weight: 600;
}

.peuple-weapon-stats .v {
  font-size: 12.5px;
  color: var(--texte-principal);
  text-align: right;
}

.peuple-weapon-ads {
  flex: 1 1 auto;
  background: rgba(255, 165, 0, 0.07);
  border-left: 2px solid var(--orange);
  padding: 9px 13px 9px 15px;
  margin-bottom: 13px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.peuple-weapon-ads .l {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--orange-light);
  margin-bottom: 4px;
}

.peuple-weapon-ads .v {
  font-size: 12px;
  line-height: 1.5;
  color: var(--texte-secondaire);
}

.peuple-weapon-craft {
  flex: 1 1 auto;
  border: 1px solid rgba(255, 165, 0, 0.16);
  background: var(--fond-inner);
  padding: 11px 13px;
  margin-bottom: 16px;
}

.peuple-weapon-craft .l {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--texte-secondaire);
  opacity: 0.75;
  margin-bottom: 7px;
}

.peuple-weapon-craft .v {
  font-size: 12px;
  line-height: 1.6;
  color: var(--texte-secondaire);
}

.peuple-weapon-price {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
  margin-bottom: 14px;
}

.peuple-weapon-price::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent 70%);
}

.peuple-weapon-price .l {
  font-size: 11px;
  color: var(--texte-secondaire);
  letter-spacing: 0.08em;
}

.peuple-weapon-price .v {
  font-size: 20px;
  color: var(--orange);
  font-weight: 700;
}

.peuple-main .actions-arme {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
  .peuple-weapon-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ACCORDEON GENERIQUE (cf. fiches Explosifs a modeles multiples :
   Roquettes/Missiles/Torpilles, catalogue de plusieurs "Modele X"
   dans une seule fiche). Un texte deroule normalement depassait
   largement l'image 100vh du .peuple-split qui l'englobe (retour
   utilisateur du 2026-08-09, capture d'ecran a l'appui) ; chaque
   "Modele" devient donc un panneau repliable, un seul ouvert a la
   fois par fiche (voir le JS dans peuple-page.js, groupe cible via
   [data-peuple-accordion]). Composant generique, pas specifique aux
   explosifs : reutilisable par toute future page qui a besoin du
   meme systeme de repli.

   Technique d'animation : grid-template-rows 0fr -> 1fr sur le
   panneau, avec un calque interieur en overflow:hidden — permet une
   hauteur fluide en CSS pur, sans mesurer scrollHeight en JS (donc
   sans les a-coups d'un max-height approximatif). */
.peuple-accordion {
  margin: 26px 0 4px 0;
  border-top: 1px solid rgba(255, 165, 0, 0.18);
}

.peuple-accordion-item {
  border-bottom: 1px solid rgba(255, 165, 0, 0.18);
}

.peuple-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'elnath';
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--texte-principal);
  text-align: left;
  transition: color 0.2s ease;
}

.peuple-accordion-trigger:hover {
  color: var(--orange-light);
}

.peuple-accordion-item.is-open .peuple-accordion-trigger {
  color: var(--orange);
}

.peuple-accordion-icon {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
  color: var(--orange);
  transition: transform 0.3s ease;
}

.peuple-accordion-item.is-open .peuple-accordion-icon {
  transform: rotate(45deg);
}

.peuple-accordion-panel {
  overflow: hidden;
}

/* Anime max-height plutot que grid-template-rows (0fr/1fr), qui ignorait
   de facon peu fiable un plafond pose sur son enfant selon le moteur de
   rendu (barre de defilement visible une fraction de seconde puis
   disparaissant). Une transition max-height classique sur une valeur fixe
   n'a pas ce probleme. */
.peuple-accordion-panel-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.peuple-accordion-item.is-open .peuple-accordion-panel-inner {
  max-height: 100vh;
}

.peuple-accordion-panel p {
  margin: 0 0 16px 2px;
  padding-top: 2px;
}

/* ------------------------------------------------------------------------
   HISTORIQUE DU BUG "texte plus long que l'image 100vh" (page Explosifs,
   2026-08-09) — laisse en commentaire pour ne pas retenter les memes pistes :
   1) plafonner uniquement le panneau d'accordeon ouvert (max-height + scroll
      interne) : ne changeait rien, la cause reelle etait la somme intro +
      boutons + panneau + "Remarques", pas un panneau individuel trop long.
   2) plafonner toute la colonne .peuple-split-text a 100vh avec defilement
      interne : techniquement correct mais experience de scroll confuse
      (plusieurs zones scrollables imbriquees dans la page).
   3) reduire la taille du texte (police 14.5-15px) : attenuait le probleme
      sans le resoudre, et cassait la coherence typographique avec le reste
      du site.
   Solution retenue : effet "scrollytelling" (image collee en haut de l'ecran
   via position:sticky pendant que le texte defile normalement avec la
   page), inspire de design/Design Explosifs/Proposition design explosifs/
   Explosifs.dc.html (fiche "09 — Roquette", explicitement designee par
   l'utilisateur comme reference). Un seul defilement (celui de la page),
   l'image ne determine plus la hauteur de la ligne — c'est desormais le
   texte, quelle que soit sa longueur, qui la determine ; l'image reste
   "collee" tant que la ligne est a l'ecran puis se detache naturellement
   quand la ligne suivante commence.

   Classe generique .peuple-main--sticky-splits (renommee depuis
   .peuple-main--explosifs le 2026-08-09 des que la page Mutagenes en a eu
   besoin a son tour) : a ajouter sur le conteneur #contenu de toute page
   dont le catalogue de .peuple-split risque un texte plus long que l'image
   100vh (deja utilisee par `9_explosifs.html` et `7_mutagene.html`). Ne
   pas l'appliquer partout par prevention : seulement aux pages ou le
   probleme est reellement constate. */
.peuple-main--sticky-splits .peuple-split {
  align-items: flex-start;
}

.peuple-main--sticky-splits .peuple-split-media {
  position: sticky;
  top: 0;
}

.peuple-main--sticky-splits .peuple-split-text {
  justify-content: flex-start;
  padding-top: 90px;
  padding-bottom: 90px;
}

/* ============================================================
   LIGHTBOX GENERIQUE (clic sur une image marquee [data-peuple-
   lightbox] pour l'agrandir plein ecran, cf. photos d'armures sur
   /liste_armures, demande le 2026-08-09). Pas specifique aux
   armures : toute future page peut reutiliser le meme mecanisme en
   ajoutant l'attribut (+ optionnellement `data-lightbox-name`) sur
   une image et le meme bloc HTML #peuple-lightbox (voir le JS
   correspondant dans peuple-page.js).

   Le cadre (bandeau titre + image) est plafonne a 100vh au total : le
   bandeau titre reserve ~44px, l'image prend le reste
   (calc(100vh - 44px)) sans jamais depasser la largeur de l'ecran
   (max-width:100vw), aspect ratio preserve grace a
   `width:auto;height:auto;` combine aux deux plafonds. */
[data-peuple-lightbox] {
  cursor: zoom-in;
}

.peuple-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 7, 6, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.peuple-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.peuple-lightbox-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-width: 100vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Bandeau titre au-dessus de l'image, meme langage visuel que
   .peuple-weapon-status sur les cartes (point + libelle en majuscules). */
.peuple-lightbox-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 20px;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.22), rgba(255, 165, 0, 0.05)), var(--fond-card);
  border-bottom: 1px solid rgba(255, 165, 0, 0.3);
}

.peuple-lightbox-title .dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}

.peuple-lightbox-title .txt {
  font-family: 'oxanium', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-light);
}

.peuple-lightbox-img {
  display: block;
  flex: 0 1 auto;
  max-height: calc(100vh - 44px);
  max-width: 100vw;
  width: auto;
  height: auto;
}

/* Coins FUI (cf. AGENTS.md, section "Details FUI") : simple viseur
   sci-fi aux 4 angles du cadre, purement decoratif. */
.peuple-lightbox-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--orange);
  border-style: solid;
  border-width: 0;
  z-index: 2;
  pointer-events: none;
}

.peuple-lightbox-corner--tl {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.peuple-lightbox-corner--tr {
  top: -1px;
  right: -1px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.peuple-lightbox-corner--bl {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.peuple-lightbox-corner--br {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.peuple-lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(14, 12, 11, 0.85);
  border: 1px solid rgba(255, 165, 0, 0.35);
  color: var(--orange);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2001;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.peuple-lightbox-close:hover {
  border-color: var(--orange);
  color: var(--orange-light);
}

body.peuple-lightbox-open {
  overflow: hidden;
}