avec un
— separees en 2
.fait-line
distincts pour permettre l'entree au scroll indépendante de chaque
ligne (voir js/main.js). margin:0 sur toutes + line-height 1.3 recree
le meme rythme vertical qu'avant avec le
. */
/* Taille 64px (30/09 soir) : mesuree en direct sur creativegiants.art, sur
le paragraphe en gras visuel correspondant de l'encart "what we do"
("We are artists, designers..."), a une largeur de viewport de 1440px —
la meme largeur de reference que notre propre .wrap (max-width:1440).
64px est aussi une valeur telle-quelle de l'echelle du token Switzer de
Boris, avec son propre palier de letter-spacing (-0.027em), pas besoin
d'interpoler. Remplace les 44px choisis avant d'avoir cette mesure. */
.fait-phrase{font-family:var(--font-switzer); font-weight:300; color:var(--ink); margin:0; font-size:64px; line-height:1.3; letter-spacing:-0.027em; max-width:900px;}
.fait-phrase .word-swap{display:inline-block; vertical-align:top;}
.fait-phrase .word-current{display:inline-block; text-transform:uppercase; color:var(--violet);}
/* .fait-sub : ne porte plus que margin-top:0 (30/09, retour Boris) : avant,
28px ici cassait le rythme vertical regulier entre les 3 lignes (l'ecart
entre cette ligne et la precedente etait donc bien plus grand qu'entre
les 2 lignes du dessus, qui n'ont elles que le line-height de
.fait-phrase) — desormais les 3 lignes s'enchainent avec exactement le
meme espacement, uniquement via line-height:1.3, comme un seul bloc de
texte. (Le margin-left autrefois pose ici en JS pour aligner sous le mot
"EYES." a ete retire le 30/09 soir — voir le commentaire HTML dans
build_pages.py : #faitGroup s'aligne desormais naturellement, plus besoin
de mesure JS.) */
.fait-sub{margin-top:0;}
/* .fait-para : 4e paragraphe (30/09) sous le bloc des 3 lignes — le pitch
"16 ans de carriere..." demande par Boris. Typo = le 3e traitement
typographique releve sur l'encart "what we do" de creativegiants.art
(mesure en direct via getComputedStyle) : meme famille Switzer que le
reste, mais en registre "lecture" — plus petit, plus gris/attenue,
interligne plus genereux — par opposition au registre "display" des 3
lignes au-dessus (grande taille, encre pleine, interligne serre). Taille
18px (30/09 soir) : mesuree en direct sur le paragraphe gris
correspondant ("We go beyond the traditional agency model..."), meme
largeur de reference 1440px que .fait-phrase ci-dessus — remplace les
16px choisis avant d'avoir cette mesure. max-width 600px + margin:auto
(01/10, retour de Boris) : la zone de texte etait jugee trop etroite, et
plutot que de la garder alignee a gauche comme le reste du groupe (ce
qui posait probleme), Boris a simplifie : elle est maintenant centree
horizontalement dans la colonne de contenu, independamment de
l'alignement du reste de #faitGroup au-dessus. */
.fait-para{font-family:var(--font-switzer); font-weight:300; font-size:18px; line-height:1.43; letter-spacing:-0.018em; color:var(--fog); max-width:600px; margin:32px auto 0;}
.marquee{overflow:hidden; padding:32px 0;}
.marquee-track{display:flex; gap:64px; width:max-content; animation:marquee-scroll 24s linear infinite;}
.marquee-logo{font-family:var(--font-switzer); font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--border-soft); padding:16px 32px; white-space:nowrap; flex:none;}
/* ---- Travaux : scroll horizontal piege (>=901px) — porte depuis
horizontal-scroll-prototype.html, meme mecanisme que la section piegee de
creativegiants.art (pin + un seul tween scrub 1:1 sur le scroll vertical).
Desactive sous 901px, voir regles mobiles plus haut et js/main.js. ---- */
.h-scroll-section{position:relative; height:100vh; overflow:hidden; background:var(--canvas); border-top:1px solid var(--border-soft); padding:0;}
.h-scroll-heading{position:absolute; top:0; left:0; right:0; z-index:2; padding-top:56px;}
.h-scroll-row{display:flex; flex-direction:row; height:100%; width:max-content; will-change:transform;}
/* Mise en page refondue le 01/10/2026, corrigee 2 fois le meme jour.
3e version (retour avec capture annotee de Boris) : le titre et le bloc
meta ne sont ni des calques par-dessus l'image (1ere version), ni
empiles au-dessus/en-dessous du carre (2e version) — Boris a dessine des
fleches montrant qu'il les voulait sur les COTES du carre : le titre a
GAUCHE de l'image (aligne en haut du carre), le bloc meta a DROITE de
l'image (aligne en bas du carre), le carre lui-meme recentre entre
l'eyebrow du dessus et la ligne de progression du dessous. .h-slide-media
passe donc en flex ROW (titre | carre | meta), chaque cote "epingle" au
bord haut ou bas du carre via align-self sur un container stretch. */
/* 4e version (01/10/2026) — parallaxe + titre en contraste inverse, repris
de creativegiants.art (mecanisme inspecte en direct : voir js/main.js).
Le carre video est le SEUL element dans le flux de .h-slide-media : le
titre et le bloc meta sont en position absolue, accroches aux bords du
carre. Deux raisons :
1) le carre reste parfaitement centre dans le slide quelle que soit la
longueur du titre (en flex row, un titre plus long decalait le carre) ;
2) le titre est ancre par son bord DROIT au carre (right:...) au lieu
d'etre une boite de largeur fixe calee a gauche : la fin du mot est
donc toujours a la meme distance du carre pour les 3 projets (bug
signale par Boris : "e-Learning", court, laissait un vide plus grand
que les 2 autres titres). main.js resserre en plus la boite du titre a
sa plus longue ligne (sinon, sur un titre qui passe a la ligne, la
boite garde la largeur max et le vide reapparait).
Au repos, le titre mord de --h-title-overlap sur le carre ; pendant
l'arrivee du slide, le parallaxe (main.js) fait glisser le carre SOUS le
titre, et mix-blend-mode:difference inverse la couleur du texte la ou il
passe sur la video — les 2 effets observes sur creativegiants.art. */
.h-slide{flex:none; width:100vw; height:100%; display:flex; align-items:center; justify-content:center; padding:0 80px; --h-title-overlap:1.4em; --h-side-gap:40px;}
.h-slide-media{position:relative; flex:none;}
.h-slide .thumb{position:relative; z-index:1; flex:none; height:min(640px, calc(100vh - 312px), 44vw); width:min(640px, calc(100vh - 312px), 44vw); aspect-ratio:1/1; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-soft); display:block;}
.h-slide .thumb video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
/* Taille du carre (01/10/2026, Boris, apres challenge UX) : plus de taille
fixe — le carre prend la hauteur libre entre l'eyebrow et la ligne de
progression (100vh - 151px) moins ~80px de marge en haut ET en bas
(d'ou 100vh - 312px), plafonne a 640px (= +1/3 de l'ancien 480px, atteint
sur grand ecran) et a 44vw. 1440x900 -> ~588px (+23%, ~65% de la hauteur
comme creativegiants), petits portables -> taille quasi inchangee mais
l'image respire toujours.
Titre : 52px -> 60px (01/10/2026, meme proportion que le carre ; tracking
-0.0254em, interpole sur le token entre 54 et 64px). Le chevauchement
passe en em (1.4em, = les 72px d'avant a 52px) pour suivre la taille du
titre. Historique : taille doublee (01/10/2026) — clamp(20px,2vw,26px) ->
clamp(40px,4vw,52px) ; tracking recale sur le token Switzer (~52px ->
-0.0227em). max-width : jamais plus large que l'espace libre a gauche du
carre (moitie de la marge restante du slide, moins le padding de 80px,
plus le chevauchement) — les % d'un element en absolute se rapportent a
.h-slide-media, c.-a-d. a la largeur du carre. width:max-content
indispensable : une boite en absolute ancree seulement par "right" n'a
que ~72px de largeur "disponible" (celle du chevauchement) et s'effondre
sinon a un mot par ligne (bug vu en verification). pointer-events:none :
le clic sur la zone de chevauchement tombe bien sur le lien du carre. */
.h-title-overlay{position:absolute; top:0; right:calc(100% - var(--h-title-overlap)); z-index:2; width:max-content; max-width:min(480px, calc((100vw - 100%) / 2 - 80px + var(--h-title-overlap))); margin:0; font-family:var(--font-switzer); font-weight:300; font-size:clamp(44px,4.2vw,60px); line-height:1; letter-spacing:-0.0254em; color:var(--offwhite); text-align:left; text-wrap:balance; mix-blend-mode:difference; pointer-events:none;}
/* Bloc a DROITE du carre, cale sur son bord bas (3e version, inchange sur
le principe) — texte aligne a gauche (demande de Boris). Largeur plafonnee
a l'espace libre a droite du carre, pour ne jamais sortir de l'ecran sur
un desktop etroit. */
.h-slide-info{position:absolute; bottom:0; left:calc(100% + var(--h-side-gap)); z-index:1; width:min(240px, calc((100vw - 100%) / 2 - 80px - var(--h-side-gap))); display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;}
.h-slide-info .num{font-family:var(--font-switzer); font-size:11px; letter-spacing:1px; color:var(--ink-faint); margin:0;}
.h-slide-tags{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;}
.h-slide-info .desc{font-size:13px; line-height:1.5; color:var(--body); max-width:30ch; margin:0;}
/* Separateur + barre de progression fusionnes (01/10/2026) : avant, la
barre de progression etait plaquee tout en bas du viewport (bord a
bord), sans lien visuel avec la ligne all-link/pager juste au-dessus.
Maintenant un seul bloc .h-scroll-foot porte les deux, avec le meme
alignement 80px que le reste du site — la ligne (.progress-track) agit
a la fois comme separateur ET comme barre de progression (vide au
depart, se remplit a 100% en fin de scroll piege, meme comportement que
creativegiants.art). .progress-fill reste pilote par main.js (largeur en
%), la repositionner ici ne demande aucun changement JS. */
.h-scroll-foot{position:absolute; left:80px; right:80px; bottom:36px; z-index:5;}
.progress-track{position:relative; height:2px; background:var(--border-soft); margin-bottom:16px; overflow:hidden;}
.progress-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--ink);}
.h-scroll-hud{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-switzer); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint);}
.h-scroll-hud .all-link{color:var(--ink-faint); text-decoration:none; display:flex; align-items:center; gap:8px; transition:color .2s ease;}
.h-scroll-hud .all-link:hover{color:var(--ink);}
.h-scroll-hud .pager .cur{color:var(--ink);}
@keyframes marquee-scroll{from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
section{padding-top:96px; padding-bottom:96px;}
.tag-sub{display:inline-flex; align-items:center; border:1px solid var(--border-soft); border-radius:999px; padding:7px 14px; background:transparent; transition:border-color .2s ease; cursor:pointer; text-decoration:none;}
.tag-sub:hover{border-color:var(--ink);}
.tag-sub .label{font-family:var(--font-switzer); font-weight:400; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint);}
.tabs-row{border-bottom:1px solid var(--border-soft); padding-bottom:16px; margin-bottom:40px;}
.tabs{display:flex; gap:32px;}
.tab{font-family:var(--font-switzer); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; padding-bottom:16px; margin-bottom:-17px;}
.tab.active{color:var(--ink); border-bottom:2px solid var(--ink);}
.tab:hover{color:var(--ink);}
section{padding-top:64px; padding-bottom:64px;}
.meta-row{display:flex; gap:40px; font-family:var(--font-switzer); font-size:12px; color:var(--ink-faint); letter-spacing:0.5px;}
.meta-row b{color:var(--ink-dim); font-weight:400;}
.factsheet{border:1px solid var(--border-soft); padding:24px; display:flex; flex-direction:column; gap:20px;}
.factsheet .row{display:flex; flex-direction:column; gap:4px;}
.factsheet .label{font-family:var(--font-switzer); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faintest);}
.factsheet .value{font-family:var(--font-switzer); font-size:15px; color:var(--ink);}
.meta-bar{border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:24px 0; display:flex; flex-wrap:wrap; gap:40px clamp(24px, 2.6vw, 40px);}
.meta-bar .item{display:flex; flex-direction:column; gap:6px;}
.meta-bar .label{font-family:var(--font-switzer); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faintest);}
.meta-bar .value{font-family:var(--font-switzer); font-size:15px; color:var(--ink);}
.www-label{font-family:var(--font-switzer); font-size:12px; letter-spacing:1px; text-transform:uppercase; margin:0;}
.www-body p{max-width:640px; margin:0 0 16px;}
.www-body p:last-child{margin-bottom:0;}
.www-list{list-style:none; margin:0; padding:0; max-width:640px;}
.www-list li{position:relative; padding-left:22px; margin-bottom:12px;}
.www-list li:last-child{margin-bottom:0;}
.www-list li::before{content:"—"; position:absolute; left:0; color:var(--ink-faintest);}
.discipline-row{display:grid; grid-template-columns:220px 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--border-soft);}
/* Page About (01/10/2026) : les 4 disciplines sur une ligne, bouton CV au bout. */
.discipline-line{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:24px 0; border-top:1px solid var(--border-soft); margin-top:16px;}
.discipline-list{display:flex; align-items:center; flex-wrap:wrap; gap:16px 48px; margin:0; padding:0; list-style:none;}
.btn-cv{display:inline-block; text-decoration:none; flex:none;}
.discipline-row p{margin:0; max-width:560px;}
.contact-info{display:flex; flex-direction:column; gap:24px;}
.contact-info .row{display:flex; flex-direction:column; gap:4px;}
.contact-info .label{font-family:var(--font-switzer); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faintest);}
.contact-info .value{font-family:var(--font-switzer); font-size:20px; color:var(--ink);}
.projects-page main{padding-bottom:32px;}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px){
.projects-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 860px){
body{margin:0; background:var(--canvas); color:var(--body); font-family:var(--font-switzer); font-size:16px; line-height:1.5;}
.wrap{max-width:100%; margin:0 auto;}
.pad{padding-left:20px; padding-right:20px;}
.h2{font-family:var(--font-switzer); font-weight:300; color:var(--ink); margin:0; font-size:28px; letter-spacing:-0.019em;}
header.site{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid transparent;} /* 02/10/2026 : filet sous le header mobile retire (bordure gardee transparente pour ne pas changer la hauteur de 73px) */
.wordmark svg{height:22px; width:auto; display:block;}
header.site .wordmark{width:36px; height:36px; border-radius:50%; justify-content:center; background:var(--void); border:1px solid var(--border-strong); color:var(--paper); flex:none;}
header.site .wordmark svg{height:14px; width:auto; display:block;}
.menu-btn{display:flex; align-items:center; gap:10px; background:var(--void); border:1px solid var(--border-strong); border-radius:999px; padding:9px 16px; cursor:pointer; color:var(--paper); font-family:var(--font-switzer); font-size:11px; letter-spacing:1px; text-transform:uppercase;}
footer.site{border-top:1px solid var(--border-strong); padding:48px 24px 28px;}
footer.site .footer-top{display:flex; flex-direction:column; gap:32px; padding-bottom:28px;}
footer.site .footer-brand .wordmark svg{height:20px; width:auto; display:block;}
footer.site .footer-tag{font-family:var(--font-switzer); font-size:13px; color:var(--ink-faint); max-width:36ch; margin:14px 0 0; line-height:1.6;}
footer.site .footer-nav a{font-family:var(--font-switzer); font-size:12px; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-dim); text-decoration:none; width:fit-content;}
footer.site .footer-bottom{display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding-top:20px; border-top:1px solid var(--border-soft); font-family:var(--font-switzer); font-size:11px; color:var(--ink-faint); letter-spacing:0.5px;}
.get-touch-form{display:flex; flex-direction:column; gap:24px; margin-top:28px;}
.gt-field{display:flex; flex-direction:column; gap:8px;}
.gt-field label{font-family:var(--font-switzer); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint);}
.gt-field input, .gt-field textarea{font-family:var(--font-switzer); font-size:18px; color:var(--ink); background:transparent; border:none; border-bottom:1px solid var(--border-soft); border-radius:0; padding:0 0 10px; outline:none; transition:border-color .2s ease; width:100%;}
.gt-field textarea{resize:none; min-height:48px; line-height:1.4; font-family:inherit;}
.gt-actions{margin-top:4px;}
.gt-btn{position:relative; display:inline-flex; align-items:center; gap:10px; border:none; border-radius:999px; overflow:hidden; cursor:pointer; padding:5px 5px 5px 20px; height:44px; font-family:var(--font-switzer); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--paper);}
.gt-btn:hover .gt-btn__fill, .gt-btn:active .gt-btn__fill{height:100%;}
.gt-btn__icon{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--paper); color:var(--void); flex:none; transition:background-color .6s cubic-bezier(.25,.1,.25,1), color .6s cubic-bezier(.25,.1,.25,1);}
.gt-btn__icon svg{width:13px; height:13px; display:block;}
.gt-btn:hover .gt-btn__icon, .gt-btn:active .gt-btn__icon{background:var(--void); color:var(--violet);}
.folio{font-family:var(--font-switzer); font-weight:400; font-size:11px; letter-spacing:1px;}
.meta-row{display:flex; flex-direction:column; gap:8px; font-family:var(--font-switzer); font-size:12px; color:var(--ink-faint); letter-spacing:0.5px;}
.factsheet{border:1px solid var(--border-soft); padding:20px; display:flex; flex-direction:column; gap:18px;}
section{padding-top:40px; padding-bottom:40px;}
.eyebrow{font-family:var(--font-switzer); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;}
.h1{font-family:var(--font-switzer); font-weight:300; color:var(--ink); margin:0; letter-spacing:-0.5px;}
.tabs-row{border-bottom:1px solid var(--border-soft); margin-bottom:28px;}
.tabs{display:flex; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:14px;}
.tab{flex:none; white-space:nowrap; font-family:var(--font-switzer); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; padding-bottom:14px; margin-bottom:-15px;}
.card-project{display:flex; flex-direction:column; gap:16px;}
.card-project .card-whole{gap:16px;}
.tab{flex:none;}
.card-project .thumb{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-soft); transition:border-color .3s ease;}
.card-project .thumb-tags{position:absolute; top:12px; right:12px; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.card-project .thumb-tags .tag-discipline{background:rgba(14,15,17,.72); border-color:rgba(255,255,255,.18); backdrop-filter:blur(3px); padding:6px 12px;}
.card-project .title{font-family:var(--font-switzer); font-weight:300; font-size:16px; letter-spacing:-0.018em; text-transform:none; color:var(--offwhite); margin:0; line-height:1.3; transition:color .2s ease;}
.card-project .cap .title{font-size:28px; line-height:1.05; letter-spacing:-0.019em;}
.more-soon{margin-top:48px; padding-top:24px;}
.tag-discipline{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--border-strong); border-radius:999px; padding:9px 18px; background:transparent; text-decoration:none;}
.tag-sub{display:inline-flex; align-items:center; border:1px solid var(--border-soft); border-radius:999px; padding:7px 14px; background:transparent; text-decoration:none;}
.meta-bar{border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:20px 0; display:flex; flex-direction:column; gap:16px;}
.meta-bar .item{display:flex; flex-direction:column; gap:4px;}
.www-row{display:flex; flex-direction:column; gap:12px; padding:28px 0;}
.www-body p{margin:0 0 14px;}
.www-list{list-style:none; margin:0; padding:0;}
.www-list li{position:relative; padding-left:20px; margin-bottom:10px;}
.discipline-row{display:flex; flex-direction:column; gap:10px; padding:20px 0; border-top:1px solid var(--border-soft);}
.discipline-line{flex-direction:column; align-items:stretch; gap:24px; padding:20px 0;}
.discipline-list{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;}
.btn-cv{text-align:center;}
.discipline-row p{margin:0;}
:root{--void:#000000; --obsidian:#0e0f11; --carbon:#141617; --graphite:#1d2023; --slate:#21223a; --ash:#303438; --steel:#3a3d40; --fog:#61626b; --smoke:#8d8d96; --cloud:#a1a1aa; --silver:#cfcfd3; --bone:#999999; --paper:#ffffff; --violet:#5741e8; --live-wire:#d2e841; --circuit-teal:#00cbaa; --canvas:var(--void); --surface:var(--obsidian); --surface-2:var(--carbon); --spotlight:var(--slate); --border-strong:var(--steel); --border-soft:var(--ash); --ink:var(--paper); --body:var(--silver); --ink-dim:var(--cloud); --ink-faint:var(--bone); --ink-faintest:var(--fog); --acc-graphicdesign:var(--silver); --acc-motiondesign:var(--circuit-teal); --acc-uxui:var(--violet); --acc-photo:var(--live-wire); --acc-graphicdesign-text:var(--acc-graphicdesign); --acc-motiondesign-text:var(--acc-motiondesign); --acc-uxui-text:#9284f0; --acc-photo-text:var(--acc-photo);}
.btn{font-family:var(--font-switzer); font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--canvas); background:var(--ink); border:none; border-radius:999px; padding:16px 28px; width:100%; cursor:pointer; transition:background-color .2s ease;}
.contact-info{display:flex; flex-direction:column; gap:20px;}
.contact-info .value{font-family:var(--font-switzer); font-size:18px; color:var(--ink);}
.h3{font-family:var(--font-switzer); font-weight:300; color:var(--ink); margin:0; font-size:18px; letter-spacing:-0.018em;}
/* 73px = hauteur reelle mesuree de header.site en mobile (padding 18px*2 +
bouton menu 36px + bordure 1px). Meme principe qu'en desktop, voir
.hero-stage plus haut dans ce fichier — ratios legerement reduits pour
ne pas trop allonger le scroll sur petit ecran. Bandeau agrandi (48->56vh)
et +73px ajoutes directement sur la hauteur de la zone meta le 29/09,
meme correctif que desktop (voir .hero-bottom-meta plus haut) — sans
ca, 73px de video brute restaient visibles sans aucun voile entre la
zone meta et la section suivante sur mobile aussi. */
.hero-stage{height:calc(120vh + 73px); margin-top:-73px; min-height:640px;}
.hero-top-band{height:56vh;}
.hero-bottom-meta{height:calc(64vh + 73px); padding:0 0 24px;}
.hero-meta-loc{font-size:11px;}
.hero-meta-role{font-size:28px;}
.h-scroll-heading{position:static; padding-top:40px; padding-bottom:28px;} /* 02/10/2026 : en mobile le titre de section reprend sa place dans le flux, sinon le 1er titre de projet passait dessus */
.h-scroll-row{flex-direction:column; width:100%; height:auto; transform:none !important;}
.h-scroll-section{height:auto; overflow:visible;}
.h-slide{width:100%; height:auto; padding:0 20px 56px; display:flex; justify-content:center;}
/* Sur mobile, pas de place pour le titre/meta a cote du carre (3e version
desktop, 01/10) — on repasse .h-slide-media en colonne empilee (titre,
carre, meta), chacun pleine largeur, comme avant le passage en ligne. */
.h-slide-media{display:flex; flex-direction:column; align-items:stretch; gap:16px; width:100%; max-width:420px;}
/* Titre : taille doublee aussi sur mobile (clamp(20px,6vw,28px) ->
clamp(40px,12vw,56px)). Plus de position absolue ni de blend-mode sur
mobile : empile au-dessus du carre, sans chevauchement (pas de scroll
horizontal donc pas de parallaxe sous 901px). */
.h-title-overlay{position:static; align-self:flex-start; width:auto !important; max-width:100%; font-size:clamp(46px,13.8vw,64px); mix-blend-mode:normal;}
.h-slide .thumb{width:100%; height:auto;}
.h-slide-info{position:static; align-self:flex-start; width:auto;}
.h-slide-info .desc{max-width:24ch;}
.h-scroll-foot{display:none;}
.stats-row{display:flex; flex-wrap:wrap; gap:28px; border-top:1px solid var(--border-soft); padding-top:20px;}
.stat-num{font-family:var(--font-switzer); font-weight:300; font-size:28px; letter-spacing:-0.019em; color:var(--ink);}
.stat-lbl{font-family:var(--font-switzer); font-size:10px; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-faint);}
.fait-phrase{font-size:20px; line-height:1.35; letter-spacing:-0.018em;}
/* Sur mobile, l'eyebrow passe generalement sur plusieurs lignes : le
decalage horizontal sous "EYES." (voir js/main.js) est desactive sous
861px, .fait-sub reste alignee a gauche comme les 2 lignes du dessus. */
.fait-sub{margin-top:0;}
.fait-para{margin-top:20px;}
.marquee{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:24px 0;}
.marquee-track{display:flex; gap:36px; width:max-content;}
.get-touch-grid{grid-template-columns:1fr; gap:32px;}
.about-teaser-grid{grid-template-columns:1fr; gap:24px;}
.about-teaser-grid > div:first-child{max-width:220px;}
.about-grid{grid-template-columns:1fr; gap:28px;}
.about-grid > div:first-child{max-width:260px;}
.contact-grid{grid-template-columns:1fr; gap:40px;}
.contact-grid > form{margin-top:0;}
.projects-grid{grid-template-columns:1fr;}
}
/* ==========================================================================
Menu overlay (vraie superposition JS — remplace l'artboard "MenuOpen" du
prototype, qui n'était qu'une page séparée sans logique réelle). Reprend
le visuel de MenuOpen.dc.html/-Mobile.dc.html.
========================================================================== */
.menu-overlay{position:fixed; inset:0; z-index:100; background:var(--canvas); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;}
.menu-overlay.is-open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity .3s ease, transform .3s ease;}
.menu-panel{flex:1; display:flex; flex-direction:column; justify-content:center; padding:40px 80px 0; min-height:0;}
.menu-list{display:flex; flex-direction:column; gap:4px;}
.menu-item{display:flex; align-items:baseline; gap:20px; text-decoration:none; color:var(--ink-faintest);}
.menu-item .idx{font-family:var(--font-switzer); font-size:14px; color:var(--ink-faint); width:2.5ch; flex:none;}
.menu-item .word{font-family:var(--font-switzer); font-weight:300; font-size:104px; line-height:1.06; letter-spacing:-0.04em; transition:color .2s ease;}
.menu-item:hover, .menu-item.is-active{color:var(--ink);}
.menu-item.is-active .idx{color:var(--circuit-teal);}
.menu-foot{display:flex; align-items:center; justify-content:space-between; padding:20px 80px 40px; font-family:var(--font-switzer); font-size:11px; letter-spacing:0.5px; color:var(--ink-faint); margin-top:32px; border-top:1px solid var(--border-soft);}
.lang-toggle{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-switzer); font-size:11px; letter-spacing:1px;}
/* Bascule FR/EN flottante (01/10/2026) : a gauche du bouton Menu, fixe,
mix-blend-mode:difference (meme technique que les titres du listing) ->
texte blanc sur fond sombre, noir sur les bandeaux creme, lisible sur
tous les fonds au scroll. right/top par defaut approximatifs (sans JS),
affines au pixel par main.js d'apres la position reelle du bouton Menu.
z-index au-dessus du menu plein ecran (100) : reste accessible menu ouvert.
Zone cliquable elargie (padding) pour l'accessibilite tactile. */
.lang-float{position:fixed; top:42px; right:200px; z-index:110; transform:translateY(-50%); mix-blend-mode:difference; color:#fff;}
.lang-float .lang-toggle{font-size:12px; gap:4px;}
.lang-float .lang-toggle .is-current{color:#fff; padding:10px 4px;}
.lang-float .lang-toggle .sep{color:#fff; opacity:.4;}
.lang-float .lang-toggle a{color:#fff; opacity:.55; padding:10px 4px; transition:opacity .2s ease;}
.lang-float .lang-toggle a:hover, .lang-float .lang-toggle a:focus-visible{opacity:1;}
.lang-float .lang-toggle a:focus-visible{outline:1px solid #fff; outline-offset:2px;}
.lang-toggle .is-current{color:var(--ink); font-weight:400;}
.lang-toggle .sep{color:var(--ink-faintest);}
.lang-toggle a{color:var(--ink-faint); text-decoration:none; transition:color .2s ease;}
.lang-toggle a:hover{color:var(--ink);}
body.menu-is-open{overflow:hidden;}
/* Bug corrige le 01/10/2026 (trouve en verifiant la bascule FR/EN) : le menu
plein ecran (z-index 100) recouvrait le header (z-index 50) -> bouton
"Close/Fermer" et logo invisibles et non cliquables menu ouvert (seuls
Echap ou un lien du menu le refermaient). Header remonte au-dessus du menu
tant qu'il est ouvert ; la bascule FR/EN (110) reste au-dessus des deux. */
body.menu-is-open header.site{z-index:105;}
/* Carte "projet à venir" — placeholder honnête pour les 8 projets pas encore
renseignés, en attendant le vrai contenu (remplace les gabarits "[Nom du projet]"
du prototype, qui n'étaient pas montrables tels quels). */
.card-project.is-placeholder{pointer-events:none;}
.card-project.is-placeholder .thumb{display:flex; align-items:center; justify-content:center; aspect-ratio:4/5;}
.card-project.is-placeholder .thumb::after{content:'Projet à venir'; font-family:var(--font-switzer); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faintest);}
.card-project.is-placeholder .title{color:var(--ink-faintest);}
/* Formulaire : champ piège anti-spam (invisible, jamais rempli par un humain) et
message d'état après envoi (contact.php). */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}
.form-status{font-family:var(--font-switzer); font-size:12px; letter-spacing:0.3px; margin:12px 0 0; min-height:1.4em;}
.form-status.is-success{color:var(--circuit-teal);}
.form-status.is-error{color:var(--acc-photo);}
@media (max-width: 860px){
.menu-panel{padding:24px 20px 0;}
.menu-item .word{font-size:56px;}
.menu-foot{padding:16px 20px 28px;}
}
/* ============================================================
GALERIE DES PAGES PROJET (02/10/2026) — mosaique irreguliere + visionneuse
Grille 12 colonnes a cases carrees (la hauteur d'une rangee = la largeur
d'une colonne, calculee sur la largeur du conteneur) : chaque vignette
occupe --c colonnes x --r rangees, les images s'emboitent sans se
chevaucher. Sous 760px : 2 colonnes, hauteur donnee par le format de la photo.
============================================================ */
.project-gallery{padding-top:24px;}
.gallery-head{display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:baseline; margin-bottom:32px;}
.gallery-hint{margin:0; max-width:640px; font-size:14px; color:var(--ink-faint);}
.mosaic-wrap{container-type:inline-size;}
.mosaic{--g:16px; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-rows:calc((100cqw - 11 * var(--g)) / 12); grid-auto-flow:dense; gap:var(--g);}
.mosaic-item{grid-column:span var(--c); grid-row:span var(--r); min-width:0; min-height:0;}
.mosaic-item a{position:relative; display:block; width:100%; height:100%; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-soft); cursor:zoom-in;}
.mosaic-item img, .mosaic-preview{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.mosaic-item img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.mosaic-preview{opacity:0; transition:opacity .35s ease; pointer-events:none;}
.mosaic-item a.is-previewing .mosaic-preview{opacity:1;}
.mosaic-item a:focus-visible{outline:2px solid var(--live-wire); outline-offset:3px;}
.mosaic-badge{position:absolute; left:12px; bottom:12px; z-index:2; padding:5px 10px; border-radius:999px; background:var(--live-wire); color:var(--void); font-family:var(--font-switzer); font-size:11px; font-weight:500; letter-spacing:1px; line-height:1;}
@media (hover:hover){
.mosaic-item a:hover img{transform:scale(1.03);}
}
@media (max-width:760px){
.gallery-head{display:flex; flex-direction:column; gap:12px; margin-bottom:24px;}
.mosaic{--g:10px; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:auto;}
.mosaic-item{grid-column:span var(--mc); grid-row:auto; aspect-ratio:var(--ratio);}
}
@media (prefers-reduced-motion:reduce){
.mosaic-item img, .mosaic-preview{transition:none;}
.mosaic-item a:hover img{transform:none;}
}
/* --- Visionneuse (element