/* ========================================================= FONTS ========================================================= */ /* Poppins */ @font-face { font-family: "Poppins"; src: url("../fonts/poppins/poppins.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins/poppins-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins/poppins-bold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins/poppins-bolditalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } /* Luciole */ @font-face { font-family: "Luciole"; src: url("../fonts/luciole/Luciole-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Luciole"; src: url("../fonts/luciole/Luciole-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Luciole"; src: url("../fonts/luciole/Luciole-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Luciole"; src: url("../fonts/luciole/Luciole-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* Atkinson Hyperlegible */ @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson/atkinson-hyperlegible.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson/atkinson-hyperlegible-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson/atkinson-hyperlegible-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson/atkinson-hyperlegible-boldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* ========================================================= VARIABLES & BASE ========================================================= */ :root { --vieux-rose: #ad4576; --link: var(--vieux-rose); --text: #212529; --muted: #6c757d; --border: #e9ecef; /* Typo */ --base-font-size: 16px; /* taille de base */ --font-zoom: 1; /* modifié par JS : 0.85 → 1.6 */ --font-current: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Le zoom agit sur tout le site (REM Bootstrap inclus) */ html { font-size: calc(var(--base-font-size) * var(--font-zoom)); } body { font-family: var(--font-current); color: var(--text); } /* Liens du site en vieux-rose par défaut */ a { color: var(--link); } a:hover, a:focus { filter: brightness(0.95); } /* Variantes de police via classes sur */ body.font-poppins { --font-current: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body.font-luciole { --font-current: "Luciole", Arial, Helvetica, sans-serif; } body.font-dys { --font-current: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif; } /* Si tu veux absolument Verdana comme fallback système (non local) : body.font-dys { --font-current: Verdana, Geneva, Tahoma, sans-serif; } */ /* Focus visibles */ :focus-visible { outline: 2px dashed var(--link); outline-offset: 2px; } /* ========================================================= BOUTON & PANNEAU D’ACCESSIBILITÉ ========================================================= */ .a11y-btn { position: fixed; top: 10px; right: 10px; z-index: 1055; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(33, 37, 41, 0.75); color: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: background 0.2s ease; } .a11y-btn:is(:hover, :focus) { background: rgba(33, 37, 41, 0.95); outline: none; } .a11y-panel { position: fixed; top: 56px; right: 10px; width: min(92vw, 320px); z-index: 1056; background: #fff; border: 1px solid #e9ecef; border-radius: 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid #eef0f3; } .a11y-panel__body { padding: 0.75rem; } .a11y-panel[hidden] { display: none !important; } /* ========================================================= GOOGLE TRANSLATE (optionnel) ========================================================= */ #google_translate_element { display: inline-block; } .goog-te-gadget .goog-te-combo { padding: 0.2rem 0.4rem; border-radius: 0.25rem; border: 1px solid #ced4da; } /* ===== CONTRASTE ÉLEVÉ ===== */ body.a11y-contrast { --bs-body-bg: #000 !important; --bs-body-color: #fff !important; --text: #fff; --muted: #ddd; --border: #fff; background: #000 !important; color: #fff !important; } /* Liens visibles */ body.a11y-contrast a { color: #ffe3ff !important; text-decoration: underline !important; } body.a11y-contrast *:not( p, .carousel-inner *, .carousel-control-prev, .carousel-control-prev-icon, .carousel-control-next, .carousel-control-next-icon, .sub-blk * ), body.a11y-contrast .form-control::placeholder { color: #fff; background-color: #000 !important; }