/**
 * CSS pour le panel d'accessibilité front-end RGAA Manager
 */

/* Skip links pour navigation clavier - Améliorés */
.rgaa-skip-links {
    position: fixed;
    top: -2px;
    left: 0;
    z-index: 100000;
    width: 100%;
    display: none; /* Masqué par défaut, affiché uniquement quand navigation clavier activée */
}

/* Afficher les skip links UNIQUEMENT quand la navigation clavier est activée */
body.rgaa-keyboard-nav .rgaa-skip-links {
    display: block;
}

.rgaa-skip-link {
    position: absolute !important;
    top: -50px !important;
    left: 6px !important;
    background: #000 !important;
    color: #fff !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 0 0 6px 6px !important;
    z-index: 100001 !important;
    font-family: Arial, sans-serif !important;
    border: 2px solid #fff !important;
    transition: top 0.3s ease !important;
    cursor: pointer !important;
}

.rgaa-skip-link:focus,
.rgaa-skip-link:active {
    top: 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: 3px solid #007cba !important;
    outline-offset: 2px !important;
}

.rgaa-skip-link:nth-child(2) {
    left: 150px !important;
}

.rgaa-skip-link:nth-child(3) {
    left: 300px !important;
}

/* Panel d'accessibilité avec compatibilité Lenis */
.rgaa-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 99999;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    /* Désactiver Lenis pour le panel */
    touch-action: auto !important;
    overscroll-behavior: auto !important;
    overflow: visible !important;
}

/* Contenu du panel avec scroll natif */
.rgaa-panel-content {
    /* Force le scroll natif du navigateur */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Désactiver l'interception de Lenis */
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
}

.rgaa-panel-body {
    /* Assurer le scroll natif dans le body */
    overflow-y: auto !important;
    touch-action: pan-y !important;
}

/* Positions horizontales */
.rgaa-panel-right {
    right: 0;
}

.rgaa-panel-left {
    left: 0;
}

/* Bouton déclencheur - toujours en haut par défaut */
.rgaa-panel-trigger {
    position: absolute;
    top: 20px;
    background: #111;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    width: 50px;
    height: 50px;
}

/* Positions verticales du bouton selon data-vertical */
.rgaa-panel-trigger[data-vertical="top"] {
    top: 20px;
}

.rgaa-panel-trigger[data-vertical="center"] {
    top: 50%;
    transform: translateY(-50%);
}

.rgaa-panel-trigger[data-vertical="bottom"] {
    top: auto;
    bottom: 20px;
}

.rgaa-panel-left .rgaa-panel-trigger {
    left: 0;
}
.rgaa-panel-right .rgaa-panel-trigger {
    right: 0;
}

.rgaa-panel-trigger:hover {
    background: #005a87;
    background-color: rgb(0, 0, 0);
    transform: scale(1.05) translate(0, -50%);
    border: 0;
}

.rgaa-panel-trigger:focus {
    outline: 3px solid #111;
    outline-offset: 2px;
}

.rgaa-panel-trigger svg {
    width: 30px;
    height: 30px;
}

/* Masquer le bouton quand le panel est ouvert */
.rgaa-panel.rgaa-panel-open .rgaa-panel-trigger {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
}

/* Contenu du panel - toujours centré verticalement */
.rgaa-panel-content {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    max-height: 80vh;
    overflow: hidden;
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    .rgaa-panel-content {
        width: calc(100vw - 40px);
    }
}

/* Position droite (par défaut) - démarre hors écran à droite */
.rgaa-panel-right .rgaa-panel-content {
    right: -5px;
    transform: translateY(-50%) translateX(100%);
}

/* Position gauche - démarre hors écran à gauche */
.rgaa-panel-left .rgaa-panel-content {
    left: -5px;
    transform: translateY(-50%) translateX(-100%);
}

/* Panneau ouvert - slide vers l'intérieur */
.rgaa-panel-right.rgaa-panel-open .rgaa-panel-content {
    transform: translateY(-50%) translateX(0);
    display: block;
    animation: slideInRight 0.3s ease-out;
}

.rgaa-panel-left.rgaa-panel-open .rgaa-panel-content {
    transform: translateY(-50%) translateX(0);
    display: block;
    animation: slideInLeft 0.3s ease-out;
}

/* En-tête du panel */
.rgaa-panel-header {
    background: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.rgaa-panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.rgaa-panel-close {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    padding: 0;
    width: auto;
    height: auto;
    line-height: 1;
    transition: opacity 0.2s;
}

.rgaa-panel-close:hover,
.rgaa-panel-close:focus {
    opacity: 0.7;
    outline: none;
    background: none;
    border: thin solid;
    color: #111;
}

/* Corps du panel avec scroll fonctionnel */
.rgaa-panel-body {
    padding: 10px 15px;
    max-height: calc(80vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Taille du texte en pleine largeur */
.rgaa-panel-body > .rgaa-feature-group:has(#rgaa-font-increase) {
    grid-column: 1 / -1;
}

.rgaa-feature-group:last-of-type {
    border-bottom: none;
}

.rgaa-feature-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 8px;
}

.rgaa-feature-toggle {
    margin: 0;
    transform: scale(1.1);
    flex-shrink: 0;
    margin-top: 2px;
}

.rgaa-feature-text {
    flex: 1;
    line-height: 1.3;
}

.rgaa-feature-text strong {
    display: block;
    margin-bottom: 2px;
    color: #333;
    font-size: 13px;
}

.rgaa-feature-text small {
    color: #666;
    font-size: 11px;
}

.rgaa-feature-title {
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-size: 13px;
}

/* Contrôles de taille de police améliorés */
.rgaa-font-size-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}

.rgaa-font-btn {
    background: #007cba;
    color: white;
    border: none;
    width: 28px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.2s;
    padding: 2px;
}

.rgaa-font-btn:hover {
    background: #005a87;
}

.rgaa-font-btn:focus {
    outline: 2px solid #ffff00;
}

.rgaa-font-reset {
    background: #666;
    font-size: 9px;
}

.rgaa-font-reset:hover {
    background: #444;
}

#rgaa-font-size-display {
    font-weight: bold;
    color: #333;
    min-width: 40px;
    text-align: center;
    font-size: 11px;
}

/* Contrôles d'alignement de texte */
.rgaa-text-align-controls {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.rgaa-align-btn {
    background: #007cba;
    color: white;
    border: none;
    width: 32px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.rgaa-align-btn:hover {
    background: #005a87;
}

.rgaa-align-btn:focus {
    outline: 2px solid #ffff00;
}

.rgaa-align-btn.active {
    background: #28a745;
}

/* Bouton de fonctionnalité */
.rgaa-feature-button {
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
}

.rgaa-feature-button:hover {
    background: #e9ecef;
}

.rgaa-feature-button:focus {
    outline: 2px solid #007cba;
}

.rgaa-feature-button strong {
    display: block;
    margin-bottom: 2px;
    color: #333;
    font-size: 12px;
}

.rgaa-feature-button small {
    color: #666;
    font-size: 10px;
}

/* Actions du panel */
.rgaa-panel-actions {
    grid-column: 1 / -1;
    text-align: center;
}

.rgaa-reset-btn {
    width: 100%;
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.rgaa-reset-btn:hover {
    background: #c82333;
}

.rgaa-reset-btn:focus {
    outline: 2px solid #ffff00;
}

/* Ligne de boutons d'action */
.rgaa-action-buttons-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

/* Boutons d'action (Plan de page, Lire la page) */
.rgaa-action-btn {
    flex: 1;
    background: #007cba;
    color: white;
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rgaa-action-btn:hover {
    background: #005a87;
}

.rgaa-action-btn:focus {
    outline: 2px solid #ffff00;
}

.rgaa-action-btn strong {
    font-size: 14px;
}

.rgaa-action-btn small {
    font-size: 12px;
    opacity: 0.9;
}

/* Contrôles de taille de police améliorés */
.rgaa-font-size-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}

.rgaa-font-reset {
    background: #ff5353 !important;
    font-size: 12px !important;
    width: auto;
    padding: 2px 5px;
}

.rgaa-font-reset:hover {
    background: #666 !important;
}

/* Pied du panel */
.rgaa-panel-footer {
    background: #f8f9fa;
    padding: 8px 12px;
    border-top: 1px solid #e9ecef;
    text-align: center;
    border-radius: 0 0 8px 8px;
}

.rgaa-panel-info {
    margin: 0;
    color: #666;
    font-size: 10px;
}

/* Classes utilitaires */
.rgaa-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;
}

/* Responsive */
@media (max-width: 768px) {
    .rgaa-panel-content {
        width: 360px;
    }

    .rgaa-panel-right .rgaa-panel-content {
        right: 30px;
    }

    .rgaa-panel-left .rgaa-panel-content {
        left: 30px;
    }
}

@media (max-width: 480px) {
    .rgaa-panel-content {
        width: calc(100vw - 60px);
        max-width: 100%;
    }

    /* Masquer le texte descriptif des boutons d'action sur très petit écran */
    .rgaa-action-btn small {
        display: none;
    }

    /* Réduire la taille du texte principal des boutons d'action */
    .rgaa-action-btn strong {
        font-size: 12px;
    }
}

/* Animation d'entrée */

@keyframes slideInRight {
    from {
        transform: translateX(100%) translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%) translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

/* États des fonctionnalités actives */
.rgaa-feature-toggle:checked + .rgaa-feature-text strong {
    color: #007cba;
}

.rgaa-feature-toggle:checked + .rgaa-feature-text::after {
    content: " ✓";
    color: #28a745;
    font-weight: bold;
}

/* Focus visible amélioré */
.rgaa-panel *:focus {
    outline: 2px solid #007cba !important;
    outline-offset: 2px !important;
}

/* ============================================
   FONCTIONNALITÉS D'ACCESSIBILITÉ
   ============================================ */

/* Ajustement de la taille de police - INCLUT MAINTENANT LES TITRES */
body.rgaa-font-adjusted,
body.rgaa-font-adjusted h1,
body.rgaa-font-adjusted h2,
body.rgaa-font-adjusted h3,
body.rgaa-font-adjusted h4,
body.rgaa-font-adjusted h5,
body.rgaa-font-adjusted h6 {
    /* La taille est définie en JavaScript sur le body */
    /* Les titres héritent maintenant de la taille du body */
}

/* Contraste élevé */
body.rgaa-high-contrast {
    background: #000 !important;
    color: #fff !important;
}

body.rgaa-high-contrast * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.rgaa-high-contrast a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.rgaa-high-contrast img {
    filter: invert(1) hue-rotate(180deg);
}

/* Mode dyslexie */
body.rgaa-dyslexia-mode,
body.rgaa-dyslexia-mode * {
    font-family:
        "OpenDyslexic", "Comic Sans MS", "Arial", sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.16em !important;
    line-height: 1.8 !important;
}

/* Navigation clavier - Skip links visibles */
body.rgaa-keyboard-nav .rgaa-skip-links {
    display: block !important;
}

body.rgaa-keyboard-nav *:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.5) !important;
}

/* Arrêter les animations */
body.rgaa-stop-animations * {
    animation: none !important;
    transition: none !important;
}

/* Surligner les liens */
body.rgaa-highlight-links a {
    background-color: #ffff00 !important;
    color: #000 !important;
    padding: 2px 4px !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

/* Espacer le texte */
body.rgaa-text-spacing * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
    line-height: 1.8 !important;
    margin-bottom: 2em !important;
}

/* Masquer les images */
body.rgaa-hide-images img {
    display: none !important;
}

body.rgaa-hide-images picture,
body.rgaa-hide-images figure {
    display: none !important;
}

/* Agrandir le curseur - FIX: Curseur vraiment plus grand */
body.rgaa-big-cursor,
body.rgaa-big-cursor * {
    cursor:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="1" d="M5 3l3.057-3L20 12l-3.056 3.035L15.88 13.9l-4.943 7.061-3.595-3.593L7.3 15.906l-3.75-3.75L5 3z"/></svg>')
            12 12,
        auto !important;
}

body.rgaa-big-cursor a,
body.rgaa-big-cursor button,
body.rgaa-big-cursor input,
body.rgaa-big-cursor select,
body.rgaa-big-cursor textarea {
    cursor:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="1" d="M8 6.5L14 12l-6 5.5V6.5z"/></svg>')
            12 12,
        pointer !important;
}

/* Hauteur de ligne augmentée */
body.rgaa-line-height * {
    line-height: 2.5 !important;
}

/* Aligner le texte à gauche */
body.rgaa-text-align * {
    text-align: left !important;
}

/* Info-bulles visibles */
body.rgaa-tooltips [title]:after {
    content: " (" attr(title) ")";
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}

body.rgaa-tooltips abbr[title]:after,
body.rgaa-tooltips acronym[title]:after {
    content: " (" attr(title) ")";
}

/* Réduction du mouvement (préférence système) */
body.rgaa-reduced-motion * {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
}

/* Fix pour le scroll dans le panel sur mobile */
@media (max-width: 480px) {
    .rgaa-panel-body {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}