/* ============================================================
   COLLECTIF API — Accueil « Zoom arrière »
   Nuit pour l'image, papier pour le texte. Jaune API #f3b929.
   Sans JavaScript : la photo d'ouverture, puis le mur de tous les
   projets (tout le texte reste dans le HTML). Avec : le zoom arrière.
   ============================================================ */
:root{
  --nuit:#12100d; --nuit2:#1d1a15; --papier:#f1ede4; --papier2:#e7e1d4; --encre:#151412; --gris:#8a8378; --gris-p:#5f5a52; --jaune:#f3b929;
  --cond:"Big Shoulders Display", Impact, sans-serif; --serif:"Newsreader", Georgia, serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  --marge:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nuit)}
body{background:var(--nuit);color:var(--papier);font-family:var(--serif);font-size:18px;line-height:1.5;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
.fil{position:fixed;left:0;top:0;height:4px;background:var(--jaune);z-index:70;width:0}

/* ---------- En-tête (le même que les autres pages : logo, nom, lieu, menu) ---------- */
.barre{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px clamp(12px,2vw,22px);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;color:var(--encre)}
.barre>*{pointer-events:auto}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;background:var(--papier);padding:5px 12px 5px 5px;border:1.5px solid var(--encre)}
.marque img{width:34px;height:34px;object-fit:contain}
.marque span{display:flex;flex-direction:column;line-height:1.15}
.marque b{font-weight:600}
.marque small{font-size:10px;color:var(--gris-p);letter-spacing:.12em}
.nav-large ul{display:flex;gap:2px;background:var(--papier);border:1.5px solid var(--encre);padding:3px}
.nav-large a{display:block;text-decoration:none;padding:8px 10px}
.nav-large a:hover{background:var(--jaune)}
.nav-mobile{display:none;position:relative}
.nav-mobile summary{list-style:none;cursor:pointer;background:var(--papier);color:var(--encre);border:1.5px solid var(--encre);padding:11px 14px;font-weight:600}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile[open] summary{background:var(--jaune)}
.nav-mobile nav{position:absolute;right:0;top:calc(100% + 6px);background:var(--papier);border:1.5px solid var(--encre);min-width:230px}
.nav-mobile a{display:block;padding:14px 16px;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.15);font-size:14px}
@media (max-width:820px){ .nav-large{display:none} .nav-mobile{display:block} }

/* ---------- Tuile (miniature vivante) ---------- */
.tuile{position:relative;display:block;overflow:hidden;background:#000;aspect-ratio:4/3;text-decoration:none;color:#fff;container-type:inline-size;transition:opacity .35s, filter .35s}
.tuile .m img,.tuile .m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.tuile .m .vis{opacity:1}
.tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.78));pointer-events:none;transition:background .3s}
.tuile .t{position:absolute;z-index:2;left:8px;right:8px;bottom:6px;line-height:1.05}
.tuile .t b{display:block;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(15px,11cqi,30px);letter-spacing:.01em}
.tuile .t small{display:block;font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:3px}
.tuile .acc{position:absolute;z-index:2;left:8px;right:8px;top:8px;font:italic clamp(13px,7.5cqi,19px)/1.15 var(--serif);opacity:0;transform:translateY(-6px);transition:.3s;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.tuile:hover .acc,.tuile.touche .acc{opacity:1;transform:none}
.tuile:hover::after,.tuile.touche::after{background:linear-gradient(rgba(0,0,0,.55),transparent 45%,rgba(0,0,0,.78))}
.tuile .pastille{position:absolute;z-index:3;top:7px;right:7px;background:var(--jaune);color:var(--encre);font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px}
.tuile:hover .pastille,.tuile.touche .pastille{opacity:0}
@container (max-width:118px){ .tuile .t small,.tuile .acc{display:none} .tuile .t b{font-size:13px} .tuile .pastille{font-size:0;padding:4px;border-radius:50%} }
.tuile.eteinte{opacity:.13;filter:grayscale(1)}
.filtres{display:flex;flex-wrap:wrap;gap:6px}
.filtres button{background:transparent;color:var(--papier);border:1.5px solid rgba(241,237,228,.35);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 11px;cursor:pointer}
.filtres button:hover{border-color:var(--jaune)}
.filtres button.act{background:var(--jaune);border-color:var(--jaune);color:var(--encre)}
@media (max-width:640px){ .filtres{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px} .filtres button{white-space:nowrap} }

/* ---------- Le Zoom arrière ---------- */
.zoom{position:relative}
.zoom .scene{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--nuit)}
.mz{grid-auto-flow:dense}
.mz .tuile.une{grid-column:span 2;grid-row:span 2;aspect-ratio:4/3}
.mz .tuile .t b{font-size:clamp(11.5px,10cqi,24px);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.mz .tuile.une .t b{font-size:clamp(18px,7cqi,40px)}
/* dans le mur, juste le titre : ni date, ni thème, ni pastille, ni accroche */
.mz .tuile .t small,.mz .tuile .pastille,.mz .tuile .acc{display:none}
/* mur vivant : photos qui se succèdent et vidéos, mais aucun zoom sur les miniatures
   (le zoom lent « respire » faisait trembler les images, retiré à la demande de Jérôme le 20/10) */
.heros{position:absolute;inset:0;overflow:hidden;z-index:4;pointer-events:none;background:#000}
.heros img,.heros video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.heros img.on,.heros video.on{opacity:1}
.heros::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.1) 40%,rgba(0,0,0,.6));opacity:var(--ombre,1)}
.mots{position:absolute;z-index:5;left:0;right:0;top:50%;transform:translateY(-55%);text-align:center;pointer-events:none}
.mots div{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(64px,13vw,210px);line-height:.84;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(30px)}
.mots div:first-child{opacity:1;transform:none}
.mots div.or{color:var(--jaune)}
/* version « phrases » : trois phrases au lieu de trois mots, donc plus petites */
.mots.phrases{font-weight:inherit;padding:0 var(--marge)}
.mots.phrases div{font-size:clamp(40px,6vw,104px);line-height:.88;text-wrap:balance;max-width:16ch;margin:0 auto}
@media (max-width:640px){ .mots.phrases div{font-size:clamp(40px,12.5vw,64px)} }
html:not(.js) .mots.phrases{display:block;top:22%}
html:not(.js) .mots.phrases div{opacity:1;transform:none;font-size:clamp(30px,5vw,72px);max-width:none}
.intro .slogan{font-family:var(--serif);font-size:clamp(20px,2.2vw,32px);line-height:1.12;max-width:740px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.intro .slogan .k{display:block;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--jaune);margin-bottom:8px}
.intro .slogan em{font-style:normal;background:var(--jaune);color:var(--encre);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:none}
.compare{position:fixed;left:12px;bottom:12px;z-index:80;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--jaune);color:var(--encre);padding:8px 10px;text-decoration:none}
.intro{position:absolute;z-index:5;left:var(--marge);right:var(--marge);bottom:clamp(18px,4vh,40px);display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,32px);line-height:1.12;max-width:740px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.intro h1 .k{display:block;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--jaune);margin-bottom:8px}
.intro h1 em{font-style:normal;background:var(--jaune);color:var(--encre);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:none}
.passer{background:var(--papier);color:var(--encre);text-decoration:none;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;white-space:nowrap}
.passer:hover{background:var(--jaune)}
/* invitation à défiler : posée au-dessus de l'intro (hauteur calée en JS), s'efface dès qu'on descend */
.defile{display:none;position:absolute;z-index:5;left:0;right:0;margin:0;text-align:center;pointer-events:none;animation:defile 1.4s ease-in-out infinite}
.defile b{display:inline-block;background:var(--jaune);color:var(--encre);font:700 clamp(14px,1.3vw,17px) var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;box-shadow:0 6px 30px rgba(0,0,0,.55)}
.defile span{display:block;width:26px;height:26px;margin:4px auto 0;border-right:4px solid var(--jaune);border-bottom:4px solid var(--jaune);transform:rotate(45deg);filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.defile span+span{margin-top:-12px;opacity:.55}
@keyframes defile{0%,100%{translate:0 0}50%{translate:0 12px}}
.js .defile{display:block}
.haut-mur{position:absolute;z-index:3;left:var(--marge);right:var(--marge);top:72px;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 20px;opacity:0;pointer-events:none}
.haut-mur h2{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(30px,3.8vw,54px);line-height:.9}
.haut-mur h2 span{color:var(--jaune)}
#murZ{position:absolute;display:grid;gap:6px;transform-origin:0 0;will-change:transform}
.scene .legende{position:absolute;z-index:3;left:var(--marge);right:var(--marge);bottom:12px;margin:0;opacity:0;font:13px var(--mono);letter-spacing:.06em;color:var(--gris);min-height:24px}
.legende b{color:var(--jaune);font-weight:600}
/* le mur « dans la page » : sans JavaScript, c'est lui qu'on voit ; avec, il prend le relais à la fin du zoom */
.mur-flux{position:relative;z-index:6;display:grid;gap:6px;background:var(--nuit);grid-template-columns:repeat(auto-fill,minmax(min(46%,190px),1fr));padding:16px var(--marge) 40px}
@media (max-width:640px){ .haut-mur{top:66px} .passer{width:100%;text-align:center} }

/* avec JavaScript : la scène colle à l'écran pendant 3,75 écrans de défilement */
.js .zoom{height:475vh}
.js .zoom .scene{position:sticky;top:0}
.js .heros{inset:auto}
.js .mots div:first-child{opacity:0}
.js .mur-flux{opacity:0;pointer-events:none;padding:0}
.js .mur-flux.on{opacity:1;pointer-events:auto}
html:not(.js) .haut-mur,html:not(.js) .mots{display:none}

/* ---------- Qui sommes-nous ---------- */
.qui{background:var(--nuit);padding:clamp(56px,10vh,110px) var(--marge);border-top:1px solid rgba(241,237,228,.12)}
.qui p{max-width:780px;font-size:clamp(17px,1.4vw,20px);color:#d9d2c4;margin-top:18px}
.qui .grand{max-width:1000px;font-size:clamp(30px,4.4vw,64px);line-height:1.2;color:var(--papier);margin:0}
/* surlignage plein : il couvre les jambages (l, b, t, q) — l'ancien dégradé les laissait en noir sur fond noir */
.qui .grand em{font-style:normal;background:var(--jaune);color:var(--encre);padding:.02em .14em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.qui .devise{font:500 13px var(--mono);letter-spacing:.08em;color:var(--gris);margin-top:28px}
.qui .devise a{color:var(--jaune)}

/* ---------- Chapitres par thème (papier) ---------- */
.chapitres{background:var(--papier);color:var(--encre)}
.chap{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2.4fr);gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(48px,9vh,96px) 0 clamp(48px,9vh,96px) var(--marge);border-top:1.5px solid var(--encre)}
.chap:first-child{border-top:0}
.chap .num{font:600 13px var(--mono);letter-spacing:.16em;color:var(--gris-p)}
.chap h2{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(64px,9vw,150px);line-height:.82;margin:.32em 0 16px}
.chap h2 em{font-style:normal;background:linear-gradient(transparent 55%,var(--jaune) 55%,var(--jaune) 92%,transparent 92%)}
.chap p{font-size:clamp(17px,1.4vw,20px);max-width:420px}
.chap .lien{display:inline-block;margin-top:18px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--encre);color:var(--papier);padding:11px 14px;text-decoration:none}
.chap .lien:hover{background:var(--jaune);color:var(--encre)}
.rangee{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,24vw,340px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--marge) 14px 0;scrollbar-width:thin}
.rangee .tuile{aspect-ratio:4/5;scroll-snap-align:start}
@media (max-width:820px){ .chap{grid-template-columns:1fr;padding-right:0} .chap p{padding-right:var(--marge)} .rangee{grid-auto-columns:62vw} }

/* ---------- Évolution (frise) ---------- */
.evol{background:var(--nuit2);padding:clamp(48px,9vh,90px) 0 clamp(40px,7vh,70px) var(--marge)}
.evol h2{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(40px,5vw,76px);line-height:.9;margin-bottom:8px}
.evol h2 span{color:var(--jaune)}
.evol>p{color:var(--gris);font-size:16px;margin-bottom:24px;padding-right:var(--marge)}
.frise{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,19vw,270px);gap:0;overflow-x:auto;padding:0 var(--marge) 14px 0;scrollbar-width:thin}
.etape{border-left:1.5px solid rgba(241,237,228,.25);padding:0 18px 4px}
.etape .an{font:600 13px var(--mono);color:var(--jaune);letter-spacing:.1em}
.etape h3{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:34px;line-height:.95;margin:4px 0 10px}
.etape .img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#000;margin-bottom:10px}
.etape p{font-size:14.5px;line-height:1.4;color:#d9d2c4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.evol .plus{display:inline-block;margin-top:20px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--jaune)}

/* ---------- Pied de page (le même que les autres pages) ---------- */
.pied{background:#0d0c0b;color:var(--papier);padding:60px var(--marge) 40px;font-size:16px}
.pied-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.pied h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--jaune);margin-bottom:12px;font-weight:600}
.pied li{margin-bottom:8px}
.pied li small{display:block;font-size:13px;opacity:.6}
.pied a{text-decoration:none;border-bottom:1px solid rgba(241,237,228,.35)}
.pied a:hover{color:var(--jaune);border-color:var(--jaune)}
.pied a span{opacity:.6}
.pied .gros{font-size:18px;word-break:break-all}
.pied address{font-style:normal;margin-top:12px;opacity:.85}
.tel{font:inherit;font-family:var(--mono);font-size:13px;background:transparent;color:inherit;border:1.5px solid currentColor;padding:6px 10px;cursor:pointer}
.tel.vu{border-color:transparent;padding-left:0;font-size:17px;cursor:text}
.soutiens{margin-top:46px;padding-top:20px;border-top:1px solid rgba(241,237,228,.2);font-size:14px;opacity:.75}
.mention{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.5;margin-top:16px}
@media (max-width:820px){ .pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .pied-grille{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
@media (max-width:640px){ .compare{left:50%;transform:translateX(-50%);bottom:auto;top:64px;white-space:nowrap} }