/* Souplesse Studio — pages intérieures : Tous les projets, pages projet, À propos, Mentions légales.
   Socle commun : base.css. Points de rupture : 640 · 760 (mobile / tablette) · 1100 (3 colonnes de projets). */

.page{min-height:100vh;min-height:100svh;container-type:inline-size;padding:clamp(20px,2.2cqw,32px) var(--px) 0;display:flex;flex-direction:column;gap:clamp(40px,5cqw,80px);overflow-wrap:break-word}
.page--projets{gap:clamp(56px,7cqw,112px);padding-bottom:clamp(64px,7cqw,112px)}
.page--about{min-height:0}
.page--legal{gap:clamp(36px,4.4cqw,72px)}
.b800{font-weight:800}
.keep{white-space:nowrap}
@media (max-width:420px){.keep{white-space:normal}}
.page-main{display:flex;flex-direction:column;gap:clamp(40px,5cqw,80px);min-width:0}
/* Page projet : espaces resserrés pour que les créations apparaissent dès le premier écran */
.page--projet{gap:clamp(24px,3cqw,48px)}
.page--projet .page-main{gap:clamp(36px,4cqw,64px)}

/* En-tête */
.top{display:flex;justify-content:space-between;align-items:center;gap:24px}
.top-logo img{height:clamp(24px,2.8cqw,40px);width:auto}
.top-nav{display:flex;gap:clamp(20px,2.8cqw,40px);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.top-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.top-back{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pill{display:inline-flex;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(242,241,236,.6);padding:12px 20px;border-radius:999px}
.only-mob{display:none}
@media (max-width:759px){.only-mob{display:inline-flex}.only-desk{display:none}}
@media (pointer:coarse){.top-nav a,.top-back{padding:12px 0;margin:-12px 0}}
@media (max-width:420px){.top{gap:14px}.top-nav{gap:14px;font-size:12px}}
@media (max-width:360px){.top-logo img{height:21px}.top-nav{gap:12px}}

.back{align-self:flex-start;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.back>span:first-child{font-size:20px;line-height:1}
.back-sm{align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
@media (pointer:coarse){.back,.back-sm{padding:8px 0;margin:-8px 0}}

/* Pied de page */
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:clamp(16px,1.6cqw,24px) 0;border-top:var(--line);color:var(--mute)}
.foot--bare{border-top:0;padding-top:0}
@media (pointer:coarse){.foot a{padding:10px 0;margin:-10px 0}}

/* ───────────── Tous les projets ───────────── */
.pj-head{display:flex;flex-direction:column;gap:clamp(28px,3cqw,48px)}
.pj-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pj-h1{margin:0;font-size:clamp(40px,8cqw,136px);line-height:.92;font-weight:800;text-transform:uppercase}
.pj-count{color:var(--mute);white-space:nowrap}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;border-radius:999px;border:1px solid rgba(242,241,236,.3);background:transparent;color:var(--fg);white-space:nowrap;transition:background .25s,color .25s,border-color .25s,font-size .3s cubic-bezier(.2,.8,.2,1),padding .3s cubic-bezier(.2,.8,.2,1)}
.filter[aria-pressed=true]{font-size:14.5px;font-weight:700;padding:14px 24px;background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* Mobile : filtres resserrés (même taille que les pastilles des pages projet), le filtre actif ne grossit pas */
@media (max-width:639px){.filters{gap:6px}.filter{font-size:10.5px;letter-spacing:.06em;padding:8px 11px}.filter[aria-pressed=true]{font-size:10.5px;padding:8px 13px}}

.pj-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(16px,2.2cqw,32px);row-gap:clamp(48px,5cqw,80px);align-items:start}
.pj-card{display:flex;flex-direction:column;gap:18px;min-width:0}
.pj-card[hidden]{display:none}
.pj-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#161614}
.pj-zoom{position:absolute;inset:0;transition:transform .9s var(--ease)}
.pj-zoom>div,.pj-zoom>video,.pj-zoom>img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover;background-position:center}
.pj-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .3s,transform .4s var(--ease);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:14px 22px;border-radius:999px;background:var(--fg);color:var(--bg);pointer-events:none}
.pj-info{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.pj-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.pj-name{font-size:clamp(18px,1.9cqw,30px);font-weight:800;text-transform:uppercase;line-height:1;text-wrap:balance}
.pj-sub{font-size:clamp(14px,1.15cqw,17px);font-weight:300;line-height:1.3;color:var(--mute2)}
.pj-year{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute);padding-top:4px;white-space:nowrap}
.pj-empty{font-size:18px;font-weight:300;color:var(--mute2);margin:0}
.pj-empty[hidden]{display:none}
/* Cadre IA dans Tous les projets : arrondi comme les cartes, dans la largeur de la page */
.pj-ia{border-radius:clamp(10px,1.2cqw,18px);min-height:clamp(220px,24cqw,360px);display:flex;align-items:center}
.pj-ia[hidden]{display:none}
.pj-grid[hidden]{display:none}
@media (max-width:759px){.pj-ia{display:flex;align-items:stretch}}
.pj-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:clamp(32px,4cqw,56px);border-top:var(--line)}
.pj-foot>a:first-child{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.btn-line{display:flex;align-items:center;gap:12px;max-width:100%;text-align:center;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 24px;border:1px solid rgba(242,241,236,.6);border-radius:999px}
@media (hover:hover) and (pointer:fine){
  .pj-card:hover{opacity:1}
  .pj-card:hover .pj-zoom{transform:scale(1.05)}
  .pj-card:hover .pj-pill{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media (max-width:639px){.pj-h1{font-size:clamp(34px,10.5cqw,64px)}}
@media (max-width:360px){.pj-name{font-size:16.5px}.pj-info{gap:14px}}
@media (min-width:640px){
  .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-media{aspect-ratio:4/3}
}
@media (min-width:1100px){.pj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ───────────── Page projet (gabarit) ───────────── */
.pr-hero{display:flex;flex-direction:column;gap:clamp(24px,3cqw,48px)}
.pr-titles{display:flex;flex-direction:column;gap:clamp(10px,1.2cqw,18px)}
.pr-h1{margin:0;font-size:clamp(36px,8cqw,136px);line-height:.92;font-weight:800;text-transform:uppercase;text-wrap:balance}
.pr-subtitle{font-size:clamp(18px,2.2cqw,34px);font-weight:300;line-height:1.2;color:var(--mute2)}
.pr-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4cqw,36px);padding-top:clamp(20px,2.4cqw,32px);border-top:var(--line)}
.pr-meta>div{display:flex;flex-direction:column;gap:10px;min-width:0}
.pr-meta dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pr-meta dd{margin:0;font-size:clamp(15px,1.3cqw,20px);font-weight:300;line-height:1.45}
.pr-intro{margin:0;max-width:34em;font-size:clamp(20px,2.4cqw,38px);font-weight:300;line-height:1.25;text-wrap:pretty}
.pr-media{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.2cqw,18px);margin:0}
.pr-item{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0}
.pr-frame{position:relative;overflow:hidden;background:#161614;border-radius:6px}
.pr-frame>.pr-img,.pr-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background-size:cover;background-position:center}
.pr-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:var(--mute)}
/* Emplacement provisoire d'une section dont les contenus arrivent plus tard */
.pr-soon{position:relative;aspect-ratio:21/9;border:1px dashed rgba(242,241,236,.22);border-radius:clamp(10px,1.2cqw,18px)}
@media (max-width:639px){.pr-soon{aspect-ratio:16/9}}
.pr-cap{color:var(--mute);font-size:10.5px}
.pr-text{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,3cqw,48px);padding:clamp(16px,2cqw,32px) 0;border-top:var(--line)}
.pr-text-title{color:var(--mute);margin:0;font-weight:400}
.pr-text-body{margin:0;font-size:clamp(18px,2cqw,30px);font-weight:300;line-height:1.35;max-width:32em;text-wrap:pretty}
.pr-next{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:clamp(28px,3.4cqw,56px) 0;border-top:var(--line)}
.pr-next>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.pr-next-label{color:var(--mute)}
.pr-next-name{font-size:clamp(28px,6cqw,100px);font-weight:800;text-transform:uppercase;line-height:.95;text-wrap:balance}
.pr-next-arrow{flex:none;font-size:clamp(28px,5cqw,80px);font-weight:300;line-height:1}
@media (max-width:639px){.pr-h1{font-size:clamp(30px,9.4cqw,64px)}}
@media (min-width:760px){
  .pr-meta{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr) minmax(0,.8fr)}
  .pr-media.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-media.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-text{grid-template-columns:minmax(0,.6fr) minmax(0,2.4fr)}
}

/* En-tête de page projet avec film vertical : texte à gauche, film à droite (≥ 900 px) ;
   sur mobile, le film arrive juste sous le titre. */
.pr-hero--film{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"back" "titles" "film" "intro" "rep";gap:clamp(20px,2.6cqw,40px);align-items:start}
.pr-a-back{grid-area:back}.pr-a-titles{grid-area:titles}.pr-a-intro{grid-area:intro}.pr-a-rep{grid-area:rep}.pr-a-film{grid-area:film}
/* Année collée au titre, sur la dernière ligne (passe dessous si la place manque) */
.pr-title-row .pr-h1{display:inline}
.pr-year{display:inline-block;margin-left:.6em;white-space:nowrap;font-size:clamp(15px,1.7cqw,28px);font-weight:300;line-height:1;color:var(--mute2)}
.pr-hero--film .pr-a-rep{padding-top:clamp(18px,2.2cqw,30px);border-top:var(--line)}
.pr-hero--film .pr-h1{font-size:clamp(30px,9.4cqw,64px)}
@media (min-width:640px){.pr-hero--film .pr-h1{font-size:clamp(36px,6cqw,104px)}}
/* ≥ 760 px : texte à gauche, image à droite ; l'image s'arrête au trait, les repères passent dessous sur toute la largeur */
@media (min-width:760px){
  .pr-hero--film{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"back film" "titles film" "intro film" "rep rep";column-gap:clamp(28px,5cqw,80px)}
  .pr-hero--film .pr-intro{font-size:clamp(17px,1.9cqw,30px)}
}
@media (min-width:900px){.pr-hero--film .pr-h1{font-size:clamp(36px,5.6cqw,100px)}}

/* Capitaine : il surgit en petit du bord droit, penché à 45° vers la gauche, puis repart (pages.js, une fois par visite) */
.pr-giant{position:fixed;right:0;bottom:2vh;bottom:2svh;z-index:70;height:clamp(240px,40vh,420px);height:clamp(240px,40svh,420px);width:auto;max-width:none;--out:translateX(215%) rotate(-45deg);--in:translateX(85%) rotate(-45deg);transform:var(--out);transform-origin:50% 100%;pointer-events:none;user-select:none;visibility:hidden;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.pr-giant.is-on{visibility:visible;animation:prGiant 2.6s linear both}
/* Entrée qui décélère, courte pause, sortie qui accélère */
@keyframes prGiant{
  0%{transform:var(--out);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  30%{transform:var(--in)}
  70%{transform:var(--in);animation-timing-function:cubic-bezier(.7,0,.84,0)}
  100%{transform:var(--out)}
}
@media (max-width:759px){.pr-giant{bottom:-6vh;bottom:-6svh;height:clamp(170px,28vh,240px);height:clamp(170px,28svh,240px)}}

/* Repères cliquables vers chaque réalisation */
.pr-rep{display:flex;flex-wrap:wrap;gap:8px}
.pr-rep a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;border-radius:999px;border:1px solid rgba(242,241,236,.3);transition:background .25s,color .25s,border-color .25s}
@media (hover:hover) and (pointer:fine){.pr-rep a:hover{opacity:1;background:var(--fg);color:var(--bg);border-color:var(--fg)}}
/* Film vertical : extrait muet en boucle, bouton pour le voir avec le son */
/* Image d'ouverture : bandeau 4:3 sur mobile ; à droite et à hauteur du texte (jusqu'au trait) dès 760 px */
.pr-cover{margin:0;width:100%}
.pr-cover-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:clamp(10px,1.2cqw,18px);background:#161614}
.pr-cover-frame img,.pr-cover-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 70%;display:block}
@media (min-width:760px){
  .pr-cover{align-self:stretch;width:clamp(220px,30vw,460px);display:flex}
  .pr-cover-frame{aspect-ratio:auto;width:100%;min-height:100%}
}
/* Vidéos verticales côte à côte */
.pr-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2cqw,32px);width:100%;max-width:min(100%,900px,calc(84vh * 9 / 8 + 32px));max-width:min(100%,900px,calc(84svh * 9 / 8 + 32px));align-self:center}
.pr-film{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.pr-film-frame{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:clamp(10px,1.2cqw,18px);background:#0d1a8a}
.pr-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pr-film-play{position:absolute;left:50%;bottom:clamp(16px,2cqw,28px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:clamp(12px,1cqw,14px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:13px 20px;border-radius:999px;background:var(--fg);color:var(--bg);box-shadow:0 6px 24px rgba(0,0,0,.35);transition:background .3s,color .3s,transform .4s var(--ease),opacity .3s}
.pr-film-play>span{font-size:.85em}
.pr-film-play .short{display:none}
@media (max-width:640px){.pr-film-play{max-width:calc(100% - 16px);font-size:11px;letter-spacing:.02em;padding:11px 14px;gap:7px;bottom:12px}.pr-film-play .full{display:none}.pr-film-play .short{display:inline}}
.pr-film.is-playing .pr-film-play{opacity:0;pointer-events:none}
/* Quatre vidéos verticales : 4 colonnes sur ordinateur, 2 en dessous ; libellé court quand les colonnes sont étroites */
.pr-films--4{max-width:min(100%,1180px)}
@media (min-width:900px){.pr-films--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px) and (max-width:1279px){.pr-films--4 .pr-film-play .full{display:none}.pr-films--4 .pr-film-play .short{display:inline}}
/* Film horizontal hébergé sur le site (créations IA) */
.pr-film--wide{width:100%;max-width:min(100%,1100px,calc(78vh * 16 / 9));max-width:min(100%,1100px,calc(78svh * 16 / 9));align-self:center}
.pr-film--wide .pr-film-frame{aspect-ratio:16/9;background:#000}
/* Liste des outils IA */
.ia-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(8px,1cqw,14px)}
@media (min-width:760px){.ia-tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ia-tools li{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2cqw,28px);border:1px solid rgba(242,241,236,.18);border-radius:clamp(10px,1.2cqw,18px)}
.ia-tools-role{color:var(--mute)}
.ia-tools-name{font-size:clamp(20px,2.2cqw,34px);font-weight:800;text-transform:uppercase;line-height:1}
/* Film seul au format carré, centré (la vidéo 16:9 est rognée sur ses bandes noires) */
.pr-film--square{width:100%;max-width:min(100%,640px,78vh);max-width:min(100%,640px,78svh);align-self:center}
.pr-film--square .pr-film-frame{aspect-ratio:1/1;background:#000}
@media (hover:hover) and (pointer:fine){.pr-film-play:hover{background:var(--bg);color:var(--fg);transform:translateX(-50%) translateY(-2px)}}
/* Ordinateur : au survol de la vidéo, une comète de lumière tourne autour du bouton (comme « Tous les projets » de l'accueil) */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes prPlaySpin{to{--spin:360deg}}
@media (hover:hover) and (pointer:fine){
  .pr-film-play::before{content:"";position:absolute;inset:-5px;border-radius:inherit;padding:2.5px;pointer-events:none;opacity:0;transition:opacity .4s ease;
    background:conic-gradient(from var(--spin),transparent 0deg,transparent 230deg,rgba(242,241,236,.2) 280deg,#fff 340deg,transparent 360deg),rgba(10,10,9,.45); /* fond sombre sous la comète : visible même sur une image claire */
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .pr-film-frame:hover .pr-film-play::before,.pr-yt-frame:hover .pr-film-play::before{opacity:1;animation:prPlaySpin 2.4s linear infinite}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.pr-film-frame:hover .pr-film-play::before,.pr-yt-frame:hover .pr-film-play::before{animation:none;--spin:35deg}}

/* Film horizontal hébergé sur YouTube : extrait muet en boucle, le lecteur YouTube le remplace au clic (pages.js) */
.pr-yt{margin:0;display:flex;flex-direction:column;gap:12px;width:100%;max-width:min(100%,1100px,calc(78vh * 16 / 9));max-width:min(100%,1100px,calc(78svh * 16 / 9));align-self:center}
.pr-yt-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(10px,1.2cqw,18px);background:#161614}
.pr-yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pr-yt.is-playing .pr-yt-play{opacity:0;pointer-events:none}
/* Film YouTube vertical (Short) */
.pr-yt--v{max-width:min(100%,380px,calc(78vh * 9 / 16));max-width:min(100%,380px,calc(78svh * 9 / 16))}
.pr-yt--v .pr-yt-frame{aspect-ratio:9/16}

/* Photos verticales côte à côte (coulisses), agrandies au clic */
.pr-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.6cqw,24px);width:100%;max-width:780px;align-self:center}
.pr-shot{display:block;overflow:hidden;border-radius:clamp(8px,1cqw,14px);background:#161614;aspect-ratio:665/1182;cursor:zoom-in}
.pr-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
@media (hover:hover) and (pointer:fine){.pr-shot:hover{opacity:1}.pr-shot:hover img{transform:scale(1.04)}}

/* Galerie en mosaïque (photos 3:2) : une grande photo et deux petites, puis une rangée de trois ; agrandies au clic.
   .mo-big = grande (à gauche, .mo-r = à droite), .mo-wide = bandeau de fin, .mo-mfull = pleine largeur sur mobile */
/* Rangée qui défile sur le côté + barre de progression dessous (data-hscroll, js/pages.js).
   Posts : 4 visibles sur ordinateur, un peu plus de 2 sur mobile (le suivant dépasse pour inviter à glisser).
   Prints : même hauteur pour tous, chaque visuel entier à sa largeur naturelle. */
.hs{--hs-gap:clamp(8px,1.2cqw,16px);display:flex;flex-direction:column;gap:clamp(12px,1.4cqw,18px);width:100%;min-width:0}
.hs-track{display:flex;gap:var(--hs-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hs-track::-webkit-scrollbar{display:none}
.hs-track>*{scroll-snap-align:start;flex-shrink:0}
.hs.is-drag .hs-track{scroll-snap-type:none;scroll-behavior:auto}
.hs-bar{position:relative;height:3px;border-radius:3px;background:rgba(242,241,236,.16);cursor:pointer;touch-action:none;transition:height .2s}
.hs-bar::before{content:"";position:absolute;inset:-10px 0} /* zone de prise plus large que le trait */
.hs-thumb{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--fg);opacity:.85;will-change:transform}
@media (hover:hover) and (pointer:fine){.hs-bar:hover,.hs.is-drag .hs-bar{height:5px}}
.hs.is-static .hs-bar{display:none}
.hs-track.ig{display:flex} /* l'emporte sur la grille .ig */
.hs-track.ig>.ig-post{flex-basis:calc((100% - 3 * var(--hs-gap)) / 4)}
@media (max-width:899px){.hs-track.ig>.ig-post{flex-basis:calc((100% - 2 * var(--hs-gap)) / 2.3)}}
.hs-track.pr-prints{flex-direction:row}
.hs-track.pr-prints>.pr-print{flex:0 0 auto;height:clamp(240px,30vw,440px)}
.hs-track.pr-prints>.pr-print img{width:auto;height:100%}
/* Prints (affiches, flyers, bons) : rangées de même hauteur, chaque visuel entier, à sa largeur naturelle (flex = son ratio).
   Mobile : affiches 2 par rangée, formats paysage sur toute la largeur. Clic = agrandissement (data-lightbox). */
.pr-prints{display:flex;flex-direction:column;gap:clamp(8px,1.4cqw,20px);width:100%}
.pr-prints-row{display:flex;gap:clamp(8px,1.4cqw,20px);align-items:flex-start}
.pr-print{display:block;flex:var(--ar) 1 0;min-width:0;overflow:hidden;border-radius:clamp(4px,.6cqw,8px);background:#161614;cursor:zoom-in}
.pr-print img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.pr-print:hover img{transform:scale(1.03)}}
@media (max-width:759px){
  .pr-prints-row{flex-wrap:wrap}
  .pr-prints-row--tall .pr-print{flex:0 0 calc(50% - clamp(8px,1.4cqw,20px) / 2)}
  .pr-prints-row--wide .pr-print{flex:0 0 100%}
  /* --pair : deux visuels qui restent côte à côte sur mobile (même hauteur) */
  .pr-prints-row--pair{flex-wrap:nowrap}
}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:clamp(6px,1cqw,14px)}
.mo{position:relative;display:block;overflow:hidden;border-radius:clamp(6px,.8cqw,12px);background:#161614;aspect-ratio:3/2;cursor:zoom-in}
.mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.mo-big,.mo-mfull,.mo-wide{grid-column:1 / -1}
@media (min-width:640px){
  .mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mo-mfull{grid-column:auto}
  .mo-big{grid-column:1 / span 2;grid-row:span 2;aspect-ratio:auto}
  .mo-big.mo-r{grid-column:2 / span 2}
  .mo-wide{aspect-ratio:21/9}
}
@media (hover:hover) and (pointer:fine){.mo:hover{opacity:1}.mo:hover img{transform:scale(1.04)}}

/* Prémices — identité : logos + carte sur une rangée à partir de 760 px */
.pm-ident{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(8px,1.2cqw,16px)}
@media (min-width:760px){
  .pm-ident{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .pm-ident .pm-logos{grid-template-rows:1fr}
  .pm-ident .pm-logo{aspect-ratio:auto;min-height:100%}
  .pm-ident .pm-logo img{height:auto;width:112%}
  .pm-ident .bc-stage{justify-content:center;padding:clamp(28px,3.4cqw,52px) 16px clamp(18px,2.2cqw,30px);gap:clamp(16px,2cqw,26px)}
  .pm-ident .bc{width:84%}
}
/* Prémices — logo en deux versions côte à côte */
.pm-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2cqw,16px)}
.pm-logo{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:clamp(10px,1.2cqw,18px)}
.pm-logo img{position:absolute;left:50%;top:50%;height:112%;width:auto;max-width:none;transform:translate(-50%,-50%);display:block}
.pm-logo--dark{background:radial-gradient(ellipse at 50% 40%,#2a2a28 0%,#0f0f0e 75%)}
.pm-logo--light{background:#ecebe6}

/* Carte de visite en 3D : deux faces dos à dos + tranches intermédiaires pour l'épaisseur (pages.js règle --ry, --rx, --shine) */
.bc-stage{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3cqw,40px);padding:clamp(48px,7cqw,110px) 16px clamp(28px,4cqw,56px);border-radius:clamp(10px,1.2cqw,18px);background:radial-gradient(ellipse at 50% 38%,#262624 0%,#0d0d0c 72%);overflow:hidden;user-select:none;-webkit-user-select:none}
.bc{--ry:0deg;--rx:0deg;--shine:50;position:relative;z-index:1;width:min(560px,80%);aspect-ratio:85/55;perspective:1800px;cursor:grab;touch-action:pan-y;outline-offset:8px;-webkit-tap-highlight-color:transparent}
.bc.is-drag{cursor:grabbing}
.bc-card{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.bc-face,.bc-edge{position:absolute;inset:0;border-radius:0}
.bc-face{overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0b0b0b}
.bc-face img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.bc-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.13) 48%,rgba(255,255,255,0) 61%);background-size:300% 100%;background-position:calc(var(--shine) * 1%) 0}
.bc-front{transform:translateZ(1.2px)}
.bc-back{transform:rotateY(180deg) translateZ(1.2px)}
.bc-edge{background:#262625;transform:translateZ(var(--z))}
.bc-shadow{position:absolute;left:8%;right:8%;top:104%;height:18%;transform:scaleX(var(--sh,1));background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,0));filter:blur(8px);pointer-events:none}
.bc-hint{position:relative;z-index:1;color:var(--mute);text-align:center}
.bc-hint-touch{display:none}
@media (hover:none){.bc-hint-touch{display:inline}.bc-hint-mouse{display:none}}
@media (max-width:639px){.bc{width:88%}.bc-stage{padding:44px 12px 26px}}

/* Section d'une réalisation : numéro, titre, une phrase, puis les visuels */
.pr-sec{display:flex;flex-direction:column;gap:clamp(18px,2.2cqw,32px);scroll-margin-top:24px}
/* Mini sous-titre au-dessus d'un bloc de la section (ex. « Reels », « Posts »), collé à son bloc ; .pr-sub--films = même largeur que les reels */
.pr-sub{margin:clamp(6px,1cqw,14px) 0 calc(clamp(18px,2.2cqw,32px) * -.55);color:var(--fg);font-weight:500;width:100%}
.pr-sub--films{max-width:min(100%,1180px);align-self:center}
.pr-sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px clamp(16px,3cqw,48px);padding-top:clamp(16px,2cqw,28px);border-top:var(--line)}
.pr-sec-num{color:var(--mute);padding-top:.35em}
.pr-sec-txt{display:flex;flex-direction:column;gap:10px;min-width:0}
.pr-sec-title{margin:0;font-size:clamp(24px,3cqw,48px);font-weight:800;text-transform:uppercase;line-height:.95}
.pr-sec-line{display:block}
@media (min-width:640px){.pr-sec-line{white-space:nowrap}}
.pr-sec-desc{margin:0;max-width:40em;font-size:clamp(13px,1.05cqw,16px);font-weight:300;line-height:1.45;color:var(--mute2)}
@media (min-width:760px){.pr-sec-head{grid-template-columns:minmax(0,.6fr) minmax(0,2.4fr)}}

/* Bouteilles cliquables (étiquette en grand) */
.pr-bottles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3cqw,48px);width:100%;max-width:900px;align-self:center}
.pr-bottle{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1cqw,14px);cursor:zoom-in;min-width:0}
.pr-bottle img{width:100%;height:auto;max-height:min(70vh,660px);max-height:min(70svh,660px);object-fit:contain;filter:drop-shadow(0 0 0 rgba(242,241,236,0)) drop-shadow(0 0 0 rgba(242,241,236,0));transition:transform .7s var(--ease),filter .6s}
.pr-bottle-cap{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--fg)}
.pr-bottle-hint{color:var(--mute);transition:color .3s}
@media (hover:hover) and (pointer:fine){.pr-bottle:hover{opacity:1}.pr-bottle:hover img{transform:translateY(-8px) scale(1.02);filter:drop-shadow(0 0 16px rgba(242,241,236,.22)) drop-shadow(0 0 48px rgba(242,241,236,.16))}.pr-bottle:hover .pr-bottle-hint{color:var(--fg)}}

/* Bouteille qui s'avance + étiquette qui s'ouvre comme une page (≥ 760 px, voir pages.js) */
.wine{position:fixed;inset:0;z-index:60;background:rgba(10,10,9,.94);perspective:1800px;opacity:0;transition:opacity .45s ease}
.wine.is-on{opacity:1}
.wine-bottle{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;pointer-events:none;user-select:none}
.wine-page{position:absolute;left:0;top:0;transform-origin:left center;backface-visibility:hidden;border-radius:4px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.wine-page img{width:100%;height:100%;display:block;user-select:none}
.wine-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 70%);opacity:0;pointer-events:none}
.wine-cap{position:absolute;left:0;top:0;color:var(--mute);opacity:0;transition:opacity .4s .9s}
.wine.is-on .wine-cap{opacity:1}
.wine-close{position:absolute;top:18px;right:18px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(242,241,236,.4);background:rgba(10,10,9,.5);color:var(--fg);font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
@media (hover:hover) and (pointer:fine){.wine-close:hover{background:var(--fg);color:var(--bg)}}

/* Posts Instagram : grille façon profil, carrousel intégré pour les posts en plusieurs visuels */
.ig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2cqw,16px)}
@media (min-width:900px){.ig{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ig-post{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:#161614;min-width:0}
.ig-post img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
a.ig-post,.ig-slide{cursor:zoom-in}
.ig-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.ig-track::-webkit-scrollbar{display:none}
.ig-slide{flex:0 0 100%;scroll-snap-align:start;display:block}
/* Carrousel de mini-vidéos : chaque vidéo tourne seule (sans son) quand son visuel est à l'écran, s'arrête dès qu'on passe au suivant */
.ig-post video{width:100%;height:100%;object-fit:cover;display:block}
.ig-slide--video{cursor:default}
.ig-icon{position:absolute;top:10px;right:10px;width:20px;height:20px;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.ig-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:5px;pointer-events:none}
.ig-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s}
.ig-dots span.is-on{background:#fff}
.ig-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(242,241,236,.9);color:var(--bg);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.ig-prev{left:8px}.ig-next{right:8px}
.ig-arrow:disabled{display:none}
@media (hover:hover) and (pointer:fine){
  .ig-post:hover{opacity:1}
  .ig-post:hover img{transform:scale(1.03)}
  .ig-multi:hover .ig-arrow,.ig-multi:focus-within .ig-arrow{opacity:1}
}
@media (hover:none){.ig-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.ig-track{scroll-behavior:auto}}

/* Galerie photo d'une page projet : carrousel sur une rangée (flèches, glissement du doigt)
   et agrandissement plein écran au clic */
.pr-gal{margin:0;display:flex;flex-direction:column;gap:clamp(12px,1.4cqw,20px)}
.gal{--gap:clamp(8px,1.2cqw,18px);display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:4px}
.gal::-webkit-scrollbar{display:none}
.gal-item{position:relative;display:block;flex:0 0 84%;scroll-snap-align:start;overflow:hidden;border-radius:6px;background:#161614;aspect-ratio:4/3;cursor:zoom-in}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
@media (min-width:760px){.gal-item{flex-basis:calc((100% - var(--gap)) / 2.2)}}
@media (min-width:1200px){.gal-item{flex-basis:calc((100% - 2 * var(--gap)) / 2.6)}}
@media (hover:hover) and (pointer:fine){.gal-item:hover{opacity:1}.gal-item:hover img{transform:scale(1.04)}}
/* Carrousel à formats libres : même hauteur pour toutes, largeur selon le format de chaque photo */
.gal--free .gal-item{flex:0 0 auto;height:clamp(320px,62vh,620px);height:clamp(320px,62svh,620px);width:auto;max-width:88vw;aspect-ratio:var(--ar)}
/* Mobile : les photos horizontales rétrécissent pour rester entières au lieu d'être rognées */
@media (max-width:759px){.gal--free{--h:min(80vw,58svh);align-items:center}.gal--free .gal-item{height:auto;max-width:none;width:min(88vw,calc(var(--h) * var(--ar)))}}
@media (prefers-reduced-motion:reduce){.gal{scroll-behavior:auto}}
.gal-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}
.gal-bar .pr-cap{margin:0}
.gal-nav{display:flex;align-items:center;gap:10px}
.gal-count{color:var(--mute);margin-right:6px;min-width:5.5ch;text-align:right}
.gal-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(242,241,236,.4);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.gal-btn:disabled{opacity:.25;cursor:default}
@media (hover:hover) and (pointer:fine){.gal-btn:not(:disabled):hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,10,9,.96);color:var(--fg);overflow:hidden}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb::backdrop{background:transparent}
.lb-img{max-width:min(92vw,1448px);max-height:82vh;max-height:82svh;width:auto;height:auto;object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none;transition:opacity .2s}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(242,241,236,.4);background:rgba(10,10,9,.5);color:var(--fg);font-size:18px;line-height:1}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--mute)}
@media (hover:hover) and (pointer:fine){.lb-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}}
@media (max-width:759px){
  .lb-prev,.lb-next{top:auto;bottom:12px;transform:none}
  .lb-count{bottom:28px}
}

/* Bloc « Site web » d'une page projet : capture du site, voile noir, bouton vers le site en ligne */
.pr-site{position:relative;display:block;overflow:hidden;border-radius:6px;aspect-ratio:2000/1086;width:100%;max-width:900px;align-self:center;background:#161614;color:var(--fg);isolation:isolate}
.pr-site-img{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform 1.2s var(--ease)}
.pr-site-veil{position:absolute;inset:0;background:#000;opacity:.7;transition:opacity .5s ease}
/* Capture déjà sombre : voile plus léger pour qu'elle reste lisible */
.pr-site--dark .pr-site-veil{opacity:.35}
.pr-site--dark .pr-site-content{justify-content:flex-end;padding-bottom:clamp(18px,4cqw,48px)} /* bouton en bas : le logo du site reste visible */
.pr-site-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.6cqw,36px);padding:20px;text-align:center}
.pr-site-btn{display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.1cqw,16px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 24px;border-radius:999px;background:var(--fg);color:var(--bg);white-space:nowrap;transition:background .3s,color .3s,transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .pr-site:hover{opacity:1}
  .pr-site:hover .pr-site-img{transform:scale(1.04)}
  .pr-site:hover .pr-site-veil{opacity:.5}
  .pr-site--dark:hover .pr-site-veil{opacity:.12}
  .pr-site:hover .pr-site-btn{background:var(--bg);color:var(--fg);transform:translateY(-2px)}
}
@media (max-width:639px){
  .pr-site{aspect-ratio:3/2}
  .pr-site-btn{font-size:12px;padding:12px 18px}
}

/* Page projet sur mobile : textes resserrés (Owners XWide est très large) */
@media (max-width:639px){
  .pr-hero--film{gap:18px}
  .pr-hero--film .pr-h1{font-size:clamp(24px,8cqw,34px)}
  .pr-subtitle{font-size:15px}
  .pr-hero--film .pr-intro,.pr-intro{font-size:14px;line-height:1.42}
  .pr-cover-frame{aspect-ratio:7/4}
  .pr-cover--logo .pr-cover-frame{aspect-ratio:2/1} /* vidéo du logo : bandeau moins haut, logo centré */
  .pr-meta{gap:14px}
  .pr-meta dd{font-size:14px}
  .pr-rep{gap:6px}
  .pr-rep a{font-size:10.5px;letter-spacing:.06em;padding:8px 11px}
  .pr-sec{gap:16px}
  .pr-sec-title{font-size:20px}
  .pr-sec-desc{font-size:12.5px;font-weight:400;color:#dddcd6}
  .pr-cap{font-size:10px}
  .pr-cap-more{display:none}
  .pr-bottle-cap{font-size:11px}
  .pr-next-name{font-size:22px}
  .pr-next-arrow{font-size:22px}
}

/* ───────────── À propos ───────────── */
.ab-back{margin-bottom:calc(-1 * clamp(16px,2cqw,40px))}
.ab-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5cqw,80px);align-items:start}
.ab-txt{display:flex;flex-direction:column;gap:clamp(28px,3.4cqw,52px);min-width:0}
.ab-tag{color:var(--mute)}
.ab-h1{margin:0;font-size:clamp(30px,4.4cqw,72px);line-height:.95;font-weight:800;text-transform:uppercase;text-wrap:balance}
.ab-p{margin:0;max-width:30em;font-size:clamp(18px,2cqw,32px);font-weight:300;line-height:1.3;letter-spacing:.01em;text-wrap:pretty}
.ab-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#161614;border-radius:6px}
.ab-photo>div{position:absolute;inset:-5%;background-size:cover;background-position:50% 22%;filter:grayscale(1)}
.ab-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4cqw,36px)}
.ab-stat{display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:20px;border-top:var(--line)}
.ab-num{font-size:clamp(34px,5cqw,80px);font-weight:800;line-height:.95;text-transform:uppercase}
.ab-lbl{font-size:clamp(14px,1.2cqw,18px);font-weight:300;line-height:1.4;color:var(--mute2);max-width:24ch}
.ab-pexels{display:block;align-self:flex-start;width:clamp(56px,5cqw,84px);line-height:0;transition:opacity .3s}
.ab-pexels img{width:100%;height:auto}
@media (hover:hover) and (pointer:fine){.ab-photo>div{will-change:transform}}
@media (min-width:760px){
  .ab-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .ab-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ───────────── Mentions légales ───────────── */
.ml-h1{margin:0;font-size:clamp(34px,6.4cqw,108px);line-height:.95;font-weight:800;text-transform:uppercase;text-wrap:balance}
.ml-list{display:flex;flex-direction:column}
.ml-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,3cqw,48px);padding:clamp(20px,2.4cqw,36px) 0;border-top:var(--line)}
.ml-sec h2{margin:0;font-weight:400;color:var(--mute)}
.ml-body{display:flex;flex-direction:column;gap:10px;font-size:clamp(15px,1.3cqw,19px);font-weight:300;line-height:1.55;max-width:42em;color:#e6e5e0}
.ml-body p{margin:0}
@media (min-width:760px){.ml-sec{grid-template-columns:minmax(0,.6fr) minmax(0,2.4fr)}}
@media (max-width:639px){.ml-h1{font-size:clamp(28px,9.6cqw,64px)}}
/* Page « Projet à venir » (projets/a-venir/) */
.soon-main{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(18px,2.4cqw,32px);padding:clamp(24px,6cqw,96px) 0}
.soon-txt{margin:0;font-size:clamp(16px,1.5cqw,22px);font-weight:300;color:var(--mute2)}
.soon-main .btn-line{width:auto;white-space:nowrap}