/* sonnette.app : effets de la page d'accueil (10/10/2026), pilotés par effets.js.
   Portés de React Bits (SplitText, Magnet, StickerPeel ; (c) David Haz, MIT + Commons Clause)
   et de Codrops (OnScrollTextHighlight, ScrollBlurTypography ; MIT), sans librairie.
   Règle : sans script ou avec le mouvement réduit, rien n'est caché ni décalé. Les états
   de départ ne s'appliquent que sous .js-effets, posé par le script lui-même. */

/* ---------- Titre échelonné ---------- */
.js-effets .s-echelonne .s-mot{display:inline-block;animation:s-monte .8s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i) * 65ms + 80ms)}
@keyframes s-monte{from{opacity:0;transform:translateY(.42em) rotate(2deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Boutons aimantés ---------- */
.js-effets .s-bouton,.js-effets .s-tete__cta{transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s}
.js-effets .s-bouton.est-aimante,.js-effets .s-tete__cta.est-aimante{transition:transform .12s ease-out,background-color .2s,color .2s}

/* ---------- Surligneur ---------- */
:root{--s-surligneur:color-mix(in srgb,#F2A900 48%,transparent)}

.s-surligne{color:inherit;background:linear-gradient(var(--s-surligneur),var(--s-surligneur)) no-repeat 0 88% / 100% .62em;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js-effets .s-surligne.est-a-tracer{background-size:0% .62em;transition:background-size 1.2s cubic-bezier(.65,0,.25,1) .15s}
.js-effets .s-surligne.est-a-tracer.est-vu{background-size:100% .62em}

/* ---------- Flou au net, piloté par le défilement ---------- */
.s-defilement .s-flou{view-timeline-name:--s-flou;view-timeline-axis:block}
.s-defilement .s-flou .s-mot{display:inline-block;animation:s-net linear both;animation-timeline:--s-flou;animation-range:cover calc(6% + var(--p) * 26%) cover calc(16% + var(--p) * 26%)}
@keyframes s-net{from{filter:blur(7px);opacity:.15}to{filter:blur(0);opacity:1}}

/* ---------- Autocollants qui se décollent ---------- */
.s-peel{--p:8px;--debut:calc(-1 * var(--p));--fin:calc(100% + var(--p));--souleve:30%;--tire:46%;position:relative;display:inline-block;align-self:flex-start;transform:rotate(var(--sens,40deg));-webkit-tap-highlight-color:transparent;cursor:default}
.s-peel__face,.s-peel__dos{display:block}
.s-peel__face>*,.s-peel__dos>*{transform:rotate(calc(-1 * var(--sens,40deg)))}
.s-peel__face{clip-path:polygon(var(--debut) var(--debut),var(--fin) var(--debut),var(--fin) var(--fin),var(--debut) var(--fin));transition:clip-path .6s ease-out;filter:drop-shadow(1px 3px 2px rgb(0 0 0 / .28))}
.s-peel__dos{position:absolute;left:0;width:100%;height:100%;top:calc(-100% - 2 * var(--p));transform:scaleY(-1);pointer-events:none;clip-path:polygon(var(--debut) var(--debut),var(--fin) var(--debut),var(--fin) var(--debut),var(--debut) var(--debut));transition:clip-path .6s ease-out,top .6s ease-out}
.s-peel__dos>*{filter:brightness(0) invert(.8)}
.s-peel:hover .s-peel__face,.s-peel.est-souleve .s-peel__face{clip-path:polygon(var(--debut) var(--souleve),var(--fin) var(--souleve),var(--fin) var(--fin),var(--debut) var(--fin))}
.s-peel:hover .s-peel__dos,.s-peel.est-souleve .s-peel__dos{clip-path:polygon(var(--debut) var(--debut),var(--fin) var(--debut),var(--fin) var(--souleve),var(--debut) var(--souleve));top:calc(-100% + 2 * var(--souleve) - 1px)}
.s-peel:active .s-peel__face{clip-path:polygon(var(--debut) var(--tire),var(--fin) var(--tire),var(--fin) var(--fin),var(--debut) var(--fin))}
.s-peel:active .s-peel__dos{clip-path:polygon(var(--debut) var(--debut),var(--fin) var(--debut),var(--fin) var(--tire),var(--debut) var(--tire));top:calc(-100% + 2 * var(--tire) - 1px)}

/* L'autocollant « Sonnez ici », posé sur la photo du chevalet. */
.s-etape__visuel{position:relative}
.s-autocollant-place{position:absolute;z-index:2;left:clamp(-18px,-1.2vw,-6px);top:-24px;transform:rotate(-9deg)}
.s-autocollant{width:118px;height:118px;border-radius:50%;background:#2741C6;color:#FFFFFF;border:5px solid #FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 19px/1 var(--s-titre);text-align:center;letter-spacing:-.01em;user-select:none;-webkit-user-select:none}
.s-autocollant svg{width:32px;height:32px;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Le tampon de la carte postale devient un autocollant : il lui faut un fond. */
/* Un tampon allongé ne s'incline pas : son coin sortirait du découpage. Il se décolle par le haut. */
.s-peel:has(.s-tampon){--p:5px;--sens:0deg;--souleve:42%;--tire:58%}
.s-peel .s-tampon{display:inline-block;background:var(--s-ticket)}
@media (max-width:600px){.s-autocollant{width:92px;height:92px;font-size:15px;border-width:4px}.s-autocollant svg{width:26px;height:26px}.s-autocollant-place{top:-18px}}