/* ───────────────────────────────────────── Mode de lecture — bascule d'affichage des repères Classes appliquées sur pour éviter le flash de contenu ───────────────────────────────────────── */ /* Contenu marqué .advanced est masqué par défaut (mode essentiel) */ /* Sélecteurs multiples pour maximiser la robustesse */ html.reader-basic .advanced, html.reader-basic .principle-box.advanced, html.reader-basic .reperes-box.advanced, html.reader-basic .voix-box.advanced, html.reader-basic .sage-box.advanced, html.reader-basic .fable-box.advanced, .reader-basic .advanced, :root.reader-basic .advanced { display: none !important; visibility: hidden !important; } /* ─── Contenant du bouton ─── */ .reader-toggle-wrapper { display: flex; justify-content: center; padding: 1.2rem 1rem 0.4rem; background: transparent; } /* ─── Bouton de bascule (argent patiné) ─── */ .reader-mode-toggle { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.6rem; background: #8A9099; color: #fff; border: 1px solid #8A9099; border-radius: 26px; font-family: 'AW Conqueror Sans', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease, border-color 0.25s ease; text-decoration: none; box-shadow: 0 2px 6px rgba(60, 70, 80, 0.18); } .reader-mode-toggle:hover { background: #6E7580; border-color: #6E7580; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(60, 70, 80, 0.28); } .reader-mode-toggle:focus-visible { outline: 2px solid #6E7580; outline-offset: 2px; } .reader-mode-toggle .toggle-arrow { display: inline-block; transition: transform 0.3s ease; font-size: 0.85em; line-height: 1; } /* Sur activation, la flèche pivote et le label change */ html.reader-advanced .reader-mode-toggle .toggle-arrow { transform: rotate(180deg); } html.reader-advanced .reader-mode-toggle .toggle-label-basic { display: none; } html.reader-basic .reader-mode-toggle .toggle-label-advanced { display: none; } /* ─── Box « Repères pour comprendre » ─── */ .reperes-box { background: #FBF7EF; border: 1px solid #E6DFD0; border-left: 4px solid #B8A170; border-radius: 0 6px 6px 0; padding: 1.4rem 1.5rem; margin: 2.5rem 0 1.5rem; max-width: 680px; margin-left: auto; margin-right: auto; } .reperes-box .reperes-header { margin-bottom: 1.3rem; padding-bottom: 1rem; border-bottom: 1px solid #E6DFD0; } .reperes-box h3 { font-family: 'AW Conqueror Carved', serif; font-weight: 400; font-size: 1.35rem; color: #5A4A28; margin: 0 0 0.3rem; line-height: 1.2; } .reperes-box .reperes-lede { font-style: italic; color: #8A7758; font-size: 0.92rem; margin: 0; } .reperes-box .reperes-item { margin-bottom: 1.1rem; } .reperes-box .reperes-item:last-child { margin-bottom: 0; } .reperes-box .reperes-item > strong { display: block; font-family: 'AW Conqueror Carved', serif; font-weight: 500; font-size: 1.55rem; color: #2D2D2D; margin-bottom: 0.25rem; } .reperes-box .reperes-item .reperes-dates { font-family: 'AW Conqueror Carved', serif; font-style: italic; font-weight: 400; color: #8A7758; font-size: 0.9em; margin-left: 0.3rem; } .reperes-box .reperes-item p { margin: 0 !important; font-size: 1.4rem; color: #3D4253; line-height: 1.6; } /* Animation douce à la révélation */ html.reader-advanced .advanced { animation: reveal 0.4s ease-out; } @keyframes reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Mobile */ @media (max-width: 480px) { .reader-mode-toggle { font-size: 0.78rem; padding: 0.5rem 1.1rem; } .reader-toggle-wrapper { padding: 1rem 0.8rem 0.2rem; } .reperes-box { padding: 1.2rem 1.2rem; margin: 2rem 0 1rem; } }