/* =========================================================
   Cathy Nguyen — style
   Polices système uniquement : aucun fichier à charger.
   ========================================================= */
:root{
  --bg:#111116;          /* noir encre */
  --bg-2:#1B1B24;        /* charbon */
  --bg-3:#23222F;        /* charbon clair (cartes sur charbon) */
  --deep:#302747;        /* violet sombre : profondeur, dégradés */
  --lav:#A497C4;         /* accent interactif */
  --lav-hi:#BDB2DA;
  --text:#F2EEE7;        /* ivoire */
  --text-2:#B8B3C2;      /* gris clair */
  --champ:#CDBB9D;       /* accent ponctuel */
  --line:rgba(242,238,231,.09);
  --line-2:rgba(242,238,231,.16);
  --mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans:system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --max:1240px;
  --radius:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font:400 17px/1.65 var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img,video{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--mono); font-weight:600; letter-spacing:-.03em; line-height:1.08; margin:0; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--lav); outline-offset:3px; border-radius:2px}
::selection{background:var(--deep); color:var(--text)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.muted{color:var(--text-2)}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--lav); color:var(--bg); padding:10px 16px; z-index:200; text-decoration:none; font-family:var(--mono)}
.skip:focus{left:8px}
main:focus{outline:none}

/* ---------- Libellés courts ---------- */
.label{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); font-weight:500}
.label.lav{color:var(--lav)}
.label.champ{color:var(--champ)}
.idx{font-family:var(--mono); font-size:13px; color:var(--lav)}

/* ---------- Header (inspiré d'index.html) ---------- */
.site-header{position:fixed; inset:0 0 auto; z-index:50; transition:background .3s, border-color .3s; border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(17,17,22,.88); backdrop-filter:blur(12px); border-color:var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:76px}
.brand{display:inline-grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; font-family:var(--mono); text-decoration:none; line-height:1.1}
.brand .b-main{grid-column:2; font-size:15px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--text)}
.brand .b-by{grid-column:2; font-size:10.5px; letter-spacing:.06em; color:var(--text-2); font-weight:400; text-transform:none; margin-top:3px}
.brand::before{content:""; grid-row:1 / span 2; width:12px; height:12px; border:2px solid var(--text); border-radius:50%; box-shadow:0 0 0 3px rgba(164,151,196,.18)}
.brand:hover::before{border-color:var(--lav)}
#nav ul{display:flex; gap:clamp(20px,2.6vw,34px); align-items:center}
#nav a{font-family:var(--mono); text-decoration:none; font-size:13px; text-transform:uppercase; letter-spacing:.1em; padding:6px 0; color:var(--text); opacity:.72; border-bottom:1px solid transparent; transition:opacity .2s, border-color .2s}
#nav a:hover{opacity:1}
#nav a[aria-current="page"]{opacity:1; border-color:var(--lav)}
#nav a.nav-cta{opacity:1; border:1px solid var(--line-2); padding:9px 18px}
#nav a.nav-cta:hover, #nav a.nav-cta[aria-current="page"]{border-color:var(--lav); color:var(--lav-hi)}

/* Burger */
.menu-btn,.menu-close{display:none; position:relative; width:32px; height:22px; background:none; border:0; padding:0; cursor:pointer}
.menu-btn i,.menu-close i{position:absolute; left:0; width:100%; height:2px; background:var(--text); transition:transform .35s var(--ease), opacity .2s, top .35s var(--ease)}
.menu-btn i:nth-child(1){top:0}.menu-btn i:nth-child(2){top:10px}.menu-btn i:nth-child(3){top:20px}
.menu-close i{top:10px}.menu-close i:nth-child(1){transform:rotate(45deg)}.menu-close i:nth-child(2){transform:rotate(-45deg)}

@media (max-width:820px){
  .menu-btn{display:block}
  #nav{position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; padding:0 var(--gutter) 40px;
    background-color:var(--bg); background-image:radial-gradient(70% 50% at 100% 0%, rgba(48,39,71,.6), transparent 70%);
    opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s}
  #nav.open{opacity:1; visibility:visible}
  .nav-top{display:flex; justify-content:space-between; align-items:center; height:76px; flex-shrink:0}
  .menu-close{display:block}
  #nav ul{flex:1; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px}
  #nav ul a{display:block; padding:8px 0; font-size:clamp(28px,8.5vw,36px); font-weight:700; text-transform:none; letter-spacing:-.02em; opacity:1; border:0;
    transform:translateY(16px); transition:transform .4s var(--ease), opacity .4s, color .2s}
  #nav ul a{opacity:0}
  #nav.open ul a{transform:none; opacity:1}
  #nav.open li:nth-child(2) a{transition-delay:.05s} #nav.open li:nth-child(3) a{transition-delay:.1s}
  #nav.open li:nth-child(4) a{transition-delay:.15s} #nav.open li:nth-child(5) a{transition-delay:.2s}
  #nav a[aria-current="page"]{color:var(--lav)}
  #nav a.nav-cta{border:0; padding:8px 0}
}
@media (min-width:821px){ .nav-top{display:none} }

/* ---------- Typo ---------- */
.display{font-size:clamp(27px, 7.6vw, 60px); line-height:1; font-weight:700; letter-spacing:-.035em}
@media (min-width:700px){ .display{font-size:clamp(36px, 4.4vw, 64px)} }
.display em{font-style:normal; color:var(--lav)}
.h2{font-size:clamp(26px, 3.1vw, 42px)}
.h3{font-size:clamp(20px, 1.8vw, 24px)}
.lead{font-size:clamp(17px,1.35vw,19px); color:var(--text-2); max-width:44ch}

/* ---------- Boutons ---------- */
.btns{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; font-weight:500; padding:15px 24px; border:1px solid transparent; border-radius:var(--radius); cursor:pointer; transition:background .25s, border-color .25s, color .25s, transform .25s var(--ease)}
.btn-primary{background:var(--lav); color:var(--bg); border-color:var(--lav)}
.btn-primary:hover{background:var(--text); border-color:var(--text)}
.btn-ghost{border-color:var(--text); color:var(--text)}
.btn-ghost:hover{background:var(--text); color:var(--bg)}
.arr{display:inline-block; transition:transform .25s var(--ease)}
.btn:hover .arr,.link:hover .arr{transform:translateX(4px)}
.link{display:inline-flex; gap:10px; align-items:center; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line-2); padding-bottom:5px; transition:border-color .2s, color .2s}
.link:hover{border-color:var(--lav); color:var(--lav-hi)}

/* ---------- Sections ---------- */
.s1{background:var(--bg)}
.s2{background:var(--bg-2)}
.s3{background:radial-gradient(80% 120% at 85% 0%, rgba(48,39,71,.85), transparent 65%), var(--bg)}
.pad{padding:clamp(80px,10vw,140px) 0}
.pad-s{padding:clamp(56px,7vw,96px) 0}
.sec-head{display:grid; grid-template-columns:1fr; gap:18px 40px; margin-bottom:clamp(36px,5vw,64px); align-items:end}
.sec-head .label{margin-bottom:16px; display:block}
@media (min-width:900px){ .sec-head.split{grid-template-columns:1fr auto} .sec-head.two{grid-template-columns:1.1fr .9fr} }

/* ---------- Hero + reveal ---------- */
.hero{position:relative; overflow:hidden; background:var(--bg)}
.hero-media{position:relative; height:min(74svh, 600px); --x:70%; --y:35%; --r:0px; touch-action:pan-y}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:69% 0; pointer-events:none; user-select:none}
.hero-media{--split:50%; user-select:none}
.hero-media .back{clip-path:inset(0 0 0 var(--split))}
.hero-media:not(.tracking) .back,.hero-media:not(.tracking) .split-line,.hero-media:not(.tracking) .handle,.hero-media:not(.tracking) .flab{transition:clip-path .7s var(--ease), left .7s var(--ease)}
.split-line{position:absolute; z-index:2; top:0; bottom:0; left:var(--split); width:1px; background:rgba(242,238,231,.7); pointer-events:none}
.handle{position:absolute; z-index:4; left:var(--split); top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  background:rgba(17,17,22,.6); border:1px solid rgba(242,238,231,.85); color:var(--text); display:grid; place-items:center;
  cursor:ew-resize; touch-action:none; font-family:var(--mono); font-size:15px; letter-spacing:4px; padding:0 0 0 3px; backdrop-filter:blur(4px);
  transition:background-color .2s, border-color .2s}
.handle:hover,.handle:focus-visible{background:var(--deep); border-color:var(--lav)}
.flab{position:absolute; z-index:3; top:15%; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; pointer-events:none; padding:5px 10px; background:rgba(17,17,22,.65); border-radius:2px}
.flab.a{left:var(--split); transform:translateX(calc(-100% - 14px)); color:var(--champ)}
.flab.b{left:var(--split); transform:translateX(14px); color:var(--lav-hi)}
@media (max-width:899px){
}
.hero-media .shade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, var(--bg) 0%, rgba(17,17,22,0) 40%)}
.hero-text{position:relative; z-index:2; padding:6px 0 64px}
.hero-text .label{display:block; margin-bottom:20px}
.hero-text .display{margin-bottom:22px}
.hero-text .lead{margin-bottom:34px; font-family:var(--mono); font-size:15px; line-height:1.65; max-width:440px}
.hero-text .display{margin-bottom:28px}
.hero .tag{position:absolute; z-index:3; right:16px; bottom:16px}
@media (min-width:900px){
  .hero{min-height:min(100svh, 920px)}
  .hero-media{position:absolute; inset:0; height:auto}
  .hero-media .shade{background:
      linear-gradient(90deg, rgba(17,17,22,.94) 0%, rgba(17,17,22,.7) 30%, rgba(17,17,22,0) 54%),
      linear-gradient(to top, rgba(17,17,22,.75) 0%, rgba(17,17,22,0) 9%)}
  .hero > .wrap{position:relative; z-index:2; min-height:min(100svh, 920px); display:flex; align-items:center; pointer-events:none}
  .hero-text{pointer-events:auto; max-width:760px; padding:110px 0 80px}
  .hero .tag{right:24px; bottom:24px}
}

.tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:rgba(17,17,22,.78); color:var(--text-2); padding:5px 9px; border-radius:2px; z-index:3}

/* ---------- Références ---------- */
.refs{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg)}
.refs .wrap{display:flex; flex-wrap:wrap; gap:14px 44px; align-items:baseline; padding-top:26px; padding-bottom:26px}
.refs ul{display:flex; flex-wrap:wrap; gap:10px 34px}
.refs li{font-family:var(--mono); font-size:17px; color:var(--text)}
.refs li small{font-size:12px; color:var(--text-2); margin-left:6px}

/* ---------- Offres (accueil) ---------- */
.offers{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:760px){ .offers{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1180px){ .offers{grid-template-columns:repeat(4,1fr)} }
.offer-card{position:relative; display:flex; flex-direction:column; padding:30px 28px 28px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .3s, transform .4s var(--ease)}
.offer-card:hover{border-color:rgba(164,151,196,.5); transform:translateY(-3px)}
.offer-card .idx{margin-bottom:22px}
.offer-card h3{font-size:clamp(19px,1.6vw,22px); margin-bottom:18px}
.offer-card .sit{margin-bottom:22px}
.offer-card .sit li{position:relative; padding-left:16px; color:var(--text-2); font-size:15.5px; margin-bottom:6px}
.offer-card .sit li::before{content:""; position:absolute; left:0; top:.78em; width:7px; height:1px; background:var(--lav)}
.offer-card .tags{font-family:var(--mono); font-size:12.5px; color:var(--text-2); margin-bottom:26px; padding-top:16px; border-top:1px solid var(--line)}
.offer-card .link{margin-top:auto; align-self:flex-start}
.offer-card .link::after{content:""; position:absolute; inset:0}

/* ---------- Réalisations ---------- */
.works{display:grid; grid-template-columns:1fr; gap:28px}
@media (min-width:800px){ .works{grid-template-columns:1fr 1fr} .works.lead-first > :first-child{grid-column:1/-1} .works.lead-first > :first-child .media{aspect-ratio:21/9} }
.work{position:relative; display:flex; flex-direction:column}
.work[hidden]{display:none}
.work .media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); border-radius:var(--radius)}
.work .media img,.work .media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), opacity .4s}
.work .media video{opacity:0}
.work.playing .media video{opacity:1}
.work:hover .media img{transform:scale(1.03)}
.work .status{position:absolute; left:12px; top:12px}
.work .ai{position:absolute; right:12px; top:12px}
.work .draft{position:absolute; right:12px; bottom:12px; background:var(--champ); color:var(--bg)}
.work .body{padding-top:20px; display:grid; gap:8px}
.work h3{font-size:clamp(19px,1.7vw,23px)}
.work h3 a{text-decoration:none}
.work h3 a::after{content:""; position:absolute; inset:0}
.work:hover h3 a, .work h3 a:focus-visible{color:var(--lav-hi)}
.work p{color:var(--text-2); font-size:16px}
.work .meta{font-family:var(--mono); font-size:12px; color:var(--text-2); display:flex; gap:6px 14px; flex-wrap:wrap}
.work .meta .cs{color:var(--lav)}
.status.client{color:var(--champ)}
.status.demo{color:var(--lav-hi)}
.status.encours{color:var(--text)}
.placeholder{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:8px; padding:24px;
  background:repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg-3) 14px 28px); color:var(--text-2); font-size:13.5px; border:1px dashed rgba(164,151,196,.35); border-radius:var(--radius)}
.placeholder strong{font-family:var(--mono); color:var(--lav); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:500}
.ph-box{position:relative; min-height:220px}

.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px}
.filters button{background:none; border:1px solid var(--line-2); border-radius:var(--radius); padding:9px 16px; font-family:var(--mono); font-size:13px; color:var(--text-2); cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.filters button:hover{color:var(--text); border-color:var(--lav)}
.filters button[aria-pressed="true"]{background:var(--lav); color:var(--bg); border-color:var(--lav)}

/* ---------- Méthode ---------- */
.steps{display:grid; grid-template-columns:1fr; counter-reset:s}
@media (min-width:700px){ .steps{grid-template-columns:repeat(2,1fr); column-gap:32px} }
@media (min-width:1050px){ .steps{grid-template-columns:repeat(5,1fr)} }
.steps li{border-top:1px solid var(--line-2); padding:22px 0 28px; counter-increment:s}
.steps li::before{content:"0" counter(s); display:block; font-family:var(--mono); font-size:13px; color:var(--lav); margin-bottom:18px}
.steps h3{font-size:19px; margin-bottom:8px}
.steps p{color:var(--text-2); font-size:15.5px}

/* ---------- CTA ---------- */
.cta .wrap{display:grid; grid-template-columns:1fr; gap:28px 48px; align-items:center}
@media (min-width:900px){ .cta .wrap{grid-template-columns:1fr auto} }
.cta h2{font-size:clamp(24px,2.8vw,38px)}
.cta p{color:var(--text-2); margin-top:12px; max-width:52ch}

/* ---------- En-têtes de pages ---------- */
.page-hero{position:relative; overflow:hidden; padding:clamp(140px,16vw,200px) 0 clamp(56px,7vw,96px);
  background:radial-gradient(70% 90% at 90% 0%, rgba(48,39,71,.9), transparent 65%), var(--bg)}
.page-hero .label{display:block; margin-bottom:20px}
.page-hero .display{margin-bottom:22px}
.page-hero .bg{position:absolute; inset:0 0 0 auto; width:min(56%,760px); opacity:.4}
.page-hero .bg img{width:100%; height:100%; object-fit:cover}
.page-hero .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg) 0%, rgba(17,17,22,.35) 60%, rgba(17,17,22,.7) 100%)}
.page-hero .wrap{position:relative}
@media (max-width:760px){ .page-hero .bg{width:100%; opacity:.18} }
.jump{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px}
.jump a{font-family:var(--mono); font-size:13px; text-decoration:none; border:1px solid var(--line-2); border-radius:var(--radius); padding:9px 14px; color:var(--text-2); transition:border-color .2s, color .2s}
.jump a:hover{border-color:var(--lav); color:var(--text)}

/* ---------- Offres détaillées ---------- */
.offer{padding:clamp(64px,8vw,110px) 0; border-top:1px solid var(--line); scroll-margin-top:72px}
.offer:first-child{border-top:0}
.offer:focus{outline:none}
.offer-top{display:grid; grid-template-columns:1fr; gap:32px; margin-bottom:44px}
@media (min-width:960px){ .offer-top{grid-template-columns:1fr 1fr; gap:64px; align-items:center} }
.offer-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); border-radius:var(--radius)}
.offer-media img{width:100%; height:100%; object-fit:cover}
.offer-media .tag{position:absolute; left:12px; top:12px}
.offer h2{font-size:clamp(24px,2.7vw,36px); margin:14px 0 18px}
.offer .intro{color:var(--text-2); font-size:17px; max-width:52ch}
.offer-cols{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:700px){ .offer-cols{grid-template-columns:1fr 1fr} }
@media (min-width:1050px){ .offer-cols{grid-template-columns:repeat(3,1fr)} }
.panel{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.panel .label{display:block; margin-bottom:16px}
.dash li{position:relative; padding-left:16px; margin-bottom:9px; font-size:15.5px; color:var(--text-2)}
.dash li::before{content:""; position:absolute; left:0; top:.78em; width:7px; height:1px; background:var(--lav)}
.numlist{counter-reset:d}
.numlist li{counter-increment:d; display:grid; grid-template-columns:30px 1fr; margin-bottom:10px; font-size:15.5px; color:var(--text-2)}
.numlist li::before{content:"0" counter(d); font-family:var(--mono); font-size:13px; color:var(--lav); padding-top:2px}
.offer-foot{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; justify-content:space-between; margin-top:18px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius)}
.offer-foot p{font-size:15.5px; color:var(--text-2); max-width:56ch}
.offer-foot .collab b{font-family:var(--mono); font-weight:500; color:var(--text); font-size:13px; margin-right:6px}

.pilot{display:grid; grid-template-columns:1fr; gap:36px}
@media (min-width:900px){ .pilot{grid-template-columns:1.1fr .9fr; gap:72px; align-items:start} }
.note{font-size:14.5px; color:var(--text-2); border-left:1px solid var(--champ); padding-left:16px; max-width:62ch}

/* ---------- Cas d'étude ---------- */
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding:28px 0; border-bottom:1px solid var(--line)}
@media (min-width:800px){ .facts{grid-template-columns:repeat(4,1fr)} }
.facts dt{margin-bottom:6px}
.facts dd{margin:0; font-size:15.5px}
.cs-block{display:grid; grid-template-columns:1fr; gap:18px 72px; padding:clamp(48px,6vw,84px) 0; border-bottom:1px solid var(--line)}
@media (min-width:900px){ .cs-block{grid-template-columns:.7fr 1.3fr} }
.cs-block.full{grid-template-columns:1fr}
.cs-block h2{font-size:clamp(22px,2.3vw,30px)}
.cs-block h2 .idx{display:block; margin-bottom:12px}
.cs-block .body{font-size:17px; max-width:62ch; color:var(--text-2)}
.cs-block .body p+p{margin-top:14px}
.transfo{display:grid; grid-template-columns:1fr; gap:28px}
@media (min-width:800px){ .transfo{grid-template-columns:repeat(3,1fr); gap:22px} }
.transfo figure{margin:0; position:relative}
.transfo .frame{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3); border-radius:var(--radius)}
.transfo .frame img{width:100%; height:100%; object-fit:cover}
.transfo .frame .tag{position:absolute; left:10px; top:10px}
.transfo figcaption{margin-top:14px; font-size:15px; color:var(--text-2)}
.transfo figcaption b{display:block; font-family:var(--mono); font-weight:500; font-size:15px; color:var(--text); margin-bottom:4px}
@media (min-width:800px){ .transfo figure:not(:last-child)::after{content:"→"; position:absolute; right:-17px; top:calc(37.5% - 12px); font-family:var(--mono); color:var(--lav)} }
.ordered{counter-reset:o}
.ordered li{counter-increment:o; display:grid; grid-template-columns:52px 1fr; padding:20px 0; border-top:1px solid var(--line)}
.ordered li::before{content:"0" counter(o); font-family:var(--mono); font-size:13px; color:var(--lav); padding-top:4px}
.ordered h3{font-size:18px; margin-bottom:6px}
.ordered p{color:var(--text-2); font-size:15.5px}
.todo{color:var(--champ); background:rgba(205,187,157,.1); padding:0 4px; border-radius:2px}

/* ---------- À propos ---------- */
.about-hero{display:grid; grid-template-columns:1fr; gap:48px; align-items:end}
@media (min-width:900px){ .about-hero{grid-template-columns:1.15fr .85fr} }
.about-img{position:relative; aspect-ratio:4/5; overflow:hidden; max-width:420px; border-radius:var(--radius)}
.about-img img{width:100%; height:100%; object-fit:cover; object-position:50% 0}
.about-img .tag{position:absolute; left:12px; bottom:12px}
.timeline li{display:grid; grid-template-columns:1fr; gap:6px 40px; padding:24px 0; border-top:1px solid var(--line)}
@media (min-width:800px){ .timeline li{grid-template-columns:320px 1fr} }
.timeline h3{font-size:19px}
.timeline p{color:var(--text-2)}
.trio{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:800px){ .trio{grid-template-columns:repeat(3,1fr)} }
.trio li{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.trio h3{font-size:20px; margin-bottom:10px}
.trio p{color:var(--text-2); font-size:16px}
.principles li{display:grid; grid-template-columns:1fr; gap:6px 40px; padding:22px 0; border-top:1px solid var(--line)}
@media (min-width:800px){ .principles li{grid-template-columns:320px 1fr} }
.principles h3{font-size:18px}
.principles p{color:var(--text-2)}
.tools{font-family:var(--mono); font-size:13px; color:var(--text-2); margin-top:48px; padding-top:20px; border-top:1px solid var(--line)}
.tools span{color:var(--text)}

/* ---------- Contact ---------- */
.form{display:grid; grid-template-columns:1fr; gap:22px; max-width:780px}
@media (min-width:700px){ .form{grid-template-columns:1fr 1fr} .form .full{grid-column:1/-1} }
.field label{display:block; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; margin-bottom:8px; color:var(--text)}
.field label .opt{color:var(--text-2)}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:16px; padding:13px 14px; background:var(--bg-2); border:1px solid var(--line-2); color:var(--text); border-radius:var(--radius)}
.field input::placeholder{color:#8E88A0}
.field select option{background:var(--bg-2)}
.field textarea{min-height:160px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--lav); outline-offset:0; border-color:var(--lav)}
.field [aria-invalid="true"]{border-color:#E08A8A}
.hint-f{font-size:13.5px; color:var(--text-2); margin-top:6px}
.err{color:#F0A8A8; font-size:14px; margin-top:6px}
.form-status{grid-column:1/-1; padding:18px 20px; background:var(--bg-2); border:1px solid var(--line-2); border-left:2px solid var(--lav); border-radius:var(--radius); font-size:15.5px}
.form-status a{color:var(--lav-hi)}
.form-status[hidden]{display:none}

/* ---------- Footer ---------- */
.sig{font-family:var(--mono); font-size:13px; color:var(--champ)}

.footer-links a{font-family:var(--mono); font-size:13px; text-decoration:none; color:var(--text-2)}
.footer-links a:hover{color:var(--text)}

/* ---------- Aperçu ---------- */
.preview-bar{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:60; background:var(--champ); color:var(--bg); font-family:var(--mono); font-size:11.5px; padding:7px 14px; border-radius:var(--radius); box-shadow:0 6px 24px rgba(0,0,0,.35); max-width:calc(100% - 32px); text-align:center}

/* ---------- Apparitions ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s !important; animation:none !important}
  .js .reveal{opacity:1; transform:none}
}
body.menu-open .preview-bar{display:none}

/* Index des offres, bas droite du hero (comme les repères d'index.html) */
.hero-index{display:none}
@media (min-width:1100px){
  .hero-index{display:flex; gap:40px; position:absolute; z-index:3; right:var(--gutter); bottom:64px}
  .hero-index a{text-decoration:none; display:grid; gap:4px; opacity:.85; transition:opacity .2s}
  .hero-index a:hover{opacity:1}
  .hero-index b{font-family:var(--mono); font-size:22px; font-weight:700; color:var(--text)}
  .hero-index small{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2)}
  .hero .tag{bottom:22px}
}
@media (prefers-reduced-motion:reduce){ #nav ul a{transform:none!important} }

#nav .nav-top .brand{opacity:1; padding:0; border:0; font-size:inherit}

/* =========================================================
   PAGE SERVICES
   ========================================================= */
.svc-hero .display{max-width:20ch}
.svc-anchors{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.svc-anchors a{display:inline-flex; align-items:center; gap:12px; padding:13px 18px; text-decoration:none; font-family:var(--mono); font-size:13.5px; color:var(--text); background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius); transition:background-color .25s, border-color .25s, color .25s, transform .25s var(--ease)}
.svc-anchors a .arr{color:var(--lav)}
.svc-anchors a:hover,.svc-anchors a:focus-visible{background:var(--deep); border-color:var(--lav); color:var(--text); transform:translateY(-2px)}
.svc-anchors a:hover .arr{transform:translateY(3px)}

.svc{padding:clamp(56px,6vw,96px) 0; scroll-margin-top:76px; border-top:1px solid var(--line)}
.svc:focus{outline:none}
.svc-head{max-width:860px; margin-bottom:clamp(40px,5vw,64px)}
.svc-head .idx{display:block; margin-bottom:18px}
.svc-head h2{font-size:clamp(26px,3.4vw,46px); margin-bottom:22px}
.svc-accroche{font-family:var(--mono); font-size:clamp(16px,1.4vw,19px); color:var(--champ); line-height:1.5; max-width:46ch}

.svc-split{display:grid; grid-template-columns:1fr; gap:32px; align-items:center; margin-bottom:clamp(40px,5vw,64px)}
@media (min-width:960px){ .svc-split{grid-template-columns:.85fr 1.15fr; gap:64px} .svc.flip .svc-split{grid-template-columns:1.15fr .85fr} .svc.flip .svc-visual{order:-1} }
.svc-sit .label{display:block; margin-bottom:10px}
.svc-sit li{position:relative; padding:18px 0 18px 28px; border-top:1px solid var(--line); font-size:clamp(17px,1.4vw,19px); line-height:1.5; color:var(--text)}
.svc-sit li:last-child{border-bottom:1px solid var(--line)}
.svc-sit li::before{content:"→"; position:absolute; left:0; top:18px; font-family:var(--mono); color:var(--lav)}
.svc-visual{position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--bg-3)}
.svc-visual img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.svc-visual:hover img{transform:scale(1.03)}
.svc-visual::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(17,17,22,.5)); }
.svc-visual .tag{position:absolute; left:12px; top:12px}

.svc-body{display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:clamp(40px,5vw,64px)}
@media (min-width:900px){ .svc-body{grid-template-columns:1fr 1fr; gap:72px} }
.svc-body .label{display:block; margin-bottom:16px}
.svc-int p{font-size:clamp(17px,1.35vw,19px); line-height:1.7; color:var(--text)}
.opts{display:flex; flex-wrap:wrap; gap:10px}
.opts li{font-size:14.5px; color:var(--text-2); border:1px dashed rgba(164,151,196,.45); border-radius:999px; padding:7px 14px; line-height:1.4; transition:border-color .2s, color .2s}
.opts li:hover{border-style:solid; border-color:var(--lav); color:var(--text)}
.opts-note{margin-top:14px; font-family:var(--mono); font-size:12px; color:#8E88A0}

.svc-steps .label{display:block; margin-bottom:22px}
.svc-steps ol{display:grid; grid-template-columns:1fr; counter-reset:st; position:relative}
@media (min-width:860px){ .svc-steps ol{grid-template-columns:repeat(4,1fr)} }
.svc-steps li{counter-increment:st; position:relative; padding:0 0 26px 44px; color:var(--text-2); font-size:15.5px}
.svc-steps li::before{content:"0" counter(st); position:absolute; left:0; top:0; font-family:var(--mono); font-size:12px; color:var(--bg); background:var(--lav); width:30px; height:30px; display:grid; place-items:center; border-radius:50%}
.svc-steps li::after{content:""; position:absolute; left:15px; top:34px; bottom:4px; width:1px; background:var(--line-2)}
.svc-steps li:last-child::after{display:none}
.svc-steps li span{display:block; padding-top:4px}
@media (min-width:860px){
  .svc-steps li{padding:46px 24px 0 0}
  .svc-steps li::after{left:38px; right:8px; top:15px; bottom:auto; width:auto; height:1px}
}

.svc-foot{display:grid; grid-template-columns:1fr; gap:28px; align-items:center; margin-top:clamp(36px,4vw,56px); padding-top:30px; border-top:1px solid var(--line)}
@media (min-width:960px){ .svc-foot{grid-template-columns:1fr auto; gap:56px} }
.svc-benefit{font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:var(--text); border-left:2px solid var(--champ); padding-left:20px; max-width:60ch}
.svc-benefit .label{display:block; margin-bottom:8px}

.modes{display:grid; grid-template-columns:1fr; border-top:1px solid var(--line-2)}
@media (min-width:860px){ .modes{grid-template-columns:repeat(3,1fr)} }
.modes li{padding:28px 0; border-bottom:1px solid var(--line)}
@media (min-width:860px){ .modes li{padding:32px 32px 32px 0; border-bottom:0; border-right:1px solid var(--line)} .modes li + li{padding-left:32px} .modes li:last-child{border-right:0} }
.modes .idx{display:block; margin-bottom:16px}
.modes h3{font-size:20px; margin-bottom:10px}
.modes p{color:var(--text-2)}
.modes-text{margin-top:40px; max-width:64ch; color:var(--text-2); font-size:17px}

.svc-pourqui{margin-top:18px; color:var(--text-2); font-size:16px}
.svc-pourqui .label{margin-right:12px}
.svc-plus{margin-top:28px; padding:22px 24px; border:1px solid rgba(164,151,196,.35); border-radius:var(--radius); background:linear-gradient(135deg, rgba(48,39,71,.55), rgba(48,39,71,.15))}
.svc-plus h3{font-size:17px; margin-bottom:10px; color:var(--lav-hi)}
.svc-plus p{font-size:15.5px; color:var(--text-2); line-height:1.65}
.hero-index{gap:32px}

/* =========================================================
   ACCUEIL — 4 fenêtres flottantes
   ========================================================= */
.wins{display:grid; grid-template-columns:1fr; gap:22px}
@media (min-width:860px){ .wins{grid-template-columns:1fr 1fr; gap:26px} }
.win{position:relative; display:flex; flex-direction:column; background-color:var(--bg-2);
  border:1px solid rgba(242,238,231,.1); border-radius:6px; overflow:hidden;
  box-shadow:0 1px 0 rgba(242,238,231,.04) inset, 0 14px 32px -18px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.25);
  transition:background-color .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease), transform .26s var(--ease)}
.win::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .26s var(--ease);
  background:radial-gradient(120% 90% at 100% 0%, rgba(164,151,196,.16), transparent 60%)}
.win-bar{display:flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-bottom:1px solid rgba(242,238,231,.07); background:rgba(17,17,22,.35)}
.win-bar span{width:7px; height:7px; border-radius:50%; background:rgba(242,238,231,.16); transition:background-color .26s var(--ease)}
.win-bar em{margin-left:auto; font-style:normal; font-family:var(--mono); font-size:11px; color:#8E88A0; letter-spacing:.04em}
.win-body{position:relative; display:flex; flex-direction:column; flex:1; padding:28px 28px 26px}
.win .idx{font-size:12px; color:#8E88A0; margin-bottom:14px}
.win h3{font-size:clamp(20px,1.9vw,25px); margin-bottom:14px}
.win-need{color:var(--text-2); font-size:16.5px; line-height:1.6; margin-bottom:22px; max-width:44ch}
.win-ex{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.win-ex li{font-family:var(--mono); font-size:12.5px; color:var(--text); background:rgba(242,238,231,.04); border:1px solid rgba(242,238,231,.1); border-radius:3px; padding:6px 10px; transition:border-color .26s var(--ease)}
.win-link{margin-top:auto; align-self:flex-start; display:inline-flex; gap:10px; align-items:center; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; text-decoration:none; color:var(--text); padding-bottom:5px; border-bottom:1px solid var(--line-2); transition:color .26s var(--ease), border-color .26s var(--ease)}
.win-link::after{content:""; position:absolute; inset:0; z-index:1}
.win-link .arr{transition:transform .26s var(--ease)}
.win-link:focus-visible{outline:none}
/* Survol + focus clavier */
.win:hover, .win:focus-within{background-color:var(--deep); border-color:rgba(189,178,218,.7); transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(242,238,231,.06) inset, 0 22px 44px -18px rgba(48,39,71,.9), 0 0 0 1px rgba(164,151,196,.25)}
.win:hover::before, .win:focus-within::before{opacity:1}
.win:hover .win-bar span:first-child, .win:focus-within .win-bar span:first-child{background:var(--lav)}
.win:hover .win-ex li, .win:focus-within .win-ex li{border-color:rgba(189,178,218,.35)}
.win:hover .win-link, .win:focus-within .win-link{color:var(--lav-hi); border-color:var(--lav)}
.win:hover .win-link .arr, .win:focus-within .win-link .arr{transform:translateX(5px)}
.win:focus-within{outline:2px solid var(--lav); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .win, .win:hover, .win:focus-within{transform:none}
  .win:hover .win-link .arr, .win:focus-within .win-link .arr{transform:none}
}

@media (min-width:900px){ .hero-media img{object-position:30% 0} }
@media (min-width:900px) and (max-width:1199px){ .hero-media img{object-position:48% 0} }

/* Écrans très larges : la photo garde toute sa hauteur (pas de tête coupée) */
@media (min-width:900px) and (min-aspect-ratio: 2/1){ .hero-media{background:#08070c} .hero-media img{object-fit:contain; object-position:100% 0} }

/* Vidéos YouTube : vignette, chargement au clic */
.work .media iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt-play{position:absolute; inset:0; margin:auto; width:68px; height:68px; border-radius:50%; border:1px solid rgba(242,238,231,.7);
  background:rgba(17,17,22,.6); color:var(--text); font-size:20px; padding-left:5px; cursor:pointer; backdrop-filter:blur(4px); z-index:2;
  transition:background-color .25s, border-color .25s, transform .25s var(--ease)}
.yt-play:hover,.yt-play:focus-visible{background:var(--deep); border-color:var(--lav); transform:scale(1.06)}
.status.poste{color:var(--champ)}

/* ===== Hero mobile : texte posé sur le bas de la photo ===== */
@media (max-width:899px){
  .hero-media{position:absolute; inset:0 0 auto 0; height:min(80svh, 720px)}
  .hero-media .shade{background:linear-gradient(to top, var(--bg) 0%, rgba(17,17,22,.92) 30%, rgba(17,17,22,.25) 58%, rgba(17,17,22,0) 75%)}
  .hero > .wrap{position:relative; z-index:2; pointer-events:none}
  .hero-text{pointer-events:auto; padding-top:max(44svh, 330px)}
  .hero-text .lead{font-size:14px}
  .handle{top:30%}
  /* étiquettes : petites, collées à la ligne, à hauteur de poitrine (jamais sur le visage) */
  .flab{top:calc(30% + 34px); font-size:9.5px; letter-spacing:.06em; padding:4px 7px}
  .flab.a{left:var(--split); right:auto; transform:translateX(calc(-100% - 8px))}
  .flab.b{left:var(--split); right:auto; transform:translateX(8px)}
}

/* ===== Accueil : miniatures dans les 4 fenêtres ===== */
.win-thumb{position:relative; aspect-ratio:16/7; overflow:hidden; border-bottom:1px solid rgba(242,238,231,.07)}
.win-thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  filter:saturate(.8) brightness(.82) contrast(1.03); transition:filter .3s var(--ease), transform .6s var(--ease)}
.win-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(48,39,71,.25), rgba(27,27,36,.55)); pointer-events:none; transition:opacity .3s}
.win:hover .win-thumb img, .win:focus-within .win-thumb img{filter:saturate(1) brightness(.95); transform:scale(1.03)}
.win:hover .win-thumb::after, .win:focus-within .win-thumb::after{opacity:.6}
@media (prefers-reduced-motion:reduce){ .win:hover .win-thumb img{transform:none} }

.svc-hero{padding-bottom:clamp(40px,5vw,64px)}
.svc-collab .modes-text{margin-top:28px}

/* Fil d'Ariane vertical des offres (ordinateur) */
.svc-rail{display:none}
@media (min-width:1280px){
  .svc-rail{display:flex; flex-direction:column; gap:4px; position:fixed; z-index:40; left:22px; top:50%; transform:translateY(-50%);
    opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
  .svc-rail.show{opacity:1; visibility:visible}
  .svc-rail::before{content:""; position:absolute; left:6px; top:14px; bottom:14px; width:1px; background:var(--line-2)}
  .svc-rail a{position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px 8px 0; text-decoration:none; font-family:var(--mono); font-size:11.5px; color:var(--text-2); transition:color .2s}
  .svc-rail .dot{width:13px; height:13px; border-radius:50%; background:var(--bg); border:1px solid var(--line-2); flex-shrink:0; transition:background-color .25s, border-color .25s}
  .svc-rail .n{color:#8E88A0}
  .svc-rail .t{max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .3s var(--ease), opacity .25s}
  .svc-rail:hover .t, .svc-rail a:focus-visible .t{max-width:200px; opacity:1}
  .svc-rail:hover{background:rgba(17,17,22,.92); border-radius:4px; box-shadow:0 0 0 10px rgba(17,17,22,.92)}
  .svc-rail a:hover, .svc-rail a.on{color:var(--text)}
  .svc-rail a.on .dot{background:var(--lav); border-color:var(--lav)}
  .svc-rail a.on .n{color:var(--lav)}
}

/* À propos */
.about-text{max-width:760px; display:grid; gap:18px}
.about-text p{font-size:clamp(17px,1.35vw,19px); line-height:1.75; color:var(--text-2)}
.about-text p:first-child{color:var(--text)}
.curio{display:grid; grid-template-columns:1fr; overflow:hidden; background:var(--bg-2); border:1px solid rgba(164,151,196,.3); border-radius:6px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
@media (min-width:860px){ .curio{grid-template-columns:.95fr 1.05fr} }
.curio-img{margin:0; position:relative; min-height:240px}
.curio-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.curio-txt{padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; justify-content:center; gap:14px}
.curio-txt h2{font-size:clamp(22px,2.2vw,30px)}
.curio-txt p{color:var(--text-2); font-size:17px; line-height:1.7}

@media (min-width:1600px){ .svc-rail .t{max-width:200px; opacity:1} .svc-rail:hover{background:none; box-shadow:none} }

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); padding:48px 0 40px; background:var(--bg)}
.footer-grid{display:grid; grid-template-columns:1fr; gap:24px 40px}
@media (min-width:860px){ .footer-grid{grid-template-columns:1fr auto; align-items:start} }
.f-brand{font-family:var(--mono); font-size:14px; color:var(--text)}
.f-brand .b-main{letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.f-tag{font-family:var(--mono); font-size:12.5px; color:var(--text-2); margin-top:8px}
.footer-links{display:flex; flex-wrap:wrap; gap:10px 26px}
.f-bottom{grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:#8E88A0}
.f-bottom a{color:#8E88A0; text-decoration:none}
.f-bottom a:hover{color:var(--text)}

/* ===== Hero : signature + porteur ===== */
.hero-sig{margin-top:30px; display:flex; flex-direction:column; gap:6px; font-family:var(--mono)}
.hero-sig .sig{font-size:13px; color:var(--champ); letter-spacing:.04em}
.hero-sig .by{font-size:12px; color:var(--text-2)}

/* ===== Réalisations : études de cas ===== */
.cases{padding:clamp(24px,3vw,40px) 0 clamp(56px,6vw,96px)}
.case{display:grid; grid-template-columns:1fr; gap:28px 56px; padding:clamp(40px,5vw,72px) 0; border-top:1px solid var(--line); scroll-margin-top:80px; align-items:start}
.case:first-child{border-top:0}
.case:focus{outline:none}
@media (min-width:960px){ .case{grid-template-columns:1.05fr .95fr} .case.flip .case-media{order:2} .case.no-media{grid-template-columns:1fr; max-width:820px} }
.case-media .media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); border-radius:var(--radius)}
.case-media .media img,.case-media .media iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0}
.case-media .status{position:absolute; left:12px; top:12px}
.case-media .draft{position:absolute; right:12px; bottom:12px; background:var(--champ); color:var(--bg)}
.tag.draft.inline{display:inline-block; position:static; background:var(--champ); color:var(--bg); margin:-6px 0 18px}
.case-body h2{font-size:clamp(22px,2.4vw,32px); margin:12px 0 22px}
.case-dl{display:grid; gap:0; margin:0}
.case-dl > div{display:grid; grid-template-columns:1fr; gap:4px 20px; padding:14px 0; border-top:1px solid var(--line)}
@media (min-width:600px){ .case-dl > div{grid-template-columns:120px 1fr} }
.case-dl dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); padding-top:3px}
.case-dl dd{margin:0; font-size:16px; line-height:1.6; color:var(--text)}
.case-dl .res dd{font-family:var(--mono); font-size:clamp(18px,1.8vw,22px); color:var(--champ)}
.case-tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.case-tools li{font-family:var(--mono); font-size:12px; color:var(--text-2); border:1px solid var(--line-2); border-radius:3px; padding:5px 10px}
.work .body .label{display:block; margin-bottom:-2px}

/* ===== À propos : parcours en progression ===== */
.path{display:grid; grid-template-columns:1fr; gap:0; position:relative}
@media (min-width:900px){ .path{grid-template-columns:repeat(4,1fr); gap:28px} .path::before{content:""; position:absolute; left:0; right:0; top:15px; height:1px; background:linear-gradient(90deg, var(--line-2), var(--lav) 85%)} }
.path li{position:relative; padding:20px 0 22px 44px; border-top:1px solid var(--line)}
.path li .idx{position:absolute; left:0; top:20px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--bg-2); border:1px solid var(--lav); color:var(--lav); font-size:11.5px}
@media (min-width:900px){ .path li{padding:52px 0 0; border-top:0} .path li .idx{top:0} }
.path h3{font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px}
.path p{color:var(--text-2); font-size:15.5px}
.milestone{margin-top:32px; display:inline-flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12.5px; color:var(--text-2); padding:9px 14px; border:1px solid var(--line); border-radius:3px}
.milestone .y{color:var(--champ)}

/* ===== Contact simplifié ===== */
.contact-hero{padding-bottom:clamp(56px,7vw,96px)}
.contact-grid{display:grid; grid-template-columns:1fr; gap:40px 72px; align-items:start}
@media (min-width:1000px){ .contact-grid{grid-template-columns:1fr 1fr} }
.contact-title{font-size:clamp(24px,2.6vw,36px) !important; line-height:1.18}
.contact-links{margin-top:30px; display:grid; gap:12px}
.contact-links li{display:flex; gap:14px; align-items:baseline}
.contact-links a{font-family:var(--mono); color:var(--lav-hi); text-decoration:none; border-bottom:1px solid rgba(164,151,196,.4)}
.contact-links a:hover{border-color:var(--lav)}
.contact-grid .form{max-width:none; background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:clamp(22px,3vw,34px)}
.chips{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.chips legend{display:block; width:100%; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; margin-bottom:10px; color:var(--text)}
.chips label{cursor:pointer}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips span{display:inline-block; font-family:var(--mono); font-size:12.5px; padding:8px 13px; border:1px solid var(--line-2); border-radius:3px; color:var(--text-2); transition:background-color .2s, border-color .2s, color .2s}
.chips label:hover span{border-color:var(--lav); color:var(--text)}
.chips input:checked + span{background:var(--lav); border-color:var(--lav); color:var(--bg)}
.chips input:focus-visible + span{outline:2px solid var(--lav); outline-offset:2px}
.hint-f a{color:var(--lav-hi)}
.legal{max-width:760px; display:grid; gap:14px; color:var(--text-2)}
.legal b{color:var(--text)}
.legal a{color:var(--lav-hi)}
.svc-int .svc-benefit{margin-top:24px}

/* ===== Contact : formulaire éditorial en 3 blocs ===== */
.contact-intro{display:grid; grid-template-columns:1fr; gap:24px 72px; align-items:end}
@media (min-width:960px){ .contact-intro{grid-template-columns:1fr 1fr} }
.contact-intro .lead{max-width:48ch}
.cform{display:grid; gap:0; max-width:1040px}
.cblock{border:0; margin:0; padding:clamp(28px,3.5vw,44px) 0; border-top:1px solid var(--line-2); display:grid; grid-template-columns:1fr; gap:18px 56px}
@media (min-width:900px){ .cblock{grid-template-columns:240px 1fr} }
.cblock legend{float:left; width:100%; padding:0; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--text); display:flex; gap:12px; align-items:baseline}
@media (min-width:900px){ .cblock legend{width:auto} }
.cblock legend .n{color:var(--lav); letter-spacing:0}
.cfields{display:grid; grid-template-columns:1fr; gap:26px 32px; clear:both}
@media (min-width:700px){ .cfields{grid-template-columns:1fr 1fr} .cfields .full{grid-column:1 / -1} }
@media (min-width:900px){ .cfields{clear:none} }
.cform .field label{display:block; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--text); margin-bottom:10px}
.cform .req{color:var(--lav)}
.cform .opt{color:#8E88A0}
.cform input[type=text],.cform input:not([type]),.cform input[type=email],.cform textarea,.cform select{
  width:100%; font:inherit; font-size:16px; color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--line-2); border-radius:0; padding:10px 2px 12px; transition:border-color .2s, background-color .2s}
.cform textarea{min-height:150px; resize:vertical; border:1px solid var(--line-2); padding:14px; border-radius:var(--radius); line-height:1.6}
.cform input:hover,.cform select:hover,.cform textarea:hover{border-color:rgba(164,151,196,.55)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none; border-color:var(--lav); background:rgba(48,39,71,.18)}
.cform textarea::placeholder,.cform input::placeholder{color:#7d778d}
.cform [aria-invalid="true"]{border-color:#E08A8A}
.select{position:relative}
.select::after{content:"↓"; position:absolute; right:6px; top:50%; transform:translateY(-55%); font-family:var(--mono); color:var(--lav); pointer-events:none}
.cform select{appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer; min-height:48px; white-space:normal; text-overflow:ellipsis}
.cform select option{background:var(--bg-2); color:var(--text)}
.cform .hint-f{font-size:14px; color:var(--text-2); margin:0 0 12px; line-height:1.55}
.checks{display:grid; grid-template-columns:1fr; gap:4px 24px}
@media (min-width:700px){ .checks{grid-template-columns:1fr 1fr} }
.check{display:flex; align-items:flex-start; gap:12px; padding:10px 6px; min-height:44px; cursor:pointer; border-radius:3px; transition:background-color .2s}
.check:hover{background:rgba(48,39,71,.25)}
.check input{position:absolute; opacity:0; width:1px; height:1px}
.check .box{flex-shrink:0; width:18px; height:18px; margin-top:2px; border:1px solid var(--line-2); border-radius:3px; display:grid; place-items:center; transition:background-color .2s, border-color .2s}
.check .box::after{content:""; width:9px; height:5px; border-left:2px solid var(--bg); border-bottom:2px solid var(--bg); transform:rotate(-45deg) translate(1px,-1px); opacity:0}
.check input:checked + .box{background:var(--lav); border-color:var(--lav)}
.check input:checked + .box::after{opacity:1}
.check input:focus-visible + .box{outline:2px solid var(--lav); outline-offset:2px}
.check .t{font-size:15.5px; color:var(--text-2); line-height:1.45}
.check input:checked ~ .t{color:var(--text)}
.check small{color:#8E88A0; font-size:13px}
.check.seul .t{font-family:var(--mono); font-size:13.5px}
.csend{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.csend .hint-f{margin:0; max-width:46ch; font-size:13px}
.cform .form-status{grid-column:1 / -1}
.cform .field label.check{display:flex; font-family:inherit; font-size:inherit; letter-spacing:0; margin:0; color:inherit}
.cform .field label.check .t{font-family:var(--sans, inherit)}
.cform .field label.check.seul .t{font-family:var(--mono)}

/* ===== Boutons discrets : version consultante / version créative ===== */
.facets{position:absolute; z-index:4; display:flex; gap:2px; padding:3px; border:1px solid rgba(242,238,231,.18); border-radius:3px;
  background:rgba(17,17,22,.55); backdrop-filter:blur(6px); left:0; top:calc(max(44svh, 330px) - 46px)}
.facets button{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
  background:transparent; border:0; border-radius:2px; padding:8px 11px; min-height:32px; cursor:pointer; transition:color .2s, background-color .2s}
.facets button:hover{color:var(--text)}
.facets button:focus-visible{outline:1px solid var(--lav); outline-offset:1px}
.facets button[aria-pressed="true"]{background:rgba(48,39,71,.85); color:var(--lav-hi)}
.facets button[data-v="front"][aria-pressed="true"]{color:var(--champ)}
@media (min-width:900px){ .facets{position:relative; left:auto; top:auto; display:inline-flex; margin-top:28px} }
.flab{display:none}
@media (min-width:1100px){ .hero-index{bottom:96px} }
.about-text p strong{font-weight:600; color:var(--text)}
.about-text p:first-child{font-size:clamp(19px,1.6vw,22px); line-height:1.6}
.about-text p:first-child strong{color:var(--lav-hi)}

/* À propos : moins d'espace entre l'intro et le texte */
.page-hero:has(.about-hero){padding-bottom:clamp(32px,4vw,56px)}
.about-sec{padding-top:clamp(16px,2vw,32px)}

/* Prix et diplômes : cases alignées sous le parcours */
.milestones{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:700px){ .milestones{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .milestones{grid-template-columns:repeat(4,1fr); gap:14px} }
.milestones .milestone{margin:0; display:flex; align-items:flex-start; gap:12px; line-height:1.5; padding:12px 14px}
.milestones .milestone b{display:block; font-weight:500; color:var(--text); letter-spacing:.06em; text-transform:uppercase; font-size:11px; margin-bottom:2px}
@media (min-width:1000px){
  .about-text{max-width:none; grid-template-columns:1fr 1fr; column-gap:clamp(40px,5vw,80px); row-gap:20px}
  .about-text p:first-child{grid-column:1 / -1; font-size:clamp(24px,2.1vw,30px); line-height:1.35; margin-bottom:12px}
}

@media (min-width:900px){ .about-hero .lead{max-width:60ch} }
/* Portrait À propos : plus petit */
.about-img{max-width:320px; justify-self:end}
@media (max-width:899px){ .about-img{max-width:260px; justify-self:start} }

/* Contact : icônes tout en bas */
.contact-icons{margin-top:clamp(48px,6vw,72px); padding-top:28px; border-top:1px solid var(--line); display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.contact-icons ul{list-style:none; margin:0; padding:0; display:flex; gap:12px}
.contact-icons a{width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:50%; color:var(--text-2); text-decoration:none; transition:color .2s, border-color .2s, background-color .2s}
.contact-icons a:hover,.contact-icons a:focus-visible{color:var(--lav-hi); border-color:var(--lav); background:rgba(48,39,71,.4)}
.contact-icons .ic-txt{font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:-.02em}
.contact-icons{max-width:1040px}

/* Hero accueil : titre sur 2 lignes + sous-titre + accroche */
.hero-text .display{font-size:clamp(28px, 7vw, 52px)}
@media (min-width:700px){ .hero-text .display{font-size:clamp(32px, 3.3vw, 46px)} }
.hero-sub{font-family:var(--mono); font-size:clamp(16px,1.5vw,20px); color:var(--text); letter-spacing:.01em; margin:-8px 0 22px}
.hero-text .lead{margin-bottom:14px}
.hero-hook{font-family:var(--mono); font-size:15px; color:var(--lav-hi); margin-bottom:32px}
@media (max-width:899px){ .hero-hook{font-size:14px} }
@media (min-width:900px){ .hero-text .display{white-space:nowrap} .hero-text .lead{max-width:520px} }
/* Repères du hero (remplacent l'index des offres) */
.hero-index{list-style:none; margin:0; padding:0}
@media (min-width:1100px){
  .hero-index{gap:44px; bottom:72px}
  .hero-index li{display:grid; gap:6px; max-width:190px}
  .hero-index b{font-size:26px}
  .hero-index small{line-height:1.5}
  .hero-sig .by{display:none}
}
@media (min-width:1100px){
  .hero-index{gap:0; padding:18px 6px; background:rgba(17,17,22,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(242,238,231,.1); border-radius:3px}
  .hero-index li{padding:0 26px; max-width:none}
  .hero-index li + li{border-left:1px solid rgba(242,238,231,.14)}
  .hero-index b{font-size:24px}
  .hero-index small{color:var(--text-2); white-space:nowrap}
}
.hero-text .display{letter-spacing:.005em}
@media (min-width:700px){ .hero-text .display{font-size:clamp(32px, 3.15vw, 44px)} }
.hero-text .display{line-height:1.12}

/* ===== Mode « spot » (test) ===== */
.hero-media.spot .back{clip-path:circle(var(--r, 0px) at var(--x, 70%) var(--y, 30%)); transition:none}
.hero-media.spot .split-line,.hero-media.spot .handle{display:none}
.hero-media.spot::after{content:""; position:absolute; z-index:2; pointer-events:none; left:var(--x); top:var(--y); width:calc(var(--r, 0px) * 2); height:calc(var(--r, 0px) * 2);
  transform:translate(-50%,-50%); border-radius:50%; box-shadow:0 0 0 1px rgba(184,170,230,.35), 0 0 60px 6px rgba(140,110,220,.18) inset}

@media (hover:none){ .hero-media.spot{cursor:pointer} }
/* Spot « lumen » : bord doux au lieu d'un cercle net */
.hero-media.spot .back{clip-path:none;
  -webkit-mask-image:radial-gradient(circle at var(--x, 70%) var(--y, 30%), #000 0, #000 calc(var(--r, 0px) * .45), rgba(0,0,0,.6) calc(var(--r, 0px) * .75), transparent var(--r, 0px));
          mask-image:radial-gradient(circle at var(--x, 70%) var(--y, 30%), #000 0, #000 calc(var(--r, 0px) * .45), rgba(0,0,0,.6) calc(var(--r, 0px) * .75), transparent var(--r, 0px))}
.hero-media.spot::after{box-shadow:none; mix-blend-mode:screen; width:calc(var(--r, 0px) * 2.4); height:calc(var(--r, 0px) * 2.4);
  background:radial-gradient(circle, rgba(170,140,255,.10) 0, rgba(170,140,255,.05) 45%, transparent 70%)}

/* Hero ordinateur : cadrage moins serré, on voit le bas de la jupe et un peu de jambe */
@media (min-width:900px){
  .hero-media{inset:0 0 7% 0}
  .hero-media .shade{background:linear-gradient(90deg, rgba(17,17,22,.94) 0%, rgba(17,17,22,.7) 30%, rgba(17,17,22,0) 54%), linear-gradient(to top, var(--bg) 0%, rgba(17,17,22,0) 12%)}
}
@media (min-width:900px){
  .hero-media{left:auto; right:0; width:min(100%, calc(min(100svh, 920px) * .93 * 2.01))}
  .hero-media img{object-fit:cover}
}
@media (min-width:900px) and (min-aspect-ratio: 2/1){ .hero-media{background:transparent} .hero-media img{object-fit:cover; object-position:30% 0} }
/* Repères : dans la colonne de texte, hors de la photo */
.hero-index{display:none}
@media (min-width:900px){
  .hero-text .hero-index{display:flex; position:static; gap:0; margin-top:34px; padding:0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none}
  .hero-text .hero-index li{display:grid; gap:4px; padding:0 22px; max-width:none}
  .hero-text .hero-index li:first-child{padding-left:0}
  .hero-text .hero-index li + li{border-left:1px solid rgba(242,238,231,.14)}
  .hero-text .hero-index b{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--text)}
  .hero-text .hero-index small{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); white-space:nowrap}
  .hero-sig .by{display:none}
  .hero-media .shade{background:linear-gradient(90deg, rgba(17,17,22,.94) 0%, rgba(17,17,22,.7) 30%, rgba(17,17,22,0) 54%), linear-gradient(to top, var(--bg) 0%, rgba(17,17,22,0) 6%)}
}

/* Photo -10 % et boutons de version sous la photo (ordinateur) */
@media (min-width:900px){
  .hero{--H:min(100svh, 920px); --W:min(100vw, calc(var(--H) * .84 * 2.01))}
  .hero-media{inset:0 0 auto auto; height:calc(var(--H) * .84); width:var(--W)}
  .facets{position:absolute; z-index:4; top:auto; left:auto; margin:0; display:inline-flex; bottom:calc(var(--H) * .08 - 20px); right:calc(var(--W) * .30 - 150px)}
  .hero-sig{display:none}
}
@media (max-width:899px){ .facets{left:var(--gutter)} }
/* Photo descendue : la tête passe sous le menu */
@media (min-width:900px){
  .hero{min-height:calc(var(--H) + 48px)}
  .hero > .wrap{min-height:calc(var(--H) + 48px)}
  .hero-media{top:calc(var(--H) * .09)}
  .facets{bottom:22px}
}
@media (min-width:900px){
  .hero{min-height:var(--H)}
  .hero > .wrap{min-height:var(--H)}
  .hero-media{top:calc(var(--H) * .08)}
  .hero-media .shade{background:linear-gradient(90deg, rgba(17,17,22,.94) 0%, rgba(17,17,22,.7) 30%, rgba(17,17,22,0) 54%), linear-gradient(to top, var(--bg) 0%, rgba(17,17,22,0) 6%), linear-gradient(to bottom, var(--bg) 0%, rgba(17,17,22,0) 7%)}
}
/* Repères en bas à gauche, même ligne que les boutons de version, style translucide */
@media (min-width:900px){
  .hero > .hero-index{display:flex; position:absolute; z-index:4; left:calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); bottom:22px; right:auto; top:auto;
    margin:0; padding:10px 4px; gap:0; background:rgba(17,17,22,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(242,238,231,.18); border-radius:3px}
  .hero > .hero-index li{display:grid; gap:3px; padding:0 18px; max-width:none}
  .hero > .hero-index li + li{border-left:1px solid rgba(242,238,231,.14)}
  .hero > .hero-index b{font-family:var(--mono); font-size:17px; font-weight:700; color:var(--text)}
  .hero > .hero-index small{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); white-space:nowrap}
  .facets{bottom:calc(22px + 0px)}
}
@media (min-width:900px) and (max-width:1199px){
  .hero > .hero-index li{padding:0 12px}
  .hero > .hero-index small{font-size:9px; letter-spacing:.06em}
  .hero > .hero-index b{font-size:15px}
}
@media (min-width:900px) and (max-width:1099px){ .hero > .hero-index{display:none} .hero-sig{display:flex} .hero-sig .by{display:block} }
/* Grands écrans : la photo se rapproche du texte (décalée vers la gauche) */
@media (min-width:900px){
  .hero{--shift:clamp(0px, calc((100vw - var(--W)) * .45), 260px)}
  .hero-media{right:var(--shift)}
  .hero-media .shade{background:linear-gradient(90deg, rgba(17,17,22,.94) 0%, rgba(17,17,22,.7) 30%, rgba(17,17,22,0) 54%), linear-gradient(to left, var(--bg) 0%, rgba(17,17,22,0) 8%), linear-gradient(to top, var(--bg) 0%, rgba(17,17,22,0) 6%), linear-gradient(to bottom, var(--bg) 0%, rgba(17,17,22,0) 7%)}
  .facets{right:calc(var(--shift) + var(--W) * .30 - 150px)}
}
/* Fiche avec capture : cadre aux proportions de l'image, étiquette en bas */
.case-media .media.is-img{aspect-ratio:16/10}
.case-media .media.is-img .tag{top:12px; bottom:auto; left:auto; right:12px}
/* Galerie de captures */
.case-media .media img[hidden]{display:none}
.gal-nav{position:absolute; z-index:3; right:12px; bottom:12px; display:flex; align-items:center; gap:2px; padding:3px; background:rgba(17,17,22,.7); backdrop-filter:blur(6px); border:1px solid rgba(242,238,231,.18); border-radius:3px}
.gal-nav button{width:36px; height:32px; background:transparent; border:0; color:var(--text); font-family:var(--mono); font-size:18px; cursor:pointer; border-radius:2px}
.gal-nav button:hover,.gal-nav button:focus-visible{background:rgba(48,39,71,.85); color:var(--lav-hi)}
.gal-count{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-2); padding:0 6px}
.gal-nav{bottom:auto; top:12px; right:auto; left:50%; transform:translateX(-50%)}
.case-media .gal-nav{position:static; transform:none; display:inline-flex; margin-top:10px; background:transparent; backdrop-filter:none; border-color:var(--line-2)}
.case-media .media.is-img .tag.status{display:none}
.work .media a + .tag.status{display:none} .works.lead-first > :first-child .media img{object-position:50% 35%}
.case-media .tag.status{display:none} .case-body .label .yr{color:var(--champ)}

/* ===== Spot « lumen » identique à la page Indépendants ===== */
.hero-media.spot .front,.hero-media.spot .back{clip-path:none; -webkit-mask-image:none; mask-image:none; transition:none}
.hero-media.spot .front{z-index:0}
.hero-media.spot .back{z-index:1;
  -webkit-mask-image:radial-gradient(circle var(--r, 0px) at var(--x, 70%) var(--y, 30%), #000 0%, #000 35%, rgba(0,0,0,.6) 60%, transparent 100%);
          mask-image:radial-gradient(circle var(--r, 0px) at var(--x, 70%) var(--y, 30%), #000 0%, #000 35%, rgba(0,0,0,.6) 60%, transparent 100%)}
.hero-media.spot.alt .back{z-index:0; -webkit-mask-image:none; mask-image:none}
.hero-media.spot.alt .front{z-index:1;
  -webkit-mask-image:radial-gradient(circle var(--r, 0px) at var(--x, 70%) var(--y, 30%), #000 0%, #000 35%, rgba(0,0,0,.6) 60%, transparent 100%);
          mask-image:radial-gradient(circle var(--r, 0px) at var(--x, 70%) var(--y, 30%), #000 0%, #000 35%, rgba(0,0,0,.6) 60%, transparent 100%)}
.hero-media.spot::after{z-index:2; left:0; top:0; width:100%; height:100%; transform:none; border-radius:0; box-shadow:none; mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--r, 0px) * 1.35) at var(--x, 70%) var(--y, 30%), rgba(164,124,255,.16), rgba(164,124,255,0) 70%)}
.hero-media.spot .shade{z-index:3}
.hero-media.spot{z-index:0; isolation:isolate}

/* Recommandation */
.testi{margin:clamp(40px,5vw,64px) 0 0; padding:clamp(24px,3vw,40px); border:1px solid var(--line); border-left:2px solid var(--lav); border-radius:var(--radius); background:var(--bg-2)}
.testi blockquote{margin:0 0 18px; font-size:clamp(17px,1.6vw,21px); line-height:1.6; color:var(--text); max-width:72ch}
.testi figcaption{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.testi figcaption b{color:var(--lav-hi); font-weight:500}
.testi figcaption a{color:var(--text-2)}

/* Boutons de version : icônes seules */
.facets button{padding:0; width:38px; height:34px; min-height:34px; display:grid; place-items:center; letter-spacing:0}
.facets button svg{display:block}
@media (min-width:900px){ .facets{right:calc(var(--shift, 0px) + var(--W, 100vw) * .30 - 40px)} }
/* Mobile : discrets, en haut à droite sous le menu, plus au-dessus du titre */
@media (max-width:899px){
  .facets{left:auto; right:var(--gutter); top:auto; bottom:auto; top:calc(max(44svh, 330px) - 150px); flex-direction:column; gap:4px}
}

/* Bascule façon Mauscraft : texte, en bas à gauche ; repères juste à côté */
.facets button{width:auto; height:auto; min-height:34px; padding:.75em 1.1em; font-size:10.5px; letter-spacing:.1em; display:inline-block}
@media (min-width:900px){
  .facets{left:calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); right:auto; top:auto; bottom:22px; flex-direction:row}
  .hero > .hero-index{left:calc(max(0px, (100% - var(--max)) / 2) + var(--gutter) + 236px)}
  .hero-text{padding-bottom:110px}
}
@media (min-width:900px) and (max-width:1099px){ .facets{bottom:22px} }
@media (max-width:899px){
  .facets{left:var(--gutter); right:auto; top:auto; bottom:28px; flex-direction:row}
  .hero-text{padding-bottom:96px}
}