/* Festival du Fjord, version « Sobre » : page Programmation.
   L'affiche, les cartes photo, le souvenir et les preuves viennent de style.css ; ici : mise en page propre à la page. */

/* ---------- L'affiche : suit l'intro ; sur bureau, les trois soirs sont visibles d'un coup ---------- */
.prog-affiche { padding-top: clamp(40px, 5vw, 64px); }
@media (min-width: 701px) {
  .prog-affiche .onglets { display: none; }
  .prog-affiche .affiche__jours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 32px); padding-top: 28px; }
  .prog-affiche .jour--jeudi { grid-column: 1 / -1; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--ligne); }
}

/* ---------- Prévente à l'aveugle : trois étapes numérotées ---------- */
.aveugle__tete { display: grid; gap: 14px; }
.aveugle__tete .surtitre { margin: 0; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.etape { display: grid; grid-template-columns: 1fr auto; align-content: start; align-items: center; gap: 14px 16px; padding-top: 22px; border-top: 3px solid var(--encre); }
.etape__num { font: 700 clamp(2.6rem, 4vw, 3.4rem)/0.85 var(--f-titre); color: var(--accent); letter-spacing: 0.01em; }
.etape__icone { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--accent); color: var(--accent); font-size: 1.5rem; }
.etape h3 { grid-column: 1 / -1; margin: 4px 0 0; font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.1; letter-spacing: 0.01em; }
.etape p { grid-column: 1 / -1; margin: 0; max-width: 42ch; color: var(--encre-2); }

/* ---------- Ce qui se passe au festival ---------- */
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2.4vw, 32px); }
.type { display: grid; align-content: start; gap: 18px; min-width: 0; }
.type__nom {
  display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ligne);
  font: 700 1.1rem/1 var(--f-titre); letter-spacing: 0.12em; text-transform: uppercase;
}
.type__nom i { font-size: 1.35rem; color: var(--accent); }
.moment { margin: 0; min-width: 0; }
.activites .carte-photo, .types .carte-photo { align-content: start; }
.moment figcaption { display: grid; gap: 14px; }
.type__aussi { margin: 0; padding-left: 14px; border-left: 3px solid var(--jaune); font-size: 0.95rem; color: var(--encre-2); }

/* Humour : la photo sert de fond, le texte reste lisible */
.moment--photo-fond {
  --voile: linear-gradient(180deg, rgba(10, 14, 22, 0.3) 0%, rgba(10, 14, 22, 0.6) 40%, rgba(10, 14, 22, 0.92) 100%);
  --pos: 50% 40%;
  aspect-ratio: 4 / 3; display: grid; align-content: end; gap: 8px;
  padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-img); box-shadow: var(--ombre);
}
.moment--photo-fond p { margin: 0; }
.moment__gros { font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--f-titre); text-transform: uppercase; letter-spacing: 0.01em; }
.moment__txt { font-weight: 500; color: rgba(255, 255, 255, 0.92); }
.moment__note { font-size: 0.9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.78); padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.22); }

/* Activités : trois photos, puis trois moments sans photo sur une rangée nette */
.type--activites { margin-top: clamp(44px, 5vw, 72px); }
.moments-txt { list-style: none; margin: clamp(8px, 1vw, 12px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.moment-txt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start;
  padding: 20px 22px; border: 1px solid var(--ligne); border-top: 3px solid var(--accent); border-radius: var(--r); background: var(--sable);
}
.moment-txt .icone-rond { grid-row: 1 / span 2; width: 48px; height: 48px; font-size: 1.4rem; }
.moment-txt strong { font: 700 1.35rem/1.1 var(--f-titre); text-transform: uppercase; letter-spacing: 0.02em; padding-top: 2px; }
.moment-txt span:last-child { color: var(--encre-2); font-size: 0.97rem; line-height: 1.5; }

/* ---------- Retour sur 2026 (fond photo, comme l'accueil) ---------- */
.prog-retour .souvenir__noms .retour-2025 dd { color: rgba(255, 255, 255, 0.88); }

/* ---------- Fin : citation, appel, deux actions ---------- */
.fin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px clamp(32px, 5vw, 80px); align-items: center; }
.fin__txt { display: grid; gap: 18px; justify-items: start; }
.fin__citation { margin: 0; padding-left: 18px; border-left: 3px solid var(--accent); }
.fin__citation p { margin: 0; font: 600 1.35rem/1.2 var(--f-titre); letter-spacing: 0.02em; color: var(--encre); }
.fin__citation footer { margin-top: 6px; font-size: 0.9rem; color: var(--encre-2); }
.fin__actions { display: grid; gap: 12px; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .moments-txt { grid-template-columns: 1fr; }
  .fin { grid-template-columns: 1fr; }
  .fin__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 700px) {
  .prog-affiche { padding-top: 32px; }
  .etapes, .types { grid-template-columns: 1fr; }
  .moment--photo-fond { aspect-ratio: auto; min-height: 280px; }
  .fin__actions { grid-template-columns: 1fr; }
  .fin__actions .btn { width: 100%; }
}