/* =========================================================
   ACCESSIBILITÉ · lien d'évitement, focus clavier, mouvement réduit
========================================================= */

/* Lien « Aller au contenu » : visible seulement au clavier */
.sly-skip{
    position:fixed;
    top:10px;
    left:10px;
    z-index:5000;
    padding:12px 20px;
    border-radius:99px;
    font:700 14px/1 "DM Sans",Arial,sans-serif;
    color:#fff;
    text-decoration:none;
    background:#ff2d8d;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    transform:translateY(-200%);
    transition:transform .15s;
}

.sly-skip:focus,
.sly-skip:focus-visible{ transform:none; outline:2px solid #fff; outline-offset:2px; }

[data-skip-target]:focus,
main:focus{ outline:none; }

/* Focus clavier visible partout (la souris ne déclenche pas :focus-visible) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
    outline:2px solid #ff2d8d;
    outline-offset:2px;
}

/* Contenus saisis : le halo du champ tient lieu de contour */
:where(input, textarea, select):focus-visible{ outline-offset:0; }

/* Mouvement réduit : plus d'animations longues ni de défilement animé */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}


/* Mise en page stable : width / height écrits dans le HTML réservent la place de l'image avant son chargement
   (PageOptimizer). Sans règle CSS explicite sur la hauteur, l'image garde ses proportions. */
:where(img[width][height]){ height:auto; }