/* =====================================================================
   XPA — home.css
   Home EXPERIMENTA 2027 (autonome).
   Ne dépend PAS de l'ancienne home : tout le nécessaire est défini ici.
   Seul base.css (reset + variables + header/nav/lang/footer communs) est
   importé.

   Structure :
     - Niveau 1 (permanent, fixed) : logo + burger + dates + présentation.
     - Niveau 2 (Performa)   : bloc cliquable → fond 0/100 + panneaux.
     - Niveau 3 (Exposition) : bloc cliquable → fond 100/0 + panneaux.
     - Cellules spectacles   : petite liste accolée au bloc au survol des panneaux.
   ===================================================================== */

@import url('base.css');

/* ── VARIABLES ──────────────────────────────────────────────────────── */
:root {
  /* Gabarit des panneaux */
  --xpa-rows: 4;
  --xpa-grid-gap: 16px;
  --xpa-stage-top: 68px;
  --xpa-stage-width: 100%;
  --xpa-row-height: calc((100vh - var(--xpa-stage-top) - (var(--xpa-rows) - 1) * var(--xpa-grid-gap)) / var(--xpa-rows));
  --xpa-row-height: calc((100dvh - var(--xpa-stage-top) - (var(--xpa-rows) - 1) * var(--xpa-grid-gap)) / var(--xpa-rows));
  --xpa-row-height: calc((var(--app-height, 100dvh) - var(--xpa-stage-top) - (var(--xpa-rows) - 1) * var(--xpa-grid-gap)) / var(--xpa-rows));
  --fontBrownM: "Brown-M", Helvetica, Arial, sans-serif;
}

.xpa-home-b {
  /* Le stage des panneaux couvre toute la hauteur en variante B */
  --xpa-stage-top: 0px;
  /* Couleur de référence des panneaux permanents (bloc + enfants) */
  --xpa-b-base-bg: var(--xpa-beige);

  /* ── ZONE DE SÉCURITÉ ────────────────────────────────────────────────
     Marge réservée autour des panneaux : ils ne passent jamais sous les
     blocs fixes (logo + dates en haut-gauche, présentation en bas-droite,
     déclencheurs Performa / Exposition au milieu des côtés).
     Il suffit d'ajuster ces valeurs pour élargir ou réduire la zone. */
  --xpa-safe-top: 96px;
  --xpa-safe-right: 200px;
  --xpa-safe-bottom: 130px;
  --xpa-safe-left: 200px;
}



/* ── PLEIN ÉCRAN SANS SCROLL ────────────────────────────────────────── */
html,
body {
  height: 100%;
  height: var(--app-height, 100%);
  /* Réserve la bande sous le shell pour le débord du fond photo (iOS :
     zone derrière la barre flottante). Sans cela, body rognerait le débord. */
  min-height: calc(100% + var(--xpa-bg-bleed, 140px));
  overflow: hidden;
  font-family: var(--fontBrownM);
}

.xpa-home {
  position: relative;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  margin: 0;
  padding: 0;
  /* Le fond photo doit pouvoir déborder sous le shell ; le rognage des
     panneaux est assuré par les .xpa-stage (overflow:hidden). */
  overflow: visible;
}

/* ---------------------------------------------------------------------
   iOS 26 : 100dvh et window.innerHeight sous-estiment la hauteur réelle
   (cf. WebKit #255708) → le fond plein écran n'atteint plus le bas de
   l'écran. On repasse les couches plein-hauteur sur le GRAND viewport
   (100lvh) quand il est supporté. Les anciens iOS (sans lvh) conservent
   --app-height, qui y était correct.
   --------------------------------------------------------------------- */
@supports (height: 100lvh) {
  html,
  body {
    height: 100lvh;
  }

  .xpa-home {
    height: 100lvh;
  }

  :root {
    --xpa-row-height: calc((100lvh - var(--xpa-stage-top) - (var(--xpa-rows) - 1) * var(--xpa-grid-gap)) / var(--xpa-rows));
  }
}

/* ---------------------------------------------------------------------
   BASCULE DE LANGUE
   --------------------------------------------------------------------- */
.xpa-lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  background: var(--xpa-beige);
}

input, textarea, button {
  border: none;
}

.xpa-lang-switch button {
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  text-transform: uppercase;
  color: var(--xpa-gray);
}
.xpa-lang-switch button[aria-pressed="true"] {
  color: #000;
  text-decoration: underline;
}
.xpa-lang-sep {
  color: var(--xpa-gray);
}


/* ── FOND 50 / 50 ───────────────────────────────────────────────────── */
/* Le fond déborde sous le shell pour recouvrir la zone située derrière la
   barre flottante iOS (cas 1 : la couleur de html/body y apparaît sinon).
   --xpa-bg-bleed est ajustable ; .xpa-home laisse déborder (overflow visible)
   et html/body réservent la hauteur correspondante (min-height). */
.xpa-b-bg {
  position: absolute;
  inset: 0;
  bottom: calc(-1 * var(--xpa-bg-bleed, 140px));
  z-index: 0;
  display: flex;
}

.xpa-b-bg-pane {
  flex: 0 0 50%;
  height: 100%;
  background-color: var(--xpa-mutted-parchment);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex-basis 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Performa ouvert (0/100) : l'image de gauche disparaît, celle de droite passe plein écran */
.xpa-home-b.is-performa .xpa-b-bg-pane--left { flex-basis: 0%; }
.xpa-home-b.is-performa .xpa-b-bg-pane--right { flex-basis: 100%; }

/* Exposition ouverte (100/0) : inverse du niveau Performa */
.xpa-home-b.is-exposition .xpa-b-bg-pane--left { flex-basis: 100%; }
.xpa-home-b.is-exposition .xpa-b-bg-pane--right { flex-basis: 0%; }

/* ── NIVEAU 1 : PERMANENT (bas-droite) ──────────────────────────────── */
.xpa-b-fixed--bottomright {
  left: 0;
  bottom: 0;
  padding: 15px 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 70%;
}

.xpa-b-fixed--bottomleft {
  right: 0;
  bottom: 0;
  padding: 15px 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  max-width: 70%;
}

.xpa-b-spectacle {
  border: none;
  padding: 10px 25px;
  cursor: pointer;
}

.xpa-expe-logo-img {
display: block;
    height: 40px;
    width: auto;
}

.xpa-b-spectacle-dates, .xpa-b-journee-dates {
font-size: 0.85rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.xpa-b-info--spectacle {
  font-size: 1.2rem;
  background-color: var(--xpa-beige);
}

.xpa-b-info--journee-pro {
  font-size: 1.2rem;
  background-color: var(--xpa-beige);
}

/* texte présentation (bas-droite) */
.xpa-b-info--presentation {
  align-items: flex-start;
  gap: 0px !important;
  padding: 10px 12px;
  background: none !important;
  flex-direction: row-reverse;
}

.xpa-b-presentation-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  background: var(--xpa-beige);
  padding: 4px 8px;
  max-height: 130px;
  width: auto;
  columns: 2;
  column-gap: 20px;
  overflow: auto;
}

/* Déclencheurs « Performa » / « Exposition » : styles partagés, déplacés
   dans base.css (toutes les pages XPA les utilisent — home + header). */

/* ── PANNEAUX PERMANENTS (visibles hors niveaux) ────────────────────── */
.xpa-b-base-panels {
  position: absolute;
  inset: 0;
  z-index: 15;
  /* Au survol d'un panneau permanent, on veut pouvoir interagir : on laisse
     les clics passer à travers la scène sauf sur les panneaux eux-mêmes. */
  pointer-events: none;
}
.xpa-b-base-panels .xpa-panel { pointer-events: auto; }

/* Masqués dès qu'un niveau (Performa / Exposition) est ouvert */
.xpa-home-b.is-performa .xpa-b-base-panels,
.xpa-home-b.is-exposition .xpa-b-base-panels {
  visibility: hidden;
  opacity: 0;
}

/* Quand un niveau est ouvert, on efface le bas de page SAUF la bascule de langue
   (mobile uniquement) */
@media (max-width: 768px) {
  .xpa-home-b.is-performa .xpa-b-fixed--bottomleft,
  .xpa-home-b.is-exposition .xpa-b-fixed--bottomleft,
  .xpa-home-b.is-performa .xpa-b-presentation-text,
  .xpa-home-b.is-exposition .xpa-b-presentation-text {
    display: none;
  }
}

.xpa-stage--base {
  z-index: 15;
}

/* ── PANNEAUX DES NIVEAUX (révélés au clic) ─────────────────────────── */
.xpa-b-panels {
  position: absolute;
  inset: 0;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.xpa-home-b.is-performa .xpa-b-panels,
.xpa-home-b.is-exposition .xpa-b-panels {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Chaque groupe de panneaux n'apparaît que pour son niveau actif */
.xpa-home-b .xpa-panel--performa,
.xpa-home-b .xpa-panel--exposition { display: none; }

.xpa-home-b.is-performa .xpa-panel--performa { display: flex; }
.xpa-home-b.is-exposition .xpa-panel--exposition { display: flex; }

/* ── SCÈNE (fit-to-screen, jamais de scroll) ────────────────────────── */
.xpa-stage {
  position: absolute;
  top: var(--xpa-stage-top);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  overflow: hidden;
}

.xpa-stage-fit {
  position: relative;
  width: var(--xpa-stage-width);
  margin-inline: auto;
  transform-origin: top center;
  will-change: transform;
}

/* ── RÉPARTITION DES BLOCS ──────────────────────────────────────────── */
.xpa-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: var(--xpa-grid-gap);
  padding: var(--xpa-safe-top) var(--xpa-safe-right) var(--xpa-safe-bottom) var(--xpa-safe-left);
}

/* Disposition mosaïque (celle utilisée par la home B) */
.xpa-layout--mosaic {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-evenly;
  align-items: flex-start;
}

.xpa-layout--mosaic .xpa-panel {
  flex: 0 0 calc((100% - 2 * var(--xpa-grid-gap)) / 3 - 0.5px);
}
.xpa-layout--mosaic .xpa-panel--2x1,
.xpa-layout--mosaic .xpa-panel--2x2 {
  flex: 0 0 calc((100% - 2 * var(--xpa-grid-gap)) * 2 / 3 + var(--xpa-grid-gap) - 0.5px);
}

.xpa-layout--mosaic .xpa-panel--1x2,
.xpa-layout--mosaic .xpa-panel--2x2 {
  min-height: calc(1.3 * var(--xpa-row-height) + var(--xpa-grid-gap));
}

.xpa-layout--mosaic .xpa-panel:nth-child(6n + 1) { --ty: 0px;  margin: 0; }
.xpa-layout--mosaic .xpa-panel:nth-child(6n + 2) { --ty: -1vh; margin: 0; }
.xpa-layout--mosaic .xpa-panel:nth-child(6n + 3) { --ty: 1vh;  margin: 1vh 0 0; }
.xpa-layout--mosaic .xpa-panel:nth-child(6n + 4) { --ty: -1vh; margin: 0; }
.xpa-layout--mosaic .xpa-panel:nth-child(6n + 5) { --ty: 1vh;  margin: 1vh 0 0; }
.xpa-layout--mosaic .xpa-panel:nth-child(6n + 6) { --ty: -1vh; margin: 0; }

/* ── BLOCS / PANNEAUX ───────────────────────────────────────────────── */
.xpa-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(400px, 82vw);
  height: fit-content;
  --panel-title-size: clamp(1.6rem, 1.6vw, 46px);
  --panel-desc-size: 0.9rem;
  --panel-dates-size: 0.85rem;
  --panel-lieux-size: 0.7rem;
  transform: translateY(var(--ty, 0px)) rotate(var(--rot, 0deg));
  transition: box-shadow 0.35s ease, transform 0.35s ease, opacity 0.3s ease;
}

.xpa-panel--2x1,
.xpa-panel--2x2 {
  width: min(640px, 90vw);
}

.xpa-panel--1x2,
.xpa-panel--2x2 {
  min-height: calc(2 * var(--xpa-row-height) + var(--xpa-grid-gap));
}

.xpa-panel--2x1 { --panel-title-size: clamp(1.6rem, 3.2vw, 56px); }
.xpa-panel--1x2 { --panel-title-size: clamp(2.6rem, 3.2vw, 56px); }
.xpa-panel--2x2 { --panel-title-size: clamp(3.6rem, 3.2vw, 56px); }

.xpa-panel.has-link,
.xpa-panel.has-slider { cursor: pointer; }

/* Répartition organique : cycle de 6 (utilisée hors mosaïque) */
.xpa-panel:nth-child(6n + 1) { align-self: flex-start; margin-left: 2vw;   --ty: 0px; }
.xpa-panel:nth-child(6n + 2) { align-self: flex-end;   margin-right: 4vw;  --ty: 3vh; }
.xpa-panel:nth-child(6n + 3) { align-self: center;     margin-left: 0;     --ty: -3vh; }
.xpa-panel:nth-child(6n + 4) { align-self: flex-start; margin-left: 15vw;  --ty: 2vh; }
.xpa-panel:nth-child(6n + 5) { align-self: flex-end;   margin-right: 17vw; --ty: -4vh; }
.xpa-panel:nth-child(6n + 6) { align-self: center;     margin-left: 8vw;   --ty: 2vh; }

/* IMP: Ajouter une couleur du bloc → fond des champs titre + description */
.xpa-panel--none      { --panel-bg: transparent;                      --panel-typo: var(--xpa-dark, #312f2f); }
.xpa-panel--green     { --panel-bg: var(--xpa-green, #c4d74d);        --panel-typo: var(--xpa-dark, #312f2f); }
.xpa-panel--orange    { --panel-bg: var(--xpa-orange, #f5a623);       --panel-typo: var(--xpa-dark, #312f2f); }
.xpa-panel--teal      { --panel-bg: var(--xpa-green-dark, #119da4);   --panel-typo: var(--xpa-beige, #f3eff5); }
.xpa-panel--teal-dark { --panel-bg: var(--xpa-green-darker, #0c7489); --panel-typo: var(--xpa-beige, #f3eff5); }
.xpa-panel--beige     { --panel-bg: var(--xpa-beige, #f3eff5);        --panel-typo: var(--xpa-dark, #312f2f); }
.xpa-panel--dark      { --panel-bg: var(--xpa-dark, #312f2f);         --panel-typo: var(--xpa-beige, #f3eff5); }

.xpa-panel--typo-dark      { --panel-typo: var(--xpa-dark, #312f2f); }
.xpa-panel--typo-beige     { --panel-typo: var(--xpa-beige, #f3eff5); }
.xpa-panel--typo-green     { --panel-typo: var(--xpa-green, #c4d74d); }
.xpa-panel--typo-teal      { --panel-typo: var(--xpa-green-dark, #119da4); }
.xpa-panel--typo-teal-dark { --panel-typo: var(--xpa-green-darker, #0c7489); }

.xpa-panel:hover,
.xpa-panel.is-active { z-index: 25; }

.xpa-panel:focus { outline: none; }
/*
.xpa-panel.is-empty { opacity: 0.9; }
*/
/* Au survol d'un bloc, on masque les autres pour libérer la page */
.xpa-layout.has-active .xpa-panel:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}

/* ── CONTENU DU BLOC ────────────────────────────────────────────────── */
.xpa-panel-head {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 0px;
}

.xpa-panel-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.xpa-panel-dates {
  padding: 5px 8px;
  font-size: var(--panel-dates-size);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--xpa-mutted-shadow-grey, #2d232e);
  background-color: var(--xpa-green, #c4d74d) !important;
  width: fit-content;
}

.xpa-performa-panel-dates {
  background-color: var(--xpa-orange) !important;
}

.xpa-panel-title {
  font-size: var(--panel-title-size);
  font-weight: 900;
  line-height: 0.98;
  padding: 12px 16px 0px 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--panel-typo, var(--xpa-mutted-parchment));
  background-color: var(--panel-bg, var(--xpa-mutted-shadow-grey)) !important;
}

.xpa-panel-lieux {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.xpa-panel-lieux li {
  padding: 3px 10px;
  font-size: var(--panel-lieux-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xpa-mutted-shadow-grey, #2d232e);
  background-color: var(--panel-bg);
}

.xpa-panel-desc {
  flex: 1 1 auto;
  font-size: var(--panel-desc-size);
  line-height: 1.45;
  padding: 10px 16px;
  color: var(--panel-typo, var(--xpa-mutted-parchment));
  background-color: var(--panel-bg, var(--xpa-mutted-shadow-grey)) !important;
}

/* ── CELLULES SPECTACLES DANS LE BLOC (petite liste à côté) ─────────── */
.xpa-panel-cells {
  position: absolute;
  top: 50%;
  margin-top: 50px;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: fit-content;
  max-height: 80vh;
  overflow: hidden;
  pointer-events: none;
}

.xpa-panel-cells.is-right { 
  left: calc(100% + 0px); 
}

.xpa-panel-cells.is-left  { 
  right: calc(100% + 0px); 
  align-items: flex-end;
}

/* Repli au-dessus du bloc : la liste passe en rangée */
.xpa-panel-cells.is-top {
  top: auto;
  bottom: calc(100% + 0px);
  left: 0;
  transform: none;
  flex-direction: row;
  flex-wrap: wrap;
  width: auto;
  max-width: min(560px, 80vw);
  max-height: none;
}

/* Largeur des cartons en repli au-dessus du bloc (rangée) */
.xpa-panel-cells.is-top .xpa-shot { width: min(240px, 34vw); }

/* IMP: CARTONS SPECTACLES DANS LA LISTE */
/* La photo est un <div> avec background-image + cover. Largeur stable (48px),
   hauteur = 100% de la hauteur du carton (le carton est en align-items:stretch
   et sa hauteur est donnée par son texte). Le background remplit la zone. */
.xpa-panel-cells .xpa-shot {
  align-items: stretch;
}
.xpa-panel-cells .xpa-shot-photo {
  width: 48px;
  height: auto;
  align-self: stretch;
}
.xpa-panel-cells .xpa-shot-body { padding: 8px 10px; }

/* Couleur des cartons = couleur du bloc parent (plus de thème aléatoire) */
.xpa-panel-cells--performa .xpa-shot {
  background: var(--xpa-b-performa-bg);
  color: var(--xpa-dark);
}
.xpa-panel-cells--exposition .xpa-shot {
  background: var(--xpa-b-exposition-bg);
  color: var(--xpa-dark);
}

.xpa-panel-cells--base .xpa-shot {
  background: var(--xpa-b-base-bg);
  color: var(--xpa-dark);
}

/* ── CARTONS SPECTACLES (contenu de la petite liste) ────────────────── */
.xpa-shot {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  overflow: hidden;
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.38s ease, transform 0.38s ease;
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); */
  font-size: 1rem;
}
.xpa-shot.is-visible {
  opacity: 1;
  transform: none;
}

.xpa-shot-photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  background-color: rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: center;
}
.xpa-shot-photo--empty { background-image: none; }

.xpa-shot-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px;
  overflow: hidden;
}

/* Ligne d'en-tête de la cellule : tags À GAUCHE, date À DROITE, sur UNE SEULE
   ligne. Pas de retour à la ligne : l'en-tête pousse la largeur du carton.
   Les tags ne rétrécissent pas (pas de troncature). */
.xpa-shot-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px 8px;
  white-space: nowrap;
}
.xpa-shot-head .xpa-shot-tags {
  flex: 0 0 auto;
}
.xpa-shot-head .xpa-shot-date {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* La date est dans le flux (plus d'absolute) : elle ne peut plus chevaucher
   le titre, même si elle passe sur plusieurs lignes. */
.xpa-shot-date {
  font-size: 0.8em;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  white-space: normal;
  overflow-wrap: break-word;
}

.xpa-shot-title {
  flex: 0 0 auto;
  font-size: 1.15em;
  line-height: 1.12;
  text-transform: uppercase;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 270px;
}

.xpa-shot-lieux {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
}

.xpa-shot-lieu {
  font-size: 0.85em;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow-wrap: break-word;
}

.xpa-shot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 100%;
}

.xpa-shot-tag {
  font-size: 0.68em;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border: 1px solid currentColor;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MESSAGE VIDE  */
.xpa-home-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.xpa-footer {
  display: none;
}

.xpa-b-arrow { display: none; }

/* ---------------------------------------------------------------------
   Apparence des boutons de switch (home uniquement)
   Le tronc commun est dans base.css ; ces règles ne s'appliquent qu'à la
   home (jamais aux pages internes qui utilisent .xpa-side-button).
   --------------------------------------------------------------------- */
.xpa-b-info--performa {
  align-items: flex-end;
  gap: 0px;
  padding: 0px;
  background: transparent;
}
.xpa-b-info--exposition {
  align-items: flex-start;
  gap: 0px;
  padding: 0px;
  background: transparent;
}

.xpa-b-performa-button-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  background: var(--xpa-b-performa-bg);
  padding: 10px 14px;
}
.xpa-b-exposition-button-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--xpa-b-exposition-bg);
  padding: 10px 14px;
}

.xpa-b-performa-pricing {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--xpa-b-performa-bg);
}
.xpa-b-exposition-pricing {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--xpa-b-exposition-bg);
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
  :root {
    --xpa-grid-gap: 12px;
    --xpa-rows: 6;
    --xpa-stage-top: 58px;
  }

  .xpa-home-b {
    --xpa-safe-top: 95px;
    --xpa-safe-right: 54px;
    --xpa-safe-bottom: 44px;
    --xpa-safe-left: 54px;
  }

  .xpa-b-logo-img {
  height: 34px;
}

.xpa-expe-logo-img {
  height: 24px;
}

/* AJUSTEMENT BLOC PANEL */
.xpa-panel-title {
  font-size: clamp(1.2rem, 2.5vw, 1.3em);
  padding: 8px 8px 0px 8px;
}

.xpa-panel-lieux li {
  font-size: clamp(0.78rem, 1.5vw, 0.88em);
  padding: 2px 6px;
}

.xpa-panel-desc {
  font-size: clamp(0.78rem, 1.5vw, 0.88em);
  padding: 5px 8px;
}

.xpa-panel-lieux li

.xpa-panel-lieux {
  flex-direction: row;
}

  .xpa-b-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0px 8px;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .xpa-panel-head{
    padding: 6px 0px;
  }
  
  .xpa-b-bottom .xpa-b-fixed,
  .xpa-b-bottom .xpa-b-info--presentation { display: contents; }


  .xpa-lang-switch,
  .xpa-b-spectacle,
  .xpa-b-journee-pro { order: 0; }
  .xpa-b-spectacle,
  .xpa-b-journee-pro {
    padding: 4px 9px;
  }
  .xpa-b-spectacle { margin-left: auto; }
  .xpa-b-info--spectacle,
  .xpa-b-info--journee-pro {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 8px;
  }
  .xpa-b-spectacle-dates,
  .xpa-b-journee-dates { font-size: 0.6rem; }

  .xpa-b-presentation-text {
    order: -1;
    flex: 0 0 100%;
    columns: 1;
    font-size: 0.7rem;
    column-gap: 0;
    width: 100%;
    max-height: min-content;
    overflow-y: auto;
    line-height: 1.35;
  }

  .xpa-stage { top: var(--xpa-stage-top); }

  .xpa-panel,
  .xpa-panel--2x1,
  .xpa-panel--2x2 {
    width: min(92vw, 100%);
  }

  .xpa-panel:nth-child(n) {
    --rot: 0deg;
    --ty: 0px;
    align-self: center;
    margin-left: 0;
    margin-right: 0;
  }

  .xpa-layout--mosaic {
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: normal;
    justify-content: space-evenly;
    gap: var(--xpa-grid-gap);
  }
  /* Espacement régulier entre les blocs : on neutralise les décalages
     aléatoires (--ty / --rot), les marges et la base de flex de la mosaïque
     (qui, en colonne, servait de hauteur et cassait l'espacement). */
  .xpa-home-b .xpa-layout--mosaic .xpa-panel:nth-child(n) {
    flex: 0 0 auto;
    margin: 0;
    align-self: center;
    --ty: 0px;
    --rot: 0deg;
  }

  /*  BOUTONS PERFORMA / EXPOSITION : VERSION VERTICALE */
  .xpa-b-performa {
    display: flex;
    flex-direction: column;
    z-index: 40;
  }

  .xpa-b-exposition {
    display: flex;
    flex-direction: column-reverse;
    z-index: 40;
  }

  .xpa-b-performa   { top: 38%; align-items: flex-end; }
  .xpa-b-exposition { top: 47%; align-items: flex-start; }
  .xpa-b-performa .xpa-b-info--performa,
  .xpa-b-exposition .xpa-b-info--exposition {
    display: flex;
    flex-direction: row;
    writing-mode: sideways-lr;
    text-align: center;
    /* padding: 12px 7px; */
    gap: 0;
    /* Centrage (et non stretch/baseline) : en writing-mode sideways-lr, l'axe
       transverse est horizontal. Un alignement cohérent garantit que le titre,
       les dates et le pricing partagent LA MÊME ligne de texte. */
    align-items: center;
  }

  .xpa-b-performa-button-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 6px;
    gap: 10px;
  }

  .xpa-b-exposition-button-wrap {
  /* align-self: flex-end; */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 6px;
  gap: 10px;
  }

  .xpa-b-exposition-pricing {
    align-self: flex-start;
    min-width: 30px;
  }

  .xpa-b-performa-pricing,
  .xpa-b-exposition-pricing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 6px;
    min-width: 30.5px;
    font-size: 0.65rem;
  }

  /* Typo légèrement + petite sur mobile */
  .xpa-b-performa-title,
  .xpa-b-exposition-title {
    display: inline-block;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
  }
  .xpa-b-performa-dates,
  .xpa-b-exposition-dates {
    display: inline-block;
    font-size: 0.65rem;
    margin-block-start: 0;
  }

  .xpa-b-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30.5px;
    padding: 6px 6px;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
  }
  .xpa-b-arrow--performa {
    background: var(--xpa-b-performa-bg);
    color: var(--xpa-dark);
  }
  .xpa-b-arrow--exposition {
    background: var(--xpa-b-exposition-bg);
    color: var(--xpa-dark);
  }

  /* Les DEUX enfants du bouton (bloc coloré + onglet flèche) partagent
     exactement la même largeur : le conteneur se cale sur l'enfant le plus
     large et l'autre s'y étire. */
  .xpa-b-performa,
  .xpa-b-exposition {
    width: fit-content;
    align-items: stretch;
  }

  /* Bouton Exposition moins haut sur mobile : on masque les dates. */
  .xpa-b-exposition-dates,
  .xpa-b-performa-dates {
    display: none;
  }
}