/* ============================================================
   THÈME POINT ZÉRO (V1 bac à sable) — ajouté par Claude, 2026-07-14
   Charte : violet ze.game · Roboto Slab (titres) · Poppins (texte)
   Réf. design : zegame-prototypes/point-zero-home (v3.0)
   ============================================================ */

@font-face { font-family: 'Roboto Slab'; src: url('/pz/fonts/RobotoSlab.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/pz/fonts/Poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/pz/fonts/Poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/pz/fonts/Poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --pz-violet: #82246f;
  --pz-violet-deep: #62044f;
  --pz-rose: rgb(207, 82, 121);
}

body { font-family: 'Poppins', system-ui, sans-serif; }
h1, h2, h3, .pz-omega-count { font-family: 'Roboto Slab', Georgia, serif; }

/* ---------- header ---------- */
.pz-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 14px;
  color: var(--pz-violet-deep);
  text-decoration: none;
}
.pz-brand:hover { color: var(--pz-violet); text-decoration: none; }
.pz-logo { width: 30px; height: auto; }

.omega-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Roboto Slab', Georgia, serif;
  border: 1px solid var(--pz-violet);
  color: var(--pz-violet-deep);
  border-radius: 99px;
  padding: 4px 10px;
  background: white;
}
.omega-chip img { width: 20px; height: auto; }

/* ---------- navigation principale ---------- */
#pz-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: white;
  border-top: 1px solid #dee2e6;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  z-index: 1030;
}
#pz-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  text-decoration: none;
  color: #6f6a63;
  flex: 1;
}
#pz-nav .nav-item.is-active { color: var(--pz-violet); font-weight: 700; }
#pz-nav .nav-item.is-disabled { opacity: .4; pointer-events: none; }
#pz-nav .nav-ico { font-size: 16px; line-height: 1; }

body.logged main { padding-bottom: 64px; }

@media (min-width: 768px) {
  #pz-nav {
    position: static;
    height: auto;
    border-top: none;
    border-bottom: 1px solid #dee2e6;
    justify-content: center;
    gap: 8px;
  }
  #pz-nav .nav-item { flex: none; flex-direction: row; gap: 6px; padding: 12px 14px; font-size: 13px; }
  body.logged main { padding-bottom: 0; }
}

/* ---------- accueil orchestrateur ---------- */
.pz-hero {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 14px;
  padding: 22px 18px;
  margin: 16px;
}
.pz-hero--seuil {
  background: radial-gradient(circle at 50% -70%, rgba(194,100,175,1) 0%, rgba(98,4,79,1) 70%, rgba(98,4,79,1) 100%);
  border: none;
  color: white;
  text-align: center;
  padding: 44px 22px;
}
.pz-hero h1 { font-size: 25px; margin-bottom: 8px; line-height: 1.25; }
.pz-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6f6a63;
  margin-bottom: 10px;
}
.pz-hero--seuil .pz-kicker { color: rgba(255,255,255,.75); }
.pz-lead { color: #6f6a63; margin-bottom: 18px; }
.pz-hero--seuil .pz-lead { color: rgba(255,255,255,.88); }
.pz-cta-meta { font-weight: 400; opacity: .75; font-size: 13px; margin-left: 8px; }

.pz-news {
  background: white;
  border: 1px solid #dee2e6;
  border-left: 4px solid #f2b705;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 16px 16px;
}
.pz-news-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #8a6a00;
  font-weight: 700;
  margin-bottom: 6px;
}
.pz-news-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--pz-violet-deep); }

.pz-progress-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6f6a63; margin: 0 16px 8px; }
.pz-progress-track { flex: 1; height: 6px; border-radius: 3px; background: #e4e1da; overflow: hidden; }
.pz-progress-fill { height: 100%; background: var(--pz-violet); }

.pz-omega-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 16px;
}
.pz-omega-card .lemniscate { width: 150px; flex: none; }
.pz-omega-card .lem-label { font-size: 13px; font-weight: 600; fill: #4a4640; }
.pz-omega-count { font-size: 26px; font-weight: 700; color: var(--pz-violet-deep); display: flex; align-items: center; gap: 8px; }
.pz-omega-count img { width: 26px; height: auto; }

/* F2 : Actions verrouillées (mode linéaire) */
.pz-locked { opacity: .45; }

/* ---------- stats expérience : NIVEAU / DURÉE / OMÉGA (cartes douces) ---------- */
.pz-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(20,9,15,.12);
}
.pz-stat-ico { color: var(--pz-violet); font-size: 17px; flex: none; }
.pz-stat-coin { width: 20px; height: auto; flex: none; }
.pz-stat-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pz-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: #9a938d; font-weight: 700; }
.pz-stat-value { font-size: 14px; font-weight: 700; color: var(--pz-violet-deep); white-space: nowrap; }
.pz-stat-stars { line-height: 1; }
.pz-stat-gauge { display: flex; align-items: center; gap: 6px; }
.pz-stat-gauge-bar { display: flex; gap: 2px; }
.pz-stat-gauge-seg { width: 6px; height: 10px; border-radius: 1px; background: #e4dfda; }
.pz-stat-gauge-seg.is-filled { background: var(--pz-violet); }

/* stats en flux normal (déplacées hors de l'overlay image) */
.pz-stats-row { max-width: 560px; }
@media (max-width: 767.98px) {
  .pz-stat { padding: 6px 8px; gap: 5px; }
  .pz-stat-value { font-size: 12px; }
  .pz-stat-ico { font-size: 15px; }
  .pz-stat .stars-preview { --star-size: 0.55rem !important; }
  .pz-stat-gauge-seg { width: 5px; height: 8px; }
}


/* ---------- stats v2 : chips visibles (fond teinté + bordure), coin calibré ---------- */
.pz-stats-row { max-width: none; }
.pz-stat {
  background: #f8f4f7;
  border: 1px solid #e8dde5;
  box-shadow: none;
  min-width: 122px;
}
.pz-stat-coin { height: 15px; width: auto; }
@media (max-width: 767.98px) {
  .pz-stat { min-width: 104px; }
}

/* mobile : forcer les 3 chips sur une ligne, largeur partagée */
@media (max-width: 767.98px) {
  .pz-stats-row { gap: 8px !important; flex-wrap: nowrap !important; }
  .pz-stat { min-width: 0; flex: 1 1 0; padding: 6px; }
}

/* harmonisation taille de police des chips stats avec le reste du contenu */
.pz-stat { padding: 9px 13px; }
.pz-stat-ico { font-size: 19px; }
.pz-stat-coin { height: 16px; }
.pz-stat-label { font-size: 10px; }
.pz-stat-value { font-size: 15px; }
@media (max-width: 767.98px) {
  .pz-stat { padding: 7px 8px; }
  .pz-stat-value { font-size: 13px; }
  .pz-stat-ico { font-size: 16px; }
}

/* ---------- Profil Point Zéro ---------- */
.pz-profile { padding: 0 16px; }
@media (min-width: 768px) { .pz-profile { padding: 0; } }
.lem-label { font-size: 13px; font-weight: 600; fill: #4a4640; }

.pz-power-row { padding: 12px 0; border-bottom: 1px solid #f1ecf0; }
.pz-power-row:last-child { border-bottom: none; }
.pz-power-row.is-empty { opacity: .45; }
.pz-power-head { display: flex; justify-content: space-between; align-items: baseline; }
.pz-power-name { font-weight: 700; color: var(--pz-violet-deep); }
.pz-power-omega { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--pz-violet-deep); }
.pz-power-scale {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #5f4b57 0%, #ece4ea 50%, #e6a90a 100%);
  margin: 24px 6px 8px;
}
.pz-power-pole {
  position: absolute; top: -18px; font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em; color: #9a938d; font-weight: 700;
}
.pz-power-pole.left { left: 0; }
.pz-power-pole.right { right: 0; }
.pz-power-zero {
  position: absolute; left: 50%; top: -4px; width: 2px; height: 16px;
  background: #14090f; transform: translateX(-50%); border-radius: 1px;
}
.pz-power-marker {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--pz-violet);
  transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(20,9,15,.25);
}
.pz-graine { transition: box-shadow .15s; }


/* ---------- moteur vivant (profil) ---------- */
.pz-moteur svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }


/* ---------- puissances : mini-lemniscates ---------- */
.pz-puissance-row { margin-bottom: 16px; }
.pz-puissance-row:last-child { margin-bottom: 4px; }
.pz-puissance-name { font-weight: 600; font-size: 15px; color: #3d2c38; margin-bottom: 6px; }
.pz-puissance-line { display: flex; align-items: center; gap: 14px; }
.pz-puissance-line svg { flex: 1 1 auto; min-width: 0; display: block; height: auto; }
.pz-puissance-cap { flex: 0 0 128px; text-align: center; }
.pz-puissance-cap .cap-omega { font-weight: 700; font-size: 15px; color: #c08c08;
  display: flex; align-items: center; gap: 5px; justify-content: center; }
.pz-puissance-cap .cap-omega.is-zero { color: #b9a9b4; }
.pz-puissance-cap .cap-none { font-size: 12.5px; color: #b9a9b4; margin-top: 3px; }
@media (max-width: 520px) {
  .pz-puissance-line { gap: 10px; }
  .pz-puissance-cap { flex-basis: 100px; }
  .pz-puissance-cap .cap-omega { font-size: 14px; }
  .pz-puissance-cap .cap-none { font-size: 11.5px; }
}


/* ---------- moteur caps ---------- */
.pz-puissance-cap .cap-set{font-size:11.5px;color:var(--pz-violet-deep);font-weight:600;
  display:flex;align-items:center;gap:4px;white-space:nowrap;line-height:1.2}
.pz-puissance-cap .cap-set .cap-sym{font-size:13px}
.pz-puissance-cap .cap-none.is-muted{opacity:.4}
.pz-caps-adjust{border-top:1px solid rgba(0,0,0,.08);padding-top:12px}
.pz-caps-adjust summary{cursor:pointer;font-weight:600;color:var(--pz-violet-deep);font-size:14px;padding:6px 0;list-style:none}
.pz-caps-adjust summary::-webkit-details-marker{display:none}
.pz-caps-adjust summary::before{content:"⚙ ";opacity:.7}


/* ---------- caps axes ---------- */
.pz-puissance-cap .cap-set.is-acquis{color:#7d8a80;font-weight:500}


/* ---------- etat par puissance ---------- */
.pz-puissance-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.pz-etat-chip{font-family:"Poppins",sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 9px;border-radius:999px;line-height:1.6}
.pz-etat-chip.etat-bloque{background:#f4e0dd;color:#a23a2a}
.pz-etat-chip.etat-intermediaire{background:#fdf1dc;color:#a9781e}
.pz-etat-chip.etat-libre{background:#dcefe2;color:#2f7d54}


/* ---------- carte-couverture d'expérience (Lot A) ----------
   Ajouté ici (statique, servi sans compilation) et non dans application.scss/cover_card.scss :
   dartsass-rails est en groupe :development dans le Gemfile et absent du bundle de prod
   (BUNDLE_WITHOUT=development:test), donc le SCSS ne peut pas être recompilé sur ce serveur
   sans installer un toolchain de build. cover_card.scss reste la source de référence pour
   un futur vrai déploiement Capistrano (qui, lui, précompile) ; en attendant, ces règles sont
   la copie qui produit l'effet visuel réel. #top-bar n'est pas position:fixed (défile avec la
   page) : pas de calc(100dvh - ...), la scène cover utilise un aspect-ratio. */
/* Bandeau "Retour a <parcours>" : back_to (mathieu_core) impose mb-3 et un btn-sm
   genereux, soit ~60px avant la carte. La gem vient d'un depot tiers installe par
   bundler, on resserre donc depuis l'appli via la classe passee a l'appel. */
.pz-back{margin-top:.5rem !important;margin-bottom:.25rem !important}
.pz-back .btn{padding-top:.1rem;padding-bottom:.1rem}

/* "Chapitre n" : pastille posee sur la couverture (et non plus une ligne de texte
   au-dessus du titre, qui repoussait le CTA vers le bas). Fond opaque plutot que
   simple ombre : l'iconotheque est heterogene, le coin haut-gauche peut etre clair. */
.cover-card__cover{position:relative}
.cover-card__eyebrow{
  position:absolute;
  top:.6rem;
  left:.6rem;
  z-index:1;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(26,16,46,.66);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  padding:.28rem .7rem;
  border-radius:1rem;
  margin:0;
}

/* Statut de validation : meme traitement que l'eyebrow (pastille posee sur la
   couverture), a droite plutot qu'a gauche -- remplace la ligne "Completed" /
   "Pending review" qui occupait ~50px au sommet de la colonne de texte. */
.cover-card__status-pill{
  position:absolute;
  top:.6rem;
  right:.6rem;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#fff;
  padding:.28rem .7rem;
  border-radius:1rem;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.cover-card__status-pill i{font-size:.85rem}
.cover-card__status-pill--completed{background:rgba(38,120,72,.75)}
.cover-card__status-pill--pending{background:rgba(26,16,46,.66)}

.cover-scene{position:relative;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,var(--pz-violet),var(--pz-rose))}
.cover-scene--empty{background:linear-gradient(135deg,var(--pz-violet),var(--pz-rose))}
.cover-scene__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(24px) brightness(.55);transform:scale(1.15)}
.cover-scene__fg{position:relative;display:block;width:100%;height:100%;object-fit:contain}

.cover-card--full .cover-scene{aspect-ratio:16/9}
/* ---------- Page de chapitre : encart de conte moderne ----------
   Boris, 2026-07-29 : tons sable/ocre, illustration a gauche en grand medaillon,
   filet ornemental en separateur avec le titre. Le sable est plus soutenu ici que
   sur les accordeons du parcours (juges trop marques) : c'est UN panneau sur une
   page dediee, pas trois blocs empiles — il se lit comme un parchemin, pas comme
   un surlignage. */
.chapitre-encart{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#faf4e8,#f4ebd7);
  border:1px solid #e7d9b6; border-radius:18px;
  padding:22px 22px 20px;
  box-shadow:0 2px 16px rgba(122,90,30,.08);
}
/* Chiffre du chapitre en filigrane, facon page de livre. Purement decoratif :
   il vient d'un data-attribut, jamais lu par un lecteur d'ecran, et n'entre
   dans aucun flux (pointer-events:none). */
.chapitre-encart::before{
  content:attr(data-numero); position:absolute; top:-26px; right:10px;
  font-family:'Roboto Slab',Georgia,serif; font-size:150px; line-height:1;
  color:#8a6a2f; opacity:.07; pointer-events:none; user-select:none;
}

/* Tete : le numero en surtitre discret, le mouvement en titre, le fil en
   sous-titre — meme hierarchie que la page parcours, ou « Chapitre n » n'est
   qu'un nom technique et le joueur lit d'abord le mouvement. */
.chapitre-tete{position:relative;margin-bottom:18px}
.chapitre-numero{margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#7d5f25}
.chapitre-titre{margin:2px 0 0;font-family:'Roboto Slab',Georgia,serif;
  font-size:27px;line-height:1.15;color:#6b4f1c}
.chapitre-fil{margin:4px 0 0;font-size:15px;font-style:italic;color:#6b5b3f}

/* Pied : l'enjeu du chapitre puis la voix du narrateur, separes du recit par un
   filet tres leger plutot qu'un second encadre. */
.chapitre-pied{position:relative;margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(184,147,63,.28)}
.chapitre-omega{display:flex;align-items:center;gap:8px;margin:0;
  font-size:14px;font-weight:700;color:#6b4f1c}
.chapitre-omega img{height:20px;width:auto}
.chapitre-voix{margin:8px 0 0;font-size:14px;line-height:1.5;font-style:italic;color:#6b5b3f}
/* Filet ornemental : deux traits qui s'effacent vers les bords, un losange au
   centre. Purement decoratif -> aria-hidden dans la vue. */
.chapitre-filet{display:flex;align-items:center;gap:14px;margin:0 0 20px;position:relative}
.chapitre-filet::before,.chapitre-filet::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,#d3bd8c,transparent);
}
.chapitre-filet-orn{color:#b8933f;font-size:14px;line-height:1}

.chapitre-corps{position:relative;display:flex;gap:26px;align-items:flex-start}
.chapitre-medaillon{flex:none}
/* Taille imposee ici, et surtout PAS via la classe .responsive-image du CSS
   compile : celle-ci force width/height 40px sous 992 px, ce qui reduisait le
   medaillon a une pastille sur mobile. */
.chapitre-medaillon img{width:230px;height:230px;border:4px solid #fffdf8;
  box-shadow:0 8px 24px rgba(122,90,30,.22)}
.chapitre-texte{flex:1;min-width:0;color:#5a4a33;font-size:15px;line-height:1.62}
.chapitre-texte p{margin:0 0 12px}
.chapitre-texte p:last-child{margin-bottom:0}
/* Lettrine : ::first-letter ignore les proprietes non typographiques, d'ou le
   float plutot qu'une grille. Ocre profond plutot que violet — la lettrine
   appartient a l'encart, pas a la chrome de l'appli. */
.chapitre-texte > p:first-of-type::first-letter{
  float:left; font-family:'Roboto Slab',Georgia,serif; font-size:3.5em;
  line-height:.78; padding:6px 10px 0 0; color:#8a6a2f;
}
@media (max-width:639.98px){
  .chapitre-corps{flex-direction:column;align-items:center}
  .chapitre-texte{width:100%}
  .chapitre-encart{padding:18px 16px 18px}
  .chapitre-medaillon img{width:180px;height:180px}
  .chapitre-titre{font-size:23px}
  .chapitre-encart::before{font-size:110px;top:-18px}
}
.cover-card.pz-locked .cover-scene{filter:grayscale(.6)}

.cover-card__body{padding:1rem}
.cover-card__status{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.15rem .6rem;border-radius:1rem;margin-bottom:.4rem}
.cover-card__status--optional{background:var(--bg-body,#f4f5f6);color:var(--pz-violet-deep);border:1px solid var(--pz-violet)}
.cover-card__title{margin-bottom:.3rem;--n:2}
.cover-card__optional-note{display:block;color:#6c757d;margin-bottom:.5rem}
.cover-card__hook{color:#495057;margin-bottom:.75rem}
.cover-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:.85rem;color:#6c757d;margin-bottom:.5rem}
.cover-card__meta .cover-card__omega{display:flex;align-items:center;gap:.3rem;font-weight:700;color:var(--pz-violet-deep)}
.cover-card__meta .cover-card__omega img{height:15px;width:auto}
.cover-card__tags{font-size:.8rem;color:#adb5bd;margin-bottom:.75rem}
.cover-card__details-link{display:inline-block;margin-top:.25rem;font-weight:700;color:var(--pz-violet);text-decoration:none}
.cover-card__details-link:hover{text-decoration:underline}

/* ---------- variante video-first ----------
   La couverture devient une affiche video : bouton de lecture central sur le poster, et
   lecture immersive dans un overlay (public/pz/video.js). */
.cover-card__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:0;
  background:rgba(26,16,46,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;cursor:pointer;
  backdrop-filter:blur(6px);transition:transform .15s ease,background .15s ease;
}
.cover-card__play:hover{background:var(--pz-violet);transform:translate(-50%,-50%) scale(1.06)}
.cover-card__play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cover-card__resume{display:block;font-size:.8rem;color:#8b8b8b;margin-top:.15rem}

#pz-video-overlay{
  position:fixed;inset:0;z-index:1080;background:rgba(8,4,14,.94);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
/* En plein ecran natif (Fullscreen API), le cadre occupe l'ecran physique : coins
   arrondis, marge et fond de secours n'ont plus lieu d'etre. */
#pz-video-overlay:fullscreen{padding:0;background:#000}
#pz-video-overlay:-webkit-full-screen{padding:0;background:#000}
#pz-video-overlay:fullscreen .pz-video-stage,
#pz-video-overlay:-webkit-full-screen .pz-video-stage{max-width:100%}
#pz-video-overlay[hidden]{display:none}
body.pz-video-open{overflow:hidden}
.pz-video-close{
  position:absolute;top:12px;right:16px;z-index:2;
  background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.8;
}
.pz-video-close:hover{opacity:1}
.pz-video-stage{position:relative;width:100%;max-width:1100px}
.pz-video-frame{position:relative;aspect-ratio:16/9;background:#000}
.pz-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Recouvre integralement le lecteur : c'est ce qui empeche la grille de suggestions
   YouTube d'apparaitre a la fin du film. */
.pz-video-end{
  position:absolute;inset:0;z-index:3;background:rgba(8,4,14,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;color:#fff;
}
.pz-video-end[hidden]{display:none}
.pz-video-end__title{font-weight:700;font-size:1.35rem;margin:0}
.pz-video-end__text{margin:0;opacity:.85;max-width:34rem}

/* Action secondaire et destructrice ("Refaire cette experience") : volontairement pas un
   bouton, pour ne pas concurrencer le CTA principal. */
.cover-card__secondary-action{display:inline-block;font-size:.85rem;color:#8b8b8b;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cover-card__secondary-action:hover{color:var(--pz-violet-deep)}

.cover-card--compact{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:1rem;color:inherit}
.cover-card--compact .cover-card__medallion{flex:none}
.cover-card--compact .cover-card__body{padding:0;flex:1;min-width:0}
.cover-card--compact .cover-card__title{margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover-card--compact .cover-card__hook{font-size:.85rem;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover-card--compact .cover-card__meta{margin-bottom:0;flex-wrap:nowrap}
.cover-card--compact .cover-card__lock{margin-left:auto}
.cover-card--compact > i{margin-left:auto}

/* Desktop : affiche horizontale occupant toute la largeur du panneau. La version
   precedente etait un flex a max-width:720px dans un panneau ~1140px, ce qui tassait
   l'image et le texte a gauche. Grille plutot que flex, aussi parce que l'eyebrow
   "Chapitre n" est un frere direct de la carte : en flex il devenait une colonne etroite
   a gauche de l'image, alors qu'il appartient a la colonne de texte, au-dessus du titre. */
@media (min-width: 768px) {
  .cover-card--full{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch;
    max-width:none;
  }
  .cover-card--full .cover-card__cover{min-height:260px}
  .cover-card--full .cover-scene{aspect-ratio:auto;height:100%}
  .cover-card--full .cover-card__body{align-self:flex-start;padding:1.5rem 1.75rem}
  /* #btn-ended vient de l'ancien en-tete plein cadre et centre tout son contenu ; dans une
     colonne de texte alignee a gauche, le CTA suit le texte. */
  .cover-card--full .cover-card__body #btn-ended .justify-content-center{justify-content:flex-start !important}
  .cover-card--full .cover-card__body #btn-ended .align-items-center{align-items:flex-start !important}
}

@media (min-width: 992px) {
  .cover-card--full{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .cover-card--full .cover-card__body{padding:1.75rem 2rem}
}

/* #btn-ended (challenges/_action_button) suppose un fond dégradé violet (texte blanc,
   contours clairs) — hérité de l'ancien header. Dans le cover-card, il est sur fond blanc :
   surcharge de contraste, ciblée à ce seul contexte pour ne rien changer ailleurs (ex. sur
   la page journey où #btn-ended reste sur le dégradé violet d'origine). */
.cover-card__body #btn-ended .text-white{color:var(--pz-violet-deep) !important}
.cover-card__body #btn-ended .btn-outline-light{color:var(--pz-violet-deep) !important;border-color:var(--pz-violet) !important}
.cover-card__body #btn-ended .btn-outline-light:hover{background:var(--pz-violet) !important;color:#fff !important}

/* application.css compilé (assets précompilés, jamais reconstruit depuis — dartsass-rails est
   en groupe :development, absent du bundle de prod) contient encore l'ancienne règle
   "@media(max-width:991.98px){#challenge-page #btn-ended{position:absolute;bottom:10px;...}}"
   héritée de l'en-tête plein-cadre disparu. Neutralisée ici plutôt qu'en repoussant un vrai
   déploiement Capistrano : sans ce reset, le bouton d'action sort du flux et devient invisible
   sous 992px de large (= la quasi-totalité des viewports testés). */
/* Barre Precedente/Suivante, juste sous la couverture (elle vivait avant tout en bas
   de fiche, apres Ressources complementaires -- hors champ sans scroller toute la page). */
.pz-around-nav{padding-top:.75rem;padding-bottom:.75rem;border-bottom:1px solid #e9ecef}

#challenge-page .cover-card__body #btn-ended,
#challenge-page .cover-card__body #cp--header-btn{
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  z-index: auto !important;
}

/* "Voir les details" restait a 24px du bouton d'action (mb-2/mb-3 Bootstrap du dernier
   bloc de #btn-ended, 8-16px selon la branche, + margin-top propre du lien, 8px) : le
   dernier bloc rendu par action_button varie selon l'etat (Restart, Graine de Recit,
   passer/reprendre F2b...) mais porte toujours une classe mb-* en fin de course -- on la
   plafonne plutot que de la neutraliser pour ne pas coller le lien au bouton. Le
   margin-top du lien est reduit a .25rem plus haut. Mesure a 1440px : 24px -> 12px. */
.cover-card__body #btn-ended > *:last-child{margin-bottom:.5rem !important}


/* Cartes explicatives Puissance (challenges/_puissance_card, fiche detaillee) --
   remplacent le badge technique "PUISSANCE : ASPECT / framework - derived_framework".
   Sur maquette Boris (2026-07-26) : plus d'axe graphique (libelle de polarite en
   texte), phrase courte ajoutee, cartes en grille pleine largeur plutot qu'en
   flex-wrap a largeur fixe -- auto-fit s'adapte au nombre reel de competences
   (3 aujourd'hui sur toutes les experiences du Monde 0, mais pas fige a 3). */
.puissance-card-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.puissance-card{border:1px solid #dee2e6;border-radius:1rem;padding:.85rem 1rem;text-align:left}
.puissance-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;margin-bottom:.15rem}
.puissance-card__name{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pz-violet-deep)}
.puissance-card__pole{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#adb5bd;white-space:nowrap}
.puissance-card__aspect{font-weight:700;font-size:1.1rem;margin-bottom:.3rem}
.puissance-card__desc{font-size:.85rem;color:#6c757d;margin-bottom:.7rem;line-height:1.35}
.puissance-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.puissance-card__omega{display:flex;align-items:center;gap:.25rem;font-weight:700;font-size:.8rem;color:var(--pz-violet-deep)}
.puissance-card__omega img{height:13px;width:auto}
.puissance-card__link{color:var(--pz-violet);text-decoration:none;font-weight:600;font-size:.76rem;white-space:nowrap}
.puissance-card__link:hover{text-decoration:underline}
.puissance-card__guard{max-width:32rem;margin-left:auto;margin-right:auto}
/* ---------- Page parcours : la carte du voyage (jp-*) ---------- */
#journey-page { overflow-x: hidden; }
.jp-header { display: flex; gap: 14px; align-items: center; }
.jp-header-media { flex: none; }
.jp-header-text { min-width: 0; color: #fff; }
.jp-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin: 0 0 2px; }
.jp-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: #fff; overflow-wrap: anywhere; }
.jp-promesse { margin: 0; font-size: 14px; line-height: 1.45; opacity: .95; white-space: pre-line; }

.jp-mouvements { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; }
.jp-mouvement { flex: 1 1 150px; min-width: 0; border-radius: 12px; padding: 9px 12px;
  background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid transparent; }
.jp-mouvement--accompli { background: rgba(255,255,255,.2); }
.jp-mouvement--courant { border-color: #fff; background: rgba(255,255,255,.26); }
.jp-mouvement--a_venir { opacity: .78; }
.jp-mouvement-nom { display: block; font-weight: 700; font-size: 13px; }
.jp-mouvement-fil { display: block; font-size: 12px; opacity: .9; overflow-wrap: anywhere; }
.jp-mouvement-etat { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .85; margin-top: 3px; }

.jp-next, .jp-counts, .jp-path, .jp-about { padding: 0 16px; }
.jp-next { padding-top: 18px; }
.jp-section-title { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #9a938d; font-weight: 700; margin: 0 0 10px; }
.jp-next-cta { display: flex; justify-content: center; margin-top: 12px; }
/* Bandeau « Prochaine étape » : horizontal et actionnable, volontairement d'une
   autre famille visuelle que les cartes de la liste — c'est ce qui l'empêche de
   se lire comme un doublon de la carte du chapitre courant. */
.jp-next-banner { display: flex; align-items: center; gap: 14px; margin-top: 10px;
  padding: 12px 14px; background: #fff; border: 1px solid #dee2e6;
  border-left: 4px solid var(--pz-violet); border-radius: 12px;
  text-decoration: none; color: inherit; }
.jp-next-banner:hover { text-decoration: none; color: inherit; border-color: var(--pz-violet); }
.jp-next-banner:focus-visible { outline: 2px solid var(--pz-violet); outline-offset: 2px; }
.jp-next-medaillon { flex: none; }
.jp-next-corps { flex: 1; min-width: 0; }
.jp-next-titre { margin: 0; font-size: 16px; font-weight: 700; color: var(--pz-violet-deep); }
.jp-next-meta { margin: 2px 0 0; font-size: 12.5px; color: #7d7369; }
.jp-next-sep { opacity: .45; margin: 0 5px; }
.jp-next-action { flex: none; font-weight: 700; font-size: 14px; color: var(--pz-violet); white-space: nowrap; }
@media (max-width: 419.98px) {
  .jp-next-banner { flex-wrap: wrap; }
  .jp-next-action { width: 100%; text-align: right; }
}
.jp-next-empty { font-size: 14px; color: var(--pz-violet-deep); margin: 0; }

/* La voix du parcours : une phrase, pas un encadré d'alerte. Le liseret reprend
   le moutarde des chapitres pour signaler « ici, c'est le récit qui parle ». */
.jp-voix { padding: 18px 16px 0; }
.jp-voix-texte { margin: 0; padding: 12px 0 12px 14px; border-left: 4px solid #f2b705;
  font-size: 15px; line-height: 1.5; color: #4a4540; font-style: italic; }

/* Jalons du header : la zone cliquable couvre tout le jalon, pas juste le texte. */
.jp-mouvement-lien { display: block; color: inherit; text-decoration: none; }
.jp-mouvement-lien:hover, .jp-mouvement-lien:focus { color: inherit; text-decoration: none; }
.jp-mouvement-lien:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
.jp-mouvement--seuil .jp-mouvement-nom { font-style: italic; }
.jp-chapitre-sep { opacity: .45; margin: 0 5px; }
/* Sommaire de chapitre : vignette + colonne de texte. min-width:0 sur la colonne
   pour que les titres longs se coupent au lieu de pousser la vignette. */
.jp-chapitre-entete { display: flex; align-items: center; gap: 14px; }
.jp-chapitre-entete-texte { flex: 1; min-width: 0; }
.jp-chapitre-vignette { flex: none; }

.jp-counts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 4px; }
.jp-count { margin: 0; font-size: 13.5px; color: #3f3a36; }
.jp-count strong { color: var(--pz-violet-deep); }
.jp-count-sep { opacity: .45; margin: 0 4px; }

.jp-path { padding-top: 18px; padding-bottom: 6px; }
.jp-chapitre-titre { font-size: 18px; font-weight: 700; margin: 0; color: var(--pz-violet-deep); }
.jp-chapitre--a_venir .jp-chapitre-titre { color: #6d665f; }
.jp-chapitre-fil { margin: 2px 0 0; font-size: 13px; color: #7d7369; }

.jp-about { padding-top: 10px; padding-bottom: 18px; }
.jp-details { border-top: 1px solid #e6e0d8; padding: 10px 0; }
.jp-details summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--pz-violet-deep); }
.jp-details-body { padding-top: 10px; font-size: 14px; overflow-wrap: anywhere; }
.jp-details-intro { font-size: 13px; color: #7d7369; }
.jp-tags { font-size: 12px; color: #9a938d; }
.jp-skills { list-style: none; padding: 0; margin: 0; }
.jp-skills li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #efeae3; font-size: 13px; }
.jp-skills li:last-child { border-bottom: 0; }
.jp-skill-nom { min-width: 0; overflow-wrap: anywhere; }
.jp-skill-pts { flex: none; font-weight: 700; color: var(--pz-violet-deep); }

/* États en toutes lettres sur les cartes compactes */
.cover-card__state { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; }
.cover-card__state--done { color: #2e7d4f; }
.cover-card__state--next { color: var(--pz-violet); }
.cover-card__state--resume { color: #b4761a; }
.cover-card__state--pending { color: #b4761a; }
.cover-card__state--locked { color: #6d665f; }
.cover-card__state--skipped { color: #7d7369; }
.cover-card__state--open { color: #6d665f; }

@media (max-width: 575.98px) {
  .jp-title { font-size: 20px; }
  .jp-mouvement { flex: 1 1 100%; }
  .jp-next, .jp-counts, .jp-path, .jp-about { padding-left: 12px; padding-right: 12px; }
  .cover-card__state { white-space: normal; }
}

/* ---------- Page parcours, lot P1 : chapitres en accordéon + seuil ---------- */
/* Meme traitement que .pz-news (« À la une », accueil) : fond blanc, bordure
   grise fine, liseret moutarde a gauche. La carte porte desormais le <details>
   LUI-MEME (Boris, 2026-07-29) : sommaire, texture ET liste d'experiences vivent
   dedans, ce qui montre que les experiences appartiennent au chapitre au lieu de
   flotter en dessous. Le liseret court donc sur toute la hauteur du chapitre. */
.jp-chapitre { margin: 0 0 14px; background: #fff; border: 1px solid #dee2e6;
  border-left: 4px solid #f2b705; border-radius: 12px; overflow: hidden; }
.jp-chapitre-summary { cursor: pointer; list-style: none; position: relative;
  padding: 14px 54px 14px 16px; }
.jp-chapitre-summary::-webkit-details-marker { display: none; }
/* Chevron plus visible (demande de Boris, 2026-07-28) : pastille ronde, plus
   grande, contrastee, positionnee en absolu pour ne jamais chevaucher le texte
   meme quand le titre ou le fil passe sur plusieurs lignes. */
.jp-chapitre-summary::after {
  content: "▾";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pz-violet);
  color: #fff;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  transition: transform .15s;
}
.jp-chapitre[open] > .jp-chapitre-summary::after { transform: rotate(-180deg); }
.jp-chapitre-compte { display: inline-block; margin-top: 2px; font-size: 12px; color: #7d7369; }
/* Texture et liste n'ont plus de cadre propre : elles sont DANS la carte. */
.jp-chapitre-texture { margin: 0; padding: 0 16px 14px; font-size: 14px; line-height: 1.55;
  color: #4a4540; }
.jp-chapitre-texture p { margin: 0 0 10px; }
.jp-chapitre-texture p:last-child { margin-bottom: 0; }

/* Experiences indentees, avec un filet vertical qui les rattache visiblement au
   chapitre — l'indentation seule se lit mal quand les cartes sont larges. */
.jp-chapitre-liste { position: relative; margin: 0; padding: 14px 14px 16px 34px;
  border-top: 1px solid #f1ece2; }
.jp-chapitre-liste::before { content: ""; position: absolute; left: 18px; top: 18px;
  bottom: 20px; width: 2px; border-radius: 1px; background: #ebe3d3; }

/* Surtitre « Chapitre X ». Ocre assez sombre pour rester lisible sur blanc
   (5.3:1) — le #b8933f de la page de chapitre, sur fond sable, tomberait ici
   sous le minimum. */
.jp-chapitre-numero { margin: 0 0 1px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: #8a6a2f; }
.jp-chapitre--a_venir .jp-chapitre-numero { color: #857c70; }

@media (max-width: 575.98px) {
  .jp-chapitre-liste { padding-left: 26px; }
  .jp-chapitre-liste::before { left: 12px; }
}

.jp-seuil { padding: 22px 16px 6px; }
.jp-seuil-card { border: 2px solid var(--pz-violet); border-radius: 14px; padding: 16px; background: #faf7fb; }
.jp-seuil-card--locked { opacity: .72; border-style: dashed; }
.jp-seuil-titre { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--pz-violet-deep); }
.jp-seuil-hook { margin: 0 0 10px; font-size: 13.5px; color: #3f3a36; }
.jp-seuil-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #7d7369; margin-bottom: 12px; }
.jp-seuil-omega { display: inline-flex; align-items: center; gap: 4px; }
.jp-seuil-omega img { width: 13px; height: auto; }
.jp-seuil-etat { margin: 0; font-size: 13px; color: #7d7369; }
.jp-seuil-prep { margin: 10px 0 0; font-size: 12.5px; color: #7d7369; }
.jp-seuil-prep-note { display: block; opacity: .85; margin-top: 2px; }

/* Suivante verrouillee : meme emplacement que le lien actif, mais non cliquable
   et visuellement en retrait -- evite la redirection silencieuse vers la page
   parcours (signale par Boris, 2026-07-28). */
.pz-around-locked{color:#9a938d;cursor:not-allowed}
.pz-around-locked .icon-lock{margin-left:.35rem}

/* ---------- Ressourcerie V1 (docs/vision/ressourcerie-v1-principe-affichage.md) ----------
   Bibliotheque a rayons horizontaux scrollables. Deux registres : les fiches PZ
   reutilisent l'encart sable des chapitres (.chapitre-encart et consorts, deja definis
   plus haut) ; les fiches non-PZ ont un gabarit documentaire neutre a elles. */

.res-filtre { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; }
.res-filtre-label { margin: 0; font-size: 13px; color: #7d7369; }
.res-filtre select { border: 1px solid #dee2e6; border-radius: 8px; padding: 6px 10px; font-size: 13px; }

.res-section-titre { font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: #6d665f; margin: 28px 0 4px; }
.res-section-titre:first-child { margin-top: 0; }
.res-section-titre--fiche { margin-top: 0; }

.res-rayon { margin-top: 14px; }
.res-rayon-titre { font-size: 17px; font-weight: 700; color: var(--pz-violet-deep); margin: 0 0 10px; }

/* L'etagere : scroll horizontal au doigt, ~2.5 cartes visibles a 375px. Pas de fleches
   de controle en V1 -- l'affordance de scroll est deja donnee par le debordement. */
.res-etagere { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.res-etagere::-webkit-scrollbar { height: 6px; }
.res-etagere::-webkit-scrollbar-thumb { background: #e6e0d8; border-radius: 3px; }

.res-carte { flex: none; width: 132px; scroll-snap-align: start; text-decoration: none;
  color: inherit; display: block; }
.res-carte:hover, .res-carte:focus { color: inherit; text-decoration: none; }
.res-carte-couverture { aspect-ratio: 2/3; border-radius: 10px; background-size: cover;
  background-position: center; box-shadow: 0 3px 10px rgba(0,0,0,.14); }
/* Repli neutre pour une fiche PZ sans illustration liee, ou une non-PZ sans image WP. */
.res-carte-couverture--vide { background: linear-gradient(135deg, var(--pz-violet), var(--pz-rose)); }

/* Cartes non-PZ : plus larges (le format paysage de l'image l'impose), cadre sable
   avec liseret autour de l'image entiere -- jamais de recadrage qui coupe un titre
   ou un auteur/annee inscrits dans l'image. Les cartes PZ (couvertures 2:3 voulues)
   ne sont pas concernees : la portee de chaque regle est limitee a --exterieure. */
/* Sous-titre d'une fiche PZ : la these, sous le titre court. Italique et non gras
   pour rester en retrait du titre sans perdre en lisibilite. */
.chapitre-sous-titre { margin: 12px 0 0; font-size: 15.5px; font-style: italic;
  line-height: 1.4; color: #6b6055; }

.res-carte--exterieure { width: 180px; }
/* Medaillon dedie (4:5, sans texte incruste) : redevient une carte etroite comme
   les cartes PZ -- placee APRES la regle paysage ci-dessus pour la surclasser a
   specificite egale (une classe chacune). */
.res-carte--medaillon { width: 132px; }
.res-carte--exterieure.res-carte--medaillon .res-carte-couverture { aspect-ratio: 1024/1280;
  border-radius: 10px; background-size: cover; background-position: center; border: none;
  padding: 0; display: block; }
.res-carte--exterieure .res-carte-couverture { aspect-ratio: auto; border-radius: 10px;
  background: #f1ece2; border: 1px solid #e6ded1; padding: 5px; display: flex; }
.res-carte--exterieure .res-carte-image { width: 100%; aspect-ratio: 864/539; border-radius: 6px;
  background-size: cover; background-position: center; }
.res-carte--exterieure .res-carte-image--vide { background: #e6ded1; }
.res-carte-corps { padding: 8px 2px 0; }
/* Carte Expert du rayon d'entree : portrait rond centre, comme un annuaire.
   Meme largeur de carte que les cartes-documents pour que l'etagere defile
   proprement, mais le cadrage du portrait (rond, centre, sans fond) signale tout
   de suite "personne" plutot que "document" avant meme de lire le nom. */
/* Etat d'avancement d'un chapitre (page parcours). Trois pastilles, toutes
   verifiees au contraste AA sur leur propre fond -- ce sont de petits caracteres
   (11px), donc le seuil de 4.5:1 s'applique. */
.jp-chapitre-surligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2px; }
.jp-chapitre-surligne .jp-chapitre-numero { margin: 0; }
.jp-chapitre-badge { display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.jp-chapitre-badge--valide  { background: #e7f5f0; color: #0f6450; }
.jp-chapitre-badge--encours { background: #f6f0fa; color: #62044f; }
.jp-chapitre-badge--avenir  { background: #f1eff3; color: #5f5870; }
/* Coche dessinee en CSS plutot qu'un glyphe : rendu identique partout, et elle
   reste alignee sur la casse du mot quelle que soit la police du systeme. */
.jp-chapitre-badge-coche { display: inline-block; width: 9px; height: 5px; flex: none;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px); }

.res-carte--experte { text-align: center; }
.res-carte-avatar-zone { position: relative; aspect-ratio: 2/3; display: flex;
  align-items: center; justify-content: center; border-radius: 10px; overflow: hidden;
  background-size: cover; background-position: center; }
.res-carte-avatar-zone--nue { background: #f1ece2; }
.res-carte-voile { position: absolute; inset: 0; }
/* L'anneau blanc detache le portrait du fond illustre : sans lui, un visage sombre
   sur une illustration sombre disparait. C'est lui qui rend le montage lisible. */
.res-carte-avatar { position: relative; width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.28);
  transition: transform .15s; }
.res-carte--experte:hover .res-carte-avatar { transform: scale(1.04); }
.res-carte-avatar--vide { position: relative; width: 84px; height: 84px; display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pz-violet), var(--pz-rose));
  color: #fff; font-size: 30px; font-weight: 700; }
.res-carte-titre--experte { text-align: center; }
.res-carte-fonction { margin: 2px 0 0; font-size: 11px; line-height: 1.3; color: #8b8397;
  text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

.res-carte-titre { margin: 0; font-size: 12.5px; line-height: 1.3; font-weight: 600;
  color: #3f3a36; overflow-wrap: anywhere; }
.res-carte--pz .res-carte-titre { color: var(--pz-violet-deep); }

.res-vide { color: #7d7369; font-size: 14px; margin-top: 20px; }

/* Galerie de schemas illustratifs (diagrammes du corpus, pas des couvertures
   artistiques) : object-fit:contain, jamais recadres -- ce sont des images avec du
   texte. Meme scroll horizontal que les rayons, plus adapte qu'une grille quand une
   fiche porte 6 planches (ex. le cycle de la croyance) et une seule (ex. le Moteur). */
.res-schemas { display: flex; gap: 14px; overflow-x: auto; margin: 18px 0 4px;
  padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.res-schema { flex: none; width: 220px; scroll-snap-align: start; margin: 0; }
.res-schema img { display: block; width: 100%; height: 160px; object-fit: contain;
  background: #faf6ee; border: 1px solid #e7d9b6; border-radius: 10px; }
.res-schema figcaption { margin-top: 6px; font-size: 12px; line-height: 1.35; color: #8a7654; }
@media (max-width: 575.98px) { .res-schema { width: 180px; } .res-schema img { height: 130px; } }

/* Fiche PZ : l'Eclat se distingue legerement du Repere (promesse plutot que corps). */
.res-eclat { font-weight: 600; color: #6b4f1c; }
.res-experience-lien { margin-top: 22px; }
.res-deja-rencontre { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 600; color: #2e7d4f; }

/* Fiche non-PZ : gabarit documentaire neutre, delibrement different de l'encart sable. */
/* Hauteur fixe plutot que aspect-ratio : la couverture est un fond, pas une image
   intrinseque, et melanger aspect-ratio + max-height donne un rendu incoherent entre
   navigateurs quand la largeur du conteneur varie. */
.res-fiche-couverture { height: 320px; background-size: cover; background-position: center 22%; }
@media (max-width: 575.98px) { .res-fiche-couverture { height: 220px; } }
.res-monde-couverture { aspect-ratio: 864/539; background-size: cover; background-position: center; }
/* Credit d'image : discret mais lisible (l'attribution CC doit rester perceptible,
   pas dissimulee), aligne a droite sous la couverture. */
.res-credit { margin: 6px 14px 0; text-align: right; font-size: 11.5px; color: #8b8079; }
.res-credit a { color: #8b8079; text-decoration: underline; }
.res-credit a:hover { color: #62044f; }
.res-monde-famille { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: #9a938d; }
.res-monde-titre { margin: 2px 0 18px; font-size: 24px; font-weight: 700; color: #2f2b27; }
/* Verticales civilisationnelles (modele 20-verticales.png) : groupees par
   transition, la couleur est portee par la TRANSITION et non par la verticale --
   c'est le regroupement qui porte le sens, une pastille isolee ne dirait rien. */
/* Portrait d'un expert : medaillon a cote du nom, jamais en bandeau plein format
   (ce role est deja tenu par `image`, la couverture floutee des fiches communaute). */
.res-monde-entete { display: flex; align-items: center; gap: 16px; }
.res-portrait { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  flex: none; box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0,0,0,.15); }

/* Renvoi d'une fiche Expert vers le projet qu'elle porte : une carte pleine largeur,
   parce que c'est la suite naturelle de la lecture et non un lien annexe. */
.res-renvoi { display: block; margin: 4px 0 20px; padding: 12px 16px; border-radius: 8px;
  background: #f6f2f9; border: 1px solid #e4dcec; text-decoration: none; transition: background .15s; }
.res-renvoi:hover { background: #efe8f5; text-decoration: none; }
.res-renvoi-label { display: block; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: #7d7490; margin-bottom: 2px; }
.res-renvoi-nom { display: block; font-size: 15.5px; font-weight: 700; color: #6b2d8c; }
.res-renvoi-nom::after { content: " \2192"; }

/* Lien LinkedIn : discret, pas un bouton principal — la fiche ne sert pas a envoyer
   ailleurs, elle situe la personne dans l'ecosysteme. */
.res-linkedin { display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  font-weight: 600; color: #0a66c2; text-decoration: none; }
.res-linkedin:hover { text-decoration: underline; color: #0a66c2; }
.res-linkedin-marque { display: inline-block; width: 20px; height: 20px; border-radius: 3px;
  background: #0a66c2; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px;
  text-align: center; font-family: Georgia, serif; }

/* Le cycle des cinq oeuvres d'un projet incube : un chemin, pas un tableau. Le
   filet vertical relie les etapes pour que la progression se voie avant qu'on lise. */
.res-cycle, .res-champions { margin: 24px 0 4px; }
.res-cycle-titre { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: #6b6478; margin: 0 0 14px; }
.res-cycle-liste { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative;
  counter-reset: oeuvre; }
.res-cycle-liste::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(#d8cfe4, #efe9f3); }
.res-cycle-etape { position: relative; margin: 0 0 16px; counter-increment: oeuvre; }
.res-cycle-etape:last-child { margin-bottom: 0; }
.res-cycle-etape::before { content: counter(oeuvre); position: absolute; left: -26px; top: 0;
  width: 16px; height: 16px; border-radius: 50%; background: #6b2d8c; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.res-cycle-etape--vide::before { background: #cfc7d8; }
.res-cycle-nom { display: block; font-size: 13px; font-weight: 700; color: #3d3547;
  margin-bottom: 2px; }
.res-cycle-texte { margin: 0; font-size: 14px; line-height: 1.55; color: #4a4459; }
.res-cycle-etape--vide .res-cycle-texte { color: #8b8397; font-style: italic; }

/* Champion·ne·s d'un projet : ce que la page publique de l'incubateur affiche deja. */
.res-champion { margin: 0 0 14px; padding-left: 12px; border-left: 3px solid #e4dcec; }
.res-champion:last-child { margin-bottom: 0; }
.res-champion-nom { margin: 0; font-size: 15px; font-weight: 700; color: #3d3547; }
.res-champion-fonction { margin: 1px 0 0; font-size: 13.5px; color: #6b6478; }
.res-champion-devise { margin: 4px 0 0; font-size: 13.5px; font-style: italic; color: #4a4459; }

/* Devise d'un expert : sa formule, sous son nom, avant tout ce que nous en disons. */
.res-devise { margin: -6px 0 16px; font-size: 16px; font-style: italic; color: #4a4459;
  line-height: 1.45; }

/* Bandeau d'apercu admin : une fiche Expert sans consentement enregistre. */
.res-apercu { margin: 0 0 18px; padding: 10px 14px; border-left: 4px solid #a81e4d;
  background: #fdf2f5; color: #6e1533; font-size: 13.5px; line-height: 1.5;
  border-radius: 0 6px 6px 0; }
.res-apercu code { font-size: 12.5px; background: #fff; padding: 1px 5px; border-radius: 3px; }

.res-verticales { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.res-verticale-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.res-verticale-transition { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; flex: none; }
.res-verticale { display: inline-block; padding: 3px 11px; font-size: 12.5px; font-weight: 600;
  background: #fff; border: 1.5px solid; border-radius: 999px; }

.res-monde-meta { width: 100%; margin-bottom: 20px; border-collapse: collapse; font-size: 13.5px; }
.res-monde-meta th { text-align: left; font-weight: 600; color: #6d665f; padding: 5px 14px 5px 0;
  white-space: nowrap; vertical-align: top; }
.res-monde-meta td { padding: 5px 0; color: #3f3a36; }
.res-monde-section { margin-bottom: 18px; }
.res-monde-section h2 { font-size: 14px; font-weight: 700; color: #2f2b27; margin: 0 0 6px; }
.res-monde-section p { margin: 0; font-size: 14px; line-height: 1.55; color: #4a4540; }
.res-monde-section ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: #4a4540; }
.res-monde-section li { margin-bottom: 4px; }

/* ---------- Evaluation par les cinq cadres (formulaire) ---------- */
.eval-bloc { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid #efeae3; }
.eval-bloc:last-of-type { border-bottom: 0; }
.eval-bloc-titre { font-size: 19px; font-weight: 700; color: var(--pz-violet-deep); margin: 0 0 2px; }
.eval-bloc-question { margin: 0; font-size: 14px; color: #4a4540; }
.eval-bloc-axe { margin: 2px 0 12px; font-size: 12.5px; font-style: italic; color: #8a7654; }
.eval-contexte { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.eval-champ { flex: 1 1 220px; border: 0; padding: 0; margin: 0; }
.eval-champ legend { font-size: 13px; font-weight: 700; color: #6d665f; margin-bottom: 6px; }
.eval-radio { display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px; font-size: 13.5px;
  color: #3f3a36; cursor: pointer; }

.eval-ancres { margin: 10px 0 14px; }
.eval-ancres summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pz-violet-deep); }
.eval-ancre { margin-top: 10px; padding: 10px 12px; background: #faf6ee; border: 1px solid #efe6d2;
  border-radius: 10px; }
.eval-ancre-niveau { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.eval-ancre-niveau strong { color: #7d5f25; }
.eval-ancre-niveau span { color: #8a7654; }
.eval-ancre-texte { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #4a4540; }

.eval-curseur { margin-top: 6px; }
.eval-curseur-label { display: block; font-size: 14px; font-weight: 600; color: #3f3a36; margin-bottom: 6px; }
.eval-curseur-ligne { display: flex; align-items: center; gap: 14px; }
.eval-curseur-ligne input[type=range] { flex: 1; accent-color: var(--pz-violet); }
.eval-curseur-ligne output { flex: none; min-width: 40px; text-align: center; font-weight: 700;
  font-size: 16px; color: var(--pz-violet-deep); }
.eval-sans-avis { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; font-size: 12.5px;
  color: #7d7369; cursor: pointer; }
.eval-temoignage { width: 100%; border: 1.5px solid #dee2e6; border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14px; margin-top: 8px; }
.eval-temoignage:focus { outline: 2px solid var(--pz-violet); outline-offset: 1px; }

/* ---------- Evaluation : restitution sur la fiche ---------- */
.eval-regards { border-top: 1px solid #efeae3; padding-top: 18px; }
.eval-regards-effectif { font-size: 13px; color: #7d7369; margin: 0 0 12px; }
.eval-regards-vide { font-size: 14px; color: #7d7369; margin: 0 0 14px; }
.eval-profil { margin-bottom: 18px; }
.eval-profil-ligne { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.eval-profil-nom { flex: none; width: 170px; font-size: 13px; font-weight: 600; color: #3f3a36; }
.eval-profil-barre { flex: 1; height: 10px; border-radius: 5px; background: #efeae3; overflow: hidden; }
.eval-profil-remplissage { height: 100%; border-radius: 5px; background: var(--pz-violet); }
.eval-profil-note { flex: none; font-size: 13px; font-weight: 700; color: var(--pz-violet-deep); }
.eval-profil-n { flex: none; font-size: 12px; color: #9a938d; }
.eval-profil-vide { flex: 1; font-size: 12.5px; font-style: italic; color: #9a938d; }
.eval-temoignages { margin: 4px 0 18px; }
.eval-temoignage-bloc { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid #f2b705;
  background: #fff; border-radius: 0 10px 10px 0; }
.eval-temoignage-bloc p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: #4a4540; }
.eval-temoignage-bloc footer { font-size: 12.5px; color: #7d7369; }
.eval-bouton-grise { margin-top: 6px; }
.eval-bouton-explication { margin: 8px 0 0; font-size: 13px; color: #7d7369; max-width: 480px; }
@media (max-width: 575.98px) {
  .eval-profil-ligne { flex-wrap: wrap; }
  .eval-profil-nom { width: 100%; }
}

@media (max-width: 575.98px) {
  .res-carte { width: 108px; }
  .res-carte--exterieure { width: 150px; }
  .res-carte--medaillon { width: 108px; }
}


/* ===== Cercles de croissance (Lot 1) ===== */
.cercle-etagere { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.cercle-carte { display: block; width: 270px; padding: 14px 16px; border: 1px solid #e4dcec;
  border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
a.cercle-carte:hover { border-color: var(--pz-violet); text-decoration: none; color: inherit; }
.cercle-carte-nom { margin: 0; font-weight: 700; color: var(--pz-violet-deep); font-size: 15.5px; }
.cercle-carte-theme { margin: 2px 0 0; font-size: 12px; color: #6b6478; text-transform: uppercase;
  letter-spacing: .05em; }
.cercle-carte-desc { margin: 6px 0 0; font-size: 13.5px; color: #4a4459; line-height: 1.45; }
.cercle-carte-meta { margin: 8px 0 0; font-size: 12.5px; color: #8b8397; }
.cercle-badge--attente { display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; background: #fdf6e3; color: #8a6d1a; font-size: 11px; font-weight: 700; }
.cercle-badge--ouvreur { display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; background: #f6f0fa; color: #62044f; font-size: 11px; font-weight: 700; }
.cercle-form { max-width: 640px; }
.cercle-form-ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.cercle-form-ligne .form-control { flex: 1; min-width: 200px; }
.cercle-theme { margin: -10px 0 4px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: #6b6478; font-weight: 700; }
.cercle-desc { color: #4a4459; }
.cercle-taille { font-weight: 700; color: var(--pz-violet-deep); }
.cercle-membres { list-style: none; padding: 0; margin: 0 0 14px; }
.cercle-membres li { padding: 6px 0; border-bottom: 1px solid #f0ebe4; display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap; }
.cercle-membres li form { margin: 0; display: inline-block; }
.cercle-demande-identite { display: flex; flex-direction: column; gap: 0; margin-right: 6px; }
.cercle-demande-email { font-size: 12px; color: #8b8397; }
.cercle-seance-date { color: #4a4459; }
.cercle-roles { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.cercle-roles td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid #f0ebe4;
  vertical-align: middle; }
.cercle-roles .role-nom { font-weight: 700; color: #3d3547; }
.cercle-roles .role-cadre { font-size: 12px; color: #8b8397; }
.cercle-bloc-form { margin: 10px 0 22px; }
.cercle-bloc-form summary { cursor: pointer; font-weight: 600; color: var(--pz-violet-deep); }
.cercle-pacte-q { font-weight: 700; color: #3d3547; margin: 12px 0 2px; font-size: 14px; }
.cercle-pacte-r { margin: 0; color: #4a4459; }
.cercle-pacte-r--vide { color: #a49b8f; font-style: italic; }

/* --- Pièces jointes des messages (S1-A6) ----------------------------------- */
.pz-pieces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pz-message--mien .pz-pieces { justify-content: flex-end; }
.pz-piece-image { display: block; max-width: 260px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.pz-piece-image img { display: block; width: 100%; height: auto; }
.pz-piece-fichier { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; background: #fff; text-decoration: none; color: inherit; font-size: 13px; }
.pz-piece-fichier:hover { border-color: #82246f; color: #82246f; }
.pz-piece-taille { color: #888; font-size: 12px; }
.pz-pieces-champ { margin-top: 8px; }
.pz-pieces-entree { font-size: 13px; }
.pz-pieces-aide { font-size: 12px; color: #888; margin-top: 2px; }

/* --- Recherche dans mes fils (S1-A7) ---------------------------------------- */
.pz-recherche { display: flex; gap: 8px; }
.pz-recherche input[type="search"] { flex: 1; }
.pz-trouvaille { padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.pz-trouvaille:last-child { border-bottom: 0; }
.pz-trouvaille-extrait { margin: 4px 0; }
.pz-trouvaille-extrait mark { background: #f3d9ec; color: inherit; border-radius: 4px; padding: 0 2px; }
.pz-trouvaille-lien { font-size: 13px; font-weight: 700; }

/* --- Sondages (S1-A8) ------------------------------------------------------- */
.pz-sondage { padding: 10px 14px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; background: #fff; margin-bottom: 8px; }
.pz-sondage-question { font-weight: 700; margin: 4px 0 10px; }
.pz-sondage-clos { color: #888; font-weight: 700; }
.pz-sondage-options { display: flex; flex-direction: column; gap: 6px; }
.pz-sondage-options form { display: block; width: 100%; }
.pz-sondage-option { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; overflow: hidden; background: #fff; text-align: left; width: 100%; font: inherit; cursor: default; }
.pz-sondage-option--votable { cursor: pointer; }
.pz-sondage-option--votable:hover { border-color: #82246f; }
.pz-sondage-option.est-mienne { border-color: #82246f; border-width: 2px; }
.pz-sondage-barre { position: absolute; inset: 0; background: #f3d9ec; z-index: 0; transition: width .3s ease; }
.pz-sondage-libelle, .pz-sondage-compte { position: relative; z-index: 1; }
.pz-sondage-compte { color: #666; font-size: 12px; white-space: nowrap; margin-left: 10px; }
.pz-sondage-creer summary { cursor: pointer; }

/* ============================================================
   DÉVOILEMENT — gabarit de l'état « annoncée » du contrat de coque
   (sprint 1, brique de base du dévoilement). Ajouté par Claude, 2026-08-11.
   Préfixe `pz-devoilement-`, PAS `pz-annonce-` : ce dernier appartient déjà
   au bandeau de seuil franchi (accomplissements.css) — sens opposé, même
   mot. La collision faisait hériter cette page de son `display: flex`, qui
   écrasait silencieusement toute la mise en forme (largeurs de contenu
   réduites à la taille du texte). Vérifier ce fichier avant tout futur
   préfixe `pz-` : la seule liste à jour est le fichier lui-même.
   ============================================================ */
.pz-devoilement { max-width: 560px; margin: 0 auto; padding: 48px 20px; text-align: center; }
.pz-devoilement-glyphe { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; border: 1px dashed var(--pz-violet); color: var(--pz-violet); font-size: 28px; margin-bottom: 14px; }
.pz-devoilement-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pz-violet); font-weight: 700; opacity: .78; margin-bottom: 6px; }
.pz-devoilement-titre { font-family: 'Roboto Slab', Georgia, serif; font-size: 30px; margin: 6px 0 14px; color: #211a1e; }
.pz-devoilement-corps { font-size: 16px; color: #4c454c; line-height: 1.55; }
.pz-devoilement-feras { margin: 22px auto; text-align: left; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; padding: 16px 20px; }
.pz-devoilement-feras span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pz-violet-deep); font-weight: 700; }
.pz-devoilement-feras ul { margin: 8px 0 0; padding-left: 19px; }
.pz-devoilement-feras li { margin: 5px 0; color: #4c454c; }
.pz-devoilement-condition { font-family: 'Roboto Slab', Georgia, serif; font-size: 17px; color: var(--pz-violet-deep); margin-top: 4px; }
.pz-devoilement-note { font-size: 12.5px; color: #6b6469; }
.pz-devoilement-retour { margin-top: 18px; }
.pz-devoilement-retour a { display: inline-block; border: 1px solid var(--pz-violet); color: var(--pz-violet-deep); border-radius: 999px; padding: 8px 18px; font-weight: 700; text-decoration: none; }
.pz-devoilement-retour a:hover { background: var(--pz-violet); color: #fff; }

/* Catalogue de démonstration (AnnoncesController) — pas une page du Jeu. */
.pz-devoilement-catalogue-note { max-width: 560px; margin: 0 auto 16px; padding: 0 20px; text-align: center; font-size: 12.5px; color: #6b6469; }
.pz-devoilement-catalogue-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0 20px 8px; }
.pz-devoilement-catalogue-nav a { border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; color: #4c454c; text-decoration: none; }
.pz-devoilement-catalogue-nav a:hover { border-color: var(--pz-violet); color: var(--pz-violet-deep); }
.pz-devoilement-catalogue > section { border-top: 1px solid rgba(0, 0, 0, .08); scroll-margin-top: 16px; }
.pz-devoilement-catalogue > section:first-of-type { border-top: 0; }

/* --- Ressourcerie vivante v1 : recherche + bibliothèque -------------------- */
.res-filtre { flex-wrap: wrap; }
.res-recherche { border: 1px solid #dee2e6; border-radius: 8px; padding: 6px 10px; font-size: 13px; min-width: 200px; }
.res-recherche-go { border: 1px solid #dee2e6; border-radius: 8px; padding: 6px 12px; font-size: 13px; background: #fff; cursor: pointer; }
.res-recherche-go:hover { border-color: var(--pz-violet); color: var(--pz-violet); }
.res-lien-bibliotheque { font-size: 13px; font-weight: 700; color: var(--pz-violet-deep); white-space: nowrap; }
.res-favori-bouton { border: 1px solid #dee2e6; border-radius: 999px; padding: 5px 14px; font-size: 12.5px;
  background: #fff; color: #6d665f; cursor: pointer; margin-top: 6px; }
.res-favori-bouton:hover { border-color: var(--pz-violet); color: var(--pz-violet); }
.res-favori-bouton.est-pose { border-color: var(--pz-violet); background: #f4ecf3; color: var(--pz-violet-deep); }

/* ============================================================
   AIDE & RECOURS v1 — sprint 2 desktop. Ajouté par Claude, 2026-08-11.
   Registre volontairement sobre : pas de glyphe, pas de dégradé, pas
   d'animation — l'humour et le décor du Jeu s'arrêtent à cette porte
   (voix-point-zero.md §5). Cibles tactiles ≥ 44px sur les numéros
   d'urgence : personne en détresse ne doit pas viser un petit lien.
   ============================================================ */
.pz-aide { max-width: 720px; margin: 0 auto; padding: 36px 20px 64px; }
.pz-aide-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pz-violet-deep); font-weight: 700; margin-bottom: 6px; }
.pz-aide-entete h1 { font-family: 'Roboto Slab', Georgia, serif; font-size: 30px; margin: 4px 0 10px; }
.pz-aide-lead { font-size: 16px; color: #4c454c; line-height: 1.55; }
.pz-aide-principe { margin-top: 20px; padding: 14px 18px; border: 1px solid #dee2e6; border-radius: 10px; background: #faf9f7; }
.pz-aide-principe strong { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #4c454c; margin-bottom: 4px; }
.pz-aide-principe p { margin: 0; font-size: 14px; color: #4c454c; }

.pz-aide h2 { font-family: 'Roboto Slab', Georgia, serif; font-size: 22px; margin: 4px 0 10px; }
.pz-aide > section { margin-top: 34px; }

/* Le bloc d'urgence : la seule section qui doit sauter aux yeux. */
.pz-aide-urgence { padding: 20px; border: 2px solid #a23b2e; border-radius: 12px; background: #fdf3f1; }
.pz-aide-urgence .pz-aide-eyebrow { color: #a23b2e; }
.pz-aide-numeros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pz-aide-numero-principal, .pz-aide-numero { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 15px; }
.pz-aide-numero-principal { background: #a23b2e; color: #fff; }
.pz-aide-numero-principal:hover { background: #872f24; color: #fff; }
.pz-aide-numero { border: 1px solid #a23b2e; color: #a23b2e; background: #fff; }
.pz-aide-numero:hover { background: #fdf3f1; }

.pz-aide-ecoute { padding: 18px 20px; border: 1px solid var(--pz-violet); border-radius: 12px; background: #faf3f8; }
.pz-aide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pz-aide-bouton-principal, .pz-aide-bouton-secondaire { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 15px; }
.pz-aide-bouton-principal { background: var(--pz-violet); color: #fff; }
.pz-aide-bouton-principal:hover { background: var(--pz-violet-deep); color: #fff; }
.pz-aide-bouton-secondaire { border: 1px solid var(--pz-violet); color: var(--pz-violet-deep); background: #fff; }
.pz-aide-bouton-secondaire:hover { background: #faf3f8; }
.pz-aide-note { margin-top: 12px; font-size: 13px; color: #6d665f; }
.pz-aide-note strong { color: #4c454c; }

.pz-aide-carte { padding: 16px 18px; border: 1px solid #dee2e6; border-radius: 12px; background: #fff; margin-top: 12px; }
.pz-aide-carte h3 { font-size: 16px; margin: 0 0 8px; }
.pz-aide-carte p { margin: 0; font-size: 14px; color: #4c454c; line-height: 1.5; }
.pz-aide-carte-alerte { border-color: #a23b2e; background: #fdf3f1; }
.pz-aide-lien { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--pz-violet-deep); text-decoration: none; }
.pz-aide-lien:hover { text-decoration: underline; }

.pz-aide-etapes article { padding: 14px 0; border-top: 1px solid #eee; }
.pz-aide-etapes article:first-child { border-top: 0; padding-top: 0; }
.pz-aide-etapes h3 { font-size: 15px; margin: 0 0 6px; }
.pz-aide-etapes p { margin: 0; font-size: 14px; color: #4c454c; line-height: 1.5; }

.pz-aide-limites { padding: 14px 18px; border-left: 3px solid #dee2e6; background: #faf9f7; font-size: 13px; color: #6d665f; line-height: 1.55; }

@media (max-width: 560px) {
  .pz-aide { padding: 24px 16px 48px; }
  .pz-aide-numero-principal, .pz-aide-numero, .pz-aide-bouton-principal, .pz-aide-bouton-secondaire { width: 100%; justify-content: center; }
}

/* Entrée du top-bar, visible avant connexion (voir jeu.html.haml). Le padding
   agrandit la cible tactile sans changer la taille visuelle de l'icône — sous
   480px elle perd son libellé et devient icône seule, donc la cible ne doit
   pas rétrécir avec lui (44px mini, cf. numéros d'urgence). */
.pz-aide-entree { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 8px; margin: 0 -8px; color: #6d665f; text-decoration: none; font-size: 13px; }
.pz-aide-entree:hover { color: var(--pz-violet); }
.pz-aide-entree-libelle { font-weight: 600; }
@media (max-width: 480px) { .pz-aide-entree-libelle { display: none; } .pz-aide-entree { min-width: 44px; } }

/* ============================================================
   HÉROS & MENTORS v1 — lot pilote, poste fixe, 2026-08-12.
   ============================================================ */
.pz-heros, .pz-heros-fiche { max-width: 900px; margin: 0 auto; padding: 32px 20px 64px; }
.pz-heros-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pz-violet-deep); font-weight: 700; margin-bottom: 6px; }
.pz-heros-entete h1, .pz-heros-fiche-entete h1 { font-family: 'Roboto Slab', Georgia, serif; font-size: 28px; margin: 4px 0 10px; }
.pz-heros-lead { font-size: 15px; color: #4c454c; line-height: 1.55; }
.pz-heros-actuel { margin-top: 10px; font-size: 14px; }
.pz-heros-actuel a { font-weight: 700; color: var(--pz-violet-deep); }

.pz-heros-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.pz-heros-recherche { border: 1px solid #dee2e6; border-radius: 8px; padding: 7px 12px; font-size: 13px; min-width: 240px; flex: 1 1 240px; }
.pz-heros-recherche-go { border: 1px solid #dee2e6; border-radius: 8px; padding: 7px 14px; font-size: 13px; background: #fff; cursor: pointer; }
.pz-heros-recherche-go:hover { border-color: var(--pz-violet); color: var(--pz-violet); }
.pz-heros-vide { margin-top: 28px; font-size: 14px; color: #6d665f; }

.pz-heros-groupe { margin-top: 34px; }
.pz-heros-groupe h2 { font-family: 'Roboto Slab', Georgia, serif; font-size: 18px; margin-bottom: 12px; }
.pz-heros-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pz-heros-carte { display: block; padding: 16px 18px; border: 1px solid #dee2e6; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: border-color .15s; }
.pz-heros-carte:hover { border-color: var(--pz-violet); text-decoration: none; }
.pz-heros-type { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6d665f; font-weight: 700; }
.pz-heros-carte h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 17px; margin: 6px 0 8px; }
.pz-heros-carte p { font-size: 13.5px; color: #4c454c; margin: 0 0 12px; }

.pz-heros-puissances { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-heros-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: #f4ecf3; color: #6d665f; }
.pz-heros-badge img { width: 16px; height: 16px; }
.pz-heros-badge.is-principale { background: #eddcf6; color: var(--pz-violet-deep); font-weight: 700; }
.pz-heros-badge-role { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-left: 2px; }
.pz-heros-note { margin-top: 28px; font-size: 12.5px; color: #6d665f; }

/* ---------- fiche ---------- */
.pz-heros-retour { display: inline-block; margin-bottom: 18px; font-size: 13.5px; color: var(--pz-violet-deep); text-decoration: none; }
.pz-heros-retour:hover { text-decoration: underline; }
.pz-heros-fiche-entete .pz-heros-puissances { margin-top: 10px; }
.pz-heros-bloc { margin-top: 26px; }
.pz-heros-bloc h2 { font-family: 'Roboto Slab', Georgia, serif; font-size: 17px; margin-bottom: 8px; }
.pz-heros-bloc p, .pz-heros-bloc li { font-size: 14.5px; color: #2c2630; line-height: 1.55; }
.pz-heros-bloc ul { padding-left: 20px; margin: 0; }
.pz-heros-lecture { padding: 16px 18px; border-left: 3px solid var(--pz-violet); background: #faf5f9; border-radius: 0 10px 10px 0; }
.pz-heros-disclaimer { font-size: 12.5px; color: #6d665f; margin-top: 8px; }
.pz-heros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 26px; }
.pz-heros-grid .pz-heros-bloc { margin-top: 0; }
.pz-heros-source { margin-top: 22px; font-size: 12.5px; color: #6d665f; border-top: 1px solid #eee; padding-top: 14px; }
.pz-heros-actions { margin-top: 32px; }
.pz-heros-bouton { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--pz-violet); color: #fff; border: none; }
.pz-heros-bouton:hover { background: var(--pz-violet-deep); }
.pz-heros-deja-choisi { font-size: 15px; font-weight: 700; color: var(--pz-violet-deep); }

@media (max-width: 560px) {
  .pz-heros, .pz-heros-fiche { padding: 24px 16px 48px; }
  .pz-heros-cartes { grid-template-columns: 1fr; }
}

/* ---------- Héros v2 : illustration, citation, lemniscate, Lumière/Ombre ---------- */
.pz-heros-illustration { flex: none; border-radius: 50%; }

.pz-heros-carte-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pz-heros-carte-head-texte { min-width: 0; }
.pz-heros-carte-head-texte h3 { margin: 2px 0 0; }
.pz-heros-carte-citation { font-size: 13px; font-style: italic; color: #4c454c; margin: 0 0 12px; }

.pz-heros-fiche-entete { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.pz-heros-fiche-portrait { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: 240px; }
.pz-heros-citation { margin: 0; text-align: center; }
.pz-heros-citation p { margin: 0; font-size: 13px; font-style: italic; color: #4c454c; line-height: 1.4; }
.pz-heros-citation cite { display: block; margin-top: 4px; font-size: 11px; font-style: normal; color: #8a847e; }
.pz-heros-fiche-titre { flex: 1; min-width: 220px; }

.pz-heros-lemniscate { margin-top: 14px; }
.pz-heros-lemniscate-nom { margin: 0 0 10px; text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; font-size: 13px; color: var(--pz-violet-deep); }
.pz-heros-lemniscate-legende { display: flex; align-items: center; justify-content: center; margin-top: 8px; font-size: 13px; }

.pz-heros-tao { display: flex; align-items: stretch; position: relative; margin-top: 8px; }
.pz-heros-tao-pole { flex: 1; padding: 22px 20px; }
.pz-heros-tao-pole.is-lumiere { background: #f4eee5; color: #241820; border-radius: 14px 0 0 14px; padding-right: 38px; }
.pz-heros-tao-pole.is-ombre { background: #241820; color: #f4eee5; border-radius: 0 14px 14px 0; padding-left: 38px; }
.pz-heros-tao-pole h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.pz-heros-tao-pole.is-lumiere h3 { color: #7a5d00; }
.pz-heros-tao-pole.is-ombre h3 { color: #cbb8d6; }
.pz-heros-tao-pole.is-ombre p { color: #f4eee5; }
.pz-heros-tao-pole p { margin: 0; font-size: 14px; line-height: 1.5; }
.pz-heros-tao-glyphe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.35); }

@media (max-width: 560px) {
  .pz-heros-fiche-entete { flex-direction: column; align-items: center; text-align: center; }
  .pz-heros-fiche-portrait { width: auto; }
  .pz-heros-tao { flex-direction: column; }
  .pz-heros-tao-pole.is-lumiere { border-radius: 14px 14px 0 0; padding-right: 20px; padding-bottom: 38px; }
  .pz-heros-tao-pole.is-ombre { border-radius: 0 0 14px 14px; padding-left: 20px; padding-top: 38px; }
}

/* --- La coque du devoilement (portage du 12 aout, CONTRAT-COQUE) ---------- */
.pz-portes { display: flex; gap: 6px; align-items: center; padding: 8px 20px 0;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); overflow-x: auto;
  scrollbar-width: none; }
.pz-portes::-webkit-scrollbar { display: none; }
.pz-porte { display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  border-radius: 14px 14px 0 0; color: #4c454c; text-decoration: none;
  white-space: nowrap; font-weight: 600; font-size: 14.5px; }
.pz-porte:hover { background: #f7f4fa; text-decoration: none; color: #211a1e; }
.pz-porte.is-active { background: #211a1e; color: #fff; }
.pz-porte-ico { font-size: 15px; }

.pz-destbar { display: flex; gap: 6px; align-items: center; padding: 8px 20px;
  background: #faf7f2; border-bottom: 1px solid rgba(0,0,0,.08); overflow-x: auto;
  scrollbar-width: none; }
.pz-destbar::-webkit-scrollbar { display: none; }
.pz-dest { display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid transparent; border-radius: 20px; color: #4c454c;
  text-decoration: none; white-space: nowrap; font-size: 14px; }
.pz-dest:hover { border-color: rgba(0,0,0,.1); background: #fff;
  text-decoration: none; color: #211a1e; }
.pz-dest.is-active { background: var(--pz-violet, #82246f); color: #fff; font-weight: 700; }
/* Attenuee mais CLIQUABLE : une destination annoncee est une page, pas un
   bouton mort (contrat, regle 6). */
.pz-dest.annoncee { color: #9a8f98; }
.pz-destbar-voile { font-size: 13px; color: #6b6469; padding: 4px 0; }

.pz-tag { font-style: normal; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid currentColor; border-radius: 9px;
  padding: 1px 7px; opacity: .75; }
.pz-tag-verrou { border-style: dashed; }

/* La barre mobile « Echanges au centre » (R6b option C). Cachee en desktop. */
.pz-mobilebar { display: none; }
@media (max-width: 767.98px) {
  .pz-portes, .pz-destbar { padding-left: 12px; padding-right: 12px; }
  .pz-mobilebar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
    display: flex; justify-content: space-around; align-items: stretch;
    background: #fff; border-top: 1px solid rgba(0,0,0,.1);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  body.logged { padding-bottom: 76px; }
  .pz-mobile-item { display: flex; flex-direction: column; align-items: center;
    gap: 2px; color: #4c454c; text-decoration: none; font-size: 11px;
    padding: 4px 8px; border-radius: 10px; min-width: 56px; }
  .pz-mobile-item span { font-size: 18px; }
  .pz-mobile-item b { font-weight: 600; }
  .pz-mobile-item.is-active { color: var(--pz-violet, #82246f); }
  .pz-mobile-echanges { align-self: flex-start; margin-top: -22px; width: 58px;
    height: 58px; border: 5px solid #faf7f2; border-radius: 50%;
    background: var(--pz-violet, #82246f); color: #fff; justify-content: center;
    box-shadow: 0 7px 16px rgba(62,23,55,.25); }
  .pz-mobile-echanges span { color: #f2b705; font-size: 20px; }
  .pz-mobile-echanges b { font-size: 9.5px; }
}

/* --- F21 : le point d attention (R4 : un point, ou rien) ------------------- */
.pz-point-attention { position: absolute; top: 6px; right: 4px; width: 8px;
  height: 8px; border-radius: 50%; background: var(--pz-violet, #82246f);
  box-shadow: 0 0 0 2px #fff; }
.pz-echanges-entree { position: relative; }
.pz-attention-neuf { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pz-violet, #82246f); border: 1px dashed currentColor; border-radius: 9px;
  padding: 0 6px; margin-left: 6px; }
.pz-attention-ligne--passe { color: #6b6469; }
.pz-attention-date { font-size: 12px; color: #8a8494; margin-left: 6px; }

/* F20 : qui s est dit libre a un creneau (jamais un engagement). */
.pz-rencontre-libres { font-size: 12px; color: #6b6469; margin-left: 8px; }

/* ============================================================
   PAGE EXPÉRIENCE — les blocs qui ARRIVENT du parcours (22 août)
   Canon docs/vision/page-parcours-carte-du-voyage.md §3.8.

   Ces règles habillent ce que journeys/_show a cédé : intensité /5, échelle
   d'effet /5, séquence et les quatre colonnes de reconnaissance. Elles vivent
   ici, et non dans une feuille /pz/m0/, parce que .pz-stat et .puissance-card
   — leurs voisines immédiates sur cette page — y sont déjà : la page expérience
   ne charge aucune feuille scopée.

   ⚠️ Les règles .jp-chapitre-*, .jp-mouvement*, .jp-seuil*, .jp-next*, .jp-voix
   de ce fichier deviennent MORTES avec ce lot : le portage de la page parcours
   les remplace par le vocabulaire de la maquette. Elles ne sont pas supprimées
   ici, et c'est délibéré — .jp-title, .jp-promesse, .jp-eyebrow et
   .jp-header-text sont un vocabulaire d'en-tête PARTAGÉ par cinq autres vues
   (cercles/index, journeys/index, ressources ×2, ressource_evaluations/new).
   Mesuré avant d'y toucher ; le nettoyage est signalé en PR plutôt que tenté à
   l'aveugle dans une feuille globale.
   ============================================================ */

.pz-experience-back {
  display: inline-block;
  margin: 14px 0 0 18px;
  font-weight: 700;
  color: #8b286c;
  text-decoration: none;
}

.pz-experience-back:hover { text-decoration: underline; }

.pz-experience-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.pz-experience-metrics article {
  padding: 14px 16px;
  border: 1px solid #ded5ca;
  border-radius: 14px;
  background: #fffdfa;
}

.pz-experience-metrics small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #a94817;
}

.pz-experience-metrics b {
  display: block;
  margin: 5px 0 8px;
  font-size: 15px;
}

.pz-experience-metrics p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #746a72;
}

/* L'échelle sur cinq : décorative (aria-hidden), le mot et le chiffre sont
   déjà dans le <b> au-dessus — la couleur seule ne porte jamais l'état. */
.pz-experience-metrics .five-scale {
  display: flex;
  gap: 4px;
}

.pz-experience-metrics .five-scale i {
  height: 7px;
  flex: 1;
  border-radius: 4px;
  background: #ece6e2;
}

.pz-experience-metrics .five-scale i.on {
  background: linear-gradient(90deg, #e86612, #dcae36);
}

.puissance-card__verbe {
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  color: #746a72;
}

.pz-experience-sequence {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.pz-experience-sequence .step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid #ded5ca;
  border-radius: 12px;
  background: #fffdfa;
}

.pz-experience-sequence .step > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #211820;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.pz-experience-sequence .step small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #a94817;
}

.pz-experience-sequence .step b {
  display: block;
  margin-top: 3px;
  font-size: 14px;
}

.pz-recognition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.pz-recognition-grid article {
  padding: 13px 15px;
  border-radius: 12px;
  background: #f6f1e8;
  border: 1px solid #ded5ca;
}

.pz-recognition-grid small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #a94817;
}

.pz-recognition-grid b {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
}

/* ============================================================
   #TOP-BAR : LA COQUE DU JEU NE DÉFILE PLUS SUR TÉLÉPHONE (22 août)

   ⚠️ CE DÉFAUT TOUCHAIT TOUTES LES PAGES DU JEU, et il a été trouvé au
   NAVIGATEUR — aucun banc ne mesure une largeur. Sur 375 px, #top-bar
   rendait 628 px de contenu ; la page entière défilait latéralement, et
   Boris teste au téléphone.

   Deux causes, et la seconde était invisible à la lecture :

   1. Les deux groupes de #top-bar ne pouvaient pas RÉTRÉCIR. Un enfant de
      flex a `min-width: auto` par défaut : il refuse de descendre sous la
      largeur de son contenu, et le conteneur déborde au lieu de comprimer.
      C'est le même piège que `min-height: auto` sur une grille, qui avait
      clippé le fil des Échanges le 21 août.
   2. Le pavé du compte faisait 83 px pour un avatar de 35 : `.p-3` de
      Bootstrap ajoute 16 px de chaque côté, soit 32 px de vide sur l'écran
      le plus étroit.

   Les libellés qui cèdent sous 620 px le font là où leur commande garde un
   `aria-label` : Aide en avait un, la nav du Monde 0 en a reçu un dans la
   même livraison. Aucune fonction ne disparaît — seul le texte visible.
   ============================================================ */

#top-bar > * { min-width: 0; }

@media (max-width: 620px) {
  #top-bar > .px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
  /* Le seuil du libellé d'Aide passe de 480 à 620 : à 500 px l'espace
     manquait déjà, la règle de juillet s'arrêtait trop tôt. */
  .pz-aide-entree-libelle { display: none; }
  .pz-aide-entree { min-width: 44px; margin-right: .25rem !important; }
  #top-bar .dropdown.p-3 { padding: .35rem !important; }
  .omega-chip { padding-left: .4rem; padding-right: .4rem; gap: .25rem; }
  /* La bascule Gestion est réservée aux comptes qui gèrent le Jeu : son
     libellé cède avant tout le reste, l'icône suffit à la retrouver. */
  .pz-bascule span { display: none; }
  /* Le mot de la marque cède, le logo reste. Mesuré : il valait 64 des
     43 px qui manquaient encore après la première passe. Le texte reste
     dans le document — verifier_menu_compte l'asserte sur /cgu, et un
     lecteur d'écran continue de le lire. */
  .pz-brand-mot { display: none; }
  /* Le chevron ::after de Bootstrap sur un avatar rond n'apporte rien et
     coûtait 16 px. */
  #top-bar .dropdown-toggle::after { display: none; }
}

/* ── LE BOUTON `.primary`, DÉCLARÉ UNE FOIS ───────────────────────────────────

   Chantier confié par le portable le 1er septembre : « `public/pz/` est ta zone,
   la décision est donc la tienne — et je la soutiens. Prends-la un moment où
   rien d'autre n'est en vol, c'est le genre de changement qui se fait une fois. »

   LE DÉFAUT QU'IL RÉPARE, mesuré : `.primary` était redéclarée dans UNE DOUZAINE
   de feuilles de page — accomplissements, alchimisation, annuaire, chapitre,
   cles, echanges, evenement, experience, fresque, guides, moteur, traces —
   chacune refaisant le même bouton sombre. La convention était donc « redéclare-
   le dans ta feuille », et elle ne s'apprend qu'en la connaissant : trois
   surfaces neuves l'ont ignorée et ont rendu leur seul geste EN LIEN NU.
   `.pz-m0-parcours`, puis `.pz-m0-devoilement`, puis `.pz-m0-eveil`. La
   quatrième aurait fait pareil.

   ⚠️ CE SOCLE NE CHANGE AUCUNE PAGE EXISTANTE, et c'est délibéré. Sa spécificité
   est (0,1,0) ; toutes les règles de page sont en (0,2,0) ou plus et continuent
   de gagner, à la propriété près. Il ne s'applique QUE là où personne n'a rien
   dit — c'est-à-dire exactement aux surfaces que le défaut atteignait.

   ⚠️ ET IL NE RETIRE PAS LES DOUZE COPIES — d'abord par prudence, MAINTENANT
   PAR MESURE. J'avais écrit ici que le nettoyage se ferait « page par page,
   chacune regardée après son déploiement ». Je l'ai commencé une fois le socle
   déployé, en comparant les styles CALCULÉS de chaque page à ceux du socle.

   Résultat : ce ne sont PAS des doublons. `/mes-traces` rend son `.primary` en
   `display: block` et 12 px ; `/heros` avec un rayon de 22 px et un padding de
   10/16. Chaque feuille a DIVERGÉ, et l'écart n'est visible ni dans le nom de
   la classe, ni dans le HTML, ni même en lisant les déclarations côte à côte —
   il faut charger la page.

   Les retirer ne serait donc pas un nettoyage : ce serait DOUZE PETITES
   REFONTES, chacune demandant une décision sur ce que la page doit montrer.
   Ce travail-là se demande, il ne se déduit pas. Le socle, lui, ferme la porte
   tout de suite pour les surfaces qui viendront.

   ⚠️ CE QUI EST VÉRIFIÉ, EN REVANCHE : sur `coque/devoilement`, dont la
   déclaration a été retirée dans la même livraison, le socle s'applique à
   l'identique — zéro écart mesuré sur les douze propriétés. La porte est bien
   fermée là où elle devait l'être.

   ⚠️ IL VIT ICI ET PAS AILLEURS parce que `pz_theme.css` est la seule feuille
   que la coque du Jeu charge sur TOUTES ses pages. La coque `conseil` n'en a pas
   besoin : ses pages emploient `.primary-button`, déclarée dans `conseil.css` —
   vérifié à l'écran, `/le-coupable-ideal` ne rend aucun `.primary`.

   Les valeurs sont la MÉDIANE des déclarations existantes, pas une invention :
   pilule sombre, texte blanc, rayon 25 px, 12/20 de padding, graisse 600. */

/* ── LE BOUTON SUR ENCRE : UNE DÉCISION, TROIS ENDROITS ──────────────────────

   ⚠️ TROIS SURFACES ONT DÉJÀ DÛ INVERSER CE BOUTON, et chacune l'a réinventé :
   la cérémonie d'éveil (`.pz-m0-eveil`), le sommeil du Moteur
   (`.moteur-bloc-entete--sommeil`) et le bilan d'après-clôture
   (`.dashboard-focus`). Toutes les trois posent un fond blanc sur un fond
   d'encre, parce que le socle `.primary` est sombre et qu'un bouton sombre sur
   un fond sombre n'est pas une variante : il est INVISIBLE. Mesuré au
   navigateur le 3 septembre, socle #211820 sur le dégradé du bloc de sommeil :
   **1,05 : 1**. Le blanc y donne 18,09 : 1.

   ⚠️ ET ELLES AVAIENT DÉJÀ DIVERGÉ : trois encres (#171016, #1d151d, #25151f)
   et deux roses de survol (#f3dbec, #f7dcee) pour une seule décision. L'écart
   maximum entre ces trois encres est de **1,07 : 1** — c'est-à-dire aucun :
   sur du blanc, elles rendent 18,71, 17,84 et 17,42. Personne ne les
   distinguait ; elles ne faisaient que dériver.

   ⚠️ POURQUOI DES VARIABLES ET NON UNE CLASSE `.primary--sur-encre`.
   C'était mon premier réflexe, et il aurait été FAUX. Un modificateur de socle
   pèse (0,1,0) ; les feuilles de page écrivent `.pz-m0-moteur .primary`, qui
   pèse (0,2,0) et se charge APRÈS. La classe aurait donc fonctionné sur deux
   surfaces et échoué EN SILENCE sur la troisième — un remède pire que le mal
   qu'il corrige, parce qu'il aurait eu l'air appliqué. Une variable, elle, ne
   se bat pas : elle descend, et la règle de page garde sa cascade.

   Chaque usage porte son repli (`var(--x, #fff)`) : une page servie sans cette
   feuille reste correcte plutôt que transparente. */
:root {
  --primary-encre-fond: #fff;
  --primary-encre-texte: #1a1219;
  --primary-encre-survol: #f3dbec;
}

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 25px;
  background: #211820;
  color: #fff;
  /* ⚠️ Un `button` n'hérite NI la famille NI la taille de son parent : sans ces
     deux lignes, un `%button.primary` rendrait en police système à 13,33 px au
     milieu d'une page en Poppins. Les liens, eux, héritent — d'où deux surfaces
     qui se ressemblaient dans le HTML et pas à l'écran. */
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.primary:hover {
  background: #3a2c38;
  color: #fff;
  text-decoration: none;
}
.primary:disabled,
.primary[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}