/* ibudo-asso · page /programmes/ et fiches /programmes/<slug>/
   Composants repris tels quels de la page Programmes de •29 (29/prototype/p29.css, préfixe nf-),
   aux couleurs d'IbudoHub : l'accent est forcé en bleu par system/asso.css, le jaune reste aux formes.
   Dette DS : ces composants vivent ici et dans •29 ; à remonter dans idl/system (un seul composant
   « catalogue de programmes » partagé). Tokens uniquement, aucune couleur en dur hors filets. */
:root{
  --nf-rule:var(--border);
  --nf-hair:1px;
  --nf-photo-rest:grayscale(1) contrast(1.04);
}

/* ---------- En-tête de page ---------- */
.nf-page-hero{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(40px,5vw,80px)}
.nf-crumb{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;font-size:var(--t-sm);color:var(--text-faint)}
.nf-crumb a{color:inherit}
.nf-crumb a:hover{color:var(--text)}
.nf-page-hero h1{font-size:clamp(2.3rem,1.4rem + 4vw,4.8rem);line-height:1.02;letter-spacing:-.03em;max-width:17ch;margin-top:var(--s-6);text-wrap:balance}
.nf-page-hero .intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-8);align-items:end;margin-top:var(--s-8)}
.nf-page-hero .intro p{font-size:var(--t-lead);color:var(--text-muted);line-height:1.5;max-width:56ch;margin:0}
.nf-page-hero .meta{font-size:var(--t-sm);color:var(--text-faint);text-align:right;line-height:1.6}
@media (max-width:760px){.nf-page-hero .intro{grid-template-columns:1fr}.nf-page-hero .meta{text-align:left}}

/* ---------- Tête de section numérotée ---------- */
.nf-head{display:grid;grid-template-columns:minmax(120px,.32fr) minmax(0,1fr);gap:var(--s-6) clamp(24px,5vw,80px);padding-top:var(--s-6);border-top:var(--nf-hair) solid var(--nf-rule);margin-bottom:clamp(36px,5vw,64px)}
.nf-head .idx{font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--t-sm);color:var(--text-faint);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.nf-head .idx b{color:var(--accent);font-weight:var(--fw-semi)}
.nf-head h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3rem);line-height:1.08;letter-spacing:-.022em;max-width:20ch;margin:0}
.nf-head p{margin-top:var(--s-5);font-size:var(--t-lead);color:var(--text-muted);line-height:1.5;max-width:56ch}
@media (max-width:760px){.nf-head{grid-template-columns:1fr}}

/* ---------- Filtres ---------- */
.nf-pfilters{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-bottom:var(--s-10)}
.nf-pfilters[hidden]{display:none}
.nf-pfilters .field{display:grid;gap:var(--s-1);min-width:200px;font-size:var(--t-sm);color:var(--text-muted);margin:0}
.nf-pfilters .select{font-size:16px;min-height:44px}
@media (max-width:560px){.nf-pfilters .field{flex:1 1 100%;min-width:0}}

/* ---------- Cartes du catalogue ---------- */
.nf-pgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8) var(--s-6)}
.nf-pgs:empty{display:none}
@media (max-width:980px){.nf-pgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.nf-pgs{grid-template-columns:1fr}}
.nf-pg{display:flex;flex-direction:column;color:inherit;text-decoration:none;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--nf-rule);overflow:hidden;transition:opacity .8s var(--ease-out),box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease-out)}
.nf-pg[hidden]{display:none}
.nf-pg:hover{box-shadow:0 0 0 1.5px var(--accent);transform:translateY(-2px)}
.nf-pg:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nf-pg .ph{position:relative;aspect-ratio:16/9;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.nf-pg .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--nf-photo-rest);transition:filter var(--dur-4) var(--ease),transform 1s var(--ease-out)}
.nf-pg:hover .ph img,.nf-pg:focus-visible .ph img{filter:none;transform:scale(1.03)}
.nf-pg .ph i.ti{font-size:2.2rem;color:var(--text-faint)}
.nf-pg .ph .nf-etat{position:absolute;left:var(--s-3);top:var(--s-3)}
.nf-pg .bd{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.nf-pg .mt{font-size:var(--t-xs);font-weight:var(--fw-semi);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.nf-pg h3{font-size:var(--t-h4);font-weight:var(--fw-bold);text-wrap:balance;margin:0}
.nf-pg .bd>p{font-size:var(--t-sm);color:var(--text-muted);line-height:1.55;margin:0}
.nf-pg .go{margin-top:auto;padding-top:var(--s-3);font-size:var(--t-sm);font-weight:var(--fw-semi);display:inline-flex;align-items:center;gap:var(--s-1)}
.nf-pg .go i{transition:transform var(--dur-3) var(--ease)}
.nf-pg:hover .go{color:var(--accent-strong)}
.nf-pg:hover .go i{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.nf-pg,.nf-pg .ph img,.nf-pg .go i{transition:none}.nf-pg:hover{transform:none}.nf-pg:hover .ph img{transform:none}}

.nf-kv{margin:var(--s-2) 0 0;display:grid;gap:var(--s-1);font-size:var(--t-sm)}
.nf-kv div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s-3)}
.nf-kv dt{color:var(--text-faint)}
.nf-kv dd{margin:0;color:var(--text)}
.nf-kv-ic dt{display:flex;align-items:center;gap:var(--s-2)}
.nf-kv-ic dt i.ti{color:var(--text-faint);font-size:1em}

/* État : le bleu dit « ouvert », le reste reste neutre (jaune jamais sur texte). */
.nf-etat{text-transform:none;letter-spacing:0;font-size:var(--t-xs);font-weight:var(--fw-semi);padding:5px 12px;background:var(--surface);color:var(--text-muted);border-color:var(--border)}
.nf-etat.is-ouvert{background:var(--accent);color:var(--on-accent,#fff);border-color:transparent}
.nf-etat.is-termine{background:var(--surface-2)}
.nf-aucun{margin-top:var(--s-6);color:var(--text-muted)}
.nf-aucun[hidden]{display:none}

/* ---------- Encadré final ---------- */
.nf-empty{border-radius:var(--r-xl);padding:clamp(24px,4vw,48px);background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--nf-rule)}
.nf-empty h2{font-size:var(--t-h3);margin:0;text-wrap:balance}
.nf-empty p{font-size:var(--t-lead);line-height:1.55;max-width:56ch;color:var(--text-muted);margin-top:var(--s-3)}
.nf-empty .btn{margin-top:var(--s-6)}

/* ---------- Fiche d'un programme ---------- */
.nf-proj-page{padding-top:clamp(40px,6vw,88px);padding-bottom:var(--s-10)}
.nf-proj-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:end}
.nf-proj-hero h1{font-size:clamp(2.3rem,1.5rem + 3.6vw,4.4rem);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1.02;margin-top:var(--s-4);text-wrap:balance}
.nf-proj-hero .lede{font-size:var(--t-lead);color:var(--text-muted);margin-top:var(--s-5);max-width:46ch;line-height:1.5}
.nf-proj-hero .ph{margin:0;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-2)}
.nf-proj-hero .ph img{width:100%;height:100%;object-fit:cover;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
@media (max-width:860px){.nf-proj-hero{grid-template-columns:minmax(0,1fr)}.nf-proj-hero .ph{order:-1}}
.nf-pg-state{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-6)}
.nf-pg-voie{font-size:var(--t-xs);font-weight:var(--fw-semi);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.nf-pg-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}

.nf-glance{margin:clamp(40px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3)}
.nf-glance>div{position:relative;border-radius:var(--r-lg);padding:var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 40px);background:var(--surface);box-shadow:0 0 0 1px var(--nf-rule);min-width:0}
.nf-glance i.ti{position:absolute;left:var(--s-5);top:var(--s-5);width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);font-size:1.05rem}
.nf-glance dt{font-size:var(--t-xs);font-weight:var(--fw-semi);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.nf-glance dd{margin:var(--s-1) 0 0;font-family:var(--font-display);font-weight:var(--fw-semi);line-height:1.35;text-wrap:balance}
@media (max-width:560px){.nf-glance{grid-template-columns:1fr 1fr}.nf-glance>div{padding:var(--s-4);padding-top:calc(var(--s-4) + 36px)}.nf-glance i.ti{left:var(--s-4);top:var(--s-4)}}

.nf-proj-story{max-width:68ch;margin-top:clamp(56px,8vw,112px)}
.nf-proj-story section+section{margin-top:var(--s-12)}
.nf-proj-story h2{font-size:var(--t-h3);font-weight:var(--fw-bold)}
.nf-proj-story p{font-size:var(--t-lead);line-height:1.65;margin-top:var(--s-4)}
.nf-proj-story .nf-pg-cta{margin-top:var(--s-12)}
.nf-rub h2{display:flex;align-items:center;gap:var(--s-3);margin:0}
.nf-rub h2 i.ti{font-size:1.1em;color:var(--accent-strong);flex:none}
.nf-rub .nf-steps{margin-top:var(--s-4)}

.nf-steps{list-style:none;padding:0;counter-reset:s;border-top:var(--nf-hair) solid var(--nf-rule)}
.nf-steps li{counter-increment:s;display:grid;grid-template-columns:3.5em minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) 0;border-bottom:var(--nf-hair) solid var(--nf-rule);line-height:1.6}
.nf-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-display);font-weight:var(--fw-semi);color:var(--accent-strong);font-variant-numeric:tabular-nums}
.nf-steps li b{font-family:var(--font-display);font-weight:var(--fw-semi)}
.nf-steps li span{color:var(--text-muted)}
.nf-check{list-style:none;padding:0;margin-top:var(--s-4);display:grid;gap:var(--s-3)}
.nf-check li{position:relative;padding-left:calc(var(--s-6) + 4px);line-height:1.55}
.nf-check li::before{content:"\ea5e";font-family:"tabler-icons";position:absolute;left:0;top:.05em;color:var(--accent);font-size:1.1em}
.nf-gets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s-4);margin-top:var(--s-12);max-width:1100px}
.nf-get{border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--nf-rule)}
.nf-get .nf-rub h2{font-size:var(--t-h4)}
.nf-gets + .nf-proj-story{margin-top:var(--s-12)}

/* ---------- Pages voisines ---------- */
.nf-next{display:flex;justify-content:space-between;align-items:end;gap:var(--s-6);padding-block:var(--s-10);margin-top:var(--s-12);border-top:var(--nf-hair) solid var(--nf-rule)}
.nf-next a{display:block;color:inherit;text-decoration:none;min-width:0}
.nf-next small{font-size:var(--t-sm);color:var(--text-faint)}
.nf-next b{display:block;font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem);letter-spacing:-.035em;line-height:1.05;margin-top:var(--s-2);transition:color var(--dur-3) var(--ease);text-wrap:balance}
.nf-next a:hover b{color:var(--accent)}
.nf-next .r{text-align:right;margin-left:auto}

/* ==========================================================================
   Allègement (2026-11-04, retour de Hermas : « très moche »). Même échelle que le lot 3 de •29
   (29/prototype/p29.css, « allègement ») : le thème d'ibudohub.co a des jetons de titre plus
   grands que ceux de •29, d'où des tailles écrites ici en rem plutôt que var(--t-h3).
   ========================================================================== */
.nf-page-hero h1,.nf-proj-hero h1{font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:var(--fw-bold);line-height:1.08;letter-spacing:-.022em;max-width:20ch}
.nf-page-hero .intro p,.nf-proj-hero .lede{font-size:clamp(1.0625rem,1rem + .2vw,1.15rem);text-wrap:pretty}
.nf-head h2{font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem);font-weight:var(--fw-bold);line-height:1.15;letter-spacing:-.015em;max-width:24ch}
.nf-pg h3{font-size:1.25rem;letter-spacing:-.01em}
.nf-proj-story h2,.nf-rub h2{font-size:1.5rem;font-weight:var(--fw-bold);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.nf-rub h2 i.ti{font-size:1rem;width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent-soft)}
.nf-get .nf-rub h2{font-size:1.125rem;letter-spacing:-.01em}
.nf-proj-story p{font-size:1.125rem;line-height:1.7;color:var(--text-muted);text-wrap:pretty}
.nf-proj-story section+section{margin-top:var(--s-10)}
.nf-check li,.nf-steps li{font-size:1rem}
.nf-empty h2{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);letter-spacing:-.015em}
.nf-next b{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);font-weight:var(--fw-bold);letter-spacing:-.015em}
@media (max-width:760px){.nf-next b{font-size:clamp(1.1rem,1rem + 1vw,1.3rem)}}

/* Fiche : colonne de lecture + encart qui suit le défilement (ordinateur). Au-dessous de 1024 px,
   l'encart disparaît : les boutons sont déjà en haut et en bas de la fiche. */
.nf-proj-aside{display:none}
@media (min-width:1024px){
  .nf-proj-body{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:clamp(40px,5vw,88px);align-items:start}
  .nf-proj-aside{display:block;position:sticky;top:96px;margin-top:clamp(56px,8vw,112px)}
  .nf-proj-main .nf-gets{max-width:none}
}
.nf-aside-card{border-radius:var(--r-xl);background:var(--surface);box-shadow:0 0 0 1px var(--nf-rule),0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.12)}
.nf-aside-card .bd{padding:var(--s-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.nf-aside-card .t{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.25rem;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.nf-aside-card .when{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--text-muted)}
.nf-aside-card .when i.ti{color:var(--accent-strong)}
.nf-aside-cta{display:grid;gap:var(--s-2);width:100%;margin-top:var(--s-3)}
.nf-aside-cta .btn{width:100%;justify-content:center;padding-inline:var(--s-4);font-size:var(--t-sm);min-height:44px}
.nf-pg-cta .btn:active,.nf-aside-cta .btn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.nf-pg-cta .btn:active,.nf-aside-cta .btn:active{transform:none}}

/* ---------- Parcours (fiche) : six étapes, celles du programme en avant ---------- */
.nf-parcours{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-2);counter-reset:none}
.nf-parcours li{position:relative;display:grid;justify-items:center;gap:var(--s-2);text-align:center;padding-top:2px}
.nf-parcours li::before{content:"";position:absolute;top:19px;left:calc(-50% + 20px);right:calc(50% + 20px);height:2px;background:var(--nf-rule)}
.nf-parcours li:first-child::before{display:none}
.nf-parcours .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-semi);font-variant-numeric:tabular-nums;color:var(--text-faint);background:var(--surface);box-shadow:0 0 0 1px var(--nf-rule)}
.nf-parcours .t{font-size:var(--t-sm);line-height:1.3;color:var(--text-muted);text-wrap:balance}
.nf-parcours li.on .n{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--accent-soft)}
.nf-parcours li.on .t{color:var(--text);font-weight:var(--fw-semi)}
.nf-parcours li.on+li.on::before{background:var(--accent)}
@media (max-width:640px){
  .nf-parcours{grid-template-columns:1fr;gap:0}
  .nf-parcours li{grid-template-columns:36px 1fr;justify-items:start;align-items:center;text-align:left;gap:var(--s-3);padding:var(--s-2) 0}
  .nf-parcours li::before{top:calc(-1 * var(--s-2));left:17px;right:auto;width:2px;height:calc(2 * var(--s-2))}
}

/* ---------- Filtres : cinq listes, deux par ligne au téléphone ---------- */
@media (max-width:560px){
  .nf-pfilters{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .nf-pfilters[hidden]{display:none}
  .nf-pfilters .field{min-width:0}
}

/* ---------- D'un coup d'œil : chaque tuile prend la largeur de son texte ----------
   Grille à colonnes égales = un « Pour qui » long sur cinq lignes à côté de tuiles d'une ligne.
   En flex, la tuile part de la largeur de son contenu puis les tuiles d'une rangée se partagent
   la place restante : les textes longs s'étalent, les courts restent compacts, hauteurs proches. */
.nf-glance{display:flex;flex-wrap:wrap}
.nf-glance>div{flex:1 1 auto;min-width:min(100%,11rem);max-width:100%}
.nf-glance dd{text-wrap:pretty}
/* Dernière rangée : un élément fantôme absorbe la place libre, la tuile seule ne s'étire pas. */
.nf-glance::after{content:"";flex:999 1 0;min-width:0}
/* Téléphone : icône à gauche comme sur ordinateur (l'icône au-dessus doublait la hauteur). */
@media (max-width:560px){
  .nf-glance{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;gap:var(--s-2)}
  .nf-glance::after{display:none}
  .nf-glance>div{min-width:0}
  .nf-glance>.is-long{grid-column:1/-1}
  .nf-glance>div{padding:var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 38px)}
  .nf-glance i.ti{left:var(--s-3);top:var(--s-3)}
}