/* ADN Consulting Motors 976 — "la nuit, et le trajet jusqu'au 976".
   Base: the Celeste Motors dark stylesheet (celeste.css, its warm tones turned neutral by 8_theme_celeste.py).
   The brand is the logo: chrome on black, one streak of red light, "976" in red. So: neutral black, silver type,
   the logo red for actions and for the 976 at the end of every route. Real photos are the only images. */
:root{
  --bg:#0A0A0C; --night:#060608; --night-2:#111114; --night-3:#1A1A1F; --night-line:rgba(255,255,255,.08); --night-muted:#8B8B94;
  --paper:#0A0A0C; --card:#111114; --sunk:#16161A; --raise:#1D1D22;
  --ink:#F2F2F4; --ink-2:#C3C3CA; --muted:#8B8B94; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --gold:#E3141E; --gold-2:#FF2A35; --gold-ink:#FF4049; --gold-soft:rgba(227,20,30,.12);
  --hot:#E3141E; --hot-soft:rgba(227,20,30,.12); --hanko:#E3141E; --focus:#FF4049;
  color-scheme:dark;
}
::selection{background:var(--gold);color:#fff}
.btn-gold{color:#fff}
.btn-gold:hover{background:var(--gold-2)}
.brand img{height:42px}
.footer .lg img{height:64px}
.nav a[aria-current="page"]::after{background:var(--gold)}

/* the route, ADN's signature: origin → 976, the 976 in the logo red */
.rt{white-space:nowrap}
.rt .ar{margin:0 3px;color:var(--muted)}
.rt b{color:var(--gold-ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- hero: plain black, the promise, then the five real cars as the picture (red only on the buttons and the 976) ---------- */
.adn-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--night);border-bottom:1px solid var(--line)}
/* one of their own night photos fills the right side and melts into the black, under the text */
.adn-top{position:relative;isolation:isolate}
.adn-top>.ph{position:absolute;z-index:-1;top:0;right:0;width:min(62%,940px);height:100%;object-fit:cover;object-position:50% 46%;filter:brightness(.82) saturate(.95);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 34%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 34%);mask-composite:intersect}
.adn-top>.wrap{padding-block:112px 8px}
.adn-hero h1{font-size:clamp(40px,5.2vw,76px);font-weight:600;letter-spacing:-.035em;line-height:.98;max-width:760px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.adn-hero h1 em{font-style:normal;color:var(--gold-ink)}
.adn-hero .lead{margin-top:24px;max-width:560px;font-size:18px;color:var(--ink-2)}
.adn-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.adn-hero .hero-meta{margin-top:30px}
.adn-hero .hero-meta b{color:var(--ink)}
.adn-hero .strip{margin-top:64px;padding-bottom:64px}

/* the strip (Celeste "voitures importées"): landscape photos so one car stays a small part of the screen, the route under each, the gallery on click */
.strip{grid-auto-columns:272px;scroll-padding-inline:max(24px,calc((100vw - var(--wrap))/2 + 24px))}
.strip .im{aspect-ratio:4/3}
.strip-b{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in}
.strip .im{position:relative}
.strip img{object-position:50% 62%}
.strip figcaption{font-size:15px;font-weight:600;color:var(--ink)}
.strip figcaption span{font-weight:400;color:var(--muted)}
.strip figcaption small{margin-top:5px;font-size:13.5px;color:var(--ink-2)}
.strip .n{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;background:rgba(6,6,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 12.5px var(--f)}
.strip .n .ico{width:14px;height:14px}
.wm::after{content:"";position:absolute;right:5%;bottom:4%;width:30%;aspect-ratio:2.2;background:url(logo-nuit.png) center/contain no-repeat;opacity:.7;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* ---------- steps band (Celeste "how") ---------- */
.how>img{opacity:.2}
.how .adn-acts{margin-top:52px}

/* ---------- packs: the three prices of their form, side by side, and the two rules that go with them ---------- */
.adn-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.adn-pack{display:flex;flex-direction:column;gap:6px;padding:30px 28px;transition:background .18s}
.adn-pack+.adn-pack{border-left:1px solid var(--line)}
.adn-pack:hover{background:var(--sunk)}
.adn-pack small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.adn-pack b{font-family:var(--f-d);font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.adn-pack .link{margin-top:14px}
.adn-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.adn-rule{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg)}
.adn-rule .ico{width:20px;height:20px;flex:none;margin-top:2px;color:var(--gold-ink)}
.adn-rule b{display:block;color:var(--ink);font-size:15px}
.adn-rule p{margin-top:4px;color:var(--ink-2);font-size:14px;line-height:1.55}

/* ---------- questions ---------- */
.adn-faq{max-width:860px}

/* ---------- photo viewer caption ---------- */
.lb-cap{position:fixed;left:50%;bottom:60px;translate:-50% 0;margin:0;max-width:min(92vw,760px);padding:10px 16px;border-radius:var(--r);background:rgba(6,6,8,.72);color:var(--ink-2);font-size:14px;text-align:center}
.lb-cap b{color:#fff}
.lb-cap a{color:#fff;text-decoration:underline;margin-left:6px;white-space:nowrap}
html.lb-open{overflow:hidden}

@media (max-width:980px){
  .adn-top>.wrap{padding-block:72px 0}
  .adn-top>.ph{width:72%}
  .adn-packs{grid-template-columns:1fr}
  .adn-pack{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;padding:20px}
  .adn-pack+.adn-pack{border-left:0;border-top:1px solid var(--line)}
  .adn-pack small{width:100%}
  .adn-pack b{font-size:34px}
  .adn-pack .link{margin-top:0}
  .adn-rules{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* phones: the photo on top, the title rises out of it */
  .adn-top>.ph{width:100%;height:300px;object-position:62% 70%;
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 60%);mask-image:linear-gradient(0deg,transparent 0,#000 60%)}
  .adn-top>.wrap{padding-block:176px 0}
  .adn-hero .hero-meta span:nth-child(3){display:none}
  .adn-hero h1{font-size:40px}
  .adn-hero .lead{font-size:16px;margin-top:16px}
  .adn-acts{flex-direction:column;align-items:stretch;margin-top:26px}
  .adn-hero .hero-meta{gap:10px 18px;margin-top:22px}
  .adn-hero .strip{margin-top:40px;padding-bottom:40px}
  .strip{grid-auto-columns:220px;scroll-padding-inline:16px}
  .sec{padding-block:56px}
  .sec.tight{padding-block:36px}
}

/* details */
.adn-hero .hero-meta span{display:inline}
.adn-hero .hero-meta{gap:10px 28px}
.btn-wa .ico:not(.fill){color:var(--ink)}
.btn-wa:hover{border-color:var(--ink-2)}

/* ---------- phones: a short page (about 4 screens), nothing pushed off the header ---------- */
@media (max-width:640px){
  .adn-mh-cta{display:none}
  .adn-hero #voitures{margin-top:30px!important}
  .how .wrap{padding-block:52px}
  .how h2{font-size:28px}
  /* the four steps: one swipeable row, as on Star Car phones */
  .how-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:28px -16px 0;padding:0 16px 4px;scroll-padding-inline:16px;border-top:0}
  .how-cols::-webkit-scrollbar{display:none}
  .how-cols div,.how-cols div+div{scroll-snap-align:start;padding:20px!important;border:1px solid var(--line-2)!important;border-radius:var(--r-lg);background:rgba(17,17,20,.72);margin:0!important}
  .how-cols h3{font-size:18px;margin-top:10px}
  .how-cols p{font-size:14px;margin-top:8px}
  .how .adn-acts{margin-top:26px}
  .adn-pack{padding:16px 18px}
  .adn-pack b{font-size:30px}
  .adn-rule{padding:16px}
  .qa summary{padding:18px 0;font-size:16.5px}
  .qa .a{padding:0 8px 20px 42px}
}

/* ---------- inner pages (Celeste page head) ---------- */
/* each page opens on one of their own photos, dimmed into the night */
.phead .bg{opacity:.42;filter:saturate(.9);object-position:50% 62%}
.phead::after{background:linear-gradient(90deg,rgba(6,6,8,.82) 0%,rgba(6,6,8,.35) 70%),linear-gradient(0deg,rgba(6,6,8,.9) 0%,rgba(6,6,8,0) 60%)}
.phead .lead{max-width:680px}
.phead .adn-acts{margin-top:26px}
.sec-h{font-size:clamp(24px,2.4vw,32px);margin-bottom:22px}

/* our cars: Celeste's card, three to a row; the photos open full screen; the last cell is the next one, theirs */
.acq-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.acq .ph{display:block;width:100%;padding:0;border:0;cursor:zoom-in}
.acq .ph img{object-position:50% 62%}
.acq .ph .n{position:absolute;right:12px;top:12px;bottom:auto;z-index:2;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;background:rgba(6,6,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 12.5px var(--f)}
.acq .ph .n .ico{width:14px;height:14px}
.acq .bd{gap:10px}
.acq .rt{font-size:13px;color:var(--ink-2)}
.acq .t{margin-top:6px;font-size:19px}
.acq .specs{color:var(--muted)}
.acq .ig{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.acq .ig .ico{width:15px;height:15px}
.acq .ig:hover{color:var(--ink)}
.acq-next{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:100%;padding:28px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.acq-next>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 70%;opacity:.42}
.acq-next::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,6,8,.96) 18%,rgba(6,6,8,.35))}
.acq-next .rt{font-size:13px;color:var(--ink-2)}
.acq-next h2{font-size:clamp(24px,2.2vw,30px)}
.acq-next p{color:var(--ink-2);font-size:15px;line-height:1.55}
.acq-next .btn{align-self:flex-start;margin-top:6px}

/* how it works: a numbered timeline, the origins illustrated by their real cars */
.stp{display:grid;grid-template-columns:110px minmax(0,1fr);gap:28px;padding:44px 0;border-top:1px solid var(--line)}
.stp:first-child{border-top:0;padding-top:0}
.stp .no{font-family:var(--f-d);font-size:56px;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.stp h2{font-size:clamp(24px,2.4vw,32px)}
.stp p{margin-top:12px;max-width:660px;color:var(--ink-2);font-size:16.5px;line-height:1.65}
.stp .adn-acts{margin-top:22px}
.orig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.og{display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);transition:border-color .15s}
.og:hover{border-color:var(--line-2)}
.og .im{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--sunk)}
.og .im img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.og .tx{padding:16px 18px 18px}
.og .tx b{display:block;font-family:var(--f-d);font-size:19px;font-weight:600;color:var(--ink)}
.og .tx small{display:block;margin-top:2px;color:var(--gold-ink);font-size:13px;font-weight:600}
.og .tx p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.5}

/* packs: what a pack is, what ADN does, what the budget covers */
.pk-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.pk-intro p{color:var(--ink-2);font-size:17px;line-height:1.7}
.pk-intro p+p{margin-top:14px}
.pk-intro p b{color:var(--ink);font-weight:600}
.svc-l{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.svc-l li{display:flex;gap:12px;align-items:flex-start;padding:15px 18px;font-size:15.5px;color:var(--ink)}
.svc-l li+li{border-top:1px solid var(--line)}
.svc-l .ico{width:18px;height:18px;margin-top:3px;color:var(--gold-ink);stroke-width:2.2}
.svc-l small{display:block;color:var(--muted);font-size:13.5px}
.bud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bud div{padding:22px;border:1px solid var(--line);border-radius:var(--r-lg)}
.bud small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.bud b{display:block;margin-top:10px;font-family:var(--f-d);font-size:20px;font-weight:600;color:var(--ink)}
.bud p{margin-top:6px;color:var(--ink-2);font-size:14.5px;line-height:1.55}

@media (max-width:900px){
  .acq-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stp{grid-template-columns:1fr;gap:8px;padding:32px 0}
  .stp .no{font-size:40px}
  .orig{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:0 16px 4px;scroll-padding-inline:16px}
  .orig::-webkit-scrollbar{display:none}
  .og{scroll-snap-align:start}
  .pk-intro{grid-template-columns:1fr;gap:24px}
  .pk-intro p{font-size:16px}
  .bud{grid-template-columns:1fr}
}

/* phones: each car is one short row (photo left, what matters right), as on Star Car phones */
@media (max-width:640px){
  .acq-g{grid-template-columns:1fr;gap:10px}
  .acq{flex-direction:row}
  .acq .ph{flex:none;width:40%;aspect-ratio:auto;min-height:132px}
  .acq .ph .n{top:8px;right:8px;height:22px;padding:0 7px;font-size:11.5px}
  .acq .ph .n .ico{width:12px;height:12px}
  .acq .bd{padding:12px 14px;gap:6px;min-width:0}
  .acq .rt{font-size:12px}
  .acq .t{margin-top:3px;font-size:16px}
  .acq .t small{font-size:12.5px}
  .acq .specs{font-size:12px}
  .acq .specs .d{display:none}
  .acq .ft{padding-top:8px}
  .acq .price small{display:none}
  .acq .price b{font-size:17px}
  .acq .ig{display:none}
  .acq-next{padding:22px 20px;min-height:0}
  .acq-next h2{font-size:22px}
  .acq-next p{font-size:14px}
  .acq-next .btn{align-self:stretch}
}