/* =====================================================
   MODULE ACCESSIBILITÉ WAM
   Variables héritées du design system
   ===================================================== */

:root {
    /* Couleur light bg pour l'aperçu du swatch — absente de theme.json, valeur statique intentionnelle */
    --wam-a11y-light-bg: #f9f6f1;
}



/* =====================================
   HEADER DU PANEL
   ===================================== */
.wam-a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wam-spacing-lg) var(--wam-spacing-lg) var(--wam-spacing-sm);
    border-bottom: 1px solid var(--wp--preset--color--background-500);
}

/* =====================================
   BODY DU PANEL
   ===================================== */
.wam-a11y-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--wam-spacing-sm) 0;
    overflow-y: auto;
}

/* =====================================
   GROUPES D'OPTIONS (fieldset)
   ===================================== */
.a11y-group {
    border: none;
    padding: var(--wam-spacing-sm) var(--wam-spacing-lg);
    margin: 0;
    border-bottom: 1px solid var(--wp--preset--color--background-500);
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xs);
}

.a11y-group:last-child {
    border-bottom: none;
}

.a11y-group__legend {
    font-weight: bold;
    font-size: var(--wam-font-size-sm);
    color: var(--wp--preset--color--text-normal);
    padding: 0;
    float: left;
    width: 100%;
    margin-bottom: 4px;
    line-height: 1.4;
}

.a11y-group__desc {
    font-size: var(--wam-font-size-xs);
    color: var(--wp--preset--color--text-disabled);
    margin: 0;
    line-height: 1.4;
}

/* =====================================
   TOGGLE BUTTONS (radio comme boutons)
   ===================================== */
.a11y-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-2xs);
}

.a11y-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--wam-color-glass-white);
    border: 1px solid transparent;
    border-radius: var(--wam-radius-sm);
    cursor: pointer;
    font-size: var(--wam-font-size-sm);
    color: var(--wp--preset--color--text-subtext);
    line-height: 1.25;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.a11y-toggle-btn:hover {
    background: var(--wam-color-glass-white-hover);
    color: var(--wp--preset--color--text-normal);
}

/* Cacher le radio natif */
.a11y-toggle-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* État actif (radio sélectionné) */
.a11y-toggle-btn:has(input[type="radio"]:checked) {
    background: var(--wam-color-glass-green);
    border-color: var(--wp--preset--color--accent-green);
    color: var(--wp--preset--color--text-normal);
}

/* Swatches thème */
.a11y-toggle-btn__swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(249, 244, 236, 0.2);
    flex-shrink: 0;
}

.a11y-toggle-btn__swatch--dark {
    background: var(--wp--preset--color--background-800);
}

.a11y-toggle-btn__swatch--light {
    background: var(--wam-a11y-light-bg);
}

/* =====================================
   SWITCH ON/OFF (checkbox)
   ===================================== */
.a11y-switch-row {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-xs);
    cursor: pointer;
}

.a11y-switch {
    position: relative;
    flex-shrink: 0;
}

.a11y-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.a11y-switch__track {
    display: block;
    width: 40px;
    height: 22px;
    background: var(--wam-color-glass-white-hover);
    border: 1px solid rgba(249, 244, 236, 0.15);
    border-radius: var(--wam-radius-pill);
    position: relative;
    transition: background var(--wam-transition), border-color var(--wam-transition);
}

.a11y-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wp--preset--color--text-subtext);
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease;
}

/* État coché */
.a11y-switch input[type="checkbox"]:checked+.a11y-switch__track {
    background: rgba(1, 227, 189, 0.2);
    border-color: var(--wp--preset--color--accent-green);
}

.a11y-switch input[type="checkbox"]:checked+.a11y-switch__track .a11y-switch__thumb {
    transform: translateX(18px);
    background: var(--wp--preset--color--accent-green);
}

/* Focus */
.a11y-switch input[type="checkbox"]:focus-visible+.a11y-switch__track {
    outline: 2px solid var(--wp--preset--color--accent-green);
    outline-offset: 2px;
}

.a11y-switch-row__label {
    font-size: var(--wam-font-size-sm);
    color: var(--wp--preset--color--text-normal);
    line-height: 1.4;
}

/* =====================================
   SELECT
   ===================================== */
.a11y-select {
    width: 100%;
    padding: 8px 12px;
    background: var(--wam-color-glass-white);
    border: 1px solid var(--wp--preset--color--background-500);
    border-radius: var(--wam-radius-sm);
    color: var(--wp--preset--color--text-normal);
    font-size: var(--wam-font-size-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e1cdad' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    transition: border-color var(--wam-transition);
}

.a11y-select:hover,
.a11y-select:focus {
    border-color: var(--wp--preset--color--accent-green);
    outline: none;
}

.a11y-select:focus-visible {
    box-shadow: 0 0 0 2px var(--wp--preset--color--accent-green);
}

.a11y-select option {
    background: var(--wp--preset--color--background-600);
    color: var(--wp--preset--color--text-normal);
}

/* =====================================
   FOOTER DU PANEL
   ===================================== */
.wam-a11y-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wam-spacing-sm) var(--wam-spacing-lg);
    border-top: 1px solid var(--wp--preset--color--background-500);
    gap: 12px;
}

.a11y-save-hint {
    font-size: 11px;
    color: var(--wp--preset--color--text-disabled);
    margin: 0;
    line-height: 1.3;
    text-align: right;
}

/* =====================================
   CLASSES APPLIQUÉES SUR <html>
   ===================================== */

/* --- Thème clair --- */
html.wam-theme-light {
    /* Inversion du design system pour le mode clair. 
       Ces valeurs HEX statiques sont volontairement hardcodées ici 
       pour garantir les ratios d'accessibilité indépendamment des tokens variables. */
    --wp--preset--color--background-800: #f9f6f1;
    --wp--preset--color--background-600: #f6f2e9;
    --wp--preset--color--background-500: #e9e3d8;
    --wp--preset--color--text-normal: #1d367f;
    --wp--preset--color--text-subtext: #5f6e9b;
    --wp--preset--color--text-disabled: #707070;
    --wp--preset--color--accent-green: #0c6e7d;
    --wp--preset--color--accent-yellow: #8e600a;
    --wp--preset--color--accent-orange: #bd3f00;
    --wp--preset--color--accent-pink: #b71088;
}

/* Bouton trigger adapté au thème clair */
html.wam-theme-light .wam-a11y-panel,
html.wam-theme-light .wam-a11y-panel__header,
html.wam-theme-light .wam-a11y-panel__footer {
    background: var(--wp--preset--color--background-600);
}

/* --- Polices graphiques désactivées --- */
html.wam-no-graphical-fonts {
    --font-mallia: var(--wp--preset--font-family--outfit);
    --font-wam-font: var(--wp--preset--font-family--outfit);
}

html.wam-no-graphical-fonts h1,
html.wam-no-graphical-fonts h2,
html.wam-no-graphical-fonts h3,
html.wam-no-graphical-fonts .is-style-title-sign-lg,
html.wam-no-graphical-fonts .is-style-title-sign-md,
html.wam-no-graphical-fonts .is-style-title-sign-sm,
html.wam-no-graphical-fonts .is-style-title-cool-lg,
html.wam-no-graphical-fonts .is-style-title-cool-md,
html.wam-no-graphical-fonts .card-article__title,
html.wam-no-graphical-fonts .videos-title__we-are,
html.wam-no-graphical-fonts .videos-title__move,
html.wam-no-graphical-fonts .section-teachers__title h2,
html.wam-no-graphical-fonts .section-teachers__title p {
    font-family: var(--wp--preset--font-family--outfit) !important;
    font-style: normal !important;
}

/* --- Police de substitution --- */
html.wam-font-comic-sans * {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
}

html.wam-font-arial * {
    /* Update: Avoid Arial on the Dys font as the user prefers Outfit everywhere strictly if possible, or dys fonts only. 
       Replaced with wam font body to avoid helvetica overriding */
    font-family: var(--wp--preset--font-family--outfit) !important;
}

html.wam-font-times * {
    font-family: var(--wp--preset--font-family--outfit) !important;
}

/* --- Taille des textes --- */
html.wam-text-120 {
    font-size: 120%;
}

html.wam-text-150 {
    font-size: 150%;
}

/* --- Interlignage augmenté (+25%) --- */
html.wam-line-height-increased * {
    line-height: 1.6 !important;
    /* ~ +25% par rapport à 1.25 */
}

/* =====================================================
   SR-ONLY et reduce-motion sont définis dans base.css.
   Les règles d'animation sont appliquées à deux endroits :
    /* base.css : règle générale sur * (toutes les pages)
       home.css : règles spécifiques sections (particules, kw-char...)
       ===================================================== */

/* =====================================================
   DÉTECTION LIENS EXTERNES
   Auto-marquage via .is-external (inséré par PHP)
   ===================================================== */
.is-external {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    /* petit espace réglable */
}

/* Le picto hérite de la couleur du lien (fill/stroke inherit via currentColor) */
.is-external::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    /* Couleur dynamique du lien */

    /* On utilise mask-image pour colorer l'SVG via background-color */
    -webkit-mask-image: url('../images/Name=external%20link.svg');
    mask-image: url('../images/Name=external%20link.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* Alignement optique en fonction de la ligne de base */
    margin-top: -2px;
}

/* Optionnel : transition fluide si le lien a un hover */
.is-external::after {
    transition: opacity var(--wam-transition), transform var(--wam-transition);
}

.is-external:hover::after {
    transform: translate(1px, -1px);
    /* micro-animation directionnelle */
}

/* =====================================================
   WIDGET INLINE — Page /accessibilite/
   Le panneau est affiché dans le flux de la page,
   sans position:fixed ni backdrop.
   ===================================================== */

/* Centrage du widget dans la colonne de contenu */
.a11y-widget-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Panel en mode inline : position statique, toujours visible */
.wam-a11y-panel--inline {
    display: flex;
    width: 100%;
    border-radius: var(--wam-radius-xl);
    flex-direction: column;
    background: var(--wp--preset--color--background-600);
    border: 1px solid var(--wp--preset--color--background-500);
    color: var(--wp--preset--color--text-normal);
}

/* =====================================================
   PREFERS-REDUCED-MOTION (RGAA)
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   FOCUS-VISIBLE GLOBAL (RGAA 10.7)
   Compense les outline: none dispersés dans le CSS
   ===================================================== */
:focus-visible {
    outline: 2px solid var(--wp--preset--color--text-normal) !important;
    outline-offset: 2px !important;
}