/* ==========================================================================
Commpagnie — single Projet : format VERTICAL portrait + images en BENTO.
========================================================================== */
.single-projet { overflow-x: clip; }
/* ----------------------- Wrapper "wide" : sections projet ----------------
Plus large que le container global (1240) : exploite la place latérale sur
grands écrans tout en gardant des marges propres. */
.cmp-container-wide {
width: 100%;
max-width: 1760px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 96px);
box-sizing: border-box;
}
/* ------------------------------ Eyebrows --------------------------------- */
.projx-eye { display: flex; align-items: center; font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.125rem; color: var(--cmp-anthracite); margin: 0 0 clamp(22px, 3vw, 36px); text-transform: none; letter-spacing: normal; }
.projx-eye__bar { width: 64px; height: 2px; background: currentColor; display: inline-block; flex: 0 0 auto; margin-right: 16px; }
.projx-eye--light { color: var(--cmp-blanc); }
/* Dans un bloc centré, l'eyebrow se centre aussi. */
.proj-prose--center > .projx-eye,
.proj-section > .cmp-container > .projx-eye:only-child,
.proj-reponse .projx-eye,
.proj-results .projx-eye,
.proj-quote-section .projx-eye { justify-content: center; text-align: center; }
/* ----------------------------- HÉRO -------------------------------------- */
.projx-hero { padding-top: clamp(110px, 12vw, 150px); padding-bottom: clamp(28px, 4vw, 48px); }
.projx-hero .cmp-breadcrumb--ink { color: var(--cmp-grey); margin-bottom: clamp(28px, 4vw, 44px); }
.projx-hero .cmp-breadcrumb--ink a { color: var(--cmp-grey); }
.projx-hero .cmp-breadcrumb--ink a:hover { color: var(--cmp-primary); }
.projx-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.projx-hero__resume :where(p) { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.35; color: var(--cmp-anthracite); margin: 0 0 12px; }
.projx-hero__resume :where(strong) { font-weight: 800; }
.projx-hero__right { padding-top: 6px; }
.projx-hero__client { font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.125rem; color: var(--cmp-anthracite); margin: 0 0 6px; }
.projx-hero__date { color: var(--cmp-grey); font-size: 1rem; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(73,73,73,.3); }
.projx-scroll { display: inline-flex; align-items: flex-start; justify-content: center; width: 29px; height: 50px; border: 1.5px solid var(--cmp-anthracite); border-radius: 20px; margin-top: 22px; padding-top: 8px; }
.projx-scroll__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cmp-anthracite); animation: projxScroll 1.8s ease-in-out infinite; }
@keyframes projxScroll { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .projx-scroll__dot { animation: none; } }
/* ------------------------- BANNIÈRE full-width --------------------------- */
.proj-banner { margin: clamp(20px, 3vw, 40px) auto clamp(60px, 8vw, 110px); padding: 0 clamp(16px, 4vw, 56px); max-width: 1760px; box-sizing: border-box; }
.proj-banner__img { position: relative; aspect-ratio: 1440/600; border-radius: clamp(35px, 5vw, 85px); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 70px rgba(0,0,0,.15); }
.proj-banner__logo { max-width: 360px; max-height: 110px; width: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); }
/* ------------------------------ SECTIONS --------------------------------- */
.proj-section { padding: clamp(64px, 9vw, 130px) 0; position: relative; overflow-x: clip; }
.proj-section + .proj-section { padding-top: clamp(48px, 7vw, 100px); }
.cmp-container-wide { overflow: visible; }
.proj-prose { max-width: 920px; margin: 0; }
.proj-prose--center { margin-left: auto; margin-right: auto; text-align: center; }
.proj-lead :where(p) { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.35; color: var(--cmp-anthracite); margin: 0 0 18px; }
.proj-body :where(p) { font-family: var(--cmp-font-body); font-weight: 500; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.65; color: var(--cmp-grey); margin: 0 0 14px; }
.proj-big :where(p) { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.3; color: var(--cmp-anthracite); margin: 0 0 20px; }
/* Listes de l'éditeur dans un bloc « big » : corps lisible (pas la graisse display du p). */
.proj-big :where(ul, ol) { display: inline-block; text-align: left; margin: 0 0 20px; padding-left: 1.3em; }
.proj-big :where(li) { font-family: var(--cmp-font-body); font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--cmp-anthracite); margin: 0 0 8px; }
.proj-big--light :where(p, li) { color: var(--cmp-blanc); }
/* « Les plus » : SEULES les puces de liste de l'éditeur (li) sont précédées d'un + bleu.
Les paragraphes restent du texte normal (pas de marqueur). Aligné à gauche même centré. */
.proj-plus { margin: clamp(28px, 4vw, 48px) auto 0; max-width: 720px; text-align: left; }
.proj-prose--center .proj-plus { text-align: left; }
.proj-plus :where(ul, ol) { list-style: none; margin: 0 0 12px; padding: 0; }
.proj-plus :where(li) { font-family: var(--cmp-font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.5; color: var(--cmp-anthracite); margin: 0 0 12px; padding-left: 32px; position: relative; }
.proj-plus :where(li)::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--cmp-primary); font-weight: 800; font-size: 1.4rem; line-height: 1; }
.proj-plus :where(li:last-child) { margin-bottom: 0; }
.proj-visit { margin-top: clamp(28px, 4vw, 48px); }
/* Rythme des fonds : alternance #FAFAFA (cmp-blanc) / #FFFFFF pur, plus une teinte
bleutée pâle pour les blocs centrés (notre réponse + témoignage) → casse la
monotonie tout en gardant l'identité claire. */
.proj-demande { background: var(--cmp-blanc); }
.proj-reponse { background: var(--cmp-primary); color: var(--cmp-blanc); }
.proj-site:nth-of-type(odd) { background: #ffffff; }
.proj-site:nth-of-type(even) { background: var(--cmp-blanc); }
.proj-quote-section { background: #F1F1FE; }
.proj-others { background: var(--cmp-blanc); }
/* « Notre réponse » sur bleu : eyebrow + corps en blanc. */
.proj-reponse .projx-eye { color: var(--cmp-blanc); }
.proj-reponse .proj-big :where(p),
.proj-reponse .proj-big :where(li),
.proj-reponse .proj-big :where(strong) { color: var(--cmp-blanc); }
/* ----------------------- Paires asymétriques alternées ------------------- */
.proj-pair {
display: grid;
/* Média plus large que le texte : on remplit la place dispo pour les photos. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
gap: clamp(32px, 5vw, 72px);
align-items: start; /* ⚠️ ne PAS stretch : aspect-ratio + stretch fait gonfler le média. */
max-width: 100%;
box-sizing: border-box;
}
.proj-pair--reverse { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.proj-pair--reverse .proj-card { order: 2; }
.proj-pair--reverse .proj-pair__media { order: 1; }
.proj-pair > * { min-width: 0; }
.proj-card {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
padding: clamp(20px, 2.6vw, 36px) clamp(8px, 1vw, 16px) clamp(20px, 2.6vw, 36px) 0;
min-height: clamp(280px, 30vw, 480px);
justify-content: flex-start;
}
.proj-pair--reverse .proj-card { padding-left: clamp(8px, 1vw, 16px); padding-right: 0; }
.proj-card__head { display: flex; flex-direction: column; gap: 8px; }
.proj-card__eye { display: flex; align-items: center; font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.125rem; color: var(--cmp-anthracite); text-transform: none; letter-spacing: normal; }
.proj-card__bar { width: 48px; height: 2px; background: currentColor; display: inline-block; flex: 0 0 auto; margin-right: 14px; }
.proj-card__body { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); }
.proj-card__lead :where(p) { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; color: var(--cmp-anthracite); margin: 0 0 12px; }
.proj-card__lead :where(p:last-child) { margin-bottom: 0; }
.proj-card__text :where(p) { font-family: var(--cmp-font-body); font-weight: 500; font-size: 1rem; line-height: 1.6; color: var(--cmp-grey); margin: 0 0 12px; }
.proj-card__text :where(p:last-child) { margin-bottom: 0; }
/* Conteneur de la pile d'images (= colonne média de la paire). */
.proj-pair__media { }
.proj-pair__placeholder { width: 100%; aspect-ratio: 16/10; background: var(--cmp-grey-light, #efefef); border-radius: clamp(20px, 2vw, 36px); position: relative; overflow: hidden; }
/* Patterns asymétriques avec ratios alternés (max 3 images).
- 1 image → panoramique 16/10 pleine largeur
- 2 images → 4/3 (landscape) + 4/5 (portrait) → asymétrique
- 3 images → 1 portrait à gauche (spans 2 rows) + 4/3 + 1/1 à droite (mosaïque)
*/
.proj-stack {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(14px, 1.8vw, 22px);
align-items: start;
}
.proj-stack__item {
position: relative;
margin: 0;
overflow: hidden;
border-radius: clamp(20px, 2vw, 28px);
background: var(--cmp-grey-light, #efefef);
}
/* 1 image */
.proj-stack[data-count="1"] .proj-stack__item { grid-column: 1 / -1; aspect-ratio: 16/10; }
/* 2 images : 2 photos 4/3 côte à côte (pas de chevauchement). */
.proj-stack[data-count="2"] .proj-stack__item:nth-child(1) { grid-column: 1 / span 6; grid-row: 1; aspect-ratio: 4/3; }
.proj-stack[data-count="2"] .proj-stack__item:nth-child(2) { grid-column: 7 / span 6; grid-row: 1; aspect-ratio: 4/3; }
/* 3 images : 1 grande landscape en haut + 2 côte-à-côte en dessous. */
.proj-stack[data-count="3"] .proj-stack__item:nth-child(1) { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16/9; }
.proj-stack[data-count="3"] .proj-stack__item:nth-child(2) { grid-column: 1 / span 6; grid-row: 2; aspect-ratio: 4/3; }
.proj-stack[data-count="3"] .proj-stack__item:nth-child(3) { grid-column: 7 / span 6; grid-row: 2; aspect-ratio: 4/3; }
@media (max-width: 780px) {
.proj-stack,
.proj-stack[data-count="1"],
.proj-stack[data-count="2"],
.proj-stack[data-count="3"] { grid-template-columns: 1fr; }
.proj-stack__item,
.proj-stack[data-count="2"] .proj-stack__item:nth-child(2),
.proj-stack[data-count="3"] .proj-stack__item { grid-column: 1 !important; grid-row: auto !important; margin-top: 0; aspect-ratio: 4/3; }
.proj-stack[data-count="1"] .proj-stack__item { aspect-ratio: 16/10; }
}
.proj-stack__item > img,
.proj-stack__item > iframe,
.proj-stack__item > video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; z-index: 1;
}
.proj-stack__item .proj-bento__video,
.proj-stack__item .proj-bento__video iframe,
.proj-stack__item .proj-bento__video video {
position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; z-index: 1;
}
/* Placeholder visuel quand la cellule n'a pas d'image. */
.proj-stack__item::before,
.proj-pair__placeholder::before,
.proj-solo::before {
content: "";
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(135deg, rgba(36,36,36,.04) 0%, rgba(36,36,36,.08) 100%),
url("data:image/svg+xml;utf8,") center/64px no-repeat;
}
/* Placeholder pour les conteneurs vides (galerie absente). */
.proj-pair__placeholder::before,
.proj-solo::before {
content: "";
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(135deg, rgba(36,36,36,.04) 0%, rgba(36,36,36,.08) 100%),
url("data:image/svg+xml;utf8,") center/64px no-repeat;
}
@media (max-width: 780px) {
.proj-stack { column-count: 1; }
}
.proj-card .proj-visit { align-self: flex-start; margin-top: clamp(8px, 1vw, 16px); }
.proj-card .proj-plus { margin-top: 0; }
@media (max-width: 900px) {
.proj-pair,
.proj-pair--reverse { grid-template-columns: 1fr; }
.proj-pair--reverse .proj-card,
.proj-pair--reverse .proj-pair__media { order: 0; }
.proj-card { padding: 0 !important; min-height: 0; }
.proj-pair__media { min-height: 0; }
}
/* -------------------- Full-bleed (image bord à bord) --------------------- */
.proj-fullbleed {
position: relative;
width: 100vw;
margin: clamp(36px, 5vw, 64px) calc(50% - 50vw) 0;
aspect-ratio: 21/9;
overflow: hidden;
background: var(--cmp-grey-light, #efefef);
}
.proj-fullbleed::before {
content: "";
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(135deg, rgba(36,36,36,.04) 0%, rgba(36,36,36,.08) 100%),
url("data:image/svg+xml;utf8,") center/64px no-repeat;
}
.proj-fullbleed > img,
.proj-fullbleed > iframe,
.proj-fullbleed > video,
.proj-fullbleed .proj-bento__video,
.proj-fullbleed .proj-bento__video iframe,
.proj-fullbleed .proj-bento__video video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; z-index: 1;
}
@media (max-width: 780px) {
.proj-fullbleed { aspect-ratio: 4/3; }
}
/* ------------------- Images solo (surplus de captures/vidéos) ------------- */
/* Chaque média supplémentaire = une ligne pleine largeur, calme, respirant. */
.proj-solos { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 48px); margin: clamp(28px, 4vw, 56px) 0 0; }
.proj-solo {
position: relative;
overflow: hidden;
border-radius: clamp(20px, 2vw, 36px);
background: var(--cmp-grey-light, #efefef);
aspect-ratio: 16/9;
margin: 0;
max-width: 1280px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.proj-solo > img,
.proj-solo > iframe,
.proj-solo > video,
.proj-solo .proj-bento__video,
.proj-solo .proj-bento__video iframe,
.proj-solo .proj-bento__video video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; z-index: 1;
}
.proj-solo__cap {
position: absolute; left: 18px; bottom: 14px; right: 18px;
color: #fff; font-size: .85rem; font-weight: 600;
text-shadow: 0 2px 12px rgba(0,0,0,.55);
pointer-events: none; z-index: 2;
}
/* ----------------------- RÉSULTATS — bleu full-width --------------------- */
.proj-results { background: var(--cmp-primary); color: var(--cmp-blanc); }
.proj-results .proj-prose { color: var(--cmp-blanc); }
.proj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(40px, 6vw, 80px); }
.proj-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.22); border-radius: clamp(24px, 2.4vw, 36px); padding: clamp(28px, 3.5vw, 48px) clamp(22px, 2.5vw, 36px); display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.proj-stat__num { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; color: var(--cmp-blanc); }
.proj-stat__label { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: rgba(255,255,255,.92); }
/* ------------------------- TÉMOIGNAGE ------------------------------------ */
.proj-quote-section { background: var(--cmp-blanc); text-align: center; }
.proj-quote { position: relative; max-width: 980px; margin: 0 auto; font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.4; color: var(--cmp-anthracite); padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 64px) 0; }
.proj-quote__mark { display: block; font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(4rem, 8vw, 6.5rem); line-height: .8; color: var(--cmp-primary); margin-bottom: clamp(8px, 1.5vw, 18px); }
.proj-quote__author { margin: clamp(28px, 4vw, 44px) 0 0; font-family: var(--cmp-font-body); font-size: 1rem; color: var(--cmp-grey); }
.proj-quote__author strong { display: block; color: var(--cmp-anthracite); font-weight: 800; font-size: 1.125rem; margin-bottom: 4px; }
/* -------------------------- AUTRES PROJETS ------------------------------- */
.proj-others__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap; }
.proj-others__head .projx-eye { margin: 0; }
.proj-others__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) {
.proj-others__grid { grid-template-columns: 1fr; }
}
/* ----------------------------- CTA final --------------------------------- */
.projx-cta { background: var(--cmp-primary); color: var(--cmp-blanc); padding: clamp(64px, 9vw, 120px) 0; }
.projx-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.projx-cta__title { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.2; color: var(--cmp-blanc); margin: 0; }
/* ------------------------------- Mobile ---------------------------------- */
@media (max-width: 900px) {
.projx-hero__grid { grid-template-columns: 1fr; }
.proj-others__head { flex-direction: column; align-items: flex-start; }
.proj-prose--center { text-align: left; }
.projx-cta__inner { flex-direction: column; align-items: flex-start; }
}
/* =========================================================================
SLIDER AVANT / APRÈS — galerie 2 images, opt-in via meta.
========================================================================= */
.proj-ba {
position: relative;
width: 100%;
aspect-ratio: 4/3;
border-radius: clamp(20px, 2vw, 28px);
overflow: hidden;
background: var(--cmp-grey-light, #efefef);
user-select: none;
touch-action: pan-y;
--proj-ba-pos: 50%;
box-shadow: 0 18px 50px rgba(36,36,36,.12);
}
.proj-ba__after,
.proj-ba__before {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: hidden;
margin: 0;
}
.proj-ba__after { z-index: 1; }
.proj-ba__before { z-index: 2; clip-path: inset(0 calc(100% - var(--proj-ba-pos)) 0 0); will-change: clip-path; }
.proj-ba__after > img,
.proj-ba__before > img,
.proj-ba__after > figure > img,
.proj-ba__before > figure > img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Étiquettes Avant / Après. */
.proj-ba__label {
position: absolute; bottom: 16px;
font-family: var(--cmp-font-body); font-weight: 700; font-size: .875rem; letter-spacing: .04em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
background: rgba(36,36,36,.65); color: #fff;
pointer-events: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.proj-ba__label--before { left: 16px; }
.proj-ba__label--after { right: 16px; }
/* Poignée centrale (bouton). */
.proj-ba__handle {
position: absolute; top: 0; bottom: 0;
left: var(--proj-ba-pos);
transform: translateX(-50%);
width: 72px;
background: transparent; border: 0; padding: 0;
cursor: ew-resize;
z-index: 3;
display: flex; align-items: center; justify-content: center;
color: var(--cmp-primary);
will-change: left;
}
.proj-ba__handle:focus-visible { outline: 2px solid var(--cmp-primary); outline-offset: 4px; border-radius: 8px; }
.proj-ba__line {
position: absolute; top: 0; bottom: 0;
left: 50%; transform: translateX(-50%);
width: 3px; background: #fff;
box-shadow: 0 0 0 1px rgba(36,36,36,.22), 0 6px 24px rgba(0,0,0,.28);
}
.proj-ba__knob {
position: relative; z-index: 1;
width: 64px; height: 64px; border-radius: 50%;
background: #fff; color: var(--cmp-primary);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(36,36,36,.08);
transition: transform .25s cubic-bezier(.34,1.4,.5,1);
}
.proj-ba__knob svg { width: 26px; height: 26px; }
.proj-ba__handle:hover .proj-ba__knob,
.proj-ba.is-dragging .proj-ba__knob { transform: scale(1.1); }
.proj-ba.is-dragging { cursor: ew-resize; }
/* Pendant le drag : clip ET poignée suivent le pointeur SANS transition (sinon
la poignée traîne derrière le wipe = désync). */
.proj-ba.is-dragging .proj-ba__before,
.proj-ba.is-dragging .proj-ba__handle { transition: none; }
/* Hint « glissez-moi » : pulse léger du knob 2× au chargement pour signaler
l'interactivité sans bouger la poignée (évite tout conflit avec le drag). */
@media (prefers-reduced-motion: no-preference) {
.proj-ba:not(.is-dragging) .proj-ba__knob { animation: cmpBaPulse 2.4s ease-in-out 1.2s 2; }
}
@keyframes cmpBaPulse {
0%, 100% { box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(36,36,36,.08), 0 0 0 0 rgba(58,49,255,.45); }
50% { box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(36,36,36,.08), 0 0 0 14px rgba(58,49,255,0); }
}
/* Animation douce à l'arrêt + intro. */
@media (prefers-reduced-motion: no-preference) {
.proj-ba__before { transition: clip-path .35s cubic-bezier(.4,0,.2,1); }
.proj-ba__handle { transition: left .35s cubic-bezier(.4,0,.2,1); }
}
@media (prefers-reduced-motion: reduce) {
.proj-ba { --proj-ba-pos: 50%; }
}
/* Fallback no-JS : empile les 2 images (avant au-dessus, après dessous). */
html:not(.cmp-js) .proj-ba .proj-ba__before { clip-path: none; }
html:not(.cmp-js) .proj-ba .proj-ba__handle { display: none; }
/* Aspect responsive : panoramique sur petits écrans. */
@media (max-width: 780px) {
.proj-ba { aspect-ratio: 4/3; }
}