/* Studiofalida · feuille de style V2 (collage, scotch, noir et blanc) */
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2")}
:root{
  --rouge:#f40023;
  --lilas:#e0c3de;
  --creme:#f3f1ea;
  --fond:#ffffff;
  --papier:#f6f6f4;
  --noir:#000100;
  --gris:#5d5b55;
  --sans:"futura-pt","Jost","Futura",system-ui,sans-serif;
  --mono:"Courier Prime","Courier New",monospace;
  --max:1280px;
  --gutter:clamp(16px,4vw,56px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--fond);color:var(--noir);font-family:var(--sans);font-weight:400;font-size:clamp(17px,.6vw + 13px,20px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
figure{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--noir);color:var(--creme);padding:8px 12px;z-index:99}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}

/* Étiquette machine à écrire */
.label{display:inline-block;font-family:var(--mono);font-size:.78em;letter-spacing:.06em;text-transform:uppercase;background:var(--noir);color:var(--creme);padding:.25em .6em;line-height:1.4}
.label--rouge{background:var(--rouge)}

/* Morceau de vrai scotch blanc, posé en haut d'un élément */



/* En-tête */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--fond);border-bottom:1px solid rgba(0,1,0,.12)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.header__logo img{height:54px;width:auto;transition:transform .3s}
.header__logo:hover img{transform:rotate(-12deg)}
.nav{display:flex;align-items:center;gap:clamp(12px,2.5vw,32px)}
.nav a{text-decoration:none;font-weight:500}
.nav a:not(.btn):hover{color:var(--rouge)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:1rem;text-decoration:none;padding:.85em 1.4em;border:2px solid var(--noir);background:var(--noir);color:var(--creme);transition:transform .15s,background .15s,color .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn--rouge{background:var(--rouge);border-color:var(--rouge)}
.btn--ghost{background:transparent;color:var(--noir)}
.btn--ghost:hover{background:var(--noir);color:var(--creme)}
.btn--creme{background:var(--creme);border-color:var(--creme);color:var(--noir)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
section{padding-block:clamp(72px,9vw,136px)}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:clamp(32px,4vw,56px)}

.section-title{font-weight:700;font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:1.1em;max-width:36em}

/* 1 · Ouverture : le titre passe sous le duo */
.hero{padding-block:clamp(32px,4vw,56px) 0;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:end;gap:0}
.hero__text{position:relative;z-index:1;padding-bottom:clamp(48px,6vw,96px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero__title{font-weight:700;line-height:.84;letter-spacing:-.04em;font-size:clamp(76px,15vw,230px);white-space:nowrap;display:flex;flex-direction:column}
.hero__eye{color:var(--rouge)}
.hero__visual{position:relative;z-index:2;margin-left:-14%;align-self:end}
.hero__visual img{width:100%;max-width:640px;margin-left:auto}

/* Bandeau qui défile */
.marquee{background:var(--rouge);color:var(--creme);overflow:hidden;border-block:2px solid var(--noir);transform:rotate(-1.2deg);margin:-6px -2% 0;position:relative;z-index:3}
.marquee__track{display:flex;width:max-content;animation:defile 28s linear infinite}
.marquee span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(15px,1.4vw,20px);padding:14px 22px;white-space:nowrap}
.marquee span::after{content:"●";margin-left:44px;font-size:.6em;vertical-align:middle}
@keyframes defile{to{transform:translateX(-50%)}}

/* 2 · Projets épinglés */
.work{position:relative}
.pins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.pin{display:block;text-decoration:none;position:relative;transition:transform .25s}
.pin:nth-child(1){transform:rotate(-2.5deg)}
.pin:nth-child(2){transform:rotate(1.8deg) translateY(40px)}
.pin:nth-child(3){transform:rotate(-1deg) translateY(10px)}
.pin:hover{transform:rotate(0) scale(1.02)}
.pin::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:32px;transform:translateX(-50%) rotate(-4deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28));z-index:3}
.pin__img{aspect-ratio:4/5;max-width:100%;background:#d6d3cb;position:relative;overflow:hidden;filter:grayscale(1);box-shadow:0 12px 28px rgba(0,1,0,.12);border:10px solid #fff}

.pin__title{position:relative;z-index:2;margin:-20px 0 0 16px;transform:rotate(-2deg)}
.cursor{position:fixed;left:0;top:0;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--rouge);color:var(--creme);font-family:var(--mono);font-size:15px;text-transform:uppercase;display:grid;place-items:center;pointer-events:none;z-index:50;opacity:0;scale:.4;transition:opacity .2s,scale .2s}
.cursor.is-on{opacity:1;scale:1}
.pins.has-cursor,.pins.has-cursor a{cursor:none}

/* 3 · Pôles en grandes lignes */
.poles{padding-top:clamp(56px,7vw,96px)}
.pole{display:grid;grid-template-columns:80px 1.4fr 1fr;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(24px,3vw,40px) clamp(8px,1.5vw,20px);border-top:2px solid var(--noir);text-decoration:none;transition:background .2s}
.pole:last-child{border-bottom:2px solid var(--noir)}
.pole:hover{background:var(--lilas)}
.pole__num{font-family:var(--mono);color:var(--rouge);font-size:clamp(28px,3vw,44px)}
.pole__hook{font-weight:700;font-size:clamp(34px,5vw,76px);line-height:.98;letter-spacing:-.02em}
.pole__body{font-size:.95em;display:flex;flex-direction:column;gap:8px}
.pole__body strong{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:.82em}
.pole__body em{font-style:normal;font-weight:700;color:var(--rouge)}

/* 4 · Pour qui */
.who{background:var(--lilas)}
.who__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.who article{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.who h3{font-size:clamp(24px,2.2vw,32px);line-height:1.08}
.who .muted{font-size:.9em;color:var(--gris)}
.who a{margin-top:6px;font-weight:700;color:var(--rouge);text-decoration:none}
.who a:hover{text-decoration:underline}
.tape-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:.8em;background:var(--rouge);color:var(--creme);padding:.35em .9em;transform:rotate(-2deg);clip-path:polygon(2% 0,98% 4%,100% 50%,97% 100%,3% 96%,0 50%)}

/* 5 · Méthode */
.method{background:var(--noir);color:var(--creme)}
.method .label{background:var(--creme);color:var(--noir);margin-bottom:12px}
.method .section-title{margin-bottom:.4em}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.5vw,32px);margin-top:clamp(36px,4vw,64px)}
.step{border-top:2px solid var(--creme);padding-top:20px}
.step__num{font-family:var(--mono);color:var(--rouge)}
.step h3{font-size:1.5em;line-height:1.1;margin:.35em 0 .4em}
.step p{color:rgba(243,241,234,.75);font-size:.95em}

/* 6 · Le studio */
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.about__photo{position:relative;transform:rotate(-2deg);border:12px solid #fff;box-shadow:0 18px 40px rgba(0,1,0,.15);max-width:480px;justify-self:center}
.about__photo::before{content:"";position:absolute;top:-16px;left:35%;width:130px;height:34px;transform:rotate(5deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28));z-index:2}
.about__text{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.about__text p{max-width:34em}
.about__sign{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px}
.person__name{font-family:var(--mono);font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:.02em;text-transform:uppercase}

/* 7 · Appel final */
.cta{background:var(--rouge);color:var(--creme);overflow:hidden}
.cta__grid{display:grid;grid-template-columns:1fr;max-width:900px;gap:clamp(32px,5vw,80px);align-items:center}
.cta__grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cta h2{font-weight:700;font-size:clamp(56px,9vw,132px);line-height:.9;letter-spacing:-.03em}



/* Pied de page */
.footer{background:var(--noir);color:var(--creme);padding-block:56px 32px}
.footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;align-items:start}
.footer img{height:110px;width:auto}
.footer .slogan{font-family:var(--mono);margin-top:16px}
.footer ul{list-style:none;display:grid;gap:8px}
.footer a{text-decoration:none}.footer a:hover{color:var(--rouge)}
.footer__bottom{grid-column:1/-1;border-top:1px solid rgba(243,241,234,.2);padding-top:20px;font-size:.8em;color:rgba(243,241,234,.6);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* Responsive */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr}
  .hero__text{padding-bottom:0}
  .hero__visual{margin:0 auto;width:min(100%,460px)}
  .hero__title{font-size:clamp(72px,21vw,180px)}
  .pins{grid-template-columns:1fr;max-width:420px;margin:0 auto;gap:56px}
  .pin:nth-child(n){transform:rotate(-1.5deg)}
  .pole{grid-template-columns:56px 1fr}
  .pole__body{grid-column:2}
  .who__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .about__grid{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .header .wrap{height:64px}
  .header__logo img{height:44px}
  .nav .nav__text{display:none}
  .nav .btn{padding:.6em .9em;font-size:.9rem}
  .steps{grid-template-columns:1fr}
  .pole{grid-template-columns:1fr;gap:10px}
  .pole__body{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .marquee__track{animation:none}
}

/* ===== Matière : grain papier sur tout le site ===== */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* fibres de papier, plus larges, sur les fonds clairs */
.hero,.work,.poles,.about,.who{background-image:radial-gradient(rgba(0,1,0,.05) 1px,transparent 1.2px),radial-gradient(rgba(0,1,0,.035) 1px,transparent 1.4px);background-size:7px 7px,13px 13px;background-position:0 0,3px 5px}
.who{background-color:var(--lilas)}

/* ===== Accidents de collage ===== */
/* Scotch rouge en travers de « yeux » */
.taped-word{position:relative;display:inline-block;isolation:isolate}
.taped-word::after{content:"";position:absolute;left:-10%;right:-14%;top:30%;height:46%;background:var(--rouge);opacity:.88;transform:rotate(-4deg);mix-blend-mode:multiply;z-index:-1;
  clip-path:polygon(0 8%,3% 0,6% 10%,9% 2%,12% 9%,100% 0,98% 30%,100% 55%,97% 78%,100% 100%,4% 94%,0 70%,2% 40%)}

/* Étiquette de travers à cheval sur deux sections */
.sticker{position:absolute;z-index:10;top:0;left:0;right:0;height:0;display:flex;align-items:flex-start;justify-content:flex-end;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.sticker span{position:relative;display:block;line-height:1.3;white-space:nowrap;transform:translateY(-50%) rotate(-5deg);background:var(--creme);color:var(--noir);font-family:var(--mono);font-size:clamp(15px,1.5vw,20px);letter-spacing:.04em;padding:.7em 1.3em;border:2px solid var(--noir);box-shadow:4px 6px 0 rgba(0,1,0,.18)}
.sticker span::before{content:"";position:absolute;top:-10px;left:-26px;width:70px;height:24px;background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28));transform:rotate(8deg)}
.sticker span::after{content:"";position:absolute;bottom:-8px;right:-24px;width:60px;height:22px;background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28));transform:rotate(-10deg)}

@media (max-width:640px){
  .sticker{justify-content:center}
}

/* ===== Collage, deuxième couche ===== */
/* Bords déchirés entre les sections */
.who,.method,.cta{position:relative}
.who::before,.method::before,.cta::before{content:"";position:absolute;left:0;right:0;top:-22px;height:24px;background:inherit;background-color:var(--lilas)}
.who::before{clip-path:polygon(0 100%,0.0% 60%,1.7% 38%,3.3% 26%,5.0% 61%,6.7% 20%,8.3% 53%,10.0% 41%,11.7% 19%,13.3% 51%,15.0% 18%,16.7% 45%,18.3% 20%,20.0% 21%,21.7% 45%,23.3% 73%,25.0% 24%,26.7% 31%,28.3% 59%,30.0% 81%,31.7% 55%,33.3% 43%,35.0% 83%,36.7% 18%,38.3% 75%,40.0% 35%,41.7% 25%,43.3% 23%,45.0% 37%,46.7% 72%,48.3% 28%,50.0% 56%,51.7% 60%,53.3% 41%,55.0% 53%,56.7% 19%,58.3% 19%,60.0% 29%,61.7% 63%,63.3% 45%,65.0% 37%,66.7% 56%,68.3% 47%,70.0% 36%,71.7% 71%,73.3% 64%,75.0% 32%,76.7% 55%,78.3% 52%,80.0% 76%,81.7% 66%,83.3% 35%,85.0% 84%,86.7% 23%,88.3% 44%,90.0% 68%,91.7% 26%,93.3% 49%,95.0% 18%,96.7% 62%,98.3% 69%,100.0% 60%,100% 100%)}
.method::before{background:var(--noir);clip-path:polygon(0 100%,0.0% 60%,1.7% 55%,3.3% 76%,5.0% 37%,6.7% 64%,8.3% 57%,10.0% 56%,11.7% 47%,13.3% 74%,15.0% 81%,16.7% 48%,18.3% 61%,20.0% 19%,21.7% 64%,23.3% 60%,25.0% 85%,26.7% 73%,28.3% 35%,30.0% 42%,31.7% 62%,33.3% 17%,35.0% 47%,36.7% 27%,38.3% 23%,40.0% 19%,41.7% 69%,43.3% 24%,45.0% 32%,46.7% 42%,48.3% 76%,50.0% 21%,51.7% 46%,53.3% 53%,55.0% 77%,56.7% 72%,58.3% 75%,60.0% 34%,61.7% 44%,63.3% 40%,65.0% 77%,66.7% 82%,68.3% 26%,70.0% 27%,71.7% 31%,73.3% 31%,75.0% 49%,76.7% 56%,78.3% 33%,80.0% 15%,81.7% 44%,83.3% 41%,85.0% 55%,86.7% 82%,88.3% 63%,90.0% 51%,91.7% 58%,93.3% 62%,95.0% 19%,96.7% 78%,98.3% 70%,100.0% 60%,100% 100%)}
.cta::before{background:var(--rouge);clip-path:polygon(0 100%,0.0% 60%,1.7% 76%,3.3% 71%,5.0% 42%,6.7% 43%,8.3% 22%,10.0% 59%,11.7% 19%,13.3% 20%,15.0% 30%,16.7% 26%,18.3% 39%,20.0% 19%,21.7% 15%,23.3% 26%,25.0% 22%,26.7% 40%,28.3% 17%,30.0% 76%,31.7% 58%,33.3% 25%,35.0% 33%,36.7% 39%,38.3% 40%,40.0% 24%,41.7% 74%,43.3% 85%,45.0% 48%,46.7% 49%,48.3% 21%,50.0% 22%,51.7% 39%,53.3% 34%,55.0% 73%,56.7% 26%,58.3% 17%,60.0% 82%,61.7% 52%,63.3% 25%,65.0% 53%,66.7% 17%,68.3% 52%,70.0% 83%,71.7% 75%,73.3% 64%,75.0% 33%,76.7% 41%,78.3% 27%,80.0% 69%,81.7% 52%,83.3% 70%,85.0% 38%,86.7% 31%,88.3% 72%,90.0% 84%,91.7% 75%,93.3% 71%,95.0% 72%,96.7% 67%,98.3% 31%,100.0% 60%,100% 100%)}

/* Papier lilas déchiré derrière le duo */
.hero__visual::before{content:"";position:absolute;z-index:-1;left:16%;right:2%;top:12%;bottom:-40px;background:var(--lilas);transform:rotate(3deg);clip-path:polygon(0.0% 2.1%,8.3% 1.4%,16.7% 0.1%,25.0% 0.1%,33.3% 1.1%,41.7% 1.0%,50.0% 2.8%,58.3% 3.8%,66.7% 1.8%,75.0% 3.7%,83.3% 4.0%,91.7% 3.8%,98.5% 0.0%,99.1% 8.3%,99.1% 16.7%,99.2% 25.0%,99.2% 33.3%,97.5% 41.7%,96.4% 50.0%,96.6% 58.3%,98.1% 66.7%,97.4% 75.0%,96.8% 83.3%,99.7% 91.7%,100.0% 97.4%,91.7% 96.4%,83.3% 96.9%,75.0% 97.0%,66.7% 98.1%,58.3% 99.3%,50.0% 96.8%,41.7% 98.7%,33.3% 96.8%,25.0% 96.1%,16.7% 98.4%,8.3% 98.4%,3.8% 100.0%,2.9% 91.7%,0.7% 83.3%,0.5% 75.0%,0.6% 66.7%,3.6% 58.3%,3.2% 50.0%,0.6% 41.7%,3.3% 33.3%,3.9% 25.0%,2.6% 16.7%,1.4% 8.3%)}

/* Bande de papier lilas derrière « regard » */
.paper-word{position:relative;display:inline-block;isolation:isolate}
.paper-word::before{content:"";position:absolute;z-index:-1;left:-6%;right:-8%;top:18%;bottom:4%;background:var(--lilas);transform:rotate(-2deg);clip-path:polygon(0.0% 3.3%,10.0% 0.8%,20.0% 0.1%,30.0% 5.8%,40.0% 3.9%,50.0% 3.2%,60.0% 5.6%,70.0% 2.6%,80.0% 5.2%,90.0% 5.0%,98.7% 0.0%,98.5% 10.0%,98.2% 20.0%,98.6% 30.0%,96.5% 40.0%,98.4% 50.0%,97.5% 60.0%,99.2% 70.0%,94.5% 80.0%,97.9% 90.0%,100.0% 97.3%,90.0% 96.5%,80.0% 94.6%,70.0% 97.5%,60.0% 94.5%,50.0% 97.0%,40.0% 96.8%,30.0% 96.9%,20.0% 99.9%,10.0% 97.4%,1.1% 100.0%,0.0% 90.0%,4.8% 80.0%,1.0% 70.0%,2.8% 60.0%,4.4% 50.0%,3.3% 40.0%,2.0% 30.0%,3.1% 20.0%,3.3% 10.0%)}
.pole:hover .paper-word::before{background:var(--creme)}


/* « vue ? » découpé dans du papier crème */
.cutout-word{position:relative;display:inline-block;color:var(--noir);padding:0 .12em;isolation:isolate;transform:rotate(-3deg)}
.cutout-word::before{content:"";position:absolute;inset:.08em -.04em -.02em;z-index:-1;background:var(--creme);clip-path:polygon(0.0% 6.3%,10.0% 0.8%,20.0% 4.5%,30.0% 2.0%,40.0% 2.2%,50.0% 6.2%,60.0% 4.1%,70.0% 4.5%,80.0% 6.1%,90.0% 7.3%,96.5% 0.0%,95.1% 10.0%,96.0% 20.0%,95.9% 30.0%,94.5% 40.0%,96.4% 50.0%,95.7% 60.0%,96.2% 70.0%,92.5% 80.0%,94.4% 90.0%,100.0% 93.0%,90.0% 92.5%,80.0% 97.9%,70.0% 95.5%,60.0% 92.5%,50.0% 93.3%,40.0% 98.9%,30.0% 99.0%,20.0% 96.5%,10.0% 99.4%,1.9% 100.0%,0.6% 90.0%,5.4% 80.0%,6.3% 70.0%,7.2% 60.0%,1.2% 50.0%,5.7% 40.0%,5.3% 30.0%,1.1% 20.0%,7.1% 10.0%);box-shadow:0 8px 0 rgba(0,0,0,.15)}

/* Papier rouge déchiré derrière la photo du studio */
.about__photo::after{content:"";position:absolute;z-index:-1;inset:-6% -10% 10% 14%;background:var(--rouge);transform:rotate(6deg);clip-path:polygon(0.0% 3.3%,10.0% 0.8%,20.0% 0.1%,30.0% 5.8%,40.0% 3.9%,50.0% 3.2%,60.0% 5.6%,70.0% 2.6%,80.0% 5.2%,90.0% 5.0%,98.7% 0.0%,98.5% 10.0%,98.2% 20.0%,98.6% 30.0%,96.5% 40.0%,98.4% 50.0%,97.5% 60.0%,99.2% 70.0%,94.5% 80.0%,97.9% 90.0%,100.0% 97.3%,90.0% 96.5%,80.0% 94.6%,70.0% 97.5%,60.0% 94.5%,50.0% 97.0%,40.0% 96.8%,30.0% 96.9%,20.0% 99.9%,10.0% 97.4%,1.1% 100.0%,0.0% 90.0%,4.8% 80.0%,1.0% 70.0%,2.8% 60.0%,4.4% 50.0%,3.3% 40.0%,2.0% 30.0%,3.1% 20.0%,3.3% 10.0%)}
.about__grid{isolation:isolate}

@media (max-width:960px){
  .hero__visual::before{left:8%;right:0}
}

/* ===== Lisibilité et référencement ===== */
.hero__h1{display:flex;flex-direction:column;align-items:flex-start;gap:24px;font-weight:inherit}
.label{font-size:max(.8em,13px)}
.marquee span{font-weight:700;font-size:clamp(16px,1.5vw,21px)}
/* Liens texte : noir souligné de rouge (le rouge seul ne se lit pas en petit) */
.pole__body em,.who a{color:var(--noir);text-decoration:underline;text-decoration-color:var(--rouge);text-decoration-thickness:3px;text-underline-offset:5px}
.pole:hover .pole__body em,.who a:hover{color:var(--rouge)}
/* Téléphone : le duo passe au-dessus du texte */
@media (max-width:960px){
  .hero__visual{order:-1;width:min(88%,380px);margin-bottom:8px}
  .hero__grid{gap:12px}
}

/* Page 404 */
.notfound{padding-block:clamp(80px,12vw,180px)}
.notfound .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero__h1{font-size:inherit;line-height:inherit}
@media (max-width:960px){.hero__visual::before{bottom:0;top:16%}}

/* ===================== Pages intérieures ===================== */
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--rouge);text-decoration-thickness:3px;text-underline-offset:7px}
.page-head{padding-block:clamp(48px,7vw,104px) clamp(32px,4vw,56px)}
.page-head .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.page-head h1{font-weight:700;font-size:clamp(56px,10vw,150px);line-height:.9;letter-spacing:-.03em}
.crumbs{font-family:var(--mono);font-size:14px;color:var(--gris)}
.crumbs a{color:var(--noir)}



.link{font-weight:700;color:var(--noir);text-decoration:underline;text-decoration-color:var(--rouge);text-decoration-thickness:3px;text-underline-offset:5px}
.link:hover{color:var(--rouge)}
.small{font-size:.85em;color:var(--gris)}
.hidden{position:absolute;left:-9999px}

/* Offres */
















/* Questions fréquentes */
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq__list{display:flex;flex-direction:column;border-top:2px solid var(--noir)}
.faq__item{border-bottom:2px solid var(--noir)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--mono);font-size:28px;color:var(--rouge);transition:transform .2s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2}
.faq__item p{padding:0 4px 22px;max-width:40em}

/* Contact */
.contact{padding-top:0}

.rdv{background:var(--lilas);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;transform:rotate(-.8deg)}
.rdv h2{font-size:clamp(28px,3vw,40px);line-height:1}



form{display:grid;gap:18px}
.field{display:grid;gap:6px;border:0;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label,.field legend{font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.field .opt{text-transform:none;color:var(--gris)}
.field input,.field textarea{font:inherit;padding:14px;border:2px solid var(--noir);background:#fff;color:var(--noir);border-radius:0;width:100%}
.field input:focus,.field textarea:focus{outline:3px solid var(--rouge);outline-offset:0}
.field textarea{min-height:150px;resize:vertical}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.choices label{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:1rem;display:inline-flex;align-items:center;gap:8px;border:2px solid var(--noir);padding:8px 14px;cursor:pointer;background:#fff}
.choices input{accent-color:var(--rouge)}


/* Mentions légales */
.legal-section{padding-top:0}
.legal{max-width:780px}
.legal h2{font-size:1.4em;margin:1.6em 0 .5em}
.legal p{margin-bottom:.8em}


@media (max-width:960px){
  .faq__grid{grid-template-columns:1fr}
  
}
@media (max-width:640px){ .field-row{grid-template-columns:1fr} }
.footer address{font-style:normal}

/* ===================== Offres, version lisible ===================== */














.btn--big{font-size:1.1rem;padding:1em 2em;justify-self:start}

/* ===================== Contact, version lisible ===================== */









.cal-inline{width:100%;min-height:620px;background:#fff;border:2px solid var(--noir);overflow:auto}




.cal-inline--off{min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px}
.hero__text .lead{max-width:22em}
.hero__text .btn-row{position:relative;z-index:3}

/* =====================================================================
   RÈGLE DES FONDS DE LA CHARTE (prioritaire sur tout ce qui précède)
   blanc → texte noir · noir → texte rose · rose → texte rouge · rouge → texte blanc
   ===================================================================== */
:root{--blanc:#ffffff}

/* --- Sur blanc : noir --- */
.hero__eye{color:var(--blanc);background:var(--rouge);padding:0 .08em .04em;display:inline-block;transform:rotate(-2deg);margin-top:.06em;width:max-content}
.pole__num{color:var(--noir)}
.faq__item summary::after{color:var(--noir)}
.crumbs,.small,.muted,.field .opt{color:var(--noir)}
.nav a:not(.btn):hover{color:var(--noir);text-decoration:underline;text-decoration-color:var(--rouge);text-decoration-thickness:3px;text-underline-offset:7px}
.link:hover,.who a:hover,.pole:hover .pole__body em{color:inherit}

/* Mot scotché (On se voit ?, Sous nos yeux…) : texte blanc sur scotch rouge */
.taped-word{color:var(--blanc);padding:0 .12em}
.taped-word::after{left:-.04em;right:-.06em;top:.12em;bottom:.02em;height:auto;opacity:1;mix-blend-mode:normal;transform:rotate(-2deg)}

/* --- Sur noir : rose --- */
.label{background:var(--noir);color:var(--lilas)}
.btn{color:var(--lilas)}
.btn--ghost{background:var(--blanc);color:var(--noir)}
.btn--ghost:hover{background:var(--noir);color:var(--lilas)}
.method,.method .section-title,.method .lead,.method h3,.method .step p{color:var(--lilas)}
.method .step{border-top-color:var(--lilas)}
.method .step__num{color:var(--lilas)}
.method .label{background:var(--lilas);color:var(--rouge)}
.footer,.footer a,.footer .slogan,.footer address li{color:var(--lilas)}
.footer a:hover{color:var(--blanc)}
.footer__bottom{color:var(--lilas);border-top-color:rgba(224,195,222,.3)}

/* --- Sur rose : rouge --- */
.who,.who h3,.who p,.who .muted,.who a{color:var(--rouge)}
.who a{color:var(--rouge);text-decoration-color:var(--rouge)}

.pole:hover,.pole:hover .pole__hook,.pole:hover .pole__body,.pole:hover .pole__num,.pole:hover .pole__body em{color:var(--rouge)}
.pole:hover .pole__body em{text-decoration-color:var(--rouge)}
.paper-word{color:var(--rouge)}
.pole:hover .paper-word::before{background:var(--blanc)}
.pole:hover .paper-word{color:var(--noir)}


/* --- Sur rouge : blanc --- */
.cta,.cta h2,.cta .lead{color:var(--blanc)}
.marquee{color:var(--blanc)}
.label--rouge,.tape-label,.btn--rouge,.cursor{color:var(--blanc)}
.label--rouge{background:var(--rouge)}
.cutout-word{color:var(--noir)}
.cutout-word::before{background:var(--blanc)}
.btn--creme{background:var(--blanc);border-color:var(--blanc);color:var(--noir)}
.sticker span{background:var(--blanc)}
.who .label{color:var(--lilas)}


/* ---------------------------------------------------------------------
   Assouplissement (validé par Farida) : seuls les TITRES suivent la règle
   des fonds dans les grands blocs rose et noir. Le texte courant reste
   confortable à lire.
   --------------------------------------------------------------------- */
/* Blocs roses : titres rouges, texte noir, liens noirs soulignés de rouge */
.who p,.who .muted{color:var(--noir)}
.who a{color:var(--noir);text-decoration-color:var(--rouge)}
.who a:hover{color:var(--rouge)}
.pole:hover .pole__body{color:var(--noir)}
.pole:hover .pole__body strong{color:var(--rouge)}
/* Blocs noirs : titres roses, texte blanc légèrement adouci */
.method .lead,.method .step p{color:rgba(255,255,255,.82)}
.method .step{border-top-color:rgba(224,195,222,.5)}
.footer a,.footer address li{color:var(--blanc)}
.footer a:hover{color:var(--lilas)}
.footer__bottom,.footer__bottom a{color:rgba(255,255,255,.6)}

/* ===================== Offres : trois pôles dépliables ===================== */
.page-head--tight{padding-bottom:clamp(24px,3vw,40px)}
.acc-section{padding-top:0}
.acc-wrap{display:flex;gap:14px;align-items:stretch;min-height:560px}
.acc{flex:1 1 0;min-width:0;display:flex;flex-direction:column;transition:flex-grow .45s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden}
.acc.is-open{flex-grow:2.6}
.acc--noir{background:var(--noir);color:var(--blanc)}
.acc--lilas{background:var(--lilas);color:var(--noir)}
.acc--rouge{background:var(--rouge);color:var(--blanc)}
.acc__head{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(24px,2.6vw,40px);width:100%}
.acc__head:focus-visible{outline:3px solid var(--blanc);outline-offset:-6px}
.acc--lilas .acc__head:focus-visible{outline-color:var(--rouge)}
.acc__num{font-family:var(--mono);font-size:clamp(56px,6vw,96px);line-height:.8}
.acc__name{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:14px;line-height:1.35}
.acc__hook{font-family:var(--sans);font-weight:700;font-size:clamp(32px,3.4vw,54px);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.acc__seo{font-size:1.02em;line-height:1.5;max-width:34em;display:none}
.acc__more{margin-top:auto;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:14px;display:inline-flex;gap:10px;align-items:center;border-bottom:2px solid currentColor;padding-bottom:2px}
.acc__more span{font-size:22px;line-height:1;transition:transform .3s}
.acc.is-open .acc__more span{transform:rotate(45deg)}
.acc.is-open .acc__seo{display:block}
.acc__body{display:none;padding:0 clamp(24px,2.6vw,40px) clamp(24px,2.6vw,40px)}
.acc.is-open .acc__body{display:block;animation:apparait .35s ease both}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.acc__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;border-top:2px solid currentColor}
.acc-offer{padding:18px 0;border-bottom:1px solid currentColor;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:6px 28px;scroll-margin-top:100px}
.acc-offer h3{font-size:clamp(19px,1.6vw,23px);line-height:1.15;grid-row:span 2}
.acc-offer p{font-size:.96em;line-height:1.5}
.acc-offer__links{display:flex;flex-wrap:wrap;gap:18px;font-weight:700}
.acc-offer__links a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* Couleurs de la charte : titres selon le fond, texte courant lisible */
.acc--noir .acc__num,.acc--noir .acc__hook,.acc--noir h3{color:var(--lilas)}
.acc--noir .acc-offer__links a{color:var(--lilas)}
.acc--lilas .acc__num,.acc--lilas .acc__hook,.acc--lilas h3{color:var(--rouge)}
.acc--lilas .acc-offer__links a{color:var(--noir);text-decoration-color:var(--rouge)}
.acc--lilas .acc__list,.acc--lilas .acc-offer{border-color:rgba(244,0,35,.45)}
.acc--rouge .acc__num,.acc--rouge .acc__hook,.acc--rouge h3,.acc--rouge .acc-offer__links a{color:var(--blanc)}
.acc--noir .acc-offer,.acc--rouge .acc-offer{border-color:rgba(255,255,255,.35)}
.acc:not(.is-open):hover .acc__more{opacity:.75}

/* Occasions spéciales : bande simple */
.occ{border-top:2px solid var(--noir)}
.occ__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.occ header{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.occ h2{font-weight:700;font-size:clamp(34px,4vw,56px);line-height:.95;letter-spacing:-.02em}
.occ__list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.occ-offer{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--noir);padding-top:16px;scroll-margin-top:100px}
.occ-offer h3{font-size:clamp(21px,1.8vw,26px);line-height:1.1}
.occ .acc-offer__links a{color:var(--noir);text-decoration-color:var(--rouge)}

@media (max-width:960px){
  .acc-wrap{flex-direction:column;min-height:0}
  .acc,.acc.is-open{flex:none}
  .acc__seo{display:block}
  .acc-offer{grid-template-columns:1fr}
  .acc-offer h3{grid-row:auto}
  .occ__grid,.occ__list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.acc{transition:none}.acc.is-open .acc__body{animation:none}}
.page-head--tight h1{font-size:clamp(48px,7vw,104px)}

/* Offres = fiches blanches posées dans le pôle (le pôle reste la zone colorée) */
.acc__sub{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin:4px 0 14px;opacity:.85}
.acc__list{border-top:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.acc-offer{display:flex;flex-direction:column;gap:8px;background:var(--blanc);color:var(--noir);padding:20px 20px 18px;border:0;box-shadow:0 10px 22px rgba(0,1,0,.22)}
.acc-offer:nth-child(odd){transform:rotate(-.5deg)}
.acc-offer:nth-child(even){transform:rotate(.5deg)}
.acc .acc-offer h3,.acc--noir .acc-offer h3,.acc--lilas .acc-offer h3,.acc--rouge .acc-offer h3{color:var(--noir);font-size:clamp(19px,1.5vw,22px);grid-row:auto}
.acc-offer p{font-size:.92em;color:var(--noir)}
.acc-offer__tag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;align-self:flex-start;background:var(--noir);color:var(--lilas);padding:.15em .5em}
.acc .acc-offer__links{margin-top:auto;padding-top:6px;gap:16px}
.acc .acc-offer__links a,.acc--noir .acc-offer__links a,.acc--lilas .acc-offer__links a,.acc--rouge .acc-offer__links a{color:var(--noir);text-decoration-color:var(--rouge);font-size:.92em}
.acc .acc-offer__links a:hover{color:var(--rouge)}
.acc-offer:target{outline:3px solid var(--noir);outline-offset:3px;box-shadow:0 10px 22px rgba(0,1,0,.22)}

/* ===================== Page Le studio ===================== */
.st-hero{padding-block:clamp(32px,5vw,72px)}
.st-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center}
.st-hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.st-hero__h1{display:flex;flex-direction:column;align-items:flex-start;gap:20px;font-weight:inherit;font-size:inherit;line-height:inherit}
.st-hero__title{font-weight:700;font-size:clamp(56px,9vw,136px);line-height:.9;letter-spacing:-.03em}
.st-photo{position:relative;margin:0;max-width:100%}
.st-photo img{width:100%;height:auto;border:10px solid var(--blanc);box-shadow:0 18px 40px rgba(0,1,0,.16)}
.st-photo::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:32px;transform:translateX(-50%) rotate(-4deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28));z-index:2}
.st-photo--hero{transform:rotate(2deg);max-width:520px;justify-self:center}
.st-photo--tilt-l{transform:rotate(-2deg)}
.st-photo--tilt-r{transform:rotate(1.8deg)}
.st-chapter{border-top:2px solid var(--noir)}
.st-chapter--lilas{background:var(--lilas)}
.st-chapter--lilas h2,.st-chapter--lilas .st-chapter__num{color:var(--rouge)}
.st-chapter__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.st-chapter__grid--rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.st-chapter__grid > .st-photo{max-width:480px;justify-self:center}
.st-chapter__text{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.st-chapter__text p{font-size:1.08em;max-width:32em}
.st-chapter__num{font-family:var(--mono);font-size:clamp(56px,7vw,100px);line-height:.8;color:var(--noir)}
.st-chapter h2{font-weight:700;font-size:clamp(40px,5.5vw,80px);line-height:.95;letter-spacing:-.02em}


.st-sign{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px}
.st-look{background:var(--noir)}
.st-look .section-title,.st-look h3{color:var(--lilas)}
.st-look .label{background:var(--lilas);color:var(--rouge);margin-bottom:12px}
.st-look__list{list-style:none;padding:0;margin-top:clamp(28px,4vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);counter-reset:look}
.st-look__list li{border-top:2px solid rgba(224,195,222,.5);padding-top:20px;counter-increment:look}
.st-look__list li::before{content:"0" counter(look);font-family:var(--mono);color:var(--lilas);display:block;margin-bottom:8px}
.st-look h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:8px}
.st-look p{color:rgba(255,255,255,.82)}
.st-next{padding-block:clamp(56px,7vw,96px)}
.st-next__grid{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,56px)}
.st-next__card{border:2px dashed var(--noir);padding:24px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transform:rotate(-1.5deg);background:var(--blanc)}
.st-next__card .person__name{color:var(--noir);opacity:.55}
@media (max-width:960px){
  .st-hero__grid,.st-chapter__grid,.st-chapter__grid--rev{grid-template-columns:1fr}
  .st-chapter__grid--rev .st-photo{order:-1}
  .st-look__list{grid-template-columns:1fr}
}

.st-sum{border-top:2px solid var(--noir)}
.st-sum__inner{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:900px}

/* Titres SEO : mot-clé en étiquette + accroche de marque, dans la même balise */
.kh{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
h1 .label,h2 .label,h3 .label{font-family:var(--mono);font-size:14px;font-weight:400;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}
.pole__name{display:block;font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.05em;text-transform:uppercase;line-height:1.4;margin-bottom:8px;color:var(--noir)}
.acc__title{display:flex;flex-direction:column;gap:12px;font-size:inherit;font-weight:inherit}
.acc__more{font:inherit;font-family:var(--mono);background:none;border:0;border-bottom:2px solid currentColor;color:inherit;cursor:pointer;padding:0 0 2px;margin-top:auto;text-transform:uppercase;letter-spacing:.05em;font-size:14px;display:inline-flex;gap:10px;align-items:center}
.acc__more:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.acc__head{cursor:pointer}

/* ===================== Contact : un choix, un panneau ===================== */
.ct{padding-top:0}
.ct-choice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);margin-bottom:clamp(32px,4vw,56px)}
.ct-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,36px);padding-right:72px;border:2px solid var(--noir);background:var(--blanc);color:var(--noir);text-decoration:none;transition:background .2s,color .2s,transform .2s}
.ct-card:hover{transform:translateY(-3px)}
.ct-card__meta{font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.ct-card__title{font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1;letter-spacing:-.02em}
.ct-card__text{font-size:1rem;max-width:30em}
.ct-card__go{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:36px;line-height:1;transition:transform .2s}
.ct-card:hover .ct-card__go{transform:translate(4px,-50%)}
.ct-card.is-active{background:var(--noir);color:var(--blanc)}
.ct-card.is-active .ct-card__title,.ct-card.is-active .ct-card__meta{color:var(--lilas)}
.ct-card.is-active .ct-card__go{transform:translateY(-50%) rotate(90deg);color:var(--lilas)}
.ct-card:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.ct-panel{display:flex;flex-direction:column;align-items:flex-start;gap:18px;scroll-margin-top:90px;padding-bottom:clamp(24px,3vw,40px)}
html:not(.ct-js) .ct-panel + .ct-panel{margin-top:clamp(48px,6vw,80px)}
.ct-panel h2{font-weight:700;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.02em}
.ct-panel__intro{font-size:1.08em;max-width:38em}
.ct-panel .cal-inline{width:100%;min-height:640px}
.ct-form{width:100%;max-width:820px;display:grid;gap:22px}
.ct-form .field input,.ct-form .field textarea{background:var(--blanc);font-size:1.05rem}
.ct-form .field label,.ct-form .field legend{font-size:15px}
.ct-form__end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ct-form__end .small{max-width:28em;margin:0}
.ct-direct{margin-top:clamp(32px,4vw,56px);padding-top:24px;border-top:2px solid var(--noir)}
@media (max-width:760px){.ct-choice{grid-template-columns:1fr}.ct-card{padding-right:60px}}
.ct-panel[hidden]{display:none}
.ct-panel .cal-inline--off{min-height:0}

/* ===================== Projets ===================== */
.pin__img--photo{filter:none}
.pin__img--photo img{width:100%;height:100%;object-fit:cover;display:block}
.pj-card{text-decoration:none;color:var(--noir)}
.pj-card__meta{margin-top:14px;font-size:.92em}
.pj-soon{margin-top:clamp(56px,6vw,96px);font-family:var(--mono);font-size:15px}
.pj-hero{padding-block:clamp(32px,5vw,72px)}
.pj-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:start}
.pj-hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0}
.pj-hero h1>span:last-child{font-weight:700;font-size:clamp(56px,9vw,136px);line-height:.9;letter-spacing:-.03em}
.pj-dot{color:var(--rouge)}
.pj-facts{display:grid;gap:0;width:100%;border-top:2px solid var(--noir);margin-top:8px}
.pj-facts>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid rgba(0,1,0,.2)}
.pj-facts dt{font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.05em;padding-top:3px}
.pj-facts ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.pj-story{background:var(--noir)}
.pj-story__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.pj-chapter{border-top:2px solid rgba(224,195,222,.5);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.pj-chapter h2{color:var(--lilas);font-weight:700;font-size:clamp(26px,2.4vw,36px);line-height:1}
.pj-chapter p{color:rgba(255,255,255,.85)}
.pj-gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,36px);align-items:start}
.pj-shot img,.pj-slide img{width:100%;height:auto;border:8px solid var(--blanc);box-shadow:0 12px 28px rgba(0,1,0,.14)}
.pj-shot:nth-child(3n+1){transform:rotate(-1.2deg)}
.pj-shot:nth-child(3n+2){transform:rotate(.8deg) translateY(28px)}
.pj-shot:nth-child(3n){transform:rotate(-.4deg) translateY(10px)}
.pj-carousel{background:var(--lilas)}
.pj-carousel h2>span:last-child{color:var(--rouge)}
.pj-carousel__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:18px;overflow-x:auto;padding:28px 4px 12px;scroll-snap-type:x mandatory}
.pj-slide{scroll-snap-align:start}
@media (max-width:960px){
  .pj-hero__grid,.pj-story__grid{grid-template-columns:1fr}
  .pj-gallery__grid{grid-template-columns:1fr 1fr}
  .pj-shot:nth-child(n){transform:none}
  .pj-facts>div{grid-template-columns:1fr;gap:4px}
}
.work__more{margin-top:clamp(56px,6vw,88px)}
.pj-related{border-top:2px solid var(--noir)}
.pj-related h2>span:last-child{font-weight:700;font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-.02em}
.pj-related__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:24px;margin-top:32px}
.pj-rel{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.pj-rel__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border:8px solid var(--blanc);box-shadow:0 10px 22px rgba(0,1,0,.14);transition:transform .2s}
.pj-rel:hover .pj-rel__img img{transform:rotate(-1.5deg) scale(1.02)}

/* Carrousel automatique (défilement continu, pause au survol) */
.pj-carousel__viewport{overflow:hidden;margin-inline:calc(-1 * var(--gutter));padding:28px 0 12px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pj-carousel__viewport .pj-carousel__row{display:flex;gap:22px;width:max-content;overflow:visible;padding:0;animation:pj-defile calc(var(--n) * 6s) linear infinite;scroll-snap-type:none}
.pj-carousel__viewport .pj-slide{width:clamp(200px,22vw,300px);flex:none}
.pj-carousel__viewport:hover .pj-carousel__row{animation-play-state:paused}
@keyframes pj-defile{to{transform:translateX(calc(-50% - 11px))}}
@media (prefers-reduced-motion:reduce){
  .pj-carousel__viewport{overflow-x:auto}
  .pj-carousel__viewport .pj-carousel__row{animation:none}
  .pj-carousel__viewport .pj-slide[aria-hidden="true"]{display:none}
}

/* Direction artistique d'un projet */
.da{border-top:2px solid var(--noir)}
.da h2>span:last-child{font-weight:700}
.da__intro{margin:18px 0 clamp(36px,4vw,56px);max-width:40em}
.da__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px) clamp(32px,5vw,80px)}
.da__block{display:flex;flex-direction:column;gap:12px;min-width:0}
.da__block h3{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:15px;border-top:2px solid var(--noir);padding-top:14px}
.da__block>p{max-width:34em}
.da__block--logo{grid-column:1/-1}
.da-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);margin-top:8px}
.da-logo img{width:100%;height:auto;transition:transform .3s}
.da-logo:hover img{transform:rotate(-6deg) scale(1.03)}
.da-syms{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.da-sym img{width:100%;height:auto}
.da-palette{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.da-swatch{display:flex;flex-direction:column;gap:6px}
.da-swatch__chip{display:block;aspect-ratio:3/4;background:var(--c);border:1px solid rgba(0,1,0,.15);border-radius:0 18px 0 18px}
.da-swatch__name{font-size:.85em;font-weight:700;line-height:1.2}
.da-swatch__hex{font-family:var(--mono);font-size:12px}
.da__block--voice{grid-column:1/-1;background:var(--v-bg,#0000FF);color:var(--v-tx,#BDCCD4);padding:clamp(28px,4vw,56px);border-radius:0 40px 0 40px}
.da__block--voice h3{border-top-color:var(--v-tx,#BDCCD4)}
.da-sign{font-weight:700;font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.02em;color:var(--v-hi,#FFD4D4);max-width:none}
.da-words{font-size:clamp(18px,1.8vw,24px);letter-spacing:.02em;max-width:none}
@media (max-width:960px){
  .da__grid{grid-template-columns:1fr}
  .da-logos{grid-template-columns:repeat(2,1fr)}
  .da-palette{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.pin__img--photo img.is-logo,.pj-rel__img img.is-logo{object-fit:contain;background:#fff;padding:8%}
.st-photo--hero img.is-logo{background:#fff;padding:6%}
/* Galerie discrète (visuels secondaires) */
.pj-gallery--compact{padding-block:clamp(40px,5vw,64px)}
.pj-gallery--compact .pj-gallery__grid{grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:clamp(14px,2vw,28px)}
.pj-gallery--compact .pj-shot:nth-child(n){transform:none}
.pj-gallery--compact .pj-shot img{border-width:6px;aspect-ratio:4/5;object-fit:cover}
@media (max-width:640px){.pj-gallery--compact .pj-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Bandeau photo discret qui défile */
.pj-gallery--compact{padding-block:clamp(32px,4vw,56px)}
.pj-strip{overflow:hidden;margin-inline:calc(-1 * var(--gutter));-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pj-strip__row{display:flex;gap:14px;width:max-content;animation:pj-strip calc(var(--n) * 5s) linear infinite}
.pj-strip:hover .pj-strip__row{animation-play-state:paused}
.pj-strip__item{flex:none;width:clamp(120px,12vw,170px);margin:0}
.pj-strip__item img{width:100%;aspect-ratio:4/5;object-fit:cover;border:5px solid var(--blanc);box-shadow:0 6px 14px rgba(0,1,0,.12);filter:saturate(.9)}
@keyframes pj-strip{to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.pj-strip{overflow-x:auto}.pj-strip__row{animation:none}.pj-strip__item[aria-hidden="true"]{display:none}}

/* MERCI : logo horizontal, grille de logos souple, affichage large */
.da-wordmarks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);margin:8px 0 18px}
.da-wordmark{background:var(--blanc);padding:clamp(14px,2vw,24px);border-radius:14px}
.da-wordmark img{width:100%;height:auto}
.da-logos[style*="--n"]{grid-template-columns:repeat(var(--n),1fr)}


.pj-wide__fig{flex:1 1 560px}

.pj-wide__fig img{width:100%;height:auto;border:8px solid var(--blanc);box-shadow:0 12px 28px rgba(0,1,0,.14)}
@media (max-width:720px){.da-wordmarks{grid-template-columns:1fr}.da-logos[style*="--n"]{grid-template-columns:repeat(3,1fr)}}

/* ===== Pages projet : version resserrée (moins de défilement) ===== */
.pj-page section{padding-block:clamp(40px,5vw,72px)}
.pj-page .pj-hero{padding-block:clamp(24px,3.5vw,48px)}
.pj-page .pj-hero .st-photo--hero{max-width:440px;justify-self:end}
.pj-page .pj-hero h1>span:last-child{font-size:clamp(52px,7.5vw,112px)}
/* Récit + visuel côte à côte */
.pj-story__grid--media{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
.pj-story__chapters{display:grid;gap:22px}
.pj-story__media .pj-wide__fig img{border-width:6px;max-height:560px;width:auto;max-width:100%;margin-inline:auto;display:block}
/* Galerie : une seule rangée de vignettes, clic pour agrandir */
.pj-page .pj-gallery__grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));max-width:1100px;margin-inline:auto;gap:clamp(12px,1.6vw,22px)}
.pj-page .pj-shot:nth-child(n){transform:none}
.pj-page .pj-shot:nth-child(odd){transform:rotate(-1deg)}
.pj-page .pj-shot:nth-child(even){transform:rotate(.8deg) translateY(10px)}
.pj-page .pj-shot img{border-width:6px;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in}
.pj-page .pj-strip__item img,.pj-page .pj-slide img,.pj-page .da-sym img,.pj-page .da-logo img{cursor:zoom-in}
/* Direction artistique en grille 2 x 2 */
.pj-page .da__intro{margin:12px 0 clamp(24px,3vw,36px)}
.pj-page .da__grid{gap:clamp(24px,3vw,40px) clamp(28px,4vw,56px)}
.pj-page .da__block--logo{grid-column:auto}
.pj-page .da-logos{grid-template-columns:repeat(var(--n,4),1fr);gap:10px}
.pj-page .da-wordmarks{gap:10px;margin:4px 0 6px}
.pj-page .da-wordmark{padding:10px 12px;border-radius:10px}
.pj-page .da-syms{gap:8px}
.pj-page .da-palette{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.pj-page .da-swatch__chip{aspect-ratio:1}
.pj-page .da__block--voice{grid-column:auto;padding:clamp(22px,3vw,36px);justify-content:center}
.pj-page .da-sign{font-size:clamp(26px,3vw,44px)}
.pj-page .da-words{font-size:16px}
/* Carrousel et autres projets plus compacts */
.pj-page .pj-carousel__viewport{padding:18px 0 6px}
.pj-page .pj-carousel__viewport .pj-slide{width:clamp(150px,15vw,210px)}
.pj-page .pj-carousel__viewport .pj-slide img{border-width:6px}
.pj-page .pj-related h2>span:last-child{font-size:clamp(28px,3vw,40px)}
.pj-page .pj-related__row{grid-template-columns:repeat(auto-fill,minmax(130px,170px));gap:18px;margin-top:20px}
.pj-page .pj-rel__img img{border-width:5px}
.pj-page .cta h2{font-size:clamp(44px,6vw,88px)}
/* Visionneuse */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,1,0,.88);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lb[hidden]{display:none}
.lb__img{max-width:min(92vw,1100px);max-height:88vh;width:auto;height:auto;border:8px solid var(--blanc)}
.lb__close{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer}
@media (max-width:900px){
  .pj-story__grid--media{grid-template-columns:1fr}
  .pj-page .pj-hero .st-photo--hero{justify-self:center}
  .pj-page .pj-gallery__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){.pj-page .pj-gallery__grid{grid-template-columns:repeat(2,1fr)}.pj-page .da-logos{grid-template-columns:repeat(min(var(--n,4),3),1fr)}}

/* ===== Mur de projets + aperçu latéral ===== */
.wall-sec{padding-top:0}
.wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,250px);gap:clamp(10px,1.4vw,18px);grid-auto-flow:dense}
.wall__tile{position:relative;display:block;overflow:hidden;background:var(--noir);border:6px solid var(--blanc);box-shadow:0 10px 24px rgba(0,1,0,.12);text-decoration:none;color:var(--blanc)}
.wall__tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .3s}
.wall__tile:hover img,.wall__tile:focus-visible img{transform:scale(1.04);filter:brightness(.72)}
.wall__tile--1{grid-column:span 2;grid-row:span 2}
.wall__tile--2{grid-row:span 2}
.wall__tile--5{grid-column:span 2}
.wall__cap{position:absolute;inset:auto 0 0 0;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;background:linear-gradient(transparent,rgba(0,1,0,.72))}
.wall__client{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;width:100%}
.wall__name{font-weight:700;font-size:clamp(20px,2vw,30px);line-height:1}
.wall__more{margin-left:auto;font-family:var(--mono);font-size:12px;background:var(--rouge);padding:4px 8px;opacity:0;transform:translateY(6px);transition:.25s}
.wall__tile:hover .wall__more,.wall__tile:focus-visible .wall__more{opacity:1;transform:none}
.dr{position:fixed;inset:0;z-index:150}
.dr__veil{position:absolute;inset:0;background:rgba(0,1,0,.45);opacity:0;transition:opacity .25s}
.dr__panel{position:absolute;top:0;right:0;height:100%;width:min(560px,100%);background:var(--blanc);overflow-y:auto;padding:clamp(28px,4vw,48px);transform:translateX(100%);transition:transform .25s ease;outline:none;display:flex;flex-direction:column}
.dr.is-open .dr__veil{opacity:1}.dr.is-open .dr__panel{transform:none}
.dr__close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:40px;line-height:1;cursor:pointer;color:var(--noir)}
.dr__body{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.dr__title{font-weight:700;font-size:clamp(40px,5vw,64px);line-height:.95;letter-spacing:-.02em}
.dr__lead{font-size:17px}
.dr__thumbs{width:100%}
.dr__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.dr-open{overflow:hidden}
/* vignettes partagées */
.pj-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.dr__thumbs.pj-thumbs{grid-template-columns:repeat(4,1fr)}
.pj-thumb{margin:0}
.pj-thumb img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border:4px solid var(--blanc);box-shadow:0 4px 12px rgba(0,1,0,.12);cursor:zoom-in;transition:transform .2s}
.pj-thumb img:hover{transform:rotate(-1.5deg) scale(1.03)}
.cp-done{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cp-done li{font-family:var(--mono);font-size:12px;border:1px solid var(--noir);padding:3px 8px;border-radius:20px}
/* ===== Page client à onglets de campagnes ===== */
.cp-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.5vw,18px);align-self:start}
.cp-tab{position:relative;display:block;text-decoration:none;color:var(--blanc);border:6px solid var(--blanc);box-shadow:0 8px 20px rgba(0,1,0,.12);overflow:hidden;transition:transform .2s}
.cp-tab__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:grayscale(.6) brightness(.8);transition:filter .3s}
.cp-tab__name{position:absolute;left:10px;bottom:8px;font-weight:700;font-size:clamp(18px,1.8vw,24px);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cp-tab:hover img,.cp-tab.is-active img{filter:none}
.cp-tab.is-active{border-color:var(--rouge);transform:rotate(-1deg)}
.cp{padding-top:clamp(20px,3vw,40px)}
.cp-panel{border-top:2px solid var(--noir);padding-top:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);scroll-margin-top:90px}
.cp-panel[hidden]{display:none}
.cp-panel__head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.cp-panel__head>div{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cp-panel h2>span:last-child{font-weight:700;font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.02em}
.cp-panel__hero{margin:0;max-width:340px;justify-self:end}
.cp-panel__hero img{width:100%;height:auto;border:8px solid var(--blanc);box-shadow:0 12px 28px rgba(0,1,0,.14);transform:rotate(1.5deg)}
.cp-chaps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);background:var(--noir);color:rgba(255,255,255,.85);padding:clamp(22px,3vw,36px);border-radius:0 32px 0 32px}
.cp-chap h3{color:var(--lilas);font-weight:700;font-size:20px;margin-bottom:8px}
.cp-chap p{font-size:15px}
.cp-sub{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
@media (max-width:900px){
  .wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,40vw,260px)}
  .wall__tile--2{grid-row:span 1}
  .wall__tile--5{grid-column:span 1}
  .wall__more{opacity:1;transform:none}
  .cp-panel__head,.cp-chaps{grid-template-columns:1fr}
  .cp-panel__hero{justify-self:start;max-width:260px}
  .cp-tabs{grid-template-columns:repeat(4,1fr)}
  .cp-tab__name{font-size:14px}
}
@media (max-width:560px){.cp-tabs{grid-template-columns:repeat(2,1fr)}.dr__thumbs.pj-thumbs{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.dr__panel,.dr__veil,.wall__tile img{transition:none}}

/* Motifs et stickers (images détourées) */
/* rules moved to the cut-out drawings block */
.pj-page .da-palette:has(li:nth-child(6)){grid-template-columns:repeat(4,1fr)}
.pj-page .da-palette:has(li:nth-child(6)) .da-swatch__chip{aspect-ratio:2/1}

/* ===== Dessins détourés (motifs, stickers, pastilles) : on les laisse vivre ===== */
img.cutout{background:none!important;border:0!important;box-shadow:none!important;filter:none!important;border-radius:0}
.pj-strip__item:has(img.cutout){width:auto;height:clamp(110px,11vw,150px);display:flex;align-items:center}
.pj-strip__item img.cutout{width:auto;height:100%;aspect-ratio:auto;object-fit:contain;transition:transform .3s}
.pj-strip__item:nth-child(odd) img.cutout{transform:rotate(-6deg)}
.pj-strip__item:nth-child(even) img.cutout{transform:rotate(5deg) translateY(6px)}
.pj-strip__item img.cutout:hover{transform:rotate(0) scale(1.08)}
.pj-strip:has(img.cutout) .pj-strip__row{gap:clamp(20px,3vw,44px);padding-block:14px;align-items:center}
.da-syms--free{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(12px,2vw,26px) clamp(16px,2.4vw,32px);padding:10px 0}
.da-syms--free .da-sym{margin:0}
.da-syms--free .da-sym img{width:auto;height:clamp(64px,7vw,104px);aspect-ratio:auto;object-fit:contain;padding:0;transition:transform .3s}
.da-syms--free .da-sym:nth-child(3n+1) img{transform:rotate(-8deg)}
.da-syms--free .da-sym:nth-child(3n+2) img{transform:rotate(6deg) translateY(8px)}
.da-syms--free .da-sym:nth-child(3n) img{transform:rotate(-2deg) translateY(-6px)}
.da-syms--free .da-sym img:hover{transform:rotate(0) scale(1.12)}
.da-logo img.cutout{filter:drop-shadow(0 6px 10px rgba(0,1,0,.12))!important}
.pj-thumb img.cutout{aspect-ratio:1;object-fit:contain;padding:6%}
.lb__img--cutout{border:0;background:#FEFBE8;padding:clamp(16px,4vw,48px);border-radius:24px}
.wall__tile img.cutout,.pj-rel__img img.cutout{object-fit:contain;padding:10%}

/* ===== Planche de motifs (composition libre, fond blanc coton) ===== */
.pj-page .da__block--board{grid-column:1/-1;order:3}
.pj-page .da__grid:has(.da__block--board) .da__block--voice{order:4;grid-column:1/-1}
.board{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,clamp(34px,4.6vw,66px));gap:clamp(6px,1vw,14px);background:#FEFBE8;border-radius:0 40px 0 40px;padding:clamp(18px,3vw,44px);margin-top:10px;overflow:hidden}
.board__item{margin:0;grid-column:var(--c)/span var(--cs);grid-row:var(--r)/span var(--rs);display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.board__item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform:rotate(var(--rot));transition:transform .35s ease}
.board__item:hover img{transform:rotate(0) scale(1.1)}
@media (max-width:700px){
  .board{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px}
  .board__item img{height:clamp(56px,16vw,90px);max-height:none}
}
@media (max-width:700px){
  .board__item img[alt*=": rond"]{height:clamp(30px,9vw,46px)}
  .pj-page .da-logos[style*="--n:4"]{grid-template-columns:repeat(4,1fr)}
}
/* Aperçu latéral : images entières, jamais recadrées */
.dr__thumbs.pj-thumbs{display:block;columns:2;column-gap:12px}
.dr__thumbs .pj-thumb{break-inside:avoid;margin-bottom:12px}
.dr__thumbs .pj-thumb img{aspect-ratio:auto;height:auto}
.pj-slide img.cutout{width:100%;height:auto}
.pj-page .pj-carousel__viewport .pj-slide:has(img.cutout){width:clamp(120px,12vw,170px)}
/* Récit + plusieurs visuels : de l'air entre les images */
.pj-story__media{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,56px);padding-block:12px}
.pj-story__media .pj-wide__fig{flex:none;margin:0;max-width:78%}
.pj-story__media .pj-wide__fig:nth-child(odd){transform:rotate(-2deg);align-self:flex-start}
.pj-story__media .pj-wide__fig:nth-child(even){transform:rotate(2.5deg);align-self:flex-end}
.pj-story__media .pj-wide__fig img{max-height:420px}
@media (max-width:900px){.pj-story__media .pj-wide__fig{max-width:85%}}

/* ===== Bord déchiré réutilisable ===== */
.faq,.occ,.st-duo-sec,.ct{position:relative}
.faq::before,.occ::before,.st-duo-sec::before,.ct::before{content:"";position:absolute;left:0;right:0;top:-22px;height:24px;background:var(--tear,var(--lilas));clip-path:polygon(0 100%,0.0% 60%,1.7% 38%,3.3% 26%,5.0% 61%,6.7% 20%,8.3% 53%,10.0% 41%,11.7% 19%,13.3% 51%,15.0% 18%,16.7% 45%,18.3% 20%,20.0% 21%,21.7% 45%,23.3% 73%,25.0% 24%,26.7% 31%,28.3% 59%,30.0% 81%,31.7% 55%,33.3% 43%,35.0% 83%,36.7% 18%,38.3% 75%,40.0% 35%,41.7% 25%,43.3% 23%,45.0% 37%,46.7% 72%,48.3% 28%,50.0% 56%,51.7% 60%,53.3% 41%,55.0% 53%,56.7% 19%,58.3% 19%,60.0% 29%,61.7% 63%,63.3% 45%,65.0% 37%,66.7% 56%,68.3% 47%,70.0% 36%,71.7% 71%,73.3% 64%,75.0% 32%,76.7% 55%,78.3% 52%,80.0% 76%,81.7% 66%,83.3% 35%,85.0% 84%,86.7% 23%,88.3% 44%,90.0% 68%,91.7% 26%,93.3% 49%,95.0% 18%,96.7% 62%,98.3% 69%,100.0% 60%,100% 100%)}

/* Accueil : FAQ sur papier lilas, bien séparée de « Derrière l'œil » */
.faq{--tear:var(--lilas);background:var(--lilas);margin-top:clamp(24px,3vw,40px)}
.faq .section-title>span:last-child,.faq h2>span:last-child{color:var(--rouge)}
.faq .faq__list,.faq .faq__item{border-color:var(--rouge)}
.faq .faq__item summary::after{color:var(--rouge)}

/* Le Studio : bandeau rouge entre l'ouverture et la boutique */
.st-band{margin:0}
/* « Les trois à la fois » et « Trois coups d'œil » : deux feuilles posées sur papier lilas */
.st-duo-sec{--tear:var(--lilas);background:var(--lilas)}
.st-duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.st-duo-col{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0;background:var(--blanc);padding:clamp(26px,4vw,48px);position:relative;box-shadow:0 18px 40px rgba(0,1,0,.12)}
.st-duo-col:first-child{transform:rotate(-.8deg)}
.st-duo-col--look{transform:rotate(.8deg)}
.st-duo-col::before{content:"";position:absolute;top:-15px;left:36%;width:130px;height:32px;transform:rotate(-4deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28))}
.st-duo-sec .section-title>span:last-child{color:var(--noir)}
.st-duo-sec .st-look__list{grid-template-columns:1fr;margin-top:4px;gap:14px}
.st-duo-sec .st-look__list li{border-top:2px solid var(--noir);padding-top:12px;counter-increment:look}
.st-duo-sec .st-look__list li::before{content:"0" counter(look);font-family:var(--mono);color:var(--rouge);display:block;margin-bottom:4px}
.st-duo-sec h3{font-size:clamp(21px,1.9vw,26px);margin-bottom:4px}
@media (max-width:860px){.st-duo-grid{grid-template-columns:1fr;gap:40px}}
/* Dorian */
.st-next__photo{margin:0;max-width:300px;transform:rotate(-3deg);border:10px solid #fff;box-shadow:0 14px 30px rgba(0,1,0,.15);position:relative}
.st-next__photo::before{content:"";position:absolute;top:-14px;left:30%;width:110px;height:30px;transform:rotate(4deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;z-index:2}
.st-next__photo img{width:100%;height:auto;display:block}
/* Citation finale */
.st-quote{padding-block:clamp(64px,9vw,128px);text-align:center}
.st-quote__text{margin:0 auto;max-width:980px}
.st-quote__text p{font-weight:700;font-size:clamp(32px,4.6vw,68px);line-height:1.05;letter-spacing:-.02em;max-width:none}
.st-quote__text footer{margin-top:22px;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--rouge)}

/* Expertises : « Être vu au bon moment » en majesté, sur rouge */
.occ{--tear:var(--rouge);background:var(--rouge);color:var(--blanc);border-top:0;padding-block:clamp(72px,9vw,128px)}
.occ__grid{grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
.occ h2>span:last-child{color:var(--blanc);font-size:clamp(52px,8vw,120px);line-height:.9;letter-spacing:-.03em}
.occ h2 .label{background:var(--blanc);color:var(--rouge)}
.occ header p{color:var(--blanc);font-size:clamp(18px,1.6vw,22px);max-width:40em}
.occ__list{grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,32px)}
.occ-offer{background:var(--blanc);color:var(--noir);border:0;padding:clamp(22px,3vw,36px);position:relative;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.occ-offer:nth-child(1){transform:rotate(-1deg)}.occ-offer:nth-child(2){transform:rotate(1deg)}
.occ-offer::before{content:"";position:absolute;top:-14px;left:38%;width:120px;height:30px;transform:rotate(-4deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28))}
.occ-offer h3{font-size:clamp(26px,2.4vw,34px)}
@media (max-width:760px){.occ__list{grid-template-columns:1fr}}

/* Contact : on retrouve la DA */
.ct{--tear:var(--lilas);background:var(--lilas);padding-top:clamp(40px,5vw,64px)}
.ct-card{border:0;box-shadow:0 14px 30px rgba(0,1,0,.12)}
.ct-card::before{content:"";position:absolute;top:-14px;left:40%;width:120px;height:30px;transform:rotate(-3deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28))}
.ct-card:nth-child(1){transform:rotate(-.8deg)}.ct-card:nth-child(2){transform:rotate(.8deg)}
#tab-rdv:hover,#tab-rdv:focus-visible{background:var(--rouge);color:var(--blanc)}
#tab-rdv:hover .ct-card__title,#tab-rdv:hover .ct-card__meta,#tab-rdv:hover .ct-card__go{color:var(--blanc)}
#tab-ecrire:hover,#tab-ecrire:focus-visible{background:var(--noir);color:var(--blanc)}
#tab-ecrire:hover .ct-card__title,#tab-ecrire:hover .ct-card__meta,#tab-ecrire:hover .ct-card__go{color:var(--lilas)}
.ct-card:hover{transform:rotate(0) translateY(-4px)}
.ct-panel{background:var(--blanc);padding:clamp(24px,4vw,48px);position:relative;box-shadow:0 18px 40px rgba(0,1,0,.12);border-radius:0 32px 0 32px}
.ct-panel::before{content:"";position:absolute;top:-16px;left:8%;width:140px;height:34px;transform:rotate(-5deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28))}
.ct-direct{border-top-color:var(--rouge)}
.ct-direct a{color:var(--noir)}
.ct .ct-tel{font-weight:700}

.cta--lilas,.cta--lilas::before{background:var(--lilas)}
.cta.cta--lilas h2{color:var(--rouge)}
.cta.cta--lilas .lead{color:var(--noir)}
.cta--lilas .btn--creme{background:var(--noir);color:var(--blanc)}

/* Accueil : les yeux découpés défilent les uns sur les autres */
.hero__photo{position:relative;max-width:640px;margin-left:auto}
.hero__photo>img{width:100%;max-width:none;display:block}
.eyes{position:absolute;inset:0;pointer-events:none}
.eye-slot{position:absolute;transform:translate(-50%,-50%);aspect-ratio:3/2}
.eye-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,1,0,.35));
  animation:eye-pop 7.2s calc(var(--d) + var(--i) * 1.2s) infinite both}
@keyframes eye-pop{
  0%{opacity:0;transform:scale(.6) rotate(-14deg)}
  2.5%{opacity:1;transform:scale(1.08) rotate(4deg)}
  5%{opacity:1;transform:scale(1) rotate(-2deg)}
  18%{opacity:1;transform:scale(1) rotate(-2deg)}
  21%,100%{opacity:0;transform:scale(1) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.eye-slot img{animation:none}}

/* ===== Menu mobile ===== */
.burger{display:none;width:46px;height:46px;border:0;background:var(--noir);border-radius:50%;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--blanc);transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"]{background:var(--rouge)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:64px;bottom:0;z-index:29;background:var(--lilas);overflow-y:auto;padding:28px 20px 40px}
.mnav[hidden]{display:none}
.mnav::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:var(--fond);clip-path:polygon(0 100%,0.0% 60%,1.7% 38%,3.3% 26%,5.0% 61%,6.7% 20%,8.3% 53%,10.0% 41%,11.7% 19%,13.3% 51%,15.0% 18%,16.7% 45%,18.3% 20%,20.0% 21%,21.7% 45%,23.3% 73%,25.0% 24%,26.7% 31%,28.3% 59%,30.0% 81%,31.7% 55%,33.3% 43%,35.0% 83%,36.7% 18%,38.3% 75%,40.0% 35%,41.7% 25%,43.3% 23%,45.0% 37%,46.7% 72%,48.3% 28%,50.0% 56%,51.7% 60%,53.3% 41%,55.0% 53%,56.7% 19%,58.3% 19%,60.0% 29%,61.7% 63%,63.3% 45%,65.0% 37%,66.7% 56%,68.3% 47%,70.0% 36%,71.7% 71%,73.3% 64%,75.0% 32%,76.7% 55%,78.3% 52%,80.0% 76%,81.7% 66%,83.3% 35%,85.0% 84%,86.7% 23%,88.3% 44%,90.0% 68%,91.7% 26%,93.3% 49%,95.0% 18%,96.7% 62%,98.3% 69%,100.0% 60%,100% 100%);transform:scaleY(-1)}
.mnav__paper{position:relative;background:var(--blanc);padding:30px 22px 26px;box-shadow:0 18px 40px rgba(0,1,0,.15);transform:rotate(-.6deg);animation:mnav-in .3s ease both}
.mnav__paper::before{content:"";position:absolute;top:-14px;left:34%;width:120px;height:30px;transform:rotate(-4deg);background:url("/assets/photos/scotch-blanc.webp") center/100% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,1,0,.28))}
@keyframes mnav-in{from{opacity:0;transform:translateY(-10px) rotate(-.6deg)}to{opacity:1;transform:rotate(-.6deg)}}
.mnav__list{list-style:none;padding:0;margin:0}
.mnav__list li{border-bottom:2px solid var(--noir)}
.mnav__list a{display:flex;align-items:baseline;gap:14px;padding:14px 2px;text-decoration:none;color:var(--noir);font-weight:700;font-size:clamp(30px,9vw,40px);line-height:1;letter-spacing:-.02em}
.mnav__list a span{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--rouge);letter-spacing:.06em}
.mnav__list a[aria-current="page"]{color:var(--rouge)}
.mnav__cta{margin-top:24px;width:100%;text-align:center;justify-content:center}
.mnav__info{margin-top:20px;font-size:15px;line-height:1.8}
.mnav__info a{color:var(--noir);text-decoration-color:var(--rouge)}
.mnav__sign{margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--rouge)}
.menu-open{overflow:hidden}
@media (max-width:760px){
  .burger{display:flex}
  .nav .nav__text{display:none}
  .nav{gap:10px}
  .nav .btn{padding:.55em .85em;font-size:.85rem}
  .header .wrap{height:64px}
  .header__logo img{height:44px}
}
@media (max-width:380px){.nav .btn{display:none}}
@media (prefers-reduced-motion:reduce){.mnav__paper{animation:none}}

/* ===== Version mobile : plus fluide, moins de défilement ===== */
.swipe-hint{display:none}
@media (max-width:640px){
  section{padding-block:clamp(48px,12vw,64px)}
  /* Projets de l'accueil : une rangée à faire glisser */
  .work .pins{display:flex;max-width:none;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 18px;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .work .pins::-webkit-scrollbar{display:none}
  .work .pin{flex:0 0 74%;scroll-snap-align:center}
  /* Pour qui on crée : cartes à faire glisser */
  .who__grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 16px;scrollbar-width:none}
  .who__grid::-webkit-scrollbar{display:none}
  .who__grid article{flex:0 0 84%;scroll-snap-align:center;background:var(--blanc);padding:22px 20px;box-shadow:0 10px 24px rgba(0,1,0,.1)}
  .swipe-hint{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--rouge);margin-top:4px}
  /* Méthode : étapes en 2 colonnes compactes */
  .steps{grid-template-columns:1fr 1fr;gap:18px 16px}
  .step h3{font-size:18px}.step p{font-size:14px}
  /* Mur de projets */
  .wall__more{display:none}
  .wall__name{font-size:18px}
  /* Pages projet et studio */
  .st-chapter .st-photo{max-width:78%;margin-inline:auto}
  .pj-hero .st-photo--hero{max-width:82%;margin-inline:auto}
}

/* Mobile : le logo ouvre le menu */
@media (max-width:760px){
  .burger{display:none!important}
  .header__logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--noir)}
  .header__logo::after{content:"Menu";font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
  .header__logo.is-open::after{content:"Fermer";color:var(--rouge)}
  .header__logo.is-open img{transform:rotate(-90deg)}
}