/* Layout: one narrow column. Home = logo, short presentation, a schematic map of the machines, then a list of locations. Each location opens the stock page of its machine. */
/* Self-hosted fonts (SIL Open Font License), Latin subset with only the weights the site uses. Regenerate with tools/make-fonts.sh */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/source-sans-3-latin.woff2") format("woff2"); }
:root {
  --bg: #f1f5fa;
  --surface: #ffffff;
  --fg: #14202e;
  --muted: #55667a;
  --line: #d6e0ec;
  --accent: #3a7bc0;
  --accent-ink: #2a5f98;
  --accent-soft: #e3eefa;
  --map-bg: #e6eff9;
  --ok: #1d7f47;
  --ok-soft: #e0f3e8;
  --low: #9a5b00;
  --low-soft: #fdf0d8;
  --out: #a63428;
  --out-soft: #fbe5e2;
  --soon: #3a7bc0;
  --gauge-off: #d6e0ec;
  --foot-bg: #14202e;
  --foot-fg: #e6edf5;
  --foot-muted: #9fb2c6;
  --foot-line: #2a3a4d;
  --foot-accent: #8dbbed;
  --gold: #f0b457;
  --gold-soft: rgba(240, 180, 87, .16);
  --gold-ink: #1a1308;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11161d; --surface: #1a212b; --fg: #e8eef5; --muted: #9aabbd; --line: #2a3442;
    --accent: #6aa5e0; --accent-ink: #8dbbed; --accent-soft: #1f2f43; --map-bg: #161f2b;
    --ok: #5ccb8a; --ok-soft: #173326; --low: #e8b052; --low-soft: #38290f;
    --out: #f08b7e; --out-soft: #3a1c18; --soon: #6aa5e0; --gauge-off: #2a3442;
    --foot-bg: #0a0e13; --foot-fg: #e6edf5; --foot-muted: #93a5b8; --foot-line: #222c39; --foot-accent: #8dbbed;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11161d; --surface: #1a212b; --fg: #e8eef5; --muted: #9aabbd; --line: #2a3442;
  --accent: #6aa5e0; --accent-ink: #8dbbed; --accent-soft: #1f2f43; --map-bg: #161f2b;
  --ok: #5ccb8a; --ok-soft: #173326; --low: #e8b052; --low-soft: #38290f;
  --out: #f08b7e; --out-soft: #3a1c18; --soon: #6aa5e0; --gauge-off: #2a3442;
  --foot-bg: #0a0e13; --foot-fg: #e6edf5; --foot-muted: #93a5b8; --foot-line: #222c39; --foot-accent: #8dbbed;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.45; padding-inline: 16px; padding-block: 20px 0; }
#machines, #apropos, #atouts, #nouveautes, #pourquoi, #contact, #fonctionnement, #faq, #professionnels { scroll-margin-top: 84px; }
.wrap { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
[hidden] { display: none !important; }
header { display: flex; align-items: center; gap: 14px; }
.logo { width: 88px; height: 88px; flex: none; border-radius: 16px; display: block; }
h1 { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.05; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1.15; margin: 0; text-wrap: balance; }
.tag { color: var(--muted); font-size: 15px; margin-top: 4px; }
.where { color: var(--muted); font-size: 14px; margin-top: 2px; }
a { color: var(--accent-ink); }
a:focus-visible, button:focus-visible, .pin:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.intro { display: flex; flex-direction: column; gap: 10px; }
.intro p { margin: 0; max-width: 62ch; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.points li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: block; }
.points b { display: block; }
.points span { color: var(--muted); font-size: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.map-box { border-radius: 10px; background: var(--map-bg); overflow: hidden; }
svg.map { display: block; width: 100%; height: auto; }
.map .grid line { stroke: var(--line); stroke-width: 1; }
.map .ref { fill: var(--muted); font: 600 12px var(--f-body); }
.map .lbl { fill: var(--fg); font: 700 13px var(--f-body); paint-order: stroke; stroke: var(--map-bg); stroke-width: 4px; stroke-linejoin: round; }
.pin { cursor: pointer; }
.pin .dot { stroke: var(--surface); stroke-width: 3; }
.pin.open .dot { fill: var(--ok); }
.pin.soon .dot { fill: var(--soon); }
.pin:hover .halo, .pin:focus-visible .halo { opacity: .35; }
.halo { opacity: 0; fill: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.loc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.loc:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px 2px rgba(106, 165, 224, .55); }
.loc .n { font-weight: 700; overflow-wrap: anywhere; }
.loc .m { color: var(--muted); font-size: 13px; }
.badge { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.badge.open { background: var(--ok-soft); color: var(--ok); }
.badge.soon { background: var(--accent-soft); color: var(--accent-ink); }
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.status { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.openl { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ok); }
.openl i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block; }
.upd { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.promo { background: var(--accent); color: #fff; border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.promo b { font-family: var(--f-display); font-size: 20px; }
.promo span { font-size: 14px; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--gold); color: var(--gold-ink); border-radius: 6px; padding: 1px 8px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-weight: 600; font-size: 14px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
ul.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul.items li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.thumb { width: 96px; height: 96px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--accent-ink); }
.thumb svg { width: 64px; height: 64px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 440px) {
  ul.items li { grid-template-columns: 88px minmax(0, 1fr); }
  .avail { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .thumb { width: 88px; height: 88px; }
  .thumb svg { width: 58px; height: 58px; }
}
.name { font-weight: 700; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 13px; }
.tag-new { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--gold-soft); color: var(--gold); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.avail { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pill { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.s3 .pill { background: var(--ok-soft); color: var(--ok); }
.s1 .pill { background: var(--low-soft); color: var(--low); }
.s0 .pill { background: var(--out-soft); color: var(--out); }
.gauge { display: flex; gap: 3px; }
.gauge span { width: 22px; height: 6px; border-radius: 3px; background: var(--gauge-off); }
.s3 .gauge span { background: var(--ok); }
.s1 .gauge span:first-child { background: var(--low); }
.s0 { opacity: .8; }
.foot { color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.foot a { font-weight: 600; }
.socials { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.soon-box { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; }
/* Menu bar: transparent at the top of the page, frosted glass once the page scrolls (.scrolled is set by js/main.js).
   The glass is drawn by ::before so that the full-screen phone menu (position: fixed) is not trapped inside the bar. */
.nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 10; border: 1px solid transparent; border-radius: 16px; padding: 8px 10px 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; transition: border-color .3s ease, box-shadow .3s ease; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); opacity: 0; transition: opacity .3s ease; }
.nav.scrolled { border-color: var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.nav.scrolled::before { opacity: 1; }
.nav-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); font-family: var(--f-display); font-weight: 800; font-size: 18px; position: relative; z-index: 2; }
.nav-brand img { width: auto; height: 50px; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) { position: relative; display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--fg); font-weight: 600; font-size: 15px; }
.nav-links a:not(.btn):hover { background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent), 0 0 14px 1px rgba(106, 165, 224, .55); }
/* Section on screen: underlined with the brand gradient */
/* Same fading trail as the section titles, drawn in from the left. */
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, var(--gold), var(--accent) 55%, transparent); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: #fff; }
.burger { display: none; position: relative; z-index: 2; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 15px; color: var(--fg); background: var(--accent-soft); border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.burger svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .nav { padding: 10px 12px 10px 12px; } .nav-brand img { height: 64px; } }

/* Phones and tablets: full-screen menu */
@media (max-width: 899px) {
  .burger { display: inline-flex; }
  .nav-links { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 90px 24px 40px;
    background: radial-gradient(circle at 80% 15%, color-mix(in srgb, #b48cf0 30%, transparent), transparent 55%), radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%), #0a0e13;
    visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
  .nav.open .nav-links { visibility: visible; opacity: 1; transition: opacity .3s ease; }
  .nav-links li { opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; }
  .nav.open .nav-links li { opacity: 1; transform: none; }
  .nav.open .nav-links li:nth-child(2) { transition-delay: .05s; } .nav.open .nav-links li:nth-child(3) { transition-delay: .1s; }
  .nav.open .nav-links li:nth-child(4) { transition-delay: .15s; } .nav.open .nav-links li:nth-child(5) { transition-delay: .2s; }
  .nav .nav-links a:not(.btn) { font-family: var(--f-display); font-size: 30px; font-weight: 800; text-align: center; padding: 10px 16px; }
  .nav-links a:not(.btn)::after { left: 30%; right: 30%; bottom: 3px; }
  html.menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav-links, .nav-links li { transition: none !important; } }
.hero { display: block; position: relative; overflow: hidden; background: var(--foot-bg); color: var(--foot-fg); border-radius: 18px; padding: 24px 20px 22px; }
.hero::before { content: ""; position: absolute; right: -70px; top: -70px; width: 300px; height: 300px; border-radius: 50%; background-image: radial-gradient(circle, var(--foot-accent) 1.3px, transparent 2px); background-size: 12px 12px; opacity: .4; -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%); pointer-events: none; }
.hero-in { position: relative; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { font-size: 34px; line-height: 1.05; max-width: 14ch; }
.hero p { margin: 0; max-width: 46ch; color: var(--foot-fg); opacity: .9; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-block; padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 15px; overflow-wrap: anywhere; }
.btn.primary { background: var(--gold); color: var(--gold-ink); }
.btn.ghost { border: 1px solid var(--foot-muted); color: var(--foot-fg); }
.btn:hover { filter: brightness(1.08); }
.btn.primary:hover { box-shadow: 0 0 0 1px var(--gold), 0 0 18px 2px rgba(240, 180, 87, .55); }
.btn.ghost:hover { border-color: var(--foot-accent); box-shadow: 0 0 0 1px var(--foot-accent), 0 0 18px 2px rgba(141, 187, 237, .5); }
.btn:focus-visible { outline: 3px solid var(--foot-accent); outline-offset: 2px; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { border: 1px solid var(--foot-line); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--foot-fg); }
.points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.points svg { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); box-sizing: border-box; }
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
ol.steps li { background: var(--bg); border: 1px solid transparent; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
ol.steps li:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px 2px rgba(106, 165, 224, .55); }
ol.steps span:not(.num) { color: var(--muted); font-size: 14px; }
.num { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); padding: 10px 0; }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq p { margin: 8px 0 0; color: var(--muted); }
.host { background: var(--accent-soft); border: 1px solid transparent; border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.host p { margin: 0; color: var(--muted); }
.host .btn.primary { background: var(--gold); color: var(--gold-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .host .btn.primary { background: var(--gold); color: var(--gold-ink); } }
:root[data-theme="dark"] .host .btn.primary { background: var(--gold); color: var(--gold-ink); }
footer.site { background: var(--foot-bg); color: var(--foot-fg); margin: 28px -16px 0; padding: 32px 16px 28px; }
.foot-in { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.foot-brand img { width: auto; height: 72px; flex: none; display: block; }
.foot-brand span { color: var(--foot-muted); font-size: 14px; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
footer h2 { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--foot-muted); margin: 0 0 10px; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
footer a { color: var(--foot-fg); text-decoration: none; overflow-wrap: anywhere; }
footer a:hover { color: var(--foot-accent); text-decoration: underline; }
footer a:focus-visible { outline: 3px solid var(--foot-accent); outline-offset: 2px; }
footer .contact li { font-size: 15px; }
.foot-legal { border-top: 1px solid var(--foot-line); padding-top: 16px; font-size: 13px; color: var(--foot-muted); display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .chip, .halo { transition: background .15s, border-color .15s, opacity .15s; }
  /* Smooth color changes on hover (menu, buttons, location cards, links) */
  a, .burger, .btn, .loc, .nav-links a, .soc-ico, .leaflet-bar a { transition: color .25s ease, background-color .25s ease, border-color .25s ease, filter .25s ease, box-shadow .25s ease; }
  ol.steps li { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
  .step-art { transition: transform .3s ease; }
  ol.steps li:hover { transform: translateY(-3px); }
  ol.steps li:hover .step-art { transform: scale(1.08) rotate(-3deg); }
}

@media (min-width: 900px) {
  body { padding-inline: 32px; }
  .wrap { max-width: 1080px; }
  #machine { max-width: 760px; }
  #home { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  #home > .hero, #home > .intro, #home > #produits, #home > #fonctionnement { grid-column: 1 / -1; }
  #home > #machines { grid-column: 1 / -1; display: grid; grid-template-columns: 340px 1fr; column-gap: 20px; row-gap: 10px; align-items: start; }
  #machines > h2 { grid-column: 1 / -1; }
  #machines > .map-box { grid-column: 2; grid-row: 2; }
  #machines > .legend { grid-column: 2; grid-row: 3; }
  #machines > .locs { grid-column: 1; grid-row: 2 / 4; }
  #home > #faq { grid-column: 1; }
  #home > .host { grid-column: 2; align-self: stretch; }
  .hero { padding: 48px 44px; }
  .hero h1 { font-size: 46px; }
  .hero-in { max-width: 640px; }
  .intro p { font-size: 17px; }
  .points { grid-template-columns: repeat(3, 1fr); }
  footer.site { margin-inline: -32px; padding-inline: 32px; }
  .foot-in { max-width: 1080px; }
  .nav-links { gap: 8px; }
}

/* Illustrations */
.hero-art { display: block; width: 150px; height: auto; margin: 18px auto 0; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery li { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gallery .ph { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--accent-soft); border: 1px solid var(--line); }
.gallery .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery b { display: block; font-size: 15px; }
.gallery span { color: var(--muted); font-size: 13px; }
/* Card tilt on hover (see js/main.js): the card leans towards the mouse with a foil-like shine */
.tilt { position: relative; transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tilt-scale, 1)); transition: transform .5s ease, box-shadow .5s ease; }
.tilt::before, .tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; }
/* Holographic rainbow sheen that slides with the mouse */
.tilt::before { background: linear-gradient(115deg, transparent 20%, rgba(255,0,140,.35) 36%, rgba(255,230,0,.35) 44%, rgba(0,255,170,.35) 52%, rgba(0,160,255,.35) 60%, rgba(180,0,255,.35) 68%, transparent 82%); background-size: 250% 250%; background-position: var(--shift, 50%) var(--shift, 50%); mix-blend-mode: color-dodge; }
/* Sharp white glint under the cursor */
.tilt::after { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), rgba(255,255,255,.12) 18%, transparent 42%); mix-blend-mode: overlay; }
.tilt.tilting { --tilt-scale: 1.04; z-index: 1; transition: transform .08s linear, box-shadow .3s ease; box-shadow: 0 18px 36px rgba(0,0,0,.5); }
.tilt.tilting::before { opacity: .9; }
.tilt.tilting::after { opacity: 1; }
.banner { display: block; width: 100%; height: auto; aspect-ratio: 760 / 240; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
@media (min-width: 900px) {
  .hero-art { position: absolute; right: 56px; bottom: -34px; width: 300px; margin: 0; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

/* Real map (Leaflet) */
.leaflet-map { height: 380px; background: var(--map-bg); border-radius: 10px; z-index: 0; }
.leaflet-map[data-map-style="osm"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); }
.leaflet-container { font-family: var(--f-body); }
.leaflet-control-attribution { background: rgba(17, 22, 29, .75) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--accent-ink) !important; }
.pin-wrap { background: none; border: 0; }
.pin-dot { display: block; width: 22px; height: 22px; margin: 3px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.pin-dot.open { background: var(--ok); }
.pin-dot.soon { background: var(--soon); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--fg); }
.leaflet-popup-content { margin: 12px 14px; }
.pop { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pop b { font-size: 15px; }
.pop span:not(.badge) { color: var(--muted); font-size: 13px; }
.pop a { margin-top: 4px; font-weight: 700; }
.map-fallback { margin: 0; padding: 24px; color: var(--muted); }
@media (min-width: 900px) { .leaflet-map { height: 480px; } }
.leaflet-container .pop a { color: var(--accent-ink); }
.leaflet-bar a { background: var(--surface); color: var(--fg); border-color: var(--line); }
.leaflet-bar a:hover { background: var(--accent-soft); }

/* Social network icons (footer) */
footer a.social { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
footer a.social .ico { width: 20px; height: 20px; max-width: 20px; flex: none; margin-top: 2px; }

/* "Comment ça marche" (how it works) illustrations */
.step-top { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.step-art { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--line); display: block; flex: none; }
/* Phones: one column of horizontal cards (picture left, text right) so no step is left alone on its row */
@media (max-width: 599px) {
  ol.steps { grid-template-columns: minmax(0, 1fr); }
  ol.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px; }
  .step-top { grid-row: 1 / span 2; position: relative; margin: 4px 0 0; }
  .step-top .num { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; font-size: 13px; margin: 0; box-shadow: 0 0 0 2px var(--bg); }
  ol.steps b { align-self: end; }
}
/* Tablets and up: always three steps side by side */
/* Tablets: two steps per row, large screens: all four side by side */
@media (min-width: 600px) { ol.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { ol.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.items li.empty { display: block; color: var(--muted); text-align: center; padding: 18px; }

/* Preview of a machine not yet open */
.items li.sp .pill { background: var(--accent-soft); color: var(--accent-ink); }

/* Social network icons of the "Ouverture prochainement" (opening soon) box */
.socials { gap: 8px; margin-top: 4px; }
.soc-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--accent-ink); }
.soc-ico:hover { background: var(--accent-soft); }
.soc-ico svg { width: 26px; height: 26px; max-width: 26px; }
.follow { font-weight: 700; margin-top: 6px; }
.follow + .socials { margin-top: 0; }

/* Language flag of a product */
.flag { display: inline-block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; vertical-align: -2px; margin-left: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.flag svg { display: block; width: 100%; height: 100%; }

/* Product image zoom on hover */
.thumb-zoom { position: fixed; z-index: 1000; width: 280px; height: 280px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; color: var(--accent-ink); }
.thumb-zoom svg { width: 70%; height: 70%; }
.thumb-zoom img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb:has(img) { cursor: zoom-in; }

/* Legal pages */
.legal h2 { font-family: var(--f-display); font-size: 17px; margin: 22px 0 6px; }
.legal h2:first-child, .legal .upd + h2 { margin-top: 14px; }
.legal p, .legal li { line-height: 1.6; }
.legal ul, .legal ol { padding-left: 20px; margin: 8px 0; }
.legal a { color: var(--accent-ink); }
.legal .upd { color: var(--muted); font-size: 13px; margin: 0; }
.legal .todo { background: var(--accent-soft); border-left: 3px solid var(--accent-ink); padding: 8px 12px; border-radius: 6px; font-size: 14px; }

/* Typography: bolder titles and display font on key labels */
h1, h2 { letter-spacing: -0.02em; }
h2 { font-size: 24px; }
/* Thin trail under section titles, same as the business card: gold to accent blue, fading out to the right with a tapered tail. */
h2::after { content: ""; display: block; width: 110px; height: 4px; margin-top: 8px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, var(--gold), var(--accent) 55%, transparent); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); }
.hero h1 { font-size: 40px; letter-spacing: -0.03em; background: linear-gradient(100deg, #ffffff 0%, var(--foot-accent) 55%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.points b, ol.steps b, .gallery b, .loc .n, .faq summary, .btn, .nav-links a:not(.btn), .pills li, .badge { font-family: var(--f-display); font-weight: 600; }
.btn { font-size: 16px; letter-spacing: .01em; }
@media (min-width: 900px) {
  h2 { font-size: 30px; }
  .hero h1 { font-size: 58px; }
}

/* Machine page on larger screens: wider layout and products shown as a card grid */
@media (min-width: 640px) {
  ul.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two products per row: availability goes under the name so the name keeps enough width */
  ul.items li { grid-template-columns: 88px minmax(0, 1fr); }
  ul.items li .thumb { width: 88px; height: 88px; }
  ul.items li .avail { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 900px) {
  #machine { max-width: 1080px; width: 100%; }
  #machine .banner { max-height: 260px; }
  #machine h1 { font-size: 40px; }
  #machine .where { font-size: 16px; }
  #m-live > .wrap { max-width: none; }
  #m-soon { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: center; padding: 20px 24px; }
  #m-soon > h2, #m-soon > div:not(.follow):not(.socials) { grid-column: 1; }
  #m-soon > .follow { grid-column: 2; grid-row: 1; margin-top: 0; }
  #m-soon > .socials { grid-column: 2; grid-row: 2 / span 2; }
  #m-live .status, #m-live .promo { padding: 14px 20px; }
  ul.items { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
  ul.items li { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-items: start; gap: 10px 8px; padding: 12px; }
  ul.items li .thumb { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1; }
  ul.items li .thumb svg { width: 45%; height: 45%; }
  ul.items li > div:nth-child(2) { grid-column: 1 / -1; }
  ul.items li .avail { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  ul.items li.empty { grid-column: 1 / -1; }
  .thumb:has(img) { cursor: inherit; }
  /* Product cards grow more than the home gallery on hover, to see the product better */
  ul.items li.tilt.tilting { --tilt-scale: 1.12; z-index: 2; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  ul.items li:not(.empty) { transition: border-color .25s ease, box-shadow .25s ease, transform .5s ease; }
  ul.items li:not(.empty):hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px 2px rgba(106, 165, 224, .55); }
}

/* Hero vending machine: larger, and beside the text (not over it) on wide screens */
.hero-art { width: 200px; }
@media (min-width: 600px) { .hero-art { width: 240px; } }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .hero-in { grid-column: 1; grid-row: 1; }
  .hero-art { position: static; grid-column: 2; grid-row: 1; align-self: end; width: clamp(260px, 27vw, 350px); margin: 0 0 -82px; }
}

/* "Dans nos machines": compact tiles (small picture beside the text) */
.gallery { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.gallery li { flex-direction: row; align-items: center; gap: 12px; background: var(--bg); border-radius: 12px; padding: 8px 12px 8px 8px; }
.gallery .ph { width: 60px; flex: none; aspect-ratio: 1; }
.gallery li > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery .ph { width: 72px; }
}
.gallery .ph img { object-fit: contain; }

/* Key points: illustrations in the same style as the product gallery */
.points li { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
.pt-art { width: 64px; height: 64px; border-radius: 12px; display: block; }

/* Airier home page: more space between and inside sections */
#home { gap: 32px; }
#home > .card { padding: 22px 18px; gap: 16px; }
#home > .host { padding: 28px 20px; gap: 12px; }
#home h2 { margin-bottom: 4px; }
.hero { padding: 32px 22px 28px; }
.hero-in { gap: 18px; }
@media (min-width: 900px) {
  #home { row-gap: 72px; column-gap: 28px; }
  #home > .card { padding: 40px 40px 44px; gap: 22px; border-radius: 20px; }
  #home > .host { padding: 44px 40px; gap: 16px; border-radius: 20px; }
  .hero { min-height: 560px; align-items: center; padding: 72px 64px; border-radius: 24px; }
  .hero-in { gap: 24px; }
  .hero p { font-size: 18px; }
  .hero-art { margin-bottom: -40px; }
  .points { gap: 18px; }
  .points li { padding: 18px 20px; }
  ol.steps { gap: 18px; }
  ol.steps li { padding: 20px; }
  .gallery { gap: 16px; }
  .gallery li { padding: 12px 16px 12px 12px; }
  h2 { font-size: 34px; }
}

/* Soft colored glows spread over the whole page height, moving slower than the content (parallax, see js/main.js) */
.bg-orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-orbs span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22; }
.bg-orbs span:nth-child(1) { width: 420px; height: 420px; left: -140px; top: 6%; background: var(--accent); }
.bg-orbs span:nth-child(2) { width: 360px; height: 360px; right: -120px; top: 22%; background: #b48cf0; }
.bg-orbs span:nth-child(3) { width: 300px; height: 300px; left: 40%; top: 42%; background: var(--gold); opacity: .12; }
.bg-orbs span:nth-child(4) { width: 440px; height: 440px; left: -140px; top: 68%; background: #b48cf0; opacity: .26; }
.bg-orbs span:nth-child(5) { width: 460px; height: 460px; right: -160px; top: 74%; background: var(--accent); opacity: .26; }
body { position: relative; z-index: 0; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Parallax: --sy is the scroll position in px, set by js/main.js */
  .bg-orbs span:nth-child(odd) { transform: translateY(calc(var(--sy, 0) * 0.08px)); }
  .bg-orbs span:nth-child(even) { transform: translateY(calc(var(--sy, 0) * 0.16px)); }
  .hero::before { transform: translateY(calc(var(--sy, 0) * 0.25px)); }
  /* Sections fade in and slide up when they enter the screen */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1); }
  .reveal.shown { opacity: 1; transform: none; }
  /* Titles, texts and tiles glide in from the left (rv-l), the right (rv-r) or below (rv-u), see js/main.js.
     A keyframe animation on the "translate" property, so it never fights the tilt effect or the hover transitions. */
  .rv { opacity: 0; }
  .rv.in { animation: rv-in 1s cubic-bezier(.22, .61, .36, 1) var(--rv-delay, 0s) both; }
  .rv-l { --rv-from: -36px 0; }
  .rv-r { --rv-from: 36px 0; }
  .rv-u { --rv-from: 0 28px; }
}
@keyframes rv-in {
  from { opacity: 0; translate: var(--rv-from, 0 28px); }
  to { opacity: 1; translate: 0 0; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Hero layers move at different speeds (wide screens only, so nothing gets cut off on phones) */
  .hero-in { transform: translateY(calc(var(--sy, 0) * 0.12px)); }
  .hero-art { transform: translateY(calc(var(--sy, 0) * -0.18px)); }
}

/* "Les nouveautés": showcase of the latest series */
.sec-lead { margin: -6px 0 0; color: var(--muted); }
.featured { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.featured li { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.featured .f-img { aspect-ratio: 1; border-radius: 10px; background: radial-gradient(circle at 50% 45%, var(--accent-soft), transparent 70%); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.featured img { width: 100%; height: 100%; object-fit: contain; display: block; }
.featured b { font-family: var(--f-display); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.featured span { color: var(--muted); font-size: 13px; }
.more { align-self: flex-start; font-weight: 700; text-decoration: none; }
.more:hover { text-decoration: underline; }
/* Five tiles: phone = 1 wide + 2x2, tablet = 2 wide + 3, desktop = one row of 5 */
.featured li:first-child { grid-column: 1 / -1; }
.featured li:first-child .f-img { max-height: 260px; }
@media (min-width: 600px) {
  .featured { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .featured li { grid-column: span 2; }
  .featured li:nth-child(-n+2) { grid-column: span 3; }
  .featured li:nth-child(-n+2) .f-img { max-height: 280px; }
  .featured b { font-size: 16px; }
  .featured span { font-size: 14px; }
}
@media (min-width: 1100px) {
  .featured { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  .featured li, .featured li:nth-child(-n+2) { grid-column: auto; padding: 14px; }
  .featured li:nth-child(-n+2) .f-img { max-height: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .featured li:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px 2px rgba(106, 165, 224, .55); }
}
@media (min-width: 900px) { #home > #nouveautes { grid-column: 1 / -1; } }

/* "Pourquoi nos distributeurs" and "Qui sommes-nous" */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.why li { background: var(--bg); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.why img { width: 56px; height: 56px; border-radius: 12px; display: block; margin-bottom: 6px; }
.why b { font-family: var(--f-display); font-weight: 600; overflow-wrap: anywhere; }
.why span { color: var(--muted); font-size: 14px; }
.about p { margin: 0; max-width: 70ch; line-height: 1.6; }
@media (min-width: 900px) {
  #home > #pourquoi, #home > #apropos { grid-column: 1 / -1; }
  .why { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .why li { padding: 22px; }
  .why img { width: 72px; height: 72px; }
  .about p { font-size: 17px; }
}
@media (min-width: 900px) {
  /* "Qui sommes-nous" and FAQ side by side, host block on its own full-width row */
  #home > #apropos { grid-column: 1; align-self: stretch; }
  #home > #faq { grid-column: 2; align-self: stretch; }
  #home > .host { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 48px; align-items: center; }
}
/* Smooth scrolling when clicking an in-page link (menu, "Trouver une machine"...) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 404 page */
.notfound { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-block: 40px; margin-top: 8px; }
.notfound .hero-in { align-items: center; }
.notfound h1 { max-width: 18ch; }
.notfound .cta { justify-content: center; }
.nf-art { width: 160px; height: 160px; border-radius: 24px; display: block; }
.nf-code { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold) !important; opacity: 1 !important; }
@media (min-width: 900px) {
  .notfound { display: flex; min-height: 0; padding: 64px 48px; }
  .nf-art { width: 200px; height: 200px; }
}

/* Accessibility: main landmark, keyboard skip link */
#contenu { display: flex; flex-direction: column; gap: 16px; outline: none; }
.notfound#contenu { gap: 8px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--gold); color: var(--gold-ink); font-weight: 700; text-decoration: none; transition: top .15s; }
.skip:focus { top: 12px; outline: 3px solid var(--fg); outline-offset: 2px; }

/* Full-width bands: some home sections run edge to edge, their content stays aligned with the rest of the page.
   The band breaks out of the centred column with negative margins and puts the same width back as padding. */
html { overflow-x: clip; }
#home > .bleed { --pad: 18px; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50% + var(--pad)); border-radius: 0; border-inline: 0; }
#home > .hero.bleed { --pad: 22px; }
#home > .card.bleed { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 70%, transparent)); border-block: 1px solid var(--line); }
#home > .host.bleed { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 26%, var(--bg)), color-mix(in srgb, #b48cf0 22%, var(--bg)) 60%, color-mix(in srgb, var(--gold) 18%, var(--bg))); border-block: 1px solid var(--line); }
#home > .host.bleed p { color: var(--fg); opacity: .85; }
@media (min-width: 900px) {
  #home > .bleed { --pad: 40px; grid-column: 1 / -1; }
  #home > .hero.bleed { --pad: 64px; min-height: 620px; }
  #home > .card.bleed { padding-block: 72px 80px; }
  #home > .host.bleed { padding-block: 64px; }
}

/* Background illustrations of the full-width bands (img/bands/), drawn behind the content */
#nouveautes.bleed, #pourquoi.bleed, .host.bleed { position: relative; overflow: hidden; isolation: isolate; }
#nouveautes.bleed::before, #pourquoi.bleed::before, .host.bleed::before {
  content: ""; position: absolute; inset: -60px 0; z-index: -1; pointer-events: none;
  background: var(--band-art) center / cover no-repeat; opacity: .55;
  transform: translateY(calc(var(--off, 0) * -0.12px));
}
#nouveautes.bleed { --band-art: url("../img/bands/cards.svg"); }
#pourquoi.bleed { --band-art: url("../img/bands/ribbons.svg"); }
.host.bleed { --band-art: url("../img/bands/map.svg"); }
.host.bleed::before { opacity: .8; }
/* Phones: the drawings sit behind the text, so they stay fainter */
@media (max-width: 899px) { #nouveautes.bleed::before, #pourquoi.bleed::before { opacity: .3; } .host.bleed::before { opacity: .45; background-position: 85% center; } }
@media (prefers-reduced-motion: reduce) { #nouveautes.bleed::before, #pourquoi.bleed::before, .host.bleed::before { transform: none; } }
/* The map drawing fades out under the text on the left */
.host.bleed::before { -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 60%); mask-image: linear-gradient(90deg, transparent 30%, #000 60%); }

/* Hero background scene (img/bands/hero.svg): spotlights, floor grid and floating cards around the machine */
.hero.bleed { isolation: isolate; }
.hero.bleed::after { content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none; background: url("../img/bands/hero.svg") 81% 100% / cover no-repeat; opacity: .9; }
@media (max-width: 899px) { .hero.bleed::after { opacity: .55; background-position: 81% 0; } }
@media (prefers-reduced-motion: no-preference) { .hero.bleed::after { transform: translateY(calc(var(--sy, 0) * 0.1px)); } }
/* Keep the hero text readable: the scene is dimmer behind it */
.hero.bleed::after { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.4) 25%, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.4) 25%, #000 60%); }
@media (max-width: 899px) { .hero.bleed::after { -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,.3) 55%); mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,.3) 55%); } }

/* Extra glows behind the hero tiles, "Comment ça marche" and "Où nous trouver" (positioned by js/main.js, same parallax as the others) */
.bg-orbs span.orb-at { top: var(--at, 50%); opacity: .26; }
.bg-orbs span.orb-at.l { width: 460px; height: 460px; left: -120px; }
.bg-orbs span.orb-at.r { width: 480px; height: 480px; right: -140px; margin-top: 120px; }
/* a: "Comment ça marche" (blue left, gold right), b: "Où nous trouver" (violet left, blue right) */
.bg-orbs span.orb-at.l.a { background: var(--accent); opacity: .32; }
.bg-orbs span.orb-at.r.a { background: var(--gold); opacity: .22; }
/* c: tiles under the hero (gold, left only, smaller) */
.bg-orbs span.orb-at.l.c { width: 340px; height: 340px; left: -110px; background: var(--gold); opacity: .2; margin-top: 60px; }
.bg-orbs span.orb-at.l.b { background: #b48cf0; }
.bg-orbs span.orb-at.r.b { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .bg-orbs span.orb-at { transform: translateY(calc(var(--sy, 0) * 0.08px)); } }

/* "Qui sommes-nous": short timeline */
.timeline { list-style: none; margin: 4px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.timeline li { position: relative; display: flex; flex-direction: column; gap: 2px; }
.timeline li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.timeline li:first-child::before { background: var(--gold); }
.timeline b { font-family: var(--f-display); font-weight: 600; }
.timeline span { color: var(--muted); font-size: 15px; }

/* "Vous gérez un centre commercial ?": what we handle, and a form that only prepares an email (nothing is sent by the site) */
.host-txt { display: flex; flex-direction: column; gap: inherit; }
.host-txt p { margin: 0; }
.host-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.host-list li { padding-left: 26px; position: relative; }
.host-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border: solid var(--gold); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.host-form { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line); }
.host-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.host-form input, .host-form select, .host-form textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; box-sizing: border-box; }
.host-form textarea { resize: vertical; }
.host-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.host-form .btn { border: 0; cursor: pointer; font-family: var(--f-display); margin-top: 4px; }
.host-form small { color: var(--muted); font-size: 13px; }
.host-form small a { color: var(--accent-ink); }
@media (min-width: 900px) { .host-form { margin-top: 0; padding: 24px; } }