/* ===========================================================================
   TEC'OFFICE M08 — feuille de la couche de mouvement
   Complete le CSS des pages, ne le remplace pas.
   =========================================================================== */

/* ---- 1. ANIMATIONS REDUITES -----------------------------------------------
   Les pages n'en tenaient aucun compte. On garde le fondu (il porte
   l'information « ceci vient d'arriver ») et on supprime tout deplacement. */
html.doux .reveal,
html.doux .reveal-l,
html.doux .reveal-r,
html.doux .reveal-s,
html.doux [data-par],
html.doux [data-glisse],
html.doux [data-echelle] {
  transform: none !important;
  transition: opacity .22s linear !important;
  animation: none !important;
}
html.doux [data-lignes] .lg > span { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto !important; }
}

/* ---- 1 bis. DEFILEMENT ET ANCRES -------------------------------------------
   Les pages declarent html{scroll-behavior:smooth} : incompatible avec
   ScrollTrigger (toute remesure page defilee est fausse, une ancre arrive en
   haut de page). mouvement.js prend le glissement doux en charge en JS.
   La marge sous l'en-tete collant vaut pour toutes les ancres du site. */
html.mouv { scroll-behavior: auto !important; }
html { scroll-padding-top: clamp(88px, 11vh, 116px); }

/* ---- 2. TITRE REVELE LIGNE PAR LIGNE --------------------------------------
   Masque par clip-path et non overflow:hidden : il laisse depasser accents et
   circonflexes au-dessus de la ligne (interlignage serre de M08, .96).
   Aucun etat de depart en CSS : GSAP le pose, sinon le titre reste visible. */
[data-lignes] .lg {
  display: block;
  clip-path: inset(-.4em -.6em -.12em -.6em);
}
[data-lignes] .lg > span { display: block; }

/* ---- 3. COTES DU PLAN ------------------------------------------------------
   M08 a deja sa propre structure : .cote > i.ln + span.val + i.ln, avec les
   embouts en ::after. On ne la redefinit pas, on l'anime.
   La classe .anim n'est posee QUE par le script, et seulement si GSAP est la :
   sans lui, rien n'est jamais masque. */
.cote.anim .ln::after { opacity: 0; transition: opacity .45s ease .1s; }
.cote.anim.vu .ln::after { opacity: .75; }
html.doux .cote.anim .ln::after { opacity: .75; transition: none; }

/* le cartouche, la rose des vents et l'echelle suivent le trace du plan */
.stage-cart.anim, .northmark.anim, .scalebar.anim { will-change: opacity, transform; }

/* ---- 4. TRACE ------------------------------------------------------------- */
[data-trace] { will-change: auto; }
html.doux [data-trace] path,
html.doux [data-trace] line,
html.doux [data-trace] polyline,
html.doux [data-trace] rect,
html.doux [data-trace] circle {
  stroke-dashoffset: 0 !important;
  stroke-dasharray: none !important;
}

/* ---- 4 bis. DEFILEMENT FLUIDE (Lenis) -------------------------------------
   Regles recommandees par Lenis. La classe .lenis n'est posee que par le
   script, et seulement souris + animations autorisees. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* sinon le body (overflow-x:hidden des pages) devient un conteneur de defilement
   et l'en-tete collant se rattache a lui : il disparaissait sous le panneau cookies */
.lenis.lenis-stopped body { overflow-x: clip; }

/* ---- 4 ter. CHANGEMENT DE PAGE : une planche se pose sur l'autre ----------
   Transition native du navigateur entre deux pages du site (Edge, Chrome,
   Safari recents ; les autres changent de page normalement). L'en-tete ne
   bouge pas : seule la planche change. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: entete; }
::view-transition { background: #131312; }
::view-transition-old(root) {
  animation: vt-sortie .5s cubic-bezier(.77, 0, .175, 1) both;
}
::view-transition-new(root) {
  animation: vt-entree .62s cubic-bezier(.77, 0, .175, 1) both;
}
::view-transition-group(entete) { animation-duration: .5s; }
@keyframes vt-sortie {
  to { opacity: .35; transform: translateY(-7vh) scale(.97); }
}
@keyframes vt-entree {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(12vh); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
}
/* panneau « solutions » ouvert au moment du clic : il ne part pas dans la photo */
html.vt-part .nv-pan { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- 4 quater. IMAGE DEVOILEE ---------------------------------------------
   Rien en CSS seul : GSAP pose l'etat de depart (sans lui, l'image est la). */
[data-devoile] { overflow: hidden; }

/* ---- 5. RETOUR TACTILE ---------------------------------------------------
   Un bouton qui s'enfonce legerement confirme que l'interface a entendu.
   Uniquement a l'appui (:active), jamais au simple survol. */
.btn { transition: background .3s, color .3s, border-color .3s, transform .16s cubic-bezier(.23,1,.32,1); }
.btn:active, .nv-cta:active, .gx-opt:active {
  transform: scale(.97);
}
html.doux .btn:active, html.doux .nv-cta:active, html.doux .gx-opt:active { transform: none; }

/* ---- 6. BOUTON « HAUT DE PAGE » SUR TELEPHONE -----------------------------
   Retire pendant la descente (il couvrait la fin des lignes et les boutons
   pleine largeur), de retour des que le visiteur remonte. */
@media (max-width: 760px) {
  .backtop { transition: opacity .2s ease, transform .22s cubic-bezier(.23,1,.32,1) !important; }
  html.bt-descend .backtop { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none !important; }
}