Phénix Style Guide

Elements

Fonts

Poppins Light

font-light

Poppins Regular

font-normal

Poppins Semibold

font-semibold

= body's font

Poppins Bold

font-bold

Colors

#F00E0E

bg-red-500

text-red-500

#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-red-500 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-red-500 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-red-500 hover:text-red-500;
	&--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-red-500 hover:text-red-500;
	&--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-red-500 hover:text-red-500;
	&--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-red-500 hover:text-red-500;
    &--rect{
        @apply border;
    }
	&--bg-red{
        @apply bg-red-500 border-red-500 hover:text-red-500 hover:bg-white;
        &--negative{
            @apply text-red-500 border-red-500 hover:text-white hover:bg-red-500;
        }
    }
}
.sl-button-padding{
    @apply px-3 py-1;
}

<button class="sl-button-txt-content--uppercase sl-button sl-button--circle sl-button--bg-light-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-light-opacity (absolute top-5 right-5)">Réserver</button>

.sl-button{
	@apply border flex items-center justify-center hover:border-red-500 hover:text-red-500;
	&--circle{
		@apply border w-[8.25rem] h-[8.25rem] rounded-full;
	}
	&--white{
		@apply border border-white text-white hover:border-red-500 hover:text-red-500;
	}
	&--bg-light-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-red-500 border-red-500;
	}
	&--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-red-500;
	}
}

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© Albert Malevich


<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-red-500"></i>
</div>

page news (home)

news

<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:

artiste associé

<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

crédits

Swipers

Slideshow hero:

Slideshow footer (bleed/w-full)

Slideshow single (all medias)

nextfestival

Modale swiper single

Voir aussi

Date picker


{% include 'partials/datepicker.twig' %}

Specifics

Follow us

Suivez-nous

Footer

Footer desktop

Prev/next + agenda

Événement précédent agenda Événement suivant

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

Pôle européen de création

Campus Amiens-Valenciennes

coproduction

En collaboration avec l'oiseau-mouche

Audio/vidéo modal

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