/* Ciné-club Iseda — feuille du thème. Charte : nuit de rônier, faisceau, palmes. */

/* ---------- Jetons ---------- */
body {
  --brand-nuit: #0f2b2a; --brand-faisceau: #f3e6a0; --brand-chlorophylle: #9bc75a;
  --brand-palme: #2f7a55; --brand-flamboyant: #e4572e; --brand-brume: #f1f3ea;
  --surface: #0f2b2a; --surface-raised: #163937; --line: #2c514e;
  --ink: #f1f3ea; --ink-muted: #a9bdb7; --titre: #f3e6a0; --palme-texte: #9bc75a;
  --action: #f3e6a0; --on-action: #0f2b2a;
  --signal: #f27b57; --signal-fill: #f27b57; --on-signal: #0f2b2a; --focus-ring: #f3e6a0;
  --font-affiche: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --font-texte: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-texte); font-size: 17px; line-height: 27px;
  -webkit-font-smoothing: antialiased; margin: 0;
}
.is-jour {
  --surface: #f1f3ea; --surface-raised: #ffffff; --line: #cfd6c6;
  --ink: #0f2b2a; --ink-muted: #3f5552; --titre: #0f2b2a; --palme-texte: #2f7a55;
  --action: #0f2b2a; --on-action: #f3e6a0; --signal: #b83a17; --focus-ring: #2f7a55;
  background: var(--surface); color: var(--ink);
}

/* ---------- Remises à zéro dans le gabarit ---------- */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks [class*="s-"] > *, .wp-site-blocks [class*="is-"] > * { margin-block-start: 0; }
.wp-site-blocks *, .wp-site-blocks *::before, .wp-site-blocks *::after { box-sizing: border-box; }
.wp-site-blocks img { max-width: 100%; height: auto; }
:where(.wp-site-blocks) a { color: inherit; }
.wp-site-blocks a:focus-visible, .wp-site-blocks button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.wp-site-blocks figure { margin: 0; }
.s-main { display: block; }
.s-wrap { width: 100%; max-width: 1264px; margin-inline: auto; padding-inline: 32px; }
.s-pile { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.s-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.s-actions .wp-block-button, .s-actions > * { margin: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ---------- Boutons ---------- */
.is-btn, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px; border: 2px solid transparent; border-radius: 2px;
  font-family: var(--font-texte); font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.wp-block-button__link, .is-btn--principal { background: var(--action); color: var(--on-action); }
.is-btn--secondaire, .is-secondaire .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.is-btn--principal:hover, .wp-block-button__link:hover { filter: brightness(1.06); color: var(--on-action); }
.is-btn--secondaire:hover, .is-secondaire .wp-block-button__link:hover { background: var(--surface-raised); color: var(--ink); filter: none; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button { margin: 0; }

/* ---------- Étiquettes, pastilles ---------- */
.is-etiquette { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--palme-texte); margin: 0; }
.is-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.is-pastille { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.is-pastille--gratuit { background: var(--signal-fill); color: var(--on-signal); border-color: var(--signal-fill); }
.is-pastille--alerte { color: var(--signal); }

/* ---------- Logo (symbole + logotype en texte) ---------- */
.s-logo { --h: 56px; display: inline-flex; align-items: center; gap: calc(var(--h) * 0.2); text-decoration: none; color: inherit; }
.s-logo img { display: block; height: var(--h); width: auto; flex: none; }
.s-logo__mots { display: flex; flex-direction: column; font-family: var(--font-affiche); font-style: italic; }
.s-logo__t1 { font-weight: 700; font-size: calc(var(--h) * 0.626); line-height: 0.92; color: var(--brand-faisceau); letter-spacing: -0.005em; }
.s-logo__t2 { font-weight: 500; font-size: calc(var(--h) * 0.235); line-height: 1.15; color: var(--brand-chlorophylle); margin-left: calc(var(--h) * 0.03); margin-top: calc(var(--h) * 0.04); }
.wp-site-blocks .s-logo:hover, .wp-site-blocks .s-logo:focus { text-decoration: none; }
.s-logo--vertical { flex-direction: column; text-align: center; gap: calc(var(--h) * 0.22); }
.s-logo--vertical .s-logo__mots { align-items: center; }
.s-logo--vertical .s-logo__t2 { margin-left: 0; }

/* ---------- En-tête (toujours nuit) ---------- */
.s-hdr { background: var(--brand-nuit); border-bottom: 1px solid #2c514e; }
.s-hdr__in { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 36px; padding-block: 16px; }
.s-hdr__in > * { margin: 0 !important; }
.s-hdr__logo { flex: none; }
.s-hdr .s-nav { margin-left: auto !important; }
.s-hdr .wp-block-navigation__container, .s-nav ul { display: flex; flex-wrap: wrap; gap: 4px 30px; list-style: none; margin: 0; padding: 0; }
.s-hdr .wp-block-navigation-item__content { display: inline-block; padding-block: 10px; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; color: var(--brand-brume); border-bottom: 2px solid transparent; }
.s-hdr .wp-block-navigation-item__content:hover { color: var(--brand-faisceau); }
.s-hdr .wp-block-navigation-item__content[aria-current="page"], .s-hdr .current-menu-item > .wp-block-navigation-item__content { color: var(--brand-faisceau); border-bottom-color: var(--brand-chlorophylle); }
.s-hdr__cta { flex: none; }
.s-long { display: inline; }

/* ---------- Titres et textes communs ---------- */
.s-sec { padding-block: 96px; }
.s-sec--haut0 { padding-top: 0; }
.s-sec__tete { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 40px !important; }
.wp-site-blocks .s-h2, .s-h2 { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 56px; line-height: 1.02; color: var(--titre); text-wrap: balance; }
.wp-site-blocks .s-h3, .s-h3 { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 44px; line-height: 1.05; color: var(--titre); text-wrap: balance; }
.wp-site-blocks .s-display, .s-display { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 112px; line-height: 0.96; color: var(--titre); text-wrap: balance; }
.s-soustitre { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 500; font-size: 36px; line-height: 1.15; color: var(--palme-texte); }
.s-formule { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.25; color: var(--palme-texte); }
.s-chapo { margin: 0; font-size: 20px; line-height: 31px; color: var(--ink); max-width: 640px; }
.s-meta { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink-muted); }
.s-lien, .s-lien a { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--palme-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
p.s-lien { margin: 0; }
.s-lien:hover, .s-lien a:hover { color: var(--titre); }
.s-ariane { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 28px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.s-ariane a { color: var(--ink-muted); text-underline-offset: 4px; }
.s-ariane a:hover { color: var(--ink); }

/* ---------- Affiches et photos ---------- */
.s-affiche, .s-photo { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); }
.s-affiche { aspect-ratio: 2 / 3; }
.s-affiche img.s-affiche__img, .s-photo img.s-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 1; }
.s-affiche img.s-affiche__img { object-fit: contain; }
.s-affiche__vide { width: 38%; max-width: 160px; opacity: 0.28; }
.s-photo { aspect-ratio: 4 / 3; }
.s-photo--large { aspect-ratio: 16 / 9; }
.s-photo--bandeau { aspect-ratio: 21 / 8; }
.wp-block-image.s-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Accueil : séance à l'affiche ---------- */
.s-hero { position: relative; overflow: hidden; padding-block: 72px 96px; }
.s-hero__motif { position: absolute; left: -200px; bottom: -160px; width: 980px; max-width: none !important; opacity: 0.06; pointer-events: none; }
.s-hero__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px 80px; align-items: center; }
.wp-site-blocks .s-hero__titre { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 128px; line-height: 0.92; color: var(--titre); text-wrap: balance; }
.s-hero__titre a { text-decoration: none; }
.s-hero__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.s-hero__jour { font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 36px; line-height: 1.15; color: var(--ink); }
.s-hero__heure { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink-muted); }
.s-hero__resume { margin: 0; max-width: 600px; font-size: 18px; line-height: 29px; color: var(--ink); }
.s-hero__affiche { width: 100%; max-width: 400px; justify-self: end; }

/* ---------- Bandeau « le principe » ---------- */
.s-faits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.s-fait { display: flex; flex-direction: column; gap: 6px; padding: 28px 28px 32px; border-left: 1px solid var(--line); }
.s-fait:first-child { border-left: 0; padding-left: 0; }
.s-fait > p { margin: 0; }
.s-fait__k { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--palme-texte); }
.s-fait__v { font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--titre); }
.s-fait__d { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ---------- Cycle : progression et chapitres ---------- */
.s-cycle__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 80px; align-items: end; margin-bottom: 48px; }
.s-progress { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; container-type: inline-size; }
.s-progress__piste { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.s-progress__chap { display: flex; align-items: center; min-width: 0; }
.s-progress__num { display: none; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 17px; line-height: 1; color: var(--palme-texte); }
.s-progress__pts { display: flex; flex-wrap: wrap; gap: 6px; }
.s-point { display: block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink-muted); }
.s-point--vu { background: var(--palme-texte); border-color: var(--palme-texte); }
.s-point--prochain { background: var(--action); border-color: var(--action); box-shadow: 0 0 0 4px rgba(243, 230, 160, 0.22); }
.s-point--intermede { border-radius: 2px; }
.s-progress__legende { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.s-progress__legende span { display: inline-flex; align-items: center; gap: 8px; }
/* Grand écran : toute la frise tient sur une ligne. La taille des points (--p) découle de la largeur disponible,
   du nombre de films (--n) et de chapitres (--c) : n·p + (n−c)·0,4p + (c−1)·1,8p = largeur. */
@supports (container-type: inline-size) {
  .s-progress__piste { --p: clamp(8px, calc((100cqw - 4px) / (var(--n, 68) * 1.4 + var(--c, 6) * 1.4 - 1.8)), 13px); gap: 12px calc(var(--p) * 1.8); }
  .s-progress__pts { flex-wrap: nowrap; gap: calc(var(--p) * 0.4); }
  .s-progress__piste .s-point { flex: none; width: var(--p); height: var(--p); border-width: max(1px, calc(var(--p) * 0.115)); }
  .s-progress__piste .s-point--prochain { box-shadow: 0 0 0 calc(var(--p) * 0.3) rgba(243, 230, 160, 0.22); }
  /* Largeur insuffisante : un chapitre par ligne, précédé de son numéro. */
  @container (max-width: 820px) {
    .s-progress__piste { --p: 12px; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
    .s-progress__chap { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; }
    .s-progress__num { display: block; }
    .s-progress__pts { flex-wrap: wrap; gap: 6px; }
  }
}
.s-chaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-chap { display: flex; flex-direction: column; gap: 10px; min-height: 232px; padding: 28px; background: var(--surface-raised); border: 2px solid transparent; text-decoration: none; color: inherit; }
.s-chap:hover { border-color: var(--line); }
.s-chap--encours, .s-chap--encours:hover { border-color: var(--action); }
.s-chap__num { font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 44px; line-height: 1; color: var(--palme-texte); }
.s-chap__titre { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 27px; line-height: 1.12; color: var(--titre); text-wrap: balance; }
.s-chap__meta { margin-top: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.s-chap__statut { color: var(--palme-texte); }
.s-chap--encours .s-chap__statut { color: var(--titre); }

/* ---------- Grille de séances ---------- */
.s-seances { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.s-film { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.s-film .s-affiche { margin-bottom: 10px; }
.s-film__date { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--palme-texte); }
.s-film__titre { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--titre); }
.s-film:hover .s-film__titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.s-film__credits { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Section terrasse ---------- */
.s-terrasse { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px 80px; align-items: center; }
.s-texte p { margin: 0 0 18px; }
.s-texte p:last-child { margin-bottom: 0; }
.s-hotes { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.s-hotes__visages { display: flex; justify-content: flex-end; min-width: 92px; }
.s-hotes__visage { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand-palme); color: var(--brand-faisceau); border: 3px solid var(--surface); font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 22px; }
.s-hotes__visage + .s-hotes__visage { margin-left: -12px; background: var(--brand-nuit); }
img.s-hotes__visage { display: block; height: 52px; object-fit: cover; }
.s-hotes__nom { font-weight: 600; font-size: 16px; line-height: 22px; }

/* ---------- Bandeau réservation ---------- */
.s-resa { background: var(--brand-palme); color: var(--brand-brume); }
.s-resa__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 48px; padding-block: 56px; }
.wp-site-blocks .s-resa__titre { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 48px; line-height: 1.05; color: var(--brand-faisceau); }
.s-resa__texte { margin: 8px 0 0 !important; font-size: 17px; line-height: 26px; color: var(--brand-brume); }
.s-resa__num { font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.s-resa .wp-block-button__link, .s-resa .is-btn--principal { background: var(--brand-faisceau); color: var(--brand-nuit); }

/* ---------- Pied de page (toujours nuit) ---------- */
.s-pied { background: var(--brand-nuit); color: var(--brand-brume); }
.s-pied__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; padding-block: 72px 48px; }
.s-pied__phrase { margin: 24px 0 0 !important; max-width: 320px; font-family: var(--font-affiche); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--brand-chlorophylle); }
.s-pied__titre { margin: 0 0 14px !important; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-chlorophylle); }
.s-pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.s-pied li, .s-pied__col p { margin: 0; font-size: 15px; line-height: 22px; color: #a9bdb7; }
.s-pied a { color: var(--brand-brume); text-decoration: none; }
.s-pied a:hover { text-decoration: underline; text-underline-offset: 4px; }
.s-pied__bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 22px; border-top: 1px solid #2c514e; font-size: 13px; line-height: 18px; color: #a9bdb7; }
.s-pied__bas p { margin: 0; }
.s-credit__coeur { color: var(--brand-flamboyant); }
.wp-site-blocks .s-credit__adage, .wp-site-blocks .s-credit__adage:hover { display: inline-block; text-decoration: none; }
.s-credit__adage img { display: inline-block; height: 15px; width: auto; vertical-align: -3px; margin-left: 1px; }
.s-credit__adage:hover img { opacity: 0.8; }

/* ---------- Page séance ---------- */
.s-seance { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px 88px; align-items: start; padding-block: 40px 96px; }
.wp-site-blocks .s-titre-film { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 96px; line-height: 0.94; color: var(--titre); text-wrap: balance; }
.s-infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; border-top: 1px solid var(--line); }
.s-info { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.s-info dt { margin: 0 0 4px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--palme-texte); }
.s-info dd { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.s-note { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--signal); }
.s-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px 96px; align-items: start; }
.s-encart { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--surface-raised); }
.s-encart + .s-encart { margin-top: 16px !important; }
.s-encart__titre { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--titre); }
.s-encart ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; color: var(--ink); }
.s-voisin { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding-block: 14px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.s-voisin__num { grid-row: span 2; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--palme-texte); }
.s-voisin__k { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.s-voisin__t { font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--titre); }
.s-voisin--actuel .s-voisin__k { color: var(--titre); }
a.s-voisin:hover .s-voisin__t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Texte long (contenu des séances, chapitres, concept) ---------- */
.s-prose { min-width: 0; }
.wp-site-blocks .s-prose > p, .wp-site-blocks .s-prose > .wp-block-paragraph { margin: 0 0 20px; font-size: 18px; line-height: 31px; }
.wp-site-blocks .s-prose > h2, .wp-site-blocks .s-prose h2.wp-block-heading { margin: 52px 0 16px; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 34px; line-height: 1.15; color: var(--titre); text-wrap: balance; }
.wp-site-blocks .s-prose > h2:first-child { margin-top: 0; }
.wp-site-blocks .s-prose > .wp-block-quote, .wp-site-blocks .s-prose > blockquote { margin: 32px 0; padding: 0; border: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.3; color: var(--titre); }
.wp-site-blocks .s-prose .wp-block-quote p { margin: 0; }
.wp-site-blocks .s-prose .wp-block-quote cite { display: block; margin-top: 10px; font-family: var(--font-texte); font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.wp-site-blocks .s-prose > hr, .wp-site-blocks .s-prose > .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.wp-site-blocks .s-prose ul, .wp-site-blocks .s-prose ol { margin: 0 0 20px; padding-left: 24px; font-size: 18px; line-height: 31px; }

/* ---------- Page cycle ---------- */
.s-cyclehero { position: relative; overflow: hidden; padding-block: 72px 56px; }
.s-cyclehero__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 80px; align-items: end; margin-bottom: 48px; }
.s-chapitre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px 80px; padding-block: 64px; border-top: 1px solid var(--line); }
.s-chapitre__tete { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.s-chapitre__resume { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); max-width: 460px; }
.s-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.s-ligne { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding-block: 13px; border-bottom: 1px solid var(--line); }
.s-ligne__num { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.s-ligne__film { min-width: 0; }
.s-ligne__titre { font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--titre); }
a.s-ligne__titre { text-decoration: none; }
a.s-ligne__titre:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.s-ligne__intermede { display: block; margin-bottom: 2px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.s-ligne__real { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.s-ligne__statut { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--palme-texte); white-space: nowrap; }
.s-ligne__statut--prochain { padding: 4px 10px; border-radius: 999px; background: var(--action); color: var(--on-action); }
.s-encart .s-ligne { grid-template-columns: 30px minmax(0, 1fr) auto; padding-block: 10px; }
.s-encart .s-ligne__titre { font-size: 18px; }
.s-encart .s-ligne__real { display: block; }
.s-nobr { white-space: nowrap; }
/* Filet de sécurité : un mot trop long pour l'écran passe à la ligne au lieu de déborder. */
.s-h2, .s-h3, .s-display, .s-hero__titre, .s-titre-film, .s-manifeste__phrase, .s-bloc__titre, .s-chap__titre, .s-film__titre, .s-resa__titre, .s-encart__titre, .s-ligne__titre { overflow-wrap: break-word; }
/* Drapeaux des pays de production (images Twemoji, lisibles aussi sous Windows) */
.s-pays { white-space: nowrap; }
img.s-drapeau { display: inline-block; width: 1.3em; height: 1.3em; margin: 0; vertical-align: -0.3em; }

/* ---------- Lecture longue ---------- */
.s-lecture__tete { display: flex; flex-direction: column; gap: 16px; padding-block: 28px 56px; max-width: 920px; }
.s-article { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 360px); justify-content: space-between; gap: 48px 64px; align-items: start; padding-bottom: 96px; }
.s-navchap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 96px; }
.s-navchap a { display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; background: var(--surface-raised); text-decoration: none; color: inherit; }
.s-navchap a.s-navchap__suiv { text-align: right; align-items: flex-end; grid-column: 2; }
.s-manifeste { position: relative; overflow: hidden; padding-block: 96px 88px; }
.wp-site-blocks .s-manifeste__phrase { margin: 0; max-width: 1100px; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 92px; line-height: 0.98; color: var(--titre); text-wrap: balance; }
.s-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 20px 88px; padding-block: 56px; border-top: 1px solid var(--line); }
.wp-site-blocks .s-bloc__titre { margin: 0; font-family: var(--font-affiche); font-style: italic; font-weight: 700; font-size: 40px; line-height: 1.08; color: var(--titre); text-wrap: balance; }
.wp-site-blocks .s-bloc .s-prose > p:last-child { margin-bottom: 0; }
.s-page__tete { padding-block: 72px 40px; }
.s-manifeste > .s-wrap { position: relative; }
.s-manifeste .s-pile { gap: 28px; }
.s-manifeste .s-chapo { max-width: 760px; }
.s-concept__photo { padding-top: 64px; }
.s-concept__blocs { padding-block: 40px 96px; }
.s-hdr__cta .wp-block-button__link { gap: 0.3em; }

/* ---------- Tablette ---------- */
@media (max-width: 1120px) {
  .wp-site-blocks .s-hero__titre { font-size: 100px; }
  .s-seances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-chaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-corps, .s-article { grid-template-columns: minmax(0, 1fr); }
  .wp-site-blocks .s-display { font-size: 88px; }
  .wp-site-blocks .s-titre-film { font-size: 80px; }
  .s-seance { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 56px; }
  .s-fait__v { font-size: 24px; }
}

/* ---------- Petite tablette, téléphone à l'horizontale ---------- */
@media (max-width: 960px) {
  .s-seance { grid-template-columns: minmax(0, 1fr); }
  .s-seance > .s-affiche { max-width: 300px; }
  .s-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-fait:nth-child(odd) { border-left: 0; padding-left: 0; }
  .s-fait:nth-child(n+3) { border-top: 1px solid var(--line); }
  .s-ligne__real { display: block; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .s-hdr__in { column-gap: 24px; }
  .s-hdr .wp-block-navigation__container { column-gap: 22px; }
  .s-long { display: none; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; line-height: 26px; }
  .s-wrap { padding-inline: 16px; }
  .s-hdr__in { gap: 4px 12px; padding-block: 12px 2px; }
  .s-logo { --h: 44px; }
  .s-hdr .s-nav { order: 3; width: 100%; margin-left: 0 !important; }
  .s-hdr .wp-block-navigation__container { justify-content: space-between; gap: 0 12px; width: 100%; }
  .s-hdr .wp-block-navigation-item__content { font-size: 15px; }
  .s-hdr__cta { margin-left: auto !important; }
  .s-hdr__cta .wp-block-button__link { padding-inline: 16px; }
  .s-long { display: none; }
  .s-sec { padding-block: 64px; }
  .s-sec__tete { margin-bottom: 28px !important; }
  .wp-site-blocks .s-h2 { font-size: 40px; }
  .wp-site-blocks .s-h3 { font-size: 32px; }
  .s-hero { padding-block: 36px 56px; }
  .s-hero__grille, .s-cycle__intro, .s-terrasse, .s-seance, .s-chapitre, .s-bloc, .s-cyclehero__grille, .s-navchap { grid-template-columns: minmax(0, 1fr); }
  .s-navchap a.s-navchap__suiv { grid-column: auto; text-align: left; align-items: flex-start; }
  .wp-site-blocks .s-hero__titre { font-size: clamp(44px, 16vw, 64px); }
  .s-hero__jour { font-size: 28px; }
  .s-hero__resume { font-size: 17px; line-height: 27px; }
  .s-hero__affiche { justify-self: start; max-width: 240px; }
  .s-hero__affiche:has(.s-affiche__vide) { display: none; }
  .s-formule { font-size: 22px; }
  .s-chapo { font-size: 18px; line-height: 28px; }
  .s-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-fait, .s-fait:first-child { border-left: 0; padding: 20px 12px 22px 0; }
  .s-fait:nth-child(n+3) { border-top: 1px solid var(--line); }
  .s-fait__v { font-size: 21px; }
  .s-progress__piste { --p: 11px; flex-direction: column; flex-wrap: nowrap; gap: 9px; }
  .s-progress__chap { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; }
  .s-progress__num { display: block; font-size: 16px; }
  .s-progress__pts { flex-wrap: wrap; gap: 6px; }
  .s-point { width: 11px; height: 11px; }
  .s-chaps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .s-chap { min-height: 0; padding: 22px; }
  .s-chap__num { font-size: 34px; }
  .s-seances { gap: 32px 14px; }
  .s-film__titre { font-size: 20px; }
  .s-film__date { font-size: 11px; letter-spacing: 0.1em; }
  .s-resa__in { padding-block: 44px; }
  .wp-site-blocks .s-resa__titre { font-size: 36px; }
  .s-pied__grille { grid-template-columns: minmax(0, 1fr); padding-block: 56px 32px; gap: 32px; }
  .s-seance { padding-block: 24px 64px; gap: 32px; }
  .s-seance > .s-affiche { max-width: 240px; }
  .wp-site-blocks .s-titre-film { font-size: clamp(42px, 16vw, 60px); }
  .s-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-site-blocks .s-display { font-size: clamp(38px, 13.6vw, 56px); }
  .s-soustitre { font-size: 26px; }
  .s-chapitre { padding-block: 48px; }
  .s-ligne { grid-template-columns: 30px minmax(0, 1fr); }
  .s-ligne__statut { grid-column: 2; justify-self: start; }
  .wp-site-blocks .s-prose > p { font-size: 17px; line-height: 28px; }
  .wp-site-blocks .s-prose > h2 { font-size: 28px; margin-top: 40px; }
  .s-manifeste { padding-block: 56px; }
  .wp-site-blocks .s-manifeste__phrase { font-size: clamp(36px, 12.3vw, 46px); }
  .s-bloc { padding-block: 40px; }
  .s-concept__photo { padding-top: 32px; }
  .s-concept__blocs { padding-block: 8px 64px; }
  .wp-site-blocks .s-bloc__titre { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Page séance : « Le mot d’ouverture » (brief lu en début de séance) ---------- */
.s-colonne { min-width: 0; }
.wp-site-blocks .s-colonne > .s-brief { margin-top: 20px; padding-top: 40px; border-top: 1px solid var(--line); }
.wp-site-blocks .s-prose > p.s-brief__mention { margin: -6px 0 24px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

/* ---------- Accueil animé : le packshot des séances, en deux secondes ----------
   Symbole du logo en SVG en ligne (chaque palme peut bouger), grandes palmes de fond qui se balancent,
   affiche posée sur un écran qui se déroule, frise du cycle qui s'allume.
   L'arrivée ne se joue qu'avec la classe .iseda-intro (posée sur <html> une fois par visite, accueil seulement). */
.s-logo .s-logo__sym { display: block; height: var(--h); width: calc(var(--h) * 0.919); flex: none; overflow: visible; }
.s-logo__sym .s-sym__palme path { fill: var(--brand-chlorophylle); }
.s-logo__sym .s-sym__lentille, .s-logo__sym .s-sym__ecran { fill: var(--brand-faisceau); }
.s-sym__palme, .s-ombre__tout, .s-sym__ecran { transform-box: view-box; }
.s-sym__palme, .s-ombre__tout { transform-origin: 0 0; }
.s-sym__ecran { transform-origin: 125.5px -76.7px; }

/* Les grandes palmes en fond de la première section (accueil, cycle, manifeste, 404) : nettes, comme l'ancien
   motif fixe, mais vivantes ; elles se balancent et prennent le vent de la souris (assets/js/iseda.js). */
.s-ombre { position: absolute; left: -200px; bottom: -160px; width: 980px; height: auto; aspect-ratio: 141 / 153.4; max-width: none; overflow: visible; opacity: 0.06; pointer-events: none; }
.s-ombre path { fill: var(--brand-chlorophylle); }
.s-ombre .s-sym__palme { animation: iseda-balance 7s ease-in-out infinite alternate; }
.s-ombre [data-vent]:nth-child(1) .s-sym__palme { --a: 3.2; animation-duration: 6.3s; }
.s-ombre [data-vent]:nth-child(2) .s-sym__palme { --a: -2.6; animation-duration: 7.4s; animation-delay: -2s; }
.s-ombre [data-vent]:nth-child(3) .s-sym__palme { --a: 2; animation-duration: 5.7s; animation-delay: -1s; }
.s-ombre [data-vent]:nth-child(4) .s-sym__palme { --a: -2.8; animation-duration: 6.9s; animation-delay: -3s; }
.s-ombre [data-vent]:nth-child(5) .s-sym__palme { --a: 3.5; animation-duration: 8.1s; animation-delay: -4s; }
.s-ombre__tout { animation: iseda-balance-tout 11s ease-in-out infinite alternate; }

/* Quand la section qui suit garde le fond de nuit (elle ne peint pas son propre fond), les palmes ne sont plus
   coupées au bas de la première section : elles débordent, entières, sur la suivante (accueil, cycle).
   Si la suivante a son propre fond (jour, réservation, bloc coloré) ou s'il n'y en a pas, elles restent coupées
   (manifeste, 404). Seul le débordement horizontal reste coupé, pour ne pas créer de défilement de côté.
   Les sections suivantes sont positionnées : elles se peignent par-dessus les palmes, donc leur texte reste
   au-dessus et une section claire les recouvre. Sans :has() ni overflow: clip, rien ne change. */
@supports (overflow-x: clip) {
  :is(.s-hero, .s-cyclehero, .s-manifeste):has(> .s-ombre):has(+ :not(.is-jour, .s-resa, .has-background)) { overflow: visible; overflow-x: clip; }
  :is(.s-hero, .s-cyclehero, .s-manifeste):has(> .s-ombre) ~ * { position: relative; }
}

/* L'affiche sur son écran, et la poussière qui flotte dans la lumière */
.s-hero__affiche { position: relative; }
.s-toile { position: absolute; inset: 0; background: var(--brand-faisceau); transform-origin: 50% 0; opacity: 0; pointer-events: none; }
.s-poussiere { position: absolute; inset: -40px -60px; pointer-events: none; }
.s-poussiere span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--brand-faisceau); opacity: 0; }
.home .s-poussiere span { animation: iseda-poussiere 9s linear infinite; }
.s-poussiere span:nth-child(1) { left: 12%; top: 70%; --dx: 18px; animation-delay: -1s; }
.s-poussiere span:nth-child(2) { left: 28%; top: 82%; --dx: -12px; animation-delay: -4s; animation-duration: 11s; }
.s-poussiere span:nth-child(3) { left: 47%; top: 64%; --dx: 26px; animation-delay: -6.5s; }
.s-poussiere span:nth-child(4) { left: 63%; top: 88%; --dx: -20px; animation-delay: -2.2s; animation-duration: 10s; }
.s-poussiere span:nth-child(5) { left: 79%; top: 72%; --dx: 14px; animation-delay: -7.7s; }
.s-poussiere span:nth-child(6) { left: 90%; top: 58%; --dx: -16px; animation-delay: -3.3s; animation-duration: 12s; }
.s-poussiere span:nth-child(7) { left: 6%; top: 40%; --dx: 10px; animation-delay: -5.5s; animation-duration: 13s; }
.s-poussiere span:nth-child(8) { left: 96%; top: 30%; --dx: -8px; animation-delay: -8.8s; animation-duration: 12s; }

/* Arrivée : le vent tombe dans les palmes du logo, la lampe s'allume, l'écran se déroule */
.iseda-intro .s-hdr .s-sym__palme { animation: iseda-rafale 2s cubic-bezier(0.37, 0, 0.63, 1) both; }
.iseda-intro .s-hdr [data-vent]:nth-child(1) .s-sym__palme { --a: 13; animation-delay: 0.05s; }
.iseda-intro .s-hdr [data-vent]:nth-child(2) .s-sym__palme { --a: -9; animation-delay: 0.12s; }
.iseda-intro .s-hdr [data-vent]:nth-child(3) .s-sym__palme { --a: 7; }
.iseda-intro .s-hdr [data-vent]:nth-child(4) .s-sym__palme { --a: -10; animation-delay: 0.17s; }
.iseda-intro .s-hdr [data-vent]:nth-child(5) .s-sym__palme { --a: 14; animation-delay: 0.09s; }
.iseda-intro .s-hdr .s-sym__palme path { animation: iseda-palme-allumee 0.7s 1.85s ease-out both; }
.iseda-intro .s-hdr .s-sym__lentille { animation: iseda-lampe 0.5s 1.7s steps(1, end) both; }
.iseda-intro .s-hdr .s-sym__ecran { animation: iseda-store 0.7s 2.15s cubic-bezier(0.3, 1.45, 0.5, 1) both; }
.iseda-intro .s-hdr .s-logo__t1 { animation: iseda-mise-au-point 1.2s 0.9s both; }
.iseda-intro .s-hdr .s-logo__t2 { animation: iseda-apparait 0.7s 1.4s ease-out both; }
/* La séance : mise au point du projectionniste sur le titre, l'affiche apparaît dans la lumière de l'écran */
.iseda-intro .s-hero .s-formule { animation: iseda-apparait 0.7s 0.25s ease-out both; }
.iseda-intro .s-hero .s-hero__titre { animation: iseda-mise-au-point 1.3s 0.35s both; }
.iseda-intro .s-hero .s-meta { animation: iseda-apparait 0.7s 1.1s ease-out both; }
.iseda-intro .s-hero .s-hero__date, .iseda-intro .s-hero .s-hero__resume { animation: iseda-apparait 0.7s 1.25s ease-out both; }
.iseda-intro .s-hero .is-pastilles, .iseda-intro .s-hero .s-actions { animation: iseda-apparait 0.7s 1.4s ease-out both; }
.iseda-intro .s-hero .s-toile { animation: iseda-toile 2.1s 0.7s both; }
.iseda-intro .s-hero .s-affiche > img { animation: iseda-dans-la-lumiere 1s 1.75s ease-out both; }

/* La frise du cycle s'allume film après film (assets/js/iseda.js) */
.s-progress__piste .s-point { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.s-progress__piste.est-eteinte .s-point { transition: none; }
.s-progress__piste.est-eteinte .s-point--vu, .s-progress__piste.est-eteinte .s-point--prochain { background: transparent; border-color: var(--ink-muted); box-shadow: none; animation: none; }
.home .s-progress__piste .s-point--prochain { animation: iseda-lentille 2.4s ease-in-out infinite; }

@keyframes iseda-rafale {
  0% { transform: rotate(calc(var(--a, 0) * 1deg)) scale(1, 0.82); }
  14% { transform: rotate(calc(var(--a, 0) * -0.85deg)) scale(1, 0.9); }
  29% { transform: rotate(calc(var(--a, 0) * 0.6deg)) scale(1, 0.95); }
  44% { transform: rotate(calc(var(--a, 0) * -0.38deg)); }
  59% { transform: rotate(calc(var(--a, 0) * 0.2deg)); }
  74% { transform: rotate(calc(var(--a, 0) * -0.08deg)); }
  100% { transform: rotate(0deg); }
}
@keyframes iseda-palme-allumee { from { fill: var(--brand-palme); } }
@keyframes iseda-lampe { 0% { opacity: 0; } 15% { opacity: 0.5; } 30% { opacity: 0.05; } 45% { opacity: 0.85; } 60% { opacity: 0.3; } 75%, 100% { opacity: 1; } }
@keyframes iseda-store { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes iseda-mise-au-point {
  0% { opacity: 0.25; filter: blur(12px); transform: scale(1.03); }
  22% { opacity: 1; filter: blur(5px); }
  42% { filter: blur(0); transform: scale(1); }
  62% { filter: blur(2.2px); transform: scale(1.006); }
  82%, 100% { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes iseda-apparait { from { opacity: 0; transform: translateY(8px); } }
@keyframes iseda-toile {
  0% { transform: scaleY(0); opacity: 1; }
  30% { transform: scaleY(1.03); opacity: 1; }
  36% { transform: scaleY(1); opacity: 1; }
  44% { opacity: 0.55; } 50% { opacity: 0.95; } 56% { opacity: 0.7; } 62% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes iseda-dans-la-lumiere { from { opacity: 0.15; filter: brightness(1.8); } }
@keyframes iseda-balance { from { transform: rotate(calc(var(--a, 0) * -1deg)); } to { transform: rotate(calc(var(--a, 0) * 1deg)); } }
@keyframes iseda-balance-tout { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes iseda-poussiere { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 0.55; } 50% { opacity: 0.2; } 75% { opacity: 0.5; } 100% { opacity: 0; transform: translate(var(--dx, 0), -140px); } }
@keyframes iseda-lentille {
  0%, 100% { box-shadow: 0 0 0 calc(var(--p, 13px) * 0.3) rgba(243, 230, 160, 0.22); }
  50% { box-shadow: 0 0 0 calc(var(--p, 13px) * 0.6) rgba(243, 230, 160, 0.1); }
}

@media (max-width: 760px) {
  .s-poussiere { inset: -24px -16px; }
}
