/* ==========================================================================
   Blog Sympa — motion.css v2 : animations marquées mais SEO-safe
   - Transform / opacity (compositeur GPU), aucune librairie.
   - Progressive enhancement : rien n'est masqué sans JS ; la révélation au
     scroll n'est posée (motion.js) que sur les éléments SOUS la ligne de
     flottaison -> zéro impact LCP / CLS.
   - Les visuels SVG ne s'animent que lorsqu'ils sont à l'écran.
   - Respecte prefers-reduced-motion (tout est désactivé).
   ========================================================================== */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --m-dur:.9s;
}

/* ---------- Révélation au scroll (classes posées par JS) ---------- */
.reveal{opacity:0;transform:translateY(44px);
  transition:opacity var(--m-dur) var(--ease-out),transform var(--m-dur) var(--ease-out);
  transition-delay:calc(var(--i,0)*95ms)}
.reveal.r-scale{transform:translateY(34px) scale(.9)}
.reveal.r-left{transform:translateX(-48px)}
.reveal.r-right{transform:translateX(48px)}
.reveal.r-pop{transform:scale(.55);transition-timing-function:var(--ease-out),var(--ease-spring)}
.reveal.in{opacity:1;transform:none}

/* ---------- Header : se densifie au scroll (hauteur inchangée -> pas de CLS) ---------- */
.site-header{transition:box-shadow .4s var(--ease-out),background .4s}
body.scrolled .site-header{box-shadow:0 10px 30px -16px rgba(27,33,30,.32);background:rgba(255,255,255,.97)}
.brand-mark{transition:transform .5s var(--ease-spring)}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.16)}
body.scrolled .brand-mark{transform:scale(.9)}
body.scrolled .brand:hover .brand-mark{transform:rotate(-12deg) scale(1.02)}
.brand-tag{transition:opacity .3s,transform .3s}
body.scrolled .brand-tag{opacity:0;transform:translateY(-4px)}
.cat-stripe{background-size:200% 100%}

/* ---------- Navigation : soulignement coloré par rubrique ---------- */
.main-nav a{transition:color .2s,background .25s}
.main-nav a::after{content:"";position:absolute;left:.58rem;right:.58rem;bottom:.22rem;height:2px;border-radius:2px;
  background:var(--cat);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.main-nav a:hover::after,.main-nav li.active>a::after{transform:scaleX(1)}
@media(max-width:960px){
  .main-nav a::after{display:none}
  .main-nav.open li{animation:navIn .5s var(--ease-out) both}
  .main-nav.open li:nth-child(1){animation-delay:40ms}
  .main-nav.open li:nth-child(2){animation-delay:80ms}
  .main-nav.open li:nth-child(3){animation-delay:120ms}
  .main-nav.open li:nth-child(4){animation-delay:160ms}
  .main-nav.open li:nth-child(5){animation-delay:200ms}
  .main-nav.open li:nth-child(6){animation-delay:240ms}
  .main-nav.open li:nth-child(7){animation-delay:280ms}
  .main-nav.open li:nth-child(8){animation-delay:320ms}
  .main-nav.open li:nth-child(9){animation-delay:360ms}
  .main-nav.open li:nth-child(10){animation-delay:400ms}
  .main-nav.open li a{border-left:3px solid var(--cat);padding-left:.8rem}
}
@keyframes navIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.nav-toggle span{transition:transform .32s var(--ease-out),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Fil d'Ariane / footer ---------- */
.breadcrumb a,.footer-col a{display:inline-block;transition:color .2s,transform .25s var(--ease-out)}
.breadcrumb a:hover,.footer-col a:hover{transform:translateX(4px)}

/* ---------- Hero : entrée en cascade + halos qui dérivent ---------- */
@keyframes rise{from{transform:translateY(30px)}to{transform:none}}
@keyframes fadeRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
@keyframes drift1{to{transform:translate(90px,70px) scale(1.18)}}
@keyframes drift2{to{transform:translate(-80px,-70px) scale(1.22)}}
@keyframes drift3{to{transform:translate(60px,-60px) scale(1.3)}}
.hero .blob.b1{animation:drift1 15s ease-in-out infinite alternate}
.hero .blob.b2{animation:drift2 19s ease-in-out infinite alternate}
.hero .blob.b3{animation:drift3 12s ease-in-out infinite alternate}
.hero>.container{position:relative;z-index:1}
.hero h1{animation:rise .95s var(--ease-out) both}                 /* transform seul : LCP intact */
.hero .hero-eyebrow{animation:fadeRise .7s var(--ease-out) both}
.hero .hero-lead{animation:fadeRise .85s .14s var(--ease-out) both}
.hero .hero-actions{animation:fadeRise .85s .28s var(--ease-out) both}
@keyframes riseT{from{translate:0 34px}to{translate:0 0}}
.hero-feature{animation:riseT 1.05s .08s var(--ease-out) both;transform-style:preserve-3d}  /* propriété translate seule : image LCP intacte, transform libre pour l'effet 3D */
.hero-feature img,.hero-feature .sv{transition:transform 1.1s var(--ease-out)}
.hero-feature:hover img,.hero-feature:hover .sv{transform:scale(1.06)}
.hero-feature .hf-cap h2{transition:transform .5s var(--ease-out)}
.hero-feature:hover .hf-cap h2{transform:translateX(6px)}
.hero-eyebrow .kicker::before{animation:pulseDot 2s ease-in-out infinite}

/* ---------- Pastilles : apparition en cascade au chargement ---------- */
.cat-rail .cat-pill{animation:popIn .65s var(--ease-spring) both}
.cat-rail .cat-pill:nth-child(1){animation-delay:.05s}.cat-rail .cat-pill:nth-child(2){animation-delay:.11s}
.cat-rail .cat-pill:nth-child(3){animation-delay:.17s}.cat-rail .cat-pill:nth-child(4){animation-delay:.23s}
.cat-rail .cat-pill:nth-child(5){animation-delay:.29s}.cat-rail .cat-pill:nth-child(6){animation-delay:.35s}
.cat-rail .cat-pill:nth-child(7){animation-delay:.41s}.cat-rail .cat-pill:nth-child(8){animation-delay:.47s}
.cat-rail .cat-pill:nth-child(9){animation-delay:.53s}.cat-rail .cat-pill:nth-child(n+10){animation-delay:.6s}
.cat-pill{transition:transform .3s var(--ease-spring),background .25s,color .2s,box-shadow .3s}
.cat-pill:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 14px 28px -14px var(--cat)}
.cat-pill .dot{transition:transform .3s var(--ease-spring),background .2s}
.cat-pill:hover .dot{transform:scale(1.5)}

/* ---------- Têtes de section : le point rebondit, le trait s'étire ---------- */
.section-head h2::after{transform:scaleX(0);transform-origin:left;transition:transform .9s .25s var(--ease-out)}
.section-head.in h2::after,html:not(.js) .section-head h2::after{transform:scaleX(1)}
.section-head .dot{transition:transform .4s var(--ease-spring)}
.section-head.in .dot{animation:popIn .7s .15s var(--ease-spring) both}
.section-head:hover .dot{transform:scale(1.35)}
.link-more .arw{display:inline-block;transition:transform .3s var(--ease-spring)}
.link-more:hover .arw{transform:translateX(7px)}

/* ---------- Cartes : élévation, zoom, voile coloré, titre souligné ---------- */
.card{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.card:hover{transform:translateY(-8px)}
.card-thumb img{transition:transform .9s var(--ease-out)}
.card:hover .card-thumb img{transform:scale(1.1)}
.card-title a{background-image:linear-gradient(var(--cat),var(--cat));background-size:0 2px;background-repeat:no-repeat;
  background-position:0 100%;transition:background-size .4s var(--ease-out),color .2s;padding-bottom:2px}
.card:hover .card-title a{background-size:100% 2px}
.kicker::before{transition:transform .35s var(--ease-spring)}
.card:hover .kicker::before{transform:scale(1.5)}
[data-tilt]{will-change:transform}

/* ---------- Boutons : ressort, reflet, halo pulsé sur le bouton principal ---------- */
.btn{position:relative;transition:background .25s,color .25s,transform .3s var(--ease-spring),box-shadow .3s}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 34px -16px rgba(0,0,0,.45)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:120% 0;transition:background-position .8s var(--ease-out)}
.btn:hover::after{background-position:-60% 0}
@keyframes ring{0%{transform:scale(.92);opacity:.75}100%{transform:scale(1.32);opacity:0}}
.hero .btn-light::before{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(255,255,255,.65);pointer-events:none;animation:ring 2.6s var(--ease-out) infinite}

/* ---------- Éditorial d'accueil ---------- */
.ed-chip .dot{transition:transform .3s var(--ease-spring),background .2s}
.ed-chip:hover .dot{transform:scale(1.5)}
.ed-block{transition:box-shadow .45s var(--ease-out),transform .6s var(--ease-out)}
.ed-block:hover{box-shadow:0 30px 60px -30px rgba(27,33,30,.3)}
.ed-art .sv{transition:transform .8s var(--ease-out)}
.ed-block:hover .ed-art .sv{transform:translateY(-6px) rotate(-1.5deg) scale(1.03)}
.ed-latest a{transition:color .2s,transform .3s var(--ease-out)}
.ed-latest a:hover{transform:translateX(5px)}
.ed-latest a::before{transition:transform .3s var(--ease-spring)}
.ed-latest a:hover::before{transform:scale(1.6)}

/* ---------- Pages liste ---------- */
.lh-art .sv{transition:transform .8s var(--ease-out)}
.list-head:hover .lh-art .sv{transform:translateY(-6px) rotate(1.5deg)}
.post-row{transition:transform .35s var(--ease-out),background .3s}
.post-row:hover{transform:translateX(8px)}
.post-row .pr-thumb img{transition:transform .8s var(--ease-out)}
.post-row:hover .pr-thumb img{transform:scale(1.08)}
.pagination a{transition:transform .25s var(--ease-spring),border-color .2s,color .2s,background .2s}
.pagination a:hover{transform:translateY(-3px)}

/* ---------- Article ---------- */
.article-body h2::after{content:"";display:block;width:56px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--cat),var(--cat-pop));margin-top:.55rem;
  transform:scaleX(0);transform-origin:left;transition:transform .8s .1s var(--ease-out)}
.article-body h2.in::after,html:not(.js) .article-body h2::after{transform:scaleX(1)}
.article-body img,.img-svg{transition:transform .55s var(--ease-out),box-shadow .55s}
.article-body img:hover,.img-svg:hover{transform:scale(1.02) translateY(-3px);box-shadow:var(--shadow-lg)}
.article-body a{transition:text-decoration-color .2s,color .2s}
.toc a{display:inline-block;transition:color .2s,transform .3s var(--ease-out)}
.toc a:hover{transform:translateX(4px)}
.toc a.active{color:var(--cat);font-weight:600;transform:translateX(5px)}
.article-body blockquote{transition:transform .35s var(--ease-out),box-shadow .35s}
.article-body blockquote:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.article-hero{transition:transform .7s var(--ease-out),box-shadow .7s}
.article-hero:hover{transform:translateY(-4px)}

/* ---------- Partage / auteur / widgets / mini-posts ---------- */
.share a{transition:transform .3s var(--ease-spring),background .2s,border-color .2s,color .2s}
.share a:hover{transform:translateY(-4px) scale(1.12) rotate(-6deg)}
.post-foot{transition:transform .35s var(--ease-out),box-shadow .35s}
.post-foot:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.widget{transition:transform .35s var(--ease-out),box-shadow .35s}
.widget:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.widget-list a{transition:padding-left .25s var(--ease-out),color .2s}
.widget-list a:hover{padding-left:.4rem}
.widget-list a .dot{transition:transform .3s var(--ease-spring)}
.widget-list a:hover .dot{transform:scale(1.5)}
.widget-list .count{transition:transform .3s var(--ease-spring),background .2s,color .2s}
.widget-list a:hover .count{transform:scale(1.12);background:var(--cat);color:#fff}
.mini-post img,.mp-svg .sv{transition:transform .5s var(--ease-out)}
.mini-post:hover img,.mini-post:hover .mp-svg .sv{transform:scale(1.1)}
.widget-cta .wc-art{transition:transform .8s var(--ease-out),opacity .5s}
.widget-cta:hover .wc-art{transform:rotate(0) scale(1.08);opacity:.36}

/* ---------- Barre de lecture & bouton haut de page ---------- */
.reading-bar{box-shadow:0 0 14px rgba(0,0,0,.18)}
.to-top{transition:opacity .3s,transform .45s var(--ease-spring),background .2s,box-shadow .3s}
.to-top:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.to-top svg{transition:transform .3s var(--ease-out)}
.to-top:hover svg{transform:translateY(-3px)}

/* ---------- 404 ---------- */
.error-hero .code{animation:popIn .9s var(--ease-spring) both}
.err-art{animation:fadeRise .9s .1s var(--ease-out) both}

/* ---------- Visuels SVG : petites vies à l'intérieur (uniquement à l'écran) ---------- */
@keyframes svBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.09)}28%{transform:scale(1)}42%{transform:scale(1.06)}56%{transform:scale(1)}}
@keyframes svSway{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
@keyframes svBounce{from{transform:translateY(0)}to{transform:translateY(-30px)}}
@keyframes svSpin{to{transform:rotate(360deg)}}
@keyframes svFly{0%{transform:translate(0,0)}100%{transform:translate(480px,-30px)}}
@keyframes svSmoke{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-34px);opacity:0}}
@keyframes svTwinkle{0%,100%{transform:scale(.55);opacity:.45}50%{transform:scale(1.15);opacity:1}}
@keyframes svGlow{from{opacity:.72}to{opacity:1}}
@keyframes svFloat{from{transform:translateY(0)}to{transform:translateY(-16px)}}
@keyframes svPop{0%,12%{transform:scale(0);opacity:0}26%,78%{transform:scale(1);opacity:1}92%,100%{transform:scale(0);opacity:0}}
.sv .an{transform-box:fill-box;transform-origin:center}
.sv .beat{animation:svBeat 1.7s ease-in-out infinite}
.sv .sway{transform-origin:bottom left;animation:svSway 4.2s ease-in-out infinite alternate}
.sv .bounce{animation:svBounce 1.3s cubic-bezier(.45,0,.55,1) infinite alternate}
.sv .spin{animation:svSpin 9s linear infinite}
.sv .spin-rev{animation:svSpin 7s linear infinite reverse}
.sv .spin-slow{animation:svSpin 30s linear infinite}
.sv .fly{animation:svFly 11s linear infinite}
.sv .smoke{animation:svSmoke 3.2s ease-out infinite}
.sv .twinkle{animation:svTwinkle 2.6s ease-in-out infinite}
.sv .d2{animation-delay:.9s}.sv .d3{animation-delay:1.7s}
.sv .glow{animation:svGlow 2.4s ease-in-out infinite alternate}
.sv .float1{animation:svFloat 3.4s ease-in-out infinite alternate}
.sv .float2{animation:svFloat 4.6s ease-in-out infinite alternate-reverse}
.sv .pop1{transform-origin:bottom left;animation:svPop 3.4s ease-in-out infinite}
.sv .pop2{transform-origin:bottom right;animation:svPop 3.4s 1.7s ease-in-out infinite}
/* en pause hors écran (motion.js pose .live) ; sans JS : tout tourne */
.js .sv .an{animation-play-state:paused}
.js .sv.live .an{animation-play-state:running}

/* ---------- Animations liées au scroll (navigateurs compatibles uniquement) ---------- */
@supports (animation-timeline: scroll()){
  @keyframes heroPar{to{translate:0 -70px}}
  .hero .blob{animation-timeline:auto}
  .hero-copy{animation:heroPar linear both;animation-timeline:scroll(root);animation-range:0 600px}
  @keyframes artIn{from{rotate:-7deg;scale:.86}to{rotate:0deg;scale:1}}
  .ed-art .sv,.lh-art .sv{animation:artIn linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
}

/* ---------- Focus ---------- */
:focus-visible{transition:outline-offset .15s var(--ease-out)}

/* ---------- Accessibilité : tout désactiver si l'utilisateur le demande ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;animation-timeline:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero .blob{animation:none!important}
  .section-head h2::after,.article-body h2::after{transform:none!important}
  .sv .an{animation:none!important}
  .hero .btn-light::before{display:none}
}