Fonts
Poppins Light
font-light
Poppins Regular
font-normal
Poppins Semibold
font-semibold
= body's font
Poppins Bold
font-bold
scène nationale valenciennes
Phénix Style Guide
Elements
Colors
#F00E0E
bg-primary
text-primary
#D0D0D0
bg-gray-100
text-gray-100
#707070
bg-gray-500
text-gray-500
#FFFFFF
bg-white
text-white
sl-text-shadow
#000000
bg-black
text-black
Festivals colors
custom banner under slideshow (single):
loustix en fête
<h4 class="sl-card-title--white sl-padding bg-[#00FFFF]">loustix en fête</h4>
custom background slideshow with right padding/bleed (single) (+ add slideshow):
<div class="sl-slideshow-bleed bg-[#00FFFF]/20 w-full h-24"></div>
Typography
Headings
h1 – slideshow home + single:
< 1536px – font-size: 2.25rem; (36px) line-height: 2.5rem; (40px)
> 1536px – font-size: 4.5rem; (72px) line-height: 1;
Carte Noire nommée désir
Carte Noire nommée désir
Carte Noire nommée désir
Carte Noire nommée désir
<h1 class="sl-main-title">Carte Noire nommée désir</h1>
<h1 class="sl-main-title"><em>Carte Noire nommée désir</em></h1>
<h1 class="sl-main-title"><strong>Carte Noire nommée désir</strong></h1>
<h1 class="sl-main-title"><b><i>Carte Noire nommée désir</i></b></h1>
.sl-main-title, h1{
@apply text-4xl 2xl:text-7xl;
}
h2 – slideshow home + single:
< 1536px – font-size: 1.875rem; (30px) line-height: 2.25rem (36px);
> 1536px – font-size: 3.75rem; (60px) line-height: 1;
Carte Noire nommée désir
<h2 class="sl-main-title">Carte Noire nommée désir</h2>
.sl-main-subtitle, h2{
@apply font-normal text-3xl 2xl:text-6xl;
}
h3 – homepage sections:
< 1536px – font-size: 2.25rem; (36px) line-height: 2.5rem; (40px)
> 1536px – font-size: 3rem; (48px) line-height: 1;
prochainement
<h3 class="sl-section-title--red">prochainement</h3>
.sl-section-title, h3{
@apply text-4xl 2xl:text-5xl;
&--red{
@apply text-4xl 2xl:text-5xl text-primary lowercase;
}
}
h4 – news & shows card titles:
font-size: 1.875rem; (30px) line-height: 2.25rem; (36px)
Royal Street
avec vous
<h4 class="sl-card-title">Royal Street</h4>
<h4 class="sl-card-title--white">avec vous</h4>
.sl-card-title, h4{
@apply text-xl 2xl:text-3xl;
&--white{
@apply text-xl 2xl:text-3xl text-white;
}
}
h5 – author/card subtitles:
font-size: 1rem; (16px) line-height: 1.5rem; (24px)
David Clavel
Théâtre
<h5 class="sl-card-subtitle">David Clavel</h5>
<h5 class="sl-card-subtitle--uppercase">Théâtre</h5>
.sl-card-subtitle, h5{
@apply text-base;
&--uppercase{
@apply text-base uppercase;
}
}
h6 – accordions titles:
< 1536px – font-size: 1.5rem; (24px) line-height: 2rem; (32px)
> 1536px – font-size: 1.875rem; (30px) line-height: 2.25rem; (36px)
Infos / Tarifs
<h6 class="sl-accordion-title">Infos / Tarifs</h6>
.sl-accordion-title, h6{
@apply text-2xl 2xl:text-3xl lowercase;
}
Paragraphs
all paragraphs:
< 1536px – font-size: 1rem; (16px) line-height: 1.5rem; (24px)
> 1536px – font-size: 1.25rem; (20px)
Au commencement : une blague en forme de point d’interrogation sur les boissons chaudes, le colorisme et le colonialisme. Elle devient la fabrication d’une communauté sur scène entamant un voyage initiatique poétique de réappropriation de leur Histoire de femmes noires dans un pays qui n’est pas décolonisé de ses imaginaires.
Ensemble, les huit interprètes multiples mais unifiées, se transforment sans cesse, elles sont des Alices trop souvent inadaptées au monde et glissent dans un long tunnel avec à chaque bout, leur affreux-passé et leur afro-futur. Une tentative d’œuvre performative d’empuissancement qui n’épargne ni les oreilles ni les yeux.
<p class="sl-paragraph">Au commencement : une blague en forme de point […]</p>
.sl-paragraph, p{
@apply font-normal text-base 2xl:text-xl 2xl:leading-8;
}
Blockquotes
blockquotes single artists:
< 1536px – font-size: 1.25rem; (20px) line-height: 1.75rem; (28px)
> 1536px – font-size: 2.25rem; (36px) line-height: 2.5rem; (40px)
J’ai toujours été un grand lecteur. Dès mon plus jeune âge j’avais envie de vivre au milieu des textes et de la littérature.
<blockquote class="sl-blockquote">J’ai toujours été un grand lecteur.</blockquote>
.sl-blockquote{
@apply text-xl italic 2xl:text-4xl font-normal;
}
Dates
dates sidebar:
< 1536px – font-size: 1.25rem; (20px) line-height: 1.75rem; (28px)
> 1536px – font-size: 3rem; (48px) line-height: 1;
Je 03 Sa 05 jan
Je 05 jan 20:30
<div>
<p class="sl-date">Je
<span>03</span>
<i class="fa-light fa-angle-right"></i>
Sa
<span>05 jan</span></p>
</div>
<div>
<p class="sl-date">Je
<span>05 jan</span> 20:30</p>
</div>
.sl-date{
@apply font-light text-3xl 2xl:text-5xl uppercase;
span{
@apply font-semibold text-primary lowercase;
}
}
dates slideshow home:
< 1536px – font-size: 1.25rem; (20px) line-height: 1.75rem; (28px)
> 1536px – font-size: 3rem; (48px) line-height: 1;
Je 03 SA 05 jan
<div>
<p class="sl date sl-date--white">Je 03
<i class="fa-light fa-angle-right"></i>
Sa 05 jan</p>
</div>
.sl-date{
@apply font-light text-3xl 2xl:text-5xl uppercase;
&--white{
@apply text-white;
text-shadow: 2px 2px 2px rgba(208, 208, 208, 0.5);
}
}
Buttons
three shapes:
<button class="sl-button-txt-content--uppercase sl-button sl-button-padding">Réserver</button>
.sl-button{
@apply flex items-center justify-center hover:border-primary hover:text-primary;
&--rect{
@apply border;
}
}
.sl-button-padding{
@apply px-3 py-1;
}
<button class="sl-button-txt-content--uppercase sl-button--rounded sl-button-padding">Réserver</button>
.sl-button{
@apply flex items-center justify-center hover:border-primary hover:text-primary;
&--rounded{
@apply rounded-full;
}
}
.sl-button-padding{
@apply px-3 py-1;
}
<button class="sl-button-txt-content--uppercase sl-button--circle">Réserver</button>
.sl-button{
@apply flex items-center justify-center hover:border-primary hover:text-primary;
&--circle{
@apply border w-[8.25rem] h-[8.25rem] rounded-full;
}
}
two background colors:
<button class="sl-button-txt-content--uppercase sl-button--white sl-button--rect sl-button-padding sl-button--bg-red">Filtres</button>
.sl-button{
@apply flex items-center justify-center hover:border-primary hover:text-primary;
&--rect{
@apply border;
}
&--bg-red{
@apply bg-primary border-primary hover:text-primary hover:bg-white;
&--negative{
@apply text-primary border-primary hover:text-white hover:bg-primary;
}
}
}
.sl-button-padding{
@apply px-3 py-1;
}
<button class="sl-button-txt-content--uppercase sl-button sl-button--circle sl-button--bg-white-opacity (absolute top-5 left-5)">Réserver</button>
<button class="sl-button-txt-content--uppercase sl-button--white sl-button--circle sl-button--bg-white-opacity (absolute top-5 right-5)">Réserver</button>
.sl-button{
@apply border flex items-center justify-center hover:border-primary hover:text-primary;
&--circle{
@apply border w-[8.25rem] h-[8.25rem] rounded-full;
}
&--white{
@apply border border-white text-white hover:border-primary hover:text-primary;
}
&--bg-white-opacity{
@apply bg-gray-100/30;
}
}
Button text content:
1536px – font-size: 1rem; (16px) line-height: 1.5rem; (24px)
1.125rem; (18px) line-height: 1.75rem; (28px)
<button class="sl-button-txt-content">Réserver</button>
<button class="sl-button-txt-content--uppercase">Réserver</button>
<button class="sl-button-txt-content--lowercase">Réserver</button>
.sl-button-txt-content{
@apply text-xl font-normal inline-block;
&--uppercase{
@apply uppercase;
}
&--lowercase{
@apply lowercase;
}
}
Push page (home):
font-size: 1.5rem; (24px) line-height: 2rem; (32px)
family 100% famille +12 ans atelier nomade
<button class="sl-button--show-more">sl-show-more-button</button>
.sl-button--show-more{
@apply text-2xl font-semibold inline-block;
}
Labels & Inputs
Label:
font-size: 1.125rem; (18px) line-height: 1.75rem; (28px)
<label class="sl-filter">
<span class="sl-filter--label">Théâtre</span>
<input type="radio" checked="checked" name="radio">
<span class="sl-filter--checkbox"></span>
</label>
.sl-filter{
@apply relative select-none flex items-center;
input{
@apply absolute opacity-0 w-0 h-0;
}
&--checkbox{
@apply border w-4 h-4 border-black absolute inset-1/2 left-0 -translate-y-1/2;
}
input:checked ~ .sl-filter--checkbox{
@apply bg-primary border-primary;
}
&--label{
@apply ml-6 text-lg font-normal;
}
}
Fake select (+ modal later with alpine):
font-size: 1.5rem; (24px) line-height: 2rem; (32px)
<button class="sl-select">22–23<i class="fa-light fa-angle-down text-2xl ml-4"></i></button>
.sl-select{
@apply font-normal text-2xl;
}
Search: (NB: clear outline)
font-size: 1.25rem; (20px) line-height: 1.75rem; (28px)
<input type="search" name="" id="" placeholder="Rechercher" class="sl-search">
<button>
<i class="fa-light fa-magnifying-glass text-xl"></i>
</button>
.sl-search{
@apply border-0 px-0 py-3 font-normal text-gray-500 placeholder:uppercase text-xl;
}
Navigation
Header navigation:
< 1536px – font-size: 1.5rem; (24px) line-height: 2rem; (32px)
> 1536px – font-size: 1.875rem; (30px) line-height: 2.25rem; (36px)
<a href="#" class="sl-header-navigation">pratiques & services</a>
<a href="#" class="sl-header-navigation sl-header-navigation--red">covid</a>
<a href="#" class="sl-header-subnavigation">sous menu</a>
.sl-header-navigation{
@apply text-2xl mr-9 2xl:text-3xl;
&--subnavigation{
@apply font-normal;
}
&--red{
@apply text-primary;
}
}
Footer navigation:
font-size: 1.125rem; (18px) line-height: 1.75rem; (28px)
<a href="#" class="sl-footer-navigation">Accès / Contacts</a>
.sl-footer-navigation{
@apply text-lg mr-11;
}
Footer legals navigation:
font-size: 0.75rem; (12px) line-height: 1rem; (16px)
<a href="#" class="sl-footer-legals-navigation"> Mentions légales </a>
.sl-footer-legals-navigation {
@apply text-xs font-normal uppercase mr-2.5;
&::after{
content: "|";
@apply pl-2.5;
}
}
Images
Images in squares + half squares responsive:
<div class="sl-shape--square">
<div>
<picture>
<img src="/wp-content/themes/phenix-child/assets/img/image-1.jpeg" alt="" class="sl-shape--img-fit"/>
</picture>
</div>
</div>
.sl-shape{
&--square{
@apply w-full md:w-1/2 xl:w-1/4;
> div{
@apply w-full relative;
padding-bottom: 100%;
@media screen and (max-width: 767px){
padding-bottom: 50%;
}
}
}
&--img-fit{
@apply absolute top-0 left-0 object-cover object-center;
}
}
Same images in squareswith inline dynamical gradient:
<div class="sl-shape--square">
<div>
<picture>
<img src="/wp-content/themes/phenix-child/assets/img/image-1.jpeg" alt="" class="sl-shape--img-fit"/>
</picture>
<div class="sl-shape--bg-gradient-light-opacity-absolute from-[#0E54F0] to-transparent"></div>
</div>
</div>
.sl-shape{
&--bg-gradient-light-opacity-absolute{
@apply absolute top-0 left-0 w-full h-full opacity-50 bg-gradient-to-t;
}
}
Images in circles:
<div class="sl-shape--rounded">
<div>
<picture>
<img src="/wp-content/themes/phenix-child/assets/img/image-1.jpeg" alt="" class="sl-shape--img-fit"/>
</picture>
</div>
</div>
.sl-shape{
&--rounded{
@apply w-full md:w-1/2 xl:w-1/4;
> div{
@apply w-full relative;
padding-bottom: 100%;
}
img{
@apply rounded-full;
}
}
&--img-fit{
@apply absolute top-0 left-0 object-cover object-center;
}
}
Images in 16/9:
<div class="sl-shape--screen">
<div>
<picture>
<img src="/wp-content/themes/phenix-child/assets/img/image-1.jpeg" alt="" class="sl-shape--img-fit"/>
</picture>
</div>
</div>
.sl-shape {
&--screen {
> div{
@apply w-full relative;
padding-bottom: 56.25%;
}
}
&--img-fit{
@apply absolute top-0 left-0 object-cover object-center;
}
}
Custom format (banner):
<div class="sl-shape--banner">
<div>
<picture>
<img src="/wp-content/themes/phenix-child/assets/img/image-1.jpeg" alt="" class="sl-shape--img-fit"/>
</picture>
</div>
</div>
.sl-shape{
&--banner {
> div{
@apply w-full relative;
padding-bottom: 37%;
}
}
&--img-fit{
@apply absolute top-0 left-0 object-cover object-center;
}
}
Custom grid
<div class="sl-masonry-container sl-grid-4">
<div class="sl-masonry-container--col1">
<div>
<picture>
<img src="/wp-content/themes/phenix-child/assets/img/news/news-2.png" alt=""/>
</picture>
</div>
</div>
<div class="sl-masonry-container--col2">
<div>
<picture>
<img src="/wp-content/themes/phenix-child/assets/img/news/news-3.png" alt=""/>
</picture>
</div>
</div>
</div>
.sl-grid-4{
@apply grid grid-cols-4 gap-10;
}
.sl-masonry-container{
&--col1{
@apply col-span-1;
}
&--col2{
@apply col-span-2;
}
}
Banner under slideshow (all slideshow)
Titre de la photo
<div class="flex justify-between items-center w-full sl-padding sl-background-light-opacity">
<h2 class="sl-figcaption">Titre de la photo<span class="sl-figcaption--author">© Albert Malevich</h2>
<i class="fa-light fa-compress-wide text-2xl mr-2 text-white"></i>
</div>
.sl-figcaption{
@apply text-xl text-white font-semibold;
&--author{
@apply font-normal;
}
}
.sl-background-light-opacity{
@apply bg-gray-100/30;
}
.sl-padding{
@apply px-7 py-3;
}
Icons
Customs icons:
Home icon – footer-navigation
path: './assets/img/svg/home.svg'
Crosses
path: './assets/img/svg/red-cross.svg'
path: './assets/img/svg/black-cross.svg'
Plus
path: './assets/img/svg/black-plus.svg'
Cursors
body{
cursor: url("../img/svg/cursor-default.svg") 25 15, auto;
}
a, button, label, input{
cursor: url("../img/svg/cursor-pointer.svg") 25 15, auto;
}
Fontawesome icons:
<i class="fa-light fa-globe text-2xl"></i>
<i class="fa-brands fa-behance text-2xl"></i>
<i class="fa-brands fa-facebook-square text-2xl"></i>
<i class="fa-brands fa-linkedin text-2xl"></i>
<i class="fa-brands fa-instagram text-2xl"></i>
<i class="fa-brands fa-pinterest text-2xl"></i>
<i class="fa-brands fa-snapchat text-2xl"></i>
<i class="fa-brands fa-twitter text-2xl"></i>
<i class="fa-brands fa-vimeo-v text-2xl"></i>
<i class="fa-brands fa-yelp text-2xl"></i>
<i class="fa-brands fa-youtube text-2xl"></i>
<i class="fa-brands fa-flickr text-2xl"></i>
<i class="fa-brands fa-dailymotion text-2xl"></i>
<i class="fa-light fa-bars text-2xl"></i>
<i class="fa-light fa-file-lines text-xl"></i>
<i class="fa-light fa-calendar text-xl"></i>
<i class="fa-light fa-ticket text-2xl"></i>
<i class="fa-light fa-angle-down text-2xl"></i>
<i class="fa-light fa-angle-right text-2xl"></i>
<i class="fa-light fa-angle-left text-2xl"></i>
<i class="fa-light fa-hands text-xl"></i>
<i class="fa-light fa-lock text-xl"></i>
<i class="fa-light fa-van-shuttle text-xl"></i>
<i class="fa-light fa-person-running text-xl"></i>
<i class="fa-light fa-campground text-xl"></i>
<i class="fa-light fa-chart-network text-xl"></i>
<i class="fa-light fa-star-of-life text-xl"></i>
<i class="fa-light fa-star-sharp text-xl"></i>
<i class="fa-light fa-family text-xl"></i>
<i class="fa-light fa-puzzle-piece text-xl"></i>
<i class="fa-light fa-podcast text-xl"></i>
<i class="fa-light fa-gauge-simple-high text-xl"></i>
<i class="fa-light fa-gauge-simple-low text-xl"></i>
<i class="fa-light fa-eye-slash text-xl"></i>
<i class="fa-light fa-face-grin-tongue-squint text-xl"></i>
<i class="fa-light fa-universal-access text-xl"></i>
<i class="fa-light fa-kiwi-bird text-xl"></i>
<i class="fa-light fa-clock text-xl"></i>
<i class="fa-light fa-compress-wide text-2xl"></i>
<i class="fa-light fa-gear text-xl"></i>
<i class="fa-light fa-car-side text-xl"></i>
<class="fa-solid fa-microphone text-xl mr-2"></i>
<class="fa-solid fa-play text-xl mr-2"></i>
<i class="fa-light fa-audio-description"></i>
<i class="fa-light fa-ear-deaf"></i>
<i class="fa-light fa-family"></i>
<i class="fa-light fa-location-xmark"></i>
<i class="fa-solid fa-child-reaching"></i>
<i class="fa-solid fa-book"></i>
In use:
Header search and burger:
<div class="flex items-center">
<button class="mr-4">
<i class="fa-light fa-magnifying-glass text-xl relative -top-[2px]"></i>
</button>
<button id="burger-icon">
<i class="fa-light fa-bars text-2xl"></i>
</button>
</div>
Socials:
<div class="flex items-center">
<a href="#" target="_blank">
<i class="fa-brands fa-facebook-square text-4xl mr-12"></i>
</a>
<a href="#" target="_blank">
<i class="fa-brands fa-twitter text-4xl mr-12"></i>
</a>
<a href="#" target="_blank">
<i class="fa-brands fa-instagram text-4xl mr-12"></i>
</a>
</div>
Footer navigation:
<div class="flex items-baseline">
<a href="#" class="sl-footer-navigation flex items-center">
// add include "home.svg" './assets/img/svg/home.svg'
<span class="ml-6">Accès / Contact</span>
</a>
<a href="#" class="sl-footer-navigation flex items-center" target="_blank">
<i class="fa-light fa-ticket text-2xl"></i>
<span class="ml-6">Billeterie</span>
</a>
</div>
<div class="flex items-baseline">
<a href="#" class="sl-footer-navigation flex items-center">
<i class="fa-light fa-lock text-xl"></i>
<span class="ml-6">enseignants</span>
</a>
<a href="#" class="sl-footer-navigation flex items-center">
<i class="fa-light fa-lock text-xl"></i>
<span class="ml-6">professionnels</span>
</a>
</div>
Arrows slideshows:
<div>
<i class="fa-light fa-angle-left text-6xl text-gray-100"></i>
<i class="fa-light fa-angle-right text-6xl text-gray-100"></i>
<i class="fa-light fa-angle-left text-6xl text-white sl-text-shadow"></i>
<i class="fa-light fa-angle-right text-6xl text-white sl-text-shadow"></i>
</div>
Prochainement + calendar:
prochainement
<div class="flex justify-between items-center">
<h3 class="sl-section-title--red">prochainement</h3>
<i class="fa-light fa-calendar text-5xl"></i>
</div>
Subtitle card + ticket
Théâtre
<div class="flex justify-between items-center">
<h5 class="sl-card-subtitle--uppercase">Théâtre</h5>
<i class="fa-light fa-ticket text-2xl hover:text-primary"></i>
</div>
page news (home)
<div>
<a href="#" class="sl-button--show-more flex items-baseline">
<i class="fa-light fa-angle-right text-2xl"></i>
<span>news</span>
</a>
</div>
Section title (single)
échauffement des spectateurs
atelier nomade
<div class="sl-section-title">
<i class="fa-light fa-person-running"></i>
<h3>échauffement des spectateurs</h3>
</div>
<div class="sl-section-title">
<i class="fa-light fa-campground"></i>
<h3>atelier nomade</h3>
</div>
Related artist:
<a href="#" class="sl-related-artist">
<i class="fa-light fa-chart-network mr-1"></i>
<span>artiste associé</span>
</a>
Components
Accordions (+ dropdown later with alpine)
Simple accordions:
< 1536px – font-size: 1.5rem; (24px) line-height: 2rem; (32px)
> 1536px – font-size: 1.875rem; (30px) line-height: 2.25rem; (36px)
Autour du spectacle
<div class="sl-accordion sl-accordion--simple">
<div>
<h6>Autour du spectacle</h6>
// add include "black-plus.svg" './assets/img/svg/black-plus.svg'
</div>
</div>
.sl-accordion{
@apply text-2xl 2xl:text-3xl;
&--simple{
@apply border-b;
> div:first-of-type{
@apply w-full flex justify-between items-center py-6 border-gray-500 border-t;
}
}
}
.sl-padding{
@apply px-7 py-3;
}
Multiples accordions:
< 1536px – font-size: 1.5rem; (24px) line-height: 2rem; (32px)
> 1536px – font-size: 1.875rem; (30px) line-height: 2.25rem; (36px)
Je 05 jan 20:30
credit
Infos / tarifs
<div class="sl-accordion sl-accordion--multiple">
<div>
<div>
<div>
<p class="sl-date">Je <span>05 jan</span> 20:30</p>
</div>
// add include "black-plus.svg" './assets/img/svg/black-plus.svg'
</div>
</div>
<div >
<div>
<h6>credit</h6>
// add include "black-plus.svg" './assets/img/svg/black-plus.svg'
</div>
</div>
</div>
.sl-accordion{
@apply text-2xl 2xl:text-3xl;
&--multiple{
> div {
&:not(:first-of-type){
@apply border-gray-500 border-t;
}
&:last-of-type{
@apply border-gray-500 border-b;
}
> div:first-of-type{
@apply w-full flex justify-between items-center py-6;
}
}
}
}
Je 03 Sa 05 jan
Le phénix Grand théâtre
Je 04 jan 20:30
Je 05 jan 20:30
Je 05 jan 20:30
infos / tarifs
€ 9/6 Tarif A
Chanté et surtitrée en FR
Audiodescription
VE 22 octobre
Phénix voyageur
04.01 – 5 € – Départ : le phénix – 18:45
Scolaires
05.01 – 10:00 – Collège Saint-Michel
06.01 – 10:00 – Collège SaintE-Marie
Covoiturage
Gradients
Grid
Swipers
Slideshow hero:
Slideshow footer (bleed/w-full)
Slideshow single (all medias)
nextfestival
Modale swiper single
Voir aussi
Voir aussi
Team
Member
Member (mobile)
Date picker
{% include 'partials/datepicker.twig' %}
Specifics
Bande défilante
Follow us
Footer
Footer mobile
Footer desktop
Prev/next + agenda
Zone texte + wp classes
Carte Noire nommée désir
Rébecca Chaillon
Artiste associé
Au commencement : une blague en forme de point d’interrogation sur les boissons chaudes, le colorisme et le colonialisme. Elle devient la fabrication d’une communauté sur scène entamant un voyage initiatique poétique de réappropriation de leur Histoire de femmes noires dans un pays qui n’est pas décolonisé de ses imaginaires.
Ensemble, les huit interprètes multiples mais unifiées, se transforment sans cesse, elles sont des Alices trop souvent inadaptées au monde et glissent dans un long tunnel avec à chaque bout, leur affreux-passé et leur afro-futur. Une tentative d’œuvre performative d’empuissancement qui n’épargne ni les oreilles ni les yeux.
Une tentative d’œuvre performative d’empuissancement qui n’épargne ni les oreilles ni les yeux.
Telerama
Une tentative d’œuvre performative d’empuissancement qui n’épargne ni les oreilles ni les yeux.
Telerama
échauffement des spectateurs
08 janvier – 18h30
Aller au spectacle, ça se prépare, alors n’hésitez pas !
Ces échauffements sont ouverts à tous dans la limite des places disponibles.
Vous êtes invités à entrer dans l’univers du spectacle auquel vous allez assister.
Ludique, participatif, ces mises en bouches ne dévoileront rien de précis, mais chercheront plutôt à vous familiariser avec un auteur, une mise en scène, un musicien ou encore un compositeur.
ou T 03 27 32 32 32
Audio/vidéo modal
Carte noire nommée désir
Pastille de présentation
Carte noire nommée désir
Pastille de présentation
Modules
Filters
Disciplines
100% Famille
Festivals / Cycles
Hors les murs
Pôle européen de création
testest