/* Bleus Frères — animations SVG « du métier » des pages services (terrassement, égouttage, fondations, aménagement).
   Même mécanique que le kit BE WEB : tracé au trait (.dr + --l), apparition ([data-t]), boucle (.loop + --a / --d / --e / --w).
   La classe .go est posée sur [data-anim] par site.js quand le bloc entre à l'écran.
   Règle : l'état de base d'un élément en boucle = l'état FINAL (ce que voit prefers-reduced-motion). */
.anim { background: var(--nuit, #1E1F22); color: #FFFFFF; border-top: 1px solid var(--trait-s, #34353A); }
.anim-in { max-width: 1320px; margin: 0 auto; padding: clamp(40px, 5vw, 72px) 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.anim-txt .eyebrow { font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--or-clair, #FFE1BA); }
.anim-txt h2 { margin: 12px 0 0; font-family: Oswald, sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 50px); line-height: .98; letter-spacing: .005em; text-transform: uppercase; color: #FFFFFF; text-wrap: balance; }
.anim-txt p { margin: 18px 0 0; max-width: 480px; font-size: 16px; line-height: 1.65; color: var(--txt-s, #C9C6C0); text-wrap: pretty; }
.anim-svg { position: relative; aspect-ratio: 16 / 10; background: var(--nuit2, #2A2B30); box-shadow: 0 0 0 1px var(--trait-s, #34353A), 0 28px 50px -28px rgba(0, 0, 0, .7); overflow: hidden; }
.anim-svg::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--or, #FA7D09); z-index: 1; }
.anim-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .anim-in { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .anim-txt { padding: 0 24px; }
  .anim-svg { width: 100%; }
}

/* Traits et matières */
.anim-svg .k { fill: none; stroke: #C9C6C0; stroke-width: 3; stroke-linecap: square; }
.anim-svg .k2 { fill: none; stroke: #6E6F75; stroke-width: 2; }
.anim-svg .sol { stroke: #45464B; stroke-width: 2; }
.anim-svg .or { fill: none; stroke: var(--or, #FA7D09); stroke-width: 4; stroke-linecap: round; }
.anim-svg .eau { fill: none; stroke: #7FB8D6; stroke-width: 3; stroke-linecap: round; }
.anim-svg .eau-f { fill: rgba(127, 184, 214, .38); stroke: #7FB8D6; stroke-width: 2; }
.anim-svg .vit { fill: rgba(255, 225, 186, .14); stroke: none; }
.anim-svg .terre { fill: rgba(201, 198, 192, .16); stroke: #8B8A86; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.anim-svg .beton { fill: rgba(255, 225, 186, .3); stroke: #FFE1BA; stroke-width: 2.5; }
.anim-svg .beton--or { stroke: var(--or, #FA7D09); stroke-width: 3.5; }
.anim-svg .mur { fill: rgba(201, 198, 192, .14); stroke: #C9C6C0; stroke-width: 3; }
.anim-svg .klinker { fill: rgba(250, 125, 9, .28); stroke: var(--or, #FA7D09); stroke-width: 2; }
.anim-svg .bord { fill: #45464B; stroke: #C9C6C0; stroke-width: 3; }

/* Mécanique : tracé, apparition, boucle */
.anim-svg [data-t] { opacity: 0; }
.anim-svg.go .dr { stroke-dasharray: var(--l, 1200); stroke-dashoffset: var(--l, 1200); animation: aDraw 1.6s cubic-bezier(.6, 0, .2, 1) both; }
.anim-svg.go [data-t] { animation: aIn .8s cubic-bezier(.2, .8, .2, 1) both; }
.anim-svg.go .loop { transform-box: view-box; animation: var(--a) var(--d, 5s) var(--e, ease-in-out) var(--w, 2.2s) infinite backwards; }
@keyframes aDraw { to { stroke-dashoffset: 0; } }
@keyframes aIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Terrassement (9 s) : trois coups de godet, le terrain s'aplanit, le tas grossit */
@keyframes aBoom { 0%, 8% { transform: rotate(0); } 14% { transform: rotate(7deg); } 24% { transform: rotate(-3deg); } 32% { transform: rotate(0); } 38% { transform: rotate(7deg); } 46% { transform: rotate(-3deg); } 54% { transform: rotate(0); } 60% { transform: rotate(7deg); } 68% { transform: rotate(-3deg); } 76%, 100% { transform: rotate(0); } }
@keyframes aStick { 0%, 8% { transform: rotate(0); } 14% { transform: rotate(30deg); } 24% { transform: rotate(6deg); } 32% { transform: rotate(0); } 38% { transform: rotate(30deg); } 46% { transform: rotate(6deg); } 54% { transform: rotate(0); } 60% { transform: rotate(30deg); } 68% { transform: rotate(6deg); } 76%, 100% { transform: rotate(0); } }
@keyframes aCurl { 0%, 8% { transform: rotate(0); } 14% { transform: rotate(10deg); } 22% { transform: rotate(-26deg); } 32% { transform: rotate(0); } 38% { transform: rotate(10deg); } 46% { transform: rotate(-26deg); } 54% { transform: rotate(0); } 60% { transform: rotate(10deg); } 68% { transform: rotate(-26deg); } 76%, 100% { transform: rotate(0); } }
@keyframes aBumps { 0%, 8% { transform: scaleY(1); opacity: 1; } 24% { transform: scaleY(.72); } 46% { transform: scaleY(.42); } 68% { transform: scaleY(.1); } 76%, 90% { transform: scaleY(0); opacity: 1; } 91% { transform: scaleY(0); opacity: 0; } 91.1% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes aHeap { 0% { transform: scaleY(.06); opacity: 0; } 3% { transform: scaleY(.06); opacity: 1; } 24% { transform: scaleY(.42); } 46% { transform: scaleY(.7); } 68%, 90% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes aGlow { 0%, 70% { opacity: 0; } 78% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* Égouttage (8 s) : citerne qui se remplit, flux dans le tuyau, pluie sur le toit */
@keyframes aFill { 0% { transform: scaleY(.1); opacity: 0; } 5% { transform: scaleY(.1); opacity: .9; } 82%, 92% { transform: scaleY(.92); opacity: .9; } 100% { transform: scaleY(.92); opacity: 0; } }
@keyframes aFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -64; } }
@keyframes aDrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(var(--dy, 80px)); opacity: 0; } }

/* Fondations (11 s) : tranchées creusées, semelles coulées, dalle posée, murs amorcés, puis remblai */
@keyframes aPlug { 0%, 6% { clip-path: inset(0 0 0 0); } 26%, 94% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes aSem { 0%, 28% { clip-path: inset(100% 0 0 0); opacity: 1; } 42%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes aDalle { 0%, 46% { opacity: 0; transform: translateY(-44px); } 56%, 92% { opacity: 1; transform: none; } 97% { opacity: 0; transform: none; } 100% { opacity: 0; transform: translateY(-44px); } }
@keyframes aMur { 0%, 58% { clip-path: inset(100% 0 0 0); opacity: 1; } 76%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

/* Aménagement (12 s) : couches empilées, bordures, puis eau qui traverse les klinkers drainants */
@keyframes aCof { 0%, 2% { opacity: 0; transform: translateY(-34px); } 10%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes aLit { 0%, 12% { opacity: 0; transform: translateY(-34px); } 20%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes aKl { 0%, 22% { clip-path: inset(0 100% 0 0); opacity: 1; } 36%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 97% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
@keyframes aBord { 0%, 40% { opacity: 0; transform: translateY(-50px); } 48%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes aDrip { 0%, 52% { transform: translateY(0); opacity: 0; } 55% { transform: translateY(0); opacity: 1; } 67% { transform: translateY(var(--dy, 224px)); opacity: 1; } 69% { transform: translateY(var(--dy, 224px)); opacity: 0; } 69.1% { transform: translateY(0); opacity: 0; } 72% { transform: translateY(0); opacity: 1; } 84% { transform: translateY(var(--dy, 224px)); opacity: 1; } 86%, 100% { transform: translateY(var(--dy, 224px)); opacity: 0; } }

/* Mouvement réduit : tout est dessiné, état final, aucune boucle */
@media (prefers-reduced-motion: reduce) {
  .anim-svg [data-t] { opacity: 1 !important; animation: none !important; transform: none !important; }
  .anim-svg .dr { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .anim-svg .loop { animation: none !important; }
  .anim-svg .rm-off { display: none; }
}