/* ============================================================================
   Install Xpert — CINEMATIC DESIGN ENGINE  (cinematic.css)
   Single source of design truth for every cinematic page. Contains the COMPLETE
   visual vocabulary of design/home-proto.html, ported faithfully (same colors,
   sizes, easings) but with EVERY selector scoped under `.ix-cine-page` so nothing
   leaks into wp-admin or The7. A handful of fixed-position chrome helpers that
   live OUTSIDE the <main> wrapper (footer, back-to-top) are scoped to body.ix-cine.

   Section map:
     0  Tokens + foundation               8  Stats parallax band (.parax/.stat)
     1  Typography helpers + body-h       9  Cinematic statement (.cine/.stw)
     2  Chrome: grain/techgrid/cursor    10  Process steps (.steps)
     3  FX layers: bgstage/bgL/techgrid  11  Showpiece « Le mur prend vie »
     4  Right rail (.rail)               12  Pinned gallery (.gal)
     5  Header / nav / mobile drawer     13  Reviews (.rev) + Trustindex
     6  Hero (proto .h1 + native .ix-hero)14 FAQ accordion (.qa)
     7  Marquee (.marq)                  15  Big CTA (.joindre) + form/share/areas
     S  Sections + heads + vdivider      16  Footer (.foot)
        Service cards (.svc)             17  Reveal utils + responsive + RM + SEO
   ========================================================================== */

/* ============================================================================
   0. TOKENS + FOUNDATION
   ========================================================================== */
.ix-cine-page{
  --ink:#0A0A0A; --ink2:#121315; --ink3:#1A1C1F; --panel:#1C1C1E;
  --orange:#FA7502; --hot:#FB5900; --gold:#FC8F02;
  --line:#2A2D31; --steel:#6B7177; --mist:#A8AEB5; --cream:#F5F6F7; --mut:#8A9099;
  --grad:linear-gradient(115deg,#FB5900,#FA7502 45%,#FC8F02);
  --btn:linear-gradient(120deg,#B8480A,#C9590C 60%,#D26A10);
  --sans:'Space Grotesk',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  position:relative; background:#070809; color:var(--cream);
  font-family:var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.ix-cine-page *{ box-sizing:border-box; }
.ix-cine-page h1,.ix-cine-page h2,.ix-cine-page h3,
.ix-cine-page h4,.ix-cine-page h5,.ix-cine-page h6{
  font-family:var(--sans);letter-spacing:-.02em;font-weight:600;line-height:1.04;
  color:var(--cream);margin:0;
}
.ix-cine-page p{ margin:0; }
.ix-cine-page a{ color:inherit;text-decoration:none; }
.ix-cine-page img{ max-width:100%; }
.ix-cine-page ul{ list-style:none;margin:0;padding:0; }
.ix-cine-page .gm{
  background:linear-gradient(115deg,#FB5900,#FA7502 40%,#FC8F02 60%,#FB5900);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:230% auto;animation:ixc-sheen 7s linear infinite;
}
@keyframes ixc-sheen{ to{ background-position:230% center; } }

/* ============================================================================
   1. TYPOGRAPHY HELPERS + body-copy-in-heading
   ========================================================================== */
.ix-cine-page .wrap{ max-width:1200px;margin:0 auto;padding:0 40px;position:relative;z-index:2; }
.ix-cine-page .ey{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;
  font-size:12px;font-weight:600;color:var(--orange);
}
.ix-cine-page .mut{ color:var(--mist);line-height:1.8; }

/* ★ BODY-COPY-WRAPPED-IN-A-HEADING — tag stays semantic, reads as body text ★ */
.ix-cine-page .body-h,
.ix-cine-page h2.body-h,
.ix-cine-page h3.body-h,
.ix-cine-page h4.body-h{
  font-family:var(--body);font-weight:400;letter-spacing:0;line-height:1.8;
  color:var(--mist);font-size:16px;text-transform:none;margin-top:14px;max-width:680px;
}
.ix-cine-page .body-h.ix-kw,
.ix-cine-page h2.body-h.ix-kw{
  font-size:13px;line-height:1.7;color:var(--mut);max-width:880px;letter-spacing:.01em;
}

/* ============================================================================
   2. CHROME — grain / vignette / custom cursor
   ========================================================================== */
.ix-cine-page .grain,.ix-cine-page .vignette,
.ix-cine-page .cur,.ix-cine-page .cur2{ pointer-events:none; }
.ix-cine-page .grain{
  position:fixed;inset:-60%;z-index:9300;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44MiIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIvPjwvc3ZnPg==");
  background-size:150px 150px;animation:ixc-grain .55s steps(5) infinite;
}
.ix-cine-page .grain::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 42%,transparent 50%,rgba(0,0,0,.46));
}
@keyframes ixc-grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,3%)}40%{transform:translate(4%,-5%)}60%{transform:translate(-3%,6%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
.ix-cine-page .vignette{
  position:fixed;inset:0;z-index:9350;
  background:radial-gradient(ellipse 120% 100% at 50% 42%,transparent 52%,rgba(0,0,0,.5));
}
.ix-cine-page .cur{
  position:fixed;top:0;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;
  border:1.5px solid var(--orange);border-radius:50%;pointer-events:none;z-index:9450;
  transition:width .25s,height .25s,background .25s,margin .25s;will-change:transform;
}
.ix-cine-page .cur.big{ width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(250,117,2,.1); }
.ix-cine-page .cur2{
  position:fixed;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;
  background:var(--gold);border-radius:50%;pointer-events:none;z-index:9450;will-change:transform;
}

/* ============================================================================
   3. FX LAYERS — canvas, traveling bg crossfade, techgrid
   ========================================================================== */
.ix-cine-page #bgfx{ position:fixed;inset:0;z-index:1;pointer-events:none; }
.ix-cine-page .bgstage{ position:fixed;inset:0;z-index:0;pointer-events:none;background:#070809; }
.ix-cine-page .bgL{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease;will-change:opacity;
}
.ix-cine-page .bgL::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,9,.86),rgba(7,8,9,.94));
}
.ix-cine-page .bgL.on{ opacity:1;animation:ixc-kb 16s ease-out forwards; }
@keyframes ixc-kb{ from{ transform:scale(1.10); } to{ transform:scale(1); } }
.ix-cine-page .techgrid{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,130,140,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,130,140,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(ellipse 90% 70% at 50% 30%,#000,transparent 80%);
  mask:radial-gradient(ellipse 90% 70% at 50% 30%,#000,transparent 80%);
}

/* ============================================================================
   S0. SKIP LINK + a11y
   ========================================================================== */
.ix-cine-page .ix-skip{
  position:absolute;left:-9999px;top:0;z-index:9460;
  background:var(--orange);color:#1a0d00;font-family:var(--sans);font-weight:600;
  letter-spacing:.04em;padding:12px 18px;border-radius:0 0 8px 0;
}
.ix-cine-page .ix-skip:focus{ left:0; }
.ix-cine-page a:focus-visible,
.ix-cine-page button:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(250,117,2,.35);border-radius:6px;
}
.ix-cine-page .sr-only,
.ix-cine-page .ix-legacy-label{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================================
   4. RIGHT RAIL
   ========================================================================== */
.ix-cine-page .rail{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:75;
  display:flex;flex-direction:column;gap:16px;
}
.ix-cine-page .rail a{
  display:flex;align-items:center;gap:10px;cursor:pointer;opacity:.4;
  transition:opacity .35s;justify-content:flex-end;
}
.ix-cine-page .rail .rl{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:10px;
  color:var(--cream);max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:.35s;
}
.ix-cine-page .rail i{
  width:9px;height:9px;border-radius:50%;border:1px solid var(--orange);
  flex:0 0 auto;transition:.35s;
}
.ix-cine-page .rail a.on{ opacity:1; }
.ix-cine-page .rail a.on i{ background:var(--orange);box-shadow:0 0 12px var(--orange); }
.ix-cine-page .rail a:hover .rl,
.ix-cine-page .rail a.on .rl{ max-width:150px;opacity:.85; }

/* ============================================================================
   5. HEADER / NAV + mobile drawer
   ========================================================================== */
.ix-cine-page .hd{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .4s,border-color .4s;border-bottom:1px solid transparent;
}
.ix-cine-page .hd.solid{
  background:rgba(8,9,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(250,117,2,.22);
}
.ix-cine-page .prog{
  position:absolute;top:0;left:0;height:3px;width:0;
  background:var(--grad);background-size:200% auto;animation:ixc-sheenbar 4s linear infinite;
}
@keyframes ixc-sheenbar{ to{ background-position:200% center; } }
.ix-cine-page .nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 40px;transition:padding .4s;
}
.ix-cine-page .hd.solid .nav{ padding:9px 40px; }
.ix-cine-page .navlogo{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:.01em;
}
.ix-cine-page .navlogo b{ color:var(--orange); }
.ix-cine-page .navlogo .lg{
  height:30px;width:auto;display:block;transition:height .4s;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.ix-cine-page .hd.solid .navlogo .lg{ height:25px; }
.ix-cine-page .menu{ display:flex;gap:26px;align-items:center; }
.ix-cine-page .nl{
  color:var(--cream);font-size:13.5px;letter-spacing:.01em;cursor:pointer;
  position:relative;padding-bottom:4px;opacity:.82;transition:opacity .3s;
}
.ix-cine-page .nl:hover{ opacity:1; }
.ix-cine-page .nl::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--orange);transition:width .35s;
}
.ix-cine-page .nl:hover::after{ width:100%; }
.ix-cine-page .navtel{
  font-family:var(--sans);font-weight:600;letter-spacing:.02em;font-size:14px;
  color:var(--cream);display:flex;align-items:center;gap:7px;
}
.ix-cine-page .navtel:before{
  content:"";width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px #22C55E;
}
.ix-cine-page .gbtn{
  position:relative;overflow:hidden;display:inline-block;
  background:var(--btn);background-size:200% auto;color:#fff;font-family:var(--sans);
  text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:600;
  padding:12px 24px;border-radius:8px;cursor:pointer;border:none;
  transition:box-shadow .3s,transform .25s;will-change:transform;
}
.ix-cine-page .gbtn:hover{
  background:var(--grad);box-shadow:0 8px 24px rgba(250,117,2,.26);transform:translateY(-2px);
}
.ix-cine-page .gbtn:focus-visible,
.ix-cine-page .gline:focus-visible{ outline:none;box-shadow:0 0 0 3px rgba(250,117,2,.35); }
.ix-cine-page .gbtn::before{
  content:"";position:absolute;top:-10%;left:-130%;width:60%;height:120%;
  /* prototype overrides the shine tint to the warmer .4 cream — port that final value */
  background:linear-gradient(105deg,transparent,rgba(255,240,214,.4),transparent);
  transform:skewX(-18deg);transition:left .6s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.ix-cine-page .gbtn:hover::before{ left:150%; }
.ix-cine-page .gline{
  display:inline-block;color:var(--cream);border:1px solid var(--line);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:12px;
  font-weight:600;padding:12px 22px;border-radius:8px;cursor:pointer;transition:.3s;
  background:rgba(255,255,255,.02);
}
.ix-cine-page .gline:hover{ border-color:var(--orange);color:var(--orange); }
.ix-cine-page .ix-tag{
  font-family:var(--body);font-size:11px;letter-spacing:.02em;color:var(--mut);
  line-height:1.4;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
}
.ix-cine-page .ix-mnav__toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;
}
.ix-cine-page .ix-mnav__toggle span{
  display:block;height:2px;width:100%;background:var(--cream);transition:transform .35s,opacity .35s;
}
.ix-cine-page .ix-mnav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ix-cine-page .ix-mnav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ix-cine-page .ix-mnav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.ix-cine-page .ix-mnav{
  position:fixed;inset:0;z-index:79;background:rgba(8,9,10,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.ix-cine-page .ix-mnav.open{ opacity:1;visibility:visible; }
/* menu open = page scroll locked: the full-screen drawer holds perfectly still */
body.ix-mnav-open{ overflow:hidden;height:100vh; }
html.ix-mnav-open{ overflow:hidden; }
/* the links live inside a <nav> wrapper — stack them (they are inline otherwise) */
.ix-cine-page .ix-mnav nav{ display:flex;flex-direction:column;align-items:center;gap:6px; }
.ix-cine-page .ix-mnav a{
  font-family:var(--sans);font-size:20px;font-weight:500;color:var(--cream);
  padding:12px 20px;letter-spacing:.01em;transition:color .25s;
}
.ix-cine-page .ix-mnav a:hover{ color:var(--orange); }

/* ============================================================================
   6. HERO — prototype layered hero (.hero/.hphoto/.h1/.ul…)  +  native .ix-hero
   ========================================================================== */
.ix-cine-page .hero{
  position:relative;height:100vh;min-height:680px;max-height:920px;
  overflow:hidden;display:flex;align-items:center;z-index:2;background:#070809;
}
.ix-cine-page .hero .layer,
.ix-cine-page .layer{ position:absolute;inset:0;will-change:transform; }
.ix-cine-page .hphoto{ inset:-80px;background-size:cover;background-position:center;filter:brightness(.42) contrast(1.08); }
.ix-cine-page .hdark{
  background:linear-gradient(110deg,rgba(7,8,9,.92) 8%,rgba(7,8,9,.66) 46%,rgba(7,8,9,.4) 70%,rgba(7,8,9,.85));
}
.ix-cine-page .hgrid{
  background-image:linear-gradient(rgba(120,130,140,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,130,140,.07) 1px,transparent 1px);
  background-size:72px 72px;opacity:.5;
  -webkit-mask:radial-gradient(ellipse 70% 80% at 30% 50%,#000,transparent 75%);
  mask:radial-gradient(ellipse 70% 80% at 30% 50%,#000,transparent 75%);
}
.ix-cine-page .herofog{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 26% 52%,rgba(250,117,2,.12),rgba(250,117,2,.03) 45%,transparent 70%);
  mix-blend-mode:screen;animation:ixc-fogdrift 16s ease-in-out infinite;
}
@keyframes ixc-fogdrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-14px,0) scale(1.06)}}
.ix-cine-page .scan{
  position:absolute;left:0;right:0;height:38vh;
  background:linear-gradient(180deg,transparent,rgba(250,117,2,.06),transparent);
  mix-blend-mode:screen;animation:ixc-scan 7s ease-in-out infinite;pointer-events:none;
}
@keyframes ixc-scan{0%,100%{transform:translateY(-30vh);opacity:0}50%{transform:translateY(70vh);opacity:1}}
.ix-cine-page .heroIn{ position:relative;z-index:6;max-width:760px; }
.ix-cine-page .hbadge{
  display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(250,117,2,.4);
  border-radius:40px;padding:7px 15px;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.18em;font-size:11px;color:var(--orange);background:rgba(250,117,2,.06);
}
.ix-cine-page .hbadge b{ width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange); }
.ix-cine-page .h1{ font-size:clamp(40px,6.4vw,86px);line-height:.98;margin:22px 0 0;letter-spacing:-.03em; }
.ix-cine-page .h1 .ul{ position:relative;display:inline-block; }
.ix-cine-page .h1 .ul svg{ position:absolute;left:0;bottom:-.16em;width:100%;height:.22em;overflow:visible; }
.ix-cine-page .h1 .ul path{
  stroke:var(--orange);stroke-width:7;fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 4px 14px rgba(250,117,2,.5));
}
.ix-cine-page .in .h1 .ul path,
.ix-cine-page .hero.in .h1 .ul path{ animation:ixc-draw 1.1s cubic-bezier(.16,1,.3,1) .5s forwards; }
@keyframes ixc-draw{ to{ stroke-dashoffset:0; } }
.ix-cine-page .hsub{ margin:26px 0 0;font-size:clamp(15px,1.4vw,18px);color:var(--mist);line-height:1.75;max-width:560px; }
.ix-cine-page .hsub b{ color:var(--cream);font-weight:600; }
.ix-cine-page .hcta{ display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap; }
.ix-cine-page .htel{ display:flex;align-items:center;gap:12px;margin-top:30px; }
.ix-cine-page .htel a{ font-family:var(--sans);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:.01em;color:var(--cream); }
.ix-cine-page .htel .tl{ font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-family:var(--sans); }
.ix-cine-page .trust{
  display:flex;gap:26px;align-items:center;margin-top:38px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line);
}
.ix-cine-page .trust .ti{ display:flex;flex-direction:column;gap:3px; }
.ix-cine-page .trust .ti b{ font-family:var(--sans);font-size:20px;color:var(--cream); }
.ix-cine-page .trust .ti span{ font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut); }
.ix-cine-page .trust .stars{ color:var(--gold);letter-spacing:2px; }
.ix-cine-page .hudbr{ position:absolute;width:34px;height:34px;border:1px solid rgba(250,117,2,.5);z-index:6; }
.ix-cine-page .hudbr.tl{ top:104px;left:40px;border-right:0;border-bottom:0; }
.ix-cine-page .hudbr.br{ bottom:34px;right:40px;border-left:0;border-top:0; }
.ix-cine-page .cue{
  position:absolute;bottom:22px;left:50%;margin-left:-14px;z-index:6;
  color:var(--orange);font-size:22px;animation:ixc-bob 1.8s ease-in-out infinite;
}
@keyframes ixc-bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}

/* S6b. NATIVE HERO INTERNALS — when the native <section class="ix-hero"> carries the
   real SEO <img> (alt/title intact), it fills the .hero shell and the duplicate
   cinematic bg layers are hidden so they don't fight. Corner brackets + scroll cue
   stay as cinematic flair. DOM order is byte-locked phone→CTA→title; flex `order`
   reads phone→title→CTA. */
.ix-cine-page .hero:has(.ix-hero) .hphoto,
.ix-cine-page .hero:has(.ix-hero) .hdark,
.ix-cine-page .hero:has(.ix-hero) .hgrid,
.ix-cine-page .hero:has(.ix-hero) .herofog,
.ix-cine-page .hero:has(.ix-hero) .scan{ display:none; }
.ix-cine-page .ix-hero{ position:absolute;inset:0;z-index:5;display:flex;align-items:center;width:100%;height:100%;min-height:0;max-height:none;background:#070809; }
.ix-cine-page .ix-hero__bg{ position:absolute;inset:0;margin:0;z-index:0; }
.ix-cine-page .ix-hero__bg img{ width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.46) contrast(1.08);transform:scale(1.06);will-change:transform; }
.ix-cine-page .ix-hero__scrim{ position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(7,8,9,.92) 8%,rgba(7,8,9,.6) 46%,rgba(7,8,9,.4) 70%,rgba(7,8,9,.85)); }
.ix-cine-page .ix-hero__grid{ position:absolute;inset:0;z-index:1;opacity:.5;background-image:linear-gradient(rgba(120,130,140,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,130,140,.07) 1px,transparent 1px);background-size:72px 72px;-webkit-mask:radial-gradient(ellipse 70% 80% at 30% 50%,#000,transparent 75%);mask:radial-gradient(ellipse 70% 80% at 30% 50%,#000,transparent 75%); }
.ix-cine-page .ix-hero__glow{ position:absolute;left:26%;top:52%;width:46%;height:42%;transform:translate(-50%,-50%);z-index:1;background:radial-gradient(ellipse,rgba(250,117,2,.18),transparent 65%);mix-blend-mode:screen;filter:blur(22px);pointer-events:none; }
.ix-cine-page .ix-hero__inner{ position:relative;z-index:3;max-width:1200px;margin:0 auto;width:100%;padding:0 40px;display:flex;flex-direction:column;align-items:flex-start; }
.ix-cine-page .ix-hero__phone{ order:0;font-family:var(--sans);font-weight:700;font-size:clamp(11px,1.2vw,13px);letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0 0 16px; }
.ix-cine-page .ix-hero__title{ order:1;font-family:var(--sans);font-weight:600;color:var(--cream);font-size:clamp(38px,5.6vw,74px);line-height:1;letter-spacing:-.03em;margin:0;max-width:760px; }
.ix-cine-page .ix-hero__cta{ order:2;display:inline-flex;align-items:center;gap:9px;margin-top:32px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:13px;background:var(--btn);background-size:200% auto;color:#fff;padding:14px 28px;border-radius:8px;cursor:pointer;transition:box-shadow .3s,transform .25s,background-image .3s;will-change:transform; }
.ix-cine-page .ix-hero__cta:hover{ background-image:var(--grad);box-shadow:0 8px 24px rgba(250,117,2,.28);transform:translateY(-2px); }
.ix-cine-page .ix-hero__cta i{ font-style:normal; }
@media(max-width:820px){
  .ix-cine-page .hero:has(.ix-hero){ height:auto;min-height:560px; }
  .ix-cine-page .ix-hero__inner{ padding:90px 22px 40px; }
  .ix-cine-page .ix-hero__bg img{ filter:brightness(.4) contrast(1.08);transform:none; }
  .ix-cine-page .ix-hero__scrim{ background:linear-gradient(180deg,rgba(7,8,9,.66),rgba(7,8,9,.92)); }
}
/* keep the empty-src overlay images from drawing a broken-image glyph */
.ix-cine-page .ix-hero__logoa,
.ix-cine-page .ix-foot-logoa,
.ix-cine-page .ix-foot-deco{ display:none; }

/* ============================================================================
   7. MARQUEE
   ========================================================================== */
.ix-cine-page .marq{
  overflow:hidden;background:rgba(8,9,10,.7);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;z-index:2;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ix-cine-page .marq>div{
  white-space:nowrap;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.26em;font-size:14px;padding:16px 0;will-change:transform;color:var(--mist);
}
.ix-cine-page .marq b{ color:var(--orange); }
.ix-cine-page .marq .dot{ color:var(--orange);margin:0 22px; }

/* ============================================================================
   S. SECTIONS + section heads + variable-font divider + service cards
   ========================================================================== */
.ix-cine-page .sec{ padding:108px 0;position:relative;z-index:2; }
.ix-cine-page .shead{ margin-bottom:54px;max-width:720px; }
.ix-cine-page .shead h1{ font-size:clamp(40px,6.4vw,86px);line-height:.98;letter-spacing:-.03em; }
.ix-cine-page .shead h2{ font-size:clamp(30px,3.8vw,52px); }
.ix-cine-page .shead h2 .wrd{ display:inline-block;overflow:hidden;vertical-align:top; }
.ix-cine-page .shead h2 .wrd>span{ display:inline-block;will-change:transform; }
.ix-cine-page .shead .dl{
  height:2px;width:0;background:var(--grad);margin:18px 0 0;
  transition:width 1s cubic-bezier(.16,1,.3,1);
}
.ix-cine-page .in .shead .dl,
.ix-cine-page .shead.in .dl{ width:74px; }
.ix-cine-page .shead p{ margin-top:18px;color:var(--mist);line-height:1.8; }
.ix-cine-page .ix-phone-h2{
  font-family:var(--sans);font-weight:700;letter-spacing:.01em;
  font-size:clamp(22px,2.6vw,32px);color:var(--orange);margin-top:14px;line-height:1;
}
.ix-cine-page .ix-phone-h2 a{ color:inherit; }
.ix-cine-page .vdivider{
  position:relative;z-index:2;padding:118px 0;overflow:hidden;display:flex;
  justify-content:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(8,9,10,.4);
}
.ix-cine-page .vline{
  white-space:nowrap;font-family:var(--sans);font-weight:400;
  font-variation-settings:'wght' 320;font-size:clamp(26px,7vw,98px);letter-spacing:.12em;
  color:var(--cream);display:flex;align-items:center;gap:.38em;line-height:1;
  will-change:font-variation-settings,letter-spacing;
}
.ix-cine-page .vline b{ color:var(--orange);font-size:.4em;opacity:.85; }

/* SERVICE / ADVANTAGE CARDS — 3D tilt + spotlight */
.ix-cine-page .grid4{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.ix-cine-page .grid3{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.ix-cine-page .svc{
  background:linear-gradient(180deg,var(--ink3),var(--ink2));
  border:1px solid var(--line);border-radius:14px;padding:30px 24px;
  transition:transform .25s,border-color .35s,box-shadow .35s;
  transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  position:relative;overflow:hidden;
}
.ix-cine-page .svc::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(400px circle at var(--mxp,50%) var(--myp,0%),rgba(250,117,2,.10),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.ix-cine-page .svc:hover{ border-color:rgba(250,117,2,.55);box-shadow:0 20px 50px rgba(0,0,0,.5); }
.ix-cine-page .svc:hover::before{ opacity:1; }
.ix-cine-page .svc .ic{
  width:54px;height:54px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:26px;background:rgba(250,117,2,.1);
  border:1px solid rgba(250,117,2,.3);color:var(--orange);margin-bottom:18px;
}
.ix-cine-page .svc h2,
.ix-cine-page .svc h3{ font-size:19px;line-height:1.2;letter-spacing:-.01em;position:relative;z-index:1; }
.ix-cine-page .svc p{ margin-top:9px;font-size:13.5px;color:var(--mist);line-height:1.7;position:relative;z-index:1; }
.ix-cine-page .svc .body-h{ margin-top:9px;font-size:13.5px;line-height:1.7; }
.ix-cine-page .svc .more{
  margin-top:16px;display:inline-flex;gap:7px;color:var(--orange);font-family:var(--sans);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1;
}

/* S6 VISIOCONFÉRENCE beats (WP guide helper) */
.ix-cine-page .ix-visio{ display:grid;gap:34px;margin-top:10px; }
.ix-cine-page .ix-visio__beat{ position:relative;padding-left:30px;border-left:2px solid rgba(250,117,2,.18); }
.ix-cine-page .ix-visio__beat .bn{
  font-family:var(--sans);color:var(--orange);font-size:13px;letter-spacing:.22em;
  font-weight:600;text-transform:uppercase;
}
.ix-cine-page .ix-visio__beat h3{ font-size:clamp(22px,2.6vw,30px);margin-top:10px;letter-spacing:-.02em; }
.ix-cine-page .ix-visio__beat h4.body-h{ margin-top:12px;max-width:560px; }

/* ============================================================================
   8. STATS PARALLAX BAND
   ========================================================================== */
.ix-cine-page .parax{ position:relative;overflow:hidden;z-index:2; }
.ix-cine-page .paraxbg{
  position:absolute;inset:-90px 0;background-size:cover;background-position:center;
  filter:grayscale(.25) brightness(.32) contrast(1.05);will-change:transform;
}
.ix-cine-page .paraxdark{ position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.86),rgba(8,9,10,.8)); }
.ix-cine-page .statrow{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;padding:90px 0;
}
.ix-cine-page .stat{ text-align:center;border-right:1px solid var(--line); }
.ix-cine-page .stat:last-child{ border-right:0; }
.ix-cine-page .stat .num{
  font-family:var(--sans);font-weight:700;font-size:clamp(40px,5vw,64px);
  line-height:1;color:var(--orange);
}
.ix-cine-page .stat .suf{ color:var(--orange); }
.ix-cine-page .stat .lab{
  margin-top:10px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);font-family:var(--sans);
}

/* ============================================================================
   9. CINEMATIC STATEMENT (clip / word reveal)
   ========================================================================== */
.ix-cine-page .cine{
  position:relative;min-height:560px;height:100vh;max-height:900px;overflow:hidden;
  z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;
}
.ix-cine-page .cinebg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;filter:grayscale(.2) contrast(1.06) brightness(.4);
}
.ix-cine-page .cinedark{
  position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(7,8,9,.28),rgba(7,8,9,.92));
}
.ix-cine-page .cinewrap{ position:relative;z-index:3;max-width:1020px;padding:0 40px; }
.ix-cine-page .cine .ey{ display:block;margin-bottom:18px; }
.ix-cine-page .stbig{
  font-family:var(--sans);font-weight:600;font-size:clamp(28px,4.6vw,60px);
  line-height:1.16;letter-spacing:-.02em;
}
.ix-cine-page .stw{ display:inline-block;color:rgba(245,246,247,.16);transition:color .1s; }
.ix-cine-page .cineline{ height:2px;width:0;background:var(--grad);margin:28px auto 0; }

/* ============================================================================
   10. PROCESS STEPS
   ========================================================================== */
.ix-cine-page .steps{ display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px; }
.ix-cine-page .step{
  position:relative;padding:26px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--ink2);transition:border-color .35s,box-shadow .35s,transform .35s;
}
.ix-cine-page .step:hover{
  border-color:rgba(250,117,2,.4);box-shadow:0 18px 44px rgba(0,0,0,.5);transform:translateY(-3px);
}
.ix-cine-page .step .n{ font-family:var(--sans);font-weight:700;font-size:14px;color:var(--orange);letter-spacing:.1em; }
.ix-cine-page .step h2{ margin-top:12px;font-size:clamp(20px,2.2vw,26px);line-height:1.12;letter-spacing:-.01em; }
.ix-cine-page .step h3,
.ix-cine-page .step h4{ margin-top:12px;font-size:17px; }
.ix-cine-page .step p{ margin-top:8px;font-size:13px;color:var(--mist);line-height:1.65; }
.ix-cine-page .step .body-h{ margin-top:12px;font-size:15px;line-height:1.75; }
.ix-cine-page .ix-step__imgs{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px; }
.ix-cine-page .ix-step__imgs .ix-step__img{ margin-top:0; }
.ix-cine-page .ix-step__img{
  display:block;margin-top:20px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink2);
  transition:border-color .35s,box-shadow .35s,transform .35s;
}
.ix-cine-page .ix-step__img:hover{
  border-color:rgba(250,117,2,.45);box-shadow:0 18px 44px rgba(0,0,0,.5);transform:translateY(-3px);
}
.ix-cine-page .ix-step__img,
.ix-cine-page .ix-step__img img{ width:100%;height:auto; }
.ix-cine-page .ix-step__img img{ display:block; }
.ix-cine-page .ix-vesa{ margin-top:28px;color:var(--mist);line-height:1.8;font-size:15px;max-width:720px; }
.ix-cine-page .ix-vesa a{ color:var(--orange);text-decoration:underline;text-underline-offset:3px; }
.ix-cine-page .ix-vesa a:hover{ color:var(--gold); }

/* S10 TEAM (WP guide helper) */
.ix-cine-page .ix-team{ display:grid;grid-template-columns:0.9fr 1.1fr;gap:40px;align-items:center;margin-top:10px; }
.ix-cine-page .ix-team__img{ border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--ink2); }
.ix-cine-page .ix-team__img,
.ix-cine-page .ix-team__img img{ width:100%;height:auto; }
.ix-cine-page .ix-team__img img{ display:block;filter:contrast(1.05) brightness(.96); }

/* ============================================================================
   11. SHOWPIECE — « Le mur prend vie »
   ========================================================================== */
.ix-cine-page .murSec{ position:relative;z-index:2;background:#070809;height:300vh; }
.ix-cine-page .murPin{ position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden; }
.ix-cine-page .murImg{ position:absolute;inset:0;background-size:cover;background-position:center; }
.ix-cine-page .murAfter{ filter:contrast(1.06) brightness(.97); }
.ix-cine-page .murBefore{ filter:grayscale(1) brightness(.3) contrast(1.15);clip-path:inset(0 0 0 0); }
.ix-cine-page .murScrim{ position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,9,.45),rgba(7,8,9,.82)); }
.ix-cine-page .murBlueprint{ position:absolute;inset:0;width:100%;height:100%; }
.ix-cine-page .murBlueprint [data-draw]{ stroke:var(--orange);fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(250,117,2,.55)); }
.ix-cine-page .murBlueprint .bpfill{ fill:rgba(250,117,2,.06);stroke:none; }
.ix-cine-page .murBlueprint text{ fill:var(--orange);font-family:var(--sans);font-size:15px;letter-spacing:.14em;opacity:.85;stroke:none;filter:none; }
.ix-cine-page .murGlow{ position:absolute;left:50%;top:43%;width:46%;height:34%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(250,117,2,.5),transparent 70%);opacity:0;mix-blend-mode:screen;filter:blur(24px);pointer-events:none; }
.ix-cine-page .murTag{ position:absolute;left:8vw;top:13vh;z-index:5;font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--orange); }
.ix-cine-page .murText{ position:absolute;left:8vw;bottom:12vh;z-index:5;width:560px;height:220px; }
.ix-cine-page .murBeatItem{ position:absolute;left:0;bottom:0;opacity:0;width:560px; }
.ix-cine-page .murBeatItem .bn{ font-family:var(--sans);color:var(--orange);font-size:14px;letter-spacing:.22em;font-weight:600; }
.ix-cine-page .murBeatItem h3{ font-size:clamp(28px,3.6vw,52px);margin-top:10px;letter-spacing:-.02em; }
.ix-cine-page .murBeatItem p{ margin-top:12px;color:var(--mist);max-width:460px;line-height:1.7; }
.ix-cine-page .murBeatItem .murCta{ margin-top:22px; }
.ix-cine-page .murSpine{ position:absolute;right:7vw;top:20vh;bottom:20vh;width:2px;background:rgba(250,117,2,.14);z-index:5;border-radius:2px;overflow:hidden; }
.ix-cine-page .murSpine i{ position:absolute;left:0;top:0;width:100%;height:0;background:var(--grad); }
@media(max-width:820px){
  /* Shorter pin on phones: 240vh felt like a long dead-dark scroll. 175vh keeps
     the 4 reveal beats but tightens the empty stretch between them (~30% less). */
  .ix-cine-page .murSec{ height:175vh; }
  .ix-cine-page .murSpine{ display:none; }
  .ix-cine-page .murTag{ left:20px;top:20px; }
  .ix-cine-page .murText{ left:20px;right:20px;bottom:7vh;width:auto;height:215px; }
  .ix-cine-page .murBeatItem{ width:auto; }
  .ix-cine-page .murBeatItem h3{ font-size:30px; }
  .ix-cine-page .murBeatItem p{ font-size:14px; }
}

/* ============================================================================
   12. GALLERY — dense responsive grid (was pinned horizontal coverflow)
   ========================================================================== */
.ix-cine-page .gal{ position:relative;padding:108px 0;z-index:2;background:#070809; }
.ix-cine-page .galHead{
  max-width:1200px;margin:0 auto 40px;padding:0 40px;z-index:4;display:flex;
  justify-content:space-between;align-items:flex-end;
}
.ix-cine-page .galHead h2{ font-size:clamp(26px,3.4vw,46px); }
.ix-cine-page .galView{
  max-width:1240px;margin:0 auto;padding:0 40px;
}
.ix-cine-page .galTrack{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0;transform:none;
}
.ix-cine-page .galItem{
  position:relative;width:auto;height:auto;aspect-ratio:16/10;border-radius:14px;
  overflow:hidden;border:1px solid var(--line);
}
.ix-cine-page .galItem .gi{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.ix-cine-page .galItem:hover .gi{ transform:scale(1.07); }
.ix-cine-page .galItem .cap{
  position:absolute;left:20px;bottom:18px;z-index:2;font-family:var(--sans);
  text-transform:uppercase;letter-spacing:.12em;font-size:13px;
}
.ix-cine-page .galItem .cap small{ display:block;color:var(--orange);font-size:10px;letter-spacing:.2em;margin-bottom:4px; }
.ix-cine-page .galItem::after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(7,8,9,.78)); }
.ix-cine-page .galHint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:4;
  color:var(--mut);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
@media(max-width:900px){ .ix-cine-page .galTrack{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .ix-cine-page .galTrack{ grid-template-columns:1fr; } }

/* ============================================================================
   13. REVIEWS + Trustindex
   ========================================================================== */
.ix-cine-page .rev{ background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:26px; }
.ix-cine-page .rev .stars{ color:var(--gold);letter-spacing:2px; }
.ix-cine-page .rev p{ margin-top:14px;font-size:14px;color:var(--cream);line-height:1.7; }
.ix-cine-page .rev .who{
  margin-top:18px;display:flex;align-items:center;gap:12px;
  padding-top:14px;border-top:1px solid var(--line);
}
.ix-cine-page .rev .av{
  width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;
  align-items:center;justify-content:center;color:#1a0d00;font-family:var(--sans);font-weight:700;
}
.ix-cine-page .rev .who b{ font-size:14px; }
.ix-cine-page .rev .who span{ display:block;font-size:11px;color:var(--mut); }
.ix-cine-page .ix-trustindex{ margin-top:10px; }
.ix-cine-page .ix-trustindex .ti-widget{ background:transparent !important; }

/* ============================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.ix-cine-page .faq{ max-width:860px; }
.ix-cine-page .qa{ border-bottom:1px solid var(--line); }
.ix-cine-page .qa__q{ margin:0;font-size:inherit;line-height:inherit;font-weight:inherit; }
.ix-cine-page .qa button{
  width:100%;text-align:left;background:none;border:0;color:var(--cream);
  font-family:var(--sans);font-size:18px;font-weight:500;padding:22px 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;letter-spacing:-.01em;
}
.ix-cine-page .qa button:hover{ color:var(--orange); }
.ix-cine-page .qa button .pm{ color:var(--orange);font-size:24px;transition:transform .3s;flex:0 0 auto; }
.ix-cine-page .qa.open button .pm,
.ix-cine-page .qa button[aria-expanded="true"] .pm{ transform:rotate(45deg); }
.ix-cine-page .qa .ans{ max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1); }
.ix-cine-page .qa .ans p{ padding:0 0 22px;color:var(--mist);line-height:1.8;font-size:14.5px;max-width:680px; }

/* ============================================================================
   15. BIG CTA / contact form / share / areas
   ========================================================================== */
.ix-cine-page .joindre{ position:relative;z-index:2;text-align:center;padding:120px 0; }
.ix-cine-page .joindre h2{ font-size:clamp(32px,5vw,64px);letter-spacing:-.03em; }
.ix-cine-page .joindre h4{ font-size:clamp(24px,3.2vw,40px);letter-spacing:-.03em; }
.ix-cine-page .joindre .big{
  font-family:var(--sans);font-weight:700;font-size:clamp(30px,4vw,52px);
  color:var(--cream);margin-top:24px;display:inline-block;
}
.ix-cine-page .joindre .sub{ margin-top:14px;color:var(--mist);letter-spacing:.08em;text-transform:uppercase;font-size:12px; }
.ix-cine-page .joindre .cta{ margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
/* lead/form variant (non-centered) when .joindre carries a form */
.ix-cine-page .joindre.ix-lead{ text-align:left; }
.ix-cine-page .ix-foot-nav ul{ display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:30px; }
.ix-cine-page .ix-foot-nav a{ color:var(--mist);font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:uppercase; }
.ix-cine-page .ix-foot-nav a:hover{ color:var(--orange); }
.ix-cine-page .ix-lead .ix-form{ margin-top:34px; }
/* CONTACT FORM (.ix-form) — cinematic field skin (dark fields, cream text, orange focus). */
.ix-cine-page .ix-form{ max-width:640px; }
.ix-cine-page .ix-form__row{ display:grid;gap:16px;margin:0 0 16px; }
.ix-cine-page .ix-form__row.cols-2{ grid-template-columns:1fr 1fr; }
.ix-cine-page .ix-form label{ display:block;font-family:var(--sans);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mist);margin:0 0 7px; }
.ix-cine-page .ix-form label .req{ color:var(--orange); }
.ix-cine-page .ix-form input[type=text],.ix-cine-page .ix-form input[type=email],.ix-cine-page .ix-form input[type=tel],.ix-cine-page .ix-form textarea,.ix-cine-page .ix-form input[type=file]{ width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;color:var(--cream);font-family:var(--body);font-size:15px;padding:13px 15px;transition:border-color .25s,box-shadow .25s; }
.ix-cine-page .ix-form textarea{ min-height:130px;resize:vertical; }
.ix-cine-page .ix-form input:focus,.ix-cine-page .ix-form textarea:focus{ outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(250,117,2,.16); }
.ix-cine-page .ix-form input::placeholder,.ix-cine-page .ix-form textarea::placeholder{ color:var(--mut); }
.ix-cine-page .ix-form__check{ display:flex;align-items:flex-start;gap:10px;font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--mist);font-size:14px;margin:0 0 10px; }
.ix-cine-page .ix-form__check input{ margin-top:3px;accent-color:var(--orange);width:16px;height:16px;flex:0 0 auto; }
.ix-cine-page .ix-form__checks{ display:flex;flex-wrap:wrap;gap:18px; }
.ix-cine-page .ix-form__submit{ font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:14px;background:var(--btn);background-size:200% auto;color:#fff;border:none;border-radius:9px;padding:15px 34px;cursor:pointer;transition:box-shadow .3s,transform .25s,background-image .3s;will-change:transform; }
.ix-cine-page .ix-form__submit:hover{ background-image:var(--grad);box-shadow:0 8px 24px rgba(250,117,2,.26);transform:translateY(-2px); }
.ix-cine-page .ix-form__submit[disabled]{ opacity:.6;cursor:default; }
.ix-cine-page .ix-hp{ position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden; }
.ix-cine-page .ix-form__msg{ border-radius:9px;padding:13px 16px;margin:0 0 18px;font-size:14px; }
.ix-cine-page .ix-form__msg.is-error{ background:rgba(220,60,60,.12);border:1px solid rgba(220,60,60,.4);color:#ffb4b4; }
.ix-cine-page .ix-form .cf-turnstile{ margin:6px 0 18px; }
@media(max-width:600px){ .ix-cine-page .ix-form__row.cols-2{ grid-template-columns:1fr; } }
.ix-cine-page .ix-contact-links{ display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px; }
.ix-cine-page .ix-contact-links .navtel{ color:var(--orange); }
.ix-cine-page .ix-areas{ margin-top:48px; }
.ix-cine-page .ix-areas h2{ font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;margin-top:6px; }
.ix-cine-page .ix-areas h4{ font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:600; }
.ix-cine-page h2.ix-areas__list{
  font-family:var(--body);font-weight:400;letter-spacing:0;line-height:1.9;
  color:var(--mist);font-size:15px;text-transform:none;max-width:820px;margin-top:14px;
}
.ix-cine-page .ix-share{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;
  padding-top:26px;border-top:1px solid var(--line);
}
.ix-cine-page .ix-share__label{ font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--mut); }
.ix-cine-page .ix-share a{
  min-width:40px;height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--mist);
  font-family:var(--sans);font-size:11px;letter-spacing:.04em;transition:.3s;
}
.ix-cine-page .ix-share a:hover{ border-color:var(--orange);color:var(--orange);transform:translateY(-2px); }

/* ============================================================================
   16. FOOTER — proto .foot scoped under .ix-cine-page AND a body.ix-cine mirror
   (the footer may render OUTSIDE the <main> wrapper as a sibling of <main>).
   ========================================================================== */
.ix-cine-page .foot{ padding:54px 40px 40px;border-top:1px solid var(--line);position:relative;z-index:2;background:rgba(8,9,10,.7); }
.ix-cine-page .footgrid{ max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px; }
.ix-cine-page .foot .navlogo{ display:flex;align-items:center;font-size:24px;margin-bottom:14px; }
.ix-cine-page .foot .navlogo .lg{ height:44px;width:auto; }
.ix-cine-page .foot p{ color:var(--mut);font-size:13px;line-height:1.7;max-width:320px; }
.ix-cine-page .foot h5{ font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);margin-bottom:14px; }
.ix-cine-page .foot ul{ list-style:none; }
.ix-cine-page .foot li{ margin:9px 0; }
.ix-cine-page .foot a{ color:var(--mist);font-size:13.5px; }
.ix-cine-page .foot a:hover{ color:var(--orange); }
.ix-cine-page .copy{
  max-width:1200px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--line);
  color:var(--mut);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* body-scoped mirror for the sibling footer + fixed back-to-top */
body.ix-cine .foot{
  padding:54px 40px 40px;border-top:1px solid #2A2D31;background:rgba(8,9,10,.7);
  font-family:'Inter',sans-serif;position:relative;z-index:2;
}
body.ix-cine .footgrid{ max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px; }
body.ix-cine .foot .navlogo{ display:flex;align-items:center;font-size:24px;margin-bottom:14px; }
body.ix-cine .foot .navlogo .lg{ height:44px;width:auto; }
body.ix-cine .foot .ix-foot-logoa,
body.ix-cine .foot .ix-foot-deco{ display:none; }
body.ix-cine .copy{
  max-width:1200px;margin:40px auto 0;padding-top:22px;border-top:1px solid #2A2D31;
  color:#8A9099;font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:'Inter',sans-serif;
}
body.ix-cine .copy a{ color:#FA7502;text-decoration:none; }
body.ix-cine .ix-legacy-label,
body.ix-cine .sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
body.ix-cine .ix-totop{
  position:fixed;right:22px;bottom:22px;z-index:78;width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(8,9,10,.8);border:1px solid #2A2D31;color:#FA7502;font-size:13px;
  font-family:'Inter',sans-serif;text-align:center;line-height:1.1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s,border-color .3s,transform .3s;
}
body.ix-cine .ix-totop.show{ opacity:1;visibility:visible; }
body.ix-cine .ix-totop:hover{ border-color:#FA7502;transform:translateY(-3px); }

/* ============================================================================
   17. REVEAL UTILITIES + responsive + reduced-motion + SEO-safe decorative
   ========================================================================== */
.ix-cine-page .reveal{ opacity:0;transform:translateY(38px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1); }
.ix-cine-page .reveal.in{ opacity:1;transform:none; }
.ix-cine-page .stagger>*{ opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1); }
.ix-cine-page .stagger.in>*{ opacity:1;transform:none; }
.ix-cine-page .stagger.in>*:nth-child(2){ transition-delay:.08s; }
.ix-cine-page .stagger.in>*:nth-child(3){ transition-delay:.16s; }
.ix-cine-page .stagger.in>*:nth-child(4){ transition-delay:.24s; }
.ix-cine-page .stagger.in>*:nth-child(5){ transition-delay:.32s; }
.ix-cine-page .rv-left{ opacity:0;transform:translateX(-44px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1); }
.ix-cine-page .rv-left.in{ opacity:1;transform:none; }
.ix-cine-page .rv-scale{ opacity:0;transform:scale(.93);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1); }
.ix-cine-page .rv-scale.in{ opacity:1;transform:none; }
.ix-cine-page .clipwipe{ clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.ix-cine-page .clipwipe.in{ clip-path:inset(0 0 0 0); }

/* ★ NEVER-INVISIBLE GUARD — if JS never strips .no-js, content stays visible ★ */
.ix-cine-page.no-js .reveal,
.ix-cine-page.no-js .stagger>*,
.ix-cine-page.no-js .rv-left,
.ix-cine-page.no-js .rv-scale{ opacity:1 !important;transform:none !important; }
.ix-cine-page.no-js .clipwipe{ clip-path:none !important; }

/* RESPONSIVE — prototype breakpoints 1080 / 980 / 820 (plus WP 900/600 helpers) */
@media (max-width:1080px){
  .ix-cine-page .grid4{ grid-template-columns:repeat(2,1fr); }
  .ix-cine-page .statrow{ grid-template-columns:repeat(2,1fr); }
  .ix-cine-page .steps{ grid-template-columns:repeat(2,1fr); }
  .ix-cine-page .stat:nth-child(2){ border-right:0; }
  .ix-cine-page .grid3{ grid-template-columns:1fr; }
  .ix-cine-page .ix-team{ grid-template-columns:1fr;gap:28px; }
  .ix-cine-page .footgrid,
  body.ix-cine .footgrid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:980px){
  .ix-cine-page .rail{ display:none; }
}
@media (max-width:900px){
  .ix-cine-page{ cursor:auto; }
  .ix-cine-page .cur,.ix-cine-page .cur2{ display:none; }
  .ix-cine-page .menu .nl,
  .ix-cine-page .navtel{ display:none; }
  .ix-cine-page .ix-mnav__toggle{ display:flex; }
  .ix-cine-page .nav{ padding:11px 18px; }
  .ix-cine-page .hd.solid .nav{ padding:9px 18px; }
  .ix-cine-page .wrap{ padding:0 20px; }
  .ix-cine-page .sec{ padding:80px 0; }
  .ix-cine-page .shead{ margin-bottom:40px; }
}
@media (max-width:820px){
  .ix-cine-page{ cursor:auto; }
  .ix-cine-page .cur,.ix-cine-page .cur2{ display:none; }
  .ix-cine-page .menu .nl,
  .ix-cine-page .navtel{ display:none; }
  .ix-cine-page .grid4,
  .ix-cine-page .statrow,
  .ix-cine-page .steps,
  .ix-cine-page .grid3,
  .ix-cine-page .ix-step__imgs{ grid-template-columns:1fr; }
  .ix-cine-page .stat{ border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px; }
  .ix-cine-page .hero{ min-height:620px;height:auto; }
  .ix-cine-page .hphoto{ filter:brightness(.36) contrast(1.08); }
  .ix-cine-page .hdark{ background:linear-gradient(180deg,rgba(7,8,9,.7),rgba(7,8,9,.92)); }
  .ix-cine-page .hudbr{ display:none; }
  .ix-cine-page .footgrid,
  body.ix-cine .footgrid{ grid-template-columns:1fr;gap:26px; }
  .ix-cine-page .grain{ animation:none; }
  .ix-cine-page .techgrid{ display:none; }
  /* gallery is now a responsive grid (cols handled by .galTrack breakpoints);
     just tighten the section padding + drop the desktop drag hint on small screens */
  .ix-cine-page .gal{ padding:80px 0; }
  .ix-cine-page .galHead{ flex-direction:column;align-items:flex-start;gap:8px; }
  .ix-cine-page .galHint{ display:none; }
}
@media (max-width:600px){
  .ix-cine-page .wrap{ padding:0 16px; }
  .ix-cine-page .sec{ padding:64px 0; }
  .ix-cine-page .joindre{ padding:80px 0; }
  .ix-cine-page .foot,
  body.ix-cine .foot{ padding:44px 18px 32px; }
  .ix-cine-page .copy,
  body.ix-cine .copy{ justify-content:flex-start;gap:8px; }
  .ix-cine-page .ix-visio__beat{ padding-left:20px; }
  .ix-cine-page .ix-team{ gap:22px; }
  .ix-cine-page .step{ padding:24px 20px; }
  body.ix-cine .ix-totop{ right:14px;bottom:14px;width:44px;height:44px; }
}

/* PREFERS-REDUCED-MOTION — commit static visible end-states */
@media (prefers-reduced-motion:reduce){
  .ix-cine-page .grain,
  .ix-cine-page .herofog,
  .ix-cine-page .scan,
  .ix-cine-page .bgL.on,
  .ix-cine-page .prog,
  .ix-cine-page .gm,
  .ix-cine-page .cue{ animation:none !important; }
  .ix-cine-page .reveal,
  .ix-cine-page .rv-left,
  .ix-cine-page .rv-scale,
  .ix-cine-page .stagger>*{ opacity:1 !important;transform:none !important;transition:none !important; }
  .ix-cine-page .clipwipe{ clip-path:none !important; }
  .ix-cine-page .stw{ color:var(--cream) !important;transition:none !important; }
  .ix-cine-page .vline{ font-variation-settings:'wght' 600 !important;letter-spacing:.02em !important; }
  .ix-cine-page .in .h1 .ul path,
  .ix-cine-page .h1 .ul path{ animation:none !important;stroke-dashoffset:0 !important; }
  .ix-cine-page .murBeatItem{ opacity:1 !important; }
  .ix-cine-page .murGlow{ opacity:1 !important; }
  .ix-cine-page .svc,
  .ix-cine-page .step,
  .ix-cine-page .ix-step__img,
  body.ix-cine .ix-totop,
  .ix-cine-page .gbtn{ transition:none !important; }
  /* gallery grid reduced-motion: cards fully visible, no reveal offset */
  .ix-cine-page .galItem{ transform:none !important;filter:none !important;opacity:1 !important; }
  .ix-cine-page .galItem .gi{ transform:none !important; }
  .ix-cine-page .hphoto{ transform:none !important; }
  .ix-cine-page .heroIn,
  .ix-cine-page .h1,
  .ix-cine-page .hsub,
  .ix-cine-page .hcta{ opacity:1 !important;transform:none !important; }
  .ix-cine-page .hdark{ opacity:1 !important; }
}

/* ============================================================================
   SEO-SAFE DECORATIVE TEXT + PARITY STRUCTURE
   Decorative labels live in data-* / CSS pseudo-content so they render for humans
   but are NOT crawlable text nodes. Structural parity widget-titles are styled to
   read like the cinematic design, not like big headings.
   ========================================================================== */
.ix-cine-page .ey[data-t]::before,
.ix-cine-page .ix-faux-h[data-t]::before{ content:attr(data-t); }
.ix-cine-page .marqrow::before,
.ix-cine-page .marqrow::after{ content:attr(data-t); }
.ix-cine-page .hero .cue::before,
.ix-cine-page .cue::before{ content:"\2193"; }
.ix-cine-page .qa button .pm::before{ content:"+"; }

/* ── COMPLETE data-t RENDER NET — every decorative label paints via ::before.
   ::before-ONLY so the .marqrow loop (which needs BOTH ::before AND ::after to
   build its seamless scroll) is untouched. data-t is never read by JS, so this
   is display-only / non-crawlable (carriers are already aria-hidden) → SEO diff
   stays 0. Functionally identical to the .ey / .ix-faux-h / .marqrow::before
   rules above (one element has one ::before, so no double-paint). Guarantees no
   decorative label can ever render as an empty box again. ──────────────────── */
.ix-cine-page [data-t]::before{ content:attr(data-t); }

/* .gbtn / .murCta ALREADY use ::before for the shine sweep (see .gbtn::before),
   so route THEIR label through ::after instead, and clear the shine's absolute
   geometry on this pseudo so the text sits as normal inline button content. */
.ix-cine-page .gbtn[data-t]::before,
.ix-cine-page .murCta[data-t]::before{ content:""; }
.ix-cine-page .gbtn[data-t]::after,
.ix-cine-page .murCta[data-t]::after{
  content:attr(data-t);position:static;width:auto;height:auto;
  background:none;transform:none;pointer-events:auto;
}

/* element-specific: make previously zero-size / flex-collapsed boxes show their
   pseudo text, inheriting each container's existing cinematic typography. */
.ix-cine-page .hbadge span[data-t]{ display:inline-block;line-height:1; }   /* hero eyebrow pill (ISSUE 3) */
.ix-cine-page .hbadge b{ flex:0 0 auto; }                                   /* glowing dot must not be squeezed */
.ix-cine-page .vline span[data-t]{ display:inline-block; }                  /* PRÉCISION/DESIGN/DISCRÉTION (ISSUE 2) */
.ix-cine-page .vline b{ display:inline-block;line-height:1;transform:translateY(-.04em); }
.ix-cine-page .galItem .cap span[data-t]{ display:block;line-height:1.2;max-width:calc(100% - 4px); } /* caption titles */
.ix-cine-page .gline[data-t]{ display:inline-block; }                       /* span-as-button label */
/* gallery is a static grid now (no horizontal-scroll affordance), so the
   "Défilez pour explorer" hint is misleading — hide it on every breakpoint. */
.ix-cine-page .galHint{ display:none; }

/* let the .stw word-reveal own the statement color: .stbig also carries .body-h
   (forces --mist), which would show the full sentence legible before the grey→
   cream scrub even begins, killing the reveal. inherit defers to .stw/.cine. */
.ix-cine-page .cine .stbig.body-h{ color:inherit; }

/* realisations grid: 23 tiles in 3 cols leave one empty trailing track. Span the
   final tile across 2 columns so the last row fills flush (exact for 23, where
   the last row has 2 tiles); reset where the grid drops to 2 / 1 columns. */
.ix-cine-page .galTrack .galItem:last-child{ grid-column:span 2; }
@media(max-width:900px){ .ix-cine-page .galTrack .galItem:last-child{ grid-column:auto; } }

.ix-cine-page .ix-faux-h{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:clamp(30px,3.8vw,52px);letter-spacing:-.02em;line-height:1.04;color:var(--cream);
}
.ix-cine-page .ix-foot-wt{ display:none; }
.ix-cine-page .ix-foot-nav li h3{
  display:inline;margin:0;font:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;
}
.ix-cine-page .ix-contact-links .ix-contact-h{
  display:inline;margin:0;font:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;
}
.ix-cine-page .ix-phone-h2[data-tel]{ cursor:pointer; }

/* ── TEAM-BIO showpiece decorative carriers (data-t painted, non-crawlable) ──
   Used by the cinematic team bio (e.g. team-vincent): a hero name + role, a
   .cine credo statement, and 3D .svc "trait" card titles. All are <div>/<span>
   nodes carrying data-t, so they style the showpiece without adding any heading,
   link or <img> to the crawl. Scoped names nothing else uses → fully additive. */
.ix-cine-page .ix-hero-name{ margin-top:18px;font-size:clamp(44px,6.6vw,90px);line-height:.96;letter-spacing:-.03em; }
.ix-cine-page .ix-hero-role{ margin-top:22px;font-family:var(--body);font-size:clamp(15px,1.5vw,18px);letter-spacing:.01em;color:var(--mist);max-width:520px; }
.ix-cine-page .cine .stbig.ix-cine-statement{ color:var(--cream);max-width:920px;margin:0 auto; }
.ix-cine-page .svc .ix-svc-h{
  font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.2;
  letter-spacing:-.01em;color:var(--cream);position:relative;z-index:1;
}
.ix-cine-page .svc .ix-svc-h+p{ margin-top:9px; }

/* ============================================================================
   ===== PER-PAGE PERSONALIZATION =====
   Bespoke, page-scoped styling returned by the five design agents (contact,
   merci, team, team-vincent, body-luxe). Appended by the CSS consolidator.
   Every rule is scoped under .ix-cine-page (and, where a page carries an extra
   wrapper class, under that). PURELY ADDITIVE — nothing above this banner was
   altered. CONFLICT RESOLUTION: the only cross-block selector collision was the
   bare `.ix-portrait` / `.ix-portrait__frame` family, defined DIFFERENTLY by
   the `team` archive (a grid "exhibit") and the `team-vincent` bio (a 4:5 cover
   portrait). Both pages load this same stylesheet, so a bare `.ix-portrait`
   would leak across pages. RESOLUTION: the team-vincent hero-portrait rules are
   qualified with `.ix-team-page` (present ONLY on team-vincent's wrapper); the
   `team` archive carries no such class, so its `.ix-portrait` rules stay bare
   and the two no longer fight. No other selectors collide across blocks.
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   PAGE: contact  — calm, conversion-focused 1-pager; one glassy "console" form
   panel on a soft photo wash, quiet coordinate cards + trust strip + areas.
   ────────────────────────────────────────────────────────────────────────── */
/* PERSO contact ───────────────────────────────────────────────────────────────
   Calm, conversion-focused 1-pager. ONE quiet composition centred on the contact
   form; the heavy showpiece / stat band / word-reveal / divider / marquee are all
   gone. Reuses the engine's tokens + effect classes (.svc 3D tilt, .ix-form skin,
   .reveal, .gline, .ix-share, custom cursor, sticky header). Everything below is
   ADDITIVE and scoped under .ix-cine-page .ix-c1 — nothing here redefines an
   engine selector. Personality: airy, glassy "console" panel on a soft photo
   wash, warm orange accent, generous whitespace, almost no scroll.
   ──────────────────────────────────────────────────────────────────────────── */

/* — full-height calm stage (centres the composition; not a scroll-jacking hero) — */
.ix-cine-page.ix-c1{ background:#070809; }
.ix-cine-page .ix-c1__sec{
  position:relative; z-index:2; min-height:100vh;
  display:flex; align-items:center;
  padding:128px 0 88px; overflow:hidden;
}

/* — quiet ambient backdrop: soft photo + veil + single warm glow — */
.ix-cine-page .ix-c1__bg{
  position:absolute; inset:-60px; z-index:0; background-size:cover; background-position:center;
  filter:grayscale(.35) brightness(.26) contrast(1.06); transform:scale(1.04);
}
.ix-cine-page .ix-c1__veil{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 40%, rgba(7,8,9,.86) 100%),
    linear-gradient(180deg, rgba(7,8,9,.78), rgba(7,8,9,.92));
}
.ix-cine-page .ix-c1__glow{
  position:absolute; left:50%; top:-6%; width:760px; height:520px;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(ellipse, rgba(250,117,2,.18), rgba(250,117,2,.04) 45%, transparent 70%);
  mix-blend-mode:screen; filter:blur(20px);
}

.ix-cine-page .ix-c1__wrap{ max-width:1140px; z-index:2; }

/* — intro: eyebrow pill + H1 + sub, tightly centred-left, generous air — */
.ix-cine-page .ix-c1__intro{ max-width:760px; margin:0 0 40px; }
.ix-cine-page .ix-c1__eye{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(250,117,2,.4); border-radius:40px; padding:7px 15px;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; color:var(--orange); background:rgba(250,117,2,.06);
}
.ix-cine-page .ix-c1__eye b{
  width:6px; height:6px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 10px var(--orange); flex:0 0 auto;
}
.ix-cine-page .ix-c1__eye span[data-t]{ display:inline-block; line-height:1; }
.ix-cine-page .ix-c1__intro h1{
  font-size:clamp(38px,5.6vw,72px); line-height:1; letter-spacing:-.03em; margin:20px 0 0;
}
.ix-cine-page .ix-c1__sub{
  margin:20px 0 0; font-family:var(--body); font-size:clamp(15px,1.4vw,18px);
  color:var(--mist); line-height:1.75; max-width:600px;
}

/* — the split: FORM (visually left, wider) | SIDE rail (visually right) —
     DOM order is side-first (contract: coordonnées h3 precede lead h4); `order`
     paints the form on the left. Flex so order works cleanly. */
.ix-cine-page .ix-c1__split{
  display:flex; align-items:stretch; gap:30px;
}
.ix-cine-page .ix-c1__form{ order:1; flex:1 1 58%; min-width:0; }
.ix-cine-page .ix-c1__side{ order:2; flex:1 1 42%; min-width:0; display:flex; flex-direction:column; gap:16px; }

/* — FORM panel: glassy "console" card, the inviting centerpiece — */
.ix-cine-page .ix-c1__form{
  background:linear-gradient(180deg, rgba(28,30,34,.72), rgba(18,19,21,.72));
  border:1px solid var(--line); border-radius:18px; padding:34px 34px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.ix-cine-page .ix-c1__form::before{
  content:""; position:absolute; left:0; top:0; right:0; height:2px;
  background:var(--grad); background-size:200% auto; opacity:.9;
}
.ix-cine-page .ix-c1__formhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:6px;
}
.ix-cine-page .ix-c1__formhead h4{
  font-size:clamp(22px,2.6vw,30px); letter-spacing:-.02em; line-height:1.1;
}
.ix-cine-page .ix-c1__formnote{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:10.5px; color:var(--orange); white-space:nowrap;
}

/* tighten the engine's .ix-form a touch for the panel; full-width inside */
.ix-cine-page .ix-c1__form .ix-form{ max-width:none; margin-top:22px; }
.ix-cine-page .ix-c1__form .ix-form input,
.ix-cine-page .ix-c1__form .ix-form textarea{
  background:rgba(255,255,255,.04); border-radius:11px;
}
.ix-cine-page .ix-c1__form .ix-form textarea{ min-height:120px; }
.ix-cine-page .ix-c1__form .ix-form__submit{
  width:100%; padding:16px 34px; margin-top:4px; font-size:14.5px;
}
.ix-cine-page .ix-c1__reassure{
  display:block; margin-top:14px; text-align:center;
  font-family:var(--body); font-size:12px; letter-spacing:.02em; color:var(--mut);
}
.ix-cine-page .ix-c1__reassure::before{ content:"\1F512\00A0"; opacity:.7; } /* lock glyph */

/* — SIDE rail: heading + two coordinate cards (reuse .svc tilt) + trust + share — */
.ix-cine-page .ix-c1__sidehead{ margin:2px 0 4px; }
.ix-cine-page .ix-c1__eye2{
  display:block; font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.24em; font-size:12px; font-weight:600; color:var(--orange);
}
.ix-cine-page .ix-c1__sidetitle{
  display:block; margin-top:8px; font-family:var(--sans); font-weight:600;
  font-size:clamp(22px,2.4vw,28px); letter-spacing:-.02em; color:var(--cream); line-height:1.05;
}

/* coordinate cards — lean on engine .svc (3D tilt + spotlight) but quieter padding */
.ix-cine-page .ix-c1__card{ padding:22px 22px; border-radius:14px; }
.ix-cine-page .ix-c1__card .ic{
  width:46px; height:46px; border-radius:11px; font-size:22px; margin-bottom:14px;
}
.ix-cine-page .ix-c1__card h3{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.16em;
  font-size:11px; font-weight:600; color:var(--mut);
}
.ix-cine-page .ix-c1__val{
  font-family:var(--sans) !important; text-transform:none !important; letter-spacing:-.01em !important;
  font-size:clamp(21px,2.2vw,26px) !important; font-weight:700 !important;
  color:var(--cream) !important; margin-top:4px; line-height:1.05;
}
.ix-cine-page .ix-c1__val--mail{
  font-size:clamp(15px,1.5vw,18px) !important; font-weight:600 !important;
  color:var(--orange) !important; word-break:break-word;
}
.ix-cine-page .ix-c1__cardnote{
  display:block; margin-top:12px; font-family:var(--sans);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange);
}
/* the email-protection <a> inside the card stays in the DOM (link parity) but is
   visually folded away — the readable email value is the h3 below it. */
.ix-cine-page .ix-c1__card .ix-c1__mail{
  display:block; padding:0; margin:6px 0 0; border:0; background:none;
  font-family:var(--body); text-transform:none; letter-spacing:0; font-size:13px;
  color:var(--mist); width:max-content;
}
.ix-cine-page .ix-c1__card .ix-c1__mail:hover{ color:var(--orange); }

/* quiet trust strip — three decorative figures, no card chrome */
.ix-cine-page .ix-c1__trust{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:16px 6px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.015);
}
.ix-cine-page .ix-c1__trust>div{ text-align:center; }
.ix-cine-page .ix-c1__trust b{
  display:block; font-family:var(--sans); font-weight:700;
  font-size:clamp(18px,2vw,22px); color:var(--orange); line-height:1;
}
.ix-cine-page .ix-c1__trust span{
  display:block; margin-top:6px; font-family:var(--sans);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mist);
}

/* share row inside the rail — compact, no top border/padding from engine .ix-share */
.ix-cine-page .ix-c1__share{
  margin-top:2px; padding-top:0; border-top:0; gap:10px;
}
.ix-cine-page .ix-c1__share .ix-share__label{ width:100%; margin-bottom:2px; }
.ix-cine-page .ix-c1__share a{ height:36px; min-width:36px; }

/* — base band: duplicate contact links (visually merged) + service areas — */
.ix-cine-page .ix-c1__base{
  margin-top:46px; padding-top:34px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1.1fr; gap:30px 48px; align-items:start;
}
.ix-cine-page .ix-c1__baselinks{ margin-top:0; gap:12px 18px; }
.ix-cine-page .ix-c1__baselinks .gline{ font-size:11px; padding:10px 16px; }
.ix-cine-page .ix-c1__baselinks .navtel{
  font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:.01em; color:var(--orange);
}
.ix-cine-page .ix-c1__baselinks .navtel::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 8px #22C55E; display:inline-block; margin-right:8px;
}
/* the duplicate email/phone parity <h4> + the empty-anchor facebook <a> are folded
   away here — the readable values already live in the side cards above. */
.ix-cine-page .ix-c1__baselinks .ix-contact-h{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.ix-cine-page .ix-c1__fb{ display:none; }

.ix-cine-page .ix-c1__areas{ margin-top:0; }
.ix-cine-page .ix-c1__areas h4{
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); font-weight:600;
}
.ix-cine-page .ix-c1__areas h2{
  font-size:clamp(22px,2.6vw,32px); letter-spacing:-.02em; margin-top:6px;
}
.ix-cine-page .ix-c1__areas h2.ix-areas__list{
  font-family:var(--body); font-weight:400; letter-spacing:0; line-height:1.85;
  color:var(--mist); font-size:14px; text-transform:none; max-width:none; margin-top:12px;
}

/* ── contact RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width:940px){
  .ix-cine-page .ix-c1__sec{ min-height:0; padding:112px 0 72px; }
  .ix-cine-page .ix-c1__split{ flex-direction:column; gap:22px; }
  /* stack: form FIRST visually (it's the goal), side rail below */
  .ix-cine-page .ix-c1__form{ order:1; flex:1 1 auto; }
  .ix-cine-page .ix-c1__side{ order:2; flex:1 1 auto; }
  .ix-cine-page .ix-c1__base{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:600px){
  .ix-cine-page .ix-c1__sec{ padding:96px 0 60px; }
  .ix-cine-page .ix-c1__intro{ margin-bottom:30px; }
  .ix-cine-page .ix-c1__form{ padding:26px 20px 24px; border-radius:14px; }
  .ix-cine-page .ix-c1__formhead{ gap:6px; }
  .ix-cine-page .ix-c1__trust{ grid-template-columns:repeat(3,1fr); padding:14px 4px; }
}
/* PERSO contact — end ─────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   PAGE: merci  — single-screen luminous thank-you MOMENT (orbit-ring + drawn
   checkmark, gradient "Merci!", two next-step CTAs) + one slim quiet info strip.
   Scoped to .ix-merci-page so nothing leaks to other cinematic pages.
   ────────────────────────────────────────────────────────────────────────── */
/* PERSO merci */
/* Single-screen "perfectly beautiful" thank-you. Calm, luminous, no-scroll
   confirmation MOMENT + one slim quiet info strip. Scoped to .ix-merci-page so
   nothing here touches any other cinematic page. Reuses engine tokens
   (--orange/--gold/--cream/--mist/--line/--ink2/3/--sans/--grad). No new JS:
   the flourish is pure CSS/SVG; reveals/badge/dl/cue/drawer all fire off
   existing engine classes. Reduced-motion end-states committed at the bottom. */

/* ---- page frame: the stage owns the first viewport; strip stays compact ---- */
.ix-cine-page.ix-merci-page{ background:#070809; }
.ix-cine-page.ix-merci-page main{ position:relative;z-index:2; }

/* ============================ THE MERCI MOMENT ============================= */
.ix-cine-page .ix-merci-stage{
  position:relative;min-height:100svh;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;background:#070809;z-index:2;
  padding:120px 0 90px;  /* clears the fixed header, room for the cue */
}
.ix-cine-page .ix-merci-bg{
  position:absolute;inset:-60px;background-size:cover;background-position:center;
  filter:grayscale(.25) brightness(.26) contrast(1.06);
  transform:scale(1.04);will-change:transform;
  animation:ixm-bgdrift 26s ease-in-out infinite alternate;
}
@keyframes ixm-bgdrift{ from{ transform:scale(1.04) translateY(0); } to{ transform:scale(1.1) translateY(-14px); } }
.ix-cine-page .ix-merci-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 42%,rgba(7,8,9,.28),rgba(7,8,9,.92) 78%),
    linear-gradient(180deg,rgba(7,8,9,.72),rgba(7,8,9,.9));
}
.ix-cine-page .ix-merci-bloom{
  position:absolute;left:50%;top:38%;width:70%;height:62%;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse,rgba(250,117,2,.30),rgba(250,117,2,.06) 45%,transparent 70%);
  filter:blur(26px);opacity:0;animation:ixm-bloom 1.5s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes ixm-bloom{ from{ opacity:0;transform:translate(-50%,-50%) scale(.7); } to{ opacity:1;transform:translate(-50%,-50%) scale(1); } }

/* corner brackets: pin to the stage, not the page */
.ix-cine-page .ix-merci-stage .hudbr.tl{ top:118px;left:40px; }
.ix-cine-page .ix-merci-stage .hudbr.br{ bottom:40px;right:40px; }

/* ---- the centered confirmation card ---- */
.ix-cine-page .ix-merci{ position:relative;z-index:3; }
.ix-cine-page .ix-merci-card{
  max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;
}
.ix-cine-page .ix-merci-card h1{
  font-size:clamp(56px,9vw,128px);line-height:.92;letter-spacing:-.04em;
  margin:30px 0 0;
  background:linear-gradient(115deg,#FFF,#F5F6F7 38%,#FC8F02 78%,#FB5900);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:ixc-sheen 8s linear infinite;
}
/* center the divider line + give it a soft glow */
.ix-cine-page .ix-merci-card .dl{
  margin:22px auto 0;height:2px;width:0;background:var(--grad);border-radius:2px;
  box-shadow:0 0 16px rgba(250,117,2,.5);
  transition:width 1s cubic-bezier(.16,1,.3,1) .2s;
}
.ix-cine-page.ix-merci-page .in .dl,
.ix-cine-page .ix-merci-stage.in .dl{ width:108px; }     /* .reveal.in is set on the stage */
.ix-cine-page.ix-merci-page.no-js .ix-merci-card .dl{ width:108px; }

.ix-cine-page .ix-merci-badge{ margin:0 auto; }
.ix-cine-page .ix-merci__sub{
  margin:22px auto 0;max-width:540px;text-align:center;
  font-size:clamp(16px,1.5vw,18px);line-height:1.75;color:var(--mist);
}

/* ---- next-step actions (breadcrumb Accueil + réalisations CTA) ---- */
.ix-cine-page .ix-merci__ctarow{
  display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:36px;
}
.ix-cine-page .ix-merci__home{ padding:14px 26px;font-size:12.5px; }
.ix-cine-page .ix-merci__cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:0;
  padding:15px 30px;border-radius:8px;
}
.ix-cine-page .ix-merci__cta::after{ content:"\2192";font-style:normal;transition:transform .3s; }
.ix-cine-page .ix-merci__cta:hover::after{ transform:translateX(4px); }
.ix-cine-page .ix-merci__hint{
  display:block;margin-top:22px;font-family:var(--sans);
  text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--mut);
}

/* ---- confirmation flourish: orbit ring + drawn checkmark ---- */
.ix-cine-page .ix-merci-orbit{
  position:relative;width:128px;height:128px;margin:0 auto 6px;
}
.ix-cine-page .ix-merci-ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(250,117,2,.28);
}
.ix-cine-page .ix-merci-ring.r1{ animation:ixm-spin 14s linear infinite; }
.ix-cine-page .ix-merci-ring.r2{
  inset:14px;border-style:dashed;border-color:rgba(252,143,2,.22);
  animation:ixm-spin 22s linear infinite reverse;
}
@keyframes ixm-spin{ to{ transform:rotate(360deg); } }
.ix-cine-page .ix-merci-dot{
  position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange);
  transform-origin:50% 67px;animation:ixm-spin 14s linear infinite;
}
.ix-cine-page .ix-merci-check{ position:absolute;inset:0;width:100%;height:100%;overflow:visible; }
.ix-cine-page .ix-merci-check__disc{
  fill:rgba(250,117,2,.10);stroke:var(--orange);stroke-width:2;
  opacity:0;transform-origin:60px 60px;transform:scale(.6);
  animation:ixm-pop .6s cubic-bezier(.16,1,.3,1) .35s forwards;
}
@keyframes ixm-pop{ to{ opacity:1;transform:scale(1); } }
.ix-cine-page .ix-merci-check__mark{
  stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 3px 12px rgba(250,117,2,.55));
  stroke-dasharray:80;stroke-dashoffset:80;
  animation:ixm-draw .55s cubic-bezier(.16,1,.3,1) .7s forwards;
}
@keyframes ixm-draw{ to{ stroke-dashoffset:0; } }

/* soften the scroll cue (there's barely anything to scroll to) */
.ix-cine-page .ix-merci-cue{ opacity:.5; }

/* ============================ QUIET INFO STRIP ============================= */
/* Demote the reused .joindre shell: no centered hero, just a slim calm band. */
.ix-cine-page .ix-merci-strip{
  text-align:left;padding:64px 0 72px;
  border-top:1px solid var(--line);background:rgba(8,9,10,.55);
}
.ix-cine-page .ix-merci-strip .ix-share{ margin-top:0;padding-top:0;border-top:0; }
.ix-cine-page .ix-merci-meta{
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line);
  display:grid;gap:10px 48px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;
}
.ix-cine-page .ix-merci-lead h4{
  font-family:var(--sans);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(18px,2vw,24px);color:var(--cream);
}
.ix-cine-page .ix-merci-meta .ix-contact-links{ margin-top:16px;gap:12px 20px; }
.ix-cine-page .ix-merci-areas{ grid-row:span 2;margin-top:0; }
.ix-cine-page .ix-merci-areas h4{ margin-bottom:2px; }
.ix-cine-page .ix-merci-areas h2{ font-size:clamp(22px,2.6vw,32px); }
.ix-cine-page .ix-merci-areas .ix-areas__list{ font-size:14px;line-height:1.8;max-width:560px; }
@media(max-width:820px){
  .ix-cine-page .ix-merci-meta{ grid-template-columns:1fr;gap:22px; }
  .ix-cine-page .ix-merci-areas{ grid-row:auto; }
}

/* footer brand wordmark (no logo img/link on this contract) */
.ix-cine-page .ix-merci-foot .ix-foot-brand{
  font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:.01em;color:var(--cream);
}
.ix-cine-page .ix-merci-foot .ix-foot-brand::before{ content:"";display:none; }

/* ---- small screens: keep it a tidy single screen ---- */
@media(max-width:600px){
  .ix-cine-page .ix-merci-stage{ padding:104px 0 72px; }
  .ix-cine-page .ix-merci-stage .hudbr{ display:none; }
  .ix-cine-page .ix-merci-orbit{ width:108px;height:108px; }
  .ix-cine-page .ix-merci-card h1{ font-size:clamp(52px,18vw,80px); }
  .ix-cine-page .ix-merci__ctarow{ flex-direction:column;width:100%; }
  .ix-cine-page .ix-merci__home,
  .ix-cine-page .ix-merci__cta{ width:100%;justify-content:center; }
}

/* ---- reduced motion: commit calm, fully-resolved end-states (no spin/draw) ---- */
@media (prefers-reduced-motion:reduce){
  .ix-cine-page .ix-merci-bg{ animation:none !important;transform:scale(1.04) !important; }
  .ix-cine-page .ix-merci-bloom{ animation:none !important;opacity:1 !important;transform:translate(-50%,-50%) scale(1) !important; }
  .ix-cine-page .ix-merci-card h1{ animation:none !important; }
  .ix-cine-page .ix-merci-card .dl{ width:108px !important;transition:none !important; }
  .ix-cine-page .ix-merci-ring,
  .ix-cine-page .ix-merci-dot{ animation:none !important; }
  .ix-cine-page .ix-merci-check__disc{ animation:none !important;opacity:1 !important;transform:scale(1) !important; }
  .ix-cine-page .ix-merci-check__mark{ animation:none !important;stroke-dashoffset:0 !important; }
}
/* PERSO merci — end ───────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   PAGE: team (archive)  — museum-grade framed PORTRAIT exhibit (mat-board frame,
   object-fit:contain so the photo shows IN FULL/never cropped, HUD brackets,
   engraved plate + caption placard) + a roster-cover hero with a vertical index.
   NOTE: `.ix-portrait*` here is BARE (team.php has no extra wrapper class). The
   team-vincent block below qualifies its own portrait rules with .ix-team-page.
   ────────────────────────────────────────────────────────────────────────── */
/* PERSO team — cinematic TEAM ARCHIVE signature (framed portrait exhibit).
   Distinct from the service pages and the Vincent-Xavier bio: a museum-grade
   framed PORTRAIT presentation. All selectors scoped under .ix-cine-page.
   CRITICAL: the portrait shows IN FULL (mat-board frame + object-fit:contain),
   never cropped. Reuses engine effects only (.reveal/.rv-scale/.clipwipe). */

/* ── Hero: roster-cover tweaks ──────────────────────────────────────────── */
.ix-cine-page .ix-team-hero .hphoto{ filter:brightness(.4) contrast(1.1) grayscale(.18); }
.ix-cine-page .ix-team-hero__sub{
  font-size:clamp(20px,2.5vw,30px);color:var(--mist);font-weight:500;
  letter-spacing:-.01em;margin-top:20px;max-width:560px;
}
/* vertical index strip down the right edge — pure decoration */
.ix-cine-page .ix-team-hero__index{
  position:absolute;right:46px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;z-index:6;display:flex;align-items:center;gap:16px;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.32em;
  font-size:11px;color:var(--steel);pointer-events:none;
}
.ix-cine-page .ix-team-hero__index i{ width:1px;height:34px;background:var(--line);display:block; }
.ix-cine-page .ix-team-hero__index span[data-t]{ display:block; }

/* ── S6 PORTRAIT EXHIBIT — the signature ───────────────────────────────── */
.ix-cine-page .ix-portrait-sec{ position:relative;z-index:2; }
.ix-cine-page .ix-portrait-sec::before{
  content:"";position:absolute;left:50%;top:54%;width:min(760px,86vw);height:min(760px,86vw);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(250,117,2,.10),transparent 62%);
  filter:blur(8px);z-index:0;
}
.ix-cine-page .ix-portrait{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,440px) 1fr;
  gap:54px;align-items:center;max-width:980px;margin:8px auto 0;
}

/* the mat-board frame — fixed 4:5 portrait window, photo shown IN FULL */
.ix-cine-page .ix-portrait__frame{
  position:relative;border-radius:18px;padding:18px;
  background:linear-gradient(180deg,rgba(28,30,34,.96),rgba(16,17,19,.98));
  border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);
}
/* thin inner orange rule (the "mat opening") */
.ix-cine-page .ix-portrait__frame::after{
  content:"";position:absolute;inset:11px;border-radius:12px;pointer-events:none;
  border:1px solid rgba(250,117,2,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset;
}
.ix-cine-page .ix-portrait__media{
  position:relative;display:block;border-radius:10px;overflow:hidden;
  aspect-ratio:4/5;width:100%;
  background:radial-gradient(ellipse 120% 80% at 50% 18%,rgba(255,255,255,.05),transparent 60%),#0c0d0f;
  cursor:pointer;
}
/* ★ THE FIX ★ — full portrait, never cropped, always entirely visible */
.ix-cine-page .ix-portrait__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block;
  filter:contrast(1.04) brightness(.99) saturate(1.02);
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.ix-cine-page .ix-portrait__media:hover img{ transform:scale(1.025);filter:contrast(1.06) brightness(1.03); }
/* diagonal sheen sweep on hover (reveal flair) */
.ix-cine-page .ix-portrait__sheen{
  position:absolute;top:-20%;left:-140%;width:60%;height:140%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,240,214,.18),transparent);
  transform:skewX(-16deg);transition:left .85s cubic-bezier(.16,1,.3,1);
}
.ix-cine-page .ix-portrait__media:hover .ix-portrait__sheen{ left:160%; }

/* HUD corner brackets on the frame */
.ix-cine-page .ix-portrait__cn{
  position:absolute;width:24px;height:24px;border:1.5px solid rgba(250,117,2,.65);z-index:3;
}
.ix-cine-page .ix-portrait__cn--tl{ top:9px;left:9px;border-right:0;border-bottom:0;border-top-left-radius:6px; }
.ix-cine-page .ix-portrait__cn--tr{ top:9px;right:9px;border-left:0;border-bottom:0;border-top-right-radius:6px; }
.ix-cine-page .ix-portrait__cn--bl{ bottom:9px;left:9px;border-right:0;border-top:0;border-bottom-left-radius:6px; }
.ix-cine-page .ix-portrait__cn--br{ bottom:9px;right:9px;border-left:0;border-top:0;border-bottom-right-radius:6px; }
/* engraved plate number, top-right of the frame */
.ix-cine-page .ix-portrait__no{
  position:absolute;top:-13px;right:24px;z-index:4;
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--orange);
  background:#0c0d0f;border:1px solid rgba(250,117,2,.32);border-radius:30px;padding:5px 13px;
}

/* the engraved caption placard */
.ix-cine-page .ix-portrait__placard{ position:relative; }
.ix-cine-page .ix-portrait__placard .ey{ display:block; }
.ix-cine-page .ix-portrait__name{
  margin-top:14px;font-size:clamp(20px,2.2vw,30px);padding:13px 26px;letter-spacing:.04em;
}
.ix-cine-page .ix-portrait__bio{
  margin-top:20px;font-size:15.5px;line-height:1.85;max-width:440px;color:var(--mist);
}
.ix-cine-page .ix-portrait__meta{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;gap:14px;
}
.ix-cine-page .ix-portrait__meta span{ display:flex;align-items:baseline;gap:14px; }
.ix-cine-page .ix-portrait__meta b{
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);min-width:78px;flex:0 0 auto;
}
.ix-cine-page .ix-portrait__meta i{
  font-style:normal;font-family:var(--body);font-size:14px;color:var(--cream);letter-spacing:.01em;
}

/* ── team responsive ────────────────────────────────────────────────────── */
@media (max-width:960px){
  .ix-cine-page .ix-portrait{ grid-template-columns:1fr;gap:34px;max-width:480px; }
  .ix-cine-page .ix-portrait__placard{ text-align:center; }
  .ix-cine-page .ix-portrait__bio{ margin-left:auto;margin-right:auto; }
  .ix-cine-page .ix-portrait__meta{ max-width:360px;margin-left:auto;margin-right:auto; }
  .ix-cine-page .ix-portrait__meta span{ justify-content:center; }
  .ix-cine-page .ix-team-hero__index{ display:none; }
}
@media (max-width:600px){
  .ix-cine-page .ix-portrait__frame{ padding:14px; }
  .ix-cine-page .ix-portrait__no{ right:16px; }
  .ix-cine-page .ix-portrait__name{ padding:12px 22px; }
}

/* ── reduced-motion: commit visible end-states (engine also handles .reveal etc) */
@media (prefers-reduced-motion:reduce){
  .ix-cine-page .ix-portrait__media img,
  .ix-cine-page .ix-portrait__sheen{ transition:none !important; }
}
/* PERSO team — end ────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   PAGE: team-vincent (bio)  — editorial "cover-story" monograph: spotlit framed
   portrait hero, reading column with drop-cap + pull-quote, grey→cream credo
   manifesto (CSS-driven). CONFLICT-RESOLVED: the hero `.ix-portrait*` family is
   qualified with `.ix-team-page` (this page's wrapper) so it does NOT collide
   with the `team` archive's bare `.ix-portrait` exhibit above.
   ────────────────────────────────────────────────────────────────────────── */
/* PERSO team-vincent
   ============================================================================
   Page-specific styling for the Vincent-Xavier bio (slug: team-vincent).
   DISTINCT PERSONALITY: an editorial "cover-story" monograph about a PERSON —
   a spotlit portrait-frame hero, an editorial reading column with drop-cap +
   pull-quote, and a personal grey→cream manifesto as the signature moment
   (NOT the .murSec service-page showpiece, which is intentionally absent).

   Reuses the engine's existing JS hooks only (.reveal/.rv-scale/.stagger
   observers toggle .in; .pl/.pm parallax; .svc 3D tilt; .vline[data-vf];
   [data-count] count-ups; [data-t]::before paint). NO new JavaScript.
   ========================================================================== */

/* ---- shared accents for this page ---------------------------------------- */
.ix-cine-page.ix-team-page{
  --ix-vx-frame:rgba(250,117,2,.55);
}

/* ============================================================================
   S2 — PORTRAIT "COVER" HERO
   ========================================================================== */
.ix-cine-page .ix-cover{ align-items:center; }
.ix-cine-page .ix-cover .ix-cover__amb{
  /* ambient backdrop only: dim + desaturate + blur so the framed portrait pops */
  filter:brightness(.26) contrast(1.04) grayscale(.4) blur(3px);
  transform:scale(1.08);opacity:.9;
}
.ix-cine-page .ix-cover .hdark{
  background:linear-gradient(108deg,rgba(7,8,9,.94) 6%,rgba(7,8,9,.74) 42%,rgba(7,8,9,.5) 66%,rgba(7,8,9,.9));
}

.ix-cine-page .ix-cover__wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);
  align-items:center;width:100%;max-width:1200px;
}

/* left column (text) — widen past the base .heroIn 760px cap */
.ix-cine-page .ix-cover__txt{ max-width:none;z-index:6; }
.ix-cine-page .ix-cover__kick{
  margin-top:18px;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.32em;font-size:12px;color:var(--mist);opacity:.75;
}
.ix-cine-page .ix-cover__name{
  margin-top:10px;
  font-size:clamp(46px,7.4vw,104px);line-height:.92;letter-spacing:-.035em;
  background:linear-gradient(176deg,#FFFFFF 18%,#E7E9EC 52%,#AfB4BA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.04);
}
.ix-cine-page .ix-cover__txt .dl{ width:0;height:2px;background:var(--grad);margin:24px 0 0; }
.ix-cine-page .ix-cover.in .ix-cover__txt .dl,
.ix-cine-page .ix-cover .ix-cover__txt .dl{ width:96px; }
.ix-cine-page .ix-cover__role{
  margin-top:22px;max-width:460px;font-size:clamp(15px,1.5vw,18px);line-height:1.7;color:var(--mist);
}

/* meta strip — three labelled facts, magazine masthead style */
.ix-cine-page .ix-cover__meta{
  display:flex;flex-wrap:wrap;gap:0;margin-top:34px;
  border-top:1px solid var(--line);padding-top:22px;
}
.ix-cine-page .ix-cover__metaItem{
  display:flex;flex-direction:column;gap:6px;padding-right:26px;margin-right:26px;
  border-right:1px solid var(--line);
}
.ix-cine-page .ix-cover__metaItem:last-child{ border-right:0;margin-right:0;padding-right:0; }
.ix-cine-page .ix-cover__metaItem b{
  font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);
}
.ix-cine-page .ix-cover__metaItem i{
  font-style:normal;font-family:var(--sans);font-weight:500;font-size:14px;
  letter-spacing:.01em;color:var(--cream);
}

/* right column — the spotlit FRAMED PORTRAIT (decorative bg, no crawl).
   ↓ CONSOLIDATOR: `.ix-portrait*` qualified with .ix-team-page to avoid the
   bare-`.ix-portrait` collision with the team archive exhibit above. ↓ */
.ix-cine-page.ix-team-page .ix-portrait{
  position:relative;z-index:6;justify-self:end;width:100%;max-width:430px;
  aspect-ratio:4/5;will-change:transform;
}
.ix-cine-page.ix-team-page .ix-portrait__glow{
  position:absolute;inset:-14% -10% -10% -10%;z-index:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(250,117,2,.34),rgba(250,117,2,.06) 52%,transparent 72%);
  filter:blur(26px);mix-blend-mode:screen;
  animation:ix-vx-breathe 7s ease-in-out infinite;
}
@keyframes ix-vx-breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.ix-cine-page.ix-team-page .ix-portrait__frame{
  position:relative;z-index:1;width:100%;height:100%;border-radius:18px;overflow:hidden;
  border:1px solid var(--ix-vx-frame);
  box-shadow:0 40px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.03) inset,
             0 0 60px rgba(250,117,2,.14);
  background:var(--ink2);
}
.ix-cine-page.ix-team-page .ix-portrait__photo{
  position:absolute;inset:0;background-size:cover;background-position:center 18%;
  filter:contrast(1.07) brightness(.94) saturate(1.02);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.ix-cine-page.ix-team-page .ix-portrait:hover .ix-portrait__photo{ transform:scale(1.05); }
/* a soft top→bottom scrim + a faint warm vignette so the plate reads */
.ix-cine-page.ix-team-page .ix-portrait__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,9,0) 46%,rgba(7,8,9,.86)),
            radial-gradient(120% 80% at 50% 8%,rgba(250,117,2,.10),transparent 60%);
}
/* a slow light-sweep across the glass for a "cinematic" sheen */
.ix-cine-page.ix-team-page .ix-portrait__frame::before{
  content:"";position:absolute;top:-30%;left:-60%;width:50%;height:160%;z-index:2;
  background:linear-gradient(105deg,transparent,rgba(255,240,214,.16),transparent);
  transform:skewX(-16deg);animation:ix-vx-sweep 6.5s ease-in-out infinite;pointer-events:none;
}
@keyframes ix-vx-sweep{0%,62%{left:-60%}100%{left:150%}}
.ix-cine-page.ix-team-page .ix-portrait__corner{
  position:absolute;width:22px;height:22px;border:1.5px solid rgba(250,117,2,.7);z-index:3;
}
.ix-cine-page.ix-team-page .ix-portrait__corner.tl{ top:12px;left:12px;border-right:0;border-bottom:0; }
.ix-cine-page.ix-team-page .ix-portrait__corner.tr{ top:12px;right:12px;border-left:0;border-bottom:0; }
.ix-cine-page.ix-team-page .ix-portrait__corner.bl{ bottom:12px;left:12px;border-right:0;border-top:0; }
.ix-cine-page.ix-team-page .ix-portrait__corner.br{ bottom:12px;right:12px;border-left:0;border-top:0; }
.ix-cine-page.ix-team-page .ix-portrait__plate{
  position:absolute;left:22px;bottom:20px;right:22px;z-index:3;
  display:flex;flex-direction:column;gap:3px;
}
.ix-cine-page.ix-team-page .ix-portrait__plate b{
  font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--cream);
}
.ix-cine-page.ix-team-page .ix-portrait__plate i{
  font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);
}

/* ============================================================================
   S4 — BIO STORY (editorial reading column)
   ========================================================================== */
.ix-cine-page .ix-bio__wrap{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(24px,5vw,72px);
  align-items:start;
}
.ix-cine-page .ix-bio__rail{
  position:sticky;top:120px;display:flex;flex-direction:column;gap:14px;
}
.ix-cine-page .ix-bio__rail .ey{ display:block; }
.ix-cine-page .ix-bio__chapter{
  font-family:var(--sans);font-weight:700;font-size:64px;line-height:1;
  letter-spacing:-.03em;color:var(--cream);opacity:.16;
}
.ix-cine-page .ix-bio__rule{ width:40px;height:2px;background:var(--grad); }
.ix-cine-page .ix-bio__sig{
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--orange);opacity:.8;
}

.ix-cine-page .ix-bio__main{ max-width:780px; }
.ix-cine-page .ix-bio .shead{ margin-bottom:30px;max-width:none; }
.ix-cine-page .ix-bio .shead .ix-faux-h{ font-size:clamp(30px,4.4vw,58px); }
.ix-cine-page .ix-bio .shead .dl{ width:0;height:2px;background:var(--grad);margin:18px 0 0; }
.ix-cine-page .ix-bio .shead.in .dl,
.ix-cine-page .ix-bio .shead .dl{ width:74px; }

/* signature plate — the one REAL crawlable <img>, framed; floated so prose wraps */
.ix-cine-page .ix-bio__plate{
  position:relative;float:right;width:min(40%,300px);margin:6px 0 22px 30px;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink2);box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.ix-cine-page .ix-bio__plate a{ display:block;line-height:0; }
.ix-cine-page .ix-bio__plate img{
  display:block;width:100%;height:auto;
  filter:contrast(1.05) brightness(.96) saturate(1.02);
  transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s;
}
.ix-cine-page .ix-bio__plate:hover img{ transform:scale(1.05);filter:contrast(1.08) brightness(1); }
.ix-cine-page .ix-bio__plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(7,8,9,.8));
}
.ix-cine-page .ix-bio__platecap{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  display:flex;flex-direction:column;gap:2px;
}
.ix-cine-page .ix-bio__platecap b{
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--cream);
}
.ix-cine-page .ix-bio__platecap i{
  font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);
}

/* prose — editorial measure, generous leading, larger than .mut default */
.ix-cine-page .ix-bio__story p.mut{
  font-size:clamp(16px,1.25vw,18px);line-height:1.95;color:#C6CCD3;
  margin:0 0 26px;max-width:none;
}
.ix-cine-page .ix-bio__story p.mut:last-child{ margin-bottom:0; }
.ix-cine-page .ix-bio__story .ix-emoji{
  display:inline-block;width:18px;height:18px;vertical-align:-3px;margin:0 1px;
}
/* drop-cap on the lead paragraph */
.ix-cine-page .ix-bio__lead::first-letter{
  float:left;font-family:var(--sans);font-weight:700;font-size:4.4em;line-height:.78;
  padding:6px 14px 0 0;margin-top:4px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* pull-quote — breaks the column, decorative data-t */
.ix-cine-page .ix-bio__pull{
  clear:both;position:relative;margin:14px 0 30px;padding:6px 0 6px 28px;
  border-left:3px solid var(--orange);
  font-family:var(--sans);font-weight:500;font-size:clamp(20px,2.4vw,30px);
  line-height:1.32;letter-spacing:-.01em;color:var(--cream);max-width:640px;
}

/* ============================================================================
   S6 — SIGNATURE MOMENT: grey→cream MANIFESTO (CSS-driven, no data-split)
   ========================================================================== */
.ix-cine-page .ix-credo .cinewrap{ max-width:1040px;padding:0 40px; }
.ix-cine-page .ix-credo .ey{ display:block;margin-bottom:20px;color:var(--orange); }
.ix-cine-page .ix-credo .ix-cine-statement{
  position:relative;max-width:960px;margin:0 auto;
  font-size:clamp(26px,4.1vw,54px);line-height:1.2;letter-spacing:-.015em;
}
/* base (dim) text */
.ix-cine-page .ix-credo .ix-cine-statement::before{
  color:rgba(245,246,247,.20);
  -webkit-background-clip:initial;background-clip:initial;
}
/* a brighter overlay of the SAME text, clipped in by a light-pass keyframe so
   the words appear to "light up" left→right once the section is reached */
.ix-cine-page .ix-credo .ix-cine-statement::after{
  content:attr(data-t);position:absolute;inset:0;color:var(--cream);
  -webkit-mask:linear-gradient(95deg,#000 0%,#000 var(--ix-rev,0%),transparent calc(var(--ix-rev,0%) + 9%));
          mask:linear-gradient(95deg,#000 0%,#000 var(--ix-rev,0%),transparent calc(var(--ix-rev,0%) + 9%));
  --ix-rev:0%;
}
/* drive --ix-rev with a scroll-linked animation where supported (no JS); else
   the section's own on-screen time runs the keyframe once. */
@supports (animation-timeline: view()){
  .ix-cine-page .ix-credo .ix-cine-statement::after{
    animation:ix-vx-reveal linear both;
    animation-timeline:view();
    animation-range:entry 18% cover 52%;
  }
}
@supports not (animation-timeline: view()){
  .ix-cine-page .ix-credo .ix-cine-statement::after{
    animation:ix-vx-reveal 1.6s cubic-bezier(.16,1,.3,1) .25s both;
  }
}
@keyframes ix-vx-reveal{ from{ --ix-rev:0%; } to{ --ix-rev:108%; } }
/* register the custom prop so it can animate as a percentage */
@property --ix-rev{ syntax:"<percentage>"; inherits:false; initial-value:0%; }

.ix-cine-page .ix-credo .cineline{ height:2px;width:0;background:var(--grad);margin:30px auto 0; }
.ix-cine-page .ix-credo .ix-credo__sign{
  margin-top:24px;font-family:var(--sans);font-weight:500;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
}

/* ============================================================================
   S7 — TRAIT CARDS (numbered)
   ========================================================================== */
.ix-cine-page .ix-trait{ padding-top:34px; }
.ix-cine-page .ix-trait__no{
  position:absolute;top:16px;right:20px;z-index:1;
  font-family:var(--sans);font-weight:700;font-size:42px;line-height:1;
  letter-spacing:-.03em;color:var(--cream);opacity:.1;
}
.ix-cine-page .ix-trait .ic{ position:relative;z-index:1; }
.ix-cine-page .ix-trait .ix-svc-h{ margin-top:2px; }
.ix-cine-page .ix-trait p{
  margin-top:10px;font-size:14px;line-height:1.75;color:var(--mist);position:relative;z-index:1;
}

/* ============================================================================
   S8 — NUMBERS BAND label refinement
   ========================================================================== */
.ix-cine-page .ix-numbers .stat .lab{ font-size:11px;letter-spacing:.14em; }

/* ============================================================================
   S13 — REFINED INVITE CTA
   ========================================================================== */
.ix-cine-page .ix-invite__deco{
  font-family:var(--sans);font-weight:600;font-size:clamp(28px,4vw,52px);
  letter-spacing:-.025em;color:var(--cream);margin-top:14px;max-width:620px;line-height:1.04;
}
.ix-cine-page .ix-invite .ix-lead h4{ margin-top:26px; }

/* ============================================================================
   team-vincent RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .ix-cine-page .ix-cover__wrap{ grid-template-columns:1fr;gap:34px; }
  .ix-cine-page.ix-team-page .ix-portrait{ justify-self:start;max-width:340px;order:-1; }
  .ix-cine-page .ix-bio__wrap{ grid-template-columns:1fr;gap:18px; }
  .ix-cine-page .ix-bio__rail{ position:static;flex-direction:row;align-items:center;gap:16px; }
  .ix-cine-page .ix-bio__chapter{ font-size:40px; }
  .ix-cine-page .ix-bio__rule{ flex:0 0 40px; }
}
@media (max-width:820px){
  .ix-cine-page .ix-cover{ height:auto;min-height:0;padding:120px 0 60px; }
  .ix-cine-page .ix-cover .ix-cover__amb{ filter:brightness(.22) contrast(1.04) grayscale(.5) blur(2px); }
  .ix-cine-page .ix-cover__meta{ gap:14px 0; }
  .ix-cine-page .ix-bio__plate{ float:none;width:100%;max-width:340px;margin:0 0 22px; }
  .ix-cine-page .ix-bio__lead::first-letter{ font-size:3.6em; }
}
@media (max-width:600px){
  .ix-cine-page .ix-cover__metaItem{
    border-right:0;border-bottom:1px solid var(--line);margin:0 0 12px;padding:0 0 12px;width:100%;
  }
  .ix-cine-page .ix-cover__metaItem:last-child{ border-bottom:0;margin-bottom:0;padding-bottom:0; }
  .ix-cine-page.ix-team-page .ix-portrait__plate b{ font-size:17px; }
}

/* ---- reduced motion: commit calm static end-states ----------------------- */
@media (prefers-reduced-motion:reduce){
  .ix-cine-page.ix-team-page .ix-portrait__glow,
  .ix-cine-page.ix-team-page .ix-portrait__frame::before{ animation:none !important; }
  .ix-cine-page .ix-credo .ix-cine-statement::after{ animation:none !important;--ix-rev:108%; }
}
/* PERSO team-vincent — end ────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   PAGE-AGNOSTIC: body-luxe  — luxurious editorial typography for DENSE LOWER-PAGE
   body copy only (.ix-prose .body-h, .faq .ans .body-h, .ix-areas__list). Roomy
   measure, lighter cream type, gold drop-cap, hairline paragraph rules. Out-
   specifies the engine's generic .body-h WITHOUT !important; never reaches
   .svc/.cine/.hero/.ix-visio/.step .body-h variants.
   ────────────────────────────────────────────────────────────────────────── */
/* PERSO body-luxe */

/* — comfortable reading MEASURE + elegant type + refined cream/muted color — */
.ix-cine-page .ix-prose .body-h,
.ix-cine-page .faq .ans .body-h{
  max-width:34em;                 /* ~64–68ch luxe measure (overrides 680px) */
  margin-left:auto;margin-right:auto;
  font-family:var(--body);
  font-size:clamp(17px,1.32vw,19px);
  font-weight:340;                /* lighter, airier ink than the default 400 */
  line-height:1.78;               /* generous editorial leading */
  letter-spacing:.002em;
  color:#D7DBDF;                  /* warm cream-muted — brighter than --mist, not stark */
  text-wrap:pretty;               /* avoid orphans/ragged ends where supported */
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  hanging-punctuation:first last;
}

/* — beautiful paragraph rhythm with a hairline editorial rule between blocks — */
.ix-cine-page .ix-prose .body-h{
  position:relative;
  margin-top:0;
  padding-top:2.1em;
}
.ix-cine-page .ix-prose .body-h + .body-h{
  margin-top:0;
}
/* a centred gold hairline separates each successive paragraph (not before the 1st) */
.ix-cine-page .ix-prose .body-h + .body-h::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:54px;height:1px;
  background:linear-gradient(90deg,var(--hot),var(--gold));
  opacity:.5;
}

/* — tasteful EDITORIAL drop-cap on the opening Conclusion paragraph only — */
.ix-cine-page .ix-prose .body-h:first-of-type{
  padding-top:0;                  /* opener leads the column, no rule above it */
}
.ix-cine-page .ix-prose .body-h:first-of-type::first-letter{
  float:left;
  font-family:var(--sans);
  font-weight:600;
  font-size:3.4em;
  line-height:.82;
  margin:.02em .14em 0 0;
  color:var(--gold);
  -webkit-text-fill-color:var(--gold);
}

/* — FAQ answers: same luxe ink, left-aligned to sit under the question — */
.ix-cine-page .faq .ans .body-h{
  margin-left:0;margin-right:0;
  max-width:38em;
  padding:4px 0 26px;             /* keeps the accordion's open-state breathing room */
}

/* — the run-on “Lieux déservies” list: turn the comma-wall into a graceful,
     well-spaced editorial flow (still one crawlable <h2>, untouched markup) — */
.ix-cine-page h2.ix-areas__list,
.ix-cine-page .ix-areas .ix-areas__list{
  max-width:46em;
  font-size:clamp(15px,1.15vw,17px);
  font-weight:340;
  line-height:2;                  /* airy run-on so place-names don’t clot */
  letter-spacing:.004em;
  color:#C9CDD2;
  word-spacing:.06em;
  text-wrap:pretty;
}

/* — graceful degradation on phones: pull the measure in, soften the drop-cap — */
@media (max-width:600px){
  .ix-cine-page .ix-prose .body-h,
  .ix-cine-page .faq .ans .body-h{ max-width:100%;font-size:16.5px;line-height:1.72; }
  .ix-cine-page .ix-prose .body-h{ padding-top:1.8em; }
  .ix-cine-page .ix-prose .body-h:first-of-type::first-letter{ font-size:3em;margin-right:.12em; }
}
/* PERSO body-luxe — end ───────────────────────────────────────────────────── */

/* ===== /PER-PAGE PERSONALIZATION ===== */


/* ===== HOME SHOWPIECE LAYER (merged from cinematic-home.css) ===== */
/* ============================================================================
   Install Xpert — HOME SHOWPIECE LAYER  (cinematic-home.css)

   Loaded ONLY on the cinematic front page, AFTER cinematic.css. Turns the home
   into one "live installation": a precision-instrument experience. Every rule is
   scoped under `body.home` so the inner cinematic pages are NEVER affected.

   Companion to cinematic-home.js (which injects #ixh-light, .ixh-hud and the
   per-scene .ixh-fx — all decorative / aria-hidden, zero crawlable content).

   Sections:
     0  reactive tokens
     1  deep architectural atmosphere (page base + volumetric light)
     2  the precision telemetry HUD
     3  scene-mount choreography (blueprint frame + screen-wake)
     4  section heads as engineered labels (eyebrow · rule · index)
     5  hero elevation
     6  cards — screen sheen + depth
     7  texture & micro-polish
     8  responsive + reduced-motion + print
   ========================================================================== */

/* ============================================================= 0. TOKENS === */
body.home{
  --ixh-ly:0;            /* scroll 0..1  (set by JS) */
  --ixh-mx:0.5;          /* cursor x 0..1 */
  --ixh-my:0.35;         /* cursor y 0..1 */
  --ixh-vel:0;           /* scroll velocity -1..1 */
  --ixh-orange:#FA7502;
  --ixh-gold:#FC8F02;
  --ixh-cream:#F5F6F7;
  --ixh-ink:#070809;
  --ixh-line:rgba(245,246,247,.10);
  --ixh-line-2:rgba(245,246,247,.05);
  --ixh-amber:rgba(250,117,2,.85);
}

/* ============================================ 1. ATMOSPHERE + VOLUMETRIC LIGHT */
/* A deeper, dimensional base than the flat ink — a soft architectural floor glow
   plus a faint top-down key. Scoped, so inner pages keep their flat ink. */
body.home .ix-cine-page{
  background:
    radial-gradient(120% 80% at 50% -10%, #0d0f12 0%, #070809 46%, #050506 100%),
    #070809;
}

/* The travelling key-light + cursor glow. Inserted as the first child of
   .ix-cine-page by the JS → paints over the page base, BEHIND the content. */
/* The dynamic SPACETIME FIELD canvas — painted by buildField(): a living lattice
   that bends toward the cursor like mass curving spacetime, with photons spiralling
   into the singularity + gravitational ripples. Fixed, behind content, additive. */
body.home #ixh-field{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* #ixh-light is now only a FAINT ambient warmth — the field carries the real light. */
body.home #ixh-light{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at calc(var(--ixh-mx)*100%) calc(var(--ixh-my)*100%),
      rgba(250,117,2,.045), rgba(250,117,2,0) 62%),
    radial-gradient(66vmax 52vmax at calc(58% - var(--ixh-vel)*5%) calc(var(--ixh-ly)*120% - 10%),
      rgba(252,143,2,.06), rgba(250,89,0,.02) 42%, rgba(250,117,2,0) 68%);
  transition:background-position .3s linear;
  will-change:background;
}
/* a fixed vanishing-point perspective floor — faint, only near the bottom, reads
   as the room the installation lives in. */
body.home .ix-cine-page::after{
  content:""; position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:-1;
  pointer-events:none; opacity:.5;
  background:
    linear-gradient(to top, rgba(250,117,2,.04), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 7.5%, var(--ixh-line-2) 7.5% calc(7.5% + 1px));
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 92%);
          mask-image:linear-gradient(to top, #000 0%, transparent 92%);
  transform:perspective(60vh) rotateX(72deg); transform-origin:bottom center;
}

/* ===================================================== 2. PRECISION HUD ===== */
body.home .ixh-hud{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  font-family:'Space Grotesk',system-ui,sans-serif;
  opacity:0; transition:opacity .8s ease .25s;
}
body.home.ixh-on .ixh-hud{ opacity:1; }

/* corner brackets — thin orange L's pinned to the viewport */
body.home .ixh-cnr{
  position:absolute; width:18px; height:18px;
  border:1px solid var(--ixh-amber); opacity:.55;
}
body.home .ixh-cnr.tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
body.home .ixh-cnr.tr{ top:16px; right:16px; border-left:0;  border-bottom:0; }
body.home .ixh-cnr.bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
body.home .ixh-cnr.br{ bottom:16px; right:16px; border-left:0; border-top:0; }

/* vertical "laser level" rail on the right edge */
body.home .ixh-rail{
  position:absolute; top:18%; bottom:18%; right:22px; width:1px;
  background:var(--ixh-line);
}
body.home .ixh-rail__fill{
  position:absolute; left:0; top:0; width:1px; height:0;
  background:linear-gradient(to bottom, transparent, var(--ixh-amber));
}
body.home .ixh-rail__node{
  position:absolute; left:50%; top:0; width:7px; height:7px; margin:-3px 0 0 -3px;
  border:1px solid var(--ixh-gold); background:rgba(252,143,2,.18);
  box-shadow:0 0 10px rgba(252,143,2,.6); transform:rotate(45deg);
}

/* the telemetry readout — bottom-left */
body.home .ixh-read{
  position:absolute; left:24px; bottom:22px;
  color:var(--ixh-cream); text-transform:uppercase;
}
body.home .ixh-read__row{ display:flex; align-items:center; gap:7px; line-height:1; }
body.home .ixh-read__top{ font-size:13px; letter-spacing:.06em; margin-bottom:7px; }
body.home .ixh-idx{ font-size:30px; font-weight:600; color:var(--ixh-cream); letter-spacing:0; }
body.home .ixh-sep,
body.home .ixh-tot{ font-size:13px; color:var(--ixh-steel,#6B7177); font-weight:500; }
body.home .ixh-lab{
  font-style:normal; margin-left:8px; padding-left:10px; font-size:11px; letter-spacing:.22em;
  color:var(--ixh-gold); border-left:1px solid var(--ixh-line); align-self:stretch;
  display:flex; align-items:center;
}
body.home .ixh-read__sub{
  font-size:10.5px; letter-spacing:.14em; color:rgba(176,186,196,.62); gap:6px;
}
body.home .ixh-read__sub .ixh-k{ color:var(--ixh-gold); }
body.home .ixh-read__sub .ixh-d{ color:rgba(245,246,247,.25); }
body.home .ixh-y,
body.home .ixh-lvl{ color:var(--ixh-cream); font-variant-numeric:tabular-nums; }
/* the install progress hairline under the readout */
body.home .ixh-bar{
  margin-top:9px; width:168px; height:1px; background:var(--ixh-line); position:relative;
}
body.home .ixh-bar > i{
  position:absolute; left:0; top:0; height:1px; width:0%;
  background:linear-gradient(to right, var(--ixh-hot,#FB5900), var(--ixh-gold)); box-shadow:0 0 8px rgba(252,143,2,.5);
}

/* ===================================================== 3. SCENE-MOUNT ======= */
/* Each section "installs" on enter: a hairline blueprint frame draws + a one-shot
   screen-wake sheen sweeps down. The FX node is injected by JS as the section's
   first child, so it never collides with existing section pseudo-elements. */
body.home .ixh-scene{ position:relative; }
body.home .ixh-scene > .ixh-fx{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
/* keep the real content above the FX */
body.home .ixh-scene > .wrap,
body.home .ixh-scene > .cinewrap{ position:relative; z-index:1; }

/* blueprint frame — top + bottom hairlines that draw from the left on mount */
body.home .ixh-fx__frame{
  position:absolute; left:0; right:0; top:0; bottom:0; display:block;
}
body.home .ixh-fx__frame::before,
body.home .ixh-fx__frame::after{
  content:""; position:absolute; left:max(24px,4vw); right:max(24px,4vw); height:1px;
  background:linear-gradient(to right, var(--ixh-amber), rgba(250,117,2,0));
  transform:scaleX(0); transform-origin:left center; opacity:0;
  transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
body.home .ixh-fx__frame::before{ top:0; }
body.home .ixh-fx__frame::after{ bottom:0; }
body.home .ixh-scene.ixh-mount > .ixh-fx .ixh-fx__frame::before,
body.home .ixh-scene.ixh-mount > .ixh-fx .ixh-fx__frame::after{
  transform:scaleX(1); opacity:.5;
}

/* (the per-section screen-wake sweep was removed — too repetitive across every
   section; the blueprint frame hairlines below are the only mount cue now.) */

/* ===================================== 4. SECTION HEADS AS ENGINEERED LABELS */
/* numbered, technical section heads — give the whole page a precision-document
   rhythm. The .ey is decorative (data-t via base CSS); we restyle its box only. */
body.home .ix-cine-page main{ counter-reset:ixhsec; }
body.home .ix-cine-page main > section{ counter-increment:ixhsec; }

body.home .sec .shead,
body.home .cine .ix-cine-head,
body.home .ix-guide .shead{ position:relative; }

/* a quiet engineered index in the corner of each titled section */
body.home .sec .shead::before{
  content:"N° " counter(ixhsec, decimal-leading-zero);
  position:absolute; top:-2px; right:0;
  font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.2em;
  color:rgba(176,186,196,.34); text-transform:uppercase; pointer-events:none;
}

/* eyebrow → technical tag with a leading tick + tracking */
body.home .shead .ey{
  position:relative; padding-left:20px;
  color:var(--ixh-gold); letter-spacing:.32em; font-weight:600; font-size:12px;
}
body.home .shead .ey::after{
  content:""; position:absolute; left:0; top:50%; width:12px; height:1px;
  background:var(--ixh-gold); box-shadow:0 0 8px rgba(252,143,2,.7);
}

/* the divider line under headings → a measurement rule with end-ticks (GSAP owns
   its width; we only enrich its look). */
body.home .shead .dl{
  height:2px; position:relative;
  background:linear-gradient(to right, var(--ixh-hot,#FB5900), var(--ixh-gold));
  box-shadow:0 0 12px rgba(252,143,2,.4);
}
body.home .shead .dl::after{
  content:""; position:absolute; right:-1px; top:-3px; width:1px; height:8px; background:var(--ixh-gold);
}

/* slightly grander section headings on home for cinematic scale */
body.home .sec > .wrap > .shead h2,
body.home .cine .ix-cine-head h2{
  font-size:clamp(30px, 4.6vw, 62px); line-height:1.02; letter-spacing:-.02em;
}
body.home .ix-intro h1{
  font-size:clamp(38px, 7vw, 104px); line-height:.98; letter-spacing:-.03em;
}

/* ============================================================= 5. HERO ====== */
/* deepen + sharpen the hero so it opens like a film. The base hero already has
   .hphoto/.hdark/.scan/.hudbr; we add cinematic vignette + a top scan veil. */
body.home .hero{ isolation:isolate; }
body.home .hero .hdark{
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(5,5,6,.55) 78%, rgba(5,5,6,.9) 100%),
    linear-gradient(to bottom, rgba(7,8,9,.35), rgba(7,8,9,.2) 40%, rgba(7,8,9,.85));
}
body.home .hero::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay; opacity:.6;
}
/* the hero HUD brackets glow a touch warmer on home */
body.home .hero .hudbr{ border-color:var(--ixh-amber); opacity:.6; }

/* ===================================================== 6. CARDS — SCREEN SHEEN */
/* the engine already tilts .svc (--rx/--ry/--mxp/--myp). We add a moving specular
   "screen sheen" that tracks the cursor + a deeper resting elevation, so the cards
   read like mounted glass panels. */
body.home .svc{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 40%), rgba(20,22,26,.5);
  border:1px solid var(--ixh-line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  transition:border-color .4s ease, box-shadow .4s ease, transform .2s ease;
}
body.home .svc::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(40% 60% at var(--mxp,50%) var(--myp,30%),
    rgba(252,143,2,.16), rgba(252,143,2,0) 70%);
  transition:opacity .4s ease;
}
body.home .svc:hover{
  border-color:rgba(250,117,2,.4);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(250,117,2,.15);
}
body.home .svc:hover::before{ opacity:1; }
/* a top edge "screen wake" line on hover */
body.home .svc::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2;
  background:linear-gradient(to right, transparent, var(--ixh-gold), transparent);
  opacity:0; transform:scaleX(.4); transition:opacity .4s ease, transform .5s ease;
}
body.home .svc:hover::after{ opacity:.8; transform:scaleX(1); }
/* the decorative service icon (data-ic) gets a precise framed look */
body.home .svc .ic{
  color:var(--ixh-gold); text-shadow:0 0 16px rgba(252,143,2,.4);
}

/* the advantage / visio beat numbers read as engineered indices */
body.home .ix-visio__n,
body.home .ix-guide__n{
  color:var(--ixh-gold); text-shadow:0 0 14px rgba(252,143,2,.35);
}

/* stat band figures — bolder, with a warm glow */
body.home .parax .num{ text-shadow:0 0 26px rgba(252,143,2,.28); }

/* ===================================================== 7. TEXTURE & POLISH == */
/* the marquee keyword band → a measured ticker with edge fades + tick glyphs that
   glow (the band is decorative data-t already). */
body.home .marq{
  border-top:1px solid var(--ixh-line); border-bottom:1px solid var(--ixh-line);
  background:linear-gradient(to bottom, rgba(250,117,2,.03), transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* the variable-font divider — center it in a measured frame */
body.home .vdivider .vline{ color:var(--ixh-cream); }
body.home .vdivider .vline b{ color:var(--ixh-gold); }

/* FAQ rows → mounted panels with an orange active edge */
body.home .faq .qa{
  border:1px solid var(--ixh-line); border-radius:2px;
  background:rgba(255,255,255,.012); transition:border-color .35s ease, background .35s ease;
}
body.home .faq .qa + .qa{ margin-top:10px; }
body.home .faq .qa.open{
  border-color:rgba(250,117,2,.35); background:rgba(250,117,2,.04);
}
body.home .faq .qa .pm{ color:var(--ixh-gold); }

/* conclusion — a framed "signature" closer */
body.home .ix-conclusion{ position:relative; }
body.home .ix-conclusion .ix-conclusion__copy{
  border-left:1px solid var(--ixh-line); padding-left:clamp(16px,3vw,40px);
}

/* the big join/contact block → a lit "control panel" feel */
body.home .joindre{ position:relative; }
body.home .joindre .ix-lead__form{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), rgba(16,18,22,.5);
  border:1px solid var(--ixh-line); border-radius:3px; padding:clamp(22px,3.4vw,44px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}

/* custom cursor (engine-owned .cur/.cur2) → a precision crosshair on home */
body.home.ix-cursor-on .cur{
  mix-blend-mode:normal; border-color:var(--ixh-amber);
}
body.home.ix-cursor-on .cur::before,
body.home.ix-cursor-on .cur::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ixh-amber); opacity:.7;
}
body.home.ix-cursor-on .cur::before{ width:1px; height:9px; transform:translate(-50%,-50%); }
body.home.ix-cursor-on .cur::after{ width:9px; height:1px; transform:translate(-50%,-50%); }

/* the sticky header → a precision instrument bar with a hairline + glow progress */
body.home .hd.solid{
  background:rgba(7,8,9,.72); backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--ixh-line);
}
body.home .hd .prog{ box-shadow:0 0 10px rgba(252,143,2,.6); }

/* ===================================================== 8. RESPONSIVE / A11Y == */
/* tablet — pull the rail/readout in */
@media (max-width:1100px){
  body.home .ixh-rail{ right:14px; }
  body.home .ixh-read{ left:18px; bottom:18px; }
}

/* phone / coarse pointer — the HUD shrinks to a single minimal corner badge so it
   never crowds the content; light + sheen stand down for performance. */
@media (max-width:780px){
  body.home #ixh-light{ display:none; }
  body.home .ix-cine-page::after{ display:none; }
  body.home .ixh-rail,
  body.home .ixh-cnr.tr,
  body.home .ixh-cnr.bl,
  body.home .ixh-cnr.br,
  body.home .ixh-read__sub,
  body.home .ixh-bar{ display:none; }
  body.home .ixh-read{ left:14px; bottom:14px; }
  body.home .ixh-idx{ font-size:20px; }
  body.home .sec .shead::before{ position:static; display:block; margin-bottom:6px; }
}

/* reduced motion — calm, static, fully legible. No sweeps, no travelling light. */
@media (prefers-reduced-motion:reduce){
  body.home #ixh-light{
    background:radial-gradient(60vmax 46vmax at 60% 8%, rgba(252,143,2,.10), rgba(250,117,2,0) 60%);
    transition:none;
  }
  body.home .ix-cine-page::after{ display:none; }
  body.home .ixh-fx__frame::before,
  body.home .ixh-fx__frame::after{ transition:none; }
  body.home .ixh-fx__wake{ display:none; }
  body.home .hero::after{ display:none; }
}

@media print{
  body.home #ixh-light,
  body.home .ixh-hud,
  body.home .ixh-fx,
  body.home .ix-cine-page::after{ display:none !important; }
}

/* ===================================================== v6 TEXT POLISH =====
   The words get first-class treatment: brighter ink (mist was too dim over
   the field), comfortable sizes, roomier leading, a whisper of shadow to lift
   copy off the canvas. HOME ONLY — inner pages keep the engine defaults. */
body.home .ix-cine-page{ --mist:#C7CDD4; --mut:#9BA2AA; }

/* generic body copy (the .body-h system) — bigger, brighter, better rhythm */
body.home .ix-cine-page .body-h,
body.home .ix-cine-page h2.body-h,
body.home .ix-cine-page h3.body-h,
body.home .ix-cine-page h4.body-h{
  font-size:17px; line-height:1.85; color:var(--mist);
  max-width:640px; margin-top:18px;
  text-shadow:0 1px 14px rgba(7,8,9,.65);
  text-wrap:pretty;
}

/* cards — up from 13.5px, no shadow needed (they sit on panels) */
body.home .ix-cine-page .svc p,
body.home .ix-cine-page .svc .body-h{ font-size:14.5px; line-height:1.75; margin-top:11px; text-shadow:none; }
body.home .ix-cine-page .svc h3{ font-size:20px; }

/* guide steps — long-form reading comfort */
body.home .ix-cine-page .step .body-h{ font-size:16.5px; line-height:1.82; max-width:660px; }

/* FAQ answers + reviews */
body.home .ix-cine-page .qa .ans p{ font-size:15.5px; line-height:1.85; color:var(--mist); }
body.home .ix-cine-page .rev p{ font-size:15px; }

/* keyword strip stays discreet but readable */
body.home .ix-cine-page .body-h.ix-kw{ font-size:13px; color:var(--mut); text-shadow:none; }

@media (max-width:780px){
  body.home .ix-cine-page .body-h,
  body.home .ix-cine-page h2.body-h,
  body.home .ix-cine-page h3.body-h,
  body.home .ix-cine-page h4.body-h{ font-size:16px; line-height:1.8; max-width:100%; }
  body.home .ix-cine-page .step .body-h{ font-size:15.5px; }
}

/* ===================================================== v7 COUTURE LAYER =====
   The audit release: the guide becomes the editorial showpiece, the craft bugs
   a judge would screenshot are gone, the type gains registers, sections gain
   scrubbed seams, and mobile gets the fabric back. HOME ONLY. */

/* the home field replaces the engine dust — never two full-screen painters */
body.home #bgfx{ display:none !important; }

/* ── scrubbed section seams (choreograph() writes --ixh-in 0..1) ─────────── */
body.home main > section.sec > .wrap{
  transform:translateY(calc((1 - var(--ixh-in, 1)) * 34px));
}

/* ── GUIDE: the 6520px editorial chapter system ─────────────────────────── */
body.home .ixh-guide{ position:relative; }
body.home .ixh-stepblk{ position:relative; }
body.home h2.ixh-etape{
  position:relative; z-index:1;
  font-size:clamp(26px,3vw,42px); letter-spacing:-.025em; line-height:1.08;
  margin-top:clamp(34px,4.5vw,56px); padding-top:28px; text-wrap:balance;
}
body.home h2.ixh-etape::before{
  content:""; position:absolute; top:0; left:2px; width:44px; height:2px;
  background:var(--grad); box-shadow:0 0 12px rgba(250,117,2,.5);
}
/* ghost numeral — a huge outlined 0N floating behind each chapter */
body.home .ixh-ghost{
  position:absolute; top:-14px; right:1%; z-index:0; pointer-events:none;
  font-family:var(--sans); font-weight:300; font-size:clamp(110px,13vw,190px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(250,117,2,.16);
  opacity:.45; transition:opacity .7s ease, -webkit-text-stroke-color .7s ease;
}
body.home .ixh-stepblk.ixh-lit .ixh-ghost{ opacity:1; -webkit-text-stroke-color:rgba(250,117,2,.32); }
/* framed exhibit plate for each step image */
body.home .ix-step-solo{
  position:relative; margin:26px auto 10px; max-width:940px; padding:12px;
  border:1px solid rgba(245,246,247,.09); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 45%), rgba(14,15,18,.55);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
body.home .ix-step-solo::after{
  content:""; position:absolute; right:10px; bottom:10px; width:14px; height:14px;
  border-right:1.5px solid rgba(250,117,2,.5); border-bottom:1.5px solid rgba(250,117,2,.5);
}
body.home .ix-step-solo .ix-step__img,
body.home .ix-step-solo img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:8px;
}
/* the scrubbed progress spine + sticky chapter plate */
body.home .ixh-spine{
  position:absolute; top:0; bottom:0; left:clamp(8px,3vw,40px); width:2px;
  background:rgba(250,117,2,.10); z-index:1; pointer-events:none;
}
body.home .ixh-spine i{ position:absolute; inset:0; background:var(--grad); transform:scaleY(0); transform-origin:top; }
body.home .ixh-gplate{
  position:sticky; top:80vh; z-index:6; width:max-content; pointer-events:none;
  margin:0 clamp(10px,3vw,36px) 0 auto;
  font-family:var(--sans); font-size:11px; letter-spacing:.22em; color:var(--mut);
  padding:8px 12px; border:1px solid rgba(250,117,2,.2); border-radius:6px;
  background:rgba(7,8,9,.55); backdrop-filter:blur(6px);
}
body.home .ixh-gplate b{ color:var(--orange); font-size:14px; margin:0 5px; font-variant-numeric:tabular-nums; }
body.home #guide .body-h, body.home .faq .ans p{ text-shadow:none; }
@media (max-width:900px){
  body.home .ixh-spine{ display:none; }
  body.home .ixh-ghost{ font-size:88px; opacity:.32; top:-6px; }
  body.home .ixh-gplate{ top:86vh; }
}

/* ── ÉQUIPE: from floating cutout to framed exhibit ─────────────────────── */
body.home .ix-team.ixh-team{
  display:grid; grid-template-columns:minmax(0,380px) 1fr;
  gap:clamp(24px,4vw,54px); align-items:start;
}
body.home .ixh-team img.ix-team__img,
body.home .ixh-team .ix-team__img{
  border-radius:12px; border:1px solid rgba(245,246,247,.14);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
body.home .ixh-placard{
  grid-column:1; display:flex; flex-direction:column; gap:3px; margin-top:14px;
  padding:12px 16px; border-left:2px solid var(--orange);
  background:rgba(14,15,18,.55); border-radius:0 8px 8px 0; font-family:var(--sans);
}
body.home .ixh-placard b{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); font-weight:600; }
body.home .ixh-placard span{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); }
@media (max-width:860px){ body.home .ix-team.ixh-team{ grid-template-columns:1fr; } }

/* ── SERVICES: two cards get a deliberate asymmetric stage (was 2-in-4 grid) */
body.home .ix-subsvc{ grid-template-columns:1.08fr .92fr; gap:26px; }
body.home .ix-subsvc .svc{ padding:clamp(30px,3.4vw,46px); }
body.home .ix-subsvc .svc h3{ font-size:clamp(22px,2.2vw,28px); }
@media (max-width:820px){ body.home .ix-subsvc{ grid-template-columns:1fr; } }

/* ── JOINDRE: the form leads; nav + share sink below a hairline ─────────── */
body.home .joindre > .wrap{ display:flex; flex-direction:column; }
body.home .joindre .ix-foot-nav{ order:4; border-top:1px solid var(--line); padding-top:34px; margin-top:46px; }
body.home .joindre .ix-share{ order:5; margin-top:18px; }

/* ── share pills: locked markup carries each label twice — render it once ── */
body.home .ix-share a.ixh-share-a{ font-size:0; letter-spacing:0; }
body.home .ix-share a.ixh-share-a::after{ content:attr(data-t); font-size:11px; letter-spacing:.06em; }

/* ── type registers: same voice, more range ─────────────────────────────── */
body.home .shead h2{ font-weight:500; letter-spacing:-.034em; text-wrap:balance; }
body.home .stbig{ font-weight:400; }
body.home .htel a, body.home .ixh-idx, body.home .stat .num{ font-variant-numeric:lining-nums tabular-nums; }
body.home .shead .ey{ margin-right:-.3em; }
body.home .qa button{ font-size:clamp(17px,1.5vw,21px); }

/* ── mobile: precise touch feedback + scroll-driven descent ─────────────── */
@media (hover:none){
  body.home{ -webkit-tap-highlight-color:transparent; }
  body.home .gbtn:active, body.home .gline:active, body.home .ix-hero__cta:active{
    transform:scale(.97); box-shadow:0 0 0 4px rgba(250,117,2,.18); transition-duration:.08s;
  }
  body.home .qa button:active{ color:var(--gold); }
  body.home .svc:active{ border-color:rgba(250,117,2,.4); }
}
@media (max-width:780px){
  body.home .ixh-read{
    padding:8px 10px; background:rgba(7,8,9,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border:1px solid rgba(250,117,2,.18); border-left:2px solid #FC8F02; border-radius:0 6px 6px 0;
  }
  body.home .ixh-bar{ display:block; width:72px; margin-top:6px; }
}
@supports (animation-timeline: scroll()){
  @media (pointer:coarse){
    body.home .ix-step-solo img{
      animation:ixm-rise linear both; animation-timeline:view(); animation-range:entry 0% cover 45%;
    }
  }
}
@keyframes ixm-rise{
  from{ transform:translateY(22px); filter:brightness(.86); }
  to{ transform:translateY(0); filter:brightness(1); }
}

/* reduced motion: the v7 layer stands down with everything else */
@media (prefers-reduced-motion:reduce){
  body.home #ixh-veil{ transition:none !important; }
  body.home main > section.sec > .wrap{ transform:none !important; }
  body.home .ix-step-solo img{ animation:none !important; }
  body.home .ixh-ghost{ transition:none; opacity:1; }
}

/* ===================================================== v8 SITE-WIDE PARITY =====
   The inner pages join the v7 quality bar: share pills painted once, duplicated
   locked-markup labels clipped (text stays in the DOM byte-identical), empty
   aria-label chips made visible, and the brighter reading register everywhere. */

/* share pills — every cinematic page (engine dedupe sets data-t) */
.ix-cine-page .ix-share a.ixh-share-a{ font-size:0; letter-spacing:0; }
.ix-cine-page .ix-share a.ixh-share-a::after{ content:attr(data-t); font-size:11px; letter-spacing:.06em; }

/* labels the locked markup renders twice (link + heading): clip the heading copy
   ONLY when it accompanies a visible link in the same item */
.ix-cine-page .ix-foot-nav li a ~ h3,
.ix-cine-page .ix-norms a ~ h3.body-h{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* icon-less chips that carry only an aria-label: paint it (decorative, non-crawlable) */
.ix-cine-page .gline[aria-label]:empty::before,
.ix-cine-page .ix-contact-links a[aria-label]:empty::before{
  content:attr(aria-label); font-size:12px; letter-spacing:.08em;
}

/* inner pages inherit the v7 reading register (home keeps its own block) */
body.ix-cine:not(.home) .ix-cine-page{ --mist:#C7CDD4; --mut:#9BA2AA; }
body.ix-cine:not(.home) .ix-cine-page .body-h,
body.ix-cine:not(.home) .ix-cine-page h2.body-h,
body.ix-cine:not(.home) .ix-cine-page h3.body-h,
body.ix-cine:not(.home) .ix-cine-page h4.body-h{ font-size:17px; line-height:1.85; max-width:640px; }
body.ix-cine:not(.home) .ix-cine-page .svc p,
body.ix-cine:not(.home) .ix-cine-page .svc .body-h{ font-size:14.5px; line-height:1.75; }
body.ix-cine:not(.home) .ix-cine-page .qa button{ font-size:clamp(17px,1.5vw,21px); }
body.ix-cine:not(.home) .ix-cine-page .qa .ans p{ font-size:15.5px; line-height:1.85; }
body.ix-cine:not(.home) .ix-cine-page .rev p{ font-size:15px; }

/* framed FAQ cards — the exhibit language, site-wide */
.ix-cine-page .qa{
  border:1px solid var(--line); border-radius:12px; padding:0 20px;
  background:rgba(245,246,247,.02);
}
.ix-cine-page .qa + .qa{ margin-top:10px; }
.ix-cine-page .qa.open{ border-color:rgba(250,117,2,.32); }