/*
 * Freemusic Festival 2027 : page d'attente (site de transition).
 * Chargée uniquement sur le modèle « Freemusic 2027 : page d'attente ».
 * Tokens : design system Modernist. Aucune couleur en dur hors de ces deux blocs :root.
 */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  /* Encre assombrie le 12/10/2026 (avant : #201e1d). */
  --color-text: #141312;
  --color-divider: color-mix(in srgb, #141312 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Typographie de la page d'accueil 2026 (réglages Flatsome). Bebas Neue n'a qu'une graisse :
     au-delà de 400, le navigateur l'épaissirait artificiellement. */
  --font-heading: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --fm27-max: 1500px;
}

/*
 * ACCENT : point unique de la charte 2027.
 * La charte n'est pas arrêtée : l'accent Modernist (#ec3013) est neutralisé par l'encre.
 * Quand la couleur 2027 sera choisie, seule cette ramp change.
 */
:root {
  --color-accent: #141312;
  --color-accent-100: #eceaea;
  --color-accent-200: #d8d5d4;
  --color-accent-300: #b3afae;
  --color-accent-400: #8a8584;
  --color-accent-500: #141312;
  --color-accent-600: #383534;
  --color-accent-700: #4a4645;
  --color-accent-800: #2b2827;
  --color-accent-900: #0a0909;
}

/* — base — */

body.fm27 {
  margin: 0;
  background: var(--color-text);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fm27 *,
.fm27 *::before,
.fm27 *::after {
  box-sizing: border-box;
}

:where(.fm27) :where(h1, h2, h3, p, ul, ol, li) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

:where(.fm27) :where(ul, ol) {
  list-style: none;
}

:where(.fm27) :where(img, svg) {
  display: block;
  max-width: 100%;
}

:where(.fm27) a {
  color: var(--color-text);
  text-decoration: none;
}

:where(.fm27) a:hover {
  color: var(--color-accent-700);
}

.fm27 ::selection {
  background: var(--color-accent-200);
}

.fm27 :focus {
  outline: none;
}

.fm27 :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Sur fond sombre, le halo prend la couleur du fond clair (règle « l'inverse sur fond sombre »). */
.fm27 .fm27-dark :focus-visible,
.fm27 .fm27-hero :focus-visible,
.fm27 .fm27-nav-links .is-primary:focus-visible {
  outline-color: var(--color-bg);
}

/* Pixels de suivi injectés en fin de page par des scripts tiers : chargés, mais hors flux. */
body.fm27 > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fm27-page {
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: clip;
}

.fm27-container {
  max-width: var(--fm27-max);
  margin: 0 auto;
}

/* — 1. barre de navigation (non sticky) — */

.fm27-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}

.fm27-brand {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
}

.fm27-brand:hover {
  color: var(--color-text);
}

.fm27-brand img {
  display: block;
  width: auto;
  height: 30px;
}

.fm27-brand .fm27-brand-logo {
  height: 40px;
}

.fm27-brand span {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.fm27-nav-links {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: stretch;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.fm27-nav-links a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-left: 2px solid var(--color-text);
  border-top: 2px solid var(--color-divider);
  color: var(--color-text);
  white-space: nowrap;
}

.fm27-nav-links a:hover {
  background: var(--color-neutral-200);
  color: var(--color-text);
}

/* Billetterie : action principale. Spécificité suffisante pour battre la couleur des liens de nav. */
.fm27-nav .fm27-nav-links a.is-primary {
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 800;
}

.fm27-nav .fm27-nav-links a.is-primary:hover {
  background: var(--color-neutral-700);
  color: var(--color-bg);
}

.fm27-nav-links a:focus-visible {
  outline-offset: -4px;
}

/* — 2. hero — */

.fm27-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(88vh, 820px);
  overflow: hidden;
  background: var(--color-text);
  border-bottom: 2px solid var(--color-text);
}

/* Surhauteur de 124 % : la course du parallaxe. */
.fm27-hero-media {
  position: absolute;
  top: -12%;
  right: 0;
  left: 0;
  height: 124%;
  will-change: transform;
}

.fm27-hero-media img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.fm27-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-text) 42%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 0%, transparent) 40%,
    color-mix(in srgb, var(--color-text) 82%, transparent) 100%
  );
}

.fm27-hero-content {
  position: relative;
  padding: var(--space-8);
}

/* Titre de l'accueil sur une ligne (titre + phénix ≈ 7,5 fois la taille de police) :
   8vw sur grand écran ; en dessous de 700px, 56px tant que la ligne tient, sinon la largeur de l'écran. */
.fm27-hero h1 {
  margin: 0;
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: clamp(min(56px, (100vw - 72px) / 7.6), 8vw, 132px);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: 0.01em;
}

/* Le dernier mot ne se sépare pas du phénix qui le suit. */
.fm27-nowrap {
  white-space: nowrap;
}

/* Phénix blanc à la suite du titre, à la hauteur des capitales. */
.fm27-hero .fm27-hero-phenix {
  display: inline-block;
  width: auto;
  height: 0.72em;
  margin-left: 0.14em;
  vertical-align: baseline;
}

.fm27-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-bg);
  color: var(--color-bg);
}

.fm27-dates {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.fm27-lieu {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Coupure au « · » plutôt qu'au trait d'union de CHARENTE-MARITIME. */
.fm27-lieu span {
  white-space: nowrap;
}

/* Accueil : appel billetterie sous les dates. */
.fm27-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-8);
  color: var(--color-bg);
}

.fm27-hero-cta p {
  max-width: 560px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

/* Accueil : tous les textes du hero centrés, remontés au-dessus du bas de la photo. */
.fm27-hero--accueil .fm27-hero-content {
  padding-bottom: clamp(var(--space-8), 18vh, 180px);
  text-align: center;
}

/* Sans le filet sous le titre ; les dates, puis le lieu en dessous. */
.fm27-hero--accueil .fm27-when {
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: 0;
  border-top: 0;
}

.fm27-hero--accueil .fm27-hero-cta {
  align-items: center;
}

/* Mobile : photo sans parallaxe (sa surhauteur de 124 % zoomait encore la photo paysage) ;
   accueil à la hauteur de l'écran, bandeau défilant visible dessous, textes remontés au tiers bas de la photo. */
@media (max-width: 599px) {
  .fm27-hero-media {
    top: 0;
    height: 100%;
    /* Écrase la translation que fm27.js pose en style en ligne. */
    transform: none !important;
  }

  .fm27-hero--accueil {
    min-height: 72vh;
    min-height: 72svh;
  }

  .fm27-hero--accueil .fm27-hero-content {
    padding-bottom: clamp(var(--space-8), 12svh, 120px);
  }
}

/* — 3. bandeau défilant — */

.fm27-ticker {
  overflow: hidden;
  padding: var(--space-3) 0;
  background: var(--color-text);
  color: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}

/* padding-right = gap : la moitié de la piste vaut exactement une période, la boucle est sans couture. */
.fm27-ticker-track {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  padding-right: var(--space-8);
  animation: fm27-tick var(--fm27-tick-duration, 34s) linear infinite;
}

.fm27-ticker-track span {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@keyframes fm27-tick {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* — 3 bis. compte à rebours, sous le bandeau, centré — */

.fm27-decompte {
  padding: var(--space-8);
  border-bottom: 2px solid var(--color-text);
}

/* 32px dès 650px ; resserré en dessous pour garder les quatre cases sur une ligne. */
.fm27-countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--space-3), 8vw - 20px, var(--space-8));
}

.fm27-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Chiffres à largeur fixe : sans eux, la ligne tremble à chaque seconde. */
.fm27-cd-val {
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.fm27-cd-label {
  margin-top: var(--space-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

/* — grilles à filets (étapes, portes d'entrée) — */

.fm27-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Le filet bas de la dernière rangée passe sous le filet encre de la section. */
  margin-bottom: -2px;
}

.fm27-cell {
  border-right: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}

/* — 4. les prochains rendez-vous — */

.fm27-rdv {
  border-bottom: 2px solid var(--color-text);
}

.fm27-rdv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--fm27-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.fm27-rdv h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.fm27-rdv-note {
  max-width: 320px;
  color: var(--color-neutral-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.14em;
}

/* La première étape (billetterie) en pleine largeur, les suivantes deux par rangée (une seule en étroit). */
.fm27-etapes {
  grid-template-columns: 1fr;
  border-top: 2px solid var(--color-text);
}

@media (min-width: 560px) {
  .fm27-etapes {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fm27-etape {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
}

.fm27-etape-num {
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-text);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.fm27-etape h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.fm27-etape p {
  color: var(--color-neutral-800);
  font-size: 14px;
  line-height: 1.5;
}

/* Billetterie (première étape) mise en avant : pleine largeur, fond encre, contenu centré et un peu plus grand. */
.fm27-etape:first-child {
  grid-column: 1 / -1;
  align-items: center;
  padding: calc(var(--space-8) * 1.5) var(--space-6);
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  text-align: center;
}

.fm27-etape:first-child .fm27-etape-num {
  align-self: stretch;
  border-bottom-color: var(--color-bg);
}

.fm27-etape:first-child h3 {
  font-size: 36px;
}

.fm27-etape:first-child p {
  color: var(--color-bg);
  font-size: 16px;
}

/* Bouton clair sur l'encre, comme celui de la newsletter. */
.fm27 .fm27-etape:first-child .fm27-btn {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
}

.fm27 .fm27-etape:first-child .fm27-btn:hover {
  background: var(--color-neutral-200);
  color: var(--color-text);
}

.fm27 .fm27-etape:first-child :focus-visible {
  outline-color: var(--color-bg);
}

/* — 5. newsletter — */

.fm27-news {
  background: var(--color-text);
  color: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}

.fm27-news-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--fm27-max);
  margin: 0 auto;
  padding: var(--space-8);
}

.fm27-news h2 {
  max-width: 460px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

/* Bouton clair sur fond sombre, libellé calé à gauche. Montserrat gras, comme les boutons de 2026. */
.fm27 .fm27-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.fm27 .fm27-btn-light:hover {
  background: var(--color-neutral-200);
  color: var(--color-text);
}

/* Fenêtre du module Weezevent. */
.fm27-dialog {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  border: 2px solid var(--color-text);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.fm27-dialog::backdrop {
  background: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
}

.fm27-dialog-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.fm27-dialog-head p {
  margin: 0;
  padding: var(--space-3) var(--space-6);
}

.fm27-dialog-close {
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-left: 2px solid var(--color-text);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.fm27-dialog-close:hover {
  background: var(--color-neutral-200);
}

.fm27-dialog-close:focus-visible {
  outline-offset: -4px;
}

.fm27-dialog-body {
  padding: var(--space-4);
}

.fm27-dialog-body iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
}

/* — 6. trois portes d'entrée — */

.fm27-portes {
  border-bottom: 2px solid var(--color-text);
}

.fm27-portes .fm27-cell {
  display: flex;
}

.fm27-porte {
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 150px;
  padding: var(--space-8) var(--space-6);
}

.fm27-porte:hover {
  background: var(--color-neutral-200);
  color: var(--color-text);
}

.fm27-porte:focus-visible {
  outline-offset: -4px;
}

.fm27-porte-tag {
  display: block;
  color: var(--color-neutral-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.fm27-porte-nom {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
}

.fm27-porte svg {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* — 7. pied de page — */

.fm27-footer {
  padding: var(--space-8);
  background: var(--color-bg);
}

.fm27-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--fm27-max);
  margin: 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.fm27-footer-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.fm27-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  max-width: var(--fm27-max);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-text);
  color: var(--color-neutral-600);
  font-size: 11px;
  letter-spacing: 0.1em;
}

:where(.fm27) .fm27-legal a {
  color: inherit;
}

:where(.fm27) .fm27-legal a:hover {
  color: var(--color-text);
}

/* — pages intérieures — */

.fm27-nav-links a[aria-current="page"] {
  background: var(--color-neutral-200);
}

.fm27-hero--page {
  min-height: min(64vh, 600px);
}

.fm27-hero--page h1 {
  font-size: clamp(44px, 9vw, 150px);
  line-height: 0.82;
}

.fm27-chapo {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-bg);
  color: var(--color-bg);
}

.fm27-chapo p {
  max-width: 640px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

/* Sommaire : cellules bordées, comme les liens de la barre de navigation. */
.fm27-toc {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Filet bas sur chaque lien (visible quand ils s'empilent), rentré sous le filet encre du sommaire. */
.fm27-toc a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  margin-bottom: -2px;
  padding: var(--space-3) var(--space-6);
  border-right: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  color: var(--color-text);
  white-space: nowrap;
}

.fm27-toc a:hover {
  background: var(--color-neutral-200);
  color: var(--color-text);
}

.fm27-toc a:focus-visible {
  outline-offset: -4px;
}

.fm27-intro {
  border-bottom: 2px solid var(--color-text);
}

.fm27-intro .fm27-container {
  padding: var(--space-8);
}

/* Un paragraphe : la police du texte (en Bebas, il serait tout en capitales). */
.fm27-intro p {
  max-width: 900px;
  font-family: var(--font-body);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Section : titre à gauche (collant sur grand écran), contenu à droite ; empilés en étroit. */
.fm27-block {
  border-bottom: 2px solid var(--color-text);
  scroll-margin-top: var(--wp-admin--admin-bar--height, 0px);
}

.fm27-block-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  max-width: var(--fm27-max);
  margin: 0 auto;
  padding: var(--space-8);
}

.fm27-block--full .fm27-block-row {
  padding-bottom: var(--space-6);
}

.fm27-block-side {
  flex: 1 1 260px;
}

.fm27-block-side h2 {
  position: sticky;
  top: calc(var(--space-6) + var(--wp-admin--admin-bar--height, 0px));
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
  hyphens: auto;
}

.fm27-block-main {
  flex: 2 1 560px;
  min-width: 0;
}

.fm27-block-main > .fm27-prose + .fm27-subs,
.fm27-block-main > .fm27-media + .fm27-subs {
  margin-top: var(--space-8);
}

/* Section avec photos : titre puis texte à gauche, photos à droite ; empilés en étroit.
   Bases fixes pour que les colonnes tombent au même endroit d'une section à l'autre. */
.fm27-block--media .fm27-block-side {
  flex: 5 1 380px;
}

.fm27-block--media .fm27-block-side h2 {
  position: static;
}

.fm27-block--media .fm27-block-side h2 + .fm27-prose {
  margin-top: var(--space-6);
}

.fm27-block--media .fm27-block-main {
  flex: 7 1 480px;
}

.fm27-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.fm27-media figure {
  margin: 0;
}

.fm27-media img {
  display: block;
  width: 100%;
  height: auto;
}

.fm27-media figcaption {
  margin-top: var(--space-2);
  font-size: 13px;
}

.fm27-subs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-8) var(--space-6);
}

.fm27-sub {
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-text);
}

.fm27-sub h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

/* Texte courant issu de l'éditeur. */
.fm27-prose > * + * {
  margin-top: var(--space-4);
}

.fm27-prose p,
.fm27-prose li {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.6;
}

.fm27-sub p,
.fm27-sub li {
  font-size: 15px;
}

.fm27-prose strong {
  font-weight: 700;
}

.fm27-prose h4 {
  padding-top: var(--space-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.fm27-prose h4 + * {
  margin-top: var(--space-2);
}

.fm27-prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fm27-prose ul li {
  position: relative;
  padding-left: var(--space-6);
}

.fm27-prose ul li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--color-text);
}

.fm27-prose ol {
  padding-left: var(--space-6);
  list-style: decimal;
}

.fm27-prose a:not(.fm27-btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.fm27-prose img {
  display: block;
  width: 100%;
  height: auto;
}

/* Une image seule dans son paragraphe prend toute la colonne, pas seulement la mesure du texte. */
.fm27-prose p:has(> img:only-child),
.fm27-prose p:has(> a:only-child > img) {
  max-width: none;
}

/* Visuel prévu pour un fond sombre (texte blanc sur fond transparent). */
.fm27-sur-sombre {
  display: block;
  padding: var(--space-4);
  background: var(--color-text);
}

/* Images côte à côte (plans, affiches). */
.fm27-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
  gap: var(--space-6);
}

.fm27-images p {
  display: contents;
}

.fm27-images br {
  display: none;
}

/* Logos (partenaires) : petites cases, logo entier centré. */
.fm27-images.fm27-logos {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  align-items: center;
  gap: var(--space-6) var(--space-8);
}

.fm27-logos img {
  width: 100%;
  max-width: 140px;
  height: 96px;
  margin: 0 auto;
  object-fit: contain;
}

/* Vidéos YouTube (lien seul sur sa ligne) et modules tiers (widgets Weezevent, iframes, programmation). */
.fm27-prose p:has(> iframe) {
  max-width: none;
}

.fm27-prose iframe[src*="youtube"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.fm27-embed {
  max-width: 100%;
}

.fm27-embed iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

/* Formulaire Contact Form 7 (page Presse). */
.fm27-prose .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
}

.fm27-prose .wpcf7-form p {
  max-width: none;
}

.fm27-prose .wpcf7-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fm27-prose .wpcf7-form :is(input:not([type="submit"], [type="checkbox"], [type="radio"]), select, textarea) {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 15px/1.4 var(--font-body);
}

.fm27-prose .wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

.fm27 .fm27-prose .wpcf7-submit {
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-bg);
  font: 700 14px/1.2 var(--font-body);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.fm27 .fm27-prose .wpcf7-submit:hover {
  background: var(--color-neutral-700);
}

/* Bouton encre sur fond clair : un lien seul dans son paragraphe. */
.fm27 .fm27-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-4) var(--space-8);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.fm27 .fm27-btn:hover {
  background: var(--color-neutral-700);
  color: var(--color-bg);
}

/* Grille d'univers : photo 4/5, filets encre (maquette). */
.fm27-univers {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 2px solid var(--color-text);
}

.fm27-univers .fm27-cell {
  display: flex;
  border-right-color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.fm27-univers-card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fm27-univers-card:hover {
  background: var(--color-neutral-200);
  color: var(--color-text);
}

.fm27-univers-card:focus-visible {
  outline-offset: -4px;
}

.fm27-univers-media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 2px solid var(--color-text);
  background: var(--color-neutral-300);
}

.fm27-univers-media img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.fm27-univers-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}

.fm27-univers-nom {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.fm27-univers-desc {
  color: var(--color-neutral-800);
  font-size: 14px;
  line-height: 1.5;
}

/* — widget billetterie, fixé en bas à droite (toutes les pages 2027) — */

/* Sous le bandeau cookies Gigz (z-index 15001) et sous la fenêtre newsletter (couche supérieure). */
.fm27-widget {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1000;
  color: var(--color-bg);
  font-family: var(--font-body);
}

/* Bas de page : la dernière ligne du pied (mention, signature) remonte au-dessus du bandeau (84 px de haut). */
body.fm27:has(.fm27-widget) .fm27-footer {
  padding-bottom: calc(var(--space-6) * 2 + 84px);
}

/* Bandeau fermé : vignette + titre. Filet clair pour le détacher de la photo sombre du hero. */
.fm27 .fm27-widget-teaser {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: calc(100vw - 2 * var(--space-6));
  margin: 0;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-2);
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-bg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.2s, visibility 0s;
}

/* Effacé tant qu'il couvre un texte du hero (petits écrans, voir fm27.js). */
.fm27 .fm27-widget.is-masked:not(.is-open) .fm27-widget-teaser {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0s linear 0.2s;
}

.fm27-widget-teaser img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.fm27-widget-teaser span {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Panneau ouvert : recouvre le bandeau et se déplie depuis le coin bas droit (comme mainsquarefestival.fr).
   Fermé, il est masqué (visibility) pour que ses liens sortent de l'ordre de tabulation. */
.fm27-widget-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: calc(100vw - 2 * var(--space-6));
  border: 2px solid var(--color-bg);
  background: var(--color-text);
  clip-path: inset(100% 0 0 100%);
  visibility: hidden;
  transition: clip-path 0.3s cubic-bezier(0.85, 0, 0.15, 1), visibility 0s linear 0.3s;
}

.fm27-widget.is-open .fm27-widget-panel {
  clip-path: inset(0);
  visibility: visible;
  transition-delay: 0s;
}

/* Survol à la souris seulement (au toucher, le survol resterait collé) ; neutralisé après « Fermer ». */
@media (hover: hover) {
  .fm27-widget:hover:not(.is-dismissed) .fm27-widget-panel {
    clip-path: inset(0);
    visibility: visible;
    transition-delay: 0s;
  }
}

.fm27-widget-media {
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-bottom: 2px solid var(--color-bg);
}

.fm27-widget-media img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.fm27-widget-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.fm27-widget-titre {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.fm27-widget-texte {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

/* « Fermer » : même libellé que la fenêtre newsletter, posé dans le coin de la photo. */
.fm27 .fm27-widget-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 2px solid var(--color-bg);
  border-left: 2px solid var(--color-bg);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.fm27 .fm27-widget-close:hover {
  background: var(--color-neutral-800);
}

.fm27 .fm27-widget :focus-visible {
  outline-color: var(--color-bg);
}

.fm27 .fm27-widget-panel:focus-visible,
.fm27 .fm27-widget-close:focus-visible {
  outline-offset: -6px;
}

@media (max-width: 599px) {
  .fm27-widget {
    right: var(--space-3);
    bottom: var(--space-3);
  }

  /* Bandeau de 68 px de haut sur petit écran. */
  body.fm27:has(.fm27-widget) .fm27-footer {
    padding-bottom: calc(var(--space-3) * 2 + 68px);
  }

  .fm27 .fm27-widget-teaser,
  .fm27-widget-panel {
    max-width: calc(100vw - 2 * var(--space-3));
  }

  .fm27 .fm27-widget-teaser {
    gap: var(--space-3);
    padding-right: var(--space-4);
  }

  .fm27-widget-teaser img {
    width: 48px;
    height: 48px;
  }

  .fm27-widget-teaser span {
    font-size: 20px;
  }

  .fm27-widget-media {
    aspect-ratio: 2 / 1;
  }

  .fm27-widget-body {
    padding: var(--space-4);
  }

  .fm27-widget-titre {
    font-size: 30px;
  }
}

/* — mouvement réduit : bandeau figé (le parallaxe est coupé côté JS), widget sans dépliage — */

@media (prefers-reduced-motion: reduce) {
  .fm27-ticker-track {
    animation: none;
  }

  .fm27-hero-media {
    will-change: auto;
  }

  .fm27-widget-panel {
    transition: none;
  }
}