/* Solvi, la mascotte : un renard bleu nuit en sweat « S. ». Image décorative (alt vide,
   aria-hidden). La boîte .solvi a sa taille en CSS et se place en absolu : rien ne bouge
   dans la page quand l'image arrive. Poses en fondu et réactions : web/solvi.js.
   Au repos : respiration (étirement vertical depuis le sol, 3,5 s) et léger balancement,
   seulement à l'écran ; « mouvement réduit » : aucune animation, la pose change seule. */
.solvi{position:absolute;z-index:1;display:block;width:var(--solvi-taille);height:var(--solvi-taille);pointer-events:none}
.solvi-corps{position:absolute;inset:0;transform-origin:50% 100%}
.solvi-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
@media(prefers-reduced-motion:no-preference){
  .solvi.a-l-ecran .solvi-corps{animation:solvi-souffle 3.5s cubic-bezier(.45,0,.55,1) infinite,solvi-balance 7.4s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--solvi-decalage,0s)}
}
@keyframes solvi-souffle{0%,100%{scale:1 1}50%{scale:1.008 1.032}}
@keyframes solvi-balance{0%,100%{rotate:-1deg}50%{rotate:1deg}}

/* ══ Accueil ══ */

/* Partout à droite de son bloc, il regarde vers la gauche, vers le contenu (data-regard). */
/* Héros : assis sur le bord du cadre du navigateur (ordinateur) ou du téléphone. */
.vitrine{--solvi-assise:0px}
.vitrine>.solvi{--solvi-taille:104px;right:40px;bottom:calc(100% - var(--solvi-assise) - 5px)}
@media(max-width:920px){.vitrine{--solvi-assise:64px;padding-top:var(--solvi-assise)}}
@media(max-width:860px){.vitrine>.solvi{right:calc(50% - min(170px,50%) + 24px)}}

/* Étapes : dans le coin de chaque carte, à la hauteur du numéro, le bas du buste effacé.
   Calme (main au menton), il réagit à l'étape quand la carte entre à l'écran. */
.etape{position:relative}
.etape::before{margin-bottom:var(--espace-3)}
.etape>.solvi{--solvi-taille:96px;top:-14px;right:var(--espace-3)}
.etape>.solvi .solvi-pose{-webkit-mask-image:linear-gradient(to top,transparent,#000 24%);mask-image:linear-gradient(to top,transparent,#000 24%)}
@media(max-width:480px){.etape>.solvi{--solvi-taille:88px;top:-12px;right:var(--espace-2)}}

/* Fin : assis sur le dossier payé, à droite. */
.decision{position:relative}
.decision>.solvi{--solvi-taille:96px;right:14px;bottom:calc(100% - 5px)}
@media(max-width:920px){.decision{margin-top:60px}}

/* Filet doré sous les titres de section : une ligne, jamais un fond. Quand le titre entre à
   l'écran, elle se trace une fois de gauche à droite, couleur de plomb, et devient or en arrivant
   (web/solvi.js). Sans script ou en mouvement réduit, elle est déjà là, en or. */
#contenu .bande h2,#contenu .conseils h2{position:relative}
#contenu .bande h2::after,#contenu .conseils h2::after{content:"";position:absolute;left:0;bottom:-8px;width:32px;height:2px;border-radius:1px;background:var(--or);transform-origin:0 50%}
.filets-a-tracer #contenu h2::after{transform:scaleX(0);background:color-mix(in srgb,currentColor 38%,transparent)}
.filets-a-tracer #contenu h2.trace::after{transform:scaleX(1);background:var(--or);transition:transform .6s cubic-bezier(.16,1,.3,1),background-color .35s ease-out .45s}