/* Couche d'animation « dynamique » (progressive : tout est désactivé avec prefers-reduced-motion).
   Effets inspirés des widgets d'animation courants (fond animé, projecteur au survol, barre de progression,
   reflets de bouton, parallaxe léger), recréés en CSS/JS maison sans dépendance. */

/* Barre de progression de lecture (alimentée par motion.js via --progress) */
.progress{position:fixed;inset:0 0 auto 0;height:4px;z-index:90;pointer-events:none;background:transparent}
.progress__bar{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--progress,0));background:linear-gradient(90deg,var(--cyan),var(--blue))}

/* Séparateur ondulé sous le hero (statique si l'animation est réduite) */
.wave{display:block;width:100%;height:clamp(2rem,6vw,4.5rem);margin-top:-1px;fill:var(--white)}
.hero--wave .hero__inner{padding-bottom:clamp(2rem,6vw,4rem)}

/* Hero des pages intérieures : mêmes formes + vague que l'accueil */
.page-hero.hero--wave{position:relative;isolation:isolate;overflow:hidden}
.page-hero.hero--wave .container{padding-bottom:clamp(2rem,6vw,3.5rem)}
.page-hero.hero--wave+.section--tint{margin-top:0}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Hero : formes lumineuses flottantes ---------- */
  .hero{isolation:isolate}
  .hero__blobs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
  .hero__blobs i{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;will-change:transform}
  .hero__blobs i:nth-child(1){width:26rem;height:26rem;left:-6rem;top:-8rem;background:radial-gradient(circle at 30% 30%,#2df4f1,transparent 68%);animation:blob1 16s ease-in-out infinite}
  .hero__blobs i:nth-child(2){width:30rem;height:30rem;right:-10rem;top:-4rem;background:radial-gradient(circle at 60% 40%,#4f8cff,transparent 66%);animation:blob2 20s ease-in-out infinite}
  .hero__blobs i:nth-child(3){width:22rem;height:22rem;left:35%;bottom:-12rem;background:radial-gradient(circle,#7a5cff,transparent 66%);opacity:.4;animation:blob3 24s ease-in-out infinite}
  @keyframes blob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8rem,5rem) scale(1.2)}}
  @keyframes blob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7rem,6rem) scale(.88)}}
  @keyframes blob3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-9rem,-4rem) scale(1.25)}}
  /* Logo qui flotte doucement */
  .home .hero__logo{animation:float 6s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  /* Le titre se dévoile ligne par ligne */
  .home .hero h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s both}

  /* ---------- Projecteur qui suit le pointeur sur les cartes ---------- */
  .card,.tile,.panel{position:relative;isolation:isolate}
  .card::after,.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .35s ease;
    background:radial-gradient(18rem circle at var(--mx,50%) var(--my,50%),rgba(45,244,241,.20),rgba(40,89,166,.10) 45%,transparent 70%)}
  .card:hover::after,.tile:hover::after{opacity:1}
  .card--blue::after{background:radial-gradient(18rem circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 70%)}

  /* Icônes : petit rebond au survol de la carte */
  .card:hover .pastille .icon,.tile:hover .pastille .icon{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
  @keyframes pop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.28) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}

  /* ---------- Boutons : reflet qui traverse ---------- */
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-20deg);width:60%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent)}
  .btn:hover::before{transform:translateX(260%) skewX(-20deg);transition:transform .8s ease}

  /* ---------- Séparateur ondulé sous le hero ---------- */

  /* ---------- Titres de section : soulignement qui se dessine ---------- */
  .section__head h2{position:relative;padding-bottom:.9rem}
  .section__head h2::after{content:"";position:absolute;left:50%;bottom:0;width:4rem;height:4px;border-radius:2px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .8s .2s cubic-bezier(.2,.7,.2,1)}
  .section__head.is-visible h2::after,html:not(.js) .section__head h2::after{transform:translateX(-50%) scaleX(1)}

  /* ---------- Parallaxe léger (valeur --py posée par motion.js) ---------- */
  .photo-frame img{transform:translateY(var(--py,0px))}
  .photo-frame.reveal img{transition:transform .2s linear}

  /* ---------- Lignes de défilement : cartes « situations » en scroll-snap sur mobile ---------- */
}

/* Mobile : les situations deviennent un carrousel horizontal (scroll-snap, accessible au clavier) */
@media (max-width:40em){
  #situations .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s2);padding:.5rem .25rem 1.25rem;margin-inline:-.25rem;-webkit-overflow-scrolling:touch}
  #situations .grid>li{flex:0 0 82%;scroll-snap-align:center}
  #situations .grid:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
}

/* ---------- Visuel d'article, citation et points clés ---------- */
.article-visual{margin:0 0 var(--s3);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}
.article-visual svg{display:block;width:100%;height:auto}
.article-visual figcaption{padding:.6rem 1rem;font-size:.85rem;color:var(--muted);background:var(--surface);text-align:center}
.prose .keypoints{margin:var(--s3) 0;padding:var(--s2) var(--s3);border-radius:var(--radius-card);background:var(--blue-100);border-left:6px solid var(--blue)}
.prose .keypoints h2{margin:0 0 .75rem;font-size:1rem;letter-spacing:.14em;color:var(--blue-text)}
.prose .keypoints ul{margin:0;padding-left:1.2rem}
.prose .keypoints li{margin-bottom:.5rem}
.prose .pullquote{position:relative;margin:var(--s4) 0;padding:var(--s2) var(--s3) var(--s2) calc(var(--s3) + 1.5rem);border-left:4px solid var(--cyan);font-size:1.25rem;line-height:1.5;font-weight:500;color:var(--head)}
.prose .pullquote::before{content:"«";position:absolute;left:.6rem;top:-.1rem;font-size:3.5rem;line-height:1;color:var(--blue-text);opacity:.5}
.prose .pullquote p{margin:0}
@media (prefers-reduced-motion:no-preference){
  .famille-lien .fl-thread{stroke-dasharray:1;stroke-dashoffset:1}
  .article-visual.is-visible .fl-thread{animation:flDraw 2.4s .2s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes flDraw{to{stroke-dashoffset:0}}
  .famille-lien .fl-person{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(14px)}
  .article-visual.is-visible .fl-person{animation:flRise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .article-visual.is-visible .fl-p2{animation-delay:.15s}.article-visual.is-visible .fl-p3{animation-delay:.3s}.article-visual.is-visible .fl-p4{animation-delay:.45s}
  @keyframes flRise{to{opacity:1;transform:none}}
  .famille-lien .fl-ring{transform-box:fill-box;transform-origin:center;animation:flSpin 24s linear infinite}
  @keyframes flSpin{to{transform:rotate(360deg)}}
  .famille-lien .fl-halo{transform-box:fill-box;transform-origin:center;animation:flPulse 4s ease-in-out infinite}
  @keyframes flPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
  .famille-lien .fl-bit{animation:flFloat 6s ease-in-out infinite}
  .famille-lien .fl-b2{animation-delay:-2s}.famille-lien .fl-b3{animation-delay:-4s}
  @keyframes flFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}