#kg-future-residence {
--kg-bg: #05070b;
--kg-panel: rgba(11, 16, 24, 0.78);
--kg-panel-2: rgba(15, 21, 31, 0.88);
--kg-line: rgba(120, 165, 255, 0.16);
--kg-line-strong: rgba(120, 165, 255, 0.34);
--kg-text: #eef3ff;
--kg-muted: #98a6c7;
--kg-cyan: #71e9ff;
--kg-blue: #6c8cff;
--kg-violet: #9f7bff;
--kg-pink: #ff68d6;
--kg-glow: 0 0 24px rgba(113, 233, 255, 0.18), 0 0 60px rgba(108, 140, 255, 0.12);
--kg-radius-xl: 28px;
--kg-radius-lg: 22px;
--kg-radius-md: 18px;
--kg-max: 1240px;
position: relative;
color: var(--kg-text);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
padding: 28px 16px;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
}
#kg-future-residence * {
box-sizing: border-box;
}
#kg-future-residence .kg-wrap {
max-width: var(--kg-max);
margin: 0 auto;
position: relative;
z-index: 2;
}
#kg-future-residence .kg-bg-orb,
#kg-future-residence .kg-bg-orb-2,
#kg-future-residence .kg-bg-orb-3 {
position: absolute;
border-radius: 999px;
filter: blur(70px);
pointer-events: none;
opacity: 0.55;
z-index: 0;
animation-duration: 14s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#kg-future-residence .kg-bg-orb {
width: 340px;
height: 340px;
top: -80px;
left: -80px;
background: radial-gradient(circle, rgba(113,233,255,0.26) 0%, rgba(113,233,255,0) 70%);
animation-name: kgFloatA;
}
#kg-future-residence .kg-bg-orb-2 {
width: 420px;
height: 420px;
right: -120px;
top: 160px;
background: radial-gradient(circle, rgba(159,123,255,0.20) 0%, rgba(159,123,255,0) 70%);
animation-name: kgFloatB;
}
#kg-future-residence .kg-bg-orb-3 {
width: 360px;
height: 360px;
left: 28%;
bottom: -120px;
background: radial-gradient(circle, rgba(255,104,214,0.16) 0%, rgba(255,104,214,0) 70%);
animation-name: kgFloatC;
}
#kg-future-residence .kg-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(113,233,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(113,233,255,0.05) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 78%, rgba(0,0,0,0) 100%);
opacity: 0.22;
z-index: 0;
pointer-events: none;
animation: kgGridShift 18s linear infinite;
}
#kg-future-residence .kg-noise-line {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 0%, rgba(113,233,255,0.06) 48%, rgba(113,233,255,0.15) 50%, rgba(113,233,255,0.06) 52%, transparent 100%);
transform: translateX(-100%);
pointer-events: none;
z-index: 1;
animation: kgScan 9s linear infinite;
opacity: 0.45;
}
#kg-future-residence .kg-hero {
position: relative;
overflow: hidden;
border: 1px solid var(--kg-line);
border-radius: 34px;
padding: 40px 30px 34px;
background:
radial-gradient(circle at top left, rgba(113,233,255,0.10), transparent 30%),
radial-gradient(circle at top right, rgba(159,123,255,0.08), transparent 30%),
linear-gradient(180deg, rgba(14,20,30,0.86) 0%, rgba(8,12,19,0.94) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 0 0 1px rgba(113,233,255,0.03),
0 20px 60px rgba(0,0,0,0.28),
var(--kg-glow);
margin-bottom: 24px;
animation: kgRevealUp 0.8s ease both;
}
#kg-future-residence .kg-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, transparent 0%, rgba(113,233,255,0.06) 24%, transparent 40%),
linear-gradient(300deg, transparent 0%, rgba(255,104,214,0.04) 18%, transparent 34%);
pointer-events: none;
animation: kgPulseLight 8s ease-in-out infinite;
}
#kg-future-residence .kg-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--kg-cyan);
border: 1px solid rgba(113,233,255,0.18);
border-radius: 999px;
padding: 8px 14px;
background: rgba(9,16,26,0.7);
backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
#kg-future-residence .kg-kicker::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--kg-cyan);
box-shadow: 0 0 14px rgba(113,233,255,0.9);
animation: kgBlink 2s ease-in-out infinite;
flex: 0 0 8px;
}
#kg-future-residence h1,
#kg-future-residence h2,
#kg-future-residence h3,
#kg-future-residence h4,
#kg-future-residence p {
margin: 0;
}
#kg-future-residence h1 {
font-size: clamp(34px, 6vw, 74px);
line-height: 0.95;
margin-top: 18px;
letter-spacing: -0.045em;
text-transform: uppercase;
max-width: 980px;
}
#kg-future-residence .kg-gradient-text {
background: linear-gradient(90deg, #ffffff 0%, #b9e9ff 26%, #9faeff 58%, #ff9cea 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
#kg-future-residence .kg-subtitle {
margin-top: 18px;
max-width: 920px;
font-size: 17px;
color: var(--kg-muted);
}
#kg-future-residence .kg-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
#kg-future-residence .kg-tags span {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(113,233,255,0.14);
background: rgba(8,12,20,0.72);
color: #dbe7ff;
font-size: 13px;
backdrop-filter: blur(8px);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#kg-future-residence .kg-tags span:hover {
transform: translateY(-2px);
border-color: rgba(113,233,255,0.34);
box-shadow: 0 0 22px rgba(113,233,255,0.08);
}
#kg-future-residence .kg-section {
margin-top: 22px;
position: relative;
animation: kgRevealUp 0.9s ease both;
}
#kg-future-residence .kg-section-title {
font-size: clamp(24px, 3vw, 38px);
line-height: 1.02;
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: 10px;
}
#kg-future-residence .kg-section-intro {
color: var(--kg-muted);
max-width: 860px;
font-size: 16px;
margin-bottom: 22px;
}
#kg-future-residence .kg-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 20px;
}
#kg-future-residence .kg-panel {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(13,19,29,0.82) 0%, rgba(8,12,20,0.92) 100%);
border: 1px solid var(--kg-line);
border-radius: var(--kg-radius-xl);
padding: 26px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.03),
0 18px 50px rgba(0,0,0,0.28);
backdrop-filter: blur(10px);
}
#kg-future-residence .kg-panel::after {
content: "";
position: absolute;
inset: auto -20% 0 auto;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(113,233,255,0.10), rgba(113,233,255,0) 72%);
pointer-events: none;
animation: kgFloatA 12s ease-in-out infinite;
}
#kg-future-residence .kg-panel-title {
font-size: 14px;
letter-spacing: 0.2em;
color: var(--kg-cyan);
text-transform: uppercase;
margin-bottom: 14px;
}
#kg-future-residence .kg-timeline {
display: grid;
gap: 14px;
}
#kg-future-residence .kg-step {
position: relative;
padding: 18px 18px 18px 22px;
border-radius: 18px;
background: rgba(12, 18, 28, 0.78);
border: 1px solid rgba(113,233,255,0.10);
overflow: hidden;
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#kg-future-residence .kg-step::before {
content: "";
position: absolute;
left: 0;
top: 16px;
bottom: 16px;
width: 2px;
background: linear-gradient(180deg, var(--kg-cyan) 0%, var(--kg-violet) 100%);
box-shadow: 0 0 14px rgba(113,233,255,0.32);
}
#kg-future-residence .kg-step::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(113,233,255,0.06), transparent 28%);
opacity: 0.45;
pointer-events: none;
}
#kg-future-residence .kg-step:hover {
transform: translateY(-4px);
border-color: rgba(113,233,255,0.22);
box-shadow: 0 0 26px rgba(113,233,255,0.06);
}
#kg-future-residence .kg-month {
display: inline-block;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kg-cyan);
margin-bottom: 8px;
}
#kg-future-residence .kg-step h4 {
font-size: 20px;
line-height: 1.08;
margin-bottom: 8px;
color: #f5f8ff;
text-transform: uppercase;
letter-spacing: -0.02em;
}
#kg-future-residence .kg-step p {
color: var(--kg-muted);
font-size: 14px;
}
#kg-future-residence .kg-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 20px;
}
#kg-future-residence .kg-card {
position: relative;
min-height: 290px;
overflow: hidden;
border-radius: 24px;
padding: 24px 22px;
background:
linear-gradient(180deg, rgba(14,20,30,0.84) 0%, rgba(9,13,22,0.96) 100%);
border: 1px solid rgba(113,233,255,0.11);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.03),
0 20px 50px rgba(0,0,0,0.24);
transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
animation: kgRevealUp 0.95s ease both;
}
#kg-future-residence .kg-card:hover {
transform: translateY(-6px);
border-color: rgba(113,233,255,0.24);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.03),
0 26px 70px rgba(0,0,0,0.32),
0 0 30px rgba(113,233,255,0.08);
}
#kg-future-residence .kg-card::before {
content: "";
position: absolute;
top: -40%;
right: -20%;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(113,233,255,0.12) 0%, rgba(113,233,255,0) 72%);
animation: kgFloatB 12s ease-in-out infinite;
pointer-events: none;
}
#kg-future-residence .kg-card::after {
content: "";
position: absolute;
left: -20%;
bottom: -20%;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(159,123,255,0.08) 0%, rgba(159,123,255,0) 72%);
animation: kgFloatC 10s ease-in-out infinite;
pointer-events: none;
}
#kg-future-residence .kg-card-label {
display: inline-block;
margin-bottom: 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--kg-cyan);
}
#kg-future-residence .kg-card h3 {
font-size: 28px;
line-height: 0.98;
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: 14px;
}
#kg-future-residence .kg-card p {
font-size: 15px;
color: var(--kg-muted);
}
#kg-future-residence .kg-card-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(113,233,255,0.10);
color: #d7e4ff;
font-size: 13px;
letter-spacing: 0.03em;
}
#kg-future-residence .kg-highlight {
margin-top: 22px;
position: relative;
overflow: hidden;
border-radius: 28px;
padding: 30px 24px;
border: 1px solid rgba(113,233,255,0.14);
background:
radial-gradient(circle at 20% 20%, rgba(113,233,255,0.12), transparent 32%),
radial-gradient(circle at 90% 10%, rgba(255,104,214,0.08), transparent 28%),
linear-gradient(180deg, rgba(11,17,26,0.94) 0%, rgba(6,10,17,0.98) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.03),
0 18px 50px rgba(0,0,0,0.28),
0 0 28px rgba(113,233,255,0.05);
}
#kg-future-residence .kg-highlight::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 0%, rgba(113,233,255,0.05) 24%, transparent 48%, rgba(159,123,255,0.04) 74%, transparent 100%);
animation: kgShimmer 8s linear infinite;
pointer-events: none;
}
#kg-future-residence .kg-highlight h2 {
font-size: clamp(24px, 3vw, 36px);
line-height: 1.02;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: -0.03em;
}
#kg-future-residence .kg-highlight p {
color: var(--kg-muted);
font-size: 16px;
max-width: 980px;
}
#kg-future-residence .kg-footer-note {
margin-top: 16px;
color: #7081a8;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
opacity: 0.8;
}
@keyframes kgRevealUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes kgFloatA {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(18px, -12px, 0) scale(1.04); }
}
@keyframes kgFloatB {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-18px, 14px, 0) scale(1.05); }
}
@keyframes kgFloatC {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(10px, -16px, 0) scale(1.03); }
}
@keyframes kgBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.8); }
}
@keyframes kgScan {
0% { transform: translateX(-100%); opacity: 0; }
12% { opacity: 0.35; }
50% { opacity: 0.5; }
100% { transform: translateX(100%); opacity: 0; }
}
@keyframes kgGridShift {
0% { transform: translateY(0); }
50% { transform: translateY(10px); }
100% { transform: translateY(0); }
}
@keyframes kgPulseLight {
0%, 100% { opacity: 0.65; }
50% { opacity: 1; }
}
@keyframes kgShimmer {
0% { transform: translateX(-40%); opacity: 0.4; }
50% { opacity: 0.8; }
100% { transform: translateX(40%); opacity: 0.4; }
}
@media (max-width: 980px) {
#kg-future-residence .kg-split,
#kg-future-residence .kg-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
#kg-future-residence {
padding: 18px 6px;
}
#kg-future-residence .kg-hero,
#kg-future-residence .kg-panel,
#kg-future-residence .kg-card,
#kg-future-residence .kg-highlight {
padding: 22px 16px;
}
#kg-future-residence h1 {
font-size: 34px;
}
#kg-future-residence .kg-subtitle,
#kg-future-residence .kg-section-intro,
#kg-future-residence .kg-highlight p {
font-size: 15px;
}
#kg-future-residence .kg-card h3 {
font-size: 24px;
}
}
Résidence artistique · Institut français de Casablanca · juin, Juillet 2026
Casablanca
protocoles, mémoires,
interfaces.
En juin juillet 2026, je développerai à l’Institut français de Casablanca une résidence construite autour du
creative coding, de la fabrication numérique, de la mémoire urbaine
et des savoir-faire locaux. Pensée comme un laboratoire vivant, cette résidence articulera recherche,
production, workshops, documentation et restitution à travers plusieurs œuvres ancrées dans l’énergie de Casablanca.
121 Bd Mohammed Zerktouni
Mars → Juillet 2026
Creative Coding
Textile / Data
Installation
Impression 3D
Calendrier de résidence
Une montée en intensité progressive : cadrage, premières formes, prototypage, finalisation,
puis activation sur place à Casablanca.
Mars → Juillet 2026
Mars 2026
Cadrage
Définition des axes curatoriaux, organisation des priorités, premiers échanges partenaires,
besoins techniques, structure générale de la résidence et cadre de production pour les projets.
Avril 2026
Premières formes
Recherches visuelles, premières maquettes, tests de scénographies, de matières, de palettes,
d’interfaces et de logiques de matérialisation.
Mai 2026
Prototypage
Fabrication, essais d’objets, intégration d’outils, premiers prototypes et mise en forme
concrète des usages, des volumes et des interactions.
Juin 2026
Finalisation pré-résidence
Consolidation des prototypes, préparation des ateliers, supports de présentation,
organisation technique et logistique de la production sur place.
Juillet 2026
Résidence à Casablanca
Immersion, production, médiation, documentation et restitution.
Les œuvres prennent forme dans un dialogue direct avec la ville, les publics et les partenaires.
Juillet 2026 · Structure sur place
01
Immersion
Installation, repérages, collecte de textures et d’ambiances, calibration des outils,
observation du terrain et ajustement du rythme réel de la résidence.
02
Production
Développement intensif des œuvres, intégration technique, fabrication,
réglages et mise en espace des premiers dispositifs.
03
Médiation
Workshops, expérimentations partagées, rencontres avec les publics,
écoles, fablabs et partenaires autour des outils et des processus de création.
04
Restitution
Documentation, captation, mise en ligne, présentation intermédiaire
et préparation des futurs déploiements au Maroc et au-delà.
Projets développés pendant la résidence
Trois trajectoires artistiques structureront cette présence à Casablanca :
données, ville, mémoire, matière, fiction et fabrication.
Data · textile · creative coding
DATA RUG
PROTOCOL
Un protocole de création qui transforme les données climatiques en formes visuelles et textiles.
Développé à Casablanca comme œuvre pilote, le projet se déploiera en génération d’images,
en impression 3D, en médiation et en production textile physique.
Installation · mémoire urbaine
KOUTCHI
Une œuvre-installation qui aborde la charrette comme interface de mémoire urbaine.
Entre archive vivante, présence sculpturale et narration spatiale, le projet explore les récits
invisibles de la ville et les formes populaires de mobilité.
Arcade · culture populaire · chaos urbain
HEY TAXI
Une installation immersive inspirée du petit taxi marocain.
À la croisée du jeu vidéo, de l’anthropologie urbaine et de l’esthétique vernaculaire,
le projet détourne la borne d’arcade pour proposer une expérience locale, physique et vivante.
Une résidence entre production, transmission et déploiement
Cette résidence n’est pas uniquement un temps de fabrication. Elle fonctionne comme une plateforme
d’expérimentation, de circulation et d’activation. Les œuvres développées à Casablanca ont vocation
à dialoguer ensuite avec d’autres antennes de l’Institut français du Maroc, avec des écoles de design,
des artisans, des fablabs et de futurs contextes de diffusion au Maroc, en Afrique et à l’international.
