/* Garage BA Mécanique — page CSS on top of the kit (assets/). The kit keeps the grid, the
   sections, the buttons and the hover layer; this file holds the brand: the logo's thick
   capitals, the splatter of the business cards, the red of the shop sign, on a dark ground. */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --splat-light: url("../images/eclaboussures-blanc.svg");
  --ok: #5ad17f;            /* « Ouvert maintenant » : 9.6:1 on the ground */
  --star: #f2b62c;
  --footer-bg: #0b0a0a;
  color-scheme: dark;
}

/* ---------- browser surfaces ---------- */
::selection { background: var(--p-action); color: #fff; }
html { accent-color: var(--p-action); caret-color: var(--p-action); scrollbar-color: #3a3835 var(--p-bg); }
a { text-underline-offset: 0.18em; }

/* ---------- display type: the logo's thick capitals ---------- */
h1, h2, .promo__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.06;
  text-wrap: balance;
  hyphens: manual;
}
.hero--split .hero__text h1 { line-height: 1.07; }

/* ---------- logo (the client's own lettering and illustration, vectorised, white) ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__art { width: auto; height: 40px; display: block; }
.logo__name { width: auto; height: 19px; display: block; }
@media (max-width: 639px) {
  .logo__art { height: 34px; }
  .logo__name { height: 16px; }
}

/* ---------- hero: the business card's splatter behind the words ---------- */
.hero--split { position: relative; isolation: isolate; }
.hero--split::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--splat-light) 0 0 / 520px auto repeat;
  opacity: 0.05;
}
@media (max-width: 1023px) { .hero--split::before { background-size: 380px auto; } }

.hero__kicker { color: var(--p-muted); }
.hero__kicker[data-etat="ouvert"] { color: var(--ok); }
.hero__tel { margin-top: var(--s-5); font-size: var(--t-lead); font-variant-numeric: tabular-nums; }
.hero__tel .link { font-weight: 500; }
@media (max-width: 639px) { .hero__tel { display: none; } }

/* the rating card on the photograph: a dark card, the stars in their own gold */
.rating { color: var(--p-ink); text-decoration: none; background: var(--p-bg); border-color: rgb(255 255 255 / 0.12); }
.rating .ly-float__row { color: var(--p-muted); }
.rating .stars { display: inline-flex; color: var(--star); }
.rating .stars svg { width: 84px; height: 17px; fill: currentColor; display: block; }
.rating__score { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: 0.01em; margin-right: 4px; }
.rating .ly-float__title { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }

/* ---------- services ---------- */
.services__list > li { padding-block: 10px; }
.services__list > li:first-child { padding-top: 0; }
.services__list .rows__name {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 20px; line-height: 1.15; letter-spacing: 0.01em;
}
.services__list > li > p { margin: 2px 0 0; color: var(--p-ink); }
.services__photo { margin: 0; align-self: stretch; overflow: hidden; border-radius: var(--r-lg); background: var(--p-bg); }
.services__photo picture, .services__photo img { display: block; width: 100%; height: 100%; }
.services__photo img { object-fit: cover; object-position: 50% 40%; }

/* ---------- video on demand (js/videos.js): poster + play button, the file loads on the click ---------- */
.clip { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: #000; aspect-ratio: 9 / 16; }
.clip > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.clip.is-playing > video { object-fit: contain; }
.clip__play {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
  transition: opacity 200ms var(--ease-out-strong), visibility 0s;
}
.clip.is-playing .clip__play { opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s 160ms; }
.clip__poster, .clip__poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.clip__poster img { object-fit: cover; transition: transform 300ms var(--ease-out-strong); }
.clip__disc {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--p-action); box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
  transition: transform 160ms var(--ease-out-strong);
}
.clip__disc svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.clip__time {
  position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; border-radius: 6px;
  background: rgb(0 0 0 / 0.72); color: #fff; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.clip__play:active .clip__disc { transform: scale(0.95); }
.clip__play:focus-visible { outline: 3px solid var(--p-ink); outline-offset: -3px; }
.clip__play:focus-visible .clip__disc { outline: 3px solid #fff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .clip__play:hover .clip__disc { transform: scale(1.06); }
  .clip__play:hover .clip__poster img { transform: scale(1.025); }
}

/* services: the inspection video and the t-shirt, two tall frames level with the list */
@media (min-width: 1024px) {
  #services .services__list, #services .services__clip, #services .services__photo { align-self: stretch; }
  #services .services__clip, #services .services__photo { aspect-ratio: auto; height: auto; }
}
@media (max-width: 1023px) {
  #services .services__clip, #services .services__photo { margin-top: var(--s-6); aspect-ratio: 9 / 16; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #services .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #services .services__list { grid-column: 1 / -1; }
  #services .services__clip, #services .services__photo { grid-column: auto; }
}
@media (max-width: 639px) {
  #services .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #services .services__list { grid-column: 1 / -1; }
  #services .services__clip, #services .services__photo { grid-column: auto; }
  .clip__disc { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .clip__disc svg { width: 24px; height: 24px; }
}

/* ---------- à propos: « 30 ans » set large, the presentation video beside it ---------- */
.apropos__text { display: grid; gap: var(--s-6); align-content: start; }
.apropos__text > * { margin: 0; }
.apropos__chiffre { display: grid; gap: var(--s-2); }
.apropos__plus { font-size: var(--t-lead); font-weight: 500; color: var(--p-muted); }
.apropos__nombre {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(96px, 13vw, 200px); line-height: 0.88; letter-spacing: 0.005em;
  color: var(--p-action);
}
.apropos__suite { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: 0.01em; }
.apropos__lead { max-width: 52ch; }
.apropos__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
/* the large frame: the vertical video centred, its own poster blurred behind it on the sides */
.clip--large { background: #000; }
.clip--large::before { content: ""; position: absolute; inset: -40px; background: url("../videos/presentation-apercu-400.jpg") center / cover no-repeat; filter: blur(28px) brightness(0.45); pointer-events: none; }
.clip--large .clip__poster { left: 50%; right: auto; width: auto; aspect-ratio: 9 / 16; transform: translateX(-50%); }
.clip--large .clip__poster img { object-fit: cover; }
.clip--large > video { object-fit: contain; z-index: 0; }
.clip--large:not(.is-playing) > video { visibility: hidden; }
@media (min-width: 1024px) {
  #apropos .apropos__clip { aspect-ratio: auto; height: min(660px, calc(100svh - var(--padt) - var(--padb) - var(--bar))); align-self: start; }
}
@media (max-width: 1023px) {
  #apropos .apropos__clip { width: min(100%, 360px); margin-top: var(--s-7); }
  .clip--large .clip__poster { left: 0; width: 100%; transform: none; }
}

.social {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--p-ink); text-decoration: none; font-weight: 500;
  transition: color 160ms ease;
}
.social .ic { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) { .social:hover { color: #ff6b5e; } }
@media (max-width: 639px) {
  .apropos__links { flex-wrap: nowrap; gap: var(--s-4); }
  .social { min-width: 44px; justify-content: center; }
  .social__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- promotions (hidden until the client switches it on) ---------- */
.promo__offre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5); align-items: start; }
.promo__clip { width: 100%; }
.promo__texte { display: grid; gap: var(--s-3); }
.promo__texte > * { margin: 0; }
.promo__title { font-size: var(--t-h3, 28px); }
.promo__prix { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--p-action); }
.promo__prix span { font-family: var(--font-text); font-size: var(--t-body); color: var(--p-muted); }
@media (max-width: 1023px) { .promo__offre + .promo__offre { margin-top: var(--s-7); } }

/* ---------- adresse et heures ---------- */
.visit--card { background: var(--p-surface); padding: var(--s-7); border-radius: var(--r-lg); align-self: stretch; align-content: start; }
.visit__now { margin: 0; font-weight: 500; font-size: var(--t-body); color: var(--p-muted); }
.visit__now[data-etat="ouvert"] { color: var(--ok); }
.visit__address a { color: inherit; text-decoration: underline; text-decoration-color: rgb(242 240 235 / 0.35); text-decoration-thickness: 1px; transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .visit__address a:hover { text-decoration-color: currentColor; } }
.visit__tel { margin: 0; font-size: var(--t-lead); font-variant-numeric: tabular-nums; }
.visit__tel .link { font-weight: 500; }
.hours dd { font-variant-numeric: tabular-nums; }
.visit__photo { margin: 0; overflow: hidden; border-radius: var(--r-lg); align-self: stretch; }
.visit__photo picture, .visit__photo img { display: block; width: 100%; height: 100%; }
.visit__photo img { object-fit: cover; object-position: 52% 60%; }
@media (min-width: 1024px) {
  #visite .visite__grid { min-height: min(560px, calc(100svh - var(--padt) - var(--padb) - var(--bar) - 108px)); align-items: stretch; }
  #visite .visit--card { display: flex; flex-direction: column; gap: var(--s-6); }
  #visite .visit--card > .btn-row { margin-top: auto; }
  #visite .visit__address { font-size: 24px; line-height: 36px; }
  #visite .hours { font-size: 18px; }
  #visite .hours > * { padding-block: 6px; }
}
@media (max-width: 1023px) { .visit__photo { aspect-ratio: 4 / 3; margin-top: var(--s-6); } }
@media (max-width: 639px) {
  .visit--card { padding: var(--s-5); }
  .visit__cols { grid-template-columns: 1fr; }
  .visit__photo { aspect-ratio: 1 / 1; }
}

/* ---------- footer: one step darker than the page, with the card's splatter ---------- */
footer.closing.footer--dark { position: relative; isolation: isolate; background: var(--footer-bg); border-top: 1px solid rgb(255 255 255 / 0.08); }
footer.closing.footer--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--splat-light) 100% 0 / 560px auto repeat;
  opacity: 0.045;
}
.footer__lede { font-family: var(--font-text); font-size: var(--t-body); line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--p-muted); }
.footer__legal { color: var(--p-muted); }
.close__media picture { position: absolute; inset: 0; display: block; }
.close__media picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; }

/* ---------- reduced motion: everything rests ---------- */
@media (prefers-reduced-motion: reduce) {
  .social, .visit__address a, .clip__play, .clip__disc, .clip__poster img { transition: none; }
}