/*
Theme Name: Cirque Phénix — Sous-sites
Theme URI: https://phenix.paris/
Template: cirque-phenix
Author: Edgar Tessier
Author URI: https://www.edgar-tessier.fr
Description: Socle des sous-sites professionnels du Cirque Phénix — CSE, scolaires, groupes, événementiel. Un site, un profil, choisi dans le Personnalisateur. Thème enfant de cirque-phenix : le parent reste seul propriétaire des couleurs, des polices et des espacements, rien n'est redéfini ici. Le mécanisme de profils reste en place pour décliner les sites scolaires, groupes et événementiel.
Version: 1.60.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cirque-phenix-sous-sites
*/

/* ============================================================================
   CIRQUE PHÉNIX — PRO : couche professionnelle
   ----------------------------------------------------------------------------
   SOMMAIRE (Cmd+F sur « § P n »)

   § P0   Correctif hérité et variables locales
   § P1   (libre — la barre utilitaire est celle du parent)
   § P2   Hero
   § P3   Repères de réassurance
   § P4   Offres
   § P5   Parcours en étapes
   § P6   Références et verbatim
   § P7   Le spectacle
   § P8   Le chapiteau — fiche technique
   § P9   Générateur d'affiche
   § P10  Foire aux questions
   § P11  Formulaire de devis
   § P12  Pré-pied de page
   § P13  Adaptatif
   § P14  Impression, accessibilité, mouvement réduit
   § P15  Sections du profil Scolaires

   CONVENTIONS — identiques au thème parent
   - Aucune couleur, police ou espacement en dur : uniquement les variables
     déclarées au § 1 du parent (--copper, --ink, --sp-md, --ease…).
   - Aucun !important hors prefers-reduced-motion et réinitialisation des
     styles injectés par WordPress.
   - Les surcharges de section se préfixent par leur identifiant (#offres .h2),
     jamais par !important.
   - Toutes les classes de cette couche sont préfixées « cpp- » : aucune
     collision possible lors d'une mise à jour du parent.
   ============================================================================ */

/* ==== § P0 — CORRECTIF HÉRITÉ ET VARIABLES LOCALES ==== */

/* CORRECTIF. Dans cirque-phenix 2.55.0, style.css ligne 57 ouvre un commentaire
   par « * » au lieu de « /* ». Le premier @font-face — Barlow 400, la graisse
   du corps de texte — est donc avalé par un sélecteur invalide et supprimé par
   le navigateur : tout le texte courant du site s'affiche en system-ui.
   On le redéclare ici, en pointant sur le fichier du parent.
   À supprimer de ce fichier le jour où le parent est corrigé. */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../cirque-phenix/assets/fonts/barlow-semicondensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Trois valeurs propres au B2B, toutes dérivées du parent.
     Le beige existe déjà en variable chez le parent mais pas dans la palette
     Gutenberg : theme.json l'y ajoute, on ne le redéclare pas ici. */
  --cpp-panel: #f7f4ee; /* fond des zones de données, entre --paper et --beige */
  --cpp-rule: var(--copper-hair);
  --cpp-rule-strong: var(--copper-hair-strong);

  /* ---------------------------------------------------------------------
     ÉCHELLE TYPOGRAPHIQUE — DÉCLARÉE DANS LE THÈME PARENT

     Ce thème n'en redéclare aucun jeton, volontairement.

     Il l'a fait un temps, avec des valeurs proches mais différentes :
     --fs-5 valait 16 px chez le parent et 15,5 ici, --fs-h4 allait jusqu'à
     38 px là-bas et 30 ici. Onze jetons sur vingt-cinq divergeaient.

     Le piège n'est pas la divergence elle-même, c'est sa portée. La feuille
     de l'enfant est chargée APRÈS celle du parent : redéclarer un jeton ne
     modifie pas seulement les règles écrites ici, cela modifie aussi toutes
     les règles du PARENT rendues sur ce site. Un en-tête, un pied de page,
     un bouton conçus pour 16 px se retrouvaient composés à 15,5 sans que
     rien ne le signale.

     Une seule table, chez le parent. Ce thème l'utilise, il ne la double pas.
     --------------------------------------------------------------------- */
}

/* Chiffres alignés en colonne : indispensable dès qu'on compare des nombres.
   C'est la seule liberté typographique que prend cette couche. */
.cpp-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Sur-titre de section, repris du parent, avec son filet.
   Rappel de la règle du brief : une eye-brow + un H2 par section. */
.cpp-sec {
  padding: var(--ef-6) var(--ef-3);
}
.cpp-sec--tight {
  padding-block: clamp(56px, 8vh, 104px);
}
.cpp-sec--panel {
  background: var(--cpp-panel);
}
.cpp-sec--night {
  background: var(--night);
  color: var(--paper);
}
.cpp-sec--night .h2,
.cpp-sec--night h2,
.cpp-sec--night h3 {
  color: var(--paper);
}
.cpp-sec--night .eyebrow {
  color: var(--copper-lt);
}
.cpp-sec--night .eyebrow::after {
  background: var(--copper-lt);
}
.cpp-lead {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  margin: 0 0 var(--e-7);
}
.cpp-lead:last-child {
  margin-bottom: 0;
}
.cpp-sec--night .cpp-lead {
  color: rgba(252, 251, 249, 0.74);
}
.cpp-head {
  margin-bottom: var(--e-12);
}
.cpp-head .h2 {
  margin: 0 0 var(--e-7);
  max-width: 20ch;
}

/* ==== § P1 — EN-TÊTE PROFESSIONNEL ==== */

/* Sortie de secours vers le site grand public, en pied de bandeau d'accueil.
   Un salarié arrive souvent ici par une recherche, en cherchant en réalité à
   réserver pour lui-même : sans porte de sortie visible, il repart. */
.cpp-exit {
  margin: var(--ef-2) 0 0;
  font-size: var(--fs-3);
  letter-spacing: var(--ls-0);
  color: rgba(252, 251, 249, 0.5);
}
.cpp-exit a {
  color: var(--copper-lt);
  text-decoration: none;
  border-bottom: 1px solid rgba(183, 154, 114, 0.4);
  transition: border-color 0.3s var(--ease);
}
.cpp-exit a:hover,
.cpp-exit a:focus-visible {
  border-bottom-color: var(--copper-lt);
}

/* ==== § P2 — HERO ==== */

/* Parti pris : la promesse chiffrée porte le hero, pas l'image.
   Un élu de CSE ne cherche pas une émotion, il cherche à savoir si
   son effectif tient dans la salle. La photo reste en fond, assombrie. */
.cpp-hero {
  position: relative;
  /*
   * Pleine hauteur, comme le bandeau de phenix.paris.
   *
   * Il était plafonné à min(76vh, 720px). Sur un écran de bureau, les deux
   * sites n'ouvraient donc pas de la même façon : le principal occupait
   * l'écran entier, le sous-site s'arrêtait aux trois quarts et laissait
   * apparaître le début de la section suivante. Quatre sites qui partagent
   * une charte doivent partager leur premier écran.
   *
   * On garde dvh plutôt que vh : sur mobile, vh se calcule sur la fenêtre
   * barre d'adresse repliée, ce qui pousse le contenu sous la ligne de
   * flottaison tant qu'elle est dépliée. dvh suit la hauteur réellement
   * visible.
   */
  min-height: 95vh;
  min-height: 95dvh;
  display: flex;
  align-items: flex-end;
  /* Rembourrage bas repris du principal : clamp(48px, 8vh, 90px). */
  padding: var(--ef-6) var(--ef-3) var(--ef-4);
  background: var(--night);
  overflow: hidden;
  isolation: isolate;
}

/*
 * Barre d'administration : elle occupe 32 px en haut de page et décalerait le
 * bandeau d'autant, laissant une bande vide sous le pli. Invisible pour les
 * visiteurs, ce défaut ne se voit que de l'intérieur — c'est-à-dire par les
 * seules personnes qui pourraient le signaler.
 */
.admin-bar .cpp-hero {
  min-height: calc(95vh - 32px);
  min-height: calc(95dvh - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .cpp-hero {
    min-height: calc(95vh - 46px);
    min-height: calc(95dvh - 46px);
  }
}

/*
 * Sous 900 px, hauteur libre — comme le principal.
 *
 * Sur un téléphone à l'horizontale, 95 vh font moins de 400 px : le titre, la
 * phrase, les trois pastilles et le bouton n'y tiennent pas, et une hauteur
 * imposée les comprime au lieu de laisser la page s'allonger.
 */
@media (max-width: 900px) {
  .cpp-hero,
  .admin-bar .cpp-hero {
    min-height: auto;
  }
}
.cpp-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cpp-hero-media img,
.cpp-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Le voile qui rend le titre lisible par-dessus la photo. Son intensité se
   règle dans Personnaliser → 1. Bandeau : les quatre valeurs sont calculées
   côté serveur et posées en variables sur la section. Trop clair, le texte
   devient illisible sur les zones vives ; trop dense, la photo ne sert plus
   à rien. */
.cpp-hero {
  --voile-1: 0.7;
  --voile-2: 0.45;
  --voile-3: 0.15;
  --voile-4: 0.6;
}
.cpp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to right,
      rgba(13, 12, 11, var(--voile-1)) 0%,
      rgba(13, 12, 11, var(--voile-2)) 44%,
      rgba(13, 12, 11, var(--voile-3)) 100%
    ),
    linear-gradient(to top, rgba(13, 12, 11, var(--voile-4)) 0%, rgba(13, 12, 11, 0) 46%);
}
/*
 * Bloc de texte collé à gauche, comme sur le principal.
 *
 * Il était centré dans un conteneur de 1240 px : sur un écran large, le
 * titre démarrait plusieurs centaines de pixels après celui du site
 * principal, alors que les deux bandeaux ont le même rembourrage. Cet écart
 * de départ se voyait davantage que la différence de corps.
 *
 * 852 px est la mesure de .hero-video .inner du thème parent.
 */
.cpp-hero-inner {
  max-width: 852px;
  margin: 0;
  width: 100%;
}
.cpp-hero .eyebrow {
  color: var(--copper-lt);
}
.cpp-hero .eyebrow::after {
  background: var(--copper-lt);
}
/*
 * Le bandeau reprend l'échelle typographique du site principal.
 *
 * Les deux sites partagent une charte, mais leurs bandeaux ne partageaient
 * aucune valeur : le titre plafonnait à 74 px contre 96, l'accroche à 19 px
 * contre 27, et surtout elle était composée dans la police de labeur là où le
 * principal emploie la serif d'accent. Côte à côte, on ne voyait pas deux
 * déclinaisons d'une même marque mais deux sites différents.
 *
 * Les valeurs ci-dessous sont celles de .h1 et .lead du thème parent,
 * reprises à l'identique. Elles ne sont pas héritées : le bandeau du
 * sous-site n'utilise pas ces classes, et les y basculer casserait le
 * balisage du reste du thème.
 */
.cpp-hero h1 {
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-1);
  line-height: var(--lh-0);
  font-size: var(--fs-h1); /* charte-ok: bandeau d’accueil, seul titre à occuper l’écran */
  margin: 0 0 var(--e-7);
  /* 16ch à 74 px laissait passer deux mots par ligne ; à 96 px, la même
     mesure couperait « Odyssée » sur un écran étroit. */
  max-width: 14ch;
}
.cpp-hero-lead {
  color: rgba(255, 255, 255, 0.8);
  /* La serif d'accent, comme sur le principal. C'est l'écart qui se voyait le
     plus : une accroche en police de labeur se lit comme un paragraphe
     ordinaire, pas comme la phrase d'ouverture d'un spectacle. */
  font-family: var(--font-accent);
  /*
   * Italique maigre, comme sur le principal.
   *
   * L'accroche y porte la classe « lead i », dont le modificateur passe en
   * italique et descend la graisse à 300. C'est ce détail qui distinguait le
   * plus les deux bandeaux à l'œil, bien avant l'écart de corps : le
   * principal ouvre sur une phrase posée, le sous-site sur un paragraphe.
   */
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-3);
  /* 600 px comme le principal, plutôt qu'une mesure en caractères : à 27 px,
     48ch dépassaient la moitié de l'écran. */
  max-width: 600px;
  margin: 0 0 var(--e-11);
}
.cpp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  align-items: center;
}

/* La bande de chiffres du hero : filets cuivre, pas de cartes flottantes.
   Une fiche technique se lit en colonnes, pas en vignettes. */
/* Le socle de chiffres.
   Un seul bloc de papier posé sur la photo, et non quatre boîtes : l'Opéra
   ne multiplie pas les objets, il en pose un et lui donne de l'air. Le filet
   intérieur — geste maison repris des cartes de tournée — n'apparaît donc
   qu'une fois, autour de l'ensemble.

   Disposition en flexbox et non en grille : les quatre colonnes se partagent
   la largeur à parts égales, et les libellés démarrent tous à la même
   hauteur, quel qu'en soit le nombre de lignes. C'est ce désalignement qui
   donnait un air bricolé à la version précédente.

   Ni ombre ni effet de survol : rien ici n'est cliquable, et un objet qui
   réagit au passage de la souris promet une action qui n'existe pas. */
.cpp-figures {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background: var(--paper);
  margin-top: var(--ef-4);
  padding: var(--ef-1);
}
/* Filet intérieur, en retrait du bord. */
.cpp-figures::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 0.9vw, 12px);
  border: 1px solid var(--copper-hair);
  pointer-events: none;
}
.cpp-figures > div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ef-2) var(--ef-1) var(--ef-2);
}
/* Séparateurs entre colonnes, pas d'encadrement autour de chacune. */
.cpp-figures > div + div {
  border-left: 1px solid var(--copper-hair);
}
/* Trait cuivre au-dessus du chiffre : le seul accent de couleur du socle. */
.cpp-figures > div::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--copper);
  margin-bottom: var(--ef-1);
}
.cpp-fig-n {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-0);
  letter-spacing: var(--ls-0);
  color: var(--ink);
  /* Chiffres de largeur fixe : les quatre nombres s'alignent optiquement au
     lieu de danser selon qu'ils contiennent un 1 ou un 5. */
  font-variant-numeric: tabular-nums;
}
.cpp-fig-l {
  display: block;
  margin-top: var(--ef-1);
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  letter-spacing: var(--ls-3);
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 20ch;
}

/* Le socle passe en deux colonnes, puis en une seule. Les filets suivent :
   verticaux tant qu'il y a deux colonnes, horizontaux ensuite. */
@media (max-width: 780px) {
  .cpp-figures > div {
    flex: 1 1 44%;
  }
  .cpp-figures > div:nth-child(odd) {
    border-left: 0;
  }
  .cpp-figures > div:nth-child(n + 3) {
    border-top: 1px solid var(--copper-hair);
  }
}
@media (max-width: 480px) {
  .cpp-figures > div {
    flex: 1 1 100%;
    border-left: 0;
  }
  .cpp-figures > div + div {
    border-left: 0;
    border-top: 1px solid var(--copper-hair);
  }
}

/* ==== § P3 — REPÈRES DE RÉASSURANCE ==== */

.cpp-marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-1);
  background: var(--cpp-rule);
  border: 1px solid var(--cpp-rule);
}
.cpp-mark {
  background: var(--paper);
  padding: var(--e-11) var(--e-9);
}
.cpp-mark svg {
  width: 26px;
  height: 26px;
  color: var(--copper);
  display: block;
  margin-bottom: var(--e-7);
}
.cpp-mark h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-2);
  color: var(--ink);
  margin: 0 0 var(--e-4);
}
.cpp-mark p {
  margin: 0;
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  color: var(--ink-soft);
}

/* ==== § P4 — OFFRES ==== */

.cpp-offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-9);
}
.cpp-offre {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--cpp-rule);
  padding: var(--e-11) var(--e-9) var(--e-9);
  transition:
    border-color 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.cpp-offre:hover,
.cpp-offre:focus-within {
  border-color: var(--cpp-rule-strong);
  transform: translateY(-3px);
}
.cpp-offre-for {
  font-size: var(--fs-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-4);
  color: var(--copper);
  margin: 0 0 var(--e-7);
}
.cpp-offre h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-1);
  line-height: var(--lh-1);
  color: var(--ink);
  margin: 0 0 var(--e-7);
}
.cpp-offre-price {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding: var(--e-7) 0;
  border-top: 1px solid var(--cpp-rule);
  border-bottom: 1px solid var(--cpp-rule);
  margin-bottom: var(--e-7);
}
.cpp-offre-from {
  font-size: var(--fs-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  color: var(--ink-soft);
}
.cpp-offre-amount {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-0);
  color: var(--ink);
}
/* Sans montant renseigné, la mention passe au second plan : trois « Tarif sur
   devis » en grand, côte à côte, font trois cartes vides. Le titre reprend
   alors la conduite de la carte. */
.cpp-offre-price--devis .cpp-offre-amount {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-3);
  text-transform: uppercase;
  color: var(--copper);
}
.cpp-offre-price--devis {
  padding-block: 14px;
}
.cpp-offre-unit {
  font-size: var(--fs-3);
  color: var(--ink-soft);
}
.cpp-offre-body {
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  color: var(--ink-soft);
  margin: 0 0 var(--e-9);
}
.cpp-offre-list {
  list-style: none;
  margin: 0 0 var(--e-9);
  padding: 0;
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  color: var(--ink-soft);
}
.cpp-offre-list li {
  position: relative;
  padding-left: var(--e-7);
  margin-bottom: var(--e-4);
}
.cpp-offre-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--copper);
}
.cpp-offre-foot {
  margin-top: auto;
}
.cpp-offre-note {
  display: block;
  margin-top: var(--e-5);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  color: var(--ink-soft);
}

/* ==== § P5 — PARCOURS EN ÉTAPES ==== */

/* La numérotation est ici légitime : c'est une séquence réelle,
   et l'ordre porte une information que le lecteur doit retenir. */
.cpp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-9);
  counter-reset: cpp-step;
}
.cpp-step {
  position: relative;
  padding-top: var(--e-9);
  border-top: 1px solid var(--cpp-rule-strong);
  counter-increment: cpp-step;
}
.cpp-step::before {
  content: counter(cpp-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-3);
  color: var(--copper);
  margin-bottom: var(--e-7);
}
.cpp-step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-2);
  color: var(--ink);
  margin: 0 0 var(--e-4);
}
.cpp-step p {
  margin: 0;
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  color: var(--ink-soft);
}
.cpp-sec--night .cpp-step {
  border-top-color: rgba(183, 154, 114, 0.32);
}
.cpp-sec--night .cpp-step h3 {
  color: var(--paper);
}
.cpp-sec--night .cpp-step p {
  color: rgba(252, 251, 249, 0.7);
}
.cpp-sec--night .cpp-step::before {
  color: var(--copper-lt);
}

/* ==== § P6 — RÉFÉRENCES ET VERBATIM ==== */

.cpp-refs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-9) var(--e-11);
  align-items: center;
  padding-block: var(--e-11);
  border-top: 1px solid var(--cpp-rule);
  border-bottom: 1px solid var(--cpp-rule);
}
.cpp-ref img {
  max-width: 100%;
  height: auto;
  max-height: 52px;
  width: auto;
  margin: 0 auto;
  display: block;
  /* Les logos clients arrivent dans toutes les couleurs. Désaturés au repos,
     ils forment une ligne homogène ; la couleur revient au survol. */
  filter: grayscale(1);
  opacity: 0.55;
  transition:
    filter 0.4s var(--ease),
    opacity 0.4s var(--ease);
}
.cpp-ref:hover img,
.cpp-ref:focus-within img {
  filter: none;
  opacity: 1;
}
.cpp-ref-name {
  display: block;
  text-align: center;
  font-size: var(--fs-3);
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cpp-quote {
  max-width: 46rem;
  margin: var(--e-12) auto 0;
  text-align: center;
}
.cpp-quote blockquote {
  margin: 0 0 var(--e-9);
  font-size: var(--fs-lead);
  line-height: var(--lh-3);
  color: var(--ink);
  font-weight: 400;
}
.cpp-quote figcaption {
  font-size: var(--fs-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  color: var(--copper);
}

/* ==== § P7 — LE SPECTACLE ==== */

.cpp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--efh-4);
  align-items: center;
}
.cpp-split--poster {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}
.cpp-split figure {
  margin: 0;
}
/* Dans un bloc en deux colonnes, le titre n'est pas dans .cpp-head :
   sans cette règle il colle au premier paragraphe. */
.cpp-split .h2,
.cpp-devis-aside .h2 {
  margin: 0 0 var(--e-7);
}
.cpp-split .eyebrow,
.cpp-devis-aside .eyebrow {
  margin-bottom: var(--e-7);
}
.cpp-split img,
.cpp-split video {
  width: 100%;
  height: auto;
  display: block;
}
.cpp-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-7);
  margin-top: var(--e-11);
  padding-top: var(--e-9);
  border-top: 1px solid rgba(183, 154, 114, 0.28);
}
.cpp-spec dt {
  font-size: var(--fs-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  color: var(--copper-lt);
  margin-bottom: var(--e-3);
}
.cpp-spec dd {
  margin: 0;
  font-size: var(--fs-5);
  color: var(--paper);
}

/* ==== § P8 — LE CHAPITEAU, FICHE TECHNIQUE ==== */

.cpp-tech {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-11) var(--efh-4);
}
.cpp-tech dl {
  margin: 0;
  border-top: 1px solid var(--cpp-rule-strong);
}
.cpp-tech-t {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-4);
  color: var(--copper);
  margin: 0 0 var(--e-7);
}
.cpp-tech-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-7);
  align-items: baseline;
  padding: var(--e-7) var(--e-9) var(--e-7) 0;
  border-bottom: 1px solid var(--cpp-rule);
}
.cpp-tech-row dt {
  font-size: var(--fs-4);
  color: var(--ink-soft);
  line-height: var(--lh-3);
}
.cpp-tech-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-5);
  letter-spacing: var(--ls-1);
  color: var(--ink);
  text-align: right;
  /* Pas de white-space: nowrap ici. Les valeurs d'accès sont des phrases
     (« Place du Cardinal-Lavigerie, Paris 12ᵉ ») : elles débordaient de
     l'écran sur mobile. Seuls les chiffres restent insécables. */
}
.cpp-tech-row dd.cpp-num {
  white-space: nowrap;
}

/* ==== § P9 — GÉNÉRATEUR D'AFFICHE ==== */

/* L'élément signature du site. Un CSE ne repart pas d'ici avec un billet :
   il repart avec l'affiche qu'il va punaiser dans la salle de pause.
   Tout se passe dans le navigateur, aucun fichier n'est envoyé au serveur. */
.cpp-affiche {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--efh-4);
  align-items: start;
}
.cpp-affiche-stage {
  position: relative;
  background: var(--night-2);
  border: 1px solid rgba(183, 154, 114, 0.28);
  padding: var(--ef-1);
}
.cpp-affiche-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 896 / 1512;
  background: var(--night);
}
.cpp-affiche-hint {
  margin: var(--e-5) 0 0;
  font-size: var(--fs-2);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: rgba(252, 251, 249, 0.42);
  text-align: center;
}
.cpp-field {
  margin-bottom: var(--e-9);
}
.cpp-field > label,
.cpp-legend {
  display: block;
  font-size: var(--fs-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  color: var(--copper-lt);
  margin-bottom: var(--e-4);
}
.cpp-sec--panel .cpp-field > label,
.cpp-sec--panel .cpp-legend {
  color: var(--copper);
}
.cpp-drop {
  display: block;
  border: 1px dashed rgba(183, 154, 114, 0.5);
  background: rgba(183, 154, 114, 0.05);
  padding: var(--e-9);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}
.cpp-drop:hover,
.cpp-drop.is-over,
.cpp-drop:focus-within {
  border-color: var(--copper-lt);
  background: rgba(183, 154, 114, 0.12);
}
.cpp-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cpp-drop-t {
  display: block;
  font-size: var(--fs-4);
  color: var(--paper);
  margin-bottom: var(--e-3);
}
.cpp-drop-s {
  display: block;
  font-size: var(--fs-3);
  color: rgba(252, 251, 249, 0.5);
}
.cpp-affiche-msg {
  margin: var(--e-5) 0 0;
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: var(--copper-lt);
  min-height: 1.5em;
}
.cpp-affiche-msg[data-state="error"] {
  color: #e2a08a;
}

/* ==== § P10 — FOIRE AUX QUESTIONS ==== */

.cpp-faq {
  max-width: 62rem;
  border-top: 1px solid var(--cpp-rule);
}
.cpp-faq-item {
  border-bottom: 1px solid var(--cpp-rule);
}
.cpp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-7);
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: var(--e-9) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--lh-2);
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.cpp-faq-q:hover {
  color: var(--copper);
}
.cpp-faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 1px solid var(--copper);
  border-bottom: 1px solid var(--copper);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.35s var(--ease);
}
.cpp-faq-q[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-3px, -3px);
}
.cpp-faq-a {
  display: none;
  padding: 0 0 var(--e-9);
  max-width: 68ch;
  font-size: var(--fs-5);
  line-height: var(--lh-5);
  color: var(--ink-soft);
}
.cpp-faq-a.is-open {
  display: block;
}
.cpp-faq-a p {
  margin: 0 0 0.8em;
}
.cpp-faq-a p:last-child {
  margin-bottom: 0;
}

/* ==== § P11 — FORMULAIRE DE DEVIS ==== */

.cpp-devis {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: var(--efh-4);
  align-items: start;
}
.cpp-devis-aside p {
  color: rgba(252, 251, 249, 0.72);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
}
.cpp-contact {
  list-style: none;
  margin: var(--e-11) 0 0;
  padding: var(--e-9) 0 0;
  border-top: 1px solid rgba(183, 154, 114, 0.28);
  font-size: var(--fs-5);
  line-height: var(--lh-5);
  color: rgba(252, 251, 249, 0.78);
}
.cpp-contact a {
  color: var(--copper-lt);
  text-decoration: none;
  border-bottom: 1px solid rgba(183, 154, 114, 0.35);
}
.cpp-contact a:hover,
.cpp-contact a:focus-visible {
  border-bottom-color: var(--copper-lt);
}
.cpp-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-7) var(--e-9);
}
.cpp-form input[type="text"],
.cpp-form input[type="email"],
.cpp-form input[type="tel"],
.cpp-form input[type="number"],
.cpp-form input[type="month"],
.cpp-form select,
.cpp-form textarea,
.cpp-affiche-form .cpp-field input[type="text"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-5);
  color: var(--paper);
  background: rgba(252, 251, 249, 0.05);
  border: 1px solid rgba(183, 154, 114, 0.32);
  border-radius: 0;
  padding: var(--e-5) var(--e-5);
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.cpp-form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-4);
}
.cpp-form select {
  /* Chevron dessiné : évite une image et reste net en tout DPI. */
  background-image: linear-gradient(45deg, transparent 50%, var(--copper-lt) 50%),
    linear-gradient(135deg, var(--copper-lt) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--e-10);
}
.cpp-form select option {
  color: var(--ink);
  background: var(--paper);
}
.cpp-form input:focus,
.cpp-form select:focus,
.cpp-form textarea:focus,
.cpp-affiche-form .cpp-field input:focus {
  outline: none;
  border-color: var(--copper-lt);
  background: rgba(252, 251, 249, 0.09);
}
.cpp-form input:focus-visible,
.cpp-form select:focus-visible,
.cpp-form textarea:focus-visible,
.cpp-affiche-form .cpp-field input:focus-visible {
  outline: 2px solid var(--copper-lt);
  outline-offset: 2px;
}
.cpp-form ::placeholder,
.cpp-affiche-form ::placeholder {
  color: rgba(252, 251, 249, 0.34);
}
.cpp-req {
  color: var(--copper-lt);
}
/* Le navigateur dessine une bordure « groove » et une encoche autour de tout
   fieldset. Elle apparaissait autour du groupe de cases à cocher, avec sa
   légende encastrée dedans : réinitialisation ici. */
.cpp-form fieldset,
.cpp-affiche-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.cpp-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px var(--e-9);
  border: 0;
  margin: 0 0 var(--e-9);
  padding: 0;
}
.cpp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: rgba(252, 251, 249, 0.82);
  cursor: pointer;
}
.cpp-check input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: var(--e-1);
  accent-color: var(--copper);
}
.cpp-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  font-size: var(--fs-3);
  line-height: var(--lh-4);
  color: rgba(252, 251, 249, 0.6);
  margin: var(--e-7) 0 var(--e-9);
}
.cpp-consent a {
  color: var(--copper-lt);
}
/* Piège à robots : masqué à l'œil et aux lecteurs d'écran, laissé au robot. */
.cpp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cpp-notice {
  padding: var(--e-9);
  border: 1px solid var(--copper);
  margin-bottom: var(--e-11);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
}
.cpp-notice--ok {
  background: rgba(183, 154, 114, 0.12);
  color: var(--paper);
}
.cpp-notice--ko {
  border-color: #c9765c;
  background: rgba(201, 118, 92, 0.12);
  color: #f0c8bb;
}
.cpp-notice strong {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-2);
  font-size: var(--fs-4);
  margin-bottom: var(--e-3);
  color: var(--copper-lt);
}
.cpp-errors {
  margin: 0 0 var(--e-9);
  padding-left: var(--e-6);
  font-size: var(--fs-4);
  color: #f0c8bb;
}

/* ==== § P12 — PRÉ-PIED DE PAGE ==== */

.cpp-final {
  text-align: center;
  padding: var(--ef-5) var(--ef-3);
  background: var(--ink);
}
.cpp-final .eyebrow {
  color: var(--copper-lt);
}
.cpp-final .eyebrow::after {
  background: var(--copper-lt);
  margin-inline: auto;
}
.cpp-final h2 {
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-1);
  line-height: var(--lh-1);
  margin: 0 auto var(--e-7);
  max-width: 18ch;
}
.cpp-final p {
  color: rgba(252, 251, 249, 0.7);
  max-width: 52ch;
  margin: 0 auto var(--e-11);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
}

/* ==== § P13 — ADAPTATIF ==== */

@media (max-width: 900px) {
  .cpp-split,
  .cpp-split--poster,
  .cpp-affiche,
  .cpp-devis {
    grid-template-columns: 1fr;
  }
  .cpp-affiche-stage {
    max-width: 420px;
    margin-inline: auto;
  }
  .cpp-hero {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .cpp-grid2 {
    grid-template-columns: 1fr;
  }
  .cpp-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .cpp-tech-row {
    grid-template-columns: 1fr;
    gap: var(--e-2);
    padding-right: 0;
  }
  .cpp-tech-row dd {
    text-align: left;
  }
}

/* ==== § P14 — IMPRESSION, ACCESSIBILITÉ, MOUVEMENT RÉDUIT ==== */

/* Un élu de CSE imprime la page pour sa commission. C'est un usage réel :
   la page doit rester lisible sur papier, sans fonds sombres ni formulaire. */
@media print {
  .cpp-hero,
  .cpp-sec--night,
  .cpp-final {
    background: #fff !important;
    color: #000 !important;
  }
  .cpp-hero::after,
  .cpp-hero-media,
  .cpp-affiche,
  .cpp-form,
  .cpp-crossline {
    display: none !important;
  }
  .cpp-hero h1,
  .cpp-sec--night .h2,
  .cpp-sec--night h2,
  .cpp-sec--night h3,
  .cpp-spec dd {
    color: #000 !important;
  }
  .cpp-faq-a {
    display: block !important;
  }
  .cpp-sec,
  .cpp-hero {
    padding-block: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpp-offre,
  .cpp-ref img,
  .cpp-faq-q,
  .cpp-faq-q::after,
  .cpp-drop {
    transition: none !important;
  }
  .cpp-offre:hover {
    transform: none !important;
  }
}

/* Le focus clavier doit rester visible partout dans cette couche. */
.cpp-faq-q:focus-visible,
.cpp-drop:focus-within,
.cpp-affiche a:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Diaporama du bandeau
   Les vues sont empilées au même endroit et se relaient en fondu. La première
   porte déjà la classe is-on côté serveur : sans JavaScript, elle reste
   affichée et rien ne bouge — ce qui est un état correct, pas une panne.
   -------------------------------------------------------------------------- */
.cpp-diapo .cpp-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.cpp-diapo .cpp-slide.is-on {
  opacity: 1;
}
/* Mouvement réduit demandé : le script ne démarre pas, une seule vue reste. */
@media (prefers-reduced-motion: reduce) {
  .cpp-diapo .cpp-slide {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Sections propres au profil Événementiel
   -------------------------------------------------------------------------- */
.cpp-ev-liste {
  list-style: none;
  margin: var(--e-9) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--e-1);
  background: var(--copper-hair);
  border: 1px solid var(--copper-hair);
}
.cpp-ev-liste li {
  background: var(--paper);
  padding: var(--e-6) var(--e-7);
  font-family: var(--font-body);
  font-size: var(--fs-5);
  line-height: var(--lh-3);
  color: var(--ink);
}
.cpp-sec--panel .cpp-ev-liste li {
  background: var(--cpp-panel);
}
/* Les annexes : la superficie et la capacité sont l'information, pas la
   décoration — elles passent avant la photo dans la hiérarchie de lecture. */
.cpp-annexes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ef-2);
  margin-top: var(--ef-3);
}
.cpp-annexe {
  display: flex;
  flex-direction: column;
}
.cpp-annexe img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  margin-bottom: var(--e-7);
}
.cpp-annexe h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-1);
  color: var(--ink);
  margin: 0 0 var(--e-5);
}
.cpp-annexe dl {
  margin: 0;
  border-top: 1px solid var(--copper-hair);
}
.cpp-annexe dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--copper-hair);
}
.cpp-annexe dt {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  font-size: var(--fs-1);
  color: var(--copper);
}
.cpp-annexe dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-5);
  color: var(--ink);
}
@media (max-width: 900px) {
  .cpp-annexes {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* --------------------------------------------------------------------------
   L'interlocuteur, juste avant le formulaire
   Un formulaire anonyme demande au visiteur de faire confiance à une adresse
   e-mail. Un visage et une ligne directe lui disent à qui il écrit.
   -------------------------------------------------------------------------- */
.cpp-contact {
  display: flex;
  align-items: center;
  gap: var(--ef-2);
  flex-wrap: wrap;
  padding: var(--ef-2) 0;
  border-top: 1px solid var(--copper-hair);
  border-bottom: 1px solid var(--copper-hair);
}
.cpp-contact img {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  object-fit: cover;
  display: block;
}
.cpp-contact-txt {
  flex: 1 1 260px;
}
.cpp-contact-nom {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-1);
  font-size: var(--fs-h5);
  color: var(--ink);
  margin: 0;
}
.cpp-contact-fonction {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  font-size: var(--fs-1);
  color: var(--copper);
  margin: var(--e-3) 0 var(--e-4);
}
.cpp-contact-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-8);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-5);
}
.cpp-contact-liens a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--copper-hair);
  padding-bottom: var(--e-1);
}
.cpp-contact-liens a:hover {
  border-bottom-color: var(--copper);
}
.cpp-contact-delai {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--ink-soft);
  margin: var(--e-5) 0 0;
}

/* --------------------------------------------------------------------------
   Pages de typologie
   Le bandeau est plus bas que celui de l'accueil : une page d'atterrissage
   doit montrer son texte, pas son décor. Le visiteur arrive de Google avec
   une question précise et veut la réponse, pas une mise en scène.
   -------------------------------------------------------------------------- */
.cpp-pagehero {
  position: relative;
  background: var(--night);
  color: var(--paper);
  padding: var(--ef-6) var(--ef-3) var(--ef-4);
  overflow: hidden;
}
.cpp-pagehero.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fond);
  background-size: cover;
  background-position: center;
}
.cpp-pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(13, 12, 11, var(--voile-1, 0.7)) 0%,
      rgba(13, 12, 11, var(--voile-2, 0.45)) 46%,
      rgba(13, 12, 11, var(--voile-3, 0.15)) 100%
    );
}
.cpp-pagehero > .container {
  position: relative;
  z-index: 1;
}
.cpp-pagehero .eyebrow {
  color: var(--copper-lt);
}
.cpp-pagehero .eyebrow::after {
  background: var(--copper-lt);
}
.cpp-pagehero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-0);
  line-height: var(--lh-0);
  color: var(--paper);
  max-width: 20ch;
  margin: 0 0 var(--e-7);
}
.cpp-pagehero-lead {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  line-height: var(--lh-4);
  color: rgba(233, 226, 214, 0.86);
  max-width: 54ch;
  margin: 0 0 var(--e-7);
}
/* La jauge est l'information cherchée en premier : elle a sa propre ligne. */
.cpp-pagehero-jauge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  font-size: var(--fs-2);
  color: var(--copper-lt);
  border-top: 1px solid rgba(183, 154, 114, 0.35);
  border-bottom: 1px solid rgba(183, 154, 114, 0.35);
  padding: var(--e-4) 0;
  margin: 0 0 var(--e-9);
}
.cpp-pagehero-actions {
  margin: 0;
}
/* Colonne de lecture : 68 caractères, pas la largeur du conteneur. */
.cpp-page-corps {
  max-width: 780px;
}
.cpp-points {
  list-style: none;
  margin: var(--ef-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ef-2);
}
.cpp-points li {
  padding-top: var(--e-7);
  border-top: 1px solid var(--copper-hair);
}
.cpp-points h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-2);
  color: var(--ink);
  margin: 0 0 var(--e-5);
}
.cpp-points p {
  font-family: var(--font-body);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  margin: 0;
}
.cpp-autres {
  list-style: none;
  margin: var(--e-9) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-1);
  background: var(--copper-hair);
  border: 1px solid var(--copper-hair);
}
.cpp-autres a {
  display: block;
  height: 100%;
  background: var(--paper);
  padding: var(--e-7) var(--e-9);
  text-decoration: none;
  transition: background 0.4s ease;
}
.cpp-autres a:hover {
  background: var(--cpp-panel);
}
.cpp-autres-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  font-size: var(--fs-1);
  color: var(--copper);
  margin-bottom: var(--e-4);
}
.cpp-autres-titre {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-6);
  line-height: var(--lh-2);
  color: var(--ink);
}
@media (max-width: 1000px) {
  .cpp-points,
  .cpp-autres {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .cpp-points,
  .cpp-autres {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Newsletter — correction du libellé
   Le formulaire vient de l'extension Phénix — Newsletter. Son libellé « Votre
   adresse e-mail » double mot pour mot le texte d'invite du champ et se pose
   à gauche, désaligné. On le retire de l'affichage sans le retirer aux
   lecteurs d'écran : le champ garde son étiquette accessible.

   Trois sélecteurs pour trois balisages possibles, l'extension n'étant pas
   sous notre contrôle. La case de consentement, elle, garde son libellé
   visible — c'est une obligation, pas une décoration.
   -------------------------------------------------------------------------- */
.cp-news-form label:has(+ input[type="email"]),
.cp-news-form label:has(+ input[type="text"]),
.cp-news-form label:has(> input[type="email"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: calc(-1 * var(--e-1));
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Repli pour les navigateurs sans :has() — le libellé repasse au-dessus du
   champ, aligné à gauche, plutôt que flottant à côté. */
@supports not selector(:has(*)) {
  .cp-news-form label {
    display: block;
    text-align: left;
    margin-bottom: var(--e-3);
  }
}
/* La rangée champ + bouton reste alignée sur une même ligne de base. */
.cp-news-form form {
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Galerie « en configuration événement »
   Grille de trois, sans effet de survol ni visionneuse : chaque kilo-octet de
   JavaScript se paie sur le score de vitesse, et une visionneuse n'a jamais
   fait signer un devis.
   -------------------------------------------------------------------------- */
.cpp-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ef-1);
  margin-top: var(--ef-3);
}
.cpp-galerie figure {
  margin: 0;
  overflow: hidden;
}
.cpp-galerie img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .cpp-galerie {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .cpp-galerie {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Fil d'Ariane des pages de typologie
   -------------------------------------------------------------------------- */
.cpp-fil {
  font-family: var(--font-body);
  font-size: var(--fs-3);
  letter-spacing: var(--ls-1);
  color: rgba(233, 226, 214, 0.62);
  margin-bottom: var(--e-7);
}
.cpp-fil a {
  color: rgba(233, 226, 214, 0.62);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cpp-fil a:hover {
  color: var(--copper-lt);
  border-bottom-color: var(--copper-lt);
}
.cpp-fil span[aria-hidden] {
  margin: 0 var(--e-4);
  color: var(--copper);
}

/* ==== § P15 — SECTIONS DU PROFIL SCOLAIRES ==== */

/* Parti pris : ce lecteur monte un dossier de sortie. La page reprend la
   composition de /scolaires/ du site historique — spectacle, images, apports,
   fiche pratique — mais chaque bloc est ramené aux conventions de la couche
   professionnelle : une eye-brow, un H2, des filets plutôt que des cartes. */

/* Pastilles du bandeau : date, horaire, tarif. Trois faits qu'un enseignant
   relève avant de lire quoi que ce soit d'autre. */
.cpp-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin: 0 0 var(--e-9);
  padding: 0;
}
.cpp-pill {
  font-family: var(--font-body);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(252, 251, 249, 0.38);
  padding: var(--e-4) var(--e-6);
}
/* La pastille mise en avant reprend exactement le fond du bouton « Demander
   un devis » du menu : c'est le même geste — un prix, une action — et deux
   cuivres différents à quelques centimètres l'un de l'autre se voyaient.
   Le texte passe en blanc, plus lisible que le nuit sur ce cuivre-là. */
.cpp-pill.est-or {
  background: var(--copper-lt);
  border-color: var(--copper-lt);
  color: #fff;
}

/* 2. Le spectacle : l'affiche à gauche, le texte à droite. */
.cpp-sco-duo {
  display: grid;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  gap: var(--efh-4);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}
.cpp-sco-affiche img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cpp-rule);
}
.cpp-sco-texte .cpp-head {
  margin-bottom: var(--e-9);
}
.cpp-sco-liste {
  list-style: none;
  margin: var(--e-9) 0 0;
  padding: 0;
  max-width: 62ch;
  border-top: 1px solid var(--cpp-rule);
}
.cpp-sco-liste li {
  padding: var(--e-5) 0;
  border-bottom: 1px solid var(--cpp-rule);
  color: var(--ink-soft);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
}
.cpp-sco-liste li::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--copper);
  margin: 0 var(--e-5) var(--e-2) 0;
}

/* 3. Le spectacle en images. La première photo tient deux rangées : sans
   hiérarchie, cinq vignettes égales ressemblent à une planche-contact. */
.cpp-sco-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-1);
  max-width: 1240px;
  margin: 0 auto;
}
.cpp-sco-photo {
  margin: 0;
  overflow: hidden;
  background: var(--night);
  aspect-ratio: 4 / 3;
}
.cpp-sco-photo.est-principale {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.cpp-sco-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease, ease);
}
.cpp-sco-photo:hover img {
  transform: scale(1.03);
}
.cpp-sco-note {
  max-width: 1240px;
  margin: var(--e-7) auto 0;
  font-size: var(--fs-3);
  letter-spacing: var(--ls-1);
  color: var(--ink-soft);
}

/* 4. Les quatre apports : filets pleine largeur, titre à gauche, texte à
   droite. Même dispositif que les étapes du parcours CSE. */
/* Chapeau en deux colonnes : le titre tient la gauche, l'introduction la
   droite. Empilés, ils laissaient six cents pixels de blanc sur la moitié
   droite de l'écran, un vide qui ne séparait rien. */
.cpp-pourquoi-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--efh-4);
  align-items: end;
}
.cpp-pourquoi-tete .cpp-head {
  margin-bottom: 0;
}
.cpp-pourquoi-tete .cpp-lead {
  margin: 0;
  /* Alignée sur la dernière ligne du titre plutôt que sur son sommet :
     accrochée en haut, elle flottait à côté d'un titre plus grand qu'elle. */
  padding-bottom: var(--e-3);
  max-width: 46ch;
}

@media (max-width: 900px) {
  .cpp-pourquoi-tete {
    grid-template-columns: 1fr;
    gap: var(--e-6);
    align-items: start;
  }
  .cpp-pourquoi-tete .cpp-lead {
    padding-bottom: 0;
  }
}

.cpp-sco-apports {
  margin-top: var(--e-12);
  border-top: 1px solid var(--cpp-rule);
}

/* Trois colonnes : le rang, le titre, le texte. Le rang remplace le filet
   court qui coiffait chaque titre — il rythme la liste et donne à voir
   qu'elle se compte, ce qu'un trait ne disait pas. */
.cpp-sco-apport {
  display: grid;
  grid-template-columns: auto minmax(180px, 22%) minmax(0, 1fr);
  gap: var(--ef-2);
  padding: var(--ef-2) 0;
  border-bottom: 1px solid var(--cpp-rule);
  align-items: baseline;
  transition: background 0.25s var(--ease);
}
/* Le survol déborde la gouttière : sans cela, la bande de couleur s'arrête
   au bord du texte et donne l'impression d'un fond mal calé. */
.cpp-sco-apport:hover {
  background: var(--cpp-panel);
  box-shadow: -18px 0 0 var(--cpp-panel), 18px 0 0 var(--cpp-panel);
}

.cpp-apport-rang {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-2);
  color: var(--copper);
  /* Chiffres de même chasse : sans cela, 01 et 04 n'ont pas la même largeur
     et la colonne des titres tremble d'une ligne à l'autre. */
  font-variant-numeric: tabular-nums;
}

.cpp-sco-apport h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-2);
}
.cpp-sco-apport p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-6);
  line-height: var(--lh-5);
  /* 70 caractères plutôt que 62 : la colonne fait maintenant la moitié de la
     largeur, et une mesure trop courte y laissait une bande vide à droite. */
  max-width: 70ch;
}

@media (max-width: 760px) {
  /* Le rang passe au-dessus du titre : sur une colonne, il volerait sinon
     une gouttière entière à un texte déjà à l'étroit. */
  .cpp-sco-apport {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }
  .cpp-sco-apport:hover {
    background: transparent;
    box-shadow: none;
  }
}

/* 5. Fiche pratique : quatre faits sur un socle unique, séparés par des
   filets. Un seul objet, pas quatre cartes — même choix qu'au § 1.7.0. */
.cpp-sco-infos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-1);
  background: rgba(252, 251, 249, 0.16);
  border: 1px solid rgba(252, 251, 249, 0.16);
  margin: var(--e-12) 0 0;
  max-width: 1240px;
}
.cpp-sco-infos > div {
  background: var(--night);
  padding: var(--e-9) var(--e-8);
  text-align: center;
}
.cpp-sco-infos dt {
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--ls-4);
  text-transform: uppercase;
  color: var(--copper-lt);
  margin-bottom: var(--e-6);
}
.cpp-sco-infos dd {
  margin: 0;
}
.cpp-sco-val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-0);
  color: var(--paper);
}
.cpp-sco-unite {
  display: block;
  margin-top: var(--e-4);
  font-size: var(--fs-4);
  letter-spacing: var(--ls-1);
  color: rgba(252, 251, 249, 0.55);
}
.cpp-sco-accomp {
  max-width: 1240px;
  margin: var(--e-9) 0 0;
  border: 1px solid rgba(252, 251, 249, 0.18);
  padding: var(--e-8) var(--e-9);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  color: rgba(252, 251, 249, 0.74);
}
.cpp-sco-accomp strong {
  color: var(--paper);
  font-weight: 600;
}
.cpp-sco-reglement {
  max-width: 1240px;
  margin: var(--e-7) 0 0;
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  color: rgba(252, 251, 249, 0.5);
}

/* 6. Offre anticipée. */
.cpp-sco-promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ef-3);
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
}
.cpp-sco-promo .h2 {
  margin: 0 0 var(--e-5);
  max-width: 18ch;
}
.cpp-sco-promo p {
  margin: 0;
  max-width: 46ch;
  color: rgba(252, 251, 249, 0.7);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
}

/* Adaptatif du profil scolaires. */
@media (max-width: 1024px) {
  .cpp-sco-infos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .cpp-sco-duo,
  .cpp-sco-apport {
    grid-template-columns: 1fr;
  }
  .cpp-sco-affiche {
    max-width: 420px;
  }
  .cpp-sco-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .cpp-sco-photo.est-principale {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 520px) {
  .cpp-sco-infos {
    grid-template-columns: 1fr;
  }
  .cpp-pill {
    font-size: var(--fs-2);
    padding: var(--e-4) var(--e-5);
  }
}

/* ==========================================================================
   VIDÉO DE FOND DU BANDEAU
   --------------------------------------------------------------------------
   Même boîte que le diaporama : la vidéo couvre le bandeau, l'image d'attente
   la recouvre jusqu'à la première image lue, puis s'efface. Sans ce relais,
   le bandeau reste noir le temps du chargement — quelques dixièmes de seconde
   sur fibre, plusieurs secondes ailleurs.
   ========================================================================== */
.cpp-hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0d0c0b;
}
.cpp-hero-video,
.cpp-hero-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cpp-hero-video-poster {
  z-index: 1;
  transition: opacity 0.6s ease;
}
.cpp-hero-video-wrap.is-playing .cpp-hero-video-poster {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cpp-hero-video-poster {
    transition: none;
  }
}

/* ==========================================================================
   PRÉ-HEADER : RETOUR AU SITE GRAND PUBLIC
   --------------------------------------------------------------------------
   Placé tout à gauche, avant le nom du site. La flèche est dessinée en CSS :
   pas de police d'icônes à charger pour un chevron, et elle recule de trois
   pixels au survol — le mouvement dit le retour mieux que le mot.
   ========================================================================== */
.tb-back {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-1);
  letter-spacing: var(--ls-4);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding: var(--e-5) 0;
  transition: color 0.3s var(--ease);
}
.tb-back-fleche {
  position: relative;
  width: 15px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.tb-back-fleche::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.tb-back:hover,
.tb-back:focus-visible {
  color: #fff;
}
.tb-back:hover .tb-back-fleche,
.tb-back:focus-visible .tb-back-fleche {
  transform: translateX(-3px);
}
.tb-back:focus-visible {
  outline: 2px solid var(--copper-lt);
  outline-offset: 3px;
}

/* Le nom du site fait doublon avec le logo juste en dessous : sur les
   écrans étroits, c'est lui qui s'efface, pas le retour. */
@media (max-width: 900px) {
  .topbar-inner .tb-lead {
    display: none;
  }
  .tb-back-txt {
    display: none;
  }
  .tb-back {
    padding-right: var(--e-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tb-back,
  .tb-back-fleche {
    transition: none;
  }
}

/* Aide sous un champ de formulaire : un seuil ou un plafond doit se lire
   avant la saisie, pas après le message d'erreur. */
.cpp-form .cpp-aide {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  color: rgba(233, 226, 214, 0.55);
}

/* ==========================================================================
   PAGES COMPOSÉES — gabarit « Page — bandeau et sections »
   ========================================================================== */

/* Titres de section masqués à la demande (case « Masquer le sur-titre et le
   titre des sections »).

   Masqués à l'œil, pas au balisage. Le H2 reste dans le document : c'est lui
   qui tient la hiérarchie entre le H1 du bandeau et les H3 de la section.
   Le supprimer pour éviter une redite visuelle casserait la structure que les
   moteurs et les lecteurs d'écran parcourent.

   La technique est celle du texte hors écran, et non display:none, qui
   l'aurait retiré aussi pour ces derniers. */
.cpp-page-sections.sans-titres .cpp-head .eyebrow,
.cpp-page-sections.sans-titres .cpp-head .h2,
.cpp-page-sections.sans-titres .cpp-devis-aside > .eyebrow,
.cpp-page-sections.sans-titres .cpp-devis-aside > .h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: calc(-1 * var(--e-1));
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le titre parti, l'en-tête de section ne doit pas laisser sa marge : sans
   cela le vide qu'il occupait reste, et la section semble mal calée. */
.cpp-page-sections.sans-titres .cpp-head {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Première section après le bandeau : forcée en clair

   La section « Demande de devis » est peinte en sombre parce qu'elle a été
   conçue comme un accent de fin de page d'accueil : elle arrive après cinq
   sections claires, et le contraste la détache.

   Sur une page qui ne contient qu'un bandeau et ce formulaire, l'accent n'a
   plus rien à quoi s'opposer. Les deux blocs sombres se soudent en un mur noir
   de près de deux mille pixels, sans respiration, et le formulaire — qui est
   pourtant le seul objet de la page — n'est plus mis en valeur par rien.

   La règle est automatique et non un réglage de plus : un mur noir n'est
   jamais le rendu voulu, il n'y a donc rien à arbitrer. Elle ne se déclenche
   que sur la collision exacte — une section sombre en PREMIÈRE position sous
   le bandeau. Dès qu'une section claire la précède, l'accent retrouve son
   sens et le sombre est conservé.

   Le fond retenu est le beige des zones de données, pas le blanc : entre le
   noir du bandeau et le blanc du pied de page, il pose un palier plutôt qu'une
   rupture. -------------------------------------------------------------- */

.cpp-page-sections > .cpp-sec--night:first-child {
  background: var(--cpp-panel);
  color: var(--ink);
}

.cpp-page-sections > .cpp-sec--night:first-child .h2,
.cpp-page-sections > .cpp-sec--night:first-child h2,
.cpp-page-sections > .cpp-sec--night:first-child h3 {
  color: var(--ink);
}
.cpp-page-sections > .cpp-sec--night:first-child .eyebrow {
  color: var(--copper);
}
.cpp-page-sections > .cpp-sec--night:first-child .eyebrow::after {
  background: var(--copper);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-lead,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-devis-aside p {
  color: var(--ink-soft);
}

/* Coordonnées : le cuivre clair, lisible sur noir, tombe à 2,1:1 sur beige.
   On passe au cuivre plein, qui tient le 4,5:1 du niveau AA. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-contact {
  color: var(--ink-soft);
  border-top-color: var(--cpp-rule-strong);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-contact a {
  color: var(--copper);
  border-bottom-color: rgba(133, 104, 74, 0.4);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-contact a:hover,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-contact a:focus-visible {
  border-bottom-color: var(--copper);
}

/* Champs. Le fond blanc franc les découpe nettement sur le beige : sur une
   page qui n'existe que pour ce formulaire, on doit voir où écrire sans
   chercher. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="text"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="email"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="tel"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="number"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="month"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form select,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form textarea {
  color: var(--ink);
  background: #fff;
  border-color: var(--cpp-rule-strong);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input:focus,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form select:focus,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form textarea:focus {
  border-color: var(--copper);
  background: #fff;
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input:focus-visible,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form select:focus-visible,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form textarea:focus-visible {
  outline-color: var(--copper);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form ::placeholder {
  /* 0,34 d'opacité sur noir donnait un gris tenu ; la même valeur sur blanc
     descend sous le seuil de lisibilité. */
  color: rgba(20, 18, 16, 0.38);
}

/* Le chevron du menu déroulant est dessiné en dégradés : sa couleur ne suit
   pas celle du texte, il faut la reprendre. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--copper) 50%),
    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
}

/* Libellés, mentions et cases à cocher. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-field > label,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-legend {
  color: var(--copper);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-req {
  color: var(--copper);
}
/* L'aide est traitée plus bas, avec sa propre valeur : la lister ici aussi
   ferait croire à un réglage qui n'a pas lieu, la cascade donnant la main à
   la règle suivante. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-checks label,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form small {
  color: var(--ink-soft);
}

/* Bouton d'envoi. Il porte la classe « on-dark », écrite en dur dans le
   formulaire : cuivre clair sur bordure translucide, prévu pour le noir. Posé
   sur beige, il tombe à 2,4:1 — sous le seuil de lisibilité. On le repasse en
   cuivre plein, qui tient le 4,5:1. */
.cpp-page-sections > .cpp-sec--night:first-child .btn.on-dark {
  color: var(--copper);
  border-color: rgba(133, 104, 74, 0.55);
}
.cpp-page-sections > .cpp-sec--night:first-child .btn.on-dark::before {
  background: var(--copper);
}
.cpp-page-sections > .cpp-sec--night:first-child .btn.on-dark:hover {
  color: var(--paper);
}

/* Le bandeau perd son épaisseur quand il n'a qu'un titre à porter : ni
   accroche, ni sur-titre, ni image. Sur cette page, 190 px de rembourrage
   au-dessus d'une seule ligne creusaient un vide que rien ne justifiait. */
.cpp-pagehero:not(.has-bg) {
  padding-top: var(--ef-6);
  padding-bottom: var(--ef-3);
}

/* --------------------------------------------------------------------------
   Formulaire sur fond clair — suite

   Trois règles de texte étaient restées calées sur le fond sombre : elles
   posaient de l'ivoire translucide sur du beige, soit un rapport de 1,04:1.
   La case de consentement était invisible — on ne voyait que le soulignement
   du lien vers la politique de confidentialité, ce trait gris qui traversait
   la page. Un champ obligatoire illisible bloque l'envoi sans que personne
   comprenne pourquoi.
   -------------------------------------------------------------------- */

.cpp-page-sections > .cpp-sec--night:first-child .cpp-consent {
  color: var(--ink-soft);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-consent a {
  color: var(--copper);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-check {
  color: var(--ink);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form .cpp-aide {
  /* 5,33:1 : lisible, sans concurrencer le libellé du champ. */
  color: #6b6459;
}

/* --------------------------------------------------------------------------
   Rythme du formulaire

   Les champs étaient dimensionnés pour un bloc court en fin de page longue.
   Sur une page qui n'existe que pour eux, ils sont l'objet principal et
   doivent en avoir l'ampleur.
   -------------------------------------------------------------------- */

.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="text"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="email"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="tel"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="number"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input[type="month"],
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form select {
  /* 44 px → 54 px. La cible tactile recommandée est de 44 px minimum : on
     était au seuil, on passe au-dessus. */
  padding: var(--e-6) var(--e-6);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form textarea {
  padding: var(--e-6) var(--e-6);
  min-height: 150px;
}

/* Au focus, un filet cuivre épais en pied de champ. La bordure seule changeait
   de teinte sans changer de poids : sur douze champs alignés, on perdait
   lequel était actif. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form input:focus,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form select:focus,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form textarea:focus {
  border-color: var(--copper);
  box-shadow: inset 0 -2px 0 0 var(--copper);
}

/* Libellés : 12 px à 0,14 em d'interlettrage se lisaient comme une légende.
   Ils annoncent un champ à remplir, ils doivent en avoir l'autorité. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-field > label,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-legend {
  font-size: var(--fs-3);
  letter-spacing: var(--ls-2);
  margin-bottom: var(--e-4);
}

/* Consentement : détaché du bloc de champs par un filet, et non collé au
   dernier d'entre eux. Ce n'est pas une question de plus, c'est un
   engagement — le lire comme tel suppose de le voir comme tel. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-consent {
  margin-top: var(--ef-2);
  padding-top: var(--ef-2);
  border-top: 1px solid var(--cpp-rule);
  max-width: 62ch;
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-consent input {
  width: 18px;
  height: 18px;
  margin-top: var(--e-1);
  accent-color: var(--copper);
}

/* Bouton d'envoi : c'est la seule action de la page. Un contour discret
   convient à un lien secondaire, pas à l'unique aboutissement du parcours. */
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form .btn[type="submit"] {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--paper);
  padding: var(--e-7) var(--e-10);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form .btn[type="submit"]::before {
  background: var(--ink);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-form .btn[type="submit"]:hover {
  color: var(--paper);
  border-color: var(--ink);
}

@media (max-width: 640px) {
  /* Pleine largeur sur mobile : le pouce vise la bande, pas un rectangle
     centré de 200 px. */
  .cpp-page-sections > .cpp-sec--night:first-child .cpp-form .btn[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Colonne de gauche

   Le bloc de contact fait un tiers de la hauteur du formulaire : passé le
   quatrième champ, il ne reste qu'une grande surface beige vide à gauche, et
   le numéro de téléphone — la porte de sortie pour qui bloque sur un champ —
   a disparu de l'écran.

   Il suit donc le défilement. Le motif est celui de l'Opéra de Paris sur ses
   pages de réservation.
   -------------------------------------------------------------------- */

@media (min-width: 981px) {
  .cpp-page-sections > .cpp-sec--night:first-child .cpp-devis-aside {
    position: sticky;
    /* Sous l'en-tête fixe, avec de l'air. */
    top: clamp(100px, 14vh, 140px);
  }
}

/* --------------------------------------------------------------------------
   Intertitres de groupe dans le formulaire

   Ils traversent la grille de deux colonnes sans la rompre : grid-column
   1 / -1 les étale sur toute la largeur, les champs suivants reprennent leur
   place normale.

   Traités comme les sur-titres du site — petites capitales cuivre, filet court
   au-dessus — plutôt que comme des titres de niveau : ce sont des repères de
   lecture dans un formulaire, pas des sections du document. Les monter en H3
   insérerait quatre niveaux intermédiaires entre le H2 de la section et rien,
   ce qui abîmerait la hiérarchie plutôt que de la servir.
   -------------------------------------------------------------------- */

.cpp-groupe {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-4);
  color: var(--copper-lt);
}
/* Pas de filet ni de marge sur le premier : il ouvre le formulaire, il n'a
   rien à séparer de ce qui précède. */
.cpp-groupe + .cpp-field {
  margin-top: var(--e-1);
}
.cpp-field + .cpp-groupe,
.cpp-grid2 > .cpp-groupe:not(:first-child) {
  margin-top: var(--ef-2);
  padding-top: var(--ef-1);
  border-top: 1px solid rgba(183, 154, 114, 0.24);
}

.cpp-page-sections > .cpp-sec--night:first-child .cpp-groupe {
  color: var(--copper);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-field + .cpp-groupe {
  border-top-color: var(--cpp-rule);
}

/* La première section suit un bandeau qui a déjà son propre rembourrage bas :
   cumulés, les deux creusaient près de 250 px entre le titre de page et le
   premier mot du formulaire. */
.cpp-page-sections > .cpp-sec:first-child {
  padding-top: var(--ef-5);
}

/* --------------------------------------------------------------------------
   Messages de retour du formulaire, sur fond clair

   Dernier angle mort de la variante claire, et le plus tenace : ces blocs
   n'existent qu'APRÈS un envoi. On ne les voit pas en relisant la page, on ne
   les voit pas en inspectant le code — seulement en remplissant le formulaire
   jusqu'au bout. Trois passes ont été nécessaires pour les débusquer.

   Le pire est le message d'erreur : il ne s'affiche qu'en cas d'échec, et il
   était en rose pâle sur beige, à 1,3:1. Quelqu'un dont l'envoi échoue voyait
   un cadre vide, sans savoir ce qu'il fallait corriger.

   Un audit du fichier a confirmé qu'il ne reste, dans la portée du
   formulaire, aucune autre déclaration de couleur pensée pour le fond sombre.
   -------------------------------------------------------------------- */

.cpp-page-sections > .cpp-sec--night:first-child .cpp-notice--ok {
  /* Le sable du thème, plein plutôt que translucide : posé sur le beige de la
     section, un fond à 12 % d'opacité ne se distinguait presque pas et le
     cadre paraissait flotter sans raison. */
  background: #f0e9da;
  color: var(--ink-soft);
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-notice strong {
  /* Un cran plus sombre que le cuivre de la charte. Sur le sable du cadre,
     --copper tombe à 4,26:1 — et ce titre fait 14 px en gras, sous le seuil
     du « grand texte » qui tolérerait 3:1. #6d5439 rend 5,83:1 sans quitter
     la gamme. */
  color: #6d5439;
}

.cpp-page-sections > .cpp-sec--night:first-child .cpp-notice--ko {
  background: #fbf0ed;
  border-color: #b5533a;
  /* 6,1:1 sur ce fond. Un message d'erreur est le texte qu'il faut lire le
     plus vite, et le seul qu'on lise sous tension. */
  color: #8a3520;
}
.cpp-page-sections > .cpp-sec--night:first-child .cpp-notice--ko strong,
.cpp-page-sections > .cpp-sec--night:first-child .cpp-errors {
  color: #8a3520;
}

/* --------------------------------------------------------------------------
   Écartement des champs dans la grille

   Deux espacements se cumulaient sans le savoir.

   .cpp-field porte margin-bottom: var(--e-9), soit 34 px. Cette règle datait
   d'un temps où les champs s'empilaient les uns sous les autres : la marge y
   était le seul écart possible. Placés dans .cpp-grid2, ils héritent en plus
   du row-gap de la grille, 22 px. Les deux s'additionnent — 56 px entre le bas
   d'un champ et le libellé suivant, là où 26 suffisent.

   Le décompte se voit surtout avant un intertitre de groupe : 34 px de marge,
   plus 34 de margin-top et 28 de padding-top, font 96 px de blanc au milieu du
   formulaire.

   Dans une grille, l'écart appartient à la grille. On neutralise la marge des
   champs qui s'y trouvent, et le gap devient la seule mesure — une seule
   valeur à régler, plus d'addition cachée. La règle reste portée par
   .cpp-grid2 > .cpp-field : les formulaires qui empilent leurs champs hors
   grille gardent leur marge.
   -------------------------------------------------------------------- */

.cpp-grid2 {
  /* 26 px : les libellés en capitales de 12,5 px ont besoin d'un peu plus
     d'air que du texte courant pour ne pas se coller au champ du dessus. */
  row-gap: var(--e-8);
}
.cpp-grid2 > .cpp-field {
  margin-bottom: 0;
}

/* L'aide sous un champ appartient à ce champ, pas à la rangée : collée à lui,
   elle ne doit pas repousser la rangée suivante. */
.cpp-grid2 > .cpp-field .cpp-aide {
  margin-bottom: 0;
}

/* Séparation des groupes, resserrée dans la même proportion. Elle doit rester
   nettement supérieure à l'écart entre deux champs — c'est ce qui fait lire
   trois groupes plutôt qu'une liste — sans creuser un vide. */
.cpp-field + .cpp-groupe,
.cpp-grid2 > .cpp-groupe:not(:first-child) {
  margin-top: var(--ef-1);
  padding-top: var(--ef-1);
}

/* --------------------------------------------------------------------------
   Mention du profil, à droite du logo

   Quatre sous-sites partagent le même logo, la même charte et une navigation
   voisine. Rien, dans l'en-tête, ne disait lequel on consultait — et une
   enseignante arrivée par un lien Groupes remplirait un formulaire qui n'est
   pas le sien.

   La mention est traitée en repère et non en titre : petites capitales, corps
   réduit, cuivre clair. Elle doit se lire au premier coup d'œil sans jamais
   concurrencer le logo, qui reste la marque.

   Un filet vertical les sépare plutôt qu'un tiret ou une puce : il tient sur
   la hauteur du logo, ne dépend d'aucune police, et ne se lit pas comme un
   caractère.
   -------------------------------------------------------------------- */

.nav .brandlink {
  gap: var(--e-5);
}
.cpp-profil-tag {
  display: inline-block;
  padding-left: var(--e-5);
  /* Le filet est porté par une bordure, pas par un pseudo-élément : une
     bordure suit la hauteur de ligne toute seule, quel que soit le corps. */
  border-left: 1px solid rgba(183, 154, 114, 0.42);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--ls-5);
  line-height: var(--lh-1);
  text-transform: uppercase;
  color: var(--copper-lt);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav .brandlink:hover .cpp-profil-tag {
  color: var(--paper);
}

/* En-tête compacté au défilement : le logo passe de 34 à 30 px, la mention
   suit dans la même proportion pour que le couple garde son équilibre. */
.nav.solid .cpp-profil-tag {
  font-size: var(--fs-1);
  letter-spacing: var(--ls-4);
}

@media (max-width: 900px) {
  /* Sous 900 px, le menu se replie sur un bouton et l'espace se resserre.
     La mention reste — c'est justement là qu'on ne sait plus où l'on est —
     mais rend le peu de place qu'elle peut. */
  .nav .brandlink {
    gap: var(--e-4);
  }
  .cpp-profil-tag {
    padding-left: var(--e-4);
    font-size: var(--fs-1);
    letter-spacing: var(--ls-3);
  }
}

@media (max-width: 420px) {
  /* Sur les plus petits écrans, logo et mention se disputent la largeur avec
     le bouton de réservation. La mention passe sous le logo plutôt que de
     comprimer les deux. */
  .nav .brandlink {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-1);
  }
  .cpp-profil-tag {
    padding-left: 0;
    border-left: 0;
    font-size: var(--fs-1);
  }
}

/* ==========================================================================
   BROCHURE À TÉLÉCHARGER
   ========================================================================== */

/* Deux colonnes, l'aperçu à droite. La couverture n'est pas un ornement : un
   PDF qu'on a vu se télécharge davantage qu'un lien qui l'annonce. */
.cpp-brochure-bloc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: var(--efh-4);
  align-items: center;
}
.cpp-brochure-texte .cpp-lead {
  max-width: 50ch;
}
.cpp-brochure-btn {
  margin-top: var(--ef-2);
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-5);
}
/* Le poids, en second rang dans le bouton. Sur le réseau d'une école, un PDF
   de quinze mégaoctets ne s'ouvre pas — autant l'annoncer avant le clic. */
.cpp-brochure-poids {
  font-size: var(--fs-2);
  font-weight: 400;
  letter-spacing: var(--ls-2);
  opacity: 0.72;
}

.cpp-brochure-apercu {
  display: block;
  /* Posée de biais, elle se lit comme un objet et non comme une capture. Le
     redressement au survol donne le sentiment de la prendre en main. */
  transform: rotate(-2.2deg);
  transition: transform 0.4s var(--ease);
}
.cpp-brochure-apercu img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 24px 50px -28px rgba(20, 18, 16, 0.55);
}
.cpp-brochure-bloc:hover .cpp-brochure-apercu {
  transform: rotate(0deg) translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .cpp-brochure-apercu,
  .cpp-brochure-bloc:hover .cpp-brochure-apercu {
    transform: none;
    transition: none;
  }
}

@media (max-width: 860px) {
  .cpp-brochure-bloc {
    grid-template-columns: 1fr;
    gap: var(--e-9);
  }
  /* L'aperçu passe sous le texte, et se limite en largeur : plein cadre, une
     couverture de brochure occupe un écran entier pour rien. */
  .cpp-brochure-apercu {
    max-width: 260px;
  }
}

/* ==========================================================================
   ENGAGEMENTS
   ========================================================================== */

/* Quatre cartes sur fond ivoire, sans bordure ni ombre : ce sont des
   arguments à lire, pas des objets à cliquer. Un cadre laisserait croire
   qu'on peut les ouvrir. */
.cpp-eng-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-1);
  margin-top: var(--e-12);
  background: var(--cpp-rule);
  border: 1px solid var(--cpp-rule);
}
.cpp-eng-carte {
  padding: var(--ef-2);
  background: var(--paper);
}
.cpp-eng-carte h3 {
  margin: 0 0 var(--e-4);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-2);
}
.cpp-eng-carte h3::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: var(--e-5);
  background: var(--copper);
}
.cpp-eng-carte p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
}

/* ==========================================================================
   GALERIE — LÉGENDES
   ========================================================================== */

.cpp-sco-photo {
  position: relative;
}
/* Posée sur la photo, en bas à gauche, sur un dégradé plutôt qu'un bandeau
   plein : un rectangle opaque masquerait une partie de l'image, alors que
   c'est elle qu'on est venu voir. */
.cpp-sco-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--e-9) var(--e-6) var(--e-5);
  background: linear-gradient(to top, rgba(13, 12, 11, 0.82), transparent);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--ls-4);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  pointer-events: none;
}
.cpp-sco-photo.est-principale figcaption {
  padding: var(--e-10) var(--e-7) var(--e-6);
  font-size: var(--fs-2);
}

/* ==========================================================================
   LE CHAPITEAU
   ========================================================================== */

.cpp-sec--plein {
  /* Aucun rembourrage horizontal : la photo touche les deux bords. Un
     panoramique de salle contenu dans une colonne perd ce qu'il montre —
     l'ampleur. */
  padding: 0;
}

.cpp-chap-vue {
  position: relative;
  line-height: 0;
}
.cpp-chap-vue img {
  width: 100%;
  height: clamp(320px, 46vh, 560px);
  object-fit: cover;
  /* Le point de mire est légèrement haut : la piste et la scène comptent plus
     que les premiers rangs. */
  object-position: center 42%;
}

/* Bouton de visite, centré sur la photo. */
.cpp-chap-tour {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-6) var(--e-8);
  background: rgba(13, 12, 11, 0.62);
  /* Flou d'arrière-plan : le libellé reste lisible quelle que soit la zone de
     la photo qu'il recouvre, sans avoir à l'assombrir entièrement. */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(183, 154, 114, 0.55);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--ls-4);
  text-transform: uppercase;
  line-height: var(--lh-1);
  text-align: center;
  text-decoration: none;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cpp-chap-tour:hover,
.cpp-chap-tour:focus-visible {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}
.cpp-chap-tour:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* Œil dessiné en CSS : deux arcs et un point, aucune image à charger. */
.cpp-chap-oeil {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.cpp-chap-oeil::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: calc(-1 * var(--e-1)) 0 0 calc(-1 * var(--e-1));
  border-radius: 50%;
  background: currentColor;
}

/* Bandeau bas, sur le sable de la charte. */
.cpp-chap-bas {
  background: var(--beige);
  padding: var(--ef-4) 0;
}
.cpp-chap-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--efh-4);
  align-items: center;
}
.cpp-chap-texte p {
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: var(--fs-6);
  line-height: var(--lh-5);
  margin: 0;
}

/* Les chiffres : une ligne chacun, séparés par un filet. Alignés en colonne
   plutôt qu'en cartes — on les lit l'un après l'autre, et la valeur reste
   collée à son libellé. */
.cpp-chap-faits {
  margin: 0;
  border-top: 1px solid var(--cpp-rule-strong);
}
.cpp-chap-fait {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-6);
  padding: var(--ef-1) 0;
  border-bottom: 1px solid var(--cpp-rule-strong);
}
.cpp-chap-valeur {
  font-family: var(--font-display);
  /* --fs-h4 et non --fs-stat : ce dernier n'existait que dans la table
     locale, aujourd'hui supprimée. Même borne haute, 38 px. */
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-0);
  color: var(--copper);
  /* Chiffres de même chasse : sans cela, « 5 500 » et « 100 % » ne s'alignent
     pas et la colonne tremble. */
  font-variant-numeric: tabular-nums;
}
.cpp-chap-libelle {
  margin: 0;
  max-width: 22ch;
  text-align: right;
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
  line-height: var(--lh-3);
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .cpp-chap-grille {
    grid-template-columns: 1fr;
    gap: var(--e-9);
  }
  .cpp-chap-tour {
    /* Le libellé complet déborderait d'un écran de téléphone. */
    width: calc(100% - 40px);
    max-width: 340px;
    justify-content: center;
    font-size: var(--fs-2);
    letter-spacing: var(--ls-3);
  }
}

.cpp-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: calc(-1 * var(--e-1));
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   § P16 — CSE MULTI-SAISONS 2026/27 + 2027/28
   ----------------------------------------------------------------------------
   Le profil CSE commercialise désormais deux spectacles en parallèle. Les
   deux teintes ci-dessous sont saisonnières : bleu glace pour On Ice, rouge
   profond pour Odyssée. Elles ne remplacent pas la palette de marque ; elles
   servent uniquement à distinguer les deux campagnes.
   ============================================================================ */
:root {
  --cpp-ice: #245f9e;
  --cpp-ice-deep: #071c36;
  --cpp-ice-soft: #eaf3fb;
  --cpp-odyssee: #8f2922;
  --cpp-odyssee-soft: #f7ece8;
}

.cpp-cse-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 35%, rgba(36, 95, 158, 0.42), transparent 32%),
    linear-gradient(120deg, var(--night) 0%, var(--cpp-ice-deep) 100%);
  color: var(--paper);
  padding: clamp(112px, 14vh, 170px) var(--ef-3) clamp(72px, 10vh, 118px);
}
.cpp-cse-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 64%, rgba(255,255,255,0.7) 0 1px, transparent 1.5px);
  background-size: 46px 46px, 72px 72px;
}
.cpp-cse-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.62fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
}
.cpp-cse-hero-copy {
  max-width: 850px;
}
.cpp-cse-hero .eyebrow {
  color: #bfdcff;
}
.cpp-cse-hero .eyebrow::after {
  background: #bfdcff;
}
.cpp-cse-hero h1 {
  margin: var(--e-5) 0 var(--e-7);
  max-width: 12ch;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-0);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
}
.cpp-cse-hero-lead {
  max-width: 54ch;
  margin: 0 0 var(--e-7);
  color: rgba(252, 251, 249, 0.82);
  font-family: var(--font-accent);
  font-size: var(--fs-7);
  line-height: var(--lh-3);
  font-style: italic;
}
.cpp-cse-hero-poster {
  justify-self: end;
  width: min(100%, 430px);
  transform: rotate(1.2deg);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 28px 70px rgba(0,0,0,0.38);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cpp-cse-hero-poster:hover,
.cpp-cse-hero-poster:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 34px 80px rgba(0,0,0,0.5);
}
.cpp-cse-hero-poster img {
  display: block;
  width: 100%;
  height: auto;
}
.cpp-cse-hero-secondary {
  margin: var(--e-8) 0 0;
  padding-top: var(--e-6);
  border-top: 1px solid rgba(255,255,255,0.16);
  color: rgba(252,251,249,0.7);
  font-size: var(--fs-4);
}
.cpp-cse-hero-secondary strong {
  color: #ffc3b9;
  text-transform: uppercase;
  letter-spacing: var(--ls-3);
  font-size: var(--fs-2);
}
.cpp-cse-hero-secondary a {
  color: var(--paper);
  text-decoration-color: rgba(255,255,255,0.35);
  text-underline-offset: 4px;
}

.cpp-cse-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 var(--e-5);
  padding: 7px 12px;
  border: 1px solid currentColor;
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-4);
  text-transform: uppercase;
}
.cpp-cse-status--open { color: #b9dcff; }
.cpp-cse-status--last { color: #b4372d; }
.cpp-cse-status--coming { color: var(--copper); }
.cpp-cse-status--complete { color: var(--ink-soft); }
.cpp-cse-hero .cpp-cse-status--last,
.cpp-sec--night .cpp-cse-status--last { color: #ffb3a8; }

.cpp-cse-saisons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 54px);
}
.cpp-cse-saison-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
  min-height: 100%;
  background: var(--paper);
  border: 1px solid var(--cpp-rule-strong);
  box-shadow: 0 14px 42px rgba(13,12,11,0.06);
}
.cpp-cse-saison-card.est-principale {
  border-color: rgba(36, 95, 158, 0.34);
  box-shadow: 0 18px 52px rgba(36, 95, 158, 0.12);
}
.cpp-cse-saison-image {
  display: block;
  min-height: 100%;
  overflow: hidden;
  background: var(--night);
}
.cpp-cse-saison-image img {
  width: 100%;
  height: 100%;
  min-height: 470px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s var(--ease);
}
.cpp-cse-saison-image:hover img,
.cpp-cse-saison-image:focus-visible img {
  transform: scale(1.025);
}
.cpp-cse-saison-body {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 52px);
}
.cpp-cse-saison-body h3 {
  margin: 0 0 var(--e-5);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-1);
  text-transform: uppercase;
}
.cpp-cse-saison-body > p:not(.eyebrow):not(.cpp-cse-status) {
  color: var(--ink-soft);
  line-height: var(--lh-4);
}
.cpp-cse-mini-facts {
  margin: auto 0 var(--e-7);
  padding-top: var(--e-7);
}
.cpp-cse-mini-facts > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.65fr) minmax(0, 1.35fr);
  gap: var(--e-5);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--cpp-rule);
}
.cpp-cse-mini-facts > div:last-child {
  border-bottom: 1px solid var(--cpp-rule);
}
.cpp-cse-mini-facts dt {
  color: var(--ink-soft);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
}
.cpp-cse-mini-facts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}
.cpp-cse-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-6);
}

.cpp-cse-show .cpp-cse-editor-content {
  max-width: 62ch;
  margin-bottom: var(--e-8);
  color: rgba(252,251,249,0.76);
  font-size: var(--fs-6);
  line-height: var(--lh-5);
}
.cpp-cse-show .cpp-cse-editor-content p {
  margin-top: 0;
  margin-bottom: var(--e-5);
}
.cpp-cse-show-poster img {
  box-shadow: 0 26px 70px rgba(0,0,0,0.36);
}
.cpp-cse-show-actions {
  margin-top: var(--e-8);
}

.cpp-cse-current {
  background:
    linear-gradient(90deg, var(--cpp-odyssee-soft), var(--paper));
}
.cpp-cse-current-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: center;
}
.cpp-cse-current-grid > img {
  display: block;
  width: min(100%, 330px);
  max-height: 570px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 18px 50px rgba(103, 28, 23, 0.16);
}
.cpp-cse-current .cpp-cse-status--last {
  color: var(--cpp-odyssee);
}

.single-cpp_spectacle .cpp-single-show-hero {
  background: var(--night);
  color: var(--paper);
  padding: clamp(120px, 15vh, 180px) var(--ef-3) var(--ef-6);
}
.cpp-single-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.55fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.cpp-single-show-grid h1 {
  margin: 0 0 var(--e-6);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-0);
  text-transform: uppercase;
}
.cpp-single-show-grid > img {
  width: 100%;
  height: auto;
  box-shadow: 0 28px 70px rgba(0,0,0,0.4);
}
.cpp-single-show-content {
  padding: var(--ef-6) var(--ef-3);
}
.cpp-single-show-content .entry-content {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: var(--fs-6);
  line-height: var(--lh-5);
}
.cpp-single-show-cta {
  margin-top: var(--e-10);
  padding-top: var(--e-8);
  border-top: 1px solid var(--cpp-rule-strong);
}

.cpp-field--full {
  grid-column: 1 / -1;
}
.cpp-affiche-canvas {
  aspect-ratio: auto;
}
.cpp-affiche-form .cpp-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-5);
  color: var(--paper);
  background: rgba(252, 251, 249, 0.05);
  border: 1px solid rgba(183, 154, 114, 0.32);
  border-radius: 0;
  padding: var(--e-5);
}
.cpp-affiche-form .cpp-field select option {
  color: var(--ink);
  background: var(--paper);
}

@media (max-width: 1050px) {
  .cpp-cse-saisons {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .cpp-cse-hero {
    padding-top: 110px;
  }
  .cpp-cse-hero-grid,
  .cpp-single-show-grid {
    grid-template-columns: 1fr;
  }
  .cpp-cse-hero-poster {
    justify-self: start;
    width: min(82vw, 380px);
  }
  .cpp-cse-hero h1,
  .cpp-single-show-grid h1 {
    font-size: clamp(48px, 12vw, 76px);
  }
  .cpp-cse-current-grid {
    grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1.55fr);
    gap: var(--e-8);
  }
}

@media (max-width: 680px) {
  .cpp-cse-saison-card,
  .cpp-cse-current-grid {
    grid-template-columns: 1fr;
  }
  .cpp-cse-saison-image img {
    min-height: 0;
    max-height: 560px;
    object-fit: contain;
  }
  .cpp-cse-current-grid > img {
    width: min(76vw, 300px);
  }
  .cpp-cse-card-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .cpp-cse-card-actions .btn {
    justify-content: center;
  }
  .cpp-grid2 .cpp-field--full {
    grid-column: 1;
  }
}