/** * Grouvel - Révisions Collège & Lycée (3ᵉ / 2ⁿᵈᵉ) * Feuille de style partagée par toutes les pages de la section * « Collège & Lycée ». Chaque page définit sa couleur d'accent via * la variable --rv-accent sur . */ :root { color-scheme: light dark; --rv-accent: #2563eb; --rv-accent-soft: rgba(37, 99, 235, 0.12); --rv-bg: radial-gradient(circle at 30% 15%, #eef4fb 0%, #ffffff 70%); --rv-text: #2d3142; --rv-text-muted: #5a6172; --rv-heading: #1c3d5a; --rv-card: rgba(255, 255, 255, 0.94); --rv-card-solid: #ffffff; --rv-border: rgba(0, 0, 0, 0.09); --rv-shadow: 0 14px 38px rgba(28, 61, 90, 0.12); --rv-correct: #1c8a4a; --rv-correct-bg: rgba(28, 138, 74, 0.12); --rv-wrong: #d23b3b; --rv-wrong-bg: rgba(210, 59, 59, 0.12); --rv-info: #2563eb; --rv-example: #7b3fb5; --rv-method: #c77700; --rv-warn: #d23b3b; } @media (prefers-color-scheme: dark) { :root { --rv-accent-soft: rgba(96, 165, 250, 0.18); --rv-bg: radial-gradient(circle at 30% 15%, #141a2e 0%, #16213e 70%); --rv-text: #e8e8f0; --rv-text-muted: #a3acc2; --rv-heading: #eef2ff; --rv-card: rgba(30, 30, 50, 0.92); --rv-card-solid: #1e1e2e; --rv-border: rgba(255, 255, 255, 0.12); --rv-shadow: 0 14px 38px rgba(0, 0, 0, 0.5); --rv-correct: #4caf50; --rv-correct-bg: rgba(76, 175, 80, 0.16); --rv-wrong: #ef5350; --rv-wrong-bg: rgba(239, 83, 80, 0.16); } } * { box-sizing: border-box; } body.rv-body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif; background: var(--rv-bg); color: var(--rv-text); display: flex; flex-direction: column; min-height: 100vh; line-height: 1.6; } /* ===== En-tête ===== */ .rv-header { text-align: center; padding: 44px 16px 20px; } .rv-header h1 { font-size: 2.7rem; margin: 0 0 0.2em; color: var(--rv-heading); line-height: 1.15; } .rv-header h1 .accent { color: var(--rv-accent); } .rv-header .rv-subtitle { margin: 0.6em auto 1.4em; max-width: 720px; color: var(--rv-text-muted); font-size: 1.05rem; } .rv-nav { display: flex; justify-content: center; gap: 0.8em; flex-wrap: wrap; } .rv-btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.4em; border-radius: 10px; background: linear-gradient(135deg, #007aff 0%, #0051d5 100%); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); } .rv-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 122, 255, 0.4); } .rv-btn.ghost { background: var(--rv-card-solid); color: var(--rv-accent); border: 2px solid var(--rv-accent); box-shadow: none; } .rv-btn.ghost:hover { background: var(--rv-accent-soft); } /* ===== Conteneur principal ===== */ .rv-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 18px 64px; } /* ===== Sélecteur de niveau (3ᵉ / 2ⁿᵈᵉ) ===== */ .rv-levels { display: flex; justify-content: center; gap: 0.8em; margin: 0 auto 28px; flex-wrap: wrap; } .rv-level-btn { padding: 0.85em 1.8em; border: 2px solid var(--rv-accent); border-radius: 999px; background: var(--rv-card-solid); color: var(--rv-accent); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: all 0.2s ease; } .rv-level-btn:hover { background: var(--rv-accent-soft); } .rv-level-btn.active { background: var(--rv-accent); color: #fff; box-shadow: 0 8px 20px var(--rv-accent-soft); } .rv-level-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25em 0.7em; border-radius: 999px; background: var(--rv-accent-soft); color: var(--rv-accent); vertical-align: middle; } /* ===== Onglets internes ===== */ .rv-tabs { display: flex; justify-content: center; gap: 0.6em; flex-wrap: wrap; margin-bottom: 26px; } .rv-tab { padding: 0.7em 1.3em; border: 2px solid var(--rv-border); border-radius: 10px; background: var(--rv-card-solid); color: var(--rv-text); font-weight: 600; font-size: 0.98rem; cursor: pointer; transition: all 0.2s ease; } .rv-tab:hover { border-color: var(--rv-accent); } .rv-tab.active { background: var(--rv-accent); color: #fff; border-color: var(--rv-accent); } /* ===== Panneaux (niveaux + onglets) ===== Les panneaux portent les classes .rv-level-panel et .rv-tab-panel ; on masque par défaut et on n'affiche que celui qui possède .active. */ .rv-panel, .rv-level-panel, .rv-tab-panel { display: none; } .rv-panel.active, .rv-level-panel.active, .rv-tab-panel.active { display: block; animation: rvFade 0.35s ease; } @keyframes rvFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== Carte de section ===== */ .rv-card { background: var(--rv-card); border-radius: 20px; padding: 2.2em 2.4em; box-shadow: var(--rv-shadow); margin-bottom: 1.8em; border: 1px solid var(--rv-border); } .rv-card > h2 { margin-top: 0; font-size: 1.7rem; color: var(--rv-heading); border-bottom: 3px solid var(--rv-accent); padding-bottom: 0.45em; } .rv-card h3 { font-size: 1.25rem; color: var(--rv-heading); margin-top: 1.6em; } .rv-card h4 { font-size: 1.05rem; color: var(--rv-heading); margin: 1.2em 0 0.4em; } .rv-lead { font-size: 1.08rem; color: var(--rv-text-muted); } /* ===== Programme officiel (liste à puces thématiques) ===== */ .rv-program { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: 0.7em; } .rv-program li { background: var(--rv-card-solid); border: 1px solid var(--rv-border); border-left: 4px solid var(--rv-accent); border-radius: 10px; padding: 0.85em 1.1em; } .rv-program li strong { color: var(--rv-heading); } .rv-program li small { color: var(--rv-text-muted); display: block; margin-top: 0.25em; } /* ===== Encadrés (callouts) ===== */ .rv-note { border-radius: 12px; padding: 1em 1.2em 1em 1.3em; margin: 1.2em 0; border-left: 4px solid var(--rv-info); background: rgba(37, 99, 235, 0.07); } .rv-note > strong:first-child { display: block; margin-bottom: 0.3em; } .rv-note.example { border-left-color: var(--rv-example); background: rgba(123, 63, 181, 0.08); } .rv-note.method { border-left-color: var(--rv-method); background: rgba(199, 119, 0, 0.09); } .rv-note.warn { border-left-color: var(--rv-warn); background: rgba(210, 59, 59, 0.08); } .rv-note.def { border-left-color: var(--rv-accent); background: var(--rv-accent-soft); } /* ===== Points clés ===== */ .rv-keypoints { margin: 1.1em 0; padding-left: 1.3em; } .rv-keypoints li { margin-bottom: 0.5em; } /* ===== Tableaux ===== */ .rv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.1em 0; } table.rv-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; } table.rv-table thead th { background: var(--rv-accent); color: #fff; padding: 0.75em 0.9em; text-align: left; font-weight: 600; } table.rv-table tbody td, table.rv-table tbody th { padding: 0.65em 0.9em; border-bottom: 1px solid var(--rv-border); text-align: left; vertical-align: top; } table.rv-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.025); } @media (prefers-color-scheme: dark) { table.rv-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); } } /* ===== Quiz QCM (moteur revisions.js) ===== */ .rv-quiz { margin: 1.2em 0; } .rv-quiz .rvq-progress { display: flex; gap: 0.5em; justify-content: center; margin-bottom: 1em; flex-wrap: wrap; } .rv-quiz .rvq-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--rv-border); } .rv-quiz .rvq-dot.current { background: var(--rv-accent); box-shadow: 0 0 6px var(--rv-accent-soft); } .rv-quiz .rvq-dot.ok { background: var(--rv-correct); } .rv-quiz .rvq-dot.ko { background: var(--rv-wrong); } .rv-quiz .rvq-card { background: var(--rv-card-solid); border: 2px solid var(--rv-border); border-radius: 14px; padding: 1.5em 1.6em; } .rv-quiz .rvq-question { font-size: 1.12rem; font-weight: 600; margin: 0 0 1em; } .rv-quiz .rvq-options { display: grid; gap: 0.7em; } @media (min-width: 620px) { .rv-quiz .rvq-options.cols2 { grid-template-columns: 1fr 1fr; } } .rv-quiz .rvq-option { padding: 0.85em 1.1em; border: 2px solid var(--rv-border); border-radius: 10px; background: var(--rv-card-solid); color: var(--rv-text); cursor: pointer; font-size: 1rem; text-align: left; transition: all 0.18s ease; } .rv-quiz .rvq-option:hover:not(:disabled) { border-color: var(--rv-accent); background: var(--rv-accent-soft); } .rv-quiz .rvq-option.correct { border-color: var(--rv-correct); background: var(--rv-correct-bg); color: var(--rv-correct); font-weight: 600; } .rv-quiz .rvq-option.wrong { border-color: var(--rv-wrong); background: var(--rv-wrong-bg); color: var(--rv-wrong); } .rv-quiz .rvq-option:disabled { cursor: default; } .rv-quiz .rvq-explain { margin-top: 1em; padding: 0.9em 1.1em; border-radius: 10px; background: var(--rv-accent-soft); font-size: 0.97rem; border-left: 4px solid var(--rv-accent); } .rv-quiz .rvq-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2em; gap: 1em; flex-wrap: wrap; } .rv-quiz .rvq-count { color: var(--rv-text-muted); font-size: 0.9rem; } .rv-quiz .rvq-result { text-align: center; padding: 1.5em; } .rv-quiz .rvq-result .rvq-emoji { font-size: 3rem; display: block; margin-bottom: 0.3em; } .rv-quiz .rvq-result .rvq-score { font-size: 1.5rem; font-weight: 700; } /* ===== Exercices à compléter (moteur revisions.js) ===== */ .rv-fill { margin: 1.2em 0; display: grid; gap: 0.8em; } .rv-fill .rvf-item { background: var(--rv-card-solid); border: 2px solid var(--rv-border); border-radius: 12px; padding: 1.1em 1.3em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8em; } .rv-fill .rvf-q { flex: 1; min-width: 180px; font-weight: 500; } .rv-fill .rvf-input { width: 150px; padding: 0.6em 0.7em; border: 2px solid var(--rv-border); border-radius: 8px; text-align: center; font-size: 16px; font-weight: 600; background: var(--rv-card-solid); color: var(--rv-text); } .rv-fill .rvf-input:focus { outline: none; border-color: var(--rv-accent); box-shadow: 0 0 0 3px var(--rv-accent-soft); } .rv-fill .rvf-input.correct { border-color: var(--rv-correct); background: var(--rv-correct-bg); } .rv-fill .rvf-input.wrong { border-color: var(--rv-wrong); background: var(--rv-wrong-bg); } .rv-fill .rvf-feedback { font-weight: 600; min-width: 28px; font-size: 1.1rem; } .rv-fill .rvf-hint { flex-basis: 100%; font-size: 0.88rem; color: var(--rv-text-muted); display: none; } .rv-fill .rvf-hint.show { display: block; } /* ===== Boutons d'action ===== */ .rv-action { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.5em; border-radius: 10px; border: none; background: var(--rv-accent); color: #fff; font-weight: 600; font-size: 0.98rem; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .rv-action:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--rv-accent-soft); } .rv-action.secondary { background: var(--rv-card-solid); color: var(--rv-accent); border: 2px solid var(--rv-accent); } .rv-action.secondary:hover { background: var(--rv-accent-soft); } .rv-actions-row { display: flex; gap: 0.7em; flex-wrap: wrap; align-items: center; margin-top: 1em; } /* ===== Panneau interactif ===== */ .rv-interactive { display: flex; gap: 1.8em; align-items: flex-start; flex-wrap: wrap; margin: 1.2em 0; } .rv-interactive .rvi-viz { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; align-items: center; } .rv-interactive .rvi-controls { flex: 1 1 280px; min-width: 240px; } .rv-interactive canvas, .rv-interactive svg.rvi-svg { width: 100%; max-width: 420px; height: auto; background: var(--rv-card-solid); border: 1px solid var(--rv-border); border-radius: 12px; } .rvi-field { margin-bottom: 1.1em; } .rvi-field label { display: block; font-weight: 600; margin-bottom: 0.35em; } .rvi-field input[type="range"] { width: 100%; accent-color: var(--rv-accent); } .rvi-field input[type="number"], .rvi-field select { width: 100%; padding: 0.55em 0.7em; border: 2px solid var(--rv-border); border-radius: 8px; font-size: 16px; background: var(--rv-card-solid); color: var(--rv-text); } .rvi-readout { font-family: "Courier New", monospace; font-size: 1.15rem; font-weight: 700; color: var(--rv-accent); } .rvi-result-box { background: var(--rv-accent-soft); border-radius: 12px; padding: 1em 1.2em; margin-top: 0.8em; } .rvi-btnrow { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 1em; } .rvi-btn { padding: 0.55em 1em; border: 2px solid var(--rv-accent); border-radius: 8px; background: var(--rv-card-solid); color: var(--rv-accent); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: all 0.18s ease; } .rvi-btn:hover { background: var(--rv-accent-soft); } .rvi-btn.primary { background: var(--rv-accent); color: #fff; } /* ===== Exemple résolu (worked example) ===== */ .rv-example { border: 1px solid var(--rv-border); border-left: 4px solid var(--rv-method); border-radius: 12px; padding: 1em 1.2em; margin: 1.2em 0; background: rgba(199, 119, 0, 0.06); } .rv-example > .rv-example-title { display: block; font-weight: 700; color: var(--rv-heading); margin-bottom: 0.5em; } .rv-example .rv-calc { font-family: "Courier New", monospace; font-size: 1.05rem; background: var(--rv-card-solid); border: 1px solid var(--rv-border); border-radius: 8px; padding: 0.6em 0.9em; margin: 0.5em 0; overflow-x: auto; white-space: pre; } /* ===== Étapes de méthode numérotées ===== */ .rv-steps { counter-reset: rvstep; list-style: none; padding: 0; margin: 1.1em 0; display: grid; gap: 0.6em; } .rv-steps li { position: relative; padding: 0.7em 1em 0.7em 3em; background: var(--rv-card-solid); border: 1px solid var(--rv-border); border-radius: 10px; } .rv-steps li::before { counter-increment: rvstep; content: counter(rvstep); position: absolute; left: 0.7em; top: 50%; transform: translateY(-50%); width: 1.7em; height: 1.7em; display: flex; align-items: center; justify-content: center; background: var(--rv-accent); color: #fff; border-radius: 50%; font-weight: 700; font-size: 0.9rem; } /* ===== Carte vocabulaire / définitions trilingue ===== */ .rv-vocab { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.97rem; } .rv-vocab th, .rv-vocab td { border: 1px solid var(--rv-border); padding: 0.55em 0.8em; text-align: left; } .rv-vocab thead th { background: var(--rv-accent); color: #fff; } /* ===== Mini-galerie de figures / pictos ===== */ .rv-figrow { display: flex; flex-wrap: wrap; gap: 1em; margin: 1em 0; justify-content: center; } .rv-fig { flex: 0 1 150px; text-align: center; background: var(--rv-card-solid); border: 1px solid var(--rv-border); border-radius: 12px; padding: 0.9em; } .rv-fig svg { width: 100%; height: auto; max-height: 110px; } .rv-fig .rv-fig-label { display: block; margin-top: 0.4em; font-weight: 600; font-size: 0.9rem; } /* ===== Grille du hub (page index de la section) ===== */ .rv-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4em; margin-top: 1.5em; } .rv-subject-card { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--rv-card); border: 1px solid var(--rv-border); border-radius: 18px; padding: 1.6em 1.6em 1.7em; box-shadow: var(--rv-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; border-top: 5px solid var(--sub-color, var(--rv-accent)); color: var(--rv-text); } .rv-subject-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(28, 61, 90, 0.2); } .rv-subject-card .sub-icon { font-size: 2.6rem; margin-bottom: 0.2em; } .rv-subject-card .sub-title { font-size: 1.3rem; font-weight: 700; color: var(--rv-heading); margin: 0 0 0.3em; } .rv-subject-card .sub-desc { font-size: 0.95rem; color: var(--rv-text-muted); margin: 0; flex: 1; } .rv-subject-card .sub-levels { margin-top: 0.9em; display: flex; gap: 0.4em; flex-wrap: wrap; } .rv-subject-card .sub-chip { font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 999px; background: var(--sub-color, var(--rv-accent)); color: #fff; opacity: 0.92; } /* Carte de matière « à venir » (non cliquable) */ .rv-subject-card.soon { cursor: default; opacity: 0.72; filter: grayscale(0.3); } .rv-subject-card.soon:hover { transform: none; box-shadow: var(--rv-shadow); } .rv-subject-card .sub-soon { position: absolute; top: 0.9em; right: 0.9em; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25em 0.6em; border-radius: 999px; background: var(--rv-text-muted); color: #fff; } /* ===== Pied de page ===== */ .rv-footer { text-align: center; padding: 1.5em; color: var(--rv-text-muted); font-size: 0.85rem; } /* ===== Sommaire ancré ===== */ .rv-toc { display: flex; gap: 0.5em; flex-wrap: wrap; margin: 0 0 1.4em; } .rv-toc a { font-size: 0.88rem; text-decoration: none; color: var(--rv-accent); border: 1px solid var(--rv-border); border-radius: 999px; padding: 0.35em 0.9em; background: var(--rv-card-solid); } .rv-toc a:hover { background: var(--rv-accent-soft); } /* ===== Responsive ===== */ @media (max-width: 640px) { .rv-header { padding: 30px 12px 14px; } .rv-header h1 { font-size: 1.95rem; } .rv-header .rv-subtitle { font-size: 0.95rem; } .rv-card { padding: 1.4em 1.3em; border-radius: 16px; } .rv-card > h2 { font-size: 1.4rem; } .rv-level-btn { padding: 0.7em 1.3em; font-size: 0.98rem; } .rv-quiz .rvq-options.cols2 { grid-template-columns: 1fr; } .rv-fill .rvf-item { flex-direction: column; align-items: stretch; } .rv-fill .rvf-input { width: 100%; } .rv-interactive { flex-direction: column; } table.rv-table { font-size: 0.88rem; } table.rv-table td, table.rv-table th { padding: 0.55em 0.5em; } } /* ===== Impression ===== */ @media print { .rv-nav, .rv-levels, .rv-tabs, .rv-toc, .rv-action, .rv-actions-row, .rv-quiz .rvq-footer, .rv-interactive .rvi-controls { display: none !important; } body.rv-body { background: #fff; color: #000; } .rv-panel { display: block !important; } .rv-card { box-shadow: none; border: 1px solid #000; break-inside: avoid; background: #fff; } table.rv-table thead th { background: #ddd; color: #000; } }