/* ============================================================
   Alex INFO — accessibility.css
   Surcharges et compléments pour l'accessibilité (a11y).
   Chargé APRÈS style.css pour pouvoir surcharger sans !important.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. SKIP-TO-CONTENT LINK
   Masqué visuellement, visible uniquement au focus clavier (Tab).
   Permet aux utilisateurs clavier/lecteur d'écran de sauter
   directement au contenu principal sans tabber dans la nav.
   ───────────────────────────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0.85rem 1.4rem;
    background: var(--primary, #0075d7);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Masqué hors écran tant que pas focus */
    transform: translateY(-120%);
    transition: transform 0.18s ease-out;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    transform: translateY(0);
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   2. FOCUS VISIBLE — anneau de focus uniforme
   Évite que le focus disparaisse sur les boutons glassmorphism.
   ───────────────────────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--accent, #4da8ff);
    outline-offset: 2px;
    border-radius: 4px;
}

/* On garde l'outline natif sur les liens skip et les inputs déjà bien stylés */
.skip-to-content:focus-visible {
    outline-color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   3. PREFERS-REDUCED-MOTION
   Si l'utilisateur a coché "Réduire les animations" dans son OS,
   on désactive les animations gourmandes (particules, orbes,
   animations infinies, transitions longues).
   Cible spécialement : épileptie photosensible, vestibular disorders.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    /* Coupe net animations infinies + transitions longues */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Cache les éléments purement décoratifs et animés */
    .particles-container,
    #particlesContainer,
    .bg-orb,
    .bg-orb-1,
    .bg-orb-2,
    #scroll-progress {
        display: none !important;
    }

    /* Hero h1 "floating" — annule l'animation flottante */
    .floating {
        animation: none !important;
    }

    /* Logo cursor blink */
    .logo-cursor {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   4. CONTRASTE — boutons glassmorphism
   On renforce légèrement les bords/textes des cartes pour
   atteindre un ratio AA (4.5:1) même sur fond clair.
   À ajuster avec WebAIM Contrast Checker après preview.
   ───────────────────────────────────────────────────────────── */
.glass {
    /* Bordure légèrement plus visible pour AA */
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.light-mode .glass {
    /* En mode clair, la bordure était trop pâle */
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* CTA secondaire : si contraste trop faible, forcer texte plus foncé en mode clair */
body.light-mode .cta-secondary {
    color: var(--secondary, #005faf);
    border-color: var(--secondary, #005faf);
}

/* ─────────────────────────────────────────────────────────────
   5. CIBLE SCROLL — skip link et ancres
   Évite que le titre soit caché derrière la nav fixe quand on
   atterrit sur #main ou #section via le skip link.
   ───────────────────────────────────────────────────────────── */
:target,
#main {
    scroll-margin-top: 90px;
}

/* ─────────────────────────────────────────────────────────────
   6. SPINNER — bouton Envoyer pendant la soumission
   Le script.js désactive le bouton (.submit-btn:disabled) et
   change le texte. On ajoute ici le spinner visuel + un état
   pas-de-clic doublon.
   ───────────────────────────────────────────────────────────── */
.submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    position: relative;
    pointer-events: none; /* empêche tout clic même multi-touch */
}

.submit-btn:disabled::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.6em;
    vertical-align: -0.18em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Reduced motion : on garde le spinner mais sans animation
   (un cercle statique avec un trou — toujours lisible) */
@media (prefers-reduced-motion: reduce) {
    .submit-btn:disabled::after {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   7. BADGE OUVERT / FERMÉ (business hours)
   ───────────────────────────────────────────────────────────── */
.bh-badge {
    /* On force le display:flex et un margin pour qu'il soit toujours visible
       au-dessus du h1, indépendamment de la mise en page du hero existant. */
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color, #fff);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Au-dessus des particules / orbes */
    position: relative;
    z-index: 2;
}

body.light-mode .bh-badge {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-color, #1a202c);
}

.bh-badge .bh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #ef4444; /* rouge fermé */
    box-shadow: 0 0 8px currentColor;
}

.bh-badge[data-open="1"] .bh-dot {
    background: #22c55e; /* vert ouvert */
    animation: bhPulse 2s ease-in-out infinite;
}

@keyframes bhPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .bh-badge[data-open="1"] .bh-dot { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   8. FOOTER — Bouton "Préférences cookies"
   Style identique à un .footer-legal-link pour cohérence visuelle.
   ───────────────────────────────────────────────────────────── */
.footer-prefs-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer-prefs-btn:hover,
.footer-prefs-btn:focus-visible {
    color: var(--accent, #4da8ff);
}

/* ─────────────────────────────────────────────────────────────
   9. SR-ONLY (utility) — texte uniquement pour lecteurs d'écran
   Utilisable si on veut ajouter du contexte invisible.
   Ex : <span class="sr-only">Ouvre dans un nouvel onglet</span>
   ───────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}