Home Admin

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/ro8lp1k5.js/"></script>

Untitled Snippet

Matin Qane

<10

Code Preview

Comments

php


	`<?php`
	`<!DOCTYPE html>`
	`<html lang="fr">`
	`<head>`
	`<meta charset="UTF-8">`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`<title>PIPAS — Biennale de Photographie Genève</title>`
	`<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap" rel="stylesheet">`
	`<style>`
	`,::before,*::after{box-sizing:border-box;margin:0;padding:0}`
	`:root{`
	`--lav:#E8E4F5;--lav2:#D8D2EE;`
	`--pur:#7C5CBF;--pur-dk:#4A2D8A;--pur-md:#B09ADE;`
	`--yel:#FFE600;--dark:#0D0B14;--wht:#FAFAF8;`
	`--sans:'Space Grotesk',system-ui,sans-serif;`
	`}`
	`html{scroll-behavior:smooth}`
	`body{background:var(--lav);color:var(--dark);font-family:var(--sans);overflow-x:hidden}`

	`nav{background:var(--pur);padding:.9rem 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;position:sticky;top:0;z-index:99}`
	`.nav-logo{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lav);background:var(--pur-dk);padding:.35rem 1rem;border-radius:100px;text-decoration:none;cursor:pointer;border:none;font-family:var(--sans)}`
	`.nav-links{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}`
	`.nav-links button{font-size:.82rem;font-weight:700;color:var(--lav);background:none;border:none;cursor:pointer;padding:.3rem .7rem;border-radius:6px;font-family:var(--sans);transition:background .2s;text-decoration:underline}`
	`.nav-links button:hover,.nav-links button.active{background:rgba(255,255,255,.2);text-decoration:none}`
	`.apill{width:32px;height:32px;border-radius:50%;background:var(--pur-dk);color:var(--lav);font-size:.75rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-family:var(--sans);transition:background .2s}`
	`.apill:hover,.apill.active{background:var(--yel);color:var(--dark)}`

	`.page{display:none}.page.active{display:block}`

	`.sec{padding:4rem 2.5rem;background:var(--lav)}`
	`.sec-dk{padding:4rem 2.5rem;background:var(--pur-dk)}`
	`.sec-pur{padding:3rem 2.5rem;background:var(--pur)}`
	`.sec-lav2{padding:4rem 2.5rem;background:var(--lav2)}`
	`h2.sh{font-size:clamp(1.6rem,3vw,2.8rem);font-weight:700;color:var(--pur-dk);margin-bottom:2rem;letter-spacing:-.01em}`
	`h2.sh-w{font-size:clamp(1.6rem,3vw,2.8rem);font-weight:700;color:var(--lav);margin-bottom:2rem}`
	`.dashed{border:none;border-top:2px dashed var(--pur-md);margin:0 2.5rem;opacity:.4}`
	`.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}`
	`.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem}`
	`.txt p{font-size:.97rem;line-height:1.85;color:#3A3550;font-weight:300;margin-bottom:1rem}`
	`.txt strong{font-weight:700;color:var(--dark)}`

	`/* hero */`
	`.hero-word{font-size:clamp(5rem,18vw,14rem);font-weight:700;line-height:.9;letter-spacing:-.02em;color:var(--dark);padding:2.5rem 2.5rem 0}`
	`.hero-sub{font-size:clamp(.85rem,1.8vw,1.2rem);color:var(--pur);letter-spacing:.06em;padding:.5rem 2.5rem 1.5rem}`
	`.hero-img{width:100%;height:440px;object-fit:cover;object-position:center;display:block}`
	`.date-bar{background:var(--pur);color:var(--lav);text-align:center;padding:1.25rem;font-size:clamp(.85rem,1.8vw,1.15rem);font-weight:700;letter-spacing:.05em}`
	`.date-bar span{color:var(--yel)}`

	`/* trouble */`
	`.trbl{background:var(--dark);padding:2.5rem;border-radius:16px;position:relative;overflow:hidden}`
	`.trbl-bg{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1;color:var(--yel);opacity:.1;position:absolute;inset:0;padding:1.5rem;pointer-events:none;white-space:pre-line}`
	`.trbl-in{position:relative;z-index:1}`
	`.trbl-ed{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yel);margin-bottom:.5rem}`
	`.trbl-t{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1;color:var(--yel);letter-spacing:-.02em;margin-bottom:1.25rem}`
	`.trbl-info{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.5);line-height:1.8;text-transform:uppercase;letter-spacing:.06em}`
	`.trbl-info strong{color:var(--wht)}`
	`.trbl-cta{display:inline-block;margin-top:1.25rem;padding:.65rem 1.4rem;background:var(--yel);color:var(--dark);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;text-decoration:none;cursor:pointer;border:none;font-family:var(--sans)}`

	`/* timeline */`
	`.tl{display:grid;grid-template-columns:2px 1fr;gap:0 2.5rem}`
	`.tl-line{background:repeating-linear-gradient(to bottom,var(--pur) 0,var(--pur) 8px,transparent 8px,transparent 16px);width:2px;justify-self:center}`
	`.tl-items{display:flex;flex-direction:column}`
	`.tl-item{padding:1.75rem 0;border-bottom:1px solid rgba(124,92,191,.15);display:grid;grid-template-columns:110px 1fr;gap:1.5rem;align-items:start}`
	`.tl-p{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--pur);line-height:1.4}`
	`.tl-n{font-size:1rem;font-weight:700;margin-bottom:.3rem}`
	`.tl-d{font-size:.85rem;color:#3A3550;line-height:1.75;font-weight:300}`

	`/* editions */`
	`.ed-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;cursor:pointer;transition:background .2s,transform .2s}`
	`.ed-card:hover{background:rgba(255,255,255,.13);transform:translateY(-4px)}`
	`.ed-num{font-size:3rem;font-weight:700;color:var(--yel);line-height:1;margin-bottom:.4rem}`
	`.ed-year{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.3);margin-bottom:.6rem}`
	`.ed-theme{font-size:1.1rem;font-weight:700;color:var(--lav);margin-bottom:.6rem}`
	`.ed-desc{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.7;font-weight:300}`
	`.ed-badge{display:inline-block;margin-top:.75rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .8rem;border-radius:100px;background:var(--yel);color:var(--dark)}`

	`/* img grids */`
	`.img-full{width:100%;height:400px;object-fit:cover;display:block}`
	`.img-med{width:100%;height:280px;object-fit:cover;display:block;border-radius:8px}`
	`.img-sm{width:100%;height:200px;object-fit:cover;display:block;border-radius:8px}`
	`.img-thumb{width:100%;height:160px;object-fit:cover;display:block;border-radius:8px}`
	`.img-tall{width:100%;height:360px;object-fit:cover;display:block;border-radius:8px}`
	`.img-caption{font-size:.72rem;color:var(--pur-md);margin-top:.4rem;letter-spacing:.04em}`

	`/* archive hero */`
	`.arch-hero{background:var(--dark);padding:3rem 2.5rem;position:relative;overflow:hidden}`
	`.arch-hero-bg{position:absolute;inset:0;font-size:clamp(3rem,10vw,9rem);font-weight:700;color:var(--yel);opacity:.06;line-height:1;padding:1rem 2rem;pointer-events:none;overflow:hidden}`
	`.arch-hero-in{position:relative;z-index:1}`
	`.arch-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .9rem;background:var(--yel);color:var(--dark);border-radius:100px;margin-bottom:1rem}`
	`.arch-title{font-size:clamp(2rem,5vw,4.5rem);font-weight:700;color:var(--lav);line-height:1;letter-spacing:-.02em;margin-bottom:.5rem}`
	`.arch-dates{font-size:1rem;color:rgba(255,255,255,.4);font-weight:300;margin-bottom:.4rem}`
	`.arch-lieux{font-size:.88rem;font-weight:700;color:var(--pur-md);letter-spacing:.04em}`
	`.arch-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.65rem 1.4rem;background:var(--pur);color:var(--lav);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;text-decoration:none;transition:background .2s}`
	`.arch-link:hover{background:var(--pur-dk)}`

	`/* team grid */`
	`.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lav2);border:1px solid var(--lav2)}`
	`.team-card{background:var(--lav);padding:1.25rem}`
	`.team-name{font-weight:700;font-size:.9rem;margin-bottom:.2rem}`
	`.team-role{font-size:.78rem;color:#3A3550}`

	`/* photogs */`
	`.photogs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem 1rem;margin-top:.75rem}`
	`.photog{font-size:.82rem;color:var(--pur);font-weight:500}`

	`/* lieu */`
	`.lieu-card{background:var(--wht);border:1px solid var(--lav2);border-radius:10px;padding:1.75rem;margin-bottom:1rem;transition:border-color .2s}`
	`.lieu-card:hover{border-color:var(--pur)}`
	`.lieu-name{font-size:1rem;font-weight:700;color:var(--pur-dk);margin-bottom:.3rem}`
	`.lieu-addr{font-size:.85rem;color:#3A3550;line-height:1.6}`
	`.contact-box{background:var(--pur-dk);padding:2rem;border-radius:10px;text-align:center}`
	`.c-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.4);margin-bottom:.75rem;display:block}`
	`.c-email{font-size:1.4rem;font-weight:700;color:var(--yel);text-decoration:none}`
	`.c-email:hover{text-decoration:underline}`

	`/* partners */`
	`.partners-bar{background:var(--pur);padding:2.5rem}`
	`.partners-bar h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--lav);margin-bottom:1.25rem;opacity:.55}`
	`.p-tags{display:flex;flex-wrap:wrap;gap:.5rem}`
	`.p-tag{font-size:.75rem;padding:.35rem .9rem;background:rgba(255,255,255,.12);border-radius:100px;color:var(--lav);border:1px solid rgba(255,255,255,.14)}`

	`footer{background:var(--dark);padding:1.5rem 2.5rem;display:flex;justify-content:space-between;align-items:center}`
	`.f-copy{font-size:.72rem;color:rgba(255,255,255,.2)}`
	`.f-logo{font-size:1.2rem;font-weight:700;letter-spacing:.1em;color:var(--yel)}`

	`@media(max-width:860px){`
	`.two,.three{grid-template-columns:1fr!important}`
	`.tl-item{grid-template-columns:80px 1fr!important}`
	`nav,.sec,.sec-dk,.sec-pur,.sec-lav2,.arch-hero,.partners-bar,footer{padding-left:1.25rem!important;padding-right:1.25rem!important}`
	`.hero-word,.hero-sub{padding-left:1.25rem;padding-right:1.25rem}`
	`.dashed{margin:0 1.25rem}`
	`.team-grid{grid-template-columns:1fr 1fr!important}`
	`}`
	`@media(max-width:520px){`
	`.three,.team-grid{grid-template-columns:1fr!important}`
	`.photogs{grid-template-columns:1fr 1fr!important}`
	`}`

	`/* ── TROUBLE THEME ── */`
	`@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');`

	`/* glitch keyframes */`
	`@keyframes glitch1{`
	`0%,100%{clip-path:inset(0 0 95% 0);transform:translate(-2px,0)}`
	`20%{clip-path:inset(30% 0 50% 0);transform:translate(2px,0)}`
	`40%{clip-path:inset(60% 0 20% 0);transform:translate(-1px,0)}`
	`60%{clip-path:inset(10% 0 80% 0);transform:translate(3px,0)}`
	`80%{clip-path:inset(80% 0 5% 0);transform:translate(-2px,0)}`
	`}`
	`@keyframes glitch2{`
	`0%,100%{clip-path:inset(50% 0 30% 0);transform:translate(2px,0)}`
	`25%{clip-path:inset(15% 0 70% 0);transform:translate(-3px,0)}`
	`50%{clip-path:inset(75% 0 10% 0);transform:translate(1px,0)}`
	`75%{clip-path:inset(40% 0 40% 0);transform:translate(-2px,0)}`
	`}`
	`@keyframes flicker{`
	`0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}`
	`20%,24%,55%{opacity:.6}`
	`}`
	`@keyframes scanline{`
	`0%{transform:translateY(-100%)}`
	`100%{transform:translateY(100vh)}`
	`}`
	`@keyframes drift{`
	`0%,100%{letter-spacing:-.02em}`
	`50%{letter-spacing:.04em}`
	`}`

	`/* TROUBLE hero overlay */`
	`.trouble-hero-wrap{`
	`position:relative;overflow:hidden;`
	`background:var(--dark);`
	`}`
	`.trouble-hero-wrap .hero-word{`
	`color:var(--yel);`
	`animation:flicker 8s infinite, drift 6s ease-in-out infinite;`
	`text-shadow:4px 0 var(--pur), -4px 0 #ff006680;`
	`}`
	`.trouble-hero-wrap .hero-word::before,`
	`.trouble-hero-wrap .hero-word::after{`
	`content:attr(data-text);`
	`position:absolute;top:0;left:0;width:100%;`
	`padding:inherit;`
	`color:var(--yel);`
	`font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;`
	`}`
	`.trouble-hero-wrap .hero-word::before{`
	`color:var(--pur);`
	`animation:glitch1 4s infinite;`
	`}`
	`.trouble-hero-wrap .hero-word::after{`
	`color:#ff006680;`
	`animation:glitch2 4s infinite .5s;`
	`}`
	`.trouble-hero-wrap .hero-sub{color:rgba(232,228,245,.6)}`

	`/* scanline effect on hero */`
	`.trouble-hero-wrap::after{`
	`content:'';`
	`position:absolute;top:0;left:0;right:0;`
	`height:3px;`
	`background:rgba(255,230,0,.15);`
	`animation:scanline 4s linear infinite;`
	`pointer-events:none;z-index:10;`
	`}`

	`/* TROUBLE watermark — appears in section backgrounds */`
	`.trbl-watermark{`
	`position:relative;overflow:hidden;`
	`}`
	`.trbl-watermark::before{`
	`content:'TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE';`
	`position:absolute;`
	`top:50%;left:-5%;`
	`transform:translateY(-50%) rotate(-8deg);`
	`font-size:clamp(3rem,7vw,6rem);`
	`font-weight:700;`
	`color:rgba(124,92,191,.06);`
	`white-space:nowrap;`
	`letter-spacing:.04em;`
	`line-height:1.2;`
	`pointer-events:none;`
	`z-index:0;`
	`width:110%;`
	`word-spacing:2rem;`
	`}`
	`.trbl-watermark > *{position:relative;z-index:1}`

	`/* yellow accent watermark for dark sections */`
	`.trbl-watermark-dk::before{`
	`color:rgba(255,230,0,.05);`
	`}`

	`/* TROUBLE divider — replaces boring dashed line */`
	`.trbl-divider{`
	`position:relative;`
	`overflow:hidden;`
	`height:40px;`
	`display:flex;`
	`align-items:center;`
	`background:var(--dark);`
	`}`
	`.trbl-divider-inner{`
	`white-space:nowrap;`
	`font-size:.72rem;`
	`font-weight:700;`
	`letter-spacing:.2em;`
	`text-transform:uppercase;`
	`color:rgba(255,230,0,.4);`
	`animation:marquee 18s linear infinite;`
	`display:inline-block;`
	`padding-left:100%;`
	`}`
	`@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}`

	`/* distorted section number */`
	`.trbl-num{`
	`font-size:clamp(5rem,12vw,10rem);`
	`font-weight:700;`
	`color:var(--yel);`
	`line-height:1;`
	`opacity:.08;`
	`position:absolute;`
	`top:1rem;right:2rem;`
	`letter-spacing:-.05em;`
	`pointer-events:none;`
	`text-shadow:3px 0 var(--pur);`
	`user-select:none;`
	`}`

	`/* nav TROUBLE mode */`
	`nav{border-bottom:2px solid var(--yel);box-shadow:0 2px 20px rgba(255,230,0,.15)}`

	`/* date bar TROUBLE */`
	`.date-bar{`
	`background:var(--dark);`
	`border-top:2px solid var(--yel);`
	`border-bottom:2px solid var(--yel);`
	`letter-spacing:.08em;`
	`position:relative;overflow:hidden;`
	`}`
	`.date-bar::before{`
	`content:'';`
	`position:absolute;inset:0;`
	`background:repeating-linear-gradient(`
	`90deg,`
	`transparent,transparent 40px,`
	`rgba(255,230,0,.03) 40px,rgba(255,230,0,.03) 41px`
	`);`
	`pointer-events:none;`
	`}`

	`/* edition cards — TROUBLE hover */`
	`.ed-card:hover .ed-theme{`
	`color:var(--yel);`
	`text-shadow:2px 0 var(--pur);`
	`}`

	`/* archive hero TROUBLE text */`
	`.arch-title{`
	`text-shadow:3px 0 rgba(124,92,191,.6), -1px 0 rgba(255,0,100,.3);`
	`}`

	`/* section headings glitch on hover */`
	`h2.sh:hover{`
	`text-shadow:2px 0 var(--pur-md);`
	`transition:text-shadow .1s;`
	`}`

	`</style>`
	`</head>`
	`<body>`

	`<nav>`
	`<button class="nav-logo" onclick="go('accueil')">PIPAS</button>`
	`<div class="nav-links">`
	`<button onclick="go('apropos')" id="btn-apropos">À propos</button>`
	`<button onclick="go('pratique')" id="btn-pratique">Pratique</button>`
	`<button onclick="go('p24')" id="btn-p24" class="apill">24</button>`
	`<button onclick="go('p22')" id="btn-p22" class="apill">22</button>`
	`</div>`
	`</nav>`

	`<!-- ── ACCUEIL ── -->`
	`<div id="page-accueil" class="page active">`
	`<div class="trouble-hero-wrap"><div class="hero-word" data-text="PIPAS">PIPAS</div>`
	`<div class="hero-sub" style="padding-bottom:0">Biennale de Photographie des écoles · Genève · Par et pour les élèves</div>`
	`<img class="hero-img" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2025/05/ECO-2026.jpg" alt="PIPAS Ecoquartier Jonction 2026">`
	`<div class="date-bar">Prochaine édition — <span>27 mai au 14 juin 2026</span> · Ecoquartier Jonction · Plaine de Plainpalais · Centre de la Photographie Genève</div>`
	`</div><!-- /trouble-hero-wrap -->`

	`<div class="sec two trbl-watermark">`
	`<div class="txt">`
	`<h2 class="sh">Le projet PIPAS</h2>`
	`<p><strong>PIPAS, c'est l'acronyme de Photo et Image Pour l'Apprentissage Scolaire.</strong> C'est une biennale de photographie par et pour les élèves, en mai, au Centre de la Photographie – Genève et à l'Ecoquartier Jonction.</p>`
	`<p>Plus de <strong>30 classes</strong> participent à la 3e édition et travaillent sur leurs projets — certaines avec un photographe professionnel, d'autres en autonomie.</p>`
	`<p>PIPAS est la <strong>première rencontre photographique suisse</strong> entièrement prise en charge par des jeunes, du primaire au secondaire II.</p>`
	`</div>`
	`<div class="trbl">`
	`<div class="trbl-bg">TROUBLE`
	`TROUBLE`
	`TROUBLE`
	`TROUBLE`
	`TROUBLE</div>`
	`<div class="trbl-in">`
	`<div class="trbl-ed">PIPAS 26 · 3e édition</div>`
	`<div class="trbl-t">TROUBLE</div>`
	`<div class="trbl-info">`
	`<strong>Appel à projets</strong><br>`
	`EP : 27.08.25<br>`
	`Sec. I & II : 14.09.25`
	`</div>`
	`<button class="trbl-cta" onclick="go('apropos')">En savoir plus →</button>`
	`</div>`
	`</div>`
	`</div>`

	`<div class="trbl-divider">`
	`<span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>`
	`</div>`

	`<!-- Photo strip from site -->`
	`<div class="sec" style="padding-top:2rem;padding-bottom:2rem">`
	`<div class="three" style="gap:1rem">`
	`<div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/CPG.jpg" alt="CPG Genève">`
	`<div class="img-caption">Centre de la Photographie – Genève</div>`
	`</div>`
	`<div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/ECO.jpg" alt="Ecoquartier Jonction">`
	`<div class="img-caption">Ecoquartier Jonction</div>`
	`</div>`
	`<div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/02/vernissage-pipas-2-300x200.jpg" alt="Vernissage 2024">`
	`<div class="img-caption">Vernissage 2e édition</div>`
	`</div>`
	`</div>`
	`</div>`

	`<div class="trbl-divider">`
	`<span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>`
	`</div>`

	`<div class="sec">`
	`<h2 class="sh">Un projet en deux temps</h2>`
	`<div class="tl">`
	`<div class="tl-line"></div>`
	`<div class="tl-items">`
	`<div class="tl-item">`
	`<div class="tl-p">Sept → Mars</div>`
	`<div><div class="tl-n">La préparation</div><div class="tl-d">Les élèves apprennent à lire, décoder et créer des images avec des photographes professionnels et leurs enseignants.</div></div>`
	`</div>`
	`<div class="tl-item">`
	`<div class="tl-p">Mai</div>`
	`<div><div class="tl-n">La Biennale</div><div class="tl-d">Les travaux sont exposés à l'Ecoquartier Jonction, à la Plaine de Plainpalais et au CPG. Ateliers, visites et conférences pour classes et public.</div></div>`
	`</div>`
	`<div class="tl-item">`
	`<div class="tl-p">Tout au long</div>`
	`<div><div class="tl-n">Les élèves font tout</div><div class="tl-d">Identité visuelle (CFP Arts), supports (CFP Construction), Instagram (Digilab), accueil (Espace Entreprise).</div></div>`
	`</div>`
	`</div>`
	`</div>`
	`</div>`

	`<div class="trbl-divider">`
	`<span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>`
	`</div>`

	`<div class="sec-dk trbl-watermark trbl-watermark-dk">`
	`<h2 class="sh-w">Les éditions</h2>`
	`<div class="three">`
	`<div class="ed-card" onclick="go('p22')">`
	`<div class="ed-num">1</div>`
	`<div class="ed-year">Édition 21–22</div>`
	`<div class="ed-theme">Photos-récits</div>`
	`<div class="ed-desc">La première édition. Naissance d'une biennale unique en Suisse.</div>`
	`</div>`
	`<div class="ed-card" onclick="go('p24')">`
	`<div class="ed-num">2</div>`
	`<div class="ed-year">Édition 23–24</div>`
	`<div class="ed-theme">Le quotidien est ailleurs</div>`
	`<div class="ed-desc">Regard transformé par la photographie. Le geste créatif comme exploration.</div>`
	`</div>`
	`<div class="ed-card" onclick="go('apropos')">`
	`<div class="ed-num">3</div>`
	`<div class="ed-year">Édition 25–26</div>`
	`<div class="ed-theme">Trouble</div>`
	`<div class="ed-desc">Flou, instabilité, perturbation — des états qui caractérisent notre époque.</div>`
	`<span class="ed-badge">En cours</span>`
	`</div>`
	`</div>`
	`</div>`
	`</div>`

	`<!-- ── À PROPOS ── -->`
	`<div id="page-apropos" class="page">`
	`<div class="sec two">`
	`<div class="txt">`
	`<h2 class="sh">Le projet PIPAS</h2>`
	`<p><strong>PIPAS, c'est l'acronyme de Photo et Image Pour l'Apprentissage Scolaire.</strong> C'est une biennale de photographie, par et pour les élèves, en mai à Genève.</p>`
	`<p>Le but : <strong>sensibiliser et former les élèves aux enjeux liés à l'image</strong>, par la réflexion et par la pratique. Il est essentiel que les jeunes construisent une distance critique face au flux d'images du monde numérique.</p>`
	`<p>PIPAS est la <strong>première rencontre photographique suisse</strong> entièrement prise en charge par des jeunes — conception, réalisation, exposition, communication.</p>`
	`<p>PIPAS a aussi le désir de mettre en valeur <strong>l'école comme créatrice et actrice culturelle</strong> du territoire où elle est implantée.</p>`
	`</div>`
	`<div>`
	`<img class="img-tall" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/01/Pipas_2401-234-e1709912604417-800x510.png" alt="PIPAS">`
	`<div class="img-caption">Biennale PIPAS — exposition</div>`
	`</div>`
	`</div>`

	`<div class="trbl-divider">`
	`<span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>`
	`</div>`

	`<div class="sec-lav2 trbl-watermark">`
	`<span class="trbl-num">3</span>`
	`<h2 class="sh">Thème — 3e édition</h2>`
	`<div class="two" style="align-items:center">`
	`<div class="trbl">`
	`<div class="trbl-bg">TROUBLE`
	`TROUBLE`
	`TROUBLE`
	`TROUBLE</div>`
	`<div class="trbl-in">`
	`<div class="trbl-ed">PIPAS 26 · 3e édition · 2025–26</div>`
	`<div class="trbl-t">TROUBLE</div>`
	`<div class="trbl-info">Chaque biennale se décline autour d'un thème.<br><strong>"Trouble"</strong> pour la 3e édition.</div>`
	`</div>`
	`</div>`
	`<div class="txt">`
	`<p>Précédemment : <strong>"Photos-récits"</strong> (1re éd. 21–22), <strong>"Le quotidien est ailleurs"</strong> (2e éd. 23–24).</p>`
	`<p>Les élèves du CPF Arts préparent durant l'automne l'<strong>identité visuelle</strong> de cette 3e édition.</p>`
	`<p>Les espaces d'exposition se multiplient : Ecoquartier Jonction, <strong>Plaine de Plainpalais</strong> et le Centre de la Photographie — désormais étendu à la Maison de l'enfance et de l'adolescence.</p>`
	`</div>`
	`</div>`
	`</div>`

	`<div class="trbl-divider">`
	`<span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>`
	`</div>`

	`<div class="sec">`
	`<h2 class="sh">Comité de pilotage</h2>`
	`<div class="team-grid">`
	`<div class="team-card"><div class="team-name">Andrianasolo Jean Luc</div><div class="team-role">Enseignant CFP Arts & photographe</div></div>`
	`<div class="team-card"><div class="team-name">Boulaz Serge</div><div class="team-role">Arts visuels ESII & formateur SEM</div></div>`
	`<div class="team-card"><div class="team-name">Bercher Virginie</div><div class="team-role">Histoire ESII & coordinatrice cinéma SEM</div></div>`
	`<div class="team-card"><div class="team-name">Hermenier Stéphane</div><div class="team-role">Histoire-géo ESII & collaborateur SEM</div></div>`
	`<div class="team-card"><div class="team-name">Mota Gabriel</div><div class="team-role">Biologie ESI</div></div>`
	`<div class="team-card"><div class="team-name">Oberson Paul</div><div class="team-role">Chef de service SEM</div></div>`
	`<div class="team-card"><div class="team-name">Pradervand Delavy Olivier</div><div class="team-role">Français ESII & formateur SEM</div></div>`
	`<div class="team-card"><div class="team-name">Privet Céline</div><div class="team-role">Arts plastiques ESII</div></div>`
	`<div class="team-card"><div class="team-name">Zamarbide Galliane</div><div class="team-role">Responsable Arts Visuels & ACM — DIP–SEE</div></div>`
	`</div>`
	`</div>`
	`</div>`

	`<!-- ── PRATIQUE ── -->`
	`<div id="page-pratique" class="page">`
	`<div class="sec two">`
	`<div>`
	`<h2 class="sh">Lieux</h2>`
	`<div class="lieu-card">`
	`<div class="lieu-name">Centre de la Photographie – Genève (CPG)</div>`
	`<div class="lieu-addr">BAC — Bâtiment d'art contemporain<br>Rue des Bains 28 – Genève<br><span style="color:var(--pur);font-size:.8rem">Exposition ouverte dès le vernissage, 14 mai à 18h</span></div>`
	`</div>`
	`<div class="lieu-card">`
	`<div class="lieu-name">Ecoquartier Jonction</div>`
	`<div class="lieu-addr">Ch. du 23-Août – Genève</div>`
	`</div>`
	`<div class="lieu-card">`
	`<div class="lieu-name">Service écoles-médias (SEM)</div>`
	`<div class="lieu-addr">Rue des Gazomètres 5 – Genève</div>`
	`</div>`
	`</div>`
	`<div>`
	`<h2 class="sh">Contact</h2>`
	`<div class="contact-box" style="margin-bottom:1.5rem">`
	`<span class="c-label">Email</span>`
	`<a href="mailto:pipas@edu.ge.ch" class="c-email">pipas@edu.ge.ch</a>`
	`</div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2025/05/ECO-2026.jpg" alt="Ecoquartier Jonction 2026" style="border-radius:8px">`
	`</div>`
	`</div>`
	`</div>`

	`<!-- ── PIPAS 24 ── -->`
	`<div id="page-p24" class="page">`
	`<div class="arch-hero">`
	`<div class="arch-hero-bg">LE QUOTIDIEN EST AILLEURS</div>`
	`<div class="arch-hero-in two" style="align-items:center;gap:2rem">`
	`<div>`
	`<div class="arch-badge">2e édition · Archive</div>`
	`<div class="arch-title">Le quotidien<br>est ailleurs</div>`
	`<div class="arch-dates">14 – 26 mai 2024 · Vernissage 14 mai</div>`
	`<div class="arch-lieux">Centre de la Photographie Genève + Écoquartier Jonction</div>`
	`</div>`
	`<img src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/01/PIPAS24Signature_2401-25-scaled-e1709913326207.jpg" alt="PIPAS 24 Signature" style="width:100%;max-width:280px;border-radius:8px;opacity:.85">`
	`</div>`
	`</div>`

	`<div class="sec two trbl-watermark">`
	`<div class="txt">`
	`<h2 class="sh">La thématique</h2>`
	`<p><strong>Une phrase volontairement énigmatique, poétique</strong> — pour que chacun puisse l'interpréter, se l'approprier très librement. Quotidien, ailleurs : deux mots destinés à guider ou ouvrir des horizons.</p>`
	`<p>Le quotidien peut être les gestes, ce qui se répète, ce dont on n'a même plus conscience. L'ailleurs peut être ce qui est lointain, différent, étrange.</p>`
	`<p>Derrière cette expression ouverte, la volonté de PIPAS d'explorer les multiples rapports de la <strong>photographie au réel</strong> — toujours le résultat d'un choix, un geste créatif.</p>`
	`<a href="https://edu.ge.ch/site/pipas/archives/pipas-2024/" target="_blank" class="arch-link">Voir le site complet ↗</a>`
	`</div>`
	`<div>`
	`<img class="img-tall" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/01/Pipas_2401-233.png" alt="PIPAS 24">`
	`</div>`
	`</div>`

	`<div class="trbl-divider">`
	`<span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>`
	`</div>`

	`<div class="sec-lav2">`
	`<h2 class="sh">Expositions</h2>`
	`<div class="two" style="gap:1.5rem">`
	`<div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/CPG.jpg" alt="CPG">`
	`<div class="img-caption" style="margin-bottom:.75rem">Centre de la Photographie – Genève</div>`
	`<div class="txt"><p>Rue des Bains 28, Genève. Exposition ouverte dès le vernissage du 14 mai à 18h.</p></div>`
	`</div>`
	`<div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/ECO.jpg" alt="Ecoquartier">`
	`<div class="img-caption" style="margin-bottom:.75rem">Écoquartier Jonction</div>`
	`<div class="txt"><p>Ch. du 23-Août, Genève. Les travaux photographiques des élèves investissent les espaces extérieurs.</p></div>`
	`</div>`
	`</div>`
	`</div>`

	`<div class="sec">`
	`<div class="two">`
	`<div>`
	`<h2 class="sh" style="font-size:1.4rem">Vernissage — 14 mai 2024</h2>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/02/vernissage-pipas-2-300x200.jpg" alt="Vernissage 2024">`
	`</div>`
	`<div>`
	`<h2 class="sh" style="font-size:1.4rem">Photographes professionnels 23–24</h2>`
	`<div class="photogs">`
	`<span class="photog">Niels Ackermann</span>`
	`<span class="photog">Zoé Aubry</span>`
	`<span class="photog">Rebecca Bowring</span>`
	`<span class="photog">Yann Haeberlin</span>`
	`<span class="photog">Andreas Kressig</span>`
	`<span class="photog">Elisa Larvego</span>`
	`<span class="photog">Nicolas Lieber</span>`
	`<span class="photog">Christophe Rey</span>`
	`<span class="photog">Dorothée Thébert</span>`
	`<span class="photog">Anastasia Mityukova</span>`
	`</div>`
	`</div>`
	`</div>`
	`</div>`
	`</div>`

	`<!-- ── PIPAS 22 ── -->`
	`<div id="page-p22" class="page">`
	`<div class="arch-hero">`
	`<div class="arch-hero-bg">PHOTOS-RÉCITS</div>`
	`<div class="arch-hero-in two" style="align-items:center;gap:2rem">`
	`<div>`
	`<div class="arch-badge">1re édition · Archive</div>`
	`<div class="arch-title">Photos-récits</div>`
	`<div class="arch-dates">3 – 14 mai 2022 · Vernissage 3 mai</div>`
	`<div class="arch-lieux">Centre de la Photographie Genève + Écoquartier Jonction</div>`
	`</div>`
	`<img src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2021/05/bandeau-1.png" alt="PIPAS 22 Bandeau" style="width:100%;max-width:320px;border-radius:8px;opacity:.85">`
	`</div>`
	`</div>`

	`<div class="sec two trbl-watermark">`
	`<div class="txt">`
	`<h2 class="sh">La première édition</h2>`
	`<p><strong>PIPAS est la première rencontre photographique suisse</strong> prise en charge par des élèves — de l'école primaire au Secondaire II.</p>`
	`<p>Avec la thématique « Photos-récits », les élèves ont été invité·e·s à rendre visibles et lisibles les <strong>relations qu'entretiennent textes et images</strong>.</p>`
	`<p>De la performance à la sculpture, en passant par le roman-photo, le dazibao, la création de parure ou encore le portrait fictionnalisé — leurs productions ont été exposées dans l'Écoquartier Jonction et au Centre de la Photographie.</p>`
	`<a href="https://edu.ge.ch/site/pipas/archives/pipas-22-photos-recits/" target="_blank" class="arch-link">Voir le site complet ↗</a>`
	`</div>`
	`<div>`
	`<img class="img-tall" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2023/05/4V0A7347-800x533.jpeg" alt="Vernissage PIPAS 22">`
	`<div class="img-caption">Vernissage 1re édition — 3 mai 2022</div>`
	`</div>`
	`</div>`

	`<div class="trbl-divider">`
	`<span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>`
	`</div>`

	`<div class="sec-lav2">`
	`<h2 class="sh">Expositions</h2>`
	`<div class="two" style="gap:1.5rem">`
	`<div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2023/05/DSCF0537-800x600.jpeg" alt="Expo CPG 22">`
	`<div class="img-caption" style="margin-bottom:.75rem">Centre de la Photographie Genève</div>`
	`</div>`
	`<div>`
	`<img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2023/05/4V0A7119-800x533.jpeg" alt="Expo Eco 22">`
	`<div class="img-caption" style="margin-bottom:.75rem">Écoquartier Jonction</div>`
	`</div>`
	`</div>`
	`</div>`

	`<div class="sec">`
	`<div class="two">`
	`<div class="txt">`
	`<h3 style="font-size:1.1rem;font-weight:700;color:var(--pur-dk);margin-bottom:1rem">Programme & ateliers</h3>`
	`<p>Journée de formation le <strong>7 mai 2022</strong> — <em>"Les pouvoirs de l'image et de la littérature à l'ère du numérique"</em> — ouverte à toutes et tous.</p>`
	`<p><strong>10 ateliers photographiques</strong> et <strong>8 ateliers d'écriture</strong> encadrés par des artistes dans des classes du canton.</p>`
	`</div>`
	`<div class="txt">`
	`<h3 style="font-size:1.1rem;font-weight:700;color:var(--pur-dk);margin-bottom:1rem">Partenaires 1re édition</h3>`
	`<p>Centre de la Photographie Genève, FMAC, FCAC, Centre d'Art Contemporain Genève, SEM, SEE, Association Freeze.</p>`
	`</div>`
	`</div>`
	`</div>`
	`</div>`

	`<!-- PARTNERS + FOOTER (always visible) -->`
	`<div class="partners-bar">`
	`<h3>Soutiens & partenaires</h3>`
	`<div class="p-tags">`
	`<span class="p-tag">École et Culture</span>`
	`<span class="p-tag">Fondation Alfred et Eugénie Baur</span>`
	`<span class="p-tag">CPG – Centre de la Photographie Genève</span>`
	`<span class="p-tag">Ecoquartier Jonction · CODHA</span>`
	`<span class="p-tag">FMAC</span>`
	`<span class="p-tag">CFP Arts</span>`
	`<span class="p-tag">CFP Construction</span>`
	`<span class="p-tag">Espace Entreprise</span>`
	`<span class="p-tag">SEM</span><span class="p-tag">SEE</span>`
	`<span class="p-tag">Association Freeze</span>`
	`</div>`
	`</div>`
	`<footer>`
	`<span class="f-copy">© PIPAS – Biennale de Photographie · Genève · DIP – Service écoles-médias</span>`
	`<span class="f-logo">PIPAS.</span>`
	`</footer>`

	`<script>`
	`function go(id){`
	`document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));`
	`document.querySelectorAll('.apill,.nav-links button').forEach(b=>b.classList.remove('active'));`
	`const p=document.getElementById('page-'+id);`
	`if(p){p.classList.add('active');window.scrollTo(0,0);}`
	`const b=document.getElementById('btn-'+id);`
	`if(b)b.classList.add('active');`
	`}`
	`</script>`
	`</body>`
	`</html>`

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PIPAS — Biennale de Photographie Genève</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --lav:#E8E4F5;--lav2:#D8D2EE;
  --pur:#7C5CBF;--pur-dk:#4A2D8A;--pur-md:#B09ADE;
  --yel:#FFE600;--dark:#0D0B14;--wht:#FAFAF8;
  --sans:'Space Grotesk',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--lav);color:var(--dark);font-family:var(--sans);overflow-x:hidden}

nav{background:var(--pur);padding:.9rem 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;position:sticky;top:0;z-index:99}
.nav-logo{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lav);background:var(--pur-dk);padding:.35rem 1rem;border-radius:100px;text-decoration:none;cursor:pointer;border:none;font-family:var(--sans)}
.nav-links{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.nav-links button{font-size:.82rem;font-weight:700;color:var(--lav);background:none;border:none;cursor:pointer;padding:.3rem .7rem;border-radius:6px;font-family:var(--sans);transition:background .2s;text-decoration:underline}
.nav-links button:hover,.nav-links button.active{background:rgba(255,255,255,.2);text-decoration:none}
.apill{width:32px;height:32px;border-radius:50%;background:var(--pur-dk);color:var(--lav);font-size:.75rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-family:var(--sans);transition:background .2s}
.apill:hover,.apill.active{background:var(--yel);color:var(--dark)}

.page{display:none}.page.active{display:block}

.sec{padding:4rem 2.5rem;background:var(--lav)}
.sec-dk{padding:4rem 2.5rem;background:var(--pur-dk)}
.sec-pur{padding:3rem 2.5rem;background:var(--pur)}
.sec-lav2{padding:4rem 2.5rem;background:var(--lav2)}
h2.sh{font-size:clamp(1.6rem,3vw,2.8rem);font-weight:700;color:var(--pur-dk);margin-bottom:2rem;letter-spacing:-.01em}
h2.sh-w{font-size:clamp(1.6rem,3vw,2.8rem);font-weight:700;color:var(--lav);margin-bottom:2rem}
.dashed{border:none;border-top:2px dashed var(--pur-md);margin:0 2.5rem;opacity:.4}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem}
.txt p{font-size:.97rem;line-height:1.85;color:#3A3550;font-weight:300;margin-bottom:1rem}
.txt strong{font-weight:700;color:var(--dark)}

/* hero */
.hero-word{font-size:clamp(5rem,18vw,14rem);font-weight:700;line-height:.9;letter-spacing:-.02em;color:var(--dark);padding:2.5rem 2.5rem 0}
.hero-sub{font-size:clamp(.85rem,1.8vw,1.2rem);color:var(--pur);letter-spacing:.06em;padding:.5rem 2.5rem 1.5rem}
.hero-img{width:100%;height:440px;object-fit:cover;object-position:center;display:block}
.date-bar{background:var(--pur);color:var(--lav);text-align:center;padding:1.25rem;font-size:clamp(.85rem,1.8vw,1.15rem);font-weight:700;letter-spacing:.05em}
.date-bar span{color:var(--yel)}

/* trouble */
.trbl{background:var(--dark);padding:2.5rem;border-radius:16px;position:relative;overflow:hidden}
.trbl-bg{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1;color:var(--yel);opacity:.1;position:absolute;inset:0;padding:1.5rem;pointer-events:none;white-space:pre-line}
.trbl-in{position:relative;z-index:1}
.trbl-ed{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yel);margin-bottom:.5rem}
.trbl-t{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1;color:var(--yel);letter-spacing:-.02em;margin-bottom:1.25rem}
.trbl-info{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.5);line-height:1.8;text-transform:uppercase;letter-spacing:.06em}
.trbl-info strong{color:var(--wht)}
.trbl-cta{display:inline-block;margin-top:1.25rem;padding:.65rem 1.4rem;background:var(--yel);color:var(--dark);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;text-decoration:none;cursor:pointer;border:none;font-family:var(--sans)}

/* timeline */
.tl{display:grid;grid-template-columns:2px 1fr;gap:0 2.5rem}
.tl-line{background:repeating-linear-gradient(to bottom,var(--pur) 0,var(--pur) 8px,transparent 8px,transparent 16px);width:2px;justify-self:center}
.tl-items{display:flex;flex-direction:column}
.tl-item{padding:1.75rem 0;border-bottom:1px solid rgba(124,92,191,.15);display:grid;grid-template-columns:110px 1fr;gap:1.5rem;align-items:start}
.tl-p{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--pur);line-height:1.4}
.tl-n{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.tl-d{font-size:.85rem;color:#3A3550;line-height:1.75;font-weight:300}

/* editions */
.ed-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;cursor:pointer;transition:background .2s,transform .2s}
.ed-card:hover{background:rgba(255,255,255,.13);transform:translateY(-4px)}
.ed-num{font-size:3rem;font-weight:700;color:var(--yel);line-height:1;margin-bottom:.4rem}
.ed-year{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.3);margin-bottom:.6rem}
.ed-theme{font-size:1.1rem;font-weight:700;color:var(--lav);margin-bottom:.6rem}
.ed-desc{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.7;font-weight:300}
.ed-badge{display:inline-block;margin-top:.75rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .8rem;border-radius:100px;background:var(--yel);color:var(--dark)}

/* img grids */
.img-full{width:100%;height:400px;object-fit:cover;display:block}
.img-med{width:100%;height:280px;object-fit:cover;display:block;border-radius:8px}
.img-sm{width:100%;height:200px;object-fit:cover;display:block;border-radius:8px}
.img-thumb{width:100%;height:160px;object-fit:cover;display:block;border-radius:8px}
.img-tall{width:100%;height:360px;object-fit:cover;display:block;border-radius:8px}
.img-caption{font-size:.72rem;color:var(--pur-md);margin-top:.4rem;letter-spacing:.04em}

/* archive hero */
.arch-hero{background:var(--dark);padding:3rem 2.5rem;position:relative;overflow:hidden}
.arch-hero-bg{position:absolute;inset:0;font-size:clamp(3rem,10vw,9rem);font-weight:700;color:var(--yel);opacity:.06;line-height:1;padding:1rem 2rem;pointer-events:none;overflow:hidden}
.arch-hero-in{position:relative;z-index:1}
.arch-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .9rem;background:var(--yel);color:var(--dark);border-radius:100px;margin-bottom:1rem}
.arch-title{font-size:clamp(2rem,5vw,4.5rem);font-weight:700;color:var(--lav);line-height:1;letter-spacing:-.02em;margin-bottom:.5rem}
.arch-dates{font-size:1rem;color:rgba(255,255,255,.4);font-weight:300;margin-bottom:.4rem}
.arch-lieux{font-size:.88rem;font-weight:700;color:var(--pur-md);letter-spacing:.04em}
.arch-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.65rem 1.4rem;background:var(--pur);color:var(--lav);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;text-decoration:none;transition:background .2s}
.arch-link:hover{background:var(--pur-dk)}

/* team grid */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lav2);border:1px solid var(--lav2)}
.team-card{background:var(--lav);padding:1.25rem}
.team-name{font-weight:700;font-size:.9rem;margin-bottom:.2rem}
.team-role{font-size:.78rem;color:#3A3550}

/* photogs */
.photogs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem 1rem;margin-top:.75rem}
.photog{font-size:.82rem;color:var(--pur);font-weight:500}

/* lieu */
.lieu-card{background:var(--wht);border:1px solid var(--lav2);border-radius:10px;padding:1.75rem;margin-bottom:1rem;transition:border-color .2s}
.lieu-card:hover{border-color:var(--pur)}
.lieu-name{font-size:1rem;font-weight:700;color:var(--pur-dk);margin-bottom:.3rem}
.lieu-addr{font-size:.85rem;color:#3A3550;line-height:1.6}
.contact-box{background:var(--pur-dk);padding:2rem;border-radius:10px;text-align:center}
.c-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.4);margin-bottom:.75rem;display:block}
.c-email{font-size:1.4rem;font-weight:700;color:var(--yel);text-decoration:none}
.c-email:hover{text-decoration:underline}

/* partners */
.partners-bar{background:var(--pur);padding:2.5rem}
.partners-bar h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--lav);margin-bottom:1.25rem;opacity:.55}
.p-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.p-tag{font-size:.75rem;padding:.35rem .9rem;background:rgba(255,255,255,.12);border-radius:100px;color:var(--lav);border:1px solid rgba(255,255,255,.14)}

footer{background:var(--dark);padding:1.5rem 2.5rem;display:flex;justify-content:space-between;align-items:center}
.f-copy{font-size:.72rem;color:rgba(255,255,255,.2)}
.f-logo{font-size:1.2rem;font-weight:700;letter-spacing:.1em;color:var(--yel)}

@media(max-width:860px){
  .two,.three{grid-template-columns:1fr!important}
  .tl-item{grid-template-columns:80px 1fr!important}
  nav,.sec,.sec-dk,.sec-pur,.sec-lav2,.arch-hero,.partners-bar,footer{padding-left:1.25rem!important;padding-right:1.25rem!important}
  .hero-word,.hero-sub{padding-left:1.25rem;padding-right:1.25rem}
  .dashed{margin:0 1.25rem}
  .team-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:520px){
  .three,.team-grid{grid-template-columns:1fr!important}
  .photogs{grid-template-columns:1fr 1fr!important}
}

/* ── TROUBLE THEME ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

/* glitch keyframes */
@keyframes glitch1{
  0%,100%{clip-path:inset(0 0 95% 0);transform:translate(-2px,0)}
  20%{clip-path:inset(30% 0 50% 0);transform:translate(2px,0)}
  40%{clip-path:inset(60% 0 20% 0);transform:translate(-1px,0)}
  60%{clip-path:inset(10% 0 80% 0);transform:translate(3px,0)}
  80%{clip-path:inset(80% 0 5% 0);transform:translate(-2px,0)}
}
@keyframes glitch2{
  0%,100%{clip-path:inset(50% 0 30% 0);transform:translate(2px,0)}
  25%{clip-path:inset(15% 0 70% 0);transform:translate(-3px,0)}
  50%{clip-path:inset(75% 0 10% 0);transform:translate(1px,0)}
  75%{clip-path:inset(40% 0 40% 0);transform:translate(-2px,0)}
}
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
  20%,24%,55%{opacity:.6}
}
@keyframes scanline{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100vh)}
}
@keyframes drift{
  0%,100%{letter-spacing:-.02em}
  50%{letter-spacing:.04em}
}

/* TROUBLE hero overlay */
.trouble-hero-wrap{
  position:relative;overflow:hidden;
  background:var(--dark);
}
.trouble-hero-wrap .hero-word{
  color:var(--yel);
  animation:flicker 8s infinite, drift 6s ease-in-out infinite;
  text-shadow:4px 0 var(--pur), -4px 0 #ff006680;
}
.trouble-hero-wrap .hero-word::before,
.trouble-hero-wrap .hero-word::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;
  padding:inherit;
  color:var(--yel);
  font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;
}
.trouble-hero-wrap .hero-word::before{
  color:var(--pur);
  animation:glitch1 4s infinite;
}
.trouble-hero-wrap .hero-word::after{
  color:#ff006680;
  animation:glitch2 4s infinite .5s;
}
.trouble-hero-wrap .hero-sub{color:rgba(232,228,245,.6)}

/* scanline effect on hero */
.trouble-hero-wrap::after{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:rgba(255,230,0,.15);
  animation:scanline 4s linear infinite;
  pointer-events:none;z-index:10;
}

/* TROUBLE watermark — appears in section backgrounds */
.trbl-watermark{
  position:relative;overflow:hidden;
}
.trbl-watermark::before{
  content:'TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE TROUBLE';
  position:absolute;
  top:50%;left:-5%;
  transform:translateY(-50%) rotate(-8deg);
  font-size:clamp(3rem,7vw,6rem);
  font-weight:700;
  color:rgba(124,92,191,.06);
  white-space:nowrap;
  letter-spacing:.04em;
  line-height:1.2;
  pointer-events:none;
  z-index:0;
  width:110%;
  word-spacing:2rem;
}
.trbl-watermark > *{position:relative;z-index:1}

/* yellow accent watermark for dark sections */
.trbl-watermark-dk::before{
  color:rgba(255,230,0,.05);
}

/* TROUBLE divider — replaces boring dashed line */
.trbl-divider{
  position:relative;
  overflow:hidden;
  height:40px;
  display:flex;
  align-items:center;
  background:var(--dark);
}
.trbl-divider-inner{
  white-space:nowrap;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,230,0,.4);
  animation:marquee 18s linear infinite;
  display:inline-block;
  padding-left:100%;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* distorted section number */
.trbl-num{
  font-size:clamp(5rem,12vw,10rem);
  font-weight:700;
  color:var(--yel);
  line-height:1;
  opacity:.08;
  position:absolute;
  top:1rem;right:2rem;
  letter-spacing:-.05em;
  pointer-events:none;
  text-shadow:3px 0 var(--pur);
  user-select:none;
}

/* nav TROUBLE mode */
nav{border-bottom:2px solid var(--yel);box-shadow:0 2px 20px rgba(255,230,0,.15)}

/* date bar TROUBLE */
.date-bar{
  background:var(--dark);
  border-top:2px solid var(--yel);
  border-bottom:2px solid var(--yel);
  letter-spacing:.08em;
  position:relative;overflow:hidden;
}
.date-bar::before{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    90deg,
    transparent,transparent 40px,
    rgba(255,230,0,.03) 40px,rgba(255,230,0,.03) 41px
  );
  pointer-events:none;
}

/* edition cards — TROUBLE hover */
.ed-card:hover .ed-theme{
  color:var(--yel);
  text-shadow:2px 0 var(--pur);
}

/* archive hero TROUBLE text */
.arch-title{
  text-shadow:3px 0 rgba(124,92,191,.6), -1px 0 rgba(255,0,100,.3);
}

/* section headings glitch on hover */
h2.sh:hover{
  text-shadow:2px 0 var(--pur-md);
  transition:text-shadow .1s;
}

</style>
</head>
<body>

<nav>
  <button class="nav-logo" onclick="go('accueil')">PIPAS</button>
  <div class="nav-links">
    <button onclick="go('apropos')" id="btn-apropos">À propos</button>
    <button onclick="go('pratique')" id="btn-pratique">Pratique</button>
    <button onclick="go('p24')" id="btn-p24" class="apill">24</button>
    <button onclick="go('p22')" id="btn-p22" class="apill">22</button>
  </div>
</nav>

<!-- ── ACCUEIL ── -->
<div id="page-accueil" class="page active">
  <div class="trouble-hero-wrap"><div class="hero-word" data-text="PIPAS">PIPAS</div>
  <div class="hero-sub" style="padding-bottom:0">Biennale de Photographie des écoles · Genève · Par et pour les élèves</div>
  <img class="hero-img" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2025/05/ECO-2026.jpg" alt="PIPAS Ecoquartier Jonction 2026">
  <div class="date-bar">Prochaine édition — <span>27 mai au 14 juin 2026</span> · Ecoquartier Jonction · Plaine de Plainpalais · Centre de la Photographie Genève</div>
</div><!-- /trouble-hero-wrap -->

  <div class="sec two trbl-watermark">
    <div class="txt">
      <h2 class="sh">Le projet PIPAS</h2>
      <p><strong>PIPAS, c'est l'acronyme de Photo et Image Pour l'Apprentissage Scolaire.</strong> C'est une biennale de photographie par et pour les élèves, en mai, au Centre de la Photographie – Genève et à l'Ecoquartier Jonction.</p>
      <p>Plus de <strong>30 classes</strong> participent à la 3e édition et travaillent sur leurs projets — certaines avec un photographe professionnel, d'autres en autonomie.</p>
      <p>PIPAS est la <strong>première rencontre photographique suisse</strong> entièrement prise en charge par des jeunes, du primaire au secondaire II.</p>
    </div>
    <div class="trbl">
      <div class="trbl-bg">TROUBLE
TROUBLE
TROUBLE
TROUBLE
TROUBLE</div>
      <div class="trbl-in">
        <div class="trbl-ed">PIPAS 26 · 3e édition</div>
        <div class="trbl-t">TROUBLE</div>
        <div class="trbl-info">
          <strong>Appel à projets</strong><br>
          EP : 27.08.25<br>
          Sec. I & II : 14.09.25
        </div>
        <button class="trbl-cta" onclick="go('apropos')">En savoir plus →</button>
      </div>
    </div>
  </div>

  <div class="trbl-divider">
  <span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>
</div>

  <!-- Photo strip from site -->
  <div class="sec" style="padding-top:2rem;padding-bottom:2rem">
    <div class="three" style="gap:1rem">
      <div>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/CPG.jpg" alt="CPG Genève">
        <div class="img-caption">Centre de la Photographie – Genève</div>
      </div>
      <div>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/ECO.jpg" alt="Ecoquartier Jonction">
        <div class="img-caption">Ecoquartier Jonction</div>
      </div>
      <div>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/02/vernissage-pipas-2-300x200.jpg" alt="Vernissage 2024">
        <div class="img-caption">Vernissage 2e édition</div>
      </div>
    </div>
  </div>

  <div class="trbl-divider">
  <span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>
</div>

  <div class="sec">
    <h2 class="sh">Un projet en deux temps</h2>
    <div class="tl">
      <div class="tl-line"></div>
      <div class="tl-items">
        <div class="tl-item">
          <div class="tl-p">Sept → Mars</div>
          <div><div class="tl-n">La préparation</div><div class="tl-d">Les élèves apprennent à lire, décoder et créer des images avec des photographes professionnels et leurs enseignants.</div></div>
        </div>
        <div class="tl-item">
          <div class="tl-p">Mai</div>
          <div><div class="tl-n">La Biennale</div><div class="tl-d">Les travaux sont exposés à l'Ecoquartier Jonction, à la Plaine de Plainpalais et au CPG. Ateliers, visites et conférences pour classes et public.</div></div>
        </div>
        <div class="tl-item">
          <div class="tl-p">Tout au long</div>
          <div><div class="tl-n">Les élèves font tout</div><div class="tl-d">Identité visuelle (CFP Arts), supports (CFP Construction), Instagram (Digilab), accueil (Espace Entreprise).</div></div>
        </div>
      </div>
    </div>
  </div>

  <div class="trbl-divider">
  <span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>
</div>

  <div class="sec-dk trbl-watermark trbl-watermark-dk">
    <h2 class="sh-w">Les éditions</h2>
    <div class="three">
      <div class="ed-card" onclick="go('p22')">
        <div class="ed-num">1</div>
        <div class="ed-year">Édition 21–22</div>
        <div class="ed-theme">Photos-récits</div>
        <div class="ed-desc">La première édition. Naissance d'une biennale unique en Suisse.</div>
      </div>
      <div class="ed-card" onclick="go('p24')">
        <div class="ed-num">2</div>
        <div class="ed-year">Édition 23–24</div>
        <div class="ed-theme">Le quotidien est ailleurs</div>
        <div class="ed-desc">Regard transformé par la photographie. Le geste créatif comme exploration.</div>
      </div>
      <div class="ed-card" onclick="go('apropos')">
        <div class="ed-num">3</div>
        <div class="ed-year">Édition 25–26</div>
        <div class="ed-theme">Trouble</div>
        <div class="ed-desc">Flou, instabilité, perturbation — des états qui caractérisent notre époque.</div>
        <span class="ed-badge">En cours</span>
      </div>
    </div>
  </div>
</div>

<!-- ── À PROPOS ── -->
<div id="page-apropos" class="page">
  <div class="sec two">
    <div class="txt">
      <h2 class="sh">Le projet PIPAS</h2>
      <p><strong>PIPAS, c'est l'acronyme de Photo et Image Pour l'Apprentissage Scolaire.</strong> C'est une biennale de photographie, par et pour les élèves, en mai à Genève.</p>
      <p>Le but : <strong>sensibiliser et former les élèves aux enjeux liés à l'image</strong>, par la réflexion et par la pratique. Il est essentiel que les jeunes construisent une distance critique face au flux d'images du monde numérique.</p>
      <p>PIPAS est la <strong>première rencontre photographique suisse</strong> entièrement prise en charge par des jeunes — conception, réalisation, exposition, communication.</p>
      <p>PIPAS a aussi le désir de mettre en valeur <strong>l'école comme créatrice et actrice culturelle</strong> du territoire où elle est implantée.</p>
    </div>
    <div>
      <img class="img-tall" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/01/Pipas_2401-234-e1709912604417-800x510.png" alt="PIPAS">
      <div class="img-caption">Biennale PIPAS — exposition</div>
    </div>
  </div>

  <div class="trbl-divider">
  <span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>
</div>

  <div class="sec-lav2 trbl-watermark">
    <span class="trbl-num">3</span>
    <h2 class="sh">Thème — 3e édition</h2>
    <div class="two" style="align-items:center">
      <div class="trbl">
        <div class="trbl-bg">TROUBLE
TROUBLE
TROUBLE
TROUBLE</div>
        <div class="trbl-in">
          <div class="trbl-ed">PIPAS 26 · 3e édition · 2025–26</div>
          <div class="trbl-t">TROUBLE</div>
          <div class="trbl-info">Chaque biennale se décline autour d'un thème.<br><strong>"Trouble"</strong> pour la 3e édition.</div>
        </div>
      </div>
      <div class="txt">
        <p>Précédemment : <strong>"Photos-récits"</strong> (1re éd. 21–22), <strong>"Le quotidien est ailleurs"</strong> (2e éd. 23–24).</p>
        <p>Les élèves du CPF Arts préparent durant l'automne l'<strong>identité visuelle</strong> de cette 3e édition.</p>
        <p>Les espaces d'exposition se multiplient : Ecoquartier Jonction, <strong>Plaine de Plainpalais</strong> et le Centre de la Photographie — désormais étendu à la Maison de l'enfance et de l'adolescence.</p>
      </div>
    </div>
  </div>

  <div class="trbl-divider">
  <span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>
</div>

  <div class="sec">
    <h2 class="sh">Comité de pilotage</h2>
    <div class="team-grid">
      <div class="team-card"><div class="team-name">Andrianasolo Jean Luc</div><div class="team-role">Enseignant CFP Arts & photographe</div></div>
      <div class="team-card"><div class="team-name">Boulaz Serge</div><div class="team-role">Arts visuels ESII & formateur SEM</div></div>
      <div class="team-card"><div class="team-name">Bercher Virginie</div><div class="team-role">Histoire ESII & coordinatrice cinéma SEM</div></div>
      <div class="team-card"><div class="team-name">Hermenier Stéphane</div><div class="team-role">Histoire-géo ESII & collaborateur SEM</div></div>
      <div class="team-card"><div class="team-name">Mota Gabriel</div><div class="team-role">Biologie ESI</div></div>
      <div class="team-card"><div class="team-name">Oberson Paul</div><div class="team-role">Chef de service SEM</div></div>
      <div class="team-card"><div class="team-name">Pradervand Delavy Olivier</div><div class="team-role">Français ESII & formateur SEM</div></div>
      <div class="team-card"><div class="team-name">Privet Céline</div><div class="team-role">Arts plastiques ESII</div></div>
      <div class="team-card"><div class="team-name">Zamarbide Galliane</div><div class="team-role">Responsable Arts Visuels & ACM — DIP–SEE</div></div>
    </div>
  </div>
</div>

<!-- ── PRATIQUE ── -->
<div id="page-pratique" class="page">
  <div class="sec two">
    <div>
      <h2 class="sh">Lieux</h2>
      <div class="lieu-card">
        <div class="lieu-name">Centre de la Photographie – Genève (CPG)</div>
        <div class="lieu-addr">BAC — Bâtiment d'art contemporain<br>Rue des Bains 28 – Genève<br><span style="color:var(--pur);font-size:.8rem">Exposition ouverte dès le vernissage, 14 mai à 18h</span></div>
      </div>
      <div class="lieu-card">
        <div class="lieu-name">Ecoquartier Jonction</div>
        <div class="lieu-addr">Ch. du 23-Août – Genève</div>
      </div>
      <div class="lieu-card">
        <div class="lieu-name">Service écoles-médias (SEM)</div>
        <div class="lieu-addr">Rue des Gazomètres 5 – Genève</div>
      </div>
    </div>
    <div>
      <h2 class="sh">Contact</h2>
      <div class="contact-box" style="margin-bottom:1.5rem">
        <span class="c-label">Email</span>
        <a href="mailto:pipas@edu.ge.ch" class="c-email">pipas@edu.ge.ch</a>
      </div>
      <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2025/05/ECO-2026.jpg" alt="Ecoquartier Jonction 2026" style="border-radius:8px">
    </div>
  </div>
</div>

<!-- ── PIPAS 24 ── -->
<div id="page-p24" class="page">
  <div class="arch-hero">
    <div class="arch-hero-bg">LE QUOTIDIEN EST AILLEURS</div>
    <div class="arch-hero-in two" style="align-items:center;gap:2rem">
      <div>
        <div class="arch-badge">2e édition · Archive</div>
        <div class="arch-title">Le quotidien<br>est ailleurs</div>
        <div class="arch-dates">14 – 26 mai 2024 · Vernissage 14 mai</div>
        <div class="arch-lieux">Centre de la Photographie Genève + Écoquartier Jonction</div>
      </div>
      <img src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/01/PIPAS24Signature_2401-25-scaled-e1709913326207.jpg" alt="PIPAS 24 Signature" style="width:100%;max-width:280px;border-radius:8px;opacity:.85">
    </div>
  </div>

  <div class="sec two trbl-watermark">
    <div class="txt">
      <h2 class="sh">La thématique</h2>
      <p><strong>Une phrase volontairement énigmatique, poétique</strong> — pour que chacun puisse l'interpréter, se l'approprier très librement. Quotidien, ailleurs : deux mots destinés à guider ou ouvrir des horizons.</p>
      <p>Le quotidien peut être les gestes, ce qui se répète, ce dont on n'a même plus conscience. L'ailleurs peut être ce qui est lointain, différent, étrange.</p>
      <p>Derrière cette expression ouverte, la volonté de PIPAS d'explorer les multiples rapports de la <strong>photographie au réel</strong> — toujours le résultat d'un choix, un geste créatif.</p>
      <a href="https://edu.ge.ch/site/pipas/archives/pipas-2024/" target="_blank" class="arch-link">Voir le site complet ↗</a>
    </div>
    <div>
      <img class="img-tall" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/01/Pipas_2401-233.png" alt="PIPAS 24">
    </div>
  </div>

  <div class="trbl-divider">
  <span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>
</div>

  <div class="sec-lav2">
    <h2 class="sh">Expositions</h2>
    <div class="two" style="gap:1.5rem">
      <div>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/CPG.jpg" alt="CPG">
        <div class="img-caption" style="margin-bottom:.75rem">Centre de la Photographie – Genève</div>
        <div class="txt"><p>Rue des Bains 28, Genève. Exposition ouverte dès le vernissage du 14 mai à 18h.</p></div>
      </div>
      <div>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/03/ECO.jpg" alt="Ecoquartier">
        <div class="img-caption" style="margin-bottom:.75rem">Écoquartier Jonction</div>
        <div class="txt"><p>Ch. du 23-Août, Genève. Les travaux photographiques des élèves investissent les espaces extérieurs.</p></div>
      </div>
    </div>
  </div>

  <div class="sec">
    <div class="two">
      <div>
        <h2 class="sh" style="font-size:1.4rem">Vernissage — 14 mai 2024</h2>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2024/02/vernissage-pipas-2-300x200.jpg" alt="Vernissage 2024">
      </div>
      <div>
        <h2 class="sh" style="font-size:1.4rem">Photographes professionnels 23–24</h2>
        <div class="photogs">
          <span class="photog">Niels Ackermann</span>
          <span class="photog">Zoé Aubry</span>
          <span class="photog">Rebecca Bowring</span>
          <span class="photog">Yann Haeberlin</span>
          <span class="photog">Andreas Kressig</span>
          <span class="photog">Elisa Larvego</span>
          <span class="photog">Nicolas Lieber</span>
          <span class="photog">Christophe Rey</span>
          <span class="photog">Dorothée Thébert</span>
          <span class="photog">Anastasia Mityukova</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ── PIPAS 22 ── -->
<div id="page-p22" class="page">
  <div class="arch-hero">
    <div class="arch-hero-bg">PHOTOS-RÉCITS</div>
    <div class="arch-hero-in two" style="align-items:center;gap:2rem">
      <div>
        <div class="arch-badge">1re édition · Archive</div>
        <div class="arch-title">Photos-récits</div>
        <div class="arch-dates">3 – 14 mai 2022 · Vernissage 3 mai</div>
        <div class="arch-lieux">Centre de la Photographie Genève + Écoquartier Jonction</div>
      </div>
      <img src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2021/05/bandeau-1.png" alt="PIPAS 22 Bandeau" style="width:100%;max-width:320px;border-radius:8px;opacity:.85">
    </div>
  </div>

  <div class="sec two trbl-watermark">
    <div class="txt">
      <h2 class="sh">La première édition</h2>
      <p><strong>PIPAS est la première rencontre photographique suisse</strong> prise en charge par des élèves — de l'école primaire au Secondaire II.</p>
      <p>Avec la thématique « Photos-récits », les élèves ont été invité·e·s à rendre visibles et lisibles les <strong>relations qu'entretiennent textes et images</strong>.</p>
      <p>De la performance à la sculpture, en passant par le roman-photo, le dazibao, la création de parure ou encore le portrait fictionnalisé — leurs productions ont été exposées dans l'Écoquartier Jonction et au Centre de la Photographie.</p>
      <a href="https://edu.ge.ch/site/pipas/archives/pipas-22-photos-recits/" target="_blank" class="arch-link">Voir le site complet ↗</a>
    </div>
    <div>
      <img class="img-tall" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2023/05/4V0A7347-800x533.jpeg" alt="Vernissage PIPAS 22">
      <div class="img-caption">Vernissage 1re édition — 3 mai 2022</div>
    </div>
  </div>

  <div class="trbl-divider">
  <span class="trbl-divider-inner">TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   TROUBLE   ·   BIENNALE DE PHOTOGRAPHIE   ·   GENÈVE   ·   PAR ET POUR LES ÉLÈVES   ·   </span>
</div>

  <div class="sec-lav2">
    <h2 class="sh">Expositions</h2>
    <div class="two" style="gap:1.5rem">
      <div>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2023/05/DSCF0537-800x600.jpeg" alt="Expo CPG 22">
        <div class="img-caption" style="margin-bottom:.75rem">Centre de la Photographie Genève</div>
      </div>
      <div>
        <img class="img-med" src="https://edu.ge.ch/site/pipas/wp-content/uploads/sites/255/2023/05/4V0A7119-800x533.jpeg" alt="Expo Eco 22">
        <div class="img-caption" style="margin-bottom:.75rem">Écoquartier Jonction</div>
      </div>
    </div>
  </div>

  <div class="sec">
    <div class="two">
      <div class="txt">
        <h3 style="font-size:1.1rem;font-weight:700;color:var(--pur-dk);margin-bottom:1rem">Programme & ateliers</h3>
        <p>Journée de formation le <strong>7 mai 2022</strong> — <em>"Les pouvoirs de l'image et de la littérature à l'ère du numérique"</em> — ouverte à toutes et tous.</p>
        <p><strong>10 ateliers photographiques</strong> et <strong>8 ateliers d'écriture</strong> encadrés par des artistes dans des classes du canton.</p>
      </div>
      <div class="txt">
        <h3 style="font-size:1.1rem;font-weight:700;color:var(--pur-dk);margin-bottom:1rem">Partenaires 1re édition</h3>
        <p>Centre de la Photographie Genève, FMAC, FCAC, Centre d'Art Contemporain Genève, SEM, SEE, Association Freeze.</p>
      </div>
    </div>
  </div>
</div>

<!-- PARTNERS + FOOTER (always visible) -->
<div class="partners-bar">
  <h3>Soutiens & partenaires</h3>
  <div class="p-tags">
    <span class="p-tag">École et Culture</span>
    <span class="p-tag">Fondation Alfred et Eugénie Baur</span>
    <span class="p-tag">CPG – Centre de la Photographie Genève</span>
    <span class="p-tag">Ecoquartier Jonction · CODHA</span>
    <span class="p-tag">FMAC</span>
    <span class="p-tag">CFP Arts</span>
    <span class="p-tag">CFP Construction</span>
    <span class="p-tag">Espace Entreprise</span>
    <span class="p-tag">SEM</span><span class="p-tag">SEE</span>
    <span class="p-tag">Association Freeze</span>
  </div>
</div>
<footer>
  <span class="f-copy">© PIPAS – Biennale de Photographie · Genève · DIP – Service écoles-médias</span>
  <span class="f-logo">PIPAS.</span>
</footer>

<script>
function go(id){
  document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
  document.querySelectorAll('.apill,.nav-links button').forEach(b=>b.classList.remove('active'));
  const p=document.getElementById('page-'+id);
  if(p){p.classList.add('active');window.scrollTo(0,0);}
  const b=document.getElementById('btn-'+id);
  if(b)b.classList.add('active');
}
</script>
</body>
</html>

Embed Snippet on Your Site

Untitled Snippet

Comments

Add a Comment Cancel Reply