/* ============================================================
   MOBILE COMMUN — header / footer / menu mobile (toutes maquettes)
   Chargé APRÈS le CSS inline de chaque maquette. Uniquement des
   règles @media : le design desktop reste strictement identique.
   ============================================================ */
@media (max-width:900px){
  /* Header : burger à gauche, marque parfaitement centrée */
  .nav{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; gap:0; padding:14px 18px; }
  .nav.scrolled{ padding:11px 18px; }
  .nav-side{ display:none !important; }
  .nav-burger{ display:inline-flex !important; grid-column:1; grid-row:1; justify-self:start; align-items:center; justify-content:center; width:44px; height:44px; margin-left:-11px; }
  .nav .brand, .nav > .brand{ grid-column:2; grid-row:1; justify-self:center; }
  .nav .brand b{ font-size:17px; letter-spacing:.12em; }
  .nav .brand span{ font-size:7px; letter-spacing:.26em; margin-top:6px; }

  /* Footer : une colonne aérée, liens facilement cliquables */
  .footer{ padding:64px 0 32px; }
  .footer .wrap{ grid-template-columns:1fr !important; gap:38px; }
  .footer p{ max-width:none; }
  .footer ul{ gap:14px; }
  .footer a{ display:inline-block; padding:2px 0; }
  .footer-bottom{ margin-top:44px; padding-top:22px; font-size:11.5px; line-height:1.6; }

  /* Fluidité du header : n'animer que transform + couleurs.
     padding et box-shadow déclenchaient layout/repaint à chaque
     apparition/disparition pendant le scroll (saccades). */
  .nav{ transition:transform .38s ease, background .3s ease, color .3s ease !important; will-change:transform; }

  /* Photos animées (ken burns du hero, parallaxe des volets et cartes
     empilées) : composition GPU pour un zoom parfaitement fluide. */
  .hero-slide, .stack-img, .slide-img{ will-change:transform; backface-visibility:hidden; }
  .hero-slide{ will-change:transform, opacity; }

  /* Hauteurs plein écran STABLES : 100dvh se recalcule à chaque
     apparition/disparition de la barre d'adresse du téléphone — donc
     précisément quand on remonte —, ce qui redimensionne les sections
     et fait « sauter » toute la page (lag). 100svh est fixe. */
  .hero{ min-height:100svh; }
  .filmstrip{ height:100svh; }
  .slide{ height:100svh; box-shadow:none; }
  .stack-card{ height:calc(100svh - var(--bannerH, 92px)); box-shadow:none; }

  /* Volets sticky (.slide) : texte quasi centré sur la photo (demande
     Owens). Le panneau couvre toute la hauteur, le dégradé de chaque
     famille (défini dans la page / la feuille famille) suit. */
  .slide-panel, .slide.right .slide-panel{
    top:0; bottom:0; justify-content:center;
  }

  /* Anti-débordement horizontal global.
     overflow-x:clip (et PAS hidden) : hidden transformerait body en conteneur
     de défilement et casserait tous les effets position:sticky (sections qui
     s'empilent, bandeaux collants) ; clip coupe sans casser le sticky. */
  html, body{ max-width:100%; overflow-x:clip; }
  img, video{ max-width:100%; }
}
@media (max-width:480px){
  .footer .wrap{ padding:0 20px; }
}

/* Fluidité des zooms au survol (souris uniquement — aucun effet visuel,
   on demande juste au navigateur de composer ces images sur le GPU
   pendant le survol pour éviter la micro-saccade du zoom). */
@media (hover:hover){
  .acard:hover img, .mat-card:hover .mat-media img, .fcard:hover .fcard-media img,
  .gal-item:hover img, .bstep:hover .bstep-media img, .pr-card:hover .pr-ph,
  .pr-card:hover .pr-img, .tt-card:hover .tt-thumb img, .pl-card:hover img,
  .tcard:hover{ will-change:transform; }
}