/* ════ /home : animations reprises de la maquette du site (D.A. live) ════
   Ouverture (logo écrit + volet incliné + bande blanche), titre qui monte, apparition au
   défilement, volets à l'angle du logo, boutons qui roulent, compteurs.
   Avec « réduire les animations », rien de tout cela ne joue. */
@property --rv { syntax: '<number>'; inherits: false; initial-value: 0; }
.h2-logo { position: relative; width: var(--lw); height: calc(var(--lw) * 230 / 1261); }
.h2-logo .lettre { position: absolute; top: 0; height: 100%;
  left: calc(var(--lw) * (var(--x1) - 17) / 1261); width: calc(var(--lw) * (var(--x2) - var(--x1)) / 1261);
  background: url('/logo-vectoriel.svg?v=1') no-repeat; background-size: calc(var(--lw) * 1300 / 1261) 100%; background-position: calc(var(--lw) * var(--x1) / -1261) 0;
  --h: calc(var(--lw) * 230 / 1261); --X: calc((100% + var(--h)) * var(--rv) - var(--h));
  clip-path: polygon(calc(0px - var(--h)) 0, var(--X) 0, calc(var(--X) + var(--h)) 100%, calc(0px - var(--h)) 100%);
  transform: translate3d(calc(var(--lw) * -.014), calc(var(--lw) * -.014), 0); opacity: 0; }
.ecrit .h2-logo .lettre { --rv: 1; transform: none; opacity: 1; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .25s; transition-delay: calc(80ms + var(--i) * 60ms);
  animation: h2-lettre .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(80ms + var(--i) * 60ms); }
@keyframes h2-lettre { from { --rv: 0; } to { --rv: 1; } }   /* animation et non transition : Safari saute les transitions @property */
/* 1. Ouverture, une fois par session */
.h2-ouv { position: fixed; inset: 0; z-index: 3000; background: var(--wc-fond-plateforme); display: grid; place-items: center; cursor: pointer; }
.h2-ouv .h2-logo { --lw: min(64vw, 560px); }
.h2-ouv__rec { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: 20px; display: flex; align-items: center; gap: 8px; font: 600 12px/1 'Geist', system-ui, sans-serif; letter-spacing: .16em; color: #fff; }
.h2-ouv__rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--wc-red); animation: h2-clignote 1s steps(1) infinite; }
@keyframes h2-clignote { 50% { opacity: 0; } }
.h2-ouv__tc { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 20px; font: 500 13px/1 'Geist', system-ui, sans-serif; letter-spacing: .06em; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.h2-ouv__bord { position: fixed; inset: 0; z-index: 2999; background: #fff; pointer-events: none; }
/* 2. Titre « Withcam Studio » : chaque mot monte derrière un cache */
.h2-marque h1 .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.h2-marque h1 .mot > span { display: inline-block; transform: translate3d(0, 110%, 0); }
body.h2-revele .h2-marque h1 .mot > span { transform: none; transition: transform .95s cubic-bezier(.16,1,.3,1); transition-delay: calc(60ms + var(--i) * 90ms); }
.h2-marque img.h2-rv-logo { opacity: 0; scale: .85; }
body.h2-revele .h2-marque img.h2-rv-logo { opacity: 1; scale: 1; transition: opacity .5s ease, scale .8s cubic-bezier(.34,1.56,.64,1); }
/* 3. Apparition au défilement (rubriques, pastilles) */
body .h2-rv { opacity: 0; }
body .card.featured.h2-rv-f { clip-path: inset(0 100% 0 0); }
body .section-header.h2-rv.on, body .card.h2-rv.on, body .h2-rv.on { animation: h2-monte .8s cubic-bezier(.16,1,.3,1) both !important; animation-delay: var(--d, 0ms) !important; }
@keyframes h2-monte { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
/* 4. Grandes tuiles : volet incliné à l'angle du logo, suivi d'un liseré blanc */
.h2-lisere { position: absolute; inset: 0; z-index: 4; background: #fff; pointer-events: none; border-radius: inherit; }
/* 5. Pastilles : le nom roule au survol (souris) */
.roule { display: inline-grid; height: 1.3em; overflow: hidden; vertical-align: top; }
.roule > span { display: block; height: 1.3em; line-height: 1.3em; transition: transform .55s cubic-bezier(.7,0,.2,1); }
body.d-c .card:not(.featured):hover .roule > span, body.d-c .card:not(.featured):focus-visible .roule > span { transform: translateY(-100%); }
.h2-chrono { letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) {
  .h2-ouv, .h2-ouv__bord { display: none !important; }
  .h2-rv { opacity: 1 !important; animation: none !important; } .h2-rv-f { clip-path: none !important; }
  .h2-marque h1 .mot > span, .h2-marque img.h2-rv-logo { transform: none !important; opacity: 1 !important; scale: 1 !important; }
  .h2-logo .lettre { clip-path: none; transform: none; opacity: 1; animation: none !important; }
  .roule > span { transition: none; }
}