/* ============================================================ le long de la ligne — confort de lecture Panneau de préférences appliqué au site normal. Il n'existe pas de « version accessible » séparée : les réglages ci-dessous modifient l'affichage des mêmes pages, via des attributs data- posés sur . Un seul contenu, une seule source de vérité. Aucun réglage n'est actif par défaut : tant que l'utilisateur ne touche à rien, le site s'affiche exactement comme avant. ============================================================ */ /* ------------------------------------------------------------ Le bouton d'accès, dans la barre du haut ------------------------------------------------------------ */ /* la barre du haut centre le téléphone : on cale le bouton à droite en absolu pour ne pas décaler ce centrage */ .topbar{position:relative} .topbar .a11y-btn{position:absolute;right:clamp(.6rem,2vw,1.3rem);top:50%;transform:translateY(-50%)} .a11y-btn{ display:inline-flex;align-items:center;gap:.45rem; font-family:inherit;font-size:.82rem;font-weight:600; color:var(--text);background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);border-radius:50px; padding:.3rem .8rem;cursor:pointer; transition:background .2s,border-color .2s; } .a11y-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)} .topbar .a11y-btn:active{transform:translateY(-50%) scale(.97)} .a11y-btn svg{width:15px;height:15px;flex:none;fill:currentColor} .a11y-btn[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff} /* ------------------------------------------------------------ Le panneau ------------------------------------------------------------ */ .a11y-panel{ position:fixed;inset:0;z-index:300; display:none;align-items:flex-start;justify-content:center; padding:clamp(1rem,4vw,3rem) 1rem; background:rgba(10,10,22,.6); overflow-y:auto; } .a11y-panel[open], .a11y-panel.is-open{display:flex} .a11y-box{ width:min(34rem,100%); background:var(--card,#24243e); border:1px solid var(--line,#3b3b5e); border-radius:16px; padding:clamp(1.2rem,3vw,1.8rem); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); } .a11y-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.4rem} .a11y-head h2{font-size:1.25rem;margin:0;line-height:1.2} .a11y-close{ margin-left:auto;flex:none;width:36px;height:36px;border-radius:50%; background:rgba(255,255,255,.07);border:1px solid var(--line,#3b3b5e); color:var(--text);cursor:pointer;font-size:1.1rem;line-height:1; transition:background .2s; } .a11y-close:hover{background:rgba(255,255,255,.16)} .a11y-intro{font-size:.9rem;color:var(--muted);margin:0 0 1.4rem} .a11y-legend{ display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); margin:1.5rem 0 .7rem;padding-top:1.1rem;border-top:1px solid var(--line,#3b3b5e); } .a11y-legend:first-of-type{margin-top:0;padding-top:0;border-top:0} /* — profils rapides — */ .a11y-profiles{display:grid;gap:.5rem} .a11y-profile{ display:flex;align-items:flex-start;gap:.8rem;width:100%;text-align:left; background:rgba(255,255,255,.04);border:1px solid var(--line,#3b3b5e); border-radius:11px;padding:.8rem .9rem;cursor:pointer;color:var(--text); transition:background .2s,border-color .2s; } .a11y-profile:hover{background:rgba(255,255,255,.09);border-color:var(--accent)} .a11y-profile[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim,rgba(123,108,255,.16))} .a11y-profile b{display:block;font-size:.95rem;font-weight:600;margin-bottom:.1rem} .a11y-profile span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45} .a11y-profile i{ flex:none;width:20px;height:20px;border-radius:50%;margin-top:.15rem; border:2px solid var(--line,#3b3b5e);position:relative; } .a11y-profile[aria-pressed="true"] i{border-color:var(--accent);background:var(--accent)} .a11y-profile[aria-pressed="true"] i::after{ content:"";position:absolute;left:5px;top:2px;width:5px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg); } /* — réglages fins — */ .a11y-row{ display:flex;align-items:center;gap:1rem; padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.07); } .a11y-row:last-child{border-bottom:0} .a11y-row label,.a11y-row .lbl{font-size:.92rem;flex:1;cursor:pointer} .a11y-row .hint{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem} /* interrupteur */ .a11y-sw{ flex:none;width:46px;height:26px;border-radius:50px;cursor:pointer; background:rgba(255,255,255,.13);border:1px solid var(--line,#3b3b5e); position:relative;transition:background .2s,border-color .2s; } .a11y-sw::after{ content:"";position:absolute;top:2px;left:2px;width:18px;height:18px; border-radius:50%;background:var(--text); transition:transform .22s cubic-bezier(.23,1,.32,1); } .a11y-sw[aria-checked="true"]{background:var(--accent);border-color:var(--accent)} .a11y-sw[aria-checked="true"]::after{transform:translateX(20px);background:#fff} /* taille du texte, trois crans */ .a11y-steps{display:flex;gap:.3rem;flex:none} .a11y-steps button{ min-width:42px;padding:.34rem .5rem;border-radius:8px;cursor:pointer; background:rgba(255,255,255,.06);border:1px solid var(--line,#3b3b5e); color:var(--text);font-family:inherit;font-weight:600; transition:background .2s,border-color .2s; } .a11y-steps button:hover{background:rgba(255,255,255,.14)} .a11y-steps button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff} .a11y-foot{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line,#3b3b5e)} .a11y-reset{ background:none;border:1px solid var(--line,#3b3b5e);color:var(--text); border-radius:50px;padding:.5rem 1rem;font-family:inherit;font-size:.85rem;cursor:pointer; transition:border-color .2s,background .2s; } .a11y-reset:hover{border-color:var(--text);background:rgba(255,255,255,.06)} .a11y-foot p{margin:0;font-size:.79rem;color:var(--muted);flex:1;min-width:12rem} /* ============================================================ LES RÉGLAGES Chacun est piloté par un attribut sur . ============================================================ */ /* ---------- Taille du texte ---------- */ html[data-a11y-size="1"]{font-size:112.5%} html[data-a11y-size="2"]{font-size:125%} html[data-a11y-size="3"]{font-size:140%} /* ---------- Espacement (critère WCAG 1.4.12) ---------- */ html[data-a11y-spacing="on"] body{ line-height:1.75; letter-spacing:.02em; word-spacing:.06em; } html[data-a11y-spacing="on"] p, html[data-a11y-spacing="on"] li{margin-bottom:1.4em;line-height:1.85} html[data-a11y-spacing="on"] h1, html[data-a11y-spacing="on"] h2, html[data-a11y-spacing="on"] h3{line-height:1.35;letter-spacing:0} /* ---------- Police plus lisible ---------- Atkinson Hyperlegible si le fichier est présent, sinon on retombe sur une fonte système à grande hauteur d'x, ce qui apporte déjà l'essentiel du gain. Rien n'est téléchargé tant que l'utilisateur n'active pas le réglage. */ @font-face{ font-family:'Atkinson Hyperlegible'; src:url('fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Atkinson Hyperlegible'; src:url('fonts/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap; } @font-face{ font-family:'Atkinson Hyperlegible'; src:url('fonts/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap; } @font-face{ font-family:'Atkinson Hyperlegible'; src:url('fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2'); font-weight:700;font-style:italic;font-display:swap; } html[data-a11y-font="on"], html[data-a11y-font="on"] body, html[data-a11y-font="on"] h1, html[data-a11y-font="on"] h2, html[data-a11y-font="on"] h3, html[data-a11y-font="on"] h4, html[data-a11y-font="on"] .brand-name, html[data-a11y-font="on"] button, html[data-a11y-font="on"] input, html[data-a11y-font="on"] select, html[data-a11y-font="on"] textarea{ font-family:'Atkinson Hyperlegible', Verdana, 'DejaVu Sans', system-ui, sans-serif !important; font-weight:400; letter-spacing:0; } html[data-a11y-font="on"] h1, html[data-a11y-font="on"] h2, html[data-a11y-font="on"] h3{font-weight:700} /* les titres contiennent des span stylés à part (.plus, .h1-geo…) : sans ce balayage, un même titre s'affiche en deux fontes */ html[data-a11y-font="on"] header *, html[data-a11y-font="on"] main *, html[data-a11y-font="on"] footer *{ font-family:'Atkinson Hyperlegible', Verdana, 'DejaVu Sans', system-ui, sans-serif !important; letter-spacing:0; } /* le nom de la marque reste sur une seule ligne, quel que soit le réglage */ .brand-name{white-space:nowrap} html[data-a11y-size] .brand-name, html[data-a11y-font="on"] .brand-name{white-space:nowrap;font-size:.9rem} /* ---------- Liens toujours soulignés (WCAG 1.4.1) ---------- */ html[data-a11y-links="on"] main a, html[data-a11y-links="on"] .prose a, html[data-a11y-links="on"] footer a{ text-decoration:underline !important; text-underline-offset:.18em; text-decoration-thickness:from-font; } html[data-a11y-links="on"] a.btn, html[data-a11y-links="on"] a.nav-cta, html[data-a11y-links="on"] .course-card, html[data-a11y-links="on"] .domain-card{text-decoration:none !important} /* ---------- Mouvement coupé ---------- */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } /* La vidéo n'est pas masquée : elle est dans le flux et porte la hauteur de la section. La retirer ferait disparaître le titre posé par-dessus en absolu. Le script la met en pause, ce qui satisfait le critère « pause, arrêt ou masquage » sans casser la mise en page, et un bouton permet de la relancer à tout moment. */ /* ------------------------------------------------------------ Commande de lecture de la vidéo d'arrière-plan Présente pour tout le monde, pas seulement dans les réglages. ------------------------------------------------------------ */ /* Masqué sur le site tel quel : le panneau « Confort de lecture », présent en haut de chaque page, sert déjà de moyen de mise en pause au sens du critère 2.2.2. Le bouton n'apparaît que lorsque le mouvement est coupé, pour permettre de relancer la vidéo. */ .vid-toggle{ display:none; position:absolute;right:1rem;bottom:1rem;z-index:5; align-items:center;gap:.45rem; font-family:var(--font-display);font-size:.78rem;font-weight:600; color:#fff;background:rgba(20,18,42,.72); border:1px solid rgba(255,255,255,.34);border-radius:50px; padding:.42rem .85rem;cursor:pointer; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:background .2s,border-color .2s; } .vid-toggle:hover{background:rgba(20,18,42,.9);border-color:#fff} .vid-toggle:active{transform:scale(.97)} .vid-toggle svg{width:13px;height:13px;fill:currentColor;flex:none} /* révélé uniquement quand le mouvement est refusé, par le panneau ou par le réglage système du visiteur */ html[data-a11y-motion="off"] .vid-toggle{display:inline-flex} @media (prefers-reduced-motion:reduce){ .vid-toggle{display:inline-flex} } @media (max-width:560px){ .vid-toggle span{position:absolute;left:-9999px} html[data-a11y-motion="off"] .vid-toggle{padding:.5rem;border-radius:50%} } /* ---------- Contraste renforcé ---------- */ html[data-a11y-contrast="on"]{ --bg:#000010; --card:#12122a; --text:#ffffff; --muted:#d6d6ea; --line:#7d7da8; --accent:#a99cff; --accent-txt:#c3baff; --accent-dim:rgba(169,156,255,.22); } html[data-a11y-contrast="on"] body{background:#000010} html[data-a11y-contrast="on"] .site-footer{background:#000010} html[data-a11y-contrast="on"] :focus-visible{outline:3px solid #ffdd00;outline-offset:3px} html[data-a11y-contrast="on"] .btn, html[data-a11y-contrast="on"] .nav-cta, html[data-a11y-contrast="on"] input, html[data-a11y-contrast="on"] select, html[data-a11y-contrast="on"] textarea{border-width:2px} html[data-a11y-contrast="on"] img, html[data-a11y-contrast="on"] picture{filter:contrast(1.08)} /* l'accent est éclairci en contraste renforcé : le texte blanc posé dessus deviendrait illisible, on le passe en bleu nuit */ html[data-a11y-contrast="on"] .btn-primary, html[data-a11y-contrast="on"] .btn-cpf-p{ background:#c3baff;background-image:none;color:#12122a;font-weight:700; } /* ---------- Thème clair ---------- Les couleurs de texte basculent désormais par les tokens --on-surface / --on-surface-2 / --on-tinted, définis dans styles.css. Il ne reste ici que ce qui ne peut pas passer par une variable : fonds, bordures, images. */ html[data-a11y-theme="light"]{ --bg:#ffffff; --panel:#f4f3f8; --frame:#f4f3f8; --frame-2:#eceaf4; --card:#f4f3f8; --text:#14142a; --muted:#3d3d55; --line:#c9c7d6; --accent:#4c3fd0; --accent-txt:#3f33bb; --accent-2:#4c3fd0; --accent-dim:rgba(76,63,208,.10); --glow:none; /* texte posé sur les surfaces : on passe au bleu nuit */ --on-surface:#14142a; --on-surface-2:#3d3d55; --on-tinted:#2a2270; /* cadres et champs : c'est ce qui laissait TOSA, les notes stagiaires et le formulaire sur fond sombre */ --frame-deep:#eceaf4; --field-bg:#ffffff; } html[data-a11y-theme="light"] body{background:#fff;color:#14142a} /* le logo est blanc : on bascule sur la version bleu nuit */ /* On cible par le fichier source, pas par la classe : certains logos n'en ont aucune, et cette règle couvrira aussi ceux à venir. */ html[data-a11y-theme="light"] img[src$="logo-blanc.svg"]{content:url("logo-bleunuit.svg")} /* la barre du haut reste sombre, son texte doit rester clair */ html[data-a11y-theme="light"] .topbar{background:#14142a} html[data-a11y-theme="light"] .topbar-phone{color:#c9c7e6} html[data-a11y-theme="light"] .topbar strong{color:#fff} html[data-a11y-theme="light"] .topbar-phone .tb-ico, html[data-a11y-theme="light"] .topbar-phone .tb-free{ color:#c9bcff;border-color:rgba(201,188,255,.5);background:rgba(201,188,255,.16); } /* surfaces et filets */ html[data-a11y-theme="light"] .site-header{background:rgba(255,255,255,.94);border-bottom:1px solid #e4e2ec} html[data-a11y-theme="light"] .site-footer{background:#f4f3f8;border-top:1px solid #e4e2ec} html[data-a11y-theme="light"] .footer-since, html[data-a11y-theme="light"] .footer-bottom, html[data-a11y-theme="light"] .legal-links a{color:#3d3d55 !important} html[data-a11y-theme="light"] .mega-panel, html[data-a11y-theme="light"] .a11y-box{background:#fff;border-color:#c9c7d6} html[data-a11y-theme="light"] .spec-grid, html[data-a11y-theme="light"] .module, html[data-a11y-theme="light"] .course-card, html[data-a11y-theme="light"] .domain-card, html[data-a11y-theme="light"] .avis-card, html[data-a11y-theme="light"] .trust-card{border-color:#d8d6e2} /* bordures des grands cadres, dont TOSA, avis et formulaire */ html[data-a11y-theme="light"] .cta-band-inner, html[data-a11y-theme="light"] .tosa-banner, html[data-a11y-theme="light"] .avis-hero, html[data-a11y-theme="light"] .contact-inner{border-color:#d8d6e2} html[data-a11y-theme="light"] .cta-band-inner p{color:#3d3d55} /* champs de saisie : bordure plus franche sur fond blanc */ html[data-a11y-theme="light"] .field input, html[data-a11y-theme="light"] .field select, html[data-a11y-theme="light"] .field textarea{border-color:#b6b3c6} /* encarts teintés du blog : fond violet très pâle */ html[data-a11y-theme="light"] .blog-inline-cta, html[data-a11y-theme="light"] .blog-like-cta, html[data-a11y-theme="light"] .blog-sources, html[data-a11y-theme="light"] .ai-disclosure{ background:rgba(76,63,208,.06);border-color:rgba(76,63,208,.28); } /* pastilles : le blanc devenait invisible sur fond pâle */ html[data-a11y-theme="light"] .chip{color:#2a2270;background:rgba(76,63,208,.10);border-color:rgba(76,63,208,.4)} /* boutons */ html[data-a11y-theme="light"] .btn-primary{background:linear-gradient(135deg,#3f33bb,#5a4bd6);color:#fff} html[data-a11y-theme="light"] .btn-ghost{color:#14142a;border-color:#b6b3c6} html[data-a11y-theme="light"] .btn-ghost:hover, html[data-a11y-theme="light"] .btn-ghost:focus-visible{color:#3f33bb;border-color:#3f33bb} html[data-a11y-theme="light"] .nav-cta{color:#14142a;border-color:#b6b3c6} /* bloc CPF : son dégradé est en rgba sombre codé en dur, il restait noir sur page claire. Le logo CPF étant blanc à 95 %, il reçoit un socle bleu nuit pour rester visible une fois le cadre éclairci. */ html[data-a11y-theme="light"] .cpf-block{ background:linear-gradient(135deg,#f1effa,#e9e6f6); border-color:rgba(76,63,208,.32); } html[data-a11y-theme="light"] .cpf-block::before{ background:radial-gradient(circle,rgba(76,63,208,.10),transparent 65%); } html[data-a11y-theme="light"] .cpf-logo-wrap{ background:#14142a;border-radius:12px;padding:.7rem .9rem; } html[data-a11y-theme="light"] .cpf-logo{filter:none} html[data-a11y-theme="light"] .btn-cpf-d{ color:#3f33bb;border-color:rgba(76,63,208,.45); } html[data-a11y-theme="light"] .btn-cpf-d:hover{ background:#4c3fd0;border-color:#4c3fd0;color:#fff; } /* bandeau cookies */ html[data-a11y-theme="light"] .cookie-banner{ background:rgba(255,255,255,.97);color:#3d3d55;border-color:#c9c7d6; box-shadow:0 14px 44px rgba(20,20,42,.18); } html[data-a11y-theme="light"] .cookie-btn{background:#f4f3f8;border-color:#b6b3c6;color:#14142a} html[data-a11y-theme="light"] .cookie-btn:hover, html[data-a11y-theme="light"] .cookie-btn:focus-visible{color:#3f33bb;border-color:#3f33bb;background:rgba(76,63,208,.08)} /* panneau lui-même */ html[data-a11y-theme="light"] .a11y-panel{background:rgba(20,20,42,.42)} html[data-a11y-theme="light"] .a11y-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff} html[data-a11y-theme="light"] .a11y-close, html[data-a11y-theme="light"] .a11y-profile, html[data-a11y-theme="light"] .a11y-steps button{background:#f4f3f8;border-color:#c9c7d6;color:#14142a} html[data-a11y-theme="light"] .a11y-sw{background:#d8d6e2;border-color:#b6b3c6} html[data-a11y-theme="light"] .a11y-sw::after{background:#fff} html[data-a11y-theme="light"] .a11y-row{border-bottom-color:#e4e2ec} /* la vidéo de fond écrase le texte sur fond clair : on l'estompe, et la légende qui était en blanc dessus passe au bleu nuit sur un voile clair, sinon elle devient blanc sur blanc */ /* le bloc vidéo garde son voile sombre en thème clair : sa légende doit rester blanche, sinon le token la passerait en bleu nuit */ html[data-a11y-theme="light"] .vid-caption h2{color:#fff} html[data-a11y-theme="light"] .vid-caption p{color:rgba(255,255,255,.82)} html[data-a11y-theme="light"] .vid-overlay{background:rgba(20,18,42,.62)} /* le séparateur en puce restait trop pâle */ html[data-a11y-theme="light"] .hero-tagline i{color:#6a6880} html[data-a11y-theme="light"] .breadcrumb span{color:#5f5d78} /* ---------- Réglage système du contraste ---------- */ @media (prefers-contrast:more){ html:not([data-a11y-contrast]):not([data-a11y-theme="light"]){ --muted:#cfcfe4; --line:#6f6f9a; --accent-txt:#b3a8ff; } } /* ------------------------------------------------------------ Adaptations ------------------------------------------------------------ */ @media (max-width:560px){ .a11y-row{flex-wrap:wrap} .a11y-steps{width:100%} .a11y-steps button{flex:1} .a11y-btn span{display:none} .a11y-btn{padding:.3rem .5rem} } @media (prefers-reduced-motion:reduce){ .a11y-sw::after{transition:none} }