/* ============================================================
   NDÎ-NCHOUT PÂMOM — Portraits « Membre de la semaine »
   Chaque page reste une page de l'association : le membre choisit
   un habillage dans une liste fermée, jamais une couleur libre.
   ============================================================ */

/* ══ 1. HABILLAGES ═══════════════════════════════════════════ */
/* Les quatre thèmes sont dérivés de la charte. Le fond, le texte et
   l'accent bougent ensemble, ce qui garantit le contraste quel que
   soit le choix du membre. */

.pt-page {
  --pt-accent:      var(--c-primary);
  --pt-accent-soft: rgba(255,143,0,.12);
  --pt-fond:        var(--c-secondary);
  --pt-texte:       var(--c-cream);
  --pt-carte:       var(--c-white);
  --pt-carte-texte: var(--c-text);
}

.pt-page[data-theme="royal"] { --pt-fond:#4E342E; --pt-texte:#FFF8E1; }
.pt-page[data-theme="sobre"] { --pt-fond:#F9F5EE; --pt-texte:#2C2C2C; }
.pt-page[data-theme="terre"] { --pt-fond:#6D4C41; --pt-texte:#FFECB3; }
.pt-page[data-theme="nuit"]  { --pt-fond:#1F1B18; --pt-texte:#FFD600; }

.pt-page[data-accent="ambre"]  { --pt-accent:#FF8F00; --pt-accent-soft:rgba(255,143,0,.14); }
.pt-page[data-accent="or"]     { --pt-accent:#FFD600; --pt-accent-soft:rgba(255,214,0,.16); }
.pt-page[data-accent="brique"] { --pt-accent:#E65100; --pt-accent-soft:rgba(230,81,0,.14); }
.pt-page[data-accent="cacao"]  { --pt-accent:#6D4C41; --pt-accent-soft:rgba(109,76,65,.14); }
.pt-page[data-accent="creme"]  { --pt-accent:#C69A3E; --pt-accent-soft:rgba(198,154,62,.16); }
.pt-page[data-accent="nuit"]   { --pt-accent:#2C2C2C; --pt-accent-soft:rgba(44,44,44,.10); }

/* ══ 2. EN-TÊTE DU PORTRAIT ══════════════════════════════════ */

.pt-hero {
  position: relative;
  background: var(--pt-fond);
  color: var(--pt-texte);
  padding: calc(var(--nav-h) + var(--sp-xl)) var(--sp-md) var(--sp-xl);
  overflow: hidden;
}

/* Armoiries en filigrane : la page appartient visiblement à l'association. */
.pt-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 320px;
  height: 320px;
  background: url('../images/logo-watermark.png') center/contain no-repeat;
  opacity: .07;
  pointer-events: none;
}

.pt-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-lg);
  align-items: center;
  position: relative;
  z-index: 1;
}

.pt-hero__photo {
  width: 240px;
  height: 240px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 5px solid var(--pt-accent);
  box-shadow: var(--shadow-lg);
  background: var(--c-cream);
}

.pt-hero__photo--vide {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--pt-accent);
  background: rgba(255,255,255,.08);
}

.pt-badge-semaine {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--pt-accent);
  color: #1F1B18;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-sm);
}

.pt-hero__nom {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 .4rem;
}

.pt-hero__accroche {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  opacity: .92;
  margin: 0 0 var(--sp-sm);
  max-width: 46ch;
}

.pt-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
  font-size: .92rem;
  opacity: .85;
}

.pt-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.pt-hero__meta i { font-size: 1.05rem; color: var(--pt-accent); }

/* ── Devise : la phrase que le membre met en avant ── */
.pt-devise {
  border-left: 4px solid var(--pt-accent);
  padding: .5rem 0 .5rem var(--sp-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  margin: var(--sp-md) 0 0;
}

/* ══ 3. ACTIONS ══════════════════════════════════════════════ */

.pt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 2px solid var(--pt-accent);
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9rem;
  padding: .6rem 1.2rem;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}

.pt-btn:hover { background: var(--pt-accent-soft); transform: translateY(-2px); }
.pt-btn--plein { background: var(--pt-accent); color: #1F1B18; }
.pt-btn--plein:hover { background: var(--pt-accent); filter: brightness(1.08); }

/* Le bravo réagit au clic : un applaudissement doit se sentir. */
.pt-btn--bravo.est-actif { background: var(--pt-accent); color: #1F1B18; }
.pt-btn--bravo.pulse i { animation: pt-pulse .5s ease; }

@keyframes pt-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5) rotate(-12deg); }
  100% { transform: scale(1); }
}

/* Le partage est réservé aux membres : le visiteur voit l'invitation. */
.pt-btn--invite { opacity: .75; }

/* ══ 4. CORPS DE LA PAGE ═════════════════════════════════════ */

.pt-corps {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-md);
}

.pt-section { margin-bottom: var(--sp-xl); }

.pt-section__titre {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--c-secondary);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 var(--sp-md);
}

.pt-section__titre::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--pt-accent), transparent);
}

.pt-prose {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--c-text);
  white-space: pre-line;
}

/* ══ 5. FRISE DES PROJETS ════════════════════════════════════ */

.pt-frise { position: relative; padding-left: var(--sp-lg); }

.pt-frise::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--pt-accent), var(--c-border));
}

.pt-projet {
  position: relative;
  margin-bottom: var(--sp-lg);
  /* Apparition au défilement — posée par le script, retirée si le visiteur
     a demandé moins d'animations. */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.pt-projet.est-visible { opacity: 1; transform: none; }

.pt-projet::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-lg) * -1 + 1px);
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--pt-accent);
  border: 3px solid var(--c-white);
  box-shadow: 0 0 0 2px var(--pt-accent);
}

.pt-projet__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
}

.pt-projet__titre {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-secondary);
  margin: 0;
}

.pt-projet__annee { font-size: .85rem; color: var(--c-text-muted); }

.pt-puce {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18rem .6rem;
  border-radius: var(--r-full);
}

.pt-puce--realise  { background: #E8F5E9; color: #2E7D32; }
.pt-puce--en_cours { background: var(--c-cream-dark); color: #E65100; }
.pt-puce--a_venir  { background: #E3F2FD; color: #1565C0; }

.pt-projet__desc { margin: .4rem 0 0; color: var(--c-text); line-height: 1.7; }

/* ══ 6. VITRINE — activités secondaires du membre ════════════ */

.pt-vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-md);
}

.pt-fiche {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
}

.pt-fiche:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.pt-fiche__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-width: 100%;
  background: var(--c-cream);
}

.pt-fiche__corps { padding: var(--sp-md); flex: 1; display: flex; flex-direction: column; }

.pt-fiche__cat {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pt-accent);
  margin-bottom: .3rem;
}

.pt-fiche__titre {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 .5rem;
  color: var(--c-secondary);
}

.pt-fiche__desc { font-size: .95rem; line-height: 1.6; color: var(--c-text); flex: 1; }

.pt-fiche__contacts {
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
}

.pt-fiche__contacts a,
.pt-fiche__contacts span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-text);
  word-break: break-word;
}

.pt-fiche__contacts i { font-size: 1rem; color: var(--pt-accent); }

/* Mention discrète : ces encarts sont le fait du membre, pas de l'association. */
.pt-vitrine__mention {
  font-size: .82rem;
  color: var(--c-text-muted);
  font-style: italic;
  margin-bottom: var(--sp-md);
}

/* ══ 7. VIDÉO — chargée seulement au clic ════════════════════ */

.pt-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-secondary);
  cursor: pointer;
}

.pt-video img { width: 100%; height: 100%; object-fit: cover; }
.pt-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.pt-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.28);
  transition: background var(--t-base);
}

.pt-video:hover .pt-video__play { background: rgba(0,0,0,.42); }

.pt-video__play i {
  font-size: 4.5rem;
  color: var(--c-white);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}

/* ══ 8. LIENS EXTERNES ═══════════════════════════════════════ */

.pt-liens { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }

.pt-lien {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border-radius: var(--r-full);
  background: var(--c-cream);
  color: var(--c-secondary);
  font-weight: 600;
  font-size: .9rem;
  transition: background var(--t-fast), transform var(--t-fast);
}

.pt-lien:hover { background: var(--c-cream-dark); transform: translateY(-2px); }

/* ══ 9. CHIFFRES ═════════════════════════════════════════════ */

.pt-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  justify-content: center;
  padding: var(--sp-lg) var(--sp-md);
  background: var(--c-cream);
  border-radius: var(--r-lg);
}

.pt-chiffre { text-align: center; }

.pt-chiffre__valeur {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--pt-accent);
  line-height: 1;
}

.pt-chiffre__label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-muted);
  margin-top: .3rem;
}

/* ══ 10. LIVRE D'OR ══════════════════════════════════════════ */

.pt-mot {
  background: var(--c-white);
  border-left: 3px solid var(--pt-accent);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
  box-shadow: var(--shadow-sm);
}

.pt-mot__auteur { font-weight: 700; color: var(--c-secondary); }
.pt-mot__date   { font-size: .8rem; color: var(--c-text-muted); }
.pt-mot__texte  { margin: .4rem 0 0; line-height: 1.7; }

/* ══ 11. GALERIE DES PORTRAITS ═══════════════════════════════ */

.pt-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-md);
}

.pt-vignette {
  display: block;
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
  color: inherit;
}

.pt-vignette:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.pt-vignette__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  max-width: 100%;
  background: var(--c-cream);
}

.pt-vignette__corps { padding: var(--sp-md); }

.pt-vignette__nom {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--c-secondary);
  margin: 0 0 .2rem;
}

.pt-vignette__secteur { font-size: .88rem; color: var(--c-text-muted); }

/* ══ 12. BANDEAU D'ACCUEIL ═══════════════════════════════════ */

/* ── Devise de la rubrique ──
   « Un Bamoun — un parcours — une vision » : la promesse de la section,
   posée au-dessus du bandeau. */

.pt-slogan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem .9rem;
  max-width: 1100px;
  margin: var(--sp-xl) auto calc(var(--sp-lg) * -1 + .5rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-style: italic;
  color: var(--c-secondary);
  text-align: center;
  line-height: 1.3;
}

.pt-slogan__tiret { color: var(--c-primary); font-style: normal; }

.pt-une {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-md);
  max-width: 1100px;
  margin: var(--sp-xl) auto;
  padding: var(--sp-lg);
  background: linear-gradient(135deg, #4E342E 0%, #6D4C41 100%);
  color: var(--c-cream);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-decoration: none;
}

.pt-une::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 240px;
  height: 240px;
  background: url('../images/logo-watermark.png') center/contain no-repeat;
  opacity: .08;
}

.pt-une__photo {
  width: 130px;
  height: 130px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 4px solid var(--c-primary);
  position: relative;
  z-index: 1;
}

/* Repli sans photo : les initiales, plutôt qu'un cadre vide. */
.pt-une__photo--vide {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--c-primary);
  background: rgba(255,255,255,.08);
}

.pt-une__texte { position: relative; z-index: 1; min-width: 0; }

.pt-une__label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: .3rem;
}

.pt-une__nom {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 0 0 .3rem;
  line-height: 1.15;
}

.pt-une__accroche { opacity: .9; margin: 0; }

.pt-une__fleche {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #1F1B18;
  transition: transform var(--t-base);
}

.pt-une:hover .pt-une__fleche { transform: translateX(6px); }

/* ══ 13. APERÇU DE PARTAGE ═══════════════════════════════════ */
/* La carte que le membre valide avant de la diffuser. Le format est
   celui d'une story (4:5) : c'est lui qui circule sur les réseaux. */

.pt-apercu { text-align: center; }

.pt-apercu__cadre {
  display: inline-block;
  max-width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Le visuel est rendu à sa taille réelle puis réduit à l'écran : l'image
   produite reste nette, quelle que soit la taille de la fenêtre. */
/* Le visuel a une hauteur fixe : tout ce qui la dépasse est tranché. La
   colonne est donc réglée pour que l'adresse et le code à scanner — la
   raison d'être du partage — soient servis en premier, et que ce soit la
   liste du milieu qui cède s'il manque de la place. */
.pt-visuel {
  width: 1080px;
  height: 1350px;
  transform-origin: top left;
  background: linear-gradient(160deg, #4E342E 0%, #2C1D18 100%);
  color: #FFF8E1;
  font-family: var(--font-body);
  padding: 64px 60px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Aucun de ces blocs ne doit être comprimé ni rogné. */
.pt-visuel__entete,
.pt-visuel__label,
.pt-visuel__photo,
.pt-visuel__nom,
.pt-visuel__accroche,
.pt-visuel__devise,
.pt-visuel__pied { flex: 0 0 auto; }

.pt-visuel__armoiries {
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 460px;
  height: 460px;
  opacity: .09;
}

.pt-visuel__entete {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 26px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFD600;
}

.pt-visuel__entete img { width: 64px; height: 64px; }

.pt-visuel__label {
  margin-top: 40px;
  font-size: 28px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #FF8F00;
  font-weight: 700;
}

.pt-visuel__photo {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  border: 8px solid #FF8F00;
  margin: 28px 0 26px;
}

.pt-visuel__nom {
  font-family: var(--font-display);
  font-size: 74px;
  line-height: 1.05;
  margin: 0 0 16px;
}

.pt-visuel__accroche { font-size: 31px; line-height: 1.35; opacity: .92; margin: 0 0 22px; }

.pt-visuel__devise {
  border-left: 6px solid #FFD600;
  padding-left: 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 33px;
  line-height: 1.35;
  margin: 0 0 24px;
}

/* Seul bloc autorisé à céder : il occupe l'espace restant et, s'il n'y en a
   plus, ses dernières puces disparaissent — jamais le pied de page.
   « min-height: 0 » est indispensable : sans lui, un enfant flex refuse de
   descendre sous la taille de son contenu et repousse le pied hors du cadre. */
.pt-visuel__faits {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pt-visuel__fait {
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,214,0,.35);
  border-radius: 999px;
  padding: 11px 24px;
  font-size: 26px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-visuel__pied {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-top: 3px solid rgba(255,214,0,.35);
  padding-top: 26px;
  margin-top: 28px;
}

/* L'adresse occupe la largeur restante, le code à scanner garde la sienne. */
.pt-visuel__pied > div { min-width: 0; flex: 1 1 auto; }

.pt-visuel__url { font-size: 29px; font-weight: 700; color: #FFD600; word-break: break-all; }
.pt-visuel__asso { font-size: 23px; opacity: .8; margin-top: 8px; }

.pt-visuel__qr {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
}

/* ══ 14. ATELIER DU MEMBRE ═══════════════════════════════════ */

.pt-atelier { max-width: 1000px; margin: 0 auto; padding: var(--sp-lg) var(--sp-md); }

.pt-jauge {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp-lg);
}

.pt-jauge__barre {
  height: 14px;
  background: var(--c-cream-dark);
  border-radius: var(--r-full);
  overflow: hidden;
  margin: var(--sp-sm) 0;
}

.pt-jauge__remplissage {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: var(--r-full);
  transition: width 1s ease;
}

.pt-jauge__valeur {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--c-primary);
  line-height: 1;
}

.pt-todo { list-style: none; padding: 0; margin: var(--sp-sm) 0 0; }

.pt-todo li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  color: var(--c-text-muted);
  font-size: .95rem;
}

.pt-todo i { color: var(--c-primary); font-size: 1.1rem; }

.pt-bloc {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-lg);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.pt-bloc__titre {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--c-secondary);
  margin: 0 0 var(--sp-md);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Choix d'habillage : des pastilles, pas un sélecteur libre ── */
.pt-choix { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }

.pt-choix input { position: absolute; opacity: 0; pointer-events: none; }

.pt-choix label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border: 2px solid var(--c-border);
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: .9rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.pt-choix input:checked + label {
  border-color: var(--c-primary);
  background: var(--c-cream);
  font-weight: 700;
}

.pt-pastille {
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  border: 1px solid rgba(0,0,0,.12);
}

.pt-emojis { display: flex; flex-wrap: wrap; gap: .4rem; }

.pt-emojis input { position: absolute; opacity: 0; pointer-events: none; }

.pt-emojis label {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.pt-emojis label:hover { transform: scale(1.12); }
.pt-emojis input:checked + label { border-color: var(--c-primary); background: var(--c-cream); }

/* ── Programme des semaines ── */
.pt-creneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-sm);
}

.pt-creneau {
  border: 2px dashed var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-sm);
  text-align: center;
  font-size: .88rem;
}

.pt-creneau--pris   { border-style: solid; background: var(--c-cream); border-color: var(--c-cream-dark); }
.pt-creneau--moi    { border-color: var(--c-primary); background: var(--c-cream-dark); }
.pt-creneau--courante { box-shadow: 0 0 0 3px var(--c-accent); }

.pt-creneau__semaine { font-weight: 700; color: var(--c-secondary); }
.pt-creneau__dates   { color: var(--c-text-muted); font-size: .8rem; margin-bottom: .4rem; }

/* Liste des fiches de vitrine dans l'atelier */
.pt-liste-fiches { display: flex; flex-direction: column; gap: var(--sp-sm); }

.pt-liste-fiche {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-sm);
}

.pt-liste-fiche img {
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.pt-liste-fiche__texte { flex: 1; min-width: 0; }
.pt-liste-fiche__titre { font-weight: 700; color: var(--c-secondary); }
.pt-liste-fiche__meta  { font-size: .82rem; color: var(--c-text-muted); }

.pt-masquee { opacity: .55; }

/* ══ 15. MODALES ═════════════════════════════════════════════ */
/* Materialize réinitialise les instances au chargement : ces modales sont
   pilotées par le script de la page et doivent lui échapper. */

.pt-modal { border-radius: var(--r-lg) !important; }

.pt-modal.modal {
  top: 50% !important;
  transform: translateY(-50%) !important;
  max-height: 88vh !important;
}

/* Sur un écran bas de plafond, le contenu dépasse la hauteur permise et
   emporte les boutons hors du cadre. En empilant contenu et pied dans une
   colonne, seul le contenu défile : les boutons restent toujours là.

   La règle vise « .open » — la classe posée par Materialize à l'ouverture —
   car un « display » imposé en permanence empêcherait la modale de se
   refermer. */
.pt-modal.modal.open {
  display: flex !important;
  flex-direction: column;
}

.pt-modal.modal.open .modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Materialize impose au pied de modale une hauteur de 56 px. Dès que les
   boutons passent à la ligne, les derniers sortent du cadre : sur un
   téléphone, « Partager » devenait tout simplement inatteignable. */
.pt-modal .modal-footer {
  flex: 0 0 auto;
  height: auto !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem !important;
}

/* ══ 16. DONNÉES EN IMAGES ═══════════════════════════════════ */
/* Toutes les visualisations du module n'ont qu'une série : le titre la
   nomme, aucune légende n'est donc nécessaire, et une seule teinte
   suffit — l'ambre de la charte, dont l'intensité porte la quantité.
   Le texte garde partout les couleurs d'encre, jamais celle des marques. */

.pt-viz {
  --viz-encre:        var(--c-text);
  --viz-encre-douce:  var(--c-text-muted);
  --viz-grille:       rgba(78,52,46,.12);
  --viz-surface:      var(--c-white);

  /* Rampe séquentielle claire → foncée, de luminosité strictement
     décroissante : c'est elle qui rend les paliers lisibles. */
  --viz-1: #FFF0C2;
  --viz-2: #FFD97A;
  --viz-3: #FFB300;
  --viz-4: #F57C00;
  --viz-5: #C64600;
  --viz-6: #8C3503;

  background: var(--viz-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
}

.pt-viz__titre {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--c-secondary);
  margin: 0 0 .2rem;
}

.pt-viz__aide {
  font-size: .83rem;
  color: var(--viz-encre-douce);
  margin: 0 0 var(--sp-md);
}

.pt-viz__vide {
  text-align: center;
  color: var(--viz-encre-douce);
  padding: var(--sp-lg) 0;
  font-size: .9rem;
}

/* ── Les chiffres, toujours accessibles sous la figure ── */
.pt-viz__table { margin-top: var(--sp-sm); }

.pt-viz__table summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--viz-encre-douce);
}

.pt-viz__table table { font-size: .85rem; margin-top: .5rem; }
.pt-viz__table th { color: var(--viz-encre-douce); font-weight: 600; }

/* ── 16.1 Nuage de mots-clés ──
   La taille d'un mot encode le nombre de membres qui le revendiquent ;
   l'intensité suit la même grandeur. Rien n'y est décoratif. */

.pt-nuage {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) 0;
}

.pt-nuage__mot {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  border: 0;
  border-radius: var(--r-full);
  padding: .3em .85em;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  /* La marque porte la couleur ; le compte reste en encre. */
  background: var(--viz-2);
  color: #4E342E;
}

.pt-nuage__mot[data-palier="1"] { background: var(--viz-1); color: #5C3A16; }
.pt-nuage__mot[data-palier="2"] { background: var(--viz-2); color: #5C3A16; }
.pt-nuage__mot[data-palier="3"] { background: var(--viz-3); color: #4E342E; }
.pt-nuage__mot[data-palier="4"] { background: var(--viz-4); color: #FFF8E1; }
.pt-nuage__mot[data-palier="5"] { background: var(--viz-5); color: #FFF8E1; }
.pt-nuage__mot[data-palier="6"] { background: var(--viz-6); color: #FFF8E1; }

.pt-nuage__mot:hover,
.pt-nuage__mot:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  outline: none;
}

/* Le mot filtré est cerné plutôt que recoloré : sa teinte continue de
   dire sa quantité. */
.pt-nuage__mot.est-actif {
  box-shadow: 0 0 0 3px var(--c-secondary);
}

.pt-nuage__n {
  font-weight: 400;
  font-size: .72em;
  opacity: .85;
}

.pt-nuage__actions {
  text-align: center;
  margin-top: var(--sp-sm);
}

.pt-filtre-actif {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-md);
  font-size: .9rem;
}

/* ── 16.2 Barres horizontales ──
   Une marque fine, arrondie du côté de la valeur et ancrée à la ligne
   de base ; l'étiquette porte l'identité, jamais la couleur seule. */

.pt-barres { display: flex; flex-direction: column; gap: .7rem; }

.pt-barre__ligne {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: .6rem;
}

.pt-barre__label { font-size: .88rem; color: var(--viz-encre); }

.pt-barre__piste {
  height: 14px;
  background: rgba(78,52,46,.07);
  border-radius: 4px;
  overflow: hidden;
}

.pt-barre__valeur-marque {
  height: 100%;
  background: var(--viz-4);
  /* Arrondie côté valeur, d'aplomb sur la ligne de base. */
  border-radius: 0 4px 4px 0;
  min-width: 2px;
  transition: width .8s ease;
}

.pt-barre__n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--viz-encre);
  font-size: .9rem;
}

/* ── 16.3 Histogramme ── */

.pt-histo {
  display: flex;
  align-items: flex-end;
  gap: 2px;              /* l'interstice de surface entre marques voisines */
  height: 160px;
  padding-top: var(--sp-sm);
  border-bottom: 1px solid var(--viz-grille);
}

.pt-histo__colonne {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  position: relative;
  cursor: default;
}

.pt-histo__marque {
  width: 100%;
  background: var(--viz-3);
  border-radius: 4px 4px 0 0;   /* arrondie côté valeur */
  min-height: 2px;
  transition: height .8s ease, background var(--t-fast);
}

.pt-histo__colonne:hover .pt-histo__marque { background: var(--viz-5); }

.pt-histo__n {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--viz-encre);
  margin-bottom: .2rem;
}

.pt-histo__axe {
  display: flex;
  gap: 2px;
  margin-top: .3rem;
}

.pt-histo__axe span {
  flex: 1;
  text-align: center;
  font-size: .68rem;
  color: var(--viz-encre-douce);
}

/* ── 16.4 Courbe des visites ── */

.pt-courbe { position: relative; }
.pt-courbe svg { display: block; width: 100%; height: auto; max-width: 100%; }

.pt-courbe__grille { stroke: var(--viz-grille); stroke-width: 1; }
.pt-courbe__trait  { fill: none; stroke: var(--viz-4); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pt-courbe__aire   { fill: var(--viz-4); opacity: .10; }

.pt-courbe__point {
  fill: var(--viz-5);
  /* Anneau de surface : le point reste lisible même sur le trait. */
  stroke: var(--viz-surface);
  stroke-width: 2;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.pt-courbe__point.est-actif { opacity: 1; }
.pt-courbe__viseur { stroke: var(--c-secondary); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.pt-courbe__viseur.est-actif { opacity: .5; }
.pt-courbe__axe { font-size: 10px; fill: var(--viz-encre-douce); }

/* Infobulle commune aux figures */
.pt-info {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--c-secondary);
  color: var(--c-cream);
  font-size: .8rem;
  line-height: 1.4;
  padding: .4rem .65rem;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate(-50%, -115%);
  transition: opacity var(--t-fast);
  white-space: nowrap;
}

.pt-info.est-actif { opacity: 1; }
.pt-info strong { color: var(--c-accent); }

/* ── Chips des mots-clés sur la page d'un membre ──
   Ici aucune quantité n'est en jeu : toutes les puces ont la même taille.
   Faire varier leur corps donnerait à lire un classement qui n'existe pas. */

.pt-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.pt-chip {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  border-radius: var(--r-full);
  background: var(--c-cream);
  border: 1px solid var(--c-cream-dark);
  color: var(--c-secondary);
  font-size: .9rem;
  font-weight: 600;
  transition: background var(--t-fast);
}

a.pt-chip:hover { background: var(--c-cream-dark); }

/* ══ 17. RESPONSIVE ══════════════════════════════════════════ */

@media (max-width: 860px) {
  .pt-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pt-hero__photo { width: 180px; height: 180px; }
  .pt-hero__meta, .pt-actions { justify-content: center; }
  .pt-devise { text-align: left; }
  .pt-une { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pt-une__fleche { display: none; }

  /* Le slogan passe en trois lignes : les tirets, qui ne servaient qu'à le
     rythmer sur une seule ligne, n'ont plus lieu d'être. */
  .pt-slogan { flex-direction: column; gap: .15rem; }
  .pt-slogan__tiret { display: none; }
}

@media (max-width: 600px) {
  .pt-hero { padding-top: calc(var(--nav-h-mobile) + var(--sp-lg)); }
  .pt-corps, .pt-atelier { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .pt-chiffres { gap: var(--sp-md); }
  .pt-btn { font-size: .84rem; padding: .55rem 1rem; }

  /* ── Figures sur petit écran ──
     Le but n'est pas de rétrécir la figure jusqu'à l'illisible, mais d'en
     montrer moins : le script réduit le nombre de mots du nuage et de jours
     de la courbe, et la mise en page s'allège en conséquence. */
  .pt-viz { padding: var(--sp-sm); }

  .pt-barre__ligne {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label n" "piste piste";
    gap: .2rem .6rem;
  }
  .pt-barre__label { grid-area: label; }
  .pt-barre__n     { grid-area: n; }
  .pt-barre__piste { grid-area: piste; }

  .pt-histo { height: 120px; }
  /* Le décompte au sommet des colonnes encombre : l'infobulle le donne. */
  .pt-histo__n { display: none; }

  .pt-nuage { gap: .4rem; }

  /* Une infobulle ne doit jamais déborder de l'écran. */
  .pt-info { max-width: 70vw; white-space: normal; }

  /* Boutons de modale empilés, l'action principale en tête : les quatre ne
     tiennent pas côte à côte sur 390 px. « column-reverse » remet Partager
     puis Télécharger au-dessus, sans toucher à l'ordre du document — celui
     qui sert à la navigation au clavier. */
  .pt-modal .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .pt-modal .modal-footer .btn,
  .pt-modal .modal-footer .btn-flat,
  .pt-modal .modal-footer a.btn { width: 100%; margin: 0; }
}

/* Écrans très étroits : on descend encore d'un cran. */
@media (max-width: 380px) {
  .pt-histo { height: 96px; }
  .pt-viz__aide { display: none; }
}

/* Respecte le réglage système : pas d'animation imposée. */
@media (prefers-reduced-motion: reduce) {
  .pt-projet { opacity: 1; transform: none; transition: none; }
  .pt-btn:hover, .pt-fiche:hover, .pt-vignette:hover { transform: none; }
  .pt-btn--bravo.pulse i { animation: none; }
}