/* BEMH V41 — mouvements légers, sans dépendance externe. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-soft: cubic-bezier(.4, 0, .2, 1);
}

/* Fondu entre les pages, également compatible avec l'ouverture locale du ZIP. */
main { animation: bemh-page-in 520ms var(--motion-ease); transition: opacity 160ms ease-out, transform 160ms ease-out; }
html.is-leaving main { animation: none; opacity: .72; transform: translateY(-6px); }
@keyframes bemh-page-in { from { opacity: 0; transform: translateY(18px); } }

.site-header {
  transition: box-shadow 400ms var(--motion-soft), background-color 400ms;
}
.site-header.is-scrolled { background: rgba(255,255,255,.98); box-shadow: 0 8px 30px rgba(28,42,32,.08); }
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #27c220, #86e16c);
  pointer-events: none;
}
.logo { transition: opacity 250ms, transform 500ms var(--motion-ease); }
.navlinks a { transition: color 250ms; }
.navlinks a::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 21px;
  height: 2px; background: var(--green); transform: scaleX(0); transform-origin: right;
  transition: transform 400ms var(--motion-ease);
}
.navlinks a:hover::before, .navlinks a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.navlinks a.active::before { display: none; }
.navlinks a.active::after { animation: bemh-underline 650ms var(--motion-ease) both; transform-origin: left; }
@keyframes bemh-underline { from { transform: scaleX(0); } }

:is(a, button, [role="button"]):focus-visible { outline: 3px solid #20851c; outline-offset: 5px; }
.btn, .gallery-tab, .gallery-thumb, .mobile-nav-toggle {
  transition: transform 420ms var(--motion-ease), box-shadow 350ms, border-color 350ms, background-color 350ms, color 250ms;
}
.btn.primary { box-shadow: 0 5px 14px rgba(39,194,32,.12); }
.btn:active, .gallery-tab:active { transform: translateY(1px) scale(.98); }
.btn.primary:hover { box-shadow: 0 10px 28px rgba(39,194,32,.23); }
.card, .project-card, .shortcut-bubble {
  transition: transform 650ms var(--motion-ease), box-shadow 500ms, border-color 400ms;
}
.card::before, .shortcut-bubble::before {
  transform-origin: left;
  transition: opacity 400ms;
}
.motion-spotlight::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 450ms;
  background: radial-gradient(360px circle at var(--pointer-x,50%) var(--pointer-y,50%), rgba(100,221,71,.13), transparent 72%);
}
.shortcut-arrow { top: 32px; bottom: auto; transition: background-color 350ms, transform 550ms var(--motion-ease), box-shadow 400ms; }
.shortcut-index, .num { transition: background-color 350ms, color 350ms, transform 600ms var(--motion-ease); }
.project-preview { transition: box-shadow 450ms, border-color 450ms; }
.project-preview::after { transition: transform 500ms var(--motion-ease), background-color 350ms, color 350ms; }
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: ''; position: absolute; top: -140px; right: -40px; width: 300px; height: 300px;
  border: 1px solid rgba(139,236,113,.16); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 40px rgba(139,236,113,.04), 0 0 0 80px rgba(139,236,113,.025);
}
.cta > * { position: relative; }
.field label { transition: color 250ms; }
.field:focus-within label { color: #278923; }
.field input, .field select, .field textarea { transition: box-shadow 300ms, border-color 300ms, background-color 300ms; }
.file-item { animation: bemh-item-in 300ms var(--motion-ease); overflow-wrap: anywhere; }
@keyframes bemh-item-in { from { opacity: 0; transform: translateY(8px); } }

/* Le diaporama garde ses deux couches pour éviter les blancs entre les photos. */
.chantier-slideshow { transform-style: preserve-3d; }
.chantier-slide { transform: scale(1.065); transition: opacity 1100ms var(--motion-soft); }
.chantier-slide.is-active { transform: scale(1.065); }
.chantier-slideshow::after { background: linear-gradient(180deg,transparent 45%,rgba(13,25,19,.42)); }
.chantier-caption { left: 16px; bottom: 22px; max-width: calc(100% - 170px); flex-wrap: wrap; gap: 6px; }
.slideshow-controls { position: absolute; right: 14px; bottom: 18px; z-index: 4; display: flex; gap: 6px; }
.slideshow-control {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  color: #fff; border: 1px solid rgba(255,255,255,.48); border-radius: 50%;
  background: rgba(20,30,25,.6); backdrop-filter: blur(8px); cursor: pointer;
  transition: background 250ms, transform 350ms var(--motion-ease);
}
.slideshow-control svg { width: 16px; height: 16px; display: block; }
.slideshow-control:hover { background: rgba(20,30,25,.9); transform: translateY(-2px); }
.slideshow-control:disabled { cursor: default; opacity: .55; transform: none; }
.slideshow-control:focus-visible { outline-color: #fff; outline-offset: 3px; }
.slideshow-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background: rgba(255,255,255,.22); }
.slideshow-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: #72e14f; }
.slideshow-notice { position: absolute; z-index: 5; left: 14px; right: 14px; top: 14px; padding: 8px 12px; border-radius: 8px; background: #fff; font-size: 12px; }
.slideshow-notice:empty { display: none; }

/* Fondu des grandes vues, avec maintien de la dernière image pendant le chargement. */
.gallery-main { position: relative; isolation: isolate; }
.gallery-main img { position: relative; z-index: 1; }
.gallery-main .gallery-outgoing {
  position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain;
  background: white;
}
.gallery-main[aria-busy="true"]::after {
  content: ''; position: absolute; top: 0; left: 0; width: 28%; height: 3px; z-index: 4;
  background: var(--green); animation: bemh-gallery-loading 1.2s ease-in-out infinite;
}
@keyframes bemh-gallery-loading { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
.gallery-message { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 5; background: #fff; color: #8f3030; padding: 10px; border-radius: 8px; font-size: 13px; }
.gallery-message:empty { display: none; }
.gallery-thumb img { transition: transform 550ms var(--motion-ease), opacity 350ms; }
.gallery-tab.active { box-shadow: 0 5px 15px rgba(39,194,32,.18); }

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .brand:hover .logo, .nav > a:hover .logo { transform: translateY(-2px); }
  .motion-spotlight:hover::after { opacity: 1; }
  .shortcut-bubble:hover { transform: translateY(-8px); }
  .shortcut-bubble:hover .shortcut-index, .card:hover .num { transform: translateY(-3px); color: #fff; background: #279b23; }
  .shortcut-bubble:hover .shortcut-arrow { transform: translateX(3px) rotate(-35deg); box-shadow: 0 5px 16px rgba(39,194,32,.25); }
  .card:hover { transform: translateY(-5px); }
  .project-card:hover { transform: translateY(-7px); }
  .project-card:hover .project-preview { border-color: rgba(39,194,32,.35); box-shadow: 0 7px 22px rgba(28,50,34,.06); }
  .project-card:hover .project-preview::after { transform: translateY(-4px); background: #278923; color: #fff; }
  .btn:hover { transform: translateY(-3px); }
  .gallery-thumb:hover img { transform: scale(1.035); }
  .gallery-thumb:hover { border-color: #72be65; transform: translateY(-2px); }
  .motion-depth { transform: perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform 700ms var(--motion-ease), box-shadow 700ms; }
  .motion-depth:hover { box-shadow: 0 36px 80px rgba(16,35,22,.19), 0 8px 25px rgba(0,0,0,.08); }
}

@media (max-width:760px) {
  html.bemh-enhanced .navlinks {
    display: flex; visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-12px); box-shadow: 0 16px 28px rgba(30,45,35,.08);
    transition: opacity 260ms, transform 400ms var(--motion-ease), visibility 0s 400ms;
  }
  html.bemh-enhanced .navlinks.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
  .navlinks a::before { bottom: 8px; right: auto; width: 32px; }
  .navlinks a.active::before { display: block; transform: scaleX(1); }
  .mobile-nav-toggle { min-height: 44px; min-width: 64px; }
  .mobile-nav-toggle[aria-expanded="true"] { color: #237f20; border-color: #98d691; background: #f0faee; }
  .chantier-caption { font-size: 11px; left: 12px; bottom: 20px; padding: 7px 9px; max-width: calc(100% - 174px); }
  .slideshow-controls { right: 10px; bottom: 14px; gap: 4px; }
  .slideshow-control { width: 44px; height: 44px; }
  .projects { grid-template-columns: minmax(0,1fr); }
  .shortcut-bubble { grid-template-columns: 44px minmax(0,1fr) 36px; gap: 12px; padding: 20px; }
  .shortcut-index { width: 44px; height: 44px; }
  .shortcut-arrow { width: 36px; height: 36px; }
  .shortcut-copy strong { font-size: clamp(19px,5.3vw,23px); }
  .contact > *, .project-intro > *, .gallery-head > *, .hero-grid > * { min-width: 0; }
  .gallery-head { gap: 12px; }
  .gallery-head img { flex-shrink: 0; max-width: 26%; }
  .card:hover, .project-card:hover, .shortcut-bubble:hover, .btn:hover { transform: none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.is-leaving main { opacity: 1; transform: none; }
  .chantier-slide, .chantier-slide.is-active, .motion-depth { transform: none !important; }
  .card:hover, .project-card:hover, .shortcut-bubble:hover, .btn:hover, .shortcut-arrow, .gallery-thumb:hover, .slideshow-control:hover { transform: none !important; }
  .slideshow-progress { display: none; }
}

@media print {
  .reading-progress, .slideshow-controls, .slideshow-progress { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}