/* Direction fixe : papier ivoire, scène noire, accent bleu et vermillon. */
:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --ink: #191919;
  --muted: #5e5a55;
  --line: #d6d1c7;
  --blue: #283ea8;
  --red: #bc3d27;
  --white: #fff;
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
button,
input {
  font: inherit;
}
button,
a,
input {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #e38922;
  outline-offset: 5px;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.06;
}
h1 {
  font-size: clamp(42px, 6vw, 80px);
  letter-spacing: -0.055em;
}
h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.035em;
}
h3 {
  font-size: 24px;
  letter-spacing: -0.025em;
}
p + p {
  margin-top: 20px;
}
p {
  max-width: 70ch;
}
ul {
  padding-left: 22px;
}
.wrap {
  width: min(1184px, calc(100% - 96px));
  margin: auto;
}
.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 20;
  background: white;
  color: black;
  padding: 12px;
}
.skip:focus {
  top: 8px;
}
.preview-strip {
  background: var(--blue);
  color: white;
  text-align: center;
  font-size: 14px;
  padding: 6px 16px;
  line-height: 1.5;
}
.header {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid #454340;
}
.header-inner {
  min-height: 106px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
}
.wordmark {
  font-size: 21px;
  line-height: 1.05;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.06em;
  display: block;
  padding: 12px 0;
}
.wordmark small {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-top: 5px;
}
.navigation {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
}
.navigation a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
}
.navigation a[aria-current="page"]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--paper);
}
.navigation a:hover {
  color: #f8b6a8;
}
.nav-join {
  border: 1px solid #86817c;
  padding: 8px 16px;
}
.mobile-nav {
  display: none;
}
.eyebrow {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.6;
}
.dark {
  background: var(--ink);
  color: var(--paper);
}
.hero {
  padding: 48px 0 64px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 72px;
}
.hero-copy h1 {
  font-size: clamp(64px, 7.4vw, 102px);
  font-weight: 800;
  line-height: 0.94;
  margin: 26px 0 28px;
  letter-spacing: -0.065em;
}
.hero-copy .tail {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  display: block;
  font-size: 0.62em;
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin-top: 24px;
}
.hero-copy .tagline {
  font-size: 18px;
  color: #d4cec6;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  min-height: 50px;
  padding: 12px 22px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0;
}
.button:after {
  content: "↗";
  font-size: 19px;
  font-weight: 400;
}
.button:hover {
  background: #e0d9cd;
}
.button.blue {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.button.blue:hover {
  background: #1a2a81;
}
.button.outline {
  background: transparent;
  border-color: #807c77;
  color: var(--paper);
}
.button.outline:hover {
  background: #302e2c;
}
.text-link {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 14px;
}
.poster-stage {
  background: #263780;
  padding: 22px 34px 20px;
  position: relative;
}
.stage-label {
  color: #f3f0e8;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.poster-stage img {
  width: 100%;
  max-height: 540px;
  object-fit: contain;
  background: #18212c;
}
.poster-stage figcaption {
  margin-top: 16px;
  color: #e4e5f2;
  font-size: 14px;
  line-height: 1.5;
}
.marquee {
  border-top: 1px solid #454340;
  border-bottom: 1px solid #454340;
  padding: 16px 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.marquee .wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section {
  padding: 80px 0;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: end;
  margin-bottom: 36px;
}
.section-head h2 {
  margin-top: 14px;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
}
.intro-grid .prose {
  font-size: 24px;
  line-height: 1.5;
  max-width: 38ch;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 14px;
}
.intro-foot {
  border-top: 1px solid var(--line);
  margin-top: 38px;
  padding-top: 20px;
}
.support {
  background: var(--blue);
  color: var(--paper);
}
.support-inner {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: center;
}
.support h2 {
  max-width: 15ch;
}
.support p {
  max-width: 48ch;
  margin-top: 20px;
  color: #e0e3f4;
}
.support .button {
  flex-shrink: 0;
}
.feature {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #e7e2d8;
  gap: 60px;
  padding: 36px;
  align-items: center;
}
.feature img {
  width: 100%;
  max-height: 435px;
  object-fit: contain;
}
.feature h2 {
  font-size: clamp(32px, 4vw, 52px);
  margin: 14px 0 24px;
}
.feature .pitch {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.4;
}
.metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14px;
  margin: 22px 0;
}
.page-top {
  padding: 60px 0 52px;
}
.page-top .eyebrow {
  color: var(--red);
  margin-bottom: 20px;
}
.page-top .intro {
  margin-top: 24px;
  font-size: 20px;
  max-width: 60ch;
}
.archive-note {
  padding: 20px 0 26px;
  border-bottom: 1px solid var(--line);
  margin-top: 30px;
}
.archive-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}
.archive-item {
  border-bottom: 1px solid #bcb6ac;
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  gap: 16px;
  align-items: start;
  padding: 28px 0;
  text-decoration: none;
  min-width: 0;
}
.archive-item:hover h3 {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.archive-item .number {
  font-size: 14px;
  color: var(--muted);
  padding-top: 5px;
}
.archive-item h3 {
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.archive-item .details {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}
.archive-item .arrow {
  font-size: 24px;
}
.breadcrumb {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 24px;
}
.show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr);
  gap: 72px;
  align-items: start;
}
.show-layout h1 {
  font-size: clamp(42px, 5.3vw, 72px);
  margin-top: 12px;
}
.show-tag {
  color: var(--red);
}
.show-lead {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.4;
  margin-top: 32px;
}
.show-info {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  margin: 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.show-info dt {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.show-info dd {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.4;
}
.show-poster img {
  width: 100%;
}
.show-poster figcaption {
  font-size: 14px;
  color: var(--muted);
  margin-top: 14px;
}
.article {
  max-width: 710px;
  margin-top: 36px;
}
.article h2 {
  font-size: 32px;
  margin-bottom: 24px;
}
.article p {
  margin-bottom: 20px;
}
.credits {
  font-size: 15px;
  border-left: 3px solid var(--blue);
  padding-left: 20px;
  margin-top: 30px;
}
.empty-state {
  border: 1px solid var(--line);
  padding: 28px;
  margin: 24px 0;
}
.empty-state h2 {
  font-size: 26px;
  margin-bottom: 16px;
}
.missing-poster {
  background: #e4dfd5;
  min-height: 280px;
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}
.pending-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 50px;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}
.pending-grid h2 {
  font-size: 24px;
  margin-bottom: 14px;
}
.notice {
  border-left: 3px solid var(--red);
  padding: 14px 20px;
  background: #e9e3da;
  font-size: 15px;
  margin: 24px 0;
}
.join-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.join-copy {
  font-size: 21px;
  line-height: 1.55;
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
}
.steps li:before {
  content: "0" counter(step);
  font-size: 14px;
  color: var(--red);
}
.steps h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.steps p {
  font-size: 16px;
}
.join-panel {
  background: var(--ink);
  color: var(--paper);
  padding: 36px;
  margin-top: 32px;
}
.join-panel h2 {
  font-size: 32px;
  margin-bottom: 16px;
}
.join-panel .notice {
  background: #302e2b;
  color: #e7ddd1;
}
.legal {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.legal h1 {
  font-size: 52px;
}
.legal h2 {
  font-size: 27px;
  margin: 36px 0 16px;
}
.legal p {
  margin-bottom: 16px;
}
.legal li + li {
  margin-top: 10px;
}
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 52px 0 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer .brand-name {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 25ch;
}
.footer .sub {
  font-size: 14px;
  color: #c5beb4;
  margin-top: 14px;
}
.footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  align-items: start;
  font-size: 15px;
}
.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-bottom {
  border-top: 1px solid #504c45;
  margin-top: 38px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #c5beb4;
}
.footer-bottom a {
  display: inline-block;
  min-height: 44px;
}
.newsletter-launch {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  min-height: 48px;
  padding: 10px 16px;
  box-shadow: 0 3px 12px #0002;
  font-size: 14px;
}
.newsletter-launch svg {
  width: 20px;
  height: 20px;
}
.newsletter-dialog {
  border: 0;
  padding: 36px;
  background: var(--paper);
  color: var(--ink);
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: 0 12px 80px #0005;
}
.newsletter-dialog::backdrop {
  background: #0009;
}
.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 25px;
  line-height: 1;
}
.newsletter-dialog .eyebrow {
  margin: 18px 40px 16px 0;
  color: var(--red);
}
.newsletter-dialog h2 {
  font-size: 38px;
  margin-bottom: 16px;
}
.newsletter-dialog .demo {
  font-size: 14px;
  color: var(--muted);
  margin: 16px 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid label {
  font-size: 14px;
  display: block;
}
.form-grid .full {
  grid-column: 1/-1;
}
input[type="text"],
input[type="email"] {
  display: block;
  width: 100%;
  background: white;
  border: 1px solid #8a8379;
  min-height: 48px;
  padding: 10px;
  margin-top: 6px;
  border-radius: 0;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  margin: 20px 0;
}
.consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
}
.form-status {
  font-size: 14px;
  background: #e3e7f6;
  padding: 14px;
  margin-top: 16px;
}
.form-status:empty {
  display: none;
}
.newsletter-dialog .button {
  width: 100%;
  gap: 12px;
}
.newsletter-dialog .button:after {
  content: none;
}
[hidden] {
  display: none !important;
}
.carousel {
  margin-top: 40px;
}
.carousel .slides figure[hidden] {
  display: none;
}
.carousel-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.carousel-controls button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink);
  background: transparent;
}
.carousel figcaption {
  font-size: 14px;
  margin-top: 12px;
}
@media (max-width: 1000px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .hero-grid {
    gap: 36px;
    grid-template-columns: 1.15fr 1fr;
  }
  .hero-copy h1 {
    font-size: 76px;
  }
  .poster-stage {
    padding: 20px 24px;
  }
  .navigation {
    gap: 20px;
  }
  .intro-grid {
    gap: 40px;
  }
  .feature {
    gap: 36px;
    grid-template-columns: 260px 1fr;
  }
  .show-layout {
    gap: 40px;
  }
  .join-grid {
    gap: 40px;
  }
}
@media (max-width: 740px) {
  .wrap {
    width: calc(100% - 40px);
  }
  body {
    font-size: 16px;
  }
  .header-inner {
    min-height: 86px;
    gap: 12px;
  }
  .wordmark {
    font-size: 20px;
  }
  .wordmark small {
    font-size: 14px;
  }
  .navigation {
    display: none;
  }
  .mobile-nav {
    display: block;
    position: relative;
  }
  .mobile-nav summary {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #827d76;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
  }
  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }
  .mobile-nav[open] summary {
    background: var(--paper);
    color: var(--ink);
  }
  .mobile-nav nav {
    position: absolute;
    right: 0;
    top: 54px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
    padding: 16px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 10px 30px #0005;
    border: 1px solid var(--line);
  }
  .mobile-nav nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
  }
  .mobile-nav nav a[aria-current="page"] {
    background: #ded8cd;
  }
  .hero {
    padding: 38px 0 40px;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: stretch;
  }
  .hero-copy h1 {
    font-size: clamp(58px, 12.8vw, 88px);
    margin: 22px 0;
  }
  .hero-copy .tail {
    font-size: 0.62em;
    margin-top: 20px;
  }
  .hero-copy .tagline {
    font-size: 16px;
  }
  .hero .actions {
    gap: 12px;
    margin-top: 24px;
  }
  .poster-stage {
    padding: 20px 24px;
  }
  .poster-stage img {
    max-height: 560px;
  }
  .stage-label {
    font-size: 14px;
  }
  .marquee {
    font-size: 14px;
    padding: 14px 0;
  }
  .marquee .wrap {
    gap: 8px 20px;
  }
  .section {
    padding: 48px 0;
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .intro-grid .prose {
    font-size: 21px;
  }
  .intro-grid h2 {
    max-width: 15ch;
  }
  .section-head {
    align-items: start;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
  }
  .feature {
    padding: 24px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .feature img {
    max-height: 410px;
    width: auto;
    margin: auto;
  }
  .feature .pitch {
    font-size: 22px;
  }
  .support-inner {
    align-items: start;
    flex-direction: column;
    gap: 28px;
  }
  .support h2 {
    max-width: 17ch;
  }
  .page-top {
    padding: 40px 0 32px;
  }
  .page-top .intro {
    font-size: 18px;
  }
  .archive-list {
    grid-template-columns: 1fr;
  }
  .archive-item {
    padding: 24px 0;
  }
  .archive-item h3 {
    font-size: 25px;
  }
  .show-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .show-layout h1 {
    font-size: 49px;
  }
  .show-lead {
    font-size: 24px;
    margin-top: 24px;
  }
  .show-poster {
    max-width: 400px;
    width: 100%;
    margin: auto;
  }
  .show-poster img {
    max-height: none;
  }
  .show-info {
    gap: 24px 18px;
    margin: 28px 0;
  }
  .show-info dd {
    font-size: 16px;
  }
  .article {
    margin-top: 28px;
  }
  .pending-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }
  .join-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .join-copy {
    font-size: 20px;
  }
  .join-panel {
    padding: 28px;
  }
  .legal h1 {
    font-size: 43px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-links {
    justify-content: flex-start;
    gap: 16px 24px;
  }
  .footer {
    padding: 38px 0 76px;
  }
  .footer-bottom {
    margin-top: 24px;
    gap: 6px 16px;
  }
  .newsletter-launch {
    right: 14px;
    bottom: 14px;
  }
  .newsletter-dialog {
    padding: 28px 24px;
  }
  .newsletter-dialog h2 {
    font-size: 32px;
  }
  .newsletter-dialog .eyebrow {
    margin-top: 30px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .notice {
    padding: 14px 16px;
  }
  .breadcrumb {
    margin-bottom: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}

/* L’accès newsletter reste dans l’en-tête pour ne jamais masquer une affiche. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 24px;
}
.newsletter-launch {
  position: static;
  min-width: 46px;
  min-height: 46px;
  padding: 10px;
  background: transparent;
  color: var(--paper);
  border: 1px solid #86817c;
  box-shadow: none;
}
.newsletter-launch span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.newsletter-launch:hover {
  background: #35312d;
}
@media (max-width: 740px) {
  .header-tools {
    gap: 10px;
  }
  .wordmark small {
    font-size: 14px;
  }
  .stage-label {
    font-size: 14px;
  }
  .hero-copy h1 {
    font-size: clamp(58px, 12.8vw, 88px);
  }
}
/* Garder la fermeture accessible quand le contenu du dialogue défile. */
.dialog-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -16px -16px 0 12px;
  z-index: 2;
  background: var(--paper);
}
@media (max-width: 740px) {
  .dialog-close {
    margin: -12px -12px 0 8px;
  }
}

/* V2 : identité CPB originale, accueil onepager et couleurs du logo. */
:root { --paper:#fffdf8; --ink:#30154e; --muted:#64576b; --line:#d8cbdf; --blue:#5532a4; --red:#a52b57; }
body {font-family:Arial,Helvetica,sans-serif;}
h1,h2,h3 {letter-spacing:-.035em;}
.header {background:#fff; color:var(--ink); border-bottom:1px solid #e5dcef;}
.header-inner {min-height:104px; gap:24px;}
.wordmark {display:flex; align-items:center; gap:12px; padding:14px 0; flex-shrink:0;}
.header-logo {width:60px; height:60px; object-fit:contain;}
.header-lettering {width:230px; height:auto;}
.navigation {gap:22px; font-size:14px;}
.navigation a:hover {color:#a52b57;}
.nav-join {border-color:#5532a4; background:#f0e8ff;}
.newsletter-launch {color:var(--ink); border-color:var(--ink); border-radius:6px;}
.newsletter-launch:hover {background:#f0e8ff;}
.preview-strip {background:#5532a4;}
.wrap {width:min(1184px,calc(100% - 96px));}
section[id] {scroll-margin-top:24px;}
.cpb-hero {background:#fff; color:var(--ink); padding:56px 0 64px;}
.hero-grid {grid-template-columns:1.3fr .8fr; gap:64px;}
.hero-copy .identity-heading {margin:28px -8px 28px; font-size:inherit; line-height:1;}
.identity-heading img {width:100%; height:auto;}
.hero-line {font-size:clamp(26px,2.8vw,38px); line-height:1.18; font-weight:700; letter-spacing:-.035em; margin-top:24px;}
.hero-copy .eyebrow {color:#7441ac;}
.poster-stage {background:#5532a4; padding:22px; border-radius:12px; transform:rotate(2deg); box-shadow:10px 12px 0 #e6d6fb;}
.poster-stage img {max-height:430px; background:transparent; border-radius:4px;}
.stage-label {font-size:13px; letter-spacing:.08em; color:white;}
.poster-stage figcaption {color:white;}
.button {border-radius:6px; background:white; border-color:#5532a4; color:#30154e;}
.button.blue {background:#5532a4; border-color:#5532a4;}
.button.blue:hover {background:#3c1c7d;}
.button:hover {background:#f0e8ff;}
.rainbow-band {display:grid; grid-template-columns:repeat(6,1fr); height:12px;}
.rainbow-band i:nth-child(1){background:#ef3340}.rainbow-band i:nth-child(2){background:#ff8b23}.rainbow-band i:nth-child(3){background:#ffe334}.rainbow-band i:nth-child(4){background:#70bd45}.rainbow-band i:nth-child(5){background:#3473c9}.rainbow-band i:nth-child(6){background:#7742a6}
.troupe-section {background:#ede3fa; padding:72px 0;}
.troupe-section h2 {margin-top:16px;}
.intro-grid {grid-template-columns:1fr 1.3fr;gap:80px;}
.troupe-stamp {display:inline-block; background:#5532a4; color:white; border-radius:6px; padding:12px 20px; transform:rotate(-5deg); margin-top:26px; font-size:14px; line-height:1.3; font-weight:700;}
.troupe-section .intro-foot {border-color:#c9b5e3;}
.current-section {background:#fff5ed;}
.section-head h2 {margin-top:12px;}
.show-year {font-size:40px; font-weight:700; color:#a52b57;}
.feature {background:#fff; border:1px solid #f0d4c6; border-radius:12px; padding:32px; grid-template-columns:260px 1fr;gap:48px;}
.feature img {border-radius:6px; max-height:390px; object-fit:contain;}
.feature h2 {font-size:clamp(30px,3.6vw,46px);}
.feature .pitch {font-size:24px;}
.archive-section {background:#fffdf8;}
.show-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.show-card {text-decoration:none; display:flex;flex-direction:column; min-width:0; border-radius:10px; overflow:hidden; border:1px solid #ded1e9; background:white;}
.picto {padding:20px;background:#f0e8fb;aspect-ratio:1;display:flex;justify-content:center;align-items:center;}
.show-card:nth-child(3n+2) .picto {background:#ffe2db;}
.show-card:nth-child(3n) .picto {background:#e0efd2;}
.picto img {height:100%;max-height:310px;width:100%;object-fit:contain;box-shadow:0 4px 14px #30154e18;}
.card-caption {padding:20px 22px;display:flex;flex-direction:column;gap:16px;flex:1;}
.card-caption h3 {font-size:24px;line-height:1.12;}
.card-caption>span {font-size:14px;margin-top:auto;color:#694c86;display:flex;justify-content:space-between;}
.show-card:hover {border-color:#5532a4;box-shadow:0 4px 16px #5532a414;}
.more-archives {margin-top:44px;}
.more-archives h3 {margin-bottom:18px;}
.more-grid {display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.more-show {display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:72px;border-top:1px solid #d8cbdf;text-decoration:none;font-weight:700;font-size:19px;padding:16px 0;}
.more-show:hover {color:#a52b57;}
.archive-disclaimer {color:var(--muted);margin-top:28px;}
.produce-section {background:#ffe366;position:relative;}
.produce-grid {display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center;}
.produce-section h2 {font-size:clamp(36px,4.3vw,60px);margin:16px 0 24px;}
.produce-section p:not(.eyebrow) {font-size:19px;max-width:45ch;margin-bottom:28px;}
.produce-art {background:#fff9da;min-height:380px;border-radius:50% 50% 12px 12px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:32px;transform:rotate(4deg);border:2px solid #30154e;}
.produce-art img {width:110px; height:110px; object-fit:contain;margin-bottom:16px;}
.produce-art span {font-size:40px;line-height:1.08;font-weight:800;text-align:center;letter-spacing:-.04em;}
.join-section {background:#f9dce6;}
.join-home-grid {display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:start;}
.join-home-grid h2 {margin:16px 0 28px;}
.join-home-grid p:not(.eyebrow) {font-size:19px;}
.join-home-panel {background:#fff;padding:32px;border-radius:12px;border:1px solid #e5b9c9;}
.join-home-panel h3 {font-size:28px;margin-bottom:16px;}
.join-home-panel p {font-size:16px!important; margin-bottom:24px;}
.join-home-panel .text-link {display:flex;margin-top:12px;}
.footer {background:#30154e;color:#fff; border-top:10px solid #7949ae;}
.footer-brand {display:block;max-width:370px;background:#fff;border-radius:4px;padding:12px;}
.footer .sub,.footer-bottom {color:#e5d9ed;}
.footer-bottom {border-color:#735b86;}
.page-top {background:#fcf8ff;}
.page-top .eyebrow {color:#a52b57;}
.show-poster img {border-radius:8px;}
.missing-poster {background:#ede3fa;border-radius:8px;color:#64576b;}
.join-panel {background:#5532a4;color:#fff;border-radius:12px;}
.join-panel .notice {background:#422483;color:#fff;}
.newsletter-dialog {background:#fffdf8;border-radius:12px;border-top:10px solid #a52b57;}
.dialog-close {background:#fffdf8;border-radius:6px;}
.newsletter-dialog h2 {color:#5532a4;}
.notice {background:#f0e8fb;}
@media(max-width:1100px){
 .navigation{display:none}.mobile-nav{display:block;position:relative}.header-tools{gap:14px}.mobile-nav summary{list-style:none;cursor:pointer;min-height:46px;display:flex;align-items:center;padding:8px 14px;border:1px solid #5532a4;border-radius:6px}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav nav{position:absolute;right:0;top:58px;z-index:10;width:260px;padding:16px;background:#fff;color:#30154e;border:1px solid #d8cbdf;box-shadow:0 8px 24px #30154e20;border-radius:8px}.mobile-nav nav a{display:block;padding:12px;text-decoration:none;min-height:44px}.mobile-nav nav .nav-join{margin-top:8px}.hero-grid{gap:40px}.header-lettering{width:215px}
}
@media(max-width:740px){
 .wrap {width:calc(100% - 40px)}.header-inner{min-height:86px;gap:12px}.wordmark{gap:7px;min-width:0;flex-shrink:1}.header-logo{width:38px;height:38px}.header-lettering{width:140px}.header-tools{gap:8px;flex-shrink:0}.newsletter-launch{min-width:44px;min-height:44px}.mobile-nav summary{padding:8px 10px;font-size:14px;min-height:44px}.mobile-nav nav{right:-52px}
 .cpb-hero{padding:36px 0 48px}.hero-grid{grid-template-columns:1fr;gap:40px}.hero-copy .eyebrow{font-size:12px;letter-spacing:.08em}.hero-copy .identity-heading{margin:24px -6px 20px}.hero-line{font-size:28px}.hero-copy .actions{gap:10px;margin-top:24px}.poster-stage{margin:0 6px;transform:rotate(1deg);padding:20px;box-shadow:6px 7px 0 #e6d6fb}.poster-stage img{max-height:450px}.stage-label{font-size:12px}.section{padding:56px 0}.intro-grid,.produce-grid,.join-home-grid{grid-template-columns:1fr;gap:32px}.troupe-section .prose{font-size:20px}.troupe-stamp{margin-top:24px}.section-head{align-items:start;gap:20px}.section-head>p{font-size:16px}.show-year{font-size:28px}.feature{grid-template-columns:1fr;padding:20px;gap:28px}.feature>a{display:block;max-width:280px;margin:auto}.feature img{max-height:380px}.feature .pitch{font-size:22px}.feature .eyebrow{font-size:12px}.feature h2{font-size:32px}.show-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.picto{padding:10px}.card-caption{padding:14px 12px;gap:12px}.card-caption h3{font-size:18px}.card-caption>span{font-size:13px;line-height:1.4}.more-grid{grid-template-columns:1fr}.more-show{font-size:18px}.more-archives h3{font-size:24px}.archive-disclaimer{font-size:14px}.produce-art{min-height:310px;margin:0 8px;transform:rotate(2deg)}.produce-art span{font-size:34px}.produce-section h2{font-size:40px}.join-home-panel{padding:24px}.join-home-grid h2{font-size:36px}.join-home-panel .button{width:100%;gap:12px;font-size:14px}.footer-brand{max-width:320px}.footer{padding-bottom:36px}.button{font-size:14px}.legal h1{font-size:40px}.newsletter-dialog{padding:24px}.newsletter-dialog .eyebrow{margin-top:18px}
}
@media(max-width:360px){.header-lettering{width:117px}.header-logo{width:30px;height:30px}.header-tools{gap:6px}.wordmark{gap:4px}.card-caption h3{font-size:17px}.hero-line{font-size:26px}}
.card-caption>span {font-size:14px;}

/* V3 — navigation persistante, marques sociales et cartes paysage. */
:root { --header-height: 100px; }
html { scroll-padding-top: calc(var(--header-height) + 16px); }
section[id] { scroll-margin-top: 0; }
.header { position: sticky; top: 0; z-index: 30; box-shadow: 0 5px 20px #30154e0a; }
.skip { z-index: 100; }
.header-inner { display: grid; grid-template-columns: auto 1fr auto auto; gap: 18px; min-height: 100px; }
.header-logo { width: 48px; height: 48px; }
.header-lettering { width: 185px; }
.wordmark { gap: 10px; }
.navigation { justify-content: flex-end; gap: 16px; font-size: 13px; }
.navigation a { white-space: nowrap; }
.navigation .nav-join { padding: 7px 10px; }
.social-links { display: flex; align-items: center; gap: 4px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; flex-shrink: 0; }
.social-link img { width: 22px; height: 22px; object-fit: contain; }
.header-social .social-link:hover { background: #f0e8ff; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-action { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 11px; border: 1px solid #d8cbdf; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: none; }
.header-action svg { width: 21px; height: 21px; flex-shrink: 0; }
.newsletter-launch { background: #f0e8ff; color: #4d269a; border-color: #d2bde9; }
.newsletter-launch span { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: nowrap; border: 0; }
.newsletter-launch:hover { background: #e4d7fa; }
.contact-action { color: var(--ink); background: #fff; }
.contact-action:hover { background: #fcf8ff; border-color: #5532a4; }
.footer-links { align-items: center; }
.footer-social .social-link { background: #fff; }
.footer-social .social-link:hover { background: #efe4ff; }
.picto { aspect-ratio: 16 / 10; padding: 18px; position: relative; min-height: 0; }
.picto img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; box-shadow: none; }
.poster-placeholder { font-size: 14px; color: #6a5978; padding: 16px; border: 1px dashed #bda9cc; border-radius: 4px; }
.card-caption h3 { font-size: 23px; line-height: 1.15; }
.troupe-stamp { max-width: 25ch; }
.prose { white-space: normal; }
@media (max-width: 1280px) {
 .navigation { display: none; }
 .header-inner { grid-template-columns: 1fr auto auto auto; }
 .mobile-nav { display: block; position: relative; }
 .mobile-nav summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 8px 14px; border: 1px solid #5532a4; border-radius: 6px; font-size: 14px; }
 .mobile-nav summary::-webkit-details-marker { display: none; }
 .mobile-nav nav { position: absolute; right: 0; top: 54px; z-index: 40; width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - var(--header-height) - 20px); overflow-y: auto; padding: 16px; background: #fff; color: #30154e; border: 1px solid #d8cbdf; box-shadow: 0 8px 24px #30154e20; border-radius: 8px; }
 .mobile-nav nav a { display: block; padding: 12px; text-decoration: none; min-height: 44px; }
 .mobile-nav nav .nav-join { margin-top: 8px; }
}
@media (max-width: 740px) {
 :root { --header-height: 122px; }
 .header-inner { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 8px; padding: 8px 0; min-height: 122px; }
 .wordmark { grid-column: 1; grid-row: 1; padding: 0; gap: 7px; }
 .header-logo { width: 36px; height: 36px; }
 .header-lettering { width: 156px; }
 .mobile-nav { grid-column: 2; grid-row: 1; justify-self: end; }
 .mobile-nav nav { position: fixed; right: 20px; top: calc(var(--header-height) + 8px); }
 .header-social { grid-column: 1; grid-row: 2; }
 .header-actions { grid-column: 2; grid-row: 2; justify-self: end; gap: 6px; }
 .header-action { font-size: 12px; padding: 9px 8px; gap: 5px; }
 .header-action svg { width: 19px; height: 19px; }
 .show-grid { grid-template-columns: 1fr; gap: 24px; }
 .picto { padding: 16px; }
 .picto img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
 .card-caption { padding: 18px 20px; gap: 12px; }
 .card-caption h3 { font-size: 23px; }
 .header-social .social-link { width: 44px; height: 44px; }
}
@media (max-width: 360px) {
 .header-inner { width: calc(100% - 24px); }
 .header-lettering { width: 140px; }
 .header-social { gap: 0; }
 .header-action { padding: 9px 7px; }
}

/* V4 — photos de démonstration, galerie accessible et fond en fondu. */
.home-photo-section { background:#f5eefb; }
.photo-section-heading { margin-bottom:28px; }
.photo-section-heading .eyebrow { color:#7441ac; margin-bottom:14px; }
.photo-section-heading h2 { margin-bottom:18px; }
.photo-demo-notice { font-size:14px; line-height:1.5; font-weight:600; }
.photo-section-heading .small { margin-top:12px; color:var(--muted); }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.photo-card { min-width:0; }
.photo-thumb { display:block; position:relative; border-radius:10px; overflow:hidden; border:1px solid #cfc0dc; background:#23142e; aspect-ratio:3/2; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.photo-thumb:hover img { transform:scale(1.035); }
.photo-demo-badge { position:absolute; bottom:10px; left:10px; color:white; background:#241232e8; font-size:11px; padding:3px 8px; border-radius:4px; }
.photo-zoom { position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:#ffffffeb; color:#30154e; display:flex; justify-content:center; align-items:center; }
.photo-card figcaption { margin-top:12px; font-size:14px; line-height:1.45; }
.photo-card figcaption strong,.photo-card figcaption span { display:block; }
.photo-card figcaption span { color:var(--muted); margin-top:6px; font-size:12px; }
.photo-pending-grid>.photo-gallery { grid-column:1/-1; }
.photo-pending-grid .photo-section-heading h2 { font-size:36px; }
.photo-viewer { border:1px solid #71518a; border-radius:12px; padding:0; background:#1e112b; color:#fff; width:min(1184px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 20px 90px #0009; }
.photo-viewer::backdrop { background:#11091cdd; }
.photo-viewer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 18px; background:#1e112b; position:sticky; top:0; z-index:2; }
.photo-viewer button { background:#fff; color:#30154e; border:0; border-radius:6px; min-height:44px; min-width:44px; padding:8px 12px; font-size:14px; }
.photo-viewer-stage { display:grid; grid-template-columns:52px minmax(0,1fr) 52px; gap:12px; align-items:center; padding:0 18px; }
.photo-viewer-stage img { width:100%; height:min(62dvh,650px); object-fit:contain; background:#150b1e; }
.photo-viewer-stage button { font-size:24px; }
.photo-viewer-caption { padding:18px 24px 24px; }
.photo-viewer-caption p+p { margin-top:8px; }
.photo-viewer-caption .small { font-size:12px; color:#e4d7ed; }
.join-photo-section { position:relative; isolation:isolate; overflow:hidden; background:#241235; color:#fff; min-height:660px; padding:48px 0 96px; }
.join-photo-background,.join-photo-veil { position:absolute; inset:0; z-index:-2; }
.join-photo-background .join-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:0; transition:opacity 1.3s ease; }
.join-photo-background .join-photo.is-active { opacity:1; }
.join-photo-veil { z-index:-1; background:linear-gradient(90deg,#21102bd6 0%,#281237a6 48%,#21102b4d 100%); }
.join-slideshow-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:80px; }
.background-demo-label { background:#21102be0; color:white; padding:6px 10px; border:1px solid #ffffff50; border-radius:5px; font-size:12px; line-height:1.4; }
.background-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.background-controls button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; border:1px solid #ffffff80; border-radius:6px; color:#fff; background:#21102bd9; padding:8px 12px; font-size:13px; }
.background-controls button:disabled { opacity:.85; cursor:default; }
.background-counter { font-size:12px; background:#21102bd9; padding:8px; border-radius:4px; }
.join-photo-section .join-home-grid { align-items:center; }
.join-photo-section .eyebrow { color:#fff4a1; }
.join-photo-section .join-home-panel { background:#fffdf8f5; color:#30154e; }
@media(max-width:740px) {
 .photo-grid { grid-template-columns:1fr; gap:28px; }
 .photo-thumb { aspect-ratio:16/10; }
 .photo-viewer { width:calc(100% - 16px); max-height:calc(100dvh - 16px); }
 .photo-viewer-toolbar { padding:10px; }
 .photo-viewer-stage { grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; padding:0 6px; }
 .photo-viewer-stage img { height:48dvh; }
 .photo-viewer-caption { padding:16px; }
 .join-photo-section { padding:32px 0 64px; min-height:860px; }
 .join-slideshow-toolbar { flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:56px; }
 .join-photo-background .join-photo { object-position:42% center; }
 .join-photo-veil { background:linear-gradient(180deg,#21102b80,#21102bc9 50%,#21102b88); }
 .background-controls { gap:5px; }
 .background-controls button { padding:8px 9px; font-size:12px; }
 .photo-pending-grid .photo-section-heading h2 { font-size:30px; }
}
@media(max-width:740px) {
 .photo-viewer-stage { display:block; position:relative; padding:0 6px; }
 .photo-viewer-stage img { height:auto; max-height:64dvh; width:100%; object-fit:contain; }
 .photo-viewer-stage button { position:absolute; top:50%; transform:translateY(-50%); z-index:1; background:#fffffff0; }
 .photo-viewer-stage [data-photo-prev] { left:12px; }
 .photo-viewer-stage [data-photo-next] { right:12px; }
}

/* V5 — souvenirs, composition décorative sans interaction sur les images */
.memory-section{background:#f5eefb;overflow:hidden;padding-bottom:48px}
.memory-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.memory-heading h2{margin:0 0 12px}.memory-demo-notice{font-size:12px;color:#695b76;margin:0}
.memory-heading button{background:transparent;color:#513280;border:1px solid #baa8ce;border-radius:24px;font-size:12px;padding:9px 16px;white-space:nowrap}
.memory-window{overflow:hidden;padding:52px 0 48px;pointer-events:none}
.memory-track{display:flex;width:max-content;animation:memories-left 65s linear infinite;will-change:transform}
.memory-group{display:flex;align-items:center;padding:0 68px;flex-shrink:0}
.memory-card{position:relative;flex:none;width:clamp(240px,25vw,360px);margin-left:-68px;padding:9px 9px 30px;background:#fffdf7;box-shadow:0 10px 24px #29143c26,0 1px 3px #29143c30;transform:translateY(var(--lift)) rotate(var(--tilt));z-index:var(--layer)}
.memory-card:first-child{margin-left:0}.memory-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0;filter:saturate(.88)}
.memory-section.is-paused .memory-track{animation-play-state:paused}
@keyframes memories-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.memory-heading{gap:12px;align-items:flex-start}.memory-heading h2{font-size:32px}.memory-heading button{padding:8px 11px;font-size:11px}.memory-demo-notice{max-width:180px}.memory-window{padding:46px 0 44px}.memory-card{margin-left:-54px;padding:7px 7px 25px}.memory-group{padding:0 44px}.memory-section{padding-bottom:28px}}
@media(prefers-reduced-motion:reduce){.memory-track{animation:none;will-change:auto}}

/* V6 — véritables tracés vectoriels fournis par la troupe, sans déformation. */
.header-lettering{width:240px;height:auto;max-width:100%}
.identity-heading img{width:100%;height:auto}
.footer-brand img{display:block;width:100%;height:auto}
.produce-art img{width:280px;height:auto;max-width:85%;object-fit:contain}
@media(max-width:1150px){.header-lettering{width:210px}}
@media(max-width:600px){.header-lettering{width:200px}}
@media(max-width:360px){.header-lettering{width:180px}}