/* ================================================ FEATURES ADDITIONNELLES — Mathieux Joubert 1. Barre de progression de lecture 2. Mode clair / Mode sombre (toggle) Inclure après micro-interactions.css ================================================ */ /* ══════════════════════════════════════════════════ 1. BARRE DE PROGRESSION DE LECTURE Visible uniquement sur les pages avec
(le JS ne l'injecte que sur ces pages-là) ══════════════════════════════════════════════════ */ #reading-progress-bar { position: fixed; top: var(--nav-h, 72px); /* colle sous la nav */ left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--or), #ffd93d); z-index: 999; /* sous la nav (z-index 1000) */ border-radius: 0 2px 2px 0; transition: width 0.1s linear; pointer-events: none; /* jamais cliquable */ box-shadow: 0 0 8px rgba(240, 165, 0, 0.5); } /* ══════════════════════════════════════════════════ 2. BOUTON TOGGLE DARK / LIGHT ══════════════════════════════════════════════════ */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; transition: background 0.2s ease, transform 0.2s ease; margin-left: 8px; flex-shrink: 0; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .theme-toggle-btn:active { transform: scale(0.92); } .theme-icon { pointer-events: none; user-select: none; } /* ══════════════════════════════════════════════════ 3. VARIABLES MODE CLAIR On ne touche PAS au mode dark (c'est le défaut). On surcharge uniquement quand .theme-light est sur . ══════════════════════════════════════════════════ */ html.theme-light { --fond-page: #fdf8f0; /* corps de page */ --texte: #1a1a2e; --texte-light: #555566; } /* Corps de page */ html.theme-light body { background-color: var(--fond-page); color: var(--texte); } /* Nav — reste sombre dans les deux modes (meilleure lisibilité) */ /* On ne touche pas à .site-nav intentionnellement */ /* Sections à fond clair dans le thème light */ html.theme-light section, html.theme-light .section-blog, html.theme-light .apropos-section, html.theme-light .livres-section, html.theme-light .bib-section { background-color: var(--fond-page); } /* Sections à fond sombre (--encre) → deviennent légèrement plus claires */ html.theme-light .hero-home, html.theme-light .cta-section, html.theme-light .footer { /* Ces sections ont leur propre background défini inline ou dans style.css. On les laisse intentionnellement telles quelles pour le contraste. */ } /* Cartes et conteneurs */ html.theme-light .livre-card, html.theme-light .bib-card, html.theme-light .blog-card, html.theme-light .article-card { background: #fff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* Textes génériques */ html.theme-light p, html.theme-light li, html.theme-light blockquote, html.theme-light .text-content { color: var(--texte); } /* Titres */ html.theme-light h1, html.theme-light h2, html.theme-light h3, html.theme-light h4 { color: #0d0d1a; } /* Article de blog en mode clair */ html.theme-light article { color: var(--texte); } html.theme-light article h2, html.theme-light article h3 { color: #0d0d1a; } /* Footer */ html.theme-light .footer { background: #1c1c2e; /* garde le fond sombre, c'est volontaire */ } /* ══════════════════════════════════════════════════ 3. EXIT-INTENT POP-UP ══════════════════════════════════════════════════ */ /* Overlay sombre */ #exit-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.35s ease; backdrop-filter: blur(4px); } #exit-overlay.exit-visible { opacity: 1; } /* Modale */ #exit-modal { position: relative; background: var(--encre); border: 1px solid rgba(240, 165, 0, 0.25); border-radius: 20px; padding: 48px 40px 36px; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 0 60px rgba(240, 165, 0, 0.12), 0 24px 80px rgba(0, 0, 0, 0.6); transform: translateY(24px) scale(0.97); transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); } #exit-overlay.exit-visible #exit-modal { transform: translateY(0) scale(1); } /* Bouton fermeture */ #exit-close { position: absolute; top: 14px; right: 16px; background: rgba(255, 255, 255, 0.08); border: none; color: rgba(255, 255, 255, 0.5); font-size: 1rem; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } #exit-close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } /* Déco emoji */ #exit-deco { font-size: 2.8rem; margin-bottom: 12px; line-height: 1; } /* Pré-titre */ #exit-pretitle { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--or); margin-bottom: 10px; opacity: 0.85; } /* Titre principal */ #exit-title { font-family: var(--font-titre); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 16px; } #exit-title em { font-style: italic; color: var(--or); } /* Corps */ #exit-body { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; line-height: 1.65; margin-bottom: 28px; } /* Formulaire */ #exit-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } #exit-email { width: 100%; padding: 13px 18px; border-radius: 10px; border: 1.5px solid rgba(240, 165, 0, 0.3); background: rgba(255, 255, 255, 0.07); color: #fff; font-size: 0.95rem; font-family: var(--font-corps); outline: none; transition: border-color 0.2s; } #exit-email::placeholder { color: rgba(255, 255, 255, 0.35); } #exit-email:focus { border-color: var(--or); background: rgba(255, 255, 255, 0.1); } #exit-submit { width: 100%; padding: 13px 18px; background: var(--or); color: var(--noir); font-weight: 700; font-size: 0.95rem; font-family: var(--font-corps); border: none; border-radius: 10px; cursor: pointer; transition: background 0.2s, transform 0.15s; } #exit-submit:hover { background: #ffd93d; transform: translateY(-1px); } /* Lien Amazon secondaire */ #exit-amazon { display: block; font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); text-decoration: underline; text-underline-offset: 3px; margin-bottom: 16px; transition: color 0.2s; } #exit-amazon:hover { color: rgba(255, 255, 255, 0.75); } /* Note légale */ #exit-note { font-size: 0.73rem; color: rgba(255, 255, 255, 0.3); margin-top: 4px; } /* Confirmation */ #exit-success { color: #4ecdc4; font-size: 1rem; line-height: 1.6; padding: 16px 0; } /* Mobile */ @media (max-width: 600px) { #exit-modal { padding: 40px 24px 28px; } } /* Transition douce sur tous les éléments concernés */ html, body, section, .livre-card, .bib-card, .blog-card, .article-card, article, p, li, h1, h2, h3, h4 { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ══════════════════════════════════════════════════ 4. BADGE "ÉCRIT PAR UN HUMAIN" Affiché dans le footer de toutes les pages ══════════════════════════════════════════════════ */ .human-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 6px 14px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.55); margin-top: 12px; transition: border-color 0.2s, color 0.2s; text-decoration: none; cursor: default; } .human-badge:hover { border-color: rgba(240, 165, 0, 0.4); color: rgba(255, 255, 255, 0.8); } .human-badge-icon { font-size: 0.9rem; line-height: 1; } .footer-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; margin-bottom: 6px; }