/* Compléments du site statique : la feuille originale conserve le design. */
html { scroll-behavior: smooth; }
html, body, #root { height: auto; overflow: visible; }
body { overflow-x: clip; }
#accueil { overflow: clip; }
[hidden] { display: none !important; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 4px; }
header nav a { color: var(--color-muted); }
header nav a:hover, header nav a[aria-current] { color: var(--color-primary); box-shadow: inset 0 -2px var(--color-accent); }
.sticky-logo { opacity: 0; pointer-events: none; transition: opacity .3s; }
.sticky-logo.is-visible { opacity: 1; pointer-events: auto; }
.mobile-nav a { display: block; padding: 12px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.media-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; padding: 24px; text-align: center; background: var(--color-canvas); color: var(--color-muted); border: 1px solid rgba(var(--rgb-accent), 0.2510); font-size: 14px; }
#gpec-en-detail .media-placeholder { background: #ffffff08; color: rgba(var(--rgb-canvas), 0.7020); height: 100%; }
.accordion-toggle[aria-expanded=true] .text-lg { color: var(--color-accent) !important; }
[role=region]:not([hidden]) { animation: fadeIn .3s ease; }
button:disabled { opacity: .4; cursor: not-allowed; }
#form-error { color: #a52a22; }
#contact input, #contact textarea { min-width: 0; width: 100%; }
@media(min-width:640px) { .mobile-nav { display:none; } }
@media(max-width:639px) { footer .w-48 { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Visuels locaux : cadre entier conservé, sans recadrage des captures. */
.feature-preview { display: block; width: 100%; height: 100%; }
.feature-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.feature-preview:focus-visible { outline-offset: -4px; }
.demo-preview { display: block; width: 100%; height: auto; border-radius: 4px; }
.document-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.document-links a { color: var(--color-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.document-links a:hover { color: var(--color-ink); }

/* Champ antispam exclu de la navigation clavier et des lecteurs d’écran. */
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Montage photo : images entières, fondus doux et commandes accessibles. */
.demo-showcase { margin: 32px 0 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-canvas); box-shadow: 0 18px 45px -28px rgba(var(--rgb-ink), 0.4000); }
.demo-stage { position: relative; aspect-ratio: 3 / 2; isolation: isolate; }
.demo-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 1.2s; }
.demo-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.demo-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-showcase.is-playing .demo-slide.is-active img { animation: demo-drift 6.5s ease-out both; }
@keyframes demo-drift { from { transform: scale(.975); } to { transform: scale(1); } }
.demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--color-border); color: var(--color-ink); }
.demo-controls button { min-height: 44px; min-width: 44px; border: 1px solid rgba(var(--rgb-primary), 0.3333); border-radius: 6px; background: transparent; color: var(--color-ink); font: inherit; font-size: 13px; }
.demo-controls button:hover { background: var(--color-border); }
.demo-play { padding: 0 16px; }
.demo-count { font-size: 12px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.demo-arrows { display: flex; gap: 8px; }
@media(prefers-reduced-motion:reduce) { .demo-slide { transition: none; } }

/* Présentation vidéo locale, chargée uniquement à la demande. */
.feature-video { margin: -32px 0 32px; overflow: hidden; border: 1px solid rgba(var(--rgb-accent), 0.2510); border-radius: 10px; background: var(--color-canvas); }
.feature-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.feature-video video:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }

/* Menu mobile : le fond doit contenir les six liens, pas seulement 56 px. */
@media (max-width: 639px) {
  header { background: var(--color-canvas) !important; backdrop-filter: none !important; }
  .mobile-nav {
    height: auto;
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0 16px;
    background: var(--color-canvas);
    border-top: 1px solid rgba(var(--rgb-ink), .08);
  }
}