/* Copie légère de /assets/phare-selection.css (commentaires retirés) — tools/prod-css-purge.mjs — source-sha1:e8ebb80490afeba9505b6bae9de183f0abe35ac8 — ne pas éditer, relancer l'outil. */
.phare-sel{--ps-debut: var(--sc-sel, 1.05s);
    
    --ps-duree: 3200ms;
    
    --ps-poignee: max(7px, 0.105em);
    
    --ps-ronde: 15s;
    --ps-tours: 23s;

    
    --ps-tire: cubic-bezier(0.65, 0.02, 0.42, 1);

    
    --ps-dard: cubic-bezier(0.22, 0.08, 0.2, 1);
    --ps-glisse: cubic-bezier(0.45, 0.05, 0.35, 1);

    
    --ps-flottant: cubic-bezier(0.5, 0, 0.4, 1);
    
    --ps-fuite: 0.1em;
    --ps-souris: clamp(18px, 0.3em, 26px);
    
    --ps-fond: #EFE6E7;
    --ps-fond: color-mix(in oklab, var(--burgundy) 12%, var(--p-papier));

    position: relative;
    display: inline-block;}
.phare-sel-encre{position: absolute;
    inset: 0 calc(var(--ps-fuite) * -1);
    padding-inline: var(--ps-fuite);
    border-radius: 0.06em;
    background: var(--ps-fond);
    color: var(--burgundy);
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    animation: psBalaye var(--ps-duree) linear both;
    animation-delay: var(--ps-debut);}
.phare-sel-encre[data-texte]::before{content: attr(data-texte);}
.phare-sel-rail{position: absolute;
    inset: 0 calc(var(--ps-fuite) * -1);
    pointer-events: none;}
.phare-sel-rail-tire{animation: psTire var(--ps-duree) linear both;
    animation-delay: var(--ps-debut);}
.phare-sel-barre{--ps-ep: max(1.5px, 0.024em);
    position: absolute;
    
    top: -0.035em;
    bottom: -0.035em;
    left: calc(var(--ps-ep) / -2);
    width: var(--ps-ep);
    border-radius: 1px;
    background: var(--burgundy);
    opacity: 0;
    
    animation: psBarre 200ms var(--sc-ease, ease) forwards;
    
    animation-delay: calc(var(--ps-debut) + var(--ps-duree) * 0.36);}
.phare-sel-barre::after{content: "";
    position: absolute;
    left: 50%;
    width: var(--ps-poignee);
    height: var(--ps-poignee);
    translate: -50% 0;
    border-radius: 50%;
    background: var(--burgundy);}
.phare-sel-rail:not(.phare-sel-rail-tire) .phare-sel-barre::after{top: calc(var(--ps-poignee) * -0.42);}
.phare-sel-rail-tire .phare-sel-barre::after{bottom: calc(var(--ps-poignee) * -0.42);}
.phare-sel-ronde{position: absolute;
    inset: 0;
    animation: psRonde var(--ps-ronde) var(--ps-flottant) infinite backwards;
    animation-delay: calc(var(--ps-debut) + var(--ps-duree));}
.phare-sel-main{position: absolute;
    
    left: calc(var(--ps-souris) * -0.086);
    top: 50%;
    margin-top: calc(var(--ps-souris) * -0.086);
    width: var(--ps-souris);
    aspect-ratio: 18.6 / 23.6;
    
    transform-origin: 8.6% 6.8%;
    animation: psMain var(--ps-duree) linear both;
    animation-delay: var(--ps-debut);}
.phare-sel-tour{position: absolute;
    inset: 0;
    transform-origin: 8.6% 6.8%;
    animation: psTours var(--ps-tours) var(--ps-flottant) infinite backwards;
    animation-delay: calc(var(--ps-debut) + var(--ps-duree));}
.phare-sel-fleche{display: block;
    width: 100%;
    height: 100%;
    fill: var(--p-encre);
    
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 41, 0.26));}
.phare-sel-clic{position: absolute;
    left: 8.6%;
    top: 6.8%;
    width: calc(var(--ps-souris) * 1.9);
    aspect-ratio: 1;
    border: 1.5px solid var(--burgundy);
    border-radius: 50%;
    opacity: 0;
    animation: psClic 520ms var(--sc-ease, ease) forwards;
    animation-delay: calc(var(--ps-debut) + var(--ps-duree) * 0.36);}
@keyframes psBalaye{
    0%, 36% {
        clip-path: inset(0 100% 0 0);
        animation-timing-function: var(--ps-tire);
    }
    63%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes psTire{
    0%, 36% {
        transform: translateX(0);
        animation-timing-function: var(--ps-tire);
    }
    63%, 100% { transform: translateX(100%); }
}
@keyframes psBarre{
    to { opacity: 1; }
}
@keyframes psClic{
    from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.18); }
    to   { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
}
@keyframes psMain{
    0% {
        opacity: 0;
        transform: translate(2.6em, 1.2em) scale(1.12);
        animation-timing-function: cubic-bezier(0.16, 0.74, 0.22, 1);
    }
    7%  { opacity: 1; }
    24%, 33% { transform: translate(0, 0) scale(1); }
    36% {
        transform: translate(0, 0) scale(0.82);
        animation-timing-function: var(--sc-ease, ease);
    }
    40%, 63% { transform: translate(0, 0) scale(0.87); }
    70% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        animation-timing-function: var(--sc-ease, ease);
    }
    
    100% { opacity: 1; transform: translate(0, 0.46em) scale(1); }
}
@keyframes psRonde{
    0%   { transform: translateX(0);     animation-timing-function: var(--ps-dard); }
    5%   { transform: translateX(-32%);  animation-timing-function: var(--ps-glisse); }
    9%   { transform: translateX(-27%); }
    15%  { transform: translateX(-27%);  animation-timing-function: var(--ps-glisse); }
    29%  { transform: translateX(-86%);  animation-timing-function: var(--ps-dard); }
    33%  { transform: translateX(-100%); }
    43%  { transform: translateX(-100%); animation-timing-function: var(--ps-dard); }
    48%  { transform: translateX(-66%);  animation-timing-function: var(--ps-glisse); }
    52%  { transform: translateX(-71%); }
    59%  { transform: translateX(-71%);  animation-timing-function: var(--ps-glisse); }
    73%  { transform: translateX(-22%);  animation-timing-function: var(--ps-dard); }
    77%  { transform: translateX(-8%);   animation-timing-function: var(--ps-glisse); }
    82%  { transform: translateX(-14%);  animation-timing-function: var(--ps-dard); }
    88%, 100% { transform: translateX(0); }
}
@keyframes psTours{
    0%    { transform: translateY(0)       rotate(0deg)   scale(1); }
    7%    { transform: translateY(0)       rotate(-12deg) scale(1); }
    15%   { transform: translateY(0)       rotate(-5deg)  scale(1); }
    23%   { transform: translateY(0)       rotate(8deg)   scale(1); }
    29%   { transform: translateY(-0.26em) rotate(11deg)  scale(1.05); }
    32%   { transform: translateY(0)       rotate(4deg)   scale(0.94); }
    35%   { transform: translateY(0)       rotate(6deg)   scale(1); }
    44%   { transform: translateY(0)       rotate(-10deg) scale(1); }
    53%   { transform: translateY(0)       rotate(-2deg)  scale(1); }
    61%   { transform: translateY(0)       rotate(3deg)   scale(1); }
    63.5% { transform: translateY(-0.07em) rotate(130deg) scale(1.03); }
    66%   { transform: translateY(0)       rotate(288deg) scale(1); }
    68%   { transform: translateY(0)       rotate(361deg) scale(1); }
    77%   { transform: translateY(0)       rotate(374deg) scale(1); }
    86%   { transform: translateY(0)       rotate(353deg) scale(1); }
    94%   { transform: translateY(0)       rotate(365deg) scale(1); }
    100%  { transform: translateY(0)       rotate(360deg) scale(1); }
}
.phare-vignette{display: inline-block;
    
    vertical-align: -0.07em;
    
    width: 0.9em;
    height: 0.9em;
    
    margin-right: 0.24em;
    
    border-radius: 0.2em;
    overflow: hidden;
    background: var(--p-brume);
    
    
    box-shadow:
        inset 0 0 0 1px rgba(10, 10, 10, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px rgba(15, 23, 41, 0.16),
        0 6px 14px -6px rgba(15, 23, 41, 0.3);

    
    animation: phVignettePose 1.25s 0.24s both;}
@keyframes phVignettePose{
    0% {
        rotate: -32deg;
        scale: 0.76;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    64% {
        rotate: 3.2deg;
        scale: 1.025;
        animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
    }
    100% {
        rotate: 0deg;
        scale: 1;
    }
}
.phare-vignette img{display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;}
@media (prefers-reduced-motion: reduce){
.phare-vignette{animation: none;}
}
@media (hover: none){
.phare-sel{--ps-debut: 0.62s;}
.phare-sel-main,.phare-sel-clic{display: none;}
.phare-sel-ronde{animation: none;}
}
@media (prefers-reduced-motion: reduce){
.phare-sel-main,.phare-sel-clic{display: none;}
.phare-sel-ronde,.phare-sel-tour{animation: none;}
.phare-sel-encre{animation: none;
        clip-path: none;}
.phare-sel-rail-tire{animation: none;
        transform: translateX(100%);}
.phare-sel-barre{animation: none;
        opacity: 1;}
}