/* Khallot — la page de l'association (projet.html), refaite le 3 nov. 2026.
   Une idée par partie : le registre officiel en haut, les deux conseillers
   (vitrine.css), l'équipe en ours, la facture de l'année que la cagnotte règle
   en direct, la vraie page des statuts avec la phrase surlignée. Les documents
   sont des objets de papier, dans la lumière du reste du site. Sans
   JavaScript, tout est visible et fixe : la facture sans la jauge, la phrase
   déjà surlignée. */

/* ── Le registre ─────────────────────────────────────────────────────── */
.p-registre { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; max-width: 1000px;
  margin: 44px auto 0; padding: 0 0 clamp(24px, 4vw, 48px); text-align: left; }
.p-registre > div { padding: 2px clamp(16px, 2.2vw, 30px); border-left: 1px solid var(--filet); }
.p-registre > div:first-child { border-left: 0; }
.p-registre dt { font-size: 12.5px; font-weight: 600; color: var(--gris); }
.p-registre dd { max-width: 23ch; margin: 5px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--nuit); }
.p-registre a { color: var(--nuit); text-underline-offset: .22em; }

/* ── L'équipe : le texte reste en vue pendant que la liste défile ──────── */
.v-equipe-gens b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.v-equipe-gens b em { padding: 3px 8px; border-radius: 99px; background: #e5f4ef; font-size: 12px; font-style: normal; font-weight: 650;
  line-height: 1.2; letter-spacing: 0; color: var(--menthe-sombre); }
@media (min-width: 1000px) { .v-equipe-texte { position: sticky; top: 112px; } }

/* ── Déjà publié : trois cartes, les trois verbes de la mission ───────── */
.p-bilan-tete { max-width: 780px; margin: 0 auto clamp(44px, 5.5vw, 72px); text-align: center; }
.p-bilan-tete p { max-width: 520px; margin: 22px auto 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--encre-2); text-wrap: balance; }
.p-bilan-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.p-bilan-carte { display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 36px); border-radius: 28px; }
.p-bilan-carte.t-sable { background: var(--voile-sable); }
.p-bilan-carte.t-bleu { background: var(--voile-bleu); }
.p-bilan-carte.t-menthe { background: var(--voile-menthe); }
.p-bilan-carte h3 { font-size: clamp(22px, 2vw, 26px); }
.p-bilan-carte > p { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--encre-2); }
.p-bilan-carte ul { display: grid; margin: auto 0 0; padding: 28px 0 0; list-style: none; }
.p-bilan-carte li a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 16px 0;
  border-top: 1px solid rgba(16, 29, 53, .12); color: inherit; text-decoration: none; }
/* Une largeur de chiffre commune par carte : les libellés s'alignent. */
.p-bilan-carte strong { grid-row: span 2; min-width: 1.75em; font-size: clamp(40px, 3.6vw, 52px); font-weight: 720; line-height: .95; letter-spacing: -.05em;
  color: var(--nuit); font-variant-numeric: tabular-nums; }
.p-bilan-carte.t-menthe strong { min-width: 2.2em; }
.p-bilan-carte li span:not([data-compte]) { align-self: center; font-size: 14.5px; line-height: 1.4; color: var(--encre-2); }
.p-bilan-carte li a:hover span:not([data-compte]) { color: var(--nuit); text-decoration: underline; text-underline-offset: .22em; }

/* ── Le budget : la facture de l'année ───────────────────────────────── */
.p-budget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(40px, 6vw, 96px); align-items: center; }
.p-budget-texte h2 { font-size: var(--t-2); }
.p-budget-texte > p:not(.v-don-note) { max-width: 470px; margin-top: 22px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; color: var(--encre-2); }
.p-budget .v-formules { max-width: 470px; margin-top: 34px; }
.p-budget .v-don-note { max-width: 470px; }

.p-facture { position: relative; margin: 0; padding: clamp(24px, 2.6vw, 34px); border-radius: 20px; background: #fffdf8;
  box-shadow: 0 1px 2px rgba(16, 29, 53, .06), 0 36px 64px -30px rgba(16, 29, 53, .34); rotate: 1deg; }
.p-facture figcaption { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1.5px dashed rgba(16, 29, 53, .18); }
.p-facture figcaption b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--nuit); }
.p-facture figcaption span { font-size: 13.5px; color: var(--gris); }
.p-facture-lignes { margin: 0; padding: 0; list-style: none; }
.p-facture-lignes li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px dashed rgba(16, 29, 53, .14); }
/* La case : vide, puis cochée en menthe quand la cagnotte a réglé la ligne. */
.p-facture-lignes li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(16, 29, 53, .22);
  transition: background-color .5s var(--sortie), box-shadow .5s var(--sortie); }
.p-facture-lignes li.financee::before { background: var(--menthe); box-shadow: none; }
.p-facture-lignes li.financee::after { content: ""; position: absolute; left: 7px; top: 21px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.p-facture-lignes li.en-cours::before { box-shadow: inset 0 0 0 1.5px var(--menthe); background: conic-gradient(var(--menthe) var(--part, 0%), transparent 0); }
.p-facture-lignes span { font-size: 16px; font-weight: 620; line-height: 1.3; letter-spacing: -.01em; color: var(--nuit); }
.p-facture-lignes small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 450; letter-spacing: 0; color: var(--gris); }
.p-facture-lignes em { display: block; margin-top: 6px; font-size: 13px; font-style: normal; font-weight: 650; color: var(--menthe-sombre); }
.p-facture-lignes b { font-size: 16px; font-weight: 650; color: var(--nuit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-facture-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; padding-top: 16px; border-top: 2px solid var(--nuit); }
.p-facture-total span { font-size: 15px; font-weight: 650; color: var(--nuit); }
.p-facture-total b { font-size: 26px; font-weight: 720; letter-spacing: -.035em; color: var(--nuit); font-variant-numeric: tabular-nums; }
.p-facture-direct { margin-top: 22px; }
.p-facture-direct[hidden] { display: none; }
.p-facture-jauge { height: 10px; border-radius: 99px; background: #eee8dc; overflow: hidden; }
.p-facture-jauge i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--menthe); transition: width 1.6s var(--sortie) .2s; }
.p-facture-direct p { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--encre-2); }
.p-facture-direct strong { font-weight: 700; color: var(--menthe-sombre); }
.p-facture-lien { display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--nuit); text-underline-offset: .22em; }

/* ── La promesse : la page des statuts ───────────────────────────────── */
.p-promesse-tete { max-width: 780px; margin: 0 auto clamp(48px, 6vw, 84px); text-align: center; }
.p-promesse-tete p { max-width: 540px; margin: 22px auto 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--encre-2); text-wrap: balance; }
.p-promesse-corps { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.p-feuille { margin: 0; padding: clamp(28px, 3.6vw, 52px); border-radius: 6px; background: #fffdf8;
  box-shadow: 0 1px 2px rgba(16, 29, 53, .06), 0 44px 70px -38px rgba(16, 29, 53, .36); rotate: -1.2deg; }
.p-feuille-tete { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--filet);
  font-size: 12.5px; font-weight: 550; color: var(--gris); }
.p-feuille-titre { margin-top: 24px; font-size: clamp(22px, 2vw, 26px); font-weight: 700; letter-spacing: -.03em; color: var(--nuit); }
.p-feuille blockquote { margin: 14px 0 0; }
.p-feuille blockquote p { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.7; color: var(--encre-2); }
.p-feuille blockquote p + p { margin-top: 14px; }
/* Le surligneur : sans JavaScript, la phrase est déjà surlignée ; vitrine.js la surligne au passage. */
.p-feuille mark { padding: 0 1px; color: var(--nuit); background: linear-gradient(transparent 14%, #bdeedf 14%, #bdeedf 90%, transparent 90%) no-repeat 0 0 / 100% 100%; }
.p-feuille figcaption { margin-top: 26px; font-size: 14.5px; }
.p-feuille figcaption a { font-weight: 600; color: var(--nuit); text-underline-offset: .22em; }
.p-engagements { margin: 0; padding: 0; list-style: none; }
.p-engagements li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--filet); }
.p-engagements li:last-child { border-bottom: 1px solid var(--filet); }
.p-engagements strong { font-size: clamp(20px, 1.8vw, 24px); font-weight: 680; line-height: 1.15; letter-spacing: -.03em; color: var(--nuit); }
.p-engagements span { font-size: 15.5px; line-height: 1.5; color: var(--encre-2); }
.p-engagements a { justify-self: start; margin-top: 4px; padding: 4px 11px; border-radius: 99px; background: #e5f4ef;
  font-size: 13px; font-weight: 650; color: var(--menthe-sombre); text-decoration: none; transition: background-color .25s; }
.p-engagements a:hover { background: #cdebe1; }
.p-promesse .v-lien { margin-top: clamp(36px, 4vw, 56px); }

/* ── Rejoindre : trois portes en grandes lignes ──────────────────────── */
.p-rejoindre { max-width: 1040px; }
.p-rejoindre h2 { text-align: center; }
.p-rejoindre-liste { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--nuit); }
.p-rejoindre-liste a { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) 44px; gap: 8px 32px; align-items: center;
  padding: clamp(22px, 2.6vw, 32px) 4px; border-bottom: 1px solid var(--filet); color: inherit; text-decoration: none; }
.p-rejoindre-liste strong { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; color: var(--nuit); }
.p-rejoindre-liste span { font-size: 15.5px; line-height: 1.5; color: var(--encre-2); }
.p-rejoindre-liste span b { font-weight: 600; color: var(--nuit); white-space: nowrap; }
.p-rejoindre-liste a::after { content: "→"; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(16, 29, 53, .18); font-size: 18px; color: var(--nuit);
  transition: background-color .3s var(--sortie), color .3s var(--sortie), translate .4s var(--sortie); }
.p-rejoindre-liste a:hover::after, .p-rejoindre-liste a:focus-visible::after { background: var(--nuit); color: #fff; translate: 4px 0; }

@media (max-width: 999px) {
  .p-bilan-cartes { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .p-budget, .p-promesse-corps { grid-template-columns: 1fr; }
  .p-facture { width: min(100%, 520px); justify-self: center; }
  .p-feuille { rotate: -.6deg; }
}
@media (max-width: 760px) {
  .p-rejoindre-liste a { grid-template-columns: minmax(0, 1fr) 40px; }
  .p-rejoindre-liste span { grid-column: 1; }
  .p-rejoindre-liste a::after { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; }
  .p-registre { grid-template-columns: 1fr 1fr; gap: 18px 0; max-width: 460px; }
  .p-registre > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .p-facture { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .p-facture-jauge i, .p-facture-lignes li::before, .p-rejoindre-liste a::after { transition: none; }
}