/* Pôle Cinéma de Saint Elme, éléments de la charte.
   Toutes les valeurs viennent de tokens.css. Préfixe pc- partout. */

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

/* Surfaces */
.pc-creme { background: var(--cream); color: var(--body); }
.pc-papier { background: var(--paper); color: var(--body); }
.pc-sombre { background: var(--deep); color: var(--cream-75); }
.pc-sombre-2 { background: var(--deep-2); color: var(--cream-75); }

/* Focus : le voyant rouge de la caméra qui tourne */
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

/* Carton « présente » et mentions de cérémonie */
.pc-ceremonie {
  font-family: var(--font-serif); font-weight: 600; text-transform: uppercase;
  letter-spacing: .28em; font-size: 15px; line-height: 1.4; color: var(--navy-text); margin: 0;
}
.pc-sombre .pc-ceremonie, .pc-sombre-2 .pc-ceremonie { color: var(--cream-75); }
@media (min-width: 1100px) { .pc-ceremonie { font-size: 18px; } }

/* Titre d'affiche : un mot rouge, le point final rouge */
.pc-titre {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: .98; letter-spacing: .005em; color: var(--navy-text); margin: 0;
  font-size: clamp(42px, 4.4vw + 26px, 76px); text-wrap: balance;
}
.pc-titre--2 { font-size: clamp(32px, 2.8vw + 21px, 52px); }
.pc-titre--3 { font-size: clamp(22px, .8vw + 19px, 28px); line-height: 1.05; letter-spacing: .01em; }
.pc-titre em, .pc-titre .pc-point { font-style: normal; color: var(--red); }
.pc-sombre .pc-titre, .pc-sombre-2 .pc-titre { color: var(--cream); }
.pc-filet { display: block; width: var(--rule-accent-w); height: var(--rule-accent-h); background: var(--red); border: 0; margin: var(--space-5) 0 0; }

/* Étiquettes de scénario */
.pc-sc {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; line-height: 1.3; color: var(--navy); margin: 0;
}
.pc-sc b { font-weight: 600; color: var(--red-ink); }
.pc-sombre .pc-sc, .pc-sombre-2 .pc-sc { color: var(--cream-75); }
.pc-sombre .pc-sc b, .pc-sombre-2 .pc-sc b { color: var(--red-light); }

/* Plan (photo) et barre de slug */
.pc-plan { margin: 0; }
.pc-plan__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--deep-2); }
.pc-slug {
  display: flex; flex-wrap: wrap; gap: .3em .9em; margin: 0; padding: 10px 14px;
  background: var(--slug); color: var(--cream); font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35;
}
.pc-slug__pre { color: var(--red-light); }
.pc-slug__plan { margin-left: auto; color: var(--cream-55); }

/* Bande de clap */
.pc-bande {
  display: block; height: var(--clap-band-h); min-width: 40px;
  background: repeating-linear-gradient(var(--stripe-angle), var(--stripe) 0 var(--stripe-step), var(--deep) var(--stripe-step) calc(var(--stripe-step) * 2));
}
.pc-titre-carte { display: flex; align-items: center; gap: var(--space-3); }
.pc-titre-carte .pc-bande { flex: 1; }

/* Lauriers */
.pc-lauriers { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--navy); }
.pc-lauriers svg { width: 40px; height: 100px; flex: none; }
.pc-lauriers svg:last-child { transform: scaleX(-1); }
.pc-lauriers__texte { text-align: center; }
.pc-sombre .pc-lauriers, .pc-sombre-2 .pc-lauriers { color: var(--cream); }
.pc-lauriers--or { color: var(--gold-ink); }
.pc-sombre .pc-lauriers--or, .pc-sombre-2 .pc-lauriers--or { color: var(--gold); }

/* Générique d'affiche (billing block) */
.pc-affiche-generique {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 14px; line-height: 1.35; letter-spacing: .06em; text-align: center; color: var(--navy-text); margin: 0;
}
.pc-affiche-generique small { font-size: 11px; letter-spacing: .12em; }
.pc-affiche-generique b { font-weight: 700; }
.pc-sombre .pc-affiche-generique { color: var(--cream-75); }
.pc-sombre .pc-affiche-generique b { color: var(--cream); }

/* Pastilles de niveau */
.pc-pastille {
  display: inline-flex; align-items: center; min-height: 24px; padding: 5px 10px;
  border: var(--rule-hair) solid currentColor; background: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.pc-pastille--club { color: var(--red-ink); }
.pc-pastille--atelier { color: var(--navy); }
.pc-pastille--ensemble { color: var(--on-red); background: var(--red); border-color: var(--red); }
.pc-sombre .pc-pastille--club, .pc-sombre-2 .pc-pastille--club { color: var(--red-light); }
.pc-sombre .pc-pastille--atelier, .pc-sombre-2 .pc-pastille--atelier { color: var(--stripe); }

/* Signature de production */
.pc-production { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.pc-production__saison { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--body); }
.pc-sombre .pc-production__saison { color: var(--cream-55); }

/* Générique : carton de titre, un mot immense.
   Le mot tient toujours dans la largeur : on donne son nombre de lettres en --n. */
.pc-carton {
  container-type: inline-size; background: var(--deep); color: var(--cream);
  text-align: center; padding: var(--space-9) var(--gutter-mobile);
}
.pc-carton__mot {
  margin: 0; font-family: var(--font-poster); font-weight: 400; text-transform: uppercase;
  line-height: .9; letter-spacing: .01em; white-space: nowrap;
  font-size: min(160px, calc(100cqi / (var(--n, 8) * .5)));
}
.pc-carton__sous { margin: var(--space-5) 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-55); }

/* Générique : liste fonction / nom */
.pc-credits { container-type: inline-size; background: var(--deep); color: var(--cream); padding: var(--space-8) var(--gutter-mobile); }
.pc-credits__liste { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; }
.pc-credits__ligne { display: grid; grid-template-columns: 1fr; gap: var(--space-1); text-align: center; padding: var(--space-3) 0; }
.pc-credits__fonction { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-75); }
.pc-credits__nom { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: 22px; line-height: 1.15; }
.pc-credits__conduite { display: none; }
@container (min-width: 560px) {
  .pc-credits__ligne { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); align-items: baseline; text-align: left; }
  .pc-credits__fonction { text-align: right; }
  .pc-credits--conduite .pc-credits__ligne { grid-template-columns: auto 1fr auto; column-gap: var(--space-3); }
  .pc-credits--conduite .pc-credits__fonction { text-align: left; }
  .pc-credits--conduite .pc-credits__nom { text-align: right; }
  .pc-credits--conduite .pc-credits__conduite { display: block; align-self: end; margin-bottom: .45em; border-bottom: 2px dotted var(--cream-55); }
}
@container (min-width: 900px) { .pc-credits__nom { font-size: 28px; } }

/* Clap signé : cadre photo et clap dessiné d'attente */
.pc-clap { margin: 0; }
.pc-clap__cadre { position: relative; aspect-ratio: 4 / 3; background: var(--paper); border: var(--rule-hair) solid var(--line); display: grid; place-items: center; overflow: hidden; }
.pc-clap__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-clap__dessin { width: 78%; height: auto; color: var(--navy); --clap-fond: var(--navy); }
.pc-clap__legende { margin: var(--space-3) 0 0; }
.pc-sombre .pc-clap__cadre { background: var(--deep-2); border-color: var(--line-light); }
.pc-sombre .pc-clap__dessin { color: var(--cream); --clap-fond: var(--deep-2); }
.pc-clap__dessin .trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: miter; }
.pc-clap__dessin .signe { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.pc-clap__dessin .raie { fill: var(--stripe); }
.pc-clap__dessin .fond { fill: var(--clap-fond); }
.pc-clap__dessin text { fill: currentColor; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; }

/* Marque de pilier (option A, retenue) */
.pc-pilier { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--navy-text); }
.pc-pilier__num { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; min-width: 2.6ch; }
.pc-pilier__nom { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.pc-sombre .pc-pilier { color: var(--cream); }
.pc-sombre .pc-pilier__nom { color: var(--cream-75); }

/* Pastille de pilier : le chiffre en case pleine, puis le nom */
.pc-pastille-pilier { display: inline-flex; align-items: stretch; min-height: 24px; border: var(--rule-hair) solid var(--deep); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: var(--deep); white-space: nowrap; }
.pc-pastille-pilier__num { display: grid; place-items: center; padding: 0 8px; background: var(--deep); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.pc-pastille-pilier__nom { display: flex; align-items: center; padding: 5px 10px; }
.pc-sombre .pc-pastille-pilier { border-color: var(--cream); color: var(--cream); }
.pc-sombre .pc-pastille-pilier__num { background: var(--cream); color: var(--deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}