/* ═══════════════════════════════════════════════════════════
   DANC·R — Landing temporaire : concours chorégraphique LABAZ
   Charger après styles.css, styles-ecoles.css, hero-ecoles.css,
   styles-audience.css et styles-theme.css
   ═══════════════════════════════════════════════════════════ */

body.page-concours-labaz {
  background: var(--white);
  color: var(--anthracite);
}

html.theme-dark body.page-concours-labaz {
  background: #0a0a0a;
  color: #fafafa;
}

/* Accent de la page : le vert menthe de l'identité LABAZ.
   Les composants ec-* héritent de --blue, on le surcharge donc ici. */
body.page-concours-labaz .page-audience-main {
  --blue: #37cda0;
  --labaz-blue: #00289b;
  --labaz-mint: #37cda0;
  --labaz-red: #e1000f;
}

/* Les eyebrows héritent du gris par défaut : sur photo comme sur fond noir,
   le contraste est insuffisant. On les passe à l'accent de la page. */
.page-concours-labaz .page-audience-main .section-eyebrow--ecole {
  color: var(--labaz-mint, #37cda0);
  margin-bottom: var(--space-md);
}

/* Landing d'acquisition : le CTA doit rester au-dessus de la ligne de flottaison.
   On supprime le décalage de 10vh qui pousse le contenu sous l'image. */
body.page-concours-labaz .ec-hero {
  --ec-hero-shift: 0vh;
  min-height: 100svh;
}

/* La photo du hero est une halle très éclairée, aux tons orangés : le voile par
   défaut, calibré pour des visuels sombres, laisse le texte illisible. On
   superpose un voile vertical marqué et une teinte bleu LABAZ qui recolle la
   photo à la charte. */
html.theme-dark body.page-concours-labaz .ec-hero__scrim {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.72) 34%,
      rgba(0, 0, 0, 0.86) 62%,
      rgba(0, 0, 0, 0.96) 82%,
      #000000 100%
    ),
    linear-gradient(160deg, rgba(0, 40, 155, 0.34), rgba(0, 40, 155, 0) 62%);
}

body.page-concours-labaz .cl-hero__media img {
  object-position: 56% 46%;
}

/* La photo est en 16/9. Étirée sur un hero mobile presque deux fois plus haut
   que large, « cover » n'en garde qu'une bande verticale méconnaissable. On la
   réduit donc à un bandeau haut qui se fond dans le noir : la composition reste
   lisible et le titre gagne un fond uni. */
@media (max-width: 767px) {
  body.page-concours-labaz .ec-hero__media {
    height: 46svh;
    max-height: 46svh;
  }

  /* Décalé vers la gauche pour que le totem DANC·R de la photo ne se retrouve
     pas derrière le logo DANC·R du hero. */
  body.page-concours-labaz .cl-hero__media img {
    object-position: 8% center;
  }

  html.theme-dark body.page-concours-labaz .ec-hero__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.44) 0%,
        rgba(0, 0, 0, 0.46) 45%,
        rgba(0, 0, 0, 0.78) 78%,
        #000000 100%
      ),
      linear-gradient(160deg, rgba(0, 40, 155, 0.24), rgba(0, 40, 155, 0) 60%);
  }
}

/* ── Co-branding (hero) ── */
.cl-cobrand {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
  margin-bottom: var(--space-md);
}

.cl-cobrand__logo {
  height: clamp(32px, 5vw, 46px);
  width: auto;
}

.cl-cobrand__logo--labaz {
  height: clamp(54px, 9vw, 82px);
}

.cl-cobrand__x {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(255, 255, 255, 0.5);
}

/* ── Bandeau prix dans le hero ── */
.cl-hero__prize {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-pill);
  background: rgba(55, 205, 160, 0.14);
  border: 1px solid rgba(55, 205, 160, 0.4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  color: var(--labaz-mint, #37cda0);
}

.cl-hero__prize strong {
  font-weight: 900;
  font-size: 1.15em;
}

/* ── Compte à rebours ── */
.cl-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  border-bottom: 1px solid var(--grey-200);
}

html.theme-dark .cl-countdown {
  border-bottom-color: var(--border, rgba(255, 255, 255, 0.1));
}

.cl-countdown__label {
  flex: 1 1 14rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-500);
  max-width: 18rem;
}

html.theme-dark .cl-countdown__label {
  color: rgba(255, 255, 255, 0.6);
}

.cl-countdown__unit {
  min-width: 4.25rem;
  padding: 0.6rem 0.7rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--grey-200);
  background: var(--grey-50);
  text-align: center;
}

html.theme-dark .cl-countdown__unit {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.cl-countdown__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--anthracite);
  font-variant-numeric: tabular-nums;
}

html.theme-dark .cl-countdown__value {
  color: #fff;
}

.cl-countdown__unit-label {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-500);
}

html.theme-dark .cl-countdown__unit-label {
  color: rgba(255, 255, 255, 0.62);
}

/* Sur petit écran, le libellé sur la même ligne ne laisse la place qu'à une
   seule unité : on le passe au-dessus et on répartit les quatre unités. */
@media (max-width: 640px) {
  .cl-countdown__label {
    flex: 1 0 100%;
    max-width: none;
  }

  .cl-countdown__unit {
    flex: 1 1 0;
    min-width: 0;
  }
}

.cl-countdown.is-over .cl-countdown__unit {
  display: none;
}

.cl-countdown__over {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--anthracite);
}

html.theme-dark .cl-countdown__over {
  color: #fff;
}

.cl-countdown.is-over .cl-countdown__over {
  display: block;
}

/* ── Bandeau d'infos clés ── */
.cl-facts {
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
}

html.theme-dark .cl-facts {
  border-color: var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.02);
}

.page-audience-main > section.cl-facts {
  margin-block: 0;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.cl-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
}

@media (min-width: 760px) {
  .cl-facts__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cl-fact__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 0.35rem;
}

html.theme-dark .cl-fact__label {
  color: rgba(255, 255, 255, 0.5);
}

.cl-fact__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--anthracite);
}

html.theme-dark .cl-fact__value {
  color: #fafafa;
}

.cl-fact__value em {
  font-style: normal;
  color: var(--labaz-mint, #37cda0);
}

/* ── Vidéo verticale de la choré (YouTube Short) ── */
.cl-video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-width: min(100%, 360px);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--grey-200);
}

html.theme-dark .cl-video {
  border-color: rgba(255, 255, 255, 0.12);
}

.cl-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.cl-video__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  max-width: 360px;
  margin-inline: auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--grey-500);
}

.cl-video__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--labaz-mint, #37cda0);
}

html.theme-dark .cl-video__caption {
  color: rgba(255, 255, 255, 0.5);
}

.cl-video__caption a {
  color: var(--labaz-mint, #37cda0);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

/* ── Kit du concours : vidéo à gauche, chorégraphe et bande-son à droite ── */
.cl-chore__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-xl);
}

@media (min-width: 900px) {
  .cl-chore__grid {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

.cl-chore__actions {
  margin-top: var(--space-md);
}

.cl-chore__media {
  margin: 0;
}

.cl-kit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.cl-kit__item {
  padding: clamp(1.2rem, 2.6vw, 1.65rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  background: var(--grey-50);
}

html.theme-dark .cl-kit__item {
  border-color: var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.035);
}

.cl-kit__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--labaz-mint, #37cda0);
  margin-bottom: 0.4rem;
}

.cl-kit__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--anthracite);
  margin-bottom: 0.5rem;
}

html.theme-dark .cl-kit__title {
  color: #fafafa;
}

.cl-kit__body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--grey-700);
}

html.theme-dark .cl-kit__body {
  color: rgba(255, 255, 255, 0.72);
}

.cl-kit__audio {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  border-radius: var(--radius-pill);
}

/* Le lecteur natif est clair par défaut : sur fond sombre il faut l'inverser. */
html.theme-dark .cl-kit__audio {
  color-scheme: dark;
}

.cl-kit__link {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--space-sm);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(55, 205, 160, 0.45);
  background: rgba(55, 205, 160, 0.12);
  text-decoration: none;
  transition: background-color 0.2s;
}

.cl-kit__link:hover {
  background: rgba(55, 205, 160, 0.22);
}

.cl-kit__handle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--labaz-mint, #37cda0);
}

.cl-kit__meta {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-500);
}

html.theme-dark .cl-kit__meta {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Section « qui organise » : trois cartes ── */
.cl-who__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (min-width: 980px) {
  .cl-who__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cl-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  background: var(--grey-50);
}

html.theme-dark .cl-card {
  border-color: var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.035);
}

/* Les deux logos ont des rapports d'aspect très différents (le lockup LABAZ est
   en 16/9, le wordmark DANC·R très allongé) : une hauteur commune donnerait
   des poids visuels déséquilibrés. On les calibre séparément. */
.cl-card__logo {
  width: auto;
  margin-bottom: var(--space-md);
}

/* Enfants directs d'un conteneur flex en colonne : sans align-self, le stretch
   par défaut les élargit sur toute la carte et casse leur rapport d'aspect. */
.cl-card > .cl-card__logo,
.cl-card > picture {
  align-self: flex-start;
}

.cl-card__logo--labaz {
  height: clamp(56px, 9vw, 80px);
}

.cl-card__logo--dancr {
  height: clamp(26px, 4vw, 36px);
}

/* Le logo FFDanse est bleu marine sur blanc : posé tel quel sur la carte sombre,
   son texte disparaît. On le présente donc sur une pastille blanche, ce qui
   respecte ses couleurs de marque plutôt que de le passer en monochrome. */
.cl-card__logo--ffdanse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  background: #ffffff;
}

.cl-card__logo--ffdanse img {
  display: block;
  width: auto;
  height: clamp(50px, 8vw, 70px);
}

.cl-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
}

html.theme-dark .cl-card__title {
  color: #fafafa;
}

.cl-card__body {
  font-size: 1.0125rem;
  line-height: 1.6;
  color: var(--grey-700);
  margin-bottom: var(--space-sm);
}

html.theme-dark .cl-card__body {
  color: rgba(255, 255, 255, 0.72);
}

.cl-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 var(--space-md);
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--grey-700);
}

html.theme-dark .cl-card__list {
  color: rgba(255, 255, 255, 0.72);
}

.cl-card__list li {
  padding-left: 1.4rem;
  position: relative;
}

.cl-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--labaz-mint, #37cda0);
}

.cl-card__footer {
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* Les composants ec-moment ne prévoyaient qu'un paragraphe par étape. */
.ec-moment__body + .ec-moment__body {
  margin-top: 0.75rem;
}

/* ── Liste de contraintes dans une étape ── */
.ec-moment__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-md);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--grey-700);
}

html.theme-dark .ec-moment__list {
  color: rgba(255, 255, 255, 0.72);
}

.ec-moment__list li {
  position: relative;
  padding-left: 1.4rem;
}

.ec-moment__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--labaz-mint, #37cda0);
}

/* ── Encadré d'avertissement ── */
.cl-callout {
  margin-top: var(--space-lg);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(225, 0, 15, 0.32);
  border-left-width: 3px;
  background: rgba(225, 0, 15, 0.06);
}

.cl-callout--wide {
  max-width: 74ch;
  margin-top: 0;
}

.cl-callout__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--labaz-red, #e1000f);
  margin-bottom: 0.5rem;
}

html.theme-dark .cl-callout__label {
  color: #ff6b73;
}

.cl-callout__body {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--grey-700);
}

html.theme-dark .cl-callout__body {
  color: rgba(255, 255, 255, 0.78);
}

.cl-callout__body + .cl-callout__body {
  margin-top: 0.7rem;
}

.cl-callout__body a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ── Podium des prix ── */
.cl-podium {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (min-width: 760px) {
  .cl-podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
}

.cl-podium__step {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  background: var(--grey-50);
  text-align: center;
}

html.theme-dark .cl-podium__step {
  border-color: var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.035);
}

.cl-podium__step--first {
  border-color: rgba(55, 205, 160, 0.45);
  background: rgba(55, 205, 160, 0.09);
}

html.theme-dark .cl-podium__step--first {
  border-color: rgba(55, 205, 160, 0.4);
  background: rgba(55, 205, 160, 0.09);
}

@media (min-width: 760px) {
  .cl-podium__step--first {
    order: 2;
    padding-block: clamp(2rem, 4vw, 3rem);
  }
  .cl-podium__step--second {
    order: 1;
  }
  .cl-podium__step--third {
    order: 3;
  }
}

.cl-podium__rank {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 0.5rem;
}

html.theme-dark .cl-podium__rank {
  color: rgba(255, 255, 255, 0.55);
}

.cl-podium__step--first .cl-podium__rank,
html.theme-dark .cl-podium__step--first .cl-podium__rank {
  color: var(--labaz-mint, #37cda0);
}

.cl-podium__amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--anthracite);
}

html.theme-dark .cl-podium__amount {
  color: #fafafa;
}

.cl-podium__step--first .cl-podium__amount,
html.theme-dark .cl-podium__step--first .cl-podium__amount {
  color: var(--labaz-mint, #37cda0);
  font-size: clamp(3rem, 7.5vw, 4.75rem);
}

.cl-podium__note {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--grey-700);
}

html.theme-dark .cl-podium__note {
  color: rgba(255, 255, 255, 0.66);
}

.cl-podium__footnote {
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--grey-700);
  max-width: 58ch;
}

html.theme-dark .cl-podium__footnote {
  color: rgba(255, 255, 255, 0.66);
}

/* ── Bloc partage : hashtags & comptes ── */
.cl-share {
  margin-top: var(--space-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--grey-200);
  background: var(--grey-50);
}

html.theme-dark .cl-share {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.cl-share__row + .cl-share__row {
  margin-top: var(--space-md);
}

.cl-share__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 0.55rem;
}

html.theme-dark .cl-share__label {
  color: rgba(255, 255, 255, 0.5);
}

.cl-share__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cl-share__tags li {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--grey-200);
  background: var(--white);
  color: var(--anthracite);
}

html.theme-dark .cl-share__tags li {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fafafa;
}

.cl-share__tags li.is-primary,
html.theme-dark .cl-share__tags li.is-primary {
  border-color: rgba(55, 205, 160, 0.45);
  background: rgba(55, 205, 160, 0.12);
  color: var(--labaz-mint, #37cda0);
}

.cl-share__tags a {
  text-decoration: none;
}

.cl-share__tags a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Le nom de la plateforme accompagne le pseudo sans lui voler la vedette. */
.cl-share__tags a span {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500);
}

html.theme-dark .cl-share__tags a span {
  color: rgba(255, 255, 255, 0.45);
}

.cl-copy {
  cursor: pointer;
  border: 1px solid rgba(55, 205, 160, 0.45);
  background: rgba(55, 205, 160, 0.12);
  color: var(--labaz-mint, #37cda0);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  transition: background-color 0.2s, color 0.2s;
}

.cl-copy:hover {
  background: rgba(55, 205, 160, 0.22);
}

.cl-copy.is-copied {
  background: var(--labaz-mint, #37cda0);
  color: #06281f;
}

/* ── Critères de notation du jury ── */
.cl-criteria {
  margin-top: var(--space-xl);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
}

html.theme-dark .cl-criteria {
  border-color: var(--border, rgba(255, 255, 255, 0.1));
}

.cl-criteria__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}

.cl-criteria__caption {
  padding: clamp(0.9rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
  text-align: left;
}

html.theme-dark .cl-criteria__caption {
  color: rgba(255, 255, 255, 0.5);
}

.cl-criteria__table th,
.cl-criteria__table td {
  padding: 0.85rem clamp(1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--grey-200);
  vertical-align: top;
}

html.theme-dark .cl-criteria__table th,
html.theme-dark .cl-criteria__table td {
  border-top-color: var(--border, rgba(255, 255, 255, 0.1));
}

.cl-criteria__table thead th {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
}

html.theme-dark .cl-criteria__table thead th {
  color: rgba(255, 255, 255, 0.5);
}

.cl-criteria__table tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--anthracite);
  white-space: nowrap;
}

html.theme-dark .cl-criteria__table tbody th {
  color: #fafafa;
}

.cl-criteria__table tbody td {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey-700);
}

html.theme-dark .cl-criteria__table tbody td {
  color: rgba(255, 255, 255, 0.7);
}

.cl-criteria__pts-head,
.cl-criteria__table td.cl-criteria__pts {
  text-align: right;
  white-space: nowrap;
}

.cl-criteria__table td.cl-criteria__pts {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--labaz-mint, #37cda0);
  font-variant-numeric: tabular-nums;
}

.cl-criteria__note {
  margin-top: var(--space-lg);
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--grey-700);
}

html.theme-dark .cl-criteria__note {
  color: rgba(255, 255, 255, 0.66);
}

/* ── Crédits : chorégraphe, fédération, région, festival ── */
.cl-credits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (min-width: 620px) {
  .cl-credits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .cl-credits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cl-credit {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.6vw, 1.65rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  background: var(--grey-50);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

html.theme-dark .cl-credit {
  border-color: var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.035);
}

.cl-credit:hover {
  border-color: rgba(55, 205, 160, 0.5);
  background: rgba(55, 205, 160, 0.07);
  transform: translateY(-2px);
}

.cl-credit__role {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 0.5rem;
}

html.theme-dark .cl-credit__role {
  color: rgba(255, 255, 255, 0.5);
}

.cl-credit__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--anthracite);
  margin-bottom: 0.45rem;
}

html.theme-dark .cl-credit__name {
  color: #fafafa;
}

.cl-credit__body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-700);
  margin-bottom: var(--space-md);
}

html.theme-dark .cl-credit__body {
  color: rgba(255, 255, 255, 0.68);
}

.cl-credit__handle {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--labaz-mint, #37cda0);
}

/* ── Encart dépliable du règlement ── */
.cl-reglement {
  margin-top: var(--space-lg);
  max-width: 76ch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  background: var(--grey-50);
  overflow: hidden;
}

html.theme-dark .cl-reglement {
  border-color: var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.035);
}

.cl-reglement__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s;
}

/* Safari affiche encore le triangle natif sans ce sélecteur. */
.cl-reglement__summary::-webkit-details-marker {
  display: none;
}

.cl-reglement__summary:hover {
  background: rgba(55, 205, 160, 0.07);
}

.cl-reglement__summary:focus-visible {
  outline: 2px solid var(--labaz-mint, #37cda0);
  outline-offset: -2px;
}

.cl-reglement__summary-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--anthracite);
}

html.theme-dark .cl-reglement__summary-title {
  color: #fafafa;
}

.cl-reglement__summary-hint {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--labaz-mint, #37cda0);
}

.cl-reglement__chevron {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(55, 205, 160, 0.45);
  background: rgba(55, 205, 160, 0.12);
  position: relative;
}

.cl-reglement__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--labaz-mint, #37cda0);
  border-bottom: 2px solid var(--labaz-mint, #37cda0);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 0.2s;
}

.cl-reglement[open] .cl-reglement__chevron::before {
  transform: translate(-50%, -35%) rotate(225deg);
}

.cl-reglement__body {
  padding: 0 clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--grey-200);
}

html.theme-dark .cl-reglement__body {
  border-top-color: var(--border, rgba(255, 255, 255, 0.1));
}

/* ── Règlement intégral ── */
.cl-rules__intro {
  max-width: 68ch;
}

.cl-rules__download {
  margin-top: var(--space-md);
}

.cl-rules__doc {
  margin-top: var(--space-md);
  counter-reset: cl-article;
}

.cl-article {
  padding-block: clamp(1.25rem, 2.8vw, 1.9rem);
  border-top: 1px solid var(--grey-200);
}

html.theme-dark .cl-article {
  border-top-color: var(--border, rgba(255, 255, 255, 0.1));
}

.cl-article:last-child {
  border-bottom: 1px solid var(--grey-200);
}

html.theme-dark .cl-article:last-child {
  border-bottom-color: var(--border, rgba(255, 255, 255, 0.1));
}

.cl-article__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--anthracite);
  margin-bottom: var(--space-sm);
}

html.theme-dark .cl-article__title {
  color: #fafafa;
}

.cl-article__num {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--labaz-mint, #37cda0);
  margin-bottom: 0.35rem;
}

.cl-article p,
.cl-article li {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grey-700);
}

html.theme-dark .cl-article p,
html.theme-dark .cl-article li {
  color: rgba(255, 255, 255, 0.72);
}

.cl-article p + p,
.cl-article ul + p {
  margin-top: 0.75rem;
}

.cl-article strong {
  color: var(--anthracite);
}

html.theme-dark .cl-article strong {
  color: #fafafa;
}

.cl-article a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cl-article a:hover {
  color: var(--labaz-mint, #37cda0);
}

.cl-article ul {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cl-article ul li {
  position: relative;
  padding-left: 1.1rem;
}

.cl-article ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--labaz-mint, #37cda0);
}

.cl-article__table-wrap {
  margin-top: var(--space-md);
  overflow-x: auto;
}

.cl-article__table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  text-align: left;
}

.cl-article__table th,
.cl-article__table td {
  padding: 0.7rem 1rem 0.7rem 0;
  border-top: 1px solid var(--grey-200);
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.5;
}

html.theme-dark .cl-article__table th,
html.theme-dark .cl-article__table td {
  border-top-color: var(--border, rgba(255, 255, 255, 0.1));
}

.cl-article__table thead th {
  border-top: 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
}

html.theme-dark .cl-article__table thead th {
  color: rgba(255, 255, 255, 0.5);
}

.cl-article__table tbody th {
  font-weight: 700;
  color: var(--anthracite);
  padding-right: 1.5rem;
}

html.theme-dark .cl-article__table tbody th {
  color: #fafafa;
}

.cl-article__table tbody td {
  color: var(--grey-700);
}

html.theme-dark .cl-article__table tbody td {
  color: rgba(255, 255, 255, 0.72);
}

.cl-rules__foot {
  margin-top: var(--space-lg);
  max-width: 76ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--grey-500);
}

html.theme-dark .cl-rules__foot {
  color: rgba(255, 255, 255, 0.5);
}

.cl-rules__foot a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ── Bandeau partenaires ── */
.cl-partners-strip {
  border-top: 1px solid var(--grey-200);
}

html.theme-dark .cl-partners-strip {
  border-top-color: var(--border, rgba(255, 255, 255, 0.1));
}

.page-audience-main > section.cl-partners-strip {
  padding-block: clamp(2rem, 5vw, 3.25rem);
  margin-block: 0;
}

.cl-partners-strip__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
  text-align: center;
  margin-bottom: var(--space-md);
}

html.theme-dark .cl-partners-strip__label {
  color: rgba(255, 255, 255, 0.5);
}

.cl-partners-strip__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}

.cl-partners-strip__logos img {
  height: clamp(32px, 5vw, 46px);
  width: auto;
}

.cl-partners-strip__logos img.is-tall {
  height: clamp(46px, 7vw, 68px);
}

/* Même contrainte que sur la carte « Qui organise » : le logo FFDanse est en
   bleu marine sur blanc, il lui faut sa pastille pour rester lisible ici. */
.cl-partners-strip__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-md);
  background: #ffffff;
}

.cl-partners-strip__chip img {
  height: clamp(38px, 5.5vw, 54px);
}