/* ==========================================================================
   Les Récits du mardi · ce qui est propre à ce site
   --------------------------------------------------------------------------
   charte.css est la charte commune avec La Fabrique de l'Imprévu (seul
   l'accent change). site.css est la mise en page du site de La Fabrique,
   copiée telle quelle : pour suivre ses évolutions, il suffit de la recopier.
   Ici : l'identité de la plaquette des Récits, une couleur par partie, et les
   composants que le site de La Fabrique n'a pas.
   ========================================================================== */

:root {
  /* L'identité : la couverture de la plaquette (plaquette 2026-2027, sources/base.py) */
  --magenta: #e51784;
  --orange: #ed5e32;
  --lune: #fcb944;
  --degrade: linear-gradient(35deg, var(--magenta) 0%, #e8394f 55%, var(--orange) 100%);

  /* Une couleur douce par partie, comme dans la plaquette (palette de la plaquette globale 2026).
     La couleur sert aux titres ; sa version sombre (-ink) aux petits textes, pour rester lisible. */
  --c-projet: #ba646c;  --c-projet-ink: #86484e;
  --c-saison: #c09871;  --c-saison-ink: #8a6d51;
  --c-soutien: #6cb47e; --c-soutien-ink: #497a56;
  --c-contact: #894d4b; --c-contact-ink: #894d4b;
  --night-2: #2a1f55; /* le survol des boutons d'encre, comme sur la v2 du site de La Fabrique */
}

.c-projet, .c-lieu { --c: var(--c-projet); --c-ink: var(--c-projet-ink); }
.c-saison, .c-venus, .c-hlm { --c: var(--c-saison); --c-ink: var(--c-saison-ink); }
.c-soutien { --c: var(--c-soutien); --c-ink: var(--c-soutien-ink); }
.c-contact { --c: var(--c-contact); --c-ink: var(--c-contact-ink); }

/* Les petits textes de couleur prennent la version sombre */
.show-cat, .pas__cat, .trace__an { color: var(--c-ink, var(--c)); }

/* Le sur-titre : sa petite barre reprend le dégradé de la couverture */
.eyebrow::before { background: linear-gradient(90deg, var(--magenta), var(--orange)); }

/* Les boutons : le dessin de la v2 du site de La Fabrique (lfdi/v2), des aplats sans reflet, ni dégradé, ni ombre
   portée, en gardant la flèche dans sa pastille ronde (charte.css garde le « liquid glass » du site de La Fabrique).
   Sur fond clair, l'encre (.btn--glass-light, le .btn--ink de la v2) ; sur fond sombre, le verre de la v2
   (.btn--glass) ; dans la couleur de la rubrique, un aplat (.btn--tint). Même hauteur qu'un bouton de la v2. */
.btn {
  gap: .55rem; padding: .78em 1.35em;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn::after { content: none; }
.btn:has(.btn__arrow) { padding: .56em .56em .56em 1.35em; }
.btn--glass-light { color: #fff; background: var(--ink); border-color: transparent; box-shadow: none; }
.btn--glass-light:hover { background: var(--night-2); box-shadow: none; }
.btn--glass-light .btn__arrow { background: #fff; color: var(--ink); }
.btn--glass { color: #fff; background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .25); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--glass:hover { background: rgb(255 255 255 / .18); }
.btn--glass .btn__arrow { background: #fff; color: var(--ink); }
.btn--tint { background: color-mix(in srgb, var(--c, var(--accent)) 26%, white); border-color: transparent; box-shadow: none; }
.btn--tint:hover { background: color-mix(in srgb, var(--c, var(--accent)) 36%, white); }
.nav .btn:has(.btn__arrow) { padding: .4em .4em .4em 1.05em; }
.nav .btn[aria-current="page"] { background: var(--night-2); box-shadow: none; }

/* En-tête : la version « menu » du logo de 2026 (v12), la lune et le nom sans l'envolée de braises, un peu plus de
   deux fois plus large que haut, centrée comme le menu. Une seule taille, la petite (en-tête de 5rem, logo de 3,4rem,
   le menu de site.css), sans changement en défilant : seule l'ombre apparaît (classe is-scrolled, posée par site.js).
   Fixé, avec la place gardée en haut de page ; --header-h sert aussi aux éléments collants et aux ancres (site.css). */
:root { --header-h: 5rem; }
body { padding-top: var(--header-h); }
.site-header { position: fixed; left: 0; right: 0; }
.brand img { height: 3.4rem; }
/* six entrées et la loupe : en dessous de 1000 px, là où le menu arrive près du logo (40 à 55 px selon la police), il
   passe derrière le bouton Menu ; au-dessus, chacune sur une ligne */
@media (min-width: 1001px) {
  .nav a:not(.btn) { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .nav a:not(.btn), .nav .btn, .recherche-bouton { transition: none; }
}

/* Recherche : la loupe de l'en-tête (posée par recits.js, au bout du menu après Réserver, ou à côté du bouton Menu
   sur téléphone) et sa fenêtre, en haut de l'écran. L'index vient de recherche.php. */
.recherche-bouton {
  display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  transition: background-color .2s;
}
.recherche-bouton:hover { background: var(--paper-alt); }
.recherche-bouton svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 1000px) {
  .recherche-bouton { margin-left: auto; }
  .recherche-bouton + .nav-toggle { margin-left: calc(.4rem - var(--space-m)); }
}

.recherche {
  width: min(42rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2 * clamp(1rem, 9vh, 6rem));
  margin: clamp(1rem, 9vh, 6rem) auto auto; padding: 0; border: 0; border-radius: var(--radius-l);
  background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-l); overflow: hidden;
}
.recherche[open] { display: flex; flex-direction: column; }
.recherche::backdrop { background: rgb(23 17 46 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:has(.recherche[open]) { overflow: hidden; }
.recherche__barre { display: flex; align-items: center; gap: .8rem; padding: .85rem .85rem .85rem 1.4rem; border-bottom: 1px solid var(--line); }
.recherche__barre > svg { flex: none; width: 1.35rem; height: 1.35rem; color: var(--muted); }
.recherche__champ {
  flex: 1; min-width: 0; padding: .4rem 0; border: 0; background: none; outline: none;
  font: 500 1.2rem/1.3 var(--f-text); color: var(--ink);
}
.recherche__champ::placeholder { color: var(--muted); opacity: 1; }
/* la petite croix du navigateur dans le champ ferait double emploi avec celle qui ferme la fenêtre */
.recherche__champ::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.recherche__fermer {
  display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%;
  border: 1px solid rgb(28 23 51 / .1); background: #fff; box-shadow: var(--shadow-s);
  font: 400 1.5rem/1 var(--f-text); color: var(--ink); cursor: pointer; transition: transform .3s;
}
.recherche__fermer:hover { transform: rotate(90deg); }
.recherche__etat { margin: 0; padding: .8rem 1.4rem 0; font-size: .82rem; color: var(--muted); }
.recherche__etat:empty { display: none; }
.recherche__resultats { margin: 0; padding: .45rem .6rem .7rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.recherche__resultats:empty { display: none; }
.recherche__resultat {
  display: flex; align-items: flex-start; gap: 1rem; padding: .7rem .8rem; border-radius: var(--radius-m);
  color: inherit; text-decoration: none; transition: background-color .15s;
}
.recherche__resultat:hover, .recherche__resultat:focus-visible { background: var(--paper-alt); }
.recherche__resultat:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.recherche__vignette { flex: none; width: 3.75rem; height: 3.75rem; border-radius: var(--radius-s); object-fit: cover; background: var(--paper-alt); }
.recherche__vignette--page { background: var(--paper-alt) url("../img/lune.svg?v=6e262dab") center / 50% no-repeat; }
.recherche__texte { display: grid; gap: .1rem; min-width: 0; }
.recherche__rubrique { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-saison-ink); }
.recherche__titre { font: 500 1.4rem/1.1 var(--f-display); }
.recherche__artiste { font-size: .86rem; font-weight: 600; }
.recherche__extrait {
  margin-top: .2rem; font-size: .86rem; line-height: 1.45; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.recherche__extrait:empty { display: none; }
.recherche mark { padding: 0 .08em; border-radius: 3px; background: color-mix(in srgb, var(--lune) 50%, white); color: inherit; }
/* Sur téléphone, la fenêtre prend tout l'écran : le clavier ne cache pas les résultats */
@media (max-width: 640px) {
  .recherche { width: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .recherche__barre { padding-left: 1.1rem; }
  .recherche__resultats { padding-inline: .3rem; }
}

/* Ce qui n'est pas encore fourni par l'association : en retrait, sans cadre */
.a-preciser { color: var(--muted); font-style: italic; }

/* ==========================================================================
   Accueil : la couverture de la plaquette
   ========================================================================== */
.hero--recits { background: var(--magenta); }
.hero--recits .hero__bg { background: var(--degrade); }
/* Le grand arc de la couverture, en blanc léger, derrière tout */
.hero__arc {
  position: absolute; left: 22%; top: 30%; width: 135vmax; aspect-ratio: 1;
  border-radius: 50%; border: clamp(1.6rem, 1rem + 3vw, 4rem) solid rgb(255 255 255 / .13);
  border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-8deg);
}
/* Le fondu blanc vers la page, comme sur le site de La Fabrique, sans les voiles de nuit */
.hero--recits::before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 52%, rgb(255 255 255 / .14) 63%, rgb(255 255 255 / .45) 76%, rgb(255 255 255 / .82) 89%, var(--sheet) 98%);
}
.hero__logo { line-height: 0; }
/* Le logo de l'accueil est écrit dans la page en SVG (logo-site.py, entre les marques « logo animé ») pour s'animer
   au survol, une fois : les pièces de l'envolée (les braises, la petite étoile) partent de la grande étoile, où elles
   sont toutes (--dx, --dy), et prennent leur place l'une après l'autre, de la plus proche à la plus lointaine (--i). */
.logo-anime { width: clamp(17rem, 9rem + 24vw, 30rem); height: auto; overflow: visible; filter: drop-shadow(0 12px 28px rgb(120 10 60 / .35)); }
.logo-anime__envol { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .hero__logo a:is(:hover, :focus-visible) .logo-anime__envol { animation: logo-envol .9s cubic-bezier(.3, 1.25, .55, 1) calc(var(--i) * .1s) both; }
}
@keyframes logo-envol { from { translate: var(--dx) var(--dy); scale: .2; opacity: 0; } }
.hero--recits .eyebrow { color: #fff; }
.hero--recits .eyebrow::before { background: var(--lune); }
@media (max-width: 520px) { .hero--recits .eyebrow::before { display: none; } }

/* Les prochains mardis : les cartes « à la une », la première marquée */
.une-card { background: #b8125f; }
.une-card[hidden] { display: none; }
.une-card__cat { color: rgb(255 255 255 / .88); }
.une-card__title { font-size: clamp(1.5rem, 1.1rem + .9vw, 2rem); hyphens: auto; -webkit-hyphens: auto; }
.une-card__artiste { display: block; margin-top: .35rem; font-size: .88rem; font-weight: 600; color: rgb(255 255 255 / .85); }
.une-card--prochain::before {
  content: "Prochain mardi"; position: absolute; z-index: 2; top: 1rem; left: 1rem;
  padding: .25rem .7rem; border-radius: var(--radius-full); background: #fff; color: var(--accent-ink);
  font: 700 .68rem/1.5 var(--f-text); letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 520px) { .une-card__title { font-size: 1.2rem; overflow-wrap: anywhere; } .une-card__artiste { font-size: .78rem; } .une-card--prochain::before { top: .6rem; left: .6rem; } }

/* Têtes de section, centrées */
.tete { max-width: 44rem; margin: 0 auto var(--space-xl); text-align: center; }
.tete .h-section { color: var(--c, var(--ink)); }
.tete__lead { margin: var(--space-s) auto 0; font-family: var(--f-display); font-weight: 300; font-size: var(--step-1); line-height: 1.35; color: var(--ink-soft); }
.suite { margin-top: var(--space-xl); text-align: center; }
.suite .btn-row { justify-content: center; }

/* L'agenda de l'accueil : celui de La Fabrique, la saison seule */
.agenda-recits .agenda__prochain .agenda__what::before { content: "Prochain mardi"; }
.agenda-recits .agenda__tag { pointer-events: none; }
.agenda-recits .agenda-saison:first-child .frise__temps { margin-top: 0; }
/* Chaque mardi : la date, le visuel, le spectacle (public et durée), le bouton Réserver ; « A eu lieu » une fois passé */
.agenda-recits .agenda li { grid-template-columns: 7rem 6rem minmax(0, 1fr) auto; grid-template-areas: "date visuel texte action"; }
.agenda-recits .agenda__date { grid-area: date; }
.agenda__visuel { grid-area: visuel; width: 6rem; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); }
.agenda__texte { grid-area: texte; }
.agenda .agenda__meta { margin-top: .35rem; font-size: .88rem; font-weight: 600; color: var(--c-ink, var(--ink-soft)); }
.agenda__reserver, .agenda-recits .agenda__tag { grid-area: action; justify-self: end; }
.agenda__reserver { z-index: 1; font-size: .85rem; }
.agenda-recits li.est-passe .agenda__visuel { filter: grayscale(.55); opacity: .85; }
@media (max-width: 640px) {
  .agenda-recits .agenda li { grid-template-columns: 6rem minmax(0, 1fr); grid-template-areas: "date visuel" "date texte" "date action"; }
  .agenda__visuel { width: 100%; aspect-ratio: 3 / 2; }
  .agenda__reserver, .agenda-recits .agenda__tag { justify-self: start; }
}

/* L'édito prend la couleur de sa partie */
.edito__title { color: var(--c, var(--c-edito)); font-size: var(--step-4); }
.insecable { white-space: nowrap; }

/* Les chiffres de la saison, en bandeau (plaquette, page « Le projet ») */
.chiffres { list-style: none; margin: var(--space-2xl) 0 0; padding: var(--space-l) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-m); border-top: 1px solid var(--line); }
.chiffres li { font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
.chiffres b { display: block; margin-bottom: .35rem; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); line-height: 1; color: var(--c, var(--accent-ink)); }
@media (max-width: 820px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-l); } }

/* ==========================================================================
   Fiches des spectacles
   ========================================================================== */
.show-title--long { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); line-height: .98; }
.show-artiste { margin: var(--space-s) 0 0; font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
/* La citation de l'artiste, sur le dégradé de la couverture */
.citation { color: #fff; background: var(--degrade); }
.citation .quote { margin-inline: auto; }
.citation .quote blockquote::before { color: var(--lune); }
.citation .quote figcaption { color: rgb(255 255 255 / .88); }
/* Réserver ou « c'était le… », selon la date (recits.js) */
.si-passe { display: none; }
.est-passe .si-avenir { display: none; }
.est-passe .si-passe { display: block; }
.infos .btn-row { margin-top: 1.1rem; }
.infos .cartes { margin-top: .6rem; gap: .5rem; }
.infos .cartes .btn { font-size: .9rem; }
.pager a:is(.c-saison, .c-venus) span, .pager a:is(.c-saison, .c-venus) small { color: var(--c-ink); }
.pager a:is(.c-saison, .c-venus) span { color: var(--c); }

/* La saison : une étape passée s'efface un peu */
.pas.est-passe .pas__media img { filter: grayscale(.55); opacity: .85; }
.pas__passe { display: none; margin-top: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pas.est-passe .pas__passe { display: block; }
.pas__artiste { margin: .5rem 0 0; font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }

/* Une parole venue de loin : la carte de La Fabrique (carte-agenda.js), liste resserrée */
.carte-venus .contact-carte__adresses { gap: .35rem; }
.carte-venus .contact-carte__adresses li { padding: .65rem .9rem; border-radius: var(--radius-m); }
.carte-venus .contact-carte__ville { font-size: 1.3rem; }
.carte-venus .contact-carte__adresse { padding-top: .1rem; font-size: .9rem; }
.carte-venus .contact-carte__role { padding-top: .1rem; font-size: .82rem; color: var(--muted); }
.carte-venus .contact-carte__adresses .agenda-carte__pastille { grid-row: 1 / span 3; }
/* chaque lieu dans une couleur des titres de La Fabrique (classe c-… sur son adresse, reprise par carte-agenda.js) */
.carte-venus .dep.est-actif { fill: color-mix(in srgb, var(--c) 50%, var(--paper-alt)); }
.carte-venus .mk circle { fill: var(--c); }
.carte-venus .contact-carte__adresses .agenda-carte__pastille { background: var(--c); }
.carte-venus .contact-carte__adresses li.est-actif { background: color-mix(in srgb, var(--c) 16%, var(--paper)); }
.carte-venus__loin { margin: var(--space-m) 0 0; padding: var(--space-m); border-radius: var(--radius-l); background: color-mix(in srgb, var(--c) 12%, var(--sheet)); }
.carte-venus__loin b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; line-height: 1.1; }
/* Épinal au centre (data-centre) : un point sans numéro où mènent les courbes (data-liaisons), tracées dans l'ordre
   des dates, et d'où partent les ondes ; dans
   la liste, une pastille en anneau. La colonne de la liste prend la hauteur de la carte (contain: size) : la liste
   défile, le Québec reste dessous. */
.carte-venus .liaison { fill: none; stroke: var(--c); stroke-width: .35; stroke-linecap: round; opacity: .6; transition: opacity .2s, stroke-width .2s; }
.carte-venus .liaison.est-actif { opacity: 1; stroke-width: .65; }
.carte-venus.anim .liaison { stroke-dasharray: 1; stroke-dashoffset: 1; }
.carte-venus.anim.go .liaison { stroke-dashoffset: 0; transition: stroke-dashoffset var(--du, 1s) cubic-bezier(.3, .5, .4, 1) var(--d, 0ms); }
.carte-venus .onde { stroke: var(--c, var(--accent)); }
.carte-venus .contact-carte__adresses .agenda-carte__pastille--centre { background: none; box-shadow: inset 0 0 0 2px var(--c); }
.carte-venus .contact-carte__adresses .agenda-carte__pastille--centre::after { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c); }
/* sans numéro (data-sans-numeros) : une pastille de la couleur du lieu, à la hauteur de son nom ; Épinal garde son anneau */
.carte-venus .contact-carte__adresses .agenda-carte__pastille { justify-self: center; min-width: 0; width: .8rem; height: .8rem; margin-top: .3rem; padding: 0; }
.carte-venus .contact-carte__adresses .agenda-carte__pastille--centre { width: 1.15rem; height: 1.15rem; margin-top: .12rem; }
.carte-venus > .agenda-carte__plan + div { align-self: stretch; contain: size; display: flex; flex-direction: column; }
.carte-venus .contact-carte__adresses { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-right: .4rem; }
.contact-carte__adresses.a-suivre { -webkit-mask-image: linear-gradient(#000 calc(100% - 3rem), transparent); mask-image: linear-gradient(#000 calc(100% - 3rem), transparent); }
/* la liste à gauche, la carte à droite, comme sur Les Voix du Lavoir ; sur téléphone, la carte reste au-dessus */
@media (min-width: 761px) {
  .carte-venus { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .carte-venus > .agenda-carte__plan { order: 2; }
}
@media (max-width: 760px) {
  .carte-venus > .agenda-carte__plan + div { contain: none; }
  .carte-venus .contact-carte__adresses { overflow: visible; padding-right: 0; }
}

/* ==========================================================================
   Le Lavoir : le bandeau, la soirée en quatre temps, les questions
   ========================================================================== */
.panorama { margin: 0; }
.panorama img { width: 100%; height: auto; aspect-ratio: 16 / 6.5; object-fit: cover; object-position: 50% 55%; }
.panorama figcaption { padding: .6rem var(--gutter) 0; font-size: .82rem; color: var(--muted); text-align: right; }
.soiree { list-style: none; position: relative; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
.soiree::before { content: ""; position: absolute; left: .55rem; top: .7rem; bottom: .7rem; width: 2px; background: color-mix(in srgb, var(--c) 40%, var(--line)); }
.soiree li { position: relative; padding-left: 2.3rem; }
.soiree li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--sheet); }
.soiree__quand { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; line-height: 1.2; color: var(--c-ink); }
.soiree__quoi { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.55rem; line-height: 1.1; color: var(--ink); }
.soiree p { margin: .25rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); text-align: left; }
.questions { max-width: 46rem; margin-inline: auto; }
.questions details { border-top: 1px solid var(--line); }
.questions details:last-child { border-bottom: 1px solid var(--line); }
.questions summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: var(--space-m) 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 500; font-size: 1.45rem; line-height: 1.15; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, white); color: var(--c-ink); font: 600 1.2rem/1 var(--f-text); transition: transform .25s ease; }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { margin: 0 0 var(--space-m); color: var(--ink-soft); }

/* ==========================================================================
   Le projet : hors les murs, partenaires
   ========================================================================== */
.volets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.volet { padding: var(--space-l); border-radius: var(--radius-l); background: var(--sheet); border: 1px solid var(--line); border-top: 6px solid var(--c); box-shadow: var(--shadow-s); }
.volet__num { display: block; font-family: var(--f-display); font-weight: 500; font-size: 3.2rem; line-height: 1; color: var(--c); }
.volet h3 { margin: .6rem 0 .5rem; font-family: var(--f-display); font-weight: 500; font-size: 1.75rem; line-height: 1.05; }
.volet p { margin: 0 0 .6em; font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 860px) { .volets { grid-template-columns: 1fr; } }
.encadre { margin-top: var(--space-xl); padding: var(--space-l); border-radius: var(--radius-l); background: color-mix(in srgb, var(--c) 10%, var(--sheet)); }
.encadre h3 { margin: 0 0 .6rem; font-family: var(--f-text); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); }
.encadre p { margin: 0 0 .6em; color: var(--ink-soft); }
.encadre p:last-child { margin-bottom: 0; }
.reseau { list-style: none; margin: 0; padding: 0; columns: 2 14rem; column-gap: var(--space-l); }
.reseau li { break-inside: avoid; padding: .3rem 0; font-size: .97rem; color: #2b2838; }
.note { margin-top: .8rem; font-size: .85rem; color: var(--muted); }

/* ==========================================================================
   Les Voix du Lavoir : le générique des saisons passées
   ========================================================================== */
.troupe--venus { --membre: 10.5rem; gap: var(--space-xl) var(--space-m); }
.troupe--venus .generique__name { font-size: 1.25rem; line-height: 1.1; }
.membre__spectacle { display: block; margin-top: .25rem; font-style: italic; font-size: .88rem; line-height: 1.35; color: var(--muted); }
.membre__date { display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); }
.saison-venus + .saison-venus { margin-top: var(--space-2xl); }
.saison-venus > h2 { text-align: center; font-family: var(--f-display); font-weight: 300; font-size: var(--step-3); line-height: 1; color: var(--c); margin-bottom: var(--space-l); }

/* ==========================================================================
   Soutenir et réserver
   ========================================================================== */
.profils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.profil { border-top: 1px solid var(--c); padding-top: var(--space-m); }
.profil h3 { margin: 0 0 .5rem; font-family: var(--f-display); font-weight: 500; font-size: 1.9rem; line-height: 1.05; }
.profil p { margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .profils { grid-template-columns: 1fr; } }
.appel { max-width: 44rem; margin: var(--space-2xl) auto 0; text-align: center; }
.appel p { font-size: var(--step-1); line-height: 1.5; }
.appel .btn-row { justify-content: center; margin-top: var(--space-m); }
.sms { display: block; margin: .4rem 0 .6rem; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; letter-spacing: .01em; color: var(--c); text-decoration: none; }
.sms:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.contacts li { font-size: .95rem; color: var(--ink-soft); }
.contacts b { display: block; color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Pied de page : la compagnie qui porte la saison
   ========================================================================== */
.footer-porte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid rgb(255 255 255 / .1); color: var(--night-muted); font-size: .9rem; }
.footer-porte a { display: block; opacity: .9; }
.footer-porte a:hover { opacity: 1; }
.footer-porte img { width: 7.5rem; height: auto; }
.site-footer .footer-bottom { margin-top: var(--space-m); }

/* ==========================================================================
   Accueil : la fiche d'un spectacle ouverte depuis l'agenda (recits.js),
   dans la fenêtre des fiches de l'équipe de La Fabrique (.fiche-ouverte, site.css)
   ========================================================================== */
.fiche-spectacle .show-head { margin: 0 0 var(--space-l); padding-right: 2.5rem; text-align: left; }
.fiche-spectacle .show-cat { font-size: 1.25rem; color: var(--c-ink); }
/* le titre se resserre avec la fenêtre, pour qu'un long mot (« Correspondance(s) ») tienne sur sa ligne */
.fiche-spectacle .fiche-ouverte__corps { container-type: inline-size; }
.fiche-spectacle .show-title, .fiche-spectacle .show-title--long { font-size: min(var(--step-4), 13cqi); line-height: .95; }
.fiche-spectacle .show-tagline { margin: var(--space-s) 0 0; max-width: none; font-size: 1.15rem; }
.fiche-spectacle .cols { display: block; }
.fiche-spectacle .cols > * + *, .fiche-spectacle .cols > .block + .block { margin-top: var(--space-l); }
.fiche-spectacle .quote { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--line); text-align: left; }
.fiche-spectacle .quote blockquote { font-size: 1.45rem; }
.fiche-spectacle .quote blockquote::before { font-size: 3rem; }
.fiche-spectacle .quote figcaption { color: var(--c-ink); }
.fiche-spectacle__infos { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: grid; gap: .6rem; }
.fiche-spectacle__infos li { font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.fiche-spectacle__infos b { display: block; font-weight: 600; color: var(--ink); }
.fiche-spectacle__pratique .btn { margin-top: var(--space-m); }
.fiche-spectacle__passe { margin: var(--space-m) 0 0; font-size: .9rem; font-style: italic; color: var(--muted); }
/* Les flèches vers le mardi d'avant et celui d'après, de part et d'autre de la fenêtre ; sur un écran moyen, à cheval
   sur son bord (dans la marge intérieure, sans toucher au texte) ; sur téléphone, en bas de l'écran, sous la fenêtre */
.fiche-ouverte.fiche-spectacle { --fleche: 3.2rem; width: min(58rem, calc(100% - 5rem)); }
.fiche-spectacle__fleche {
  position: fixed; top: 50%; z-index: 1;
  display: grid; place-items: center; width: var(--fleche); height: var(--fleche); margin-top: calc(var(--fleche) / -2); padding: 0; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .6); background: rgb(255 255 255 / .9); box-shadow: var(--shadow-m);
  font: 400 1.35rem/1 var(--f-text); color: var(--ink); cursor: pointer; transition: transform .25s, background .2s;
}
.fiche-spectacle__fleche[hidden] { display: none; }
.fiche-spectacle__fleche:hover { background: #fff; }
.fiche-spectacle__fleche--avant { left: max(.9rem, calc(50% - 29rem - var(--fleche) - 1rem)); }
.fiche-spectacle__fleche--apres { right: max(.9rem, calc(50% - 29rem - var(--fleche) - 1rem)); }
.fiche-spectacle__fleche--avant:hover { transform: translateX(-3px); }
.fiche-spectacle__fleche--apres:hover { transform: translateX(3px); }
/* Sur téléphone : les infos à côté de la photo, Réserver en dessous */
@media (max-width: 640px) {
  .fiche-spectacle .fiche-ouverte__cote { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-s) var(--space-m); align-items: start; }
  .fiche-spectacle__pratique { display: contents; }
  .fiche-spectacle .fiche-ouverte__photo { grid-row: 1; width: 100%; }
  .fiche-spectacle__infos { grid-column: 2; grid-row: 1; margin: 0; gap: .45rem; }
  .fiche-spectacle__infos li { font-size: .82rem; }
  .fiche-spectacle__infos li:first-child { padding-right: 2.2rem; }
  .fiche-spectacle__pratique .btn, .fiche-spectacle__passe { grid-column: 1 / -1; margin: 0; }
  .fiche-spectacle__pratique .btn { justify-self: start; }
  .fiche-ouverte.fiche-spectacle { --fleche: 3rem; width: calc(100% - 2rem); inset-block: 0 4.5rem; max-height: calc(100dvh - 6rem); }
  .fiche-spectacle__fleche { top: auto; bottom: 1rem; margin-top: 0; }
  .fiche-spectacle__fleche--avant { left: 1rem; }
  .fiche-spectacle__fleche--apres { right: 1rem; }
}

/* ==========================================================================
   Le Projet : la saison mois par mois, comme la page 12 de la plaquette. La colonne des mardis teintée de la
   lune, les soirées dans le dégradé de la couverture (cerclées une fois passées) ; recits.js annonce la soirée
   survolée sous le calendrier et ouvre sa fiche au clic.
   ========================================================================== */
.calendrier { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-l) var(--space-m); max-width: 64rem; margin: var(--space-xl) auto 0; }
.calendrier__mois h3 { margin: 0 0 .45rem; font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; line-height: 1.1; color: var(--muted); }
.calendrier__mois.a-soiree h3 { color: var(--magenta); }
.calendrier__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: .78rem; line-height: 1; }
.calendrier__entete { padding: .4rem 0 .3rem; font-size: .66rem; font-weight: 700; color: var(--muted); }
.calendrier__date { display: grid; place-items: center; aspect-ratio: 1; color: var(--ink-soft); text-decoration: none; }
.calendrier__entete.est-mardi, .calendrier__date.est-mardi { background: color-mix(in srgb, var(--lune) 22%, transparent); color: var(--ink); }
.calendrier__date.est-temps-fort { background: color-mix(in srgb, var(--c-saison) 32%, white); }
.calendrier__date.est-conte { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--orange); }
.calendrier__date.calendrier__soiree { position: relative; border-radius: 50%; background: var(--degrade); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px color-mix(in srgb, var(--lune) 22%, white); transition: transform .2s, box-shadow .2s; }
.calendrier__date.calendrier__soiree:hover, .calendrier__date.calendrier__soiree:focus-visible, .calendrier__date.calendrier__soiree.est-annonce { transform: scale(1.22); box-shadow: 0 0 0 2px #fff, 0 6px 16px -4px rgb(229 23 132 / .55); z-index: 1; }
.calendrier__soiree:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.calendrier__date.calendrier__soiree.est-passe { background: #fff; color: var(--magenta); box-shadow: inset 0 0 0 1.5px var(--magenta); }
.calendrier__info { min-height: 1.6em; margin: var(--space-l) 0 0; text-align: center; font-size: 1.02rem; color: var(--ink-soft); }
.calendrier__info b { color: var(--ink); }
.calendrier__info i { color: var(--magenta); font-style: normal; font-weight: 600; }
.calendrier__legende { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; max-width: 52rem; margin: var(--space-m) auto 0; padding: 0; font-size: .82rem; color: var(--muted); }
.calendrier__legende li { display: flex; align-items: center; gap: .5rem; }
.calendrier__puce { flex: none; width: .95rem; height: .95rem; border-radius: 4px; }
.calendrier__puce--soiree { border-radius: 50%; background: var(--degrade); }
.calendrier__puce--passee { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--magenta); background: #fff; }
.calendrier__puce--temps-fort { background: color-mix(in srgb, var(--c-saison) 32%, white); }
.calendrier__puce--conte { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--orange); }
.calendrier__puce--mardi { background: color-mix(in srgb, var(--lune) 22%, transparent); }
@media (max-width: 560px) {
  .calendrier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--space-s); }
  .calendrier__mois h3 { font-size: 1.1rem; }
  .calendrier__grille { font-size: .72rem; }
}


/* ==========================================================================
   Les Voix du Lavoir : la carte de tous les artistes venus, comme la page 7 de la plaquette. Une courbe
   magenta relie chaque lieu à Épinal (data-liaisons, carte-agenda.js), le repère grossit avec le nombre
   d'artistes ; survoler un lieu éclaire sa courbe et sa liste.
   ========================================================================== */
.carte-voix .agenda-carte .liaison { fill: none; stroke: var(--c, var(--magenta)); stroke-width: .35; stroke-linecap: round; opacity: .6; transition: opacity .2s, stroke-width .2s; }
.carte-voix .agenda-carte .liaison.est-actif { opacity: 1; stroke-width: .65; }
.carte-voix .agenda-carte .mk circle { fill: var(--c, var(--orange)); }
.carte-voix .agenda-carte .dep.est-actif { fill: color-mix(in srgb, var(--c, var(--orange)) 40%, var(--paper-alt)); }
.carte-voix .agenda-carte.anim .liaison { stroke-dasharray: 120; stroke-dashoffset: 120; }
.carte-voix .agenda-carte.anim.go .liaison { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease var(--d, 0ms); }
/* sans numéro (data-sans-numeros) : une pastille de la couleur du lieu, à la hauteur de son nom */
.carte-voix .contact-carte__adresses .agenda-carte__pastille { min-width: 0; width: .9rem; height: .9rem; margin-top: .45rem; padding: 0; background: var(--c, var(--orange)); }
.carte-voix .contact-carte__adresses li.est-actif { background: color-mix(in srgb, var(--c, var(--orange)) 16%, var(--paper)); }
.carte-voix__artistes { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.carte-voix__artistes b { font-weight: 600; color: var(--ink); }
.carte-voix__artistes i { color: var(--muted); }
.carte-voix__lead { max-width: 40rem; margin: calc(-1 * var(--space-s)) auto var(--space-l); text-align: center; color: var(--ink-soft); }
.carte-voix .agenda-carte.contact-carte { margin-top: 0; }
/* la liste des lieux à gauche, les cartes à droite ; la colonne de la liste prend la hauteur des cartes
   (contain: size) et défile. Sur téléphone, les cartes restent au-dessus et la liste se lit en entier. */
@media (min-width: 761px) {
  .carte-voix .agenda-carte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .carte-voix__cartes { order: 2; }
  .carte-voix__liste { align-self: stretch; contain: size; display: flex; flex-direction: column; }
  .carte-voix .contact-carte__adresses { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-right: .4rem; }
}
.chiffres + .carte-voix { margin-top: var(--space-2xl); }
.carte-voix .contact-carte__adresses li .carte-voix__artistes li { display: block; padding: 0; border-radius: 0; background: none; }
.carte-voix__artistes li + li { margin-top: .2rem; }
.carte-voix .c-togo { --c: var(--magenta); }
/* le Québec et le Togo : deux petites cartes côte à côte sous la carte de France, à peu près à la même échelle
   à l'écran (48 unités chacune, contre 100 pour la France) ; elles s'allument après les lieux de France. Avec le
   script, elles entrent dans le dessin de la France (carte-agenda.js) : cette grille ne sert qu'en son absence. */
.carte-loin { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); margin-top: var(--space-s); }

/* « Nous écrire » en fenêtre : le formulaire de contact/index.php, aux couleurs de la page Contact */
.ecrire-fenetre { width: min(44rem, calc(100% - 2rem)); }
.ecrire-fenetre[open] { display: flex; flex-direction: column; }
.ecrire-fenetre__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -.5rem; padding: .5rem; }
.ecrire-fenetre .ecrire { margin: 0; }
.ecrire-fenetre .ecrire__titre { padding-right: 3rem; font-size: var(--step-3); }
.ecrire-fenetre .envoye:focus { outline: none; }
.ecrire-fenetre__attente { margin: 0; padding: var(--space-xl) 0; text-align: center; color: var(--muted); }
.ecrire-fenetre[aria-busy="true"] .formulaire { opacity: .6; transition: opacity .2s; }
@media (prefers-reduced-motion: no-preference) {
  .ecrire-fenetre[open] .ecrire > * { animation: fiche-monte .5s cubic-bezier(.22, 1, .36, 1) both; }
  .ecrire-fenetre[open] .ecrire > :nth-child(2) { animation-delay: .06s; }
}
@media (max-width: 640px) { .ecrire-fenetre { padding: var(--space-l) var(--space-m); } }

/* Le prochain mardi (accueil) : un badge fixé en bas à droite, la photo de l'artiste au centre, « Prochain mardi » et
   la date sur un anneau qui tourne au défilement (d'après Idées HTML/badge-rotatif.html ; rempli par recits.js). Sous
   l'en-tête (z-index 50) et le menu, au-dessus du reste. */
.badge-rotatif {
  --badge-taille: 7.5rem;
  --badge-marge: 1.5rem;
  position: fixed; right: var(--badge-marge); bottom: var(--badge-marge); z-index: 40;
  width: var(--badge-taille); height: var(--badge-taille);
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; text-decoration: none;
  background: color-mix(in srgb, var(--night) 74%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgb(23 17 46 / .35), inset 0 0 0 1px rgb(255 255 255 / .18);
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.badge-rotatif[hidden] { display: none; }
.badge-rotatif:hover { transform: scale(1.06); box-shadow: 0 12px 36px rgb(23 17 46 / .45), inset 0 0 0 1px rgb(255 255 255 / .25); }
.badge-rotatif:focus-visible { outline: 3px solid var(--c-saison); outline-offset: 6px; }
.badge-rotatif__anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.badge-rotatif__chemin { fill: none; stroke: none; }
.badge-rotatif__texte { fill: currentColor; font: 700 7px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.badge-rotatif__photo { width: 56%; height: 56%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c-saison); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.badge-rotatif:hover .badge-rotatif__photo { transform: scale(1.08); }
@media (max-width: 480px) { .badge-rotatif { --badge-taille: 6.25rem; --badge-marge: 1rem; } }
@media (prefers-reduced-motion: reduce) { .badge-rotatif, .badge-rotatif__photo { transition: none; } }