/* Copeaux & Fils : précis, mécanique, sans rebond. Traits qui se tracent, volets. */
:root{--ease:cubic-bezier(.6,0,.2,1);--rv-d:.7s;--rv-st:60ms}
html,body{overflow-x:clip}

/* Grille visible : 12 lignes (4 sur mobile) dans un calque décoratif aria-hidden */
.tr-grille{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:0 48px;pointer-events:none;z-index:0}
.tr-grille i{border-left:1px solid rgb(94 96 99 / .12)}
@media (max-width:760px){.tr-grille{grid-template-columns:repeat(4,1fr);padding:0 20px;gap:0 16px}.tr-grille i:nth-child(n+5){display:none}}

/* Survol d'une réalisation : le numéro passe en repère, la photo se décale de 6 px */
.tr-fig-n{transition:color .5s var(--ease)}
.tr-real-photo{transition:transform .6s var(--ease)}
@media (hover:hover){.tr-real:hover .tr-fig-n,.tr-real:focus-within .tr-fig-n{color:#B0301A}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.tr-real:hover .tr-real-photo{transform:translate(6px,-6px)}}

@media (prefers-reduced-motion:no-preference){
  /* Grille : les lignes apparaissent de gauche à droite au chargement (40 ms de décalage) */
  .ex-anim .tr-grille i{animation:trLigne .6s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
  @keyframes trLigne{from{opacity:0;transform:scaleY(.2);transform-origin:50% 0}}

  /* Photos : volet qui glisse (planche qu'on découvre). Pas d'opacité, l'image reste nette */
  .ex-anim [data-rv="volet"]{opacity:1;clip-path:inset(0 100% 0 0)}
  .ex-anim [data-rv="volet-bas"]{opacity:1;clip-path:inset(0 0 100% 0)}
  .ex-anim [data-rv^="volet"].is-in{clip-path:inset(0)}
  /* Héros : volet au chargement (ordinateur). Sur mobile la photo est là tout de suite (LCP) */
  @media (min-width:761px){
    .ex-anim .tr-hero-photo{animation:trVolet .8s var(--ease) .15s both}
    @keyframes trVolet{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  }
  /* Cotes SVG : le trait se dessine, puis le chiffre apparaît */
  .ex-anim .tr-cote .trait{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease) .35s}
  .ex-anim .tr-cote .chiffre{opacity:0;transition:opacity .3s linear 1s}
  .ex-anim .is-in .tr-cote .trait,.ex-anim .tr-cote.is-in .trait{stroke-dashoffset:0}
  .ex-anim .is-in .tr-cote .chiffre,.ex-anim .tr-cote.is-in .chiffre{opacity:1}
  .ex-anim .tr-hero .tr-cote .trait{animation:trTrace .7s var(--ease) .9s both}
  .ex-anim .tr-hero .tr-cote .chiffre{animation:trChiffre .3s linear 1.5s both}
  @keyframes trTrace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes trChiffre{from{opacity:0}}

  /* Légende « FIG. 03 » : s'écrit en mono, lettre par lettre (steps, sans JS) */
  .ex-anim .tr-fig{clip-path:inset(0 100% 0 0);transition:clip-path .6s steps(var(--n,24)) .5s}
  .ex-anim .is-in .tr-fig{clip-path:inset(0)}
  /* Chiffres : une règle graduée se remplit sous chaque nombre (comme celle du logo) */
  .ex-anim .tr-regle{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s steps(9) calc(200ms + var(--i,0) * 120ms)}
  .ex-anim .is-in .tr-regle{transform:none}
  .ex-anim [data-rv="net"]{transform:translateY(12px)}

  /* Méthode : le fil sapin se remplit avec le défilement (ordinateur en largeur, mobile en hauteur) */
  @supports (animation-timeline:view()){
    .ex-anim .tr-fil-plein{animation:trFil linear both;animation-timeline:--trMethode;animation-range:entry 60% cover 60%}
    .tr-methode{view-timeline:--trMethode block}
    @keyframes trFil{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @media (max-width:760px){@keyframes trFil{from{transform:scaleY(0)}to{transform:scaleY(1)}}}
    /* Bandeau copeaux : la photo glisse de 6 % dans son cadre (ordinateur) */
    @media (min-width:1024px){
      .ex-anim .tr-copeaux img{animation:trGlisse linear both;animation-timeline:view();animation-range:cover}
      @keyframes trGlisse{from{transform:scale(1.12) translateY(-5%)}to{transform:scale(1.12) translateY(5%)}}
    }
  }
  .ex-anim .tr-etape{opacity:1;transform:translateY(14px);clip-path:inset(0 0 18% 0);transition:transform .6s var(--ease),clip-path .6s var(--ease)}
  .ex-anim .tr-etape.is-in{transform:none;clip-path:inset(0)}
  /* Fiche détaillée (dialog) : ouverture par volet, plan coté qui se trace */
  .tr-dialog[open]{animation:trVolet .5s var(--ease)}
  .tr-dialog[open] .tr-cote .trait{animation:trTrace .7s var(--ease) .4s both}
  /* Les 3 bois : le veinage se dessine */
  .ex-anim .tr-bois path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) calc(var(--i,0) * 50ms)}
  .ex-anim .tr-bois.is-in path{stroke-dashoffset:0}
}
.tr-fil{position:relative}
.tr-fil-plein{position:absolute;inset:0;background:#23493A;transform-origin:0 0}
@supports not (animation-timeline:view()){.tr-fil-plein{transform:none}}