:root{
  /* Coin Coin brand palette (charte graphique 2026) */
  --noir:#140d1c;
  --violet-3:#474650; /* "fond noir + blanc 30%" — official secondary surface tone */
  --noir-2:var(--violet-3);
  --orange:#ec6527;
  --violet-2:#672290; /* accent violet officiel */
  --jaune:#fbc117;
  --creme:#ffffff;
  --gris:#8a8194;
  --line:rgba(239,232,219,.1);
  /* horizontal edge padding: 6vw normally, growing beyond that once the
     viewport is wide enough that content would otherwise exceed ~1600px —
     keeps text centered and readable instead of stretching edge-to-edge on
     ultra-wide monitors */
  --pad:max(6vw, calc((100vw - 1600px) / 2));
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* !important on the base colors: when this page is embedded in WordPress
   (see the coincoin-homepage plugin), the active theme's own stylesheet is
   still enqueued via wp_head() and loads after this file, and can otherwise
   silently override the background/text color back to the theme's defaults */
html, body{ background:var(--noir) !important; }
body{
  font-family:'Poppins',sans-serif;
  color:var(--creme) !important;
  overflow-x:hidden;
  cursor:none;
}
@media(pointer:coarse){ body{cursor:auto;} #cursor{display:none;} }
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  body{cursor:auto;}
  #cursor{display:none;}
}
.mono{font-family:'JetBrains Mono',monospace;}

/* anchor targets need clearance so the fixed header doesn't cover them */
#top, #poles, #real, #contact{ scroll-margin-top:110px; }

img{max-width:100%; display:block;}

/* ---------- ACCESSIBILITY UTILITIES ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--creme); color:var(--noir); padding:12px 18px;
  border-radius:8px; text-decoration:none; font-weight:600; font-size:.9rem;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

a:focus-visible,
button:focus-visible,
.nav-toggle:focus-visible{
  outline:2px solid var(--jaune);
  outline-offset:4px;
  border-radius:4px;
}

/* grain overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#cursor{
  position:fixed; width:16px; height:16px; border-radius:50%;
  border:1px solid var(--creme); pointer-events:none; z-index:300;
  transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s;
  mix-blend-mode:difference;
  left:-100px; top:-100px;
}
#cursor.big{ width:52px; height:52px; background:var(--creme); }

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad);
}
nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(12,7,16,1) 0%, rgba(12,7,16,.3) 100%);
}
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; transition:opacity .25s ease; }
.logo:hover{ opacity:.8; }
.logo img{ width:68px; height:68px; }
.logo-word{ font-weight:800; font-size:1.4rem; letter-spacing:.01em; color:var(--creme); }
.logo-word span{ color:var(--orange); }

.nav-actions{ position:relative; z-index:101; display:flex; align-items:center; gap:16px; }

.navlinks{display:none; gap:36px; font-size:.82rem;}
.navlinks a{color:var(--creme); text-decoration:none; opacity:.75; transition:color .25s, opacity .25s; position:relative;}
.navlinks a:hover{color:var(--orange); opacity:1;}
.navlinks a.active{ color:var(--orange); opacity:1; }
@media(min-width:840px){
  .navlinks a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--orange);
  }
}
@media(min-width:840px){.navlinks{display:flex;}}

.nav-cta{
  font-size:.8rem; padding:12px 22px; border-radius:100px;
  border:1px solid var(--line); color:var(--creme); text-decoration:none;
  transition:background .25s, color .25s, border-color .25s, transform .25s cubic-bezier(.2,1,.3,1);
  will-change:transform;
  display:none;
}
.nav-cta:hover{ background:var(--creme); color:var(--noir); border-color:var(--creme); }
@media(min-width:560px){ .nav-cta{ display:inline-block; } }

/* mobile hamburger */
.nav-toggle{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:transparent; cursor:pointer; padding:0;
}
.nav-toggle span{ width:16px; height:2px; background:var(--creme); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(min-width:840px){ .nav-toggle{ display:none; } }

@media(max-width:839px){
  .navlinks{
    position:fixed; top:0; right:0; bottom:0; z-index:99;
    width:min(78vw,320px); height:100vh; padding:110px 8vw 40px;
    background:var(--noir-2); border-left:1px solid var(--line);
    display:flex; flex-direction:column; gap:26px; font-size:1.1rem;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.2,1,.3,1);
  }
  .navlinks.open{ transform:translateX(0); }
}

/* ---------- PLACEHOLDER IMAGE ---------- */
.ph{
  border:1px dashed rgba(239,232,219,.25); border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--gris); font-size:.75rem; text-align:center; letter-spacing:.04em;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 10px, transparent 10px 20px);
}
.ph svg{ width:26px; height:26px; opacity:.5; }

/* real photo standing in for a placeholder — same box, solid frame instead of dashed */
.ph.has-photo{
  border-style:solid; border-color:var(--line); background:none; padding:0; overflow:hidden;
}
.ph.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* cutout PNGs with real transparency: no frame/border/background to remove,
   object-fit:contain instead of cover so nothing gets cropped off */
.ph.is-cutout{ border:none; background:none; border-radius:0; }
.ph.is-cutout img{ object-fit:contain; }

/* ---------- HERO ---------- */
.hero{
  min-height:100vh; padding:150px var(--pad) 60px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
.hero-eyebrow{
  font-size:.75rem; letter-spacing:.2em; color:var(--orange);
  margin-bottom:26px; text-transform:uppercase;
}
.hero-title{
  font-weight:900; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(2.6rem, 8vw, 6.4rem);
}
.hero-title .line{ display:block; }
.hero-title .line.static{ color:var(--creme); }
.kinetic-wrap{ position:relative; display:block; }
/* invisible twin holding the full final text — it alone determines how many
   lines this wraps to, so that height never changes while the visible copy
   types/deletes character by character (which used to reflow everything below) */
.kinetic-sizer{ visibility:hidden; }
.kinetic-anim{ position:absolute; inset:0; }
.kinetic-base{
  background:linear-gradient(92deg, var(--orange), var(--jaune) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kinetic-cursor{
  display:inline-block; margin-left:3px; color:var(--jaune);
  animation:blink .9s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.kinetic-shine{
  position:absolute; left:0; top:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%);
  background-size:250% 100%; background-position:-250% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0;
}
.kinetic-shine.active{ animation:shineSweep 1s ease forwards; }
@keyframes shineSweep{
  0%{ background-position:-250% 0; opacity:1; }
  85%{ opacity:1; }
  100%{ background-position:150% 0; opacity:0; }
}
@media(prefers-reduced-motion:reduce){
  .kinetic-cursor, .kinetic-shine{ display:none !important; }
}
.hero-sub{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:28px; margin-top:56px;
}
.hero-sub p{ max-width:46ch; color:var(--gris); font-size:1.02rem; line-height:1.65; }
/* the logo column now sits lower/bigger (see .hero-right) and occupies the
   same vertical band as this block on desktop — cap the width and keep a
   safety margin so the wider, shifted-right text still clears it */
@media(min-width:1000px){ .hero-sub{ max-width:640px; margin-left:56px; } }
.hero-cta{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  background:var(--orange); color:var(--noir); font-weight:600;
  padding:16px 28px; border-radius:100px; text-decoration:none; font-size:.92rem;
  transition:transform .25s cubic-bezier(.2,1,.3,1); will-change:transform;
  align-self:center;
}
.hero-right{
  position:absolute; right:var(--pad);
  /* tracks the hero title's actual rendered height (padding-top + eyebrow +
     two title lines at the same clamp() the title itself uses) so the logo
     always starts right under "Créative & digitale" regardless of viewport
     width, instead of a guessed pixel offset */
  top:calc(150px + 42px + 1.96 * clamp(2.6rem, 8vw, 6.4rem));
  display:none; flex-direction:column; align-items:center; gap:20px;
}
@media(min-width:1000px){ .hero-right{display:flex;} }
.hero-logo-side{ width:260px; height:auto; opacity:.97; }
.hero-right-label{
  font-size:.72rem; letter-spacing:.12em; color:var(--gris);
  text-align:center; text-transform:uppercase;
}

.hero-scroll{
  position:absolute; bottom:34px; left:var(--pad);
  font-size:.7rem; color:var(--gris); letter-spacing:.14em;
  display:flex; align-items:center; gap:10px;
}
.hero-scroll::after{
  content:""; width:1px; height:30px; background:var(--gris);
  animation:scrollLine 1.8s infinite ease-in-out;
}
@keyframes scrollLine{ 0%,100%{opacity:.15;} 50%{opacity:1;} }
@media(prefers-reduced-motion:reduce){ .hero-scroll::after{ animation:none; opacity:.6; } }
@media(max-width:600px){ .hero-scroll{ display:none; } }

/* ---------- POLES (horizontal scroll-jack — same mechanic on every viewport) ---------- */
.poles-wrap{ position:relative; height:500vh; }
.poles-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.poles-sticky::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; z-index:6;
  background:linear-gradient(90deg, var(--orange), var(--jaune));
}
.poles-track{ display:flex; height:100%; will-change:transform; transition:transform .65s cubic-bezier(.65,0,.35,1); }
.pole-panel{
  min-width:100vw; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad); position:relative;
}
.pole-panel .pole-panel-num{ font-size:clamp(4rem,13vw,9rem); font-weight:800; color:var(--orange); line-height:1; opacity:.95; }
.pole-panel h3{
  font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; margin:10px 0 18px;
  position:relative; padding-bottom:16px;
  color:var(--creme) !important;
}
.pole-panel h3::after{
  content:""; position:absolute; left:0; bottom:0; width:52px; height:4px; border-radius:2px;
  background:var(--orange);
}
.pole-panel p{ color:var(--gris); max-width:46ch; font-size:1.05rem; line-height:1.65; }
.pole-panel-ph{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); width:200px; height:260px;
  display:flex; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.pole-panel-ph::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(236,101,39,.35);
}
/* transparent cutout: no card behind it, no drop shadow or ring — sized to
   fill as much of the right-hand space as each viewport allows without
   crowding the text block on the left */
.pole-panel-ph.is-cutout{ width:min(36vw, 60vh, 560px); height:min(36vw, 60vh, 560px); box-shadow:none; }
.pole-panel-ph.is-cutout::after{ display:none; }
/* wide-format cutout (device mockups etc.): keeps the source aspect ratio
   instead of forcing a square box, same viewport-relative sizing budget */
.pole-panel-ph.is-cutout-wide{ width:min(46vw, calc(60vh * 1.9501), 760px); height:auto; aspect-ratio:1915/982; }

.poles-progress{
  position:absolute; left:var(--pad); right:var(--pad); bottom:70px; height:3px; z-index:5;
  background:var(--line); border-radius:2px; overflow:hidden;
}
.poles-progress-bar{
  height:100%; width:0%; background:linear-gradient(90deg, var(--orange), var(--jaune));
  transition:width .1s linear;
}

.poles-dots{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:5; }
.poles-dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--line); border:none; padding:0; cursor:pointer; transition:background .3s, transform .3s; }
.poles-dots .dot.active{ background:var(--orange); transform:scale(1.3); }

/* Narrower viewports keep the exact same pinned scroll-jack mechanic; only the
   content *inside* each panel reflows (image moves from a side overlay into
   the stacked column) so nothing overlaps at 6vw of padding. Short viewports
   (landscape phones) need the same compact reflow even when wide, since the
   100vh pinned panel just doesn't have the vertical room otherwise. */
@media(max-width:720px), (max-height:480px){
  .pole-panel .pole-panel-num{ font-size:clamp(2.2rem,10vh,4rem); }
  .pole-panel h3{ font-size:clamp(1.3rem,6vh,2.2rem); margin:6px 0 10px; padding-bottom:10px; }
  .pole-panel p{ font-size:.92rem; line-height:1.5; }
  .pole-panel-ph{
    position:static; transform:none; width:min(56vw,190px); height:min(150px,18vh); margin-top:12px;
  }
  .poles-progress{ bottom:56px; }
}

/* Reduced-motion users get a fully static, stacked fallback instead of the
   pinned/animated scroll-jack — no viewport hijacking, just normal scrolling. */
@media(prefers-reduced-motion:reduce){
  .poles-wrap{ height:auto; }
  .poles-sticky{ position:static; height:auto; overflow:visible; border-bottom:none; }
  .poles-sticky::before{ display:none; }
  .poles-track{ display:block; height:auto; transform:none !important; transition:none; }
  .pole-panel{ min-width:0; height:auto; padding:70px var(--pad); }
  .pole-panel + .pole-panel{ border-top:1px solid var(--line); }
  .pole-panel-ph{ position:static; transform:none; width:min(60vw,220px); height:200px; margin-top:20px; }
  .poles-progress, .poles-dots{ display:none; }
}

/* ---------- REASSURANCE ---------- */
.reassure{ padding:170px var(--pad); text-align:center; }
.reassure p:first-child{
  font-size:clamp(1.7rem,3.6vw,2.8rem); font-weight:700; line-height:1.3;
  max-width:20ch; margin:0 auto;
}
.reassure .hl{ color:var(--orange); }
.reassure-small{
  display:block; margin-top:26px; font-size:.95rem; color:var(--gris);
  font-weight:400; max-width:46ch; margin-left:auto; margin-right:auto;
}
@media(max-width:600px){ .reassure{ padding:110px var(--pad); } }

/* ---------- REALISATIONS ---------- */
.real{ padding:100px var(--pad) 140px; }
.real-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:50px; flex-wrap:wrap; gap:20px;
}
.real-head h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:800; color:var(--creme) !important; }
.real-head a{ color:var(--orange); text-decoration:none; font-size:.88rem; font-weight:600; display:inline-block; transition:transform .25s cubic-bezier(.2,1,.3,1); will-change:transform;}
.real-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.real-card{
  background:var(--noir-2); border-radius:16px; overflow:hidden;
  border:1px solid var(--line); border-top:3px solid var(--orange);
  transition:transform .3s ease, border-color .3s ease;
}
.real-card:hover{ transform:translateY(-6px); border-color:var(--orange); }
.real-card .ph{ height:170px; border:none; border-radius:0; border-bottom:1px solid var(--line); }
.real-card-no-photo .real-card-body{ padding-top:28px; }
.real-card-body{ padding:24px; }
.real-tag{ font-size:.68rem; letter-spacing:.1em; color:var(--jaune); text-transform:uppercase;}
.real-card h3{ margin-top:12px; font-size:1.2rem; font-weight:700; color:var(--creme) !important; }
.real-card p{ margin-top:8px; color:var(--gris); font-size:.9rem; line-height:1.5;}
.real-card p a{ color:var(--orange); text-decoration:underline; text-underline-offset:2px; }

/* ---------- CONTACT ---------- */
.contact{ padding:150px var(--pad) 60px; text-align:center; }
.contact-eyebrow{ font-size:.78rem; letter-spacing:.18em; color:var(--gris); margin-bottom:22px; }
.contact-link{
  display:inline-block; font-size:clamp(2rem,7vw,4.4rem); font-weight:800;
  color:var(--creme); text-decoration:none; position:relative; letter-spacing:-.02em;
  transition:transform .25s cubic-bezier(.2,1,.3,1); will-change:transform;
}
.contact-link::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:3px;
  background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.contact-link:hover::after, .contact-link:focus-visible::after{ transform:scaleX(1); }

footer{
  margin:80px 0 0; padding:30px var(--pad); border-top:1px solid var(--line);
  font-size:.82rem; color:var(--gris);
}
footer address{ font-style:normal; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; }
footer a{ color:var(--gris); text-decoration:none; transition:color .2s ease; }
footer a:hover{ color:var(--orange); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}