/* Programme. Trois blocs empilés — le déroulé, les tables rondes, les
   animations. Un bloc sans ligne dans la feuille est masqué par program.js. */

.prog2{position:relative;overflow-x:clip;
  padding:calc(var(--nav-h) + 2.6rem) 0 3.5rem}

.prog2-head,.prog2-body{position:relative;z-index:1}
.prog2-lead{margin:1rem 0 0;color:var(--muted);
  font-size:clamp(.92rem,1.1vw,1.04rem);line-height:1.6;max-width:52ch}
.prog2-lead[hidden]{display:none}

.prog2-body{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.2rem);
  margin-top:clamp(1.8rem,3.5vw,2.8rem)}

/* ---------- l'en-tête d'un bloc ---------- */
.prog-block[hidden]{display:none}
.prog-block-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.1rem}
.prog-block-icon{flex:0 0 auto;display:grid;place-items:center;width:2.9rem;height:2.9rem;
  border-radius:50%;background:color-mix(in oklab,var(--lime) 30%,var(--paper));
  color:var(--moss-deep,var(--moss))}
.prog-block-icon svg{width:1.4rem;height:1.4rem}
.prog-block-title{margin:0;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.7rem);letter-spacing:.01em;color:var(--teal-deep);line-height:1.1}
.prog-block-sub{margin:.25rem 0 0;color:var(--muted);font-size:clamp(.82rem,.98vw,.93rem);line-height:1.5}
.prog-block-sub[hidden]{display:none}

/* le bouton d'inscription : vert foncé plein, il doit se voir */
.prog-block-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.35rem;border-radius:999px;
  background:var(--moss-deep,var(--moss));color:var(--paper);
  font-weight:800;font-size:.86rem;letter-spacing:.01em;
  box-shadow:0 12px 26px -14px rgba(11,53,34,.75);
  transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.prog-block-cta svg{width:1rem;height:1rem;transition:transform .25s var(--ease)}
.prog-block-cta:hover{background:var(--moss);transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(11,53,34,.85)}
.prog-block-cta:hover svg{transform:translateX(4px)}

/* ---------- le déroulé : des polaroïds punaisés ----------
   L'emplacement photo reste vide tant qu'il n'y a pas de clichés ; il tient
   déjà sa place pour que rien ne bouge le jour où on les ajoute. */
/* La tige court derrière les cartes, au niveau des rubans : les polaroïds ont
   l'air d'y être accrochés. Tracé par program.js d'après la position réelle des
   cartes, la grille changeant avec la largeur. */
.day{position:relative}
.day-stem{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible}
.day-stem-line{fill:none;stroke:var(--moss);stroke-width:2.6;stroke-linecap:round;opacity:.7}
.day-stem-leaf{fill:color-mix(in oklab,var(--lime) 70%,var(--moss));opacity:.85}
.day-list{position:relative;z-index:1;list-style:none;margin:0;padding:1.5rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,11.5rem));
  grid-auto-rows:auto;gap:1.4rem .9rem;justify-content:center}
.polaroid{display:grid;grid-template-rows:subgrid;grid-row:span 2;
  gap:.55rem;min-width:0;max-width:16rem}
/* le cadre photo descend en bas : les cartes s'alignent aussi par le bas */
.polaroid-card{display:flex;flex-direction:column}
.polaroid-frame{margin-top:auto}
.polaroid-card{position:relative;background:var(--paper);
  border-radius:.35rem;padding:1.5rem .85rem .95rem;
  box-shadow:0 14px 30px -20px rgba(11,53,34,.65),0 1px 0 rgba(11,53,34,.06);
  transform:rotate(var(--tilt,0deg));transition:transform .25s var(--ease)}
.polaroid:hover .polaroid-card{transform:rotate(0deg) translateY(-3px)}
/* le ruban adhésif, en haut au centre */
.polaroid-tape{position:absolute;left:50%;top:-.55rem;translate:-50% 0;
  width:3.4rem;height:1.1rem;border-radius:2px;rotate:-3deg;
  background:color-mix(in oklab,var(--lime) 52%,var(--paper));
  opacity:.85;box-shadow:0 1px 2px rgba(11,53,34,.12)}
.polaroid-time{display:block;padding:0 0 .45rem;border-bottom:1px solid var(--line);
  color:var(--moss-deep,var(--moss));font-family:var(--font-display);
  font-size:.95rem;letter-spacing:.05em}
.polaroid-title{margin:.55rem 0 0;font-size:.92rem;font-weight:800;
  color:var(--bark);line-height:1.25}
.polaroid-ico{display:block;margin:.35rem 0 0;color:var(--moss-deep,var(--moss))}
.polaroid-ico svg{width:1.3rem;height:1.3rem}
/* emplacement photo : vide pour l'instant */
.polaroid-frame{display:block;margin-top:.6rem;aspect-ratio:1.15;border-radius:2px;overflow:hidden;
  background:repeating-linear-gradient(135deg,
    color-mix(in oklab,var(--moss) 7%,var(--paper)) 0 10px,
    color-mix(in oklab,var(--moss) 11%,var(--paper)) 10px 20px);
  border:1px solid color-mix(in oklab,var(--moss) 14%,var(--line))}
.polaroid-frame img{display:block;width:100%;height:100%;object-fit:cover}
.polaroid-cap{margin:0;padding:0 .3rem;color:var(--muted);
  font-size:.78rem;line-height:1.45}

/* ---------- tables rondes et animations : les cartes du book ---------- */
.prog-cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem}
.prog-cards>li{display:flex}
.prog-card{display:flex;flex-direction:column;gap:.5rem;width:100%;height:100%;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:1.1rem;
  padding:1.15rem 1.3rem 1.2rem;cursor:pointer;font:inherit;color:inherit;
  box-shadow:0 10px 26px -22px rgba(11,53,34,.4);min-width:0;
  transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.prog-card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--moss) 32%,var(--line));
  box-shadow:0 18px 34px -24px rgba(11,53,34,.6)}
.prog-card:hover .prog-card-more{color:var(--clay)}
.prog-card:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.prog-card-top{display:flex}
/* la photo de la ligne, à fond perdu en tête de carte */
.prog-card-photo{display:block;margin:-1.15rem -1.3rem .35rem;aspect-ratio:16/9;overflow:hidden;
  border-radius:calc(1.1rem - 1px) calc(1.1rem - 1px) 0 0;background:var(--cream)}
.prog-card-photo img{display:block;width:100%;height:100%;object-fit:cover}
.prog-card-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:color-mix(in oklab,var(--lime) 26%,var(--paper));
  color:var(--moss-deep,var(--moss))}
.prog-card-icon svg{width:1.3rem;height:1.3rem}
.prog-card-title{font-size:1.02rem;font-weight:800;color:var(--bark);line-height:1.3}
.prog-card-when{color:var(--moss-deep,var(--moss));font-weight:700;font-size:.86rem}
.prog-card-tag{align-self:flex-start;padding:.18rem .62rem;border-radius:999px;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--tone-bg,color-mix(in oklab,var(--teal) 14%,var(--paper)));
  color:var(--tone-fg,var(--teal-deep))}
.prog-card-desc{color:var(--muted);font-size:.88rem;line-height:1.55}
.prog-card-meta{margin-top:auto;padding-top:.7rem;font-size:.84rem;
  border-top:1px solid var(--line)}
.prog-card-more{color:var(--moss);font-weight:700;transition:color .2s}

/* La fiche détaillée porte ses propres classes : book.css n'est pas chargé
   sur cette page, elle ne peut donc pas emprunter celles de l'annuaire. */
.prog-detail-top{display:flex;align-items:center;gap:.95rem}
.prog-detail-icon{flex:0 0 auto;display:grid;place-items:center;width:54px;height:54px;
  border-radius:14px;background:color-mix(in oklab,var(--lime) 26%,var(--paper));
  color:var(--moss-deep,var(--moss))}
.prog-detail-icon svg{width:1.6rem;height:1.6rem}
.prog-detail-id{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-width:0}
.prog-detail-title{margin:0;font-family:var(--font-display);text-transform:uppercase;
  font-size:1.12rem;color:var(--bark);line-height:1.15}
.prog-detail-when{margin:1rem 0 0;color:var(--moss-deep,var(--moss));font-weight:700;font-size:.92rem}
.prog-detail-desc{margin:.55rem 0 0;color:var(--ink);font-size:.95rem;line-height:1.65;white-space:pre-line}
.prog-detail-when[hidden],.prog-detail-desc[hidden]{display:none}
.prog-detail-photo{margin:0 0 1rem;aspect-ratio:16/9;overflow:hidden;border-radius:.9rem;
  background:var(--cream)}
.prog-detail-photo[hidden]{display:none}
.prog-detail-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- écrans étroits ---------- */
@media (max-width:960px){
  .prog2{padding:calc(var(--nav-h) + 1.6rem) 0 2.4rem}

  .prog-block-head{gap:.7rem}
  /* flex:1 1 0 et min-width:0 : sans eux le bloc titre réclame sa largeur
     idéale, dépasse la place restante et bascule sous la pastille. */
  .prog-block-head > div{flex:1 1 0;min-width:0}
  .prog-block-cta{margin-left:0;width:100%;justify-content:center}
  .day-list{grid-template-columns:repeat(auto-fit,minmax(8.5rem,10.5rem));gap:1.9rem .7rem}
  .polaroid{max-width:none}
  .prog-cards{gap:.8rem}
}

/* ---------- inscription à une table ronde ---------- */
/* Les paires prénom/nom et année/filière tiennent sur une ligne : le
   formulaire reste court, donc lisible sans faire défiler la modale. */
.signup-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
/* min-width:0 et width:100% : un <input> garde sinon sa taille par défaut d'une
   vingtaine de caractères, refuse de se réduire et déborde de la modale. */
.signup .field{min-width:0}
.signup input,.signup select{width:100%;min-width:0}
.signup .field label{font-size:.72rem}
.signup select:disabled{opacity:.6}
/* le message n'occupe de la place que lorsqu'il a quelque chose à dire */
.signup .err{display:block;font-size:.72rem;line-height:1.3;color:#b3341c}
.signup .err:empty{display:none}
.signup .field.has-error input,.signup .field.has-error select{border-color:#b3341c}
/* Les paires tiennent à deux jusqu'à 360 px une fois les rembourrages allégés :
   en dessous, mieux vaut un champ par ligne qu'un champ trop étroit. */
@media (max-width:360px){
  .signup-row{grid-template-columns:minmax(0,1fr)}
}