/* Site studio : uniquement ce qui n'existe pas dans le CSS du site product (chargé avant ce fichier). */
html.dark{background-color:#000}
body.sx-white{background:#fff}
.dark body.sx-white{background:#000}

/* ---------- Accueil : même grille que picardlouis.fr (marges 48 px, gouttières 32 px) ---------- */
.sx-home{padding:24px 48px 0}
.sx-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;align-items:stretch}
.sx-col{display:flex;flex-direction:column;gap:32px;min-width:0}
.sx-foot{margin-top:24px}
.sx-card{transition:transform .35s cubic-bezier(.25,1,.5,1),background-color .3s}
a.sx-card:hover,.sx-dm:hover,.js a.sx-card.rv.in:hover,.js .sx-dm.rv.in:hover{transform:scale(1.02)}
.sx-testi:hover,.js .sx-testi.rv.in:hover{transform:scale(1.01)}
.sx-about{min-height:208px}
.sx-dm{min-height:140px;user-select:none}
.sx-hero{min-height:560px}
.sx-testi{height:auto !important;min-height:270px}
/* À propos et Dark Mode : deux cartes carrées côte à côte */
.sx-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.sx-pair .sx-card{aspect-ratio:1;min-height:0;height:auto}
.sx-pair .sx-dm>div{flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%}
@media (min-width:1024px){
  .sx-col>.sx-grow{flex:1 0 auto}
  .sx-proj.sx-grow .sx-cover{flex:1 0 auto}
}

/* carte projet */
.sx-cover{border-radius:24px;overflow:hidden;background:#F3F3F3;margin-bottom:24px}
.dark .sx-cover{background:#141414}
.fmt-portrait .sx-cover{aspect-ratio:4/5}
.fmt-landscape .sx-cover{aspect-ratio:16/10}
.fmt-square .sx-cover{aspect-ratio:1}
.sx-cover img{width:100%;height:100%;object-fit:cover}
.sx-proj.sx-full{padding:0 !important}
.sx-full .sx-cover{margin:0;border-radius:0;flex:1 0 auto}
.sx-over{position:absolute;left:0;right:0;bottom:0;padding:64px var(--spacing-card) var(--spacing-card);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72))}

/* emplacement gris en attendant les visuels */
.ph{display:grid;place-items:center;width:100%;height:100%;min-height:80px;background:#ECECEF;color:#666;font-size:12px;line-height:16px;text-align:center;padding:12px}
.dark .ph{background:#1C1C1E;color:#9E9E9E}

/* bloc central */
.sx-hero-top{display:flex;justify-content:space-between;align-items:center}
.sx-m-only{display:none}
.sx-pill{transform:rotate(1deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.sx-pill:hover{transform:rotate(0) scale(1.05)}

/* interrupteur clair / sombre */
.tg-knob{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.dark .tg-knob{transform:translateX(36px)}
.k-moon{display:none !important}
.dark .k-sun{display:none !important}
.dark .k-moon{display:inline-block !important}

/* carte À propos : icônes qui tournent autour de la photo au survol */
.sx-orbit{left:50%;top:50%;width:0;height:0;animation:sx-spin 40s linear infinite;animation-play-state:paused}
.sx-orb{left:-24px;top:-24px;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.sx-orb-in{animation:sx-spin 40s linear infinite reverse;animation-play-state:paused}
.sx-about:hover .sx-orb{transform:translate(var(--tx),var(--ty))}
.sx-about:hover .sx-orbit,.sx-about:hover .sx-orb-in{animation-play-state:running}
.sx-about{z-index:1}.sx-about:hover{z-index:6}
@keyframes sx-spin{to{transform:rotate(360deg)}}

/* avis */
.sx-slide[hidden]{display:none !important}
.sx-slide{animation:sx-in .25s ease}
@keyframes sx-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* explorations */
.sx-explo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sx-tile{display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:14px;overflow:hidden;background:#F3F3F3;cursor:zoom-in;font:inherit;color:inherit}
.dark .sx-tile{background:#141414}
.sx-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.25,1,.5,1)}
.sx-tile:hover img{transform:scale(1.05)}
.sx-empty{cursor:default}
.sx-empty .ph{font-size:10px;line-height:13px;padding:6px;min-height:0}

/* ---------- Pages projet et À propos ---------- */
.sx-top{position:fixed;top:24px;right:16px}
.sx-nav{position:fixed;bottom:32px;right:32px}
@media (min-width:768px){.sx-top{top:32px;right:32px}}
.sx-hero-img .ph{font-size:14px}
.sx-frame{width:100%;border-radius:32px;overflow:hidden;background:#F3F3F3}
.dark .sx-frame{background:#141414}
.sx-frame img{width:100%;height:auto;display:block}
.sx-frame>.ph{aspect-ratio:16/9}
.sx-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sx-duo .ph{aspect-ratio:4/5}
.sx-gal{display:grid;gap:16px}
.sx-gal.cols-2{grid-template-columns:repeat(2,1fr)}
.sx-gal.cols-3{grid-template-columns:repeat(3,1fr)}
.sx-gal.cols-4{grid-template-columns:repeat(4,1fr)}
.sx-gal .g-item{border-radius:24px}
.sx-gal.crop-none{display:block;column-gap:16px}
.sx-gal.crop-none.cols-2{columns:2}.sx-gal.crop-none.cols-3{columns:3}.sx-gal.crop-none.cols-4{columns:4}
.sx-gal.crop-none .g-item{break-inside:avoid;margin-bottom:16px}
.sx-gal.crop-none .ph{aspect-ratio:4/5}
.sx-gal.crop-square .g-item{aspect-ratio:1}
.sx-gal.crop-portrait .g-item{aspect-ratio:4/5}
.sx-gal.crop-landscape .g-item{aspect-ratio:4/3}
.sx-gal:not(.crop-none) .g-item img{width:100%;height:100%;object-fit:cover}
.sx-gal:not(.crop-none) .g-item .ph{aspect-ratio:auto}
.sx-meta{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0}
.sx-meta dt{color:#666}.sx-meta dd{margin:0}

/* message (email copié) */
.sx-toast{position:fixed;bottom:32px;left:50%;z-index:200;opacity:0;transform:translate(-50%,50px);transition:opacity .3s,transform .4s cubic-bezier(.25,1,.5,1);pointer-events:none}
.sx-toast.show{opacity:1;transform:translate(-50%,0)}

/* visionneuse */
dialog#zoom{border:0;padding:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
dialog#zoom::backdrop{background:rgba(0,0,0,.85)}
dialog#zoom img{max-width:94vw;max-height:92vh;border-radius:16px;cursor:zoom-out}

/* apparition des cartes */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.25,1,.5,1)}
  .js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.sx-orbit,.sx-orb-in{animation:none}}

.sx-m-about{display:none}
.sx-tabbar{display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:60}
/* ---------- Mobile et tablette : une colonne, comme la version mobile du site product ---------- */
@media (max-width:1023.98px){
  .sx-home{padding:24px 16px 0}
  .sx-bento{display:flex;flex-direction:column;gap:32px}
  .sx-col,.sx-pair{display:contents}
  .sx-hero{order:-2;min-height:0;padding-top:0}
  .sx-hero h1{font-size:var(--text-h1);line-height:1.15;letter-spacing:-0.015em}
  .sx-m-only{display:inline-flex}
  .sx-about{order:-1}
  .sx-proj{order:var(--o)}
  .sx-testi{order:8}
  .sx-explo{order:10}
  .sx-dm{display:none !important}
  .sx-about{display:none !important}
  .sx-m-about{display:flex;order:12;background:#fff;border-radius:24px;padding:32px 20px 40px;scroll-margin-top:16px}
  .dark .sx-m-about{background:#161616}
  .sx-m-about .sx-page,.sx-m-about>div{width:100%}
  .sx-tabbar{display:block}
  #mobile-projects,#mobile-contact{scroll-margin-top:16px}
}
.sx-tab{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 14px;border-radius:999px;color:#666;font-size:16px;transition:background .25s,color .25s,padding .25s}
.dark .sx-tab{color:#9E9E9E}
.sx-tab span{display:none;font-weight:500;white-space:nowrap}
.sx-tab.on{background:#121212;color:#fff;padding:0 18px}
.dark .sx-tab.on{background:#fff;color:#121212}
.sx-tab.on span{display:inline}
@media (min-width:768px) and (max-width:1023.98px){.sx-home{padding:32px 32px 0}}
@media (max-width:640px){
  .sx-duo{grid-template-columns:1fr}
  .sx-gal.cols-3,.sx-gal.cols-4{grid-template-columns:repeat(2,1fr)}
  .sx-gal.crop-none.cols-3,.sx-gal.crop-none.cols-4{columns:2}
}
/* grande image de couverture : comme sur picardlouis.fr, sa hauteur suit l'image (emplacement gris de 520 px en attendant) */
.sx-hero-img .ph{height:520px}
@media (max-width:767.98px){.sx-hero-img .ph{height:300px}}

/* vidéo dans les pages projet */
.sx-video video{display:block;width:100%;height:auto}
.sx-video>.ph{aspect-ratio:16/9}
.sx-statement{padding:48px 0}

@font-face{font-family:"Railroad Gothic";src:url(/assets/typo-laclaie/RailroadGothic-Heavy.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Adicttives";src:url(/assets/typo-laclaie/Adicttives.ttf) format("truetype");font-weight:400;font-display:swap}

/* Tags sur les cartes projet : lisibles quelle que soit la couleur de la cover */
.sx-proj .glass-chip-surface{background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.6)}
.sx-proj .glass-chip-content,.sx-proj .glass-chip-content span{color:#121212!important}

/* Texte du résumé sur les cartes à image pleine (la classe text-white/80 n'est pas dans le CSS compilé) */
.sx-over .text-body-sm{color:rgba(255,255,255,.85)!important}

.sx-explo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}

/* Effets du titre, comme sur le site product */
.sx-bl{display:inline-block}
.sx-bounce{display:inline-block;cursor:pointer}
.sx-bounce .sx-bl{transition:transform .3s ease}
.sx-bounce:hover .sx-bl{transform:translateY(-5px) scale(1.3);transition:transform .35s cubic-bezier(.34,1.8,.64,1) calc(var(--i)*30ms)}
.sx-blink{display:inline-block;cursor:pointer}
.sx-blink.on .sx-bl{animation:sx-blink .6s ease-in-out var(--d) 2}
@keyframes sx-blink{0%,100%{color:inherit}50%{color:var(--c)}}