/* ========================================================================== PRÉPA ISPITS v9.12 — Système de thèmes Chaque thème redéfinit les variables globales : couleurs, typographie, arrondis, ombres. Tout le site se transforme d'un coup, sans toucher au reste du CSS. Appliqué via , mémorisé en local. ========================================================================== */ /* Arrière-plan décoratif par thème : dégradés CSS purs, aucun fichier image, compatible tous navigateurs / desktop / mobile / tout système. */ body,body.landing-body,body.admin-body{background-image:var(--bg-img,none);} /* -------------------------------------------------------------------------- NUIT — sombre profond, accents bleu clair, repos des yeux le soir -------------------------------------------------------------------------- */ html[data-theme="nuit"] { --paper:#10151b; --paper-2:#171e26; --card:#1b242e; --line:#2a3542; --line-soft:#232d38; --ink:#e8edf2; --ink-2:#b8c4cf; --ink-3:#8494a3; --ink-4:#5d6b78; --blue:#5ea7d4; --blue-deep:#8cc4e6; --blue-soft:#1e3346; --blue-tint:#18242f; --btn-txt:#0d1319; --ok:#6fbf9f; --ok-bg:#16302a; --warn:#d8a94f; --warn-bg:#332a12; --err:#d47f7f; --err-bg:#3a2020; --star:#e8b84d; --star-deep:#d8a838; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 2px 12px rgba(0,0,0,.45); --sh-3:0 10px 30px rgba(0,0,0,.55); --topbar-bg:rgba(16,21,27,.88); } html[data-theme="nuit"] body{color-scheme:dark;} /* -------------------------------------------------------------------------- BIBLIOTHÈQUE — sépia chaleureux, cuir & papier ancien, tout en serif -------------------------------------------------------------------------- */ html[data-theme="sepia"] { --paper:#f6efe3; --paper-2:#efe5d2; --card:#fdf9f0; --line:#ddd0b8; --line-soft:#e8ddc8; --ink:#33291c; --ink-2:#5a4c38; --ink-3:#85735a; --ink-4:#a2917a; --blue:#8a5a2b; --blue-deep:#6d4520; --blue-soft:#efe0cb; --blue-tint:#f4ead9; --ok:#4f6b46; --ok-bg:#e7ecdd; --warn:#96691c; --warn-bg:#f2e6c8; --err:#a04533; --err-bg:#f2ded6; --star:#b08a3c; --star-deep:#997733; --ui:"Source Serif 4",Georgia,serif; /* interface en serif : effet livre */ --r-sm:4px; --r-md:7px; --r-lg:11px; /* arrondis plus classiques */ --sh-1:0 1px 2px rgba(63,48,28,.08); --sh-2:0 2px 10px rgba(63,48,28,.1); --sh-3:0 8px 28px rgba(63,48,28,.14); --topbar-bg:rgba(246,239,227,.92); } /* -------------------------------------------------------------------------- OCÉAN — clinique moderne, sans-serif partout, arrondis généreux -------------------------------------------------------------------------- */ html[data-theme="ocean"] { --paper:#f3f9fa; --paper-2:#e8f2f4; --card:#ffffff; --line:#d5e5e9; --line-soft:#e2eef1; --ink:#12333d; --ink-2:#3b5a64; --ink-3:#6c8790; --ink-4:#93aab1; --blue:#0e7490; --blue-deep:#0b5a70; --blue-soft:#dcf0f5; --blue-tint:#ecf7fa; --ok:#0f766e; --ok-bg:#dcf2ef; --warn:#a16207; --warn-bg:#f6ecd4; --err:#b03a3a; --err-bg:#f7e3e2; --star:#d9a441; --star-deep:#c48f2f; --display:"Inter",system-ui,sans-serif; /* titres modernes */ --read:"Inter",system-ui,sans-serif; /* lecture sans-serif */ --r-sm:10px; --r-md:15px; --r-lg:22px; /* arrondis doux, style app */ --topbar-bg:rgba(243,249,250,.9); } /* -------------------------------------------------------------------------- ÉMERAUDE — vert apaisant, ambiance nature, serif académique conservé -------------------------------------------------------------------------- */ html[data-theme="foret"] { --paper:#f4f8f4; --paper-2:#e9f1e9; --card:#ffffff; --line:#d8e4d8; --line-soft:#e4eee4; --ink:#1e2f24; --ink-2:#44584a; --ink-3:#728478; --ink-4:#98a89d; --blue:#2f6b4f; --blue-deep:#24513c; --blue-soft:#e2efe7; --blue-tint:#eef6f1; --ok:#2f6b57; --ok-bg:#e2efe9; --warn:#9a6b1f; --warn-bg:#f4ecd8; --err:#a23b3b; --err-bg:#f5e5e4; --star:#cf9f3f; --star-deep:#b8892f; --topbar-bg:rgba(244,248,244,.9); } /* -------------------------------------------------------------------------- AMÉTHYSTE — violet feutré, élégant et doux -------------------------------------------------------------------------- */ html[data-theme="amethyste"] { --paper:#faf8fd; --paper-2:#f2eef8; --card:#ffffff; --line:#e2dbee; --line-soft:#ebe5f4; --ink:#251f33; --ink-2:#4c4460; --ink-3:#7a7290; --ink-4:#a29ab5; --blue:#6d4fa3; --blue-deep:#563d85; --blue-soft:#ece5f7; --blue-tint:#f4f0fa; --ok:#3f6b52; --ok-bg:#e5f0e9; --warn:#9a6b1f; --warn-bg:#f5edd9; --err:#a23b52; --err-bg:#f6e5ea; --star:#d2a343; --star-deep:#bb8c30; --r-sm:9px; --r-md:14px; --r-lg:20px; --topbar-bg:rgba(250,248,253,.9); } /* -------------------------------------------------------------------------- ENCRE — noir pur (AMOLED), contraste soigné, économise l'écran OLED -------------------------------------------------------------------------- */ html[data-theme="encre"] { --paper:#000000; --paper-2:#0d0d10; --card:#121216; --line:#26262c; --line-soft:#1b1b20; --ink:#f2f2f5; --ink-2:#c4c4cc; --ink-3:#8e8e99; --ink-4:#5f5f6a; --blue:#7ab8ff; --blue-deep:#a3ceff; --blue-soft:#10233a; --blue-tint:#0a141f; --btn-txt:#000000; --ok:#7fd4ab; --ok-bg:#0e2a1e; --warn:#e6b45c; --warn-bg:#2b2208; --err:#e08585; --err-bg:#331414; --star:#f0c058; --star-deep:#e0b048; --sh-1:0 1px 2px rgba(0,0,0,.6); --sh-2:0 2px 12px rgba(0,0,0,.6); --sh-3:0 10px 30px rgba(0,0,0,.7); --topbar-bg:rgba(0,0,0,.85); } html[data-theme="encre"] body{color-scheme:dark;} /* -------------------------------------------------------------------------- NÉBULEUSE — sombre violet, arrière-plan en dégradé cosmique -------------------------------------------------------------------------- */ html[data-theme="nebuleuse"] { --paper:#141225; --paper-2:#1c1936; --card:#211d3f; --line:#37325c; --line-soft:#2c2850; --ink:#eceafa; --ink-2:#c2bde0; --ink-3:#918bb8; --ink-4:#665f8f; --blue:#9d8cff; --blue-deep:#b9adff; --blue-soft:#2b2555; --blue-tint:#1e1a3d; --btn-txt:#120e28; --ok:#7fd0b0; --ok-bg:#16342b; --warn:#e0b060; --warn-bg:#302608; --err:#e88ba0; --err-bg:#381a24; --star:#e8bf5c; --star-deep:#d4aa48; --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 2px 12px rgba(0,0,0,.5); --sh-3:0 10px 32px rgba(0,0,0,.6); --topbar-bg:rgba(20,18,37,.85); --bg-img:linear-gradient(160deg,#191333 0%,#141225 45%,#1b1040 100%); } html[data-theme="nebuleuse"] body{color-scheme:dark;} /* -------------------------------------------------------------------------- SABLE — désert chaud, terracotta, dégradé doré très doux -------------------------------------------------------------------------- */ html[data-theme="sable"] { --paper:#faf4ea; --paper-2:#f3ead8; --card:#fffdf8; --line:#e6d9c2; --line-soft:#eee3d0; --ink:#3a3226; --ink-2:#615644; --ink-3:#8c7f68; --ink-4:#ab9f89; --blue:#b4622d; --blue-deep:#8f4c20; --blue-soft:#f5e4d3; --blue-tint:#f9efe3; --ok:#5d7a4a; --ok-bg:#e9f0df; --warn:#96691c; --warn-bg:#f5e9c8; --err:#a8432f; --err-bg:#f6e0d9; --star:#c98a34; --star-deep:#ad7328; --topbar-bg:rgba(250,244,234,.9); --bg-img:linear-gradient(180deg,#fbf6ee 0%,#f8eedb 100%); } /* -------------------------------------------------------------------------- MENTHE — vert d'eau frais et lumineux, style moderne -------------------------------------------------------------------------- */ html[data-theme="menthe"] { --paper:#eefaf4; --paper-2:#e2f4ea; --card:#ffffff; --line:#cfe8da; --line-soft:#ddf0e5; --ink:#14342a; --ink-2:#3c5c50; --ink-3:#6d8b7f; --ink-4:#96b0a5; --blue:#0f9d76; --blue-deep:#0b7a5c; --blue-soft:#d8f2e7; --blue-tint:#e8f8f1; --ok:#0f766e; --ok-bg:#daf1ee; --warn:#9a6b1f; --warn-bg:#f4ecd4; --err:#b03a3a; --err-bg:#f8e3e2; --star:#c99a34; --star-deep:#b3862c; --display:"Inter",system-ui,sans-serif; --r-sm:10px; --r-md:15px; --r-lg:22px; --topbar-bg:rgba(238,250,244,.9); --bg-img:linear-gradient(175deg,#f0fbf6 0%,#e6f7ee 100%); } /* -------------------------------------------------------------------------- AURORE — rose & pêche, doux et chaleureux, dégradé pastel -------------------------------------------------------------------------- */ html[data-theme="aurore"] { --paper:#fdf5f6; --paper-2:#f9eaee; --card:#ffffff; --line:#f0d8e0; --line-soft:#f6e4ea; --ink:#341f28; --ink-2:#5e4350; --ink-3:#8d707d; --ink-4:#b299a4; --blue:#c2497a; --blue-deep:#a03562; --blue-soft:#f9e0ec; --blue-tint:#fcedf4; --ok:#3f6b52; --ok-bg:#e5f0e9; --warn:#9a6b1f; --warn-bg:#f6edd8; --err:#a83a4e; --err-bg:#f8e2e6; --star:#d99a52; --star-deep:#c4853f; --r-sm:10px; --r-md:16px; --r-lg:24px; --topbar-bg:rgba(253,245,246,.9); --bg-img:linear-gradient(165deg,#fdf1f3 0%,#fdf6ef 55%,#f7eefa 100%); } /* -------------------------------------------------------------------------- ARDOISE — gris professionnel, sobre et neutre, arrondis serrés -------------------------------------------------------------------------- */ html[data-theme="ardoise"] { --paper:#f2f4f6; --paper-2:#e9edf0; --card:#ffffff; --line:#d7dde2; --line-soft:#e2e7eb; --ink:#1c242b; --ink-2:#42505b; --ink-3:#71808c; --ink-4:#9aa7b1; --blue:#3a5670; --blue-deep:#2b4152; --blue-soft:#e2eaf1; --blue-tint:#edf2f6; --ok:#2f6b57; --ok-bg:#e3efe9; --warn:#8f6a1e; --warn-bg:#f2ecd8; --err:#a23b3b; --err-bg:#f4e4e3; --star:#d6a544; --star-deep:#c08f30; --display:"Inter",system-ui,sans-serif; --read:"Inter",system-ui,sans-serif; --r-sm:6px; --r-md:9px; --r-lg:13px; --topbar-bg:rgba(242,244,246,.92); } /* -------------------------------------------------------------------------- CONTRASTE+ — lisibilité maximale (accessibilité) : noir sur blanc pur, accent bleu vif, séparations franches -------------------------------------------------------------------------- */ html[data-theme="contraste"] { --paper:#ffffff; --paper-2:#f2f2f2; --card:#ffffff; --line:#3a3a3a; --line-soft:#8a8a8a; --ink:#000000; --ink-2:#111111; --ink-3:#333333; --ink-4:#555555; --blue:#0033cc; --blue-deep:#001f80; --blue-soft:#dbe4ff; --blue-tint:#eef2ff; --ok:#006633; --ok-bg:#dff2e6; --warn:#7a5200; --warn-bg:#fff2cc; --err:#b30000; --err-bg:#ffe0e0; --star:#b8860b; --star-deep:#8a6508; --sh-1:none; --sh-2:0 0 0 1px #3a3a3a; --sh-3:0 0 0 2px #3a3a3a; --topbar-bg:rgba(255,255,255,.97); } /* ========================================================================== Sélecteur de thème (bouton + menu) — desktop & mobile ========================================================================== */ .themeswitch{position:relative;display:inline-flex;flex-shrink:0;} .theme-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px; border:1px solid var(--line);background:var(--card);color:var(--ink-2); border-radius:99px;cursor:pointer;font-family:var(--ui);font-size:.85rem;font-weight:600; line-height:1;transition:all .15s var(--ease);} .theme-btn:hover{border-color:var(--blue);color:var(--blue);} .theme-btn-ico{font-size:1.05rem;} /* Le libellé « Thème » reste visible le plus longtemps possible (c'est ce qui rend le bouton compréhensible). On ne le masque qu'en dernier recours, sur les très petits écrans, où la topbar manquerait sinon de place. */ @media(max-width:380px){ .theme-btn{padding:0 10px;font-size:.8rem;gap:5px;} } /* Dans la topbar mobile, l'espace est disputé (marque + Accueil + flèche) : on réduit le bouton thème à son icône. Le menu qui s'ouvre porte le titre « Thème », donc l'intention reste parfaitement claire. Ailleurs (accueil flottant, desktop), le libellé « Thème » demeure toujours affiché. */ @media(max-width:560px){ .topbar .theme-btn{padding:0;width:38px;justify-content:center;} .topbar .theme-btn-txt{display:none;} } .theme-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:330px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--sh-3);padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:2px; max-height:min(70vh,480px);overflow:auto;} .theme-menu[hidden]{display:none!important;} .theme-menu-title{grid-column:1/-1;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-4);padding:8px 11px 4px;} .theme-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left; font-family:var(--ui);font-size:.88rem;font-weight:600;color:var(--ink-2); background:none;border:0;border-radius:var(--r-sm);padding:9px 11px;cursor:pointer; transition:background .12s var(--ease);} .theme-item:hover{background:var(--paper-2);color:var(--ink);} .theme-dots{display:inline-flex;flex-shrink:0;} .theme-dots i{width:15px;height:15px;border-radius:99px;border:1.5px solid var(--line);display:block;} .theme-dots i + i{margin-left:-6px;} .theme-check{margin-left:auto;color:var(--blue);opacity:0;font-weight:700;} .theme-item.is-active .theme-check{opacity:1;} .theme-item.is-active{color:var(--ink);} /* Variante flottante (page d'accueil publique, sans topbar) */ .themeswitch-float{position:fixed;top:14px;right:14px;z-index:60;} .themeswitch-float .theme-btn{box-shadow:var(--sh-2);} /* Mobile : le menu reste ancré au bouton (le backdrop-filter de la topbar piège les éléments en position fixe) ; largeur bornée à l'écran. */ @media(max-width:560px){ .theme-menu{width:min(320px,calc(100vw - 20px));max-height:65vh;} .theme-item{padding:11px 10px;font-size:.88rem;} /* cibles tactiles confortables */ }