/* Stabilisation professionnelle V86. Aucun blocage tactile, aucun décalage de grille. */
:root{
  --pro-progress:0%;
  --pro-ease:cubic-bezier(.22,.8,.25,1);
  --pro-focus:0 0 0 3px color-mix(in srgb,var(--site-theme-accent,#fff) 25%,transparent);
}

html{
  scroll-padding-top:clamp(76px,9vw,108px);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  overflow-y:auto;
  touch-action:auto;
}
body{
  min-width:320px;
  min-height:100%;
  overflow-x:clip!important;
  overflow-y:visible;
  touch-action:auto!important;
  overscroll-behavior-y:auto;
}
img,video,canvas,svg,iframe{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a,[role="button"]{touch-action:manipulation}

.skip-link{
  position:fixed;
  z-index:100000;
  top:12px;
  left:12px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:#fff;
  color:#050505;
  font-weight:900;
  text-decoration:none;
  transform:translateY(-180%);
  transition:transform .22s var(--pro-ease);
}
.skip-link:focus{transform:none}

.pro-scroll-progress{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  width:var(--pro-progress);
  height:3px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--site-theme-accent,#fff),var(--site-theme-accent-2,#aaa));
  box-shadow:0 0 14px color-mix(in srgb,var(--site-theme-accent,#fff) 55%,transparent);
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid color-mix(in srgb,var(--site-theme-accent,#fff) 82%,#fff);
  outline-offset:3px;
  box-shadow:var(--pro-focus);
}

/* La couche professionnelle ne modifie plus la position des cartes. */
.pro-reveal,
.pro-reveal[data-pro-motion],
.pro-motion-ready .pro-reveal,
.pro-mobile-app .pro-reveal{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
}

/* Évite les images qui restent floues après le chargement. */
.pro-image-loading,
.pro-image-ready,
img.pro-image-loading,
img.pro-image-ready{
  opacity:1!important;
  filter:none!important;
}

/* Transitions sûres, sans déplacement de la mise en page. */
.glass,.member-card,.social-card,.game-card,.interactive-card,
.section-card,.dashboard-card,.admin-item,.album-card,.media-card,.album-dialog-media,
.primary,.primary-button,.ghost,.header-button,.action-button,.hero-action,.back-link,.launch-game{
  transition:border-color .22s ease,box-shadow .25s ease,background-color .22s ease,color .22s ease,opacity .22s ease!important;
  will-change:auto!important;
}

/* Les grilles gardent toujours leur placement original. */
.about-grid > *,
.contact-reasons > *,
.cards > *,
.members-grid > *,
.games-grid > *,
.social-grid > *,
.album-showcase > *{
  translate:none!important;
}

/* Les dialogues conservent leur CSS d'origine. */
dialog{
  touch-action:auto;
  overscroll-behavior:contain;
}
dialog[open]{animation:proDialogStable .18s ease-out both}
@keyframes proDialogStable{
  from{opacity:.94}
  to{opacity:1}
}

@media(max-width:820px), (pointer:coarse){
  html{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
    overflow-y:auto!important;
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body,
  body.pro-dialog-open,
  body.pro-touch-device,
  body.pro-standalone-app{
    position:static!important;
    width:100%;
    max-width:100%;
    min-width:0;
    height:auto!important;
    min-height:100%;
    max-height:none!important;
    overflow-x:clip!important;
    overflow-y:visible!important;
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  *,*::before,*::after{box-sizing:border-box}
  input,select,textarea{font-size:16px!important;max-width:100%}
  button,.button,.primary,.ghost,.header-button,.action-button,.menu-btn{min-height:44px}

  /* Pas de plein écran forcé. Les styles mobiles existants du site reprennent la main. */
  .album-dialog,
  .lightbox-dialog,
  .admin-dialog,
  .contact-dialog{
    height:auto;
    max-height:100svh;
    touch-action:auto!important;
  }
  .album-dialog-grid,
  .lightbox-stage,
  .lightbox-thumbs,
  .admin-content{
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Les effets coûteux sont retirés sur téléphone, sans cacher le contenu. */
  .cursor-glow,#cursorGlow{display:none!important}
  .glass,.member-card,.social-card,.game-card,.section-card,.dashboard-card,
  .admin-item,.album-card,.album-dialog,.lightbox-dialog,.admin-dialog,.contact-dialog{
    -webkit-backdrop-filter:none!important;
  }
  .pro-scroll-progress{height:2px}
}

@media(prefers-reduced-motion:reduce){
  .pro-scroll-progress{display:none}
  dialog[open]{animation:none}
  *{scroll-behavior:auto!important}
}