/* NIDUM · mouvement — défilement Lenis et fondu enchaîné entre les pages */

/* Les pages déclarent scroll-behavior:smooth : sous Lenis, le navigateur lisserait chaque position qu'il écrit. */
html.lenis {
  scroll-behavior: auto !important
}

html.lenis,
html.lenis body {
  height: auto
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain
}

.lenis.lenis-smooth iframe {
  pointer-events: none
}

/* ─── fondu enchaîné : la barre et la pastille restent en place ─── */
@view-transition {
  navigation: auto
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none
  }
}

#barre {
  view-transition-name: barre
}

.rail {
  view-transition-name: pastille
}

::view-transition-old(root) {
  animation: vtSortie .22s cubic-bezier(.4, 0, 1, 1) both
}

::view-transition-new(root) {
  animation: vtEntree .52s cubic-bezier(.16, 1, .3, 1) .05s both
}

@keyframes vtSortie {
  to {
    opacity: 0
  }
}

@keyframes vtEntree {
  from {
    opacity: 0;
    transform: translateY(18px)
  }
}

/* Pastille fermée : cachée dès le premier affichage, sans rejouer sa sortie à chaque page */
html.gpast-off .gpast-flot {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important
}

/* ─── téléphone : corrections globales (Oliver, 08/10, audit mobile du 30/09) ───
   1. La pastille Google flottante couvrait le bout des lignes sur toutes les
      pages : retirée sous 820 px. Les avis restent sur l'accueil et Notre métier.
   2. Le haut des pages apparaissait en fondu (.rev, 1,05 s) : environ une
      seconde et demie d'écran blanc à l'arrivée. La première section s'affiche
      tout de suite ; la suite garde son apparition au défilement. La grille de
      Réalisations (4 600 px de haut) n'atteignait jamais son seuil d'apparition
      à l'arrivée : la page restait vide sous les filtres, elle s'affiche aussi. */
@media (max-width: 820px) {
  .rail {
    display: none !important
  }

  main > :first-child.rev,
  main > :first-child .rev,
  .book-grille.rev {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important
  }
}

/* ─── Tactile (Oliver, 27/10, retour sur téléphone) ──────────────────────
   Les sélecteurs commencent par « html » pour passer devant les styles écrits
   dans chaque page. */

/* Glissières avant / après : le doigt la fait glisser horizontalement, la page
   défile verticalement. Avant : sur la plupart des projets la glissière lâchait
   dès le premier mouvement, sur Renaissance elle bloquait le défilement. */
html .gliss {
  touch-action: pan-y pinch-zoom;
  -webkit-touch-callout: none
}

html .gliss.gliss-doux .gliss-av {
  transition: clip-path .4s cubic-bezier(.2, .8, .2, 1), -webkit-clip-path .4s cubic-bezier(.2, .8, .2, 1)
}

html .gliss.gliss-doux .gliss-bar {
  transition: left .4s cubic-bezier(.2, .8, .2, 1)
}

html .gliss .gliss-h {
  transition: left 0s, transform .2s ease
}

html .gliss.gliss-doux .gliss-h {
  transition: left .4s cubic-bezier(.2, .8, .2, 1), transform .2s ease
}

html .gliss.gliss-tenu .gliss-h {
  transform: translate(-50%, -50%) scale(1.12)
}

@media (hover: none) {
  html .gliss .gliss-h {
    width: 52px;
    height: 52px
  }
}

/* Téléphone : les blocs apparaissent plus tôt (voir nidum-mouvement.js) et plus vite */
@media (max-width: 820px) {
  html .rev {
    transition-duration: .55s
  }

  html .rev:not(.vu) {
    transform: translateY(14px)
  }

  html .etape .cote-tete,
  html .etape .cote-img {
    transition-duration: .45s
  }
}

/* Écrans tactiles : retour immédiat sous le doigt, et plus d'effets de survol
   « collés » après un tap (sur iPhone, :hover reste actif jusqu'au tap suivant) */
@media (hover: none) {
  html a,
  html button,
  html [role="button"],
  html summary {
    -webkit-tap-highlight-color: rgba(0, 177, 187, .16)
  }

  html .btn,
  html .burger,
  html .gliss {
    -webkit-tap-highlight-color: transparent
  }

  html .btn-1:hover,
  html .btn-2:hover,
  html .heros-cta .btn-2:hover,
  html .brand:hover,
  html .btn:hover .fl,
  html .barre-tel:hover svg,
  html .mf-lies a:hover img,
  html .vt:hover img,
  html .igw-tile:hover img,
  html .proj-lien:hover .proj-media img,
  html .pr-type:hover img {
    transform: none
  }

  html .ag-eng:hover {
    translate: none
  }

  html .btn:active {
    transform: scale(.96);
    transition: transform .08s ease, background .15s ease, color .15s ease
  }

  html .btn:active .fl {
    transform: translateX(4px)
  }

  html .barre-tel:active svg {
    transform: rotate(-8deg) scale(1.1)
  }

  html .proj-lien:active,
  html .pr-type:active,
  html .vt:active,
  html .mf-lies a:active,
  html .ag-eng:active,
  html .igw-tile:active {
    transform: scale(.985);
    transition: transform .1s ease
  }

  html .mf-lies a:active img,
  html .vt:active img,
  html .igw-tile:active img,
  html .proj-lien:active .proj-media img,
  html .pr-type:active img {
    transform: scale(1.03);
    transition: transform .15s ease
  }
}