/* HG Studio v0.5.0 — couche additive */
:root{--head-h:64px}

/* ---------- Grunge : léger déplacement de la typo ---------- */
.logo-text,h1,h2,.fan-now a,.ticker-track a span,.cta-big,.prow-head h3,.focus-copy h3,.mobilemenu a{filter:url(#hg-grunge)}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-img{height:40px;width:auto;object-fit:contain}
.logo-mark{width:38px;height:38px;flex:none}

/* ---------- Menu : carré noir au survol / actif ---------- */
.navrow a{padding-left:0;transition:padding .35s var(--ease)}
.navrow a::after{display:none}
.navrow a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-5px;background:currentColor;transform:scale(0);transition:transform .35s var(--ease)}
.navrow a:hover,.navrow a[aria-current]{padding-left:14px}
.navrow a:hover::before,.navrow a[aria-current]::before{transform:scale(1)}
.mobilemenu a[aria-current]::before{content:"■ ";font-size:.4em;vertical-align:middle}

/* ---------- En-tête posé sur le hero ---------- */
header.hg-head{height:var(--head-h);min-height:0;align-items:center;position:relative;z-index:40}
body.home-mode .hero.compact-hero.hg-hero{height:100svh;max-height:none;width:100%;min-height:560px;margin-top:calc(-1 * var(--head-h))}

/* ---------- Roue ---------- */
.fan a{width:250px;height:322px;border-radius:14px;overflow:hidden;
  transform:rotateY(var(--angle)) translateX(calc(8px + var(--open,0) * 70px)) translateZ(calc(var(--open,0) * 6px));
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 40px -18px rgba(0,0,0,.45);
  background:#ddd;transition:filter .35s,box-shadow .35s}
.fan a::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%,rgba(0,0,0,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.fan a.is-front{outline:0;box-shadow:0 0 0 2px #050505,0 30px 60px -20px rgba(0,0,0,.6);filter:none}
.fan a:not(.is-front){filter:brightness(calc(.95 - var(--open,0) * .15)) saturate(.9)}
.hg-hero .stage{cursor:none}
.hg-hero .stage[data-steer="left"],.hg-hero .stage[data-steer="right"]{cursor:none}
.stage::before,.stage::after{content:"";position:absolute;top:0;bottom:0;width:22%;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s}
.stage{position:relative}
.stage::before{left:0;background:linear-gradient(90deg,rgba(0,0,0,.06),transparent)}
.stage::after{right:0;background:linear-gradient(-90deg,rgba(0,0,0,.06),transparent)}

.cursor-label{background:#050505;color:#fff;mix-blend-mode:normal;padding:6px 8px;transform:translate(14px,14px)}
@media(max-width:800px){.fan a{width:160px;height:206px;border-radius:10px}}
@media(hover:none){.hg-hero .stage{cursor:grab}}

/* ---------- Bandeau : sous la ligne de flottaison, vitesse réglable ---------- */
.ticker-track{animation-duration:var(--ticker-speed,140s)}

/* ---------- À explorer : rail draggable + visionneuse + mosaïque ---------- */
.focus-rail{cursor:grab;user-select:none;margin-bottom:10px}
.focus-rail.is-dragging{cursor:grabbing}
.focus-rail img{pointer-events:none;-webkit-user-drag:none}
.focus-v5{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.focus-v5 .focus-copy{position:sticky;top:20px}
.focus-media{min-width:0}
.focus-viewer{position:relative;background:#f2f2f2;border-radius:10px;overflow:hidden}
.focus-v5 .focus-picture{max-width:none;max-height:none;aspect-ratio:auto;width:100%;height:min(72svh,720px);display:grid;place-items:center;background:none}
.focus-v5 .focus-picture img,.focus-v5 .focus-picture video{width:100%;height:100%;object-fit:contain}
.fv-zoom{width:100%;height:100%;display:block}
.fv-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#050505;color:#fff;font-size:18px;z-index:2;transition:transform .3s var(--ease),background .3s}
.fv-arrow:hover{background:#333;transform:translateY(-50%) scale(1.08)}
.fv-prev{left:12px}.fv-next{right:12px}
.fv-count{position:absolute;left:12px;bottom:12px;background:#fff;padding:4px 6px;border-radius:3px}
.focus-mosaic{columns:3 180px;column-gap:8px;margin-top:8px}
.mosaic-item{display:block;width:100%;margin:0 0 8px;break-inside:avoid;aspect-ratio:var(--r,1/1);overflow:hidden;border-radius:6px;background:#eee;position:relative;opacity:.82;transition:opacity .3s}
.mosaic-item img{width:100%;height:100%;object-fit:cover}
.mosaic-item:hover,.mosaic-item.active{opacity:1}
.mosaic-item.active{box-shadow:0 0 0 2px #050505}
.focus-plates{display:none}
@media(max-width:800px){.focus-v5{grid-template-columns:1fr}.focus-v5 .focus-copy{position:static}.focus-v5 .focus-picture{height:62svh}.focus-mosaic{columns:2}}

/* ---------- Pages plein écran sans scroll : À propos & Contact ---------- */
@media(min-width:900px) and (min-height:640px){
  .screen-mode{overflow:hidden}
  .screen-mode #app{height:calc(100svh - var(--head-h));overflow:hidden}
  .screen-page{height:100%}
}
.about-screen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,50px);padding:10px var(--g) var(--g)}
.about-mode header{background:#fff;color:#050505}
.about-photo{margin:0;position:relative;background:#eee;border-radius:12px;overflow:hidden;display:grid;place-items:center;min-height:320px}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.about-photo>.mono{text-align:center;color:#777;line-height:1.6}
.about-photo figcaption{position:absolute;left:12px;bottom:12px;background:#fff;padding:4px 6px;border-radius:3px}
.about-body{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;scrollbar-width:none}
.about-body h1{font-size:clamp(34px,4.4vw,74px);line-height:.92;letter-spacing:-.065em}
.about-lead{font-size:clamp(17px,1.4vw,22px);line-height:1.25;letter-spacing:-.02em;max-width:620px}
.about-body .home-stats{margin:6px 0}
.screen-foot{display:flex;gap:24px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.contact-section.screen-page{padding:10px var(--g) var(--g);display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.contact-section.screen-page .half-heading{display:flex;flex-direction:column;justify-content:space-between;margin:0;grid-template-columns:none}
.contact-section.screen-page .half-heading h2{font-size:clamp(60px,9vw,170px);line-height:.82;max-width:none;padding:0}
.contact-section.screen-page .half-heading>.tag{position:static}
.contact-section.screen-page .contact-content{margin:0;padding:0;display:flex;flex-direction:column;min-height:0;overflow:auto;scrollbar-width:none}
.contact-section.screen-page .contact-intro{margin-top:0}
.contact-section.screen-page .contact-form{margin-top:22px;gap:16px}
.contact-section.screen-page textarea{min-height:60px}
.contact-side{margin-top:14px;line-height:1.6;display:flex;gap:8px;align-items:flex-start}
.contact-side .dot,.cta-top .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2ec27e;margin-top:3px}
@media(max-width:899px){.about-screen,.contact-section.screen-page{grid-template-columns:1fr}.about-photo{min-height:60vw}}