/* =====================================================================
   PAGE D'ACCUEIL — sections 2 à 8 (le hero garde ses propres styles)
   Charte SYO Web : Gliker (titres) · Schibsted Grotesk · JetBrains Mono
   #FF8A3D / #F57323 · noir · blanc — classes préfixées « hm- »
   ===================================================================== */
.hm{
  --hm-bg:#FFFFFF; --hm-soft:#F5F5F7; --hm-card:#FFFFFF;
  --hm-ink:#0B0B0C; --hm-dim:#6E6E73; --hm-mute:#A1A1A6;
  --hm-line:rgba(0,0,0,.08); --hm-line2:rgba(0,0,0,.14);
  --hm-acc:#FF8A3D; --hm-acc2:#F57323; --hm-acc-soft:#FFF3EA;
  --hm-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -22px rgba(0,0,0,.22);
  --hm-ease:cubic-bezier(.22,.8,.24,1);
  --hm-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hm-display:"Gliker","Schibsted Grotesk",system-ui,sans-serif;
  --hm-mono:"JetBrains Mono",ui-monospace,monospace;
  display:block; background:var(--hm-bg); overflow-x:clip;
}
/* Tout ce qui suit ne touche que les sections 2 à 8 (.hm-sec) : le hero reste intact */
.hm-sec{ color:var(--hm-ink); font-family:var(--hm-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
html[data-theme="dark"] .hm{
  --hm-bg:#000; --hm-soft:#111113; --hm-card:#161618;
  --hm-ink:#F5F5F7; --hm-dim:#A1A1A6; --hm-mute:#6E6E73;
  --hm-line:rgba(255,255,255,.09); --hm-line2:rgba(255,255,255,.16);
  --hm-acc-soft:rgba(255,138,61,.14);
  --hm-shadow:0 18px 40px -22px rgba(0,0,0,.8);
}

/* header-1.css impose « Gliker » sur a, span, button, h1, h2 :
   on rétablit la typographie de texte, sauf pour les titres. */
.hm-sec :is(a,span,button,p,li,small,b,em,blockquote,summary,figcaption){ font-family:var(--hm-sans) !important; }
.hm-sec .hm-h2, .hm-sec .hm-h2 *{ font-family:var(--hm-display) !important; }
.hm-sec :is(.hm-eyebrow,.hm-svc__no,.hm-step__no,.hm-qa__no,.hm-work__bar em,.hm-trust__label){ font-family:var(--hm-mono) !important; }

:where(.hm-sec) *{ box-sizing:border-box; }
:where(.hm-sec) :where(h2,h3,p,ul,ol,figure,blockquote){ margin:0; padding:0; }
:where(.hm-sec) :where(ul,ol){ list-style:none; }
.hm-sec a{ color:inherit; text-decoration:none; }
.hm-sec img{ display:block; max-width:100%; }
.hm-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.hm-wrap{ width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.hm-sec{ padding:88px 0; }
.hm-sec + .hm-sec{ border-top:1px solid var(--hm-line); }

/* Apparition au scroll (activée par home.js) */
.hm-js .hm-rv{ opacity:0; transform:translateY(18px); }
.hm-js .hm-rv.in{ opacity:1; transform:none; transition:opacity .8s var(--hm-ease), transform .8s var(--hm-ease); }

/* ---------- Typographie commune ---------- */
.hm-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--hm-acc2); margin-bottom:.9rem; }
.hm-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--hm-acc); box-shadow:0 0 0 4px rgba(255,138,61,.18); }
.hm-h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); line-height:1.1; font-weight:400; letter-spacing:-.02em; max-width:20ch; }
.hm-muted{ color:var(--hm-mute); }
.hm-acc{ color:var(--hm-acc); }
.hm-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; margin-bottom:2.6rem; }
.hm-head__side{ max-width:400px; color:var(--hm-dim); font-size:.95rem; }
.hm-head__side p{ color:var(--hm-dim); }
.hm-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .2s; }
.hm-link:hover{ color:var(--hm-acc2); }

.hm-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.hm-chips > span{ font-size:12px !important; font-weight:500; padding:.3rem .65rem; border-radius:999px; background:var(--hm-soft); color:var(--hm-dim); }

.hm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:46px; padding:0 1.3rem; border-radius:999px; font-size:.9rem; font-weight:600; white-space:nowrap; transition:background .25s, color .25s, border-color .25s, transform .25s var(--hm-ease); }
.hm-btn:hover{ transform:translateY(-1px); }
.hm-btn--dark{ background:var(--hm-ink); color:var(--hm-bg) !important; }
.hm-btn--dark:hover{ background:var(--hm-acc); color:#160B03 !important; }
.hm-btn--acc{ background:linear-gradient(135deg,var(--hm-acc),var(--hm-acc2)); color:#160B03 !important; box-shadow:0 14px 30px -14px rgba(245,115,35,.8); }
.hm-btn--line{ border:1px solid rgba(255,255,255,.28); color:#fff !important; }
.hm-btn--line:hover{ border-color:#fff; }

/* =====================================================================
   2. CONFIANCE
   ===================================================================== */
.hm-trust{ padding-top:56px; }
.hm-trust__label{ text-align:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--hm-mute); margin-bottom:1.4rem !important; }
.hm-marquee{ overflow:hidden; padding:.4rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.hm-marquee__track{ display:flex; width:max-content; animation:hmMarquee 42s linear infinite; }
.hm-marquee:hover .hm-marquee__track{ animation-play-state:paused; }
.hm-marquee__track > span{ display:inline-flex; align-items:center; font-size:clamp(1.15rem,1.9vw,1.5rem) !important; font-weight:700; letter-spacing:-.03em; color:var(--hm-ink); opacity:.32; white-space:nowrap; transition:opacity .25s; }
.hm-marquee__track > span:hover{ opacity:1; }
.hm-marquee__track > span::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--hm-acc); margin:0 2.6rem; opacity:.9; }
@keyframes hmMarquee{ to{ transform:translateX(-50%); } }

.hm-intro{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; margin-top:64px; }
.hm-intro__img{ position:relative; margin:0; border-radius:24px; overflow:hidden; aspect-ratio:5/4; background:var(--hm-soft); }
.hm-intro__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--hm-ease); }
.hm-intro__img:hover img{ transform:scale(1.04); }
.hm-intro__img figcaption{ position:absolute; left:16px; bottom:16px; display:flex; flex-direction:column; padding:.7rem 1rem; border-radius:14px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#0B0B0C; }
.hm-intro__img figcaption b{ font-size:.95rem; font-weight:700; }
.hm-intro__img figcaption span{ font-size:.75rem; color:#6E6E73; }
.hm-intro .hm-h2{ max-width:none; }
.hm-intro__side{ margin-top:1.4rem; }
.hm-intro__side p{ color:var(--hm-dim); margin-bottom:1.1rem !important; }
.hm-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:40px; }
.hm-facts li{ padding:1.3rem 1.4rem; border-radius:18px; background:var(--hm-soft); }
.hm-facts b{ display:block; font-size:2rem; font-weight:700; letter-spacing:-.04em; line-height:1; margin-bottom:.5rem; }
.hm-facts li:first-child b{ color:var(--hm-acc2); }
.hm-facts span{ display:block; font-size:.86rem; color:var(--hm-dim); line-height:1.45; }

/* =====================================================================
   3. SERVICES
   ===================================================================== */
.hm-svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hm-svc__card{ position:relative; display:flex; flex-direction:column; gap:.7rem; padding:1.5rem; border-radius:22px; background:var(--hm-soft); border:1px solid transparent;
  transition:background .3s, border-color .3s, box-shadow .35s var(--hm-ease), transform .35s var(--hm-ease); }
.hm-svc__card:hover{ background:var(--hm-card); border-color:var(--hm-line); box-shadow:var(--hm-shadow); transform:translateY(-4px); }
.hm-svc__card{ padding-top:.6rem !important; }
.hm-svc__media{ display:block; margin:0 -.9rem .4rem; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:var(--hm-card); }
.hm-svc__media img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1s var(--hm-ease); }
.hm-svc__card:hover .hm-svc__media img{ transform:scale(1.05); }
.hm-svc__top{ display:flex; justify-content:space-between; align-items:center; margin:-1.9rem .2rem .6rem; position:relative; }
.hm-svc__ic{ box-shadow:0 6px 16px -8px rgba(0,0,0,.35) !important; border:3px solid var(--hm-soft); }
.hm-svc__card:hover .hm-svc__ic{ border-color:var(--hm-card); }
.hm-svc__no{ align-self:flex-end; }
.hm-svc__ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--hm-card); box-shadow:0 1px 2px rgba(0,0,0,.05); color:var(--hm-acc2); transition:background .3s, color .3s; }
.hm-svc__ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hm-svc__card:hover .hm-svc__ic{ background:var(--hm-ink); color:#fff; }
.hm-svc__no{ font-size:11px !important; color:var(--hm-mute); letter-spacing:.08em; }
.hm-svc__title{ font-size:1.12rem !important; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.hm-svc__desc{ font-size:.9rem !important; color:var(--hm-dim); line-height:1.55; flex:1; }
.hm-svc__card .hm-chips > span{ background:var(--hm-card); }
.hm-svc__go{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.5rem; font-size:.88rem !important; font-weight:600; color:var(--hm-ink); }
.hm-svc__go svg{ transition:transform .3s var(--hm-ease); }
.hm-svc__card:hover .hm-svc__go{ color:var(--hm-acc2); }
.hm-svc__card:hover .hm-svc__go svg{ transform:translate(2px,-2px); }

/* =====================================================================
   4. RÉALISATIONS
   ===================================================================== */
.hm-arrows{ display:flex; gap:8px; margin-top:1rem; }
.hm-arrows button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--hm-line2); background:var(--hm-card); color:var(--hm-ink); font-size:1rem; cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.hm-arrows button:hover{ background:var(--hm-ink); color:var(--hm-bg); border-color:var(--hm-ink); }

.hm-work{ display:grid; grid-auto-flow:column; grid-auto-columns:min(420px, 82vw); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:4px max(20px, calc((100% - 1200px) / 2)) 10px; scroll-padding:0 max(20px, calc((100% - 1200px) / 2)); }
.hm-work::-webkit-scrollbar{ display:none; }
.hm-work__card{ scroll-snap-align:start; display:flex; flex-direction:column; }
.hm-work__shot{ position:relative; display:block; border-radius:20px; overflow:hidden; background:var(--hm-soft); border:1px solid var(--hm-line); }
.hm-work__bar{ display:flex; align-items:center; gap:5px; height:32px; padding:0 12px; background:var(--hm-card); border-bottom:1px solid var(--hm-line); }
.hm-work__bar i{ width:8px; height:8px; border-radius:50%; background:#E5E5EA; }
.hm-work__bar i:first-child{ background:var(--hm-acc); }
.hm-work__bar em{ margin-left:10px; font-style:normal; font-size:10.5px !important; color:var(--hm-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-work__img{ display:block; aspect-ratio:16/10; overflow:hidden; }
.hm-work__img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1s var(--hm-ease); }
.hm-work__shot:hover .hm-work__img img{ transform:scale(1.04); }
.hm-work__open{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .85rem; border-radius:999px; background:#fff; color:#0B0B0C !important; font-size:.8rem !important; font-weight:600; box-shadow:0 8px 20px -8px rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s var(--hm-ease); }
.hm-work__shot:hover .hm-work__open, .hm-work__shot:focus-visible .hm-work__open{ opacity:1; transform:none; }
.hm-work__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1rem; }
.hm-work__meta h3{ font-size:1.08rem; font-weight:700; letter-spacing:-.02em; }
.hm-work__meta span{ font-size:.8rem !important; color:var(--hm-mute); }
.hm-work__cat{ margin-top:.15rem !important; font-size:.8rem; color:var(--hm-acc2); font-weight:600; }
.hm-work__desc{ margin:.35rem 0 .8rem !important; font-size:.88rem; color:var(--hm-dim); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hm-work__cat:empty, .hm-work__desc:empty{ display:none; }
.hm-work__all{ scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; width:220px; padding:1.5rem; border-radius:20px; background:var(--hm-soft); font-weight:700; font-size:1.05rem; letter-spacing:-.02em; align-self:start; height:296px; transition:background .3s; }
.hm-work__all-ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--hm-ink); color:#fff; transition:background .3s, transform .3s var(--hm-ease); }
.hm-work__all:hover .hm-work__all-ic{ background:var(--hm-acc); color:#160B03; transform:rotate(45deg); }
.hm-work{ grid-auto-columns:auto; }
.hm-work__card{ width:min(420px, 82vw); }
.hm-work__all:hover{ background:var(--hm-card); box-shadow:var(--hm-shadow); }

.hm-reel{ position:relative; margin-top:36px; border-radius:28px; overflow:hidden; aspect-ratio:16/7; background:#0B0B0C; }
.hm-reel__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hm-reel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6)); pointer-events:none; }
.hm-reel__play{ position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:84px; height:84px; border-radius:50%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.35); color:#fff !important; transition:background .3s, transform .4s var(--hm-ease); }
.hm-reel__play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(255,255,255,.25); animation:hmPulse 2.4s ease-out infinite; }
@keyframes hmPulse{ from{ transform:scale(.9); opacity:1; } to{ transform:scale(1.35); opacity:0; } }
.hm-reel__play:hover{ background:var(--hm-acc); color:#160B03 !important; transform:translate(-50%,-50%) scale(1.06); }
.hm-reel__play svg{ margin-left:4px; }
.hm-reel__cap{ position:absolute; left:28px; right:28px; bottom:24px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; color:#fff; }
.hm-reel__k{ display:block; font-family:var(--hm-mono) !important; font-size:11px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--hm-acc); }
.hm-reel__t{ margin-top:.35rem !important; font-size:clamp(1.2rem,2.2vw,1.8rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.hm-reel__ig{ display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .95rem; border-radius:999px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:.85rem !important; font-weight:600; color:#fff !important; white-space:nowrap; transition:background .3s; }
.hm-reel__ig:hover{ background:rgba(255,255,255,.28); }

/* =====================================================================
   5. MÉTHODE
   ===================================================================== */
.hm-method{ display:grid; grid-template-columns:.85fr 1.15fr; gap:14px; align-items:stretch; }
.hm-method__img{ position:relative; margin:0; border-radius:22px; overflow:hidden; min-height:420px; background:var(--hm-soft); }
.hm-method__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hm-method__img figcaption{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-radius:14px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#0B0B0C; font-size:.86rem; font-weight:600; line-height:1.4; }
.hm-method__dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--hm-acc); box-shadow:0 0 0 4px rgba(255,138,61,.2); }
.hm-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; counter-reset:none; }
.hm-step{ position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.5rem 1.4rem 1.4rem; border-radius:22px; border:1px solid var(--hm-line); background:var(--hm-card); transition:border-color .3s, box-shadow .35s var(--hm-ease); }
.hm-step::before{ content:""; position:absolute; left:1.4rem; right:1.4rem; top:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--hm-acc),var(--hm-acc2)); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--hm-ease); }
.hm-step.in::before{ transform:scaleX(1); }
.hm-step:nth-child(2).in::before{ transition-delay:.15s; } .hm-step:nth-child(3).in::before{ transition-delay:.3s; } .hm-step:nth-child(4).in::before{ transition-delay:.45s; }
.hm-step:hover{ border-color:var(--hm-line2); box-shadow:var(--hm-shadow); }
.hm-step__no{ font-size:12px !important; color:var(--hm-acc2); margin-bottom:.8rem; }
.hm-step h3{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.hm-step p{ font-size:.88rem; color:var(--hm-dim); line-height:1.55; flex:1; }
.hm-step__lbl{ margin-top:.6rem; font-size:10.5px !important; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--hm-mute); }

/* =====================================================================
   6. RÉSULTATS
   ===================================================================== */
.hm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:22px; border:1px solid var(--hm-line); border-radius:22px; overflow:hidden; }
.hm-stats li{ padding:1.6rem 1.5rem; }
.hm-stats li + li{ border-left:1px solid var(--hm-line); }
.hm-stats b{ display:block; font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.hm-stats li:first-child b{ color:var(--hm-acc2); }
.hm-stats span{ display:block; margin-top:.55rem; font-size:.85rem; color:var(--hm-dim); }
.hm-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hm-tool{ display:flex; flex-direction:column; gap:1rem; padding:1.4rem; border-radius:22px; background:var(--hm-soft); }
.hm-tool__head{ display:flex; align-items:center; gap:.8rem; }
.hm-tool__logo{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--hm-card); font-weight:800; font-size:1.05rem !important; color:var(--hm-acc2); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.hm-tool h3{ font-size:.98rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.hm-tool small{ display:block; font-size:.8rem; color:var(--hm-dim); }
.hm-tool__shot{ display:block; border-radius:14px; overflow:hidden; background:var(--hm-card); aspect-ratio:16/9; }
.hm-tool__shot img{ width:100%; height:100%; object-fit:cover; object-position:top left; }
.hm-tool p{ font-size:.88rem; color:var(--hm-dim); line-height:1.55; }
.hm-reviews{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:22px; }
.hm-review{ display:flex; flex-direction:column; gap:.9rem; padding:1.5rem; border-radius:22px; border:1px solid var(--hm-line); }
.hm-review__stars{ color:var(--hm-acc); letter-spacing:.14em; font-size:.85rem !important; }
.hm-review blockquote{ font-size:.98rem; line-height:1.55; flex:1; }
.hm-review figcaption{ display:flex; align-items:center; gap:.7rem; }
.hm-review__av{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--hm-acc-soft); color:var(--hm-acc2); font-weight:700; }
.hm-review b{ display:block; font-size:.9rem; }
.hm-review small{ display:block; font-size:.8rem; color:var(--hm-dim); }

/* =====================================================================
   7. FAQ
   ===================================================================== */
.hm-faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.hm-faq__side{ position:sticky; top:calc(var(--syo-header-height, 116px) + 24px); }
.hm-talk{ display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; align-items:center; margin-top:2rem; padding:.6rem .6rem 1.1rem; border-radius:22px; background:var(--hm-soft); }
.hm-talk__img{ grid-column:1 / -1; display:block; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin-bottom:.6rem; }
.hm-talk__img img{ width:100%; height:100%; object-fit:cover; }
.hm-talk > :not(.hm-talk__img){ margin-left:.5rem; margin-right:.5rem; }
.hm-talk .hm-btn{ width:calc(100% - 1rem) !important; }
.hm-talk__logo{ grid-row:span 1; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--hm-ink); color:var(--hm-acc); font-weight:800; font-size:1.1rem !important; }
.hm-talk b{ display:block; font-size:.95rem; }
.hm-talk small{ display:block; font-size:.82rem; color:var(--hm-dim); }
.hm-talk .hm-btn{ grid-column:1 / -1; margin-top:.6rem; width:100%; }
.hm-faq__list{ border-top:1px solid var(--hm-line2); }
.hm-qa{ border-bottom:1px solid var(--hm-line); }
.hm-qa summary{ display:flex; align-items:center; gap:1rem; padding:1.15rem 0; cursor:pointer; list-style:none; }
.hm-qa summary::-webkit-details-marker{ display:none; }
.hm-qa__no{ font-size:11px !important; color:var(--hm-mute); flex:none; width:22px; }
.hm-qa__q{ flex:1; font-size:1rem !important; font-weight:600; letter-spacing:-.01em; transition:color .2s; }
.hm-qa summary:hover .hm-qa__q{ color:var(--hm-acc2); }
.hm-qa__ic{ position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:var(--hm-soft); transition:background .3s, transform .3s var(--hm-ease); }
.hm-qa__ic::before, .hm-qa__ic::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.6px; border-radius:2px; background:var(--hm-ink); transform:translate(-50%,-50%); }
.hm-qa__ic::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s var(--hm-ease); }
.hm-qa[open] .hm-qa__ic{ background:var(--hm-acc); }
.hm-qa[open] .hm-qa__ic::after{ transform:translate(-50%,-50%) rotate(0); }
.hm-qa[open] .hm-qa__q{ color:var(--hm-ink); }
.hm-qa p{ padding:0 2.8rem 1.25rem 38px; font-size:.92rem; color:var(--hm-dim); line-height:1.65; }

/* =====================================================================
   8. AUDIT GRATUIT
   ===================================================================== */
.hm-sec--last{ padding-bottom:96px; }
.hm-cta{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:center; padding:clamp(1.8rem,4vw,3.4rem); border-radius:28px; background:#0B0B0C; color:#F5F5F7; }
.hm-cta::before{ content:""; position:absolute; right:-10%; top:-60%; width:55%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,138,61,.45), transparent 65%); filter:blur(20px); pointer-events:none; }
.hm-cta > *{ position:relative; }
.hm-eyebrow--light{ color:var(--hm-acc); }
.hm-cta .hm-h2{ color:#fff; max-width:16ch; }
.hm-cta p{ margin-top:1rem !important; max-width:52ch; color:rgba(245,245,247,.7); font-size:.98rem; }
.hm-cta__btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.hm-score{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.hm-score__ring{ position:relative; width:150px; height:150px; }
.hm-score__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hm-score__ring circle{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:8; }
.hm-score__ring circle.v{ stroke:var(--hm-acc); stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.6s var(--hm-ease) .3s; }
.hm-cta.in .hm-score__ring circle.v{ stroke-dashoffset:52; }
.hm-score__ring b{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.6rem !important; font-weight:700; letter-spacing:-.03em; color:#fff; line-height:1; }
.hm-score__ring b small{ margin-top:.3rem; font-size:10.5px !important; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.hm-score ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:260px; }
.hm-score li{ font-size:11.5px; font-weight:500; padding:.3rem .65rem; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(245,245,247,.82); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .hm-sec{ padding:68px 0; }
  .hm-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .hm-head__side{ max-width:560px; }
  .hm-intro, .hm-faq, .hm-cta, .hm-method{ grid-template-columns:1fr; gap:2rem; }
  .hm-method{ gap:14px; }
  .hm-method__img{ min-height:0; aspect-ratio:16/9; }
  .hm-reel{ aspect-ratio:16/9; }
  .hm-faq__side{ position:static; }
  .hm-facts, .hm-stats{ grid-template-columns:repeat(2,1fr); }
  .hm-stats li:nth-child(3){ border-left:0; }
  .hm-stats li:nth-child(n+3){ border-top:1px solid var(--hm-line); }
  .hm-svc, .hm-tools{ grid-template-columns:repeat(2,1fr); }
  .hm-score{ flex-direction:row; justify-content:flex-start; }
}
@media (max-width:640px){
  .hm-sec{ padding:56px 0; }
  .hm-wrap{ width:calc(100% - 32px); }
  .hm-intro{ margin-top:44px; }
  .hm-svc, .hm-tools, .hm-steps, .hm-reviews{ grid-template-columns:1fr; }
  .hm-facts b{ font-size:1.6rem; }
  .hm-work{ padding-left:16px; padding-right:16px; scroll-padding:0 16px; }
  .hm-qa p{ padding:0 0 1.2rem 38px; }
  .hm-reel{ aspect-ratio:4/5; border-radius:22px; }
  .hm-reel__cap{ left:18px; right:18px; bottom:18px; flex-direction:column; align-items:flex-start; }
  .hm-reel__play{ width:68px; height:68px; }
  .hm-intro__img{ aspect-ratio:4/3; }
  .hm-score{ flex-direction:column; }
  .hm-cta__btns .hm-btn{ width:100%; }
  .hm-work__open{ opacity:1; transform:none; }
  .hm-svc__top{ margin-bottom:.4rem; }
  .hm-svc__card{ padding:1.25rem; }
  .hm-step__no{ margin-bottom:.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .hm-sec *{ animation:none !important; transition:none !important; }
  .hm-js .hm-rv{ opacity:1; transform:none; }
  .hm-marquee__track{ flex-wrap:wrap; width:auto; justify-content:center; }
}

/* =====================================================================
   VERSION « STYLÉE » — bento éditorial
   ===================================================================== */

/* Numéro de section dans le sur-titre : 02 — L'agence */
.hm-eyebrow em{ font-style:normal; color:var(--hm-ink); opacity:.35; margin-right:.2rem; }
.hm-eyebrow em::after{ content:" —"; }
.hm-eyebrow--light em{ color:#fff; }

/* Fond : légère grille + lueur orange derrière certaines sections */
.hm-trust, #method, #faq{ position:relative; }
.hm-trust::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--hm-line) 1px, transparent 1px), linear-gradient(90deg, var(--hm-line) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 10%, transparent 70%); mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 10%, transparent 70%); }
#method::before{ content:""; position:absolute; right:-10%; top:10%; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,138,61,.12), transparent 65%); filter:blur(30px); }
.hm-trust > *, #method > *{ position:relative; z-index:1; }

/* Halo orange qui suit la souris sur les cartes (piloté par home.js) */
[data-hm-glow]{ position:relative; isolation:isolate; }
[data-hm-glow]::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:0; transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,138,61,.16), transparent 65%); }
[data-hm-glow]:hover::after{ opacity:1; }

/* ---------- 2. Confiance : bento ---------- */
.hm-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:14px; margin-top:56px; }
.hm-b{ border-radius:24px; background:var(--hm-soft); padding:1.5rem; overflow:hidden; transition:transform .4s var(--hm-ease), box-shadow .4s var(--hm-ease), background .3s; }
.hm-b:hover{ transform:translateY(-3px); box-shadow:var(--hm-shadow); }
.hm-b--photo{ grid-column:span 2; grid-row:span 3; position:relative; margin:0; padding:0; min-height:420px; }
.hm-b--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--hm-ease); }
.hm-b--photo:hover img{ transform:scale(1.05); }
.hm-b--photo::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); }
.hm-b--photo figcaption{ position:absolute; left:18px; bottom:18px; z-index:2; display:flex; align-items:center; gap:.55rem; padding:.6rem .95rem; border-radius:999px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#0B0B0C; }
.hm-b--photo figcaption b{ font-size:.9rem; font-weight:700; }
.hm-b--photo figcaption span:not(.hm-live){ font-size:.78rem; color:#6E6E73; }
.hm-live{ width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:hmLive 2s infinite; }
@keyframes hmLive{ 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.hm-b--intro{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; gap:.9rem; padding:2rem; background:var(--hm-card); border:1px solid var(--hm-line); }
.hm-b--intro .hm-eyebrow{ margin-bottom:0; }
.hm-b--intro .hm-h2{ max-width:none; font-size:clamp(1.5rem,2.4vw,2rem); }
.hm-b--intro p{ color:var(--hm-dim); font-size:.93rem; }
.hm-b--intro .hm-link{ align-self:flex-start; }
.hm-b--stat{ display:flex; flex-direction:column; justify-content:space-between; gap:1rem; }
.hm-b--stat b{ font-size:clamp(2.2rem,3.6vw,3rem); font-weight:700; letter-spacing:-.05em; line-height:1; }
.hm-b--stat span{ font-size:.86rem; color:var(--hm-dim); line-height:1.45; }
.hm-b--acc{ background:linear-gradient(140deg,#FF8A3D,#F57323); color:#160B03; }
.hm-b--acc span{ color:rgba(22,11,3,.72) !important; }
.hm-b--dark{ background:#0B0B0C; color:#fff; }
.hm-b--dark span{ color:rgba(255,255,255,.62) !important; }
.hm-avatars{ display:flex; }
.hm-avatars i{ display:grid; place-items:center; width:30px; height:30px; margin-left:-8px; border-radius:50%; border:2px solid #FF8A3D; background:#160B03; color:#fff; font-style:normal; font-size:11px; font-weight:700; }
.hm-avatars i:first-child{ margin-left:0; }
.hm-avatars i:last-child{ background:#fff; color:#160B03; }

/* ---------- 3. Services : bento, la 1re carte en grand ---------- */
.hm-svc{ grid-template-columns:repeat(3,1fr); }
.hm-svc__card--big{ grid-column:span 2; display:grid !important; grid-template-columns:1.1fr .9fr; grid-template-rows:auto auto 1fr auto auto; column-gap:1.6rem; padding:.6rem !important; }
.hm-svc__card--big .hm-svc__media{ grid-column:1; grid-row:1 / -1; margin:0 !important; aspect-ratio:auto; height:100%; min-height:300px; }
.hm-svc__card--big > :not(.hm-svc__media){ grid-column:2; padding-right:1rem; }
.hm-svc__card--big .hm-svc__top{ margin:1.2rem 0 .6rem !important; }
.hm-svc__card--big .hm-svc__title{ font-size:1.5rem !important; }
.hm-svc__card--big .hm-svc__go{ margin-bottom:1rem; }
.hm-svc__card{ overflow:hidden; }
.hm-svc__card--wide{ grid-column:span 3; grid-template-columns:1fr 1.4fr; }
.hm-svc__card--wide .hm-svc__media{ grid-column:2; min-height:240px; }
.hm-svc__card--wide > :not(.hm-svc__media){ grid-column:1; padding:0 0 0 1rem; }

/* ---------- 4. Réalisations : cartes plus grandes, légère inclinaison au survol ---------- */
.hm-work__card{ width:min(460px, 84vw); }
.hm-work__shot{ transition:transform .5s var(--hm-ease), box-shadow .5s var(--hm-ease); }
.hm-work__shot:hover{ transform:translateY(-4px) rotate(-.4deg); box-shadow:0 30px 60px -30px rgba(0,0,0,.45); }

/* ---------- 5. Méthode : grands numéros en contour ---------- */
.hm-step__no{ font-size:2.6rem !important; font-weight:700; letter-spacing:-.04em; line-height:1; color:transparent !important; -webkit-text-stroke:1.2px var(--hm-acc); font-family:var(--hm-sans) !important; transition:color .3s; }
.hm-step:hover .hm-step__no{ color:var(--hm-acc) !important; }

/* ---------- 8. CTA : bordure animée ---------- */
.hm-cta{ box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(245,115,35,.45); }

/* Responsive bento */
@media (max-width:1024px){
  .hm-bento{ grid-template-columns:repeat(2,1fr); }
  .hm-b--photo, .hm-b--intro{ grid-column:span 2; }
  .hm-b--photo{ grid-row:auto; min-height:300px; }
  .hm-svc__card--big{ grid-column:span 2; }
  .hm-svc__card--wide{ grid-column:span 2; }
  .hm-svc{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .hm-svc{ grid-template-columns:1fr; }
  .hm-svc__card--big, .hm-svc__card--wide{ grid-column:auto; }
  .hm-bento{ gap:10px; }
  .hm-b{ padding:1.2rem; }
  .hm-b--intro{ padding:1.4rem; }
  .hm-svc__card--big{ grid-column:auto; display:flex !important; padding-top:.6rem !important; }
  .hm-svc__card--big .hm-svc__media{ min-height:0; aspect-ratio:16/9; }
  .hm-svc__card--big > :not(.hm-svc__media){ padding-right:0; padding-left:0; }
  .hm-svc__card--big .hm-svc__top{ margin:-1.9rem .2rem .6rem !important; }
  .hm-svc__card--big .hm-svc__title{ font-size:1.12rem !important; }
  .hm-step__no{ font-size:2rem !important; }
}

/* =====================================================================
   6. STATISTIQUES DES SITES (données : config/site-stats.php)
   ===================================================================== */
.hm-st{ margin-bottom:22px; border-radius:28px; border:1px solid var(--hm-line); background:var(--hm-card); overflow:hidden; }
.hm-st__tabs{ display:flex; gap:6px; padding:8px; overflow-x:auto; scrollbar-width:none; background:var(--hm-soft); border-bottom:1px solid var(--hm-line); }
.hm-st__tabs::-webkit-scrollbar{ display:none; }
.hm-st__tabs button{ flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:.7rem 1.1rem; border:0; border-radius:16px; background:transparent; color:var(--hm-ink); cursor:pointer; text-align:left; transition:background .25s, box-shadow .25s; }
.hm-st__tabs button b{ font-size:.92rem; font-weight:700; letter-spacing:-.01em; }
.hm-st__tabs button small{ font-size:.74rem; color:var(--hm-dim); }
.hm-st__tabs button:hover{ background:rgba(0,0,0,.04); }
.hm-st__tabs button[aria-selected="true"]{ background:var(--hm-card); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.25); }
.hm-st__tabs button[aria-selected="true"] b{ color:var(--hm-acc2); }

.hm-st__panel{ display:grid; grid-template-columns:1.25fr .75fr; gap:28px; padding:28px; }
.hm-st__panel[hidden]{ display:none; }
.hm-st__panel--full{ grid-template-columns:1fr; }
.hm-st__panel.is-in{ animation:hmFade .5s var(--hm-ease); }
@keyframes hmFade{ from{ opacity:0; transform:translateY(8px); } }
.hm-st__main{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.hm-st__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.hm-st__top h3{ font-size:1.35rem; font-weight:700; letter-spacing:-.03em; }
.hm-st__top p{ margin-top:.2rem !important; font-size:.82rem; color:var(--hm-dim); }

.hm-st__kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.hm-st__kpis li{ position:relative; display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.15rem; border-radius:18px; background:var(--hm-soft); }
.hm-st__kpis li:first-child{ background:linear-gradient(140deg,#FF8A3D,#F57323); color:#160B03; }
.hm-st__kpis b{ font-size:clamp(1.6rem,2.4vw,2.1rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.hm-st__kpis b small{ font-size:.55em; margin-left:.1em; }
.hm-st__kpis span{ font-size:.8rem; color:var(--hm-dim); line-height:1.35; }
.hm-st__kpis li:first-child span{ color:rgba(22,11,3,.72); }
.hm-st__kpis em{ align-self:flex-start; font-style:normal; font-size:.74rem !important; font-weight:700; padding:.15rem .5rem; border-radius:999px; background:rgba(34,197,94,.12); color:#15803D; }
.hm-st__kpis li:first-child em{ background:rgba(255,255,255,.35); color:#160B03; }

.hm-st__chart{ position:relative; padding:14px 14px 8px; border-radius:18px; border:1px solid var(--hm-line); }
.hm-st__chart svg{ display:block; width:100%; height:150px; overflow:visible; }
.hm-st__chart .l{ fill:none; stroke:#F57323; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:2000; stroke-dashoffset:2000; transition:stroke-dashoffset 1.8s var(--hm-ease); }
.hm-st__chart circle{ fill:#fff; stroke:#F57323; stroke-width:3; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .4s 1.5s; }
.hm-st.in .hm-st__panel:not([hidden]) .l{ stroke-dashoffset:0; }
.hm-st.in .hm-st__panel:not([hidden]) circle{ opacity:1; }
.hm-st__months{ display:flex; justify-content:space-between; margin-top:6px; }
.hm-st__months span{ font-family:var(--hm-mono) !important; font-size:10.5px !important; color:var(--hm-mute); }

.hm-st__shot{ margin:0; align-self:start; border-radius:18px; overflow:hidden; border:1px solid var(--hm-line); background:var(--hm-soft); }
.hm-st__shot img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:top; }

@media (max-width:1024px){ .hm-st__panel{ grid-template-columns:1fr; } .hm-st__shot{ display:none; } }
@media (max-width:640px){
  .hm-st{ border-radius:22px; }
  .hm-st__panel{ padding:18px; gap:16px; }
  .hm-st__top{ flex-direction:column; }
  .hm-st__kpis{ grid-template-columns:1fr 1fr; }
}

/* =====================================================================
   6. STATISTIQUES — galerie de captures (dossier /assets/images/stats/)
   ===================================================================== */
.hm-shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hm-shot{ margin:0; display:flex; flex-direction:column; gap:.7rem; }
.hm-shot--big{ grid-column:span 2; grid-row:span 2; }
.hm-shot__btn{ position:relative; display:flex; flex-direction:column; width:100%; padding:0; border:1px solid var(--hm-line); border-radius:20px; overflow:hidden; background:var(--hm-card); cursor:zoom-in; text-align:left;
  transition:transform .45s var(--hm-ease), box-shadow .45s var(--hm-ease), border-color .3s; flex:1; }
.hm-shot__btn:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(0,0,0,.4); border-color:var(--hm-line2); }
.hm-shot__bar{ display:flex; align-items:center; gap:5px; height:30px; padding:0 12px; border-bottom:1px solid var(--hm-line); background:var(--hm-soft); flex:none; }
.hm-shot__bar i{ width:8px; height:8px; border-radius:50%; background:#E5E5EA; }
.hm-shot__bar i:first-child{ background:var(--hm-acc); }
.hm-shot__bar em{ margin-left:10px; font-style:normal; font-family:var(--hm-mono) !important; font-size:10.5px !important; color:var(--hm-mute); text-transform:lowercase; }
.hm-shot__img{ display:block; flex:1; min-height:0; aspect-ratio:16/10; background:var(--hm-soft); overflow:hidden; }
.hm-shot--big .hm-shot__img{ aspect-ratio:auto; min-height:360px; }
.hm-shot__img{ display:flex !important; align-items:center; justify-content:center; padding:10px; }
.hm-shot__img img{ width:100%; height:100%; object-fit:contain; border-radius:8px; transition:transform 1s var(--hm-ease); }
.hm-shot__btn:hover .hm-shot__img img{ transform:scale(1.03); }
.hm-shot__zoom{ position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#0B0B0C; color:#fff;
  opacity:0; transform:scale(.8); transition:opacity .3s, transform .35s var(--hm-ease), background .3s; }
.hm-shot__btn:hover .hm-shot__zoom{ opacity:1; transform:none; background:var(--hm-acc); color:#160B03; }
.hm-shot figcaption{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:0 .2rem; }
.hm-shot__site{ font-size:.72rem !important; font-weight:700; padding:.2rem .6rem; border-radius:999px; background:var(--hm-acc-soft); color:var(--hm-acc2); text-transform:capitalize; }
.hm-shot__cap{ font-size:.88rem !important; color:var(--hm-dim); }
.hm-shot__cap::first-letter{ text-transform:uppercase; }
.hm-tools--after{ margin-top:22px; }

/* Visionneuse plein écran */
.hm-lb{ position:fixed; inset:0; z-index:10050; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:24px;
  background:rgba(8,8,10,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:hmFade .3s var(--hm-ease); }
.hm-lb[hidden]{ display:none; }
.hm-lb__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; max-height:100%; min-width:0; }
.hm-lb__fig img{ max-width:100%; max-height:calc(100vh - 110px); border-radius:14px; box-shadow:0 40px 80px -30px rgba(0,0,0,.8); background:#fff; }
.hm-lb__fig figcaption{ color:rgba(255,255,255,.85); font-family:"Schibsted Grotesk",system-ui,sans-serif; font-size:.92rem; text-align:center; }
.hm-lb__nav, .hm-lb__close{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:1.2rem; cursor:pointer; transition:background .25s, color .25s; }
.hm-lb__nav:hover, .hm-lb__close:hover{ background:#FF8A3D; color:#160B03; border-color:#FF8A3D; }
.hm-lb__close{ position:absolute; top:18px; right:18px; font-size:1.6rem; line-height:1; }
body.hm-lb-open{ overflow:hidden; }

@media (max-width:1024px){ .hm-shots{ grid-template-columns:repeat(2,1fr); } .hm-shot--big{ grid-row:auto; } .hm-shot--big .hm-shot__img{ min-height:0; aspect-ratio:16/9; } }
@media (max-width:640px){
  .hm-shots{ grid-template-columns:1fr; }
  .hm-shot--big{ grid-column:auto; }
  .hm-shot__zoom{ opacity:1; transform:none; }
  .hm-lb{ grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; padding:56px 12px 16px; }
  .hm-lb__fig{ grid-column:1 / -1; grid-row:1; }
  .hm-lb__prev{ grid-row:2; justify-self:end; } .hm-lb__next{ grid-row:2; justify-self:start; }
}