/* SURTYS — couche d'animations commune (sxm) — v3 « signature »
   Amélioration progressive : les états masqués n'existent que sous html.sxm,
   classe posée par le petit script de <head> (absente si « réduire les animations »,
   navigateur ancien ou robot d'indexation). Sans JS, tout reste visible. */
:root{--sxm-ease:cubic-bezier(.2,.7,.2,1);--sxm-gold:#b07d3b}

/* Avant le démarrage du script : contenu du bandeau d'ouverture en attente (pas de saut de mise en page) */
.sxm:not(.sxm-go) main>section:first-of-type>:not(img):not(picture):not([class*="absolute"]){opacity:0}

/* Unités animées */
.sxm .sxm-u{
  --sxm-dl:calc(var(--sxm-d,0) * 120ms);
  transition:opacity 1s var(--sxm-ease) var(--sxm-dl),translate 1.15s var(--sxm-ease) var(--sxm-dl),scale 1.15s var(--sxm-ease) var(--sxm-dl),filter 1s var(--sxm-ease) var(--sxm-dl),clip-path 1.25s var(--sxm-ease) var(--sxm-dl);
}
.sxm .sxm-u.sxm-in{filter:blur(0)}
.sxm .sxm-u.sxm-done{filter:none;clip-path:none}
.sxm .sxm-u:not(.sxm-in){opacity:0!important;translate:0 56px;filter:blur(5px)}
.sxm .sxm-u.sxm-l:not(.sxm-in){translate:-80px 0}
.sxm .sxm-u.sxm-r:not(.sxm-in){translate:80px 0}
.sxm .sxm-u.sxm-z:not(.sxm-in){translate:0 30px;scale:.9}
/* Titres : dévoilement en rideau, de bas en haut */
.sxm .sxm-u.sxm-t{clip-path:inset(-20% -6% -20% -6%)}
.sxm .sxm-u.sxm-t:not(.sxm-in){translate:0 40px;clip-path:inset(0 0 100% 0);filter:none}
.sxm .sxm-u.sxm-t.sxm-done{clip-path:none}
/* Bandeau d'ouverture : cascade plus lente et plus ample */
.sxm .sxm-u.sxm-h{--sxm-dl:calc(var(--sxm-d,0) * 150ms + 150ms);transition-duration:1.1s,1.3s,1.3s,1.1s,1.4s}

/* Photo de fond du bandeau : léger zoom arrière à l'ouverture */
.sxm .sxm-hbg{scale:1.16;transition:scale 3.4s cubic-bezier(.16,.6,.2,1)}
.sxm.sxm-go .sxm-hbg{scale:1}

/* Filets dorés : ils se dessinent quand leur bloc apparaît */
.sxm .sxm-line{transform-origin:left center;transition:scale 1.2s var(--sxm-ease) calc(var(--sxm-dl,0ms) + 350ms)}
.sxm .sxm-u:not(.sxm-in) .sxm-line,.sxm .sxm-line.sxm-u:not(.sxm-in){scale:0 1}

/* Cartes : légère élévation au survol, une fois l'apparition terminée */
.sxm .sxm-card.sxm-done{transition:translate .35s var(--sxm-ease),box-shadow .35s var(--sxm-ease),border-color .35s}
.sxm .sxm-card.sxm-done:hover{translate:0 -9px;box-shadow:0 26px 46px -14px rgba(27,42,74,.36)}

/* ===== v3 « signature » ===== */
/* Titres découpés en mots : le bloc ne bouge pas, ce sont les mots qui se lèvent */
.sxm .sxm-u.sxm-s.sxm-split:not(.sxm-in){opacity:1!important;translate:none;filter:none}
.sxm .sxm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin:0 -.02em -.12em}
.sxm .sxm-wi{display:inline-block;translate:0 115%;rotate:4deg;transform-origin:0 100%;
  transition:translate 1s cubic-bezier(.19,1,.22,1) calc(var(--sxm-dl,0ms) + var(--sxm-wi,0) * 55ms + 80ms),rotate 1s cubic-bezier(.19,1,.22,1) calc(var(--sxm-dl,0ms) + var(--sxm-wi,0) * 55ms + 80ms)}
.sxm .sxm-in .sxm-wi,.sxm .sxm-in.sxm-split .sxm-wi{translate:none;rotate:none}
.sxm .sxm-h .sxm-wi{transition-duration:1.2s}

/* Cartes des grilles : elles se redressent en 3D */
.sxm .sxm-persp{perspective:1400px}
.sxm .sxm-u.sxm-c{transform-origin:50% 100%}
.sxm .sxm-u.sxm-c:not(.sxm-in){translate:0 70px;rotate:x 24deg;filter:blur(4px)}
.sxm .sxm-u.sxm-c{transition-property:opacity,translate,rotate,filter,scale}

/* Visuels : ouverture en volet, la photo se recadre doucement */
.sxm .sxm-u.sxm-z{clip-path:inset(0 0 0 0)}
.sxm .sxm-u.sxm-z:not(.sxm-in){translate:none;scale:1;filter:none;clip-path:inset(0 100% 0 0)}
.sxm .sxm-u.sxm-z{transition:opacity .4s ease var(--sxm-dl),clip-path 1.4s cubic-bezier(.77,0,.18,1) var(--sxm-dl)}
.sxm .sxm-z img{transition:scale 2s cubic-bezier(.19,1,.22,1) var(--sxm-dl,0ms)}
.sxm .sxm-z:not(.sxm-in) img{scale:1.18}
.sxm .sxm-u.sxm-z.sxm-done{clip-path:none}

/* Illustrations en traits : dessin progressif, puis les aplats apparaissent */
.sxm .sxm-draw{transition:stroke-dashoffset 2.6s cubic-bezier(.45,.05,.2,1) var(--sxm-dd,0ms)}
.sxm .sxm-dr-wait .sxm-draw{stroke-dashoffset:var(--sxm-len)}
.sxm .sxm-fill{transition:opacity 1.2s ease calc(var(--sxm-dd,0ms) + 1100ms)}
.sxm .sxm-dr-wait .sxm-fill{opacity:0}

/* Pictogrammes : entrée avec rotation et léger rebond */
.sxm .sxm-ico{transition:scale .9s cubic-bezier(.34,1.56,.64,1) calc(var(--sxm-dl,0ms) + 350ms),rotate .9s cubic-bezier(.34,1.56,.64,1) calc(var(--sxm-dl,0ms) + 350ms),opacity .5s ease calc(var(--sxm-dl,0ms) + 350ms)}
.sxm .sxm-u:not(.sxm-in) .sxm-ico{scale:.2;rotate:-40deg;opacity:0}

/* Boutons dorés : reflet au survol */
.sxm .sxm-btn{transition:background-position 1s cubic-bezier(.19,1,.22,1),box-shadow .35s,translate .35s}
.sxm .sxm-btn:hover{--sxm-sh:-30%;box-shadow:0 16px 32px -12px rgba(176,125,59,.8);translate:0 -3px}
.sxm .sxm-u.sxm-btn.sxm-done:hover,.sxm .sxm-u .sxm-btn:hover{translate:0 -3px}

/* Cartes : inclinaison 3D et halo doré qui suit la souris */
.sxm .sxm-card.sxm-done{transform-style:preserve-3d;transition:translate .35s var(--sxm-ease),box-shadow .35s var(--sxm-ease),transform .25s ease-out,border-color .35s}
.sxm .sxm-card.sxm-done:hover{transform:perspective(900px) rotateX(var(--sxm-rx,0deg)) rotateY(var(--sxm-ry,0deg))}
.sxm-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--sxm-mx,50%) var(--sxm-my,50%),rgba(176,125,59,.17),transparent 48%)}
.sxm .sxm-card.sxm-done:hover .sxm-glow{opacity:1}

/* En-tête : il se détache de la page au défilement */
.sxm header{transition:box-shadow .4s ease}
.sxm header.sxm-scrolled{box-shadow:0 12px 32px -14px rgba(27,42,74,.32)}

/* Barre de lecture (articles du blog) */
.sxm-bar{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--sxm-gold);transform:scaleX(0);transform-origin:left center;z-index:80;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .sxm .sxm-u,.sxm .sxm-hbg,.sxm .sxm-line,.sxm .sxm-wi,.sxm .sxm-ico{transition:none!important;opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;filter:none!important;clip-path:none!important}
  .sxm .sxm-draw{stroke-dashoffset:0!important}.sxm .sxm-fill{opacity:revert!important}
  .sxm-bar{display:none}
}
@media print{
  .sxm .sxm-u,.sxm main>section:first-of-type>*,.sxm .sxm-wi,.sxm .sxm-ico{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;filter:none!important;clip-path:none!important}
  .sxm .sxm-draw{stroke-dashoffset:0!important}
  .sxm-bar{display:none}
}