/* ========================================================================== PhoboSpawn — feuille de style principale 1. Base 2. Menu de gauche 3. Contenu 4. DoorScape (habillage sombre) 5. Fiche de cours 6. Mobile (tiroir + ascenseur) ========================================================================== */ /* ---------------------------- 1. BASE ----------------------------------- */ body { margin: 0; font-family: Arial, Helvetica, sans-serif; display: flex; background: #ecf0f1; color: #1c2430; line-height: 1.6; } /* ------------------------ 2. MENU DE GAUCHE ----------------------------- */ .left-menu { width: 250px; flex: none; background: #2c3e50; color: white; min-height: 100vh; padding: 15px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; } .left-menu a { color: white; text-decoration: none; } .left-menu ul { list-style: none; padding: 0; } .left-menu li { margin: 10px 0; } .left-menu .logo { font-size: 22px; margin: 0 0 14px; } .left-menu .logo a { color: #fff; } .menu-section { margin-top: 20px; font-size: 18px; border-bottom: 1px solid #aaa; } .menu-lang { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; } .menu-lang a { color: #7fc4ec; } /* -------------------------- 3. CONTENU ---------------------------------- */ .main-content { flex: 1; min-width: 0; padding: 20px; } .top-banner { background: #3498db; color: white; padding: 20px; margin-bottom: 20px; border-radius: 10px; } .top-banner h1 { margin: 0 0 6px; } .top-banner p { margin: 0; } .footer { margin-top: 30px; font-size: 12px; opacity: .8; } /* ============ 4. DOORSCAPE — habillage sombre PhoboSpawn ================== doorscape.js injecte lui-même son CSS clair dans . On repasse par-dessus en préfixant par .left-menu (spécificité plus forte) pour le fond bleu nuit. ------------------------------------------------------------------------ */ .left-menu #c2o-ds { --ds-accent: #5dade2; --ds-accent-2: #3498db; --ds-hover: rgba(255, 255, 255, .10); --ds-hover-bd: rgba(255, 255, 255, .22); --ds-sub-bg: rgba(255, 255, 255, .05); --ds-text: #ffffff; --ds-muted: #9fb3c8; } .left-menu #c2o-ds .ds-title { color: #9fb3c8; } .left-menu #c2o-ds .ds-row > a, .left-menu #c2o-ds .ds-row > .ds-lbl { color: #dce9f5; font-size: 14.5px; } .left-menu #c2o-ds .ds-row.ds-block > a, .left-menu #c2o-ds .ds-row.ds-block > .ds-lbl { color: #ffffff; } .left-menu #c2o-ds .ds-row.ds-muted > a { color: #7f8fa0; } .left-menu #c2o-ds .ds-row .ds-soon { color: #7f8fa0; } .left-menu #c2o-ds .ds-toggle:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #ffffff; } /* La PORTE : le bouton qui remplace le menu par le sous-menu */ .left-menu #c2o-ds .ds-door { background: rgba(52, 152, 219, .22); border-color: rgba(93, 173, 226, .55); color: #7fc4ec; } .left-menu #c2o-ds .ds-door:hover { background: linear-gradient(145deg, #5dade2, #3498db); color: #ffffff; border-color: transparent; } .left-menu #c2o-ds .ds-collapse { border-left-color: rgba(255, 255, 255, .22); } /* La SORTIE : on quitte le sous-menu */ .left-menu #c2o-ds .ds-exit { background: rgba(52, 152, 219, .22); border-color: rgba(93, 173, 226, .55); color: #cfe6f7; } .left-menu #c2o-ds .ds-exit:hover { background: linear-gradient(145deg, #5dade2, #3498db); color: #ffffff; } .left-menu #c2o-ds .ds-exit .ds-depth { background: #2c3e50; color: #7fc4ec; border-color: rgba(93, 173, 226, .55); } /* Fil d'Ariane */ .left-menu #c2o-ds .ds-crumb { color: #9fb3c8; } .left-menu #c2o-ds .ds-crumb button { color: #7fc4ec; } .left-menu #c2o-ds .ds-crumb button:hover { background: rgba(255, 255, 255, .10); } .left-menu #c2o-ds .ds-crumb .ds-sep { color: #6b7d8f; } .left-menu #c2o-ds .ds-crumb .ds-cur { color: #ffffff; } /* CATÉGORIE : gros titre statique, séparateur entre les blocs du menu */ .left-menu #c2o-ds .ds-cat { color: #ffffff; border-bottom-color: rgba(255, 255, 255, .35); } /* --------------------- 5. FICHE DE COURS -------------------------------- */ .lecon { max-width: 760px; } .lecon h2 { margin-top: 0; } .lecon h3 { margin-top: 28px; color: #2c3e50; } .lecon-age { display: inline-block; background: #e8f4fc; border: 1px solid #bcd9ea; color: #21618c; border-radius: 999px; padding: 3px 12px; font-size: 13px; margin-bottom: 14px; } .encadre { background: #fff; border-left: 4px solid #3498db; border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 18px 0; } .encadre.astuce { border-left-color: #f1c40f; background: #fffdf3; } .encadre.danger { border-left-color: #e74c3c; background: #fef6f5; } .encadre h4 { margin: 0 0 8px; } .encadre p:first-of-type { margin-top: 0; } .encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; } /* ---- Formules et équations ---- */ .molecule { white-space: nowrap; font-weight: 600; } /* Vecteur : la flèche est dessinée en CSS au-dessus de la lettre. Ne JAMAIS utiliser le caractère combinant U+20D7 (F⃗) : la plupart des polices ne le combinent pas et l'affichent comme un carré vide à côté de la lettre. */ .vec { position: relative; display: inline-block; font-weight: 700; font-style: italic; } .vec::after { content: "→"; position: absolute; left: 0; right: 0; top: -.66em; font-size: .6em; line-height: 1; text-align: center; font-style: normal; font-weight: 400; } .equation { background: #fff; border: 1px solid #d5dde3; border-radius: 10px; padding: 16px 14px; margin: 18px 0; text-align: center; font-size: 1.3em; font-weight: 600; overflow-x: auto; } .equation.fausse { border-color: #e0b4b0; background: #fef6f5; } .equation .commentaire { display: block; font-size: .62em; font-weight: 400; color: #7f8c8d; margin-top: 6px; } /* Pastilles chaud / froid */ .exo, .endo { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: .85em; font-weight: 700; } .exo { background: #fdecea; color: #c0392b; } .endo { background: #e8f4fc; color: #21618c; } /* ---- Onglets, sans une ligne de JavaScript ---- Astuce : les volets sont places JUSTE APRES leur etiquette, donc `input:checked + label + .volet` suffit — aucun identifiant a enumerer dans le CSS, on peut ajouter un onglet sans y toucher. C'est `order` qui remet toutes les etiquettes sur la premiere ligne et les volets en dessous. */ .onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; } .onglets > input { position: absolute; opacity: 0; width: 0; height: 0; } .onglets > label { order: 1; background: #fff; border: 1px solid #d5dde3; border-radius: 999px; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-size: 15px; user-select: none; transition: background .15s, border-color .15s; } .onglets > label:hover { background: #eaf3f9; border-color: #bcd9ea; } .onglets > input:checked + label { background: #3498db; border-color: #3498db; color: #fff; font-weight: 700; } .onglets > input:focus-visible + label { outline: 3px solid #5dade2; outline-offset: 2px; } .onglets > .volet { order: 2; width: 100%; display: none; background: #fff; border: 1px solid #d5dde3; border-radius: 12px; padding: 18px; } .onglets > input:checked + label + .volet { display: block; } .onglets > .volet > :first-child { margin-top: 0; } .onglets > .volet > :last-child { margin-bottom: 0; } .onglets > .volet h4 { margin: 0 0 10px; font-size: 17px; } /* ---- Deuxième niveau : les pages DANS un onglet ---- Exactement la même mécanique que .onglets, avec un habillage plus discret : l'onglet dit « quel concept », la page dit « quelle étape ». */ .pages { display: flex; flex-wrap: wrap; gap: 6px; } .pages > input { position: absolute; opacity: 0; width: 0; height: 0; } .pages > label { order: 1; background: #f4f7fa; border: 1px solid #d5dde3; border-radius: 8px; padding: 8px 13px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-size: 15px; color: #5c6a78; user-select: none; transition: background .15s; } .pages > label:hover { background: #eaf3f9; } .pages > input:checked + label { background: #2c3e50; border-color: #2c3e50; color: #fff; font-weight: 700; } .pages > input:focus-visible + label { outline: 3px solid #5dade2; outline-offset: 2px; } .pages > .page { order: 2; width: 100%; display: none; padding: 18px 0 0; margin-top: 12px; border-top: 1px solid #d5dde3; } .pages > input:checked + label + .page { display: block; } .pages > .page > :first-child { margin-top: 0; } /* Précédent / Suivant : ce sont des