/* * ═══════════════════════════════════════════════════════════════ * EFERUS — Styles communs version mobile * Fichier : m-style.css * Utilisé par : m-index.html · m-organigramme.html * et toutes les futures pages mobiles * ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════ §1 — THÈME CLAIR (jour) — défaut ══════════════════════════════════════════════ */ :root { --parchment: #f2e8d0; --parchment-mid: #e8d9b5; --parchment-dk: #d9c99a; --parchment-edg: #c8b47a; --ink: #1c150e; --ink-faded: #3a2f20; --ink-light: #5a4a32; --rubric: #8b1a1a; --rubric-lt: #b22222; --gold: #8b6914; --gold-lt: #c8960c; --bg: #f2e8d0; --bg-gradient: linear-gradient(to bottom, #f5edd5 0%, #f0e5c8 40%, #eaddb8 100%); --glow: rgba(255,220,140,.18); --shadow-page: rgba(0,0,0,.12); --banner-bg: rgba(139,105,20,.04); --portail-bg: rgba(139,105,20,.04); --portail-active: rgba(139,105,20,.12); --colophon-rule: rgba(139,105,20,.35); --incipit-rule: rgba(139,105,20,.3); --drop-cap: var(--rubric); /* Bouton mode jour/nuit */ --btn-theme-bg: rgba(139,105,20,.08); --btn-theme-bd: rgba(139,105,20,.3); --btn-theme-col: var(--ink-faded); } /* ══════════════════════════════════════════════ §2 — THÈME SOMBRE (nuit) • Automatique si l'OS est en mode sombre • Forcé par [data-theme="dark"] sur ══════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --parchment: #1e160c; --parchment-mid: #2a1f10; --parchment-dk: #3a2f1a; --parchment-edg: #4a3a22; --ink: #e0d0a8; --ink-faded: #c8b87a; --ink-light: #9a8860; --rubric: #d4856a; --rubric-lt: #e8a080; --gold: #c8960c; --gold-lt: #e8b020; --bg: #0e0906; --bg-gradient: linear-gradient(to bottom, #120b04 0%, #0e0804 60%, #0a0603 100%); --glow: rgba(200,150,20,.1); --shadow-page: rgba(0,0,0,.5); --banner-bg: rgba(200,150,20,.06); --portail-bg: rgba(200,150,20,.05); --portail-active: rgba(200,150,20,.15); --colophon-rule: rgba(200,150,20,.3); --incipit-rule: rgba(200,150,20,.25); --drop-cap: var(--rubric); --btn-theme-bg: rgba(200,150,20,.1); --btn-theme-bd: rgba(200,150,20,.3); --btn-theme-col: var(--ink-faded); } } /* Forçage manuel mode sombre */ [data-theme="dark"] { --parchment: #1e160c; --parchment-mid: #2a1f10; --parchment-dk: #3a2f1a; --parchment-edg: #4a3a22; --ink: #e0d0a8; --ink-faded: #c8b87a; --ink-light: #9a8860; --rubric: #d4856a; --rubric-lt: #e8a080; --gold: #c8960c; --gold-lt: #e8b020; --bg: #0e0906; --bg-gradient: linear-gradient(to bottom, #120b04 0%, #0e0804 60%, #0a0603 100%); --glow: rgba(200,150,20,.1); --shadow-page: rgba(0,0,0,.5); --banner-bg: rgba(200,150,20,.06); --portail-bg: rgba(200,150,20,.05); --portail-active: rgba(200,150,20,.15); --colophon-rule: rgba(200,150,20,.3); --incipit-rule: rgba(200,150,20,.25); --drop-cap: var(--rubric); --btn-theme-bg: rgba(200,150,20,.1); --btn-theme-bd: rgba(200,150,20,.3); --btn-theme-col: var(--ink-faded); } /* Forçage manuel mode clair */ [data-theme="light"] { --parchment: #f2e8d0; --parchment-mid: #e8d9b5; --parchment-dk: #d9c99a; --parchment-edg: #c8b47a; --ink: #1c150e; --ink-faded: #3a2f20; --ink-light: #5a4a32; --rubric: #8b1a1a; --rubric-lt: #b22222; --gold: #8b6914; --gold-lt: #c8960c; --bg: #f2e8d0; --bg-gradient: linear-gradient(to bottom, #f5edd5 0%, #f0e5c8 40%, #eaddb8 100%); --glow: rgba(255,220,140,.18); --shadow-page: rgba(0,0,0,.12); --banner-bg: rgba(139,105,20,.04); --portail-bg: rgba(139,105,20,.04); --portail-active: rgba(139,105,20,.12); --colophon-rule: rgba(139,105,20,.35); --incipit-rule: rgba(139,105,20,.3); --drop-cap: #8b1a1a; --btn-theme-bg: rgba(139,105,20,.08); --btn-theme-bd: rgba(139,105,20,.3); --btn-theme-col: #3a2f20; } /* ══════════════════════════════════════════════ §3 — RESET & BASE ══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; min-height: 100%; } body { font-family: 'EB Garamond', Georgia, serif; color: var(--ink-faded); background: var(--bg); background-image: var(--bg-gradient); position: relative; overflow-x: hidden; transition: background .4s ease, color .4s ease; } /* Texture parchemin */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-size: 400px 400px; opacity: .6; } /* Lueur centrale douce */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 55% at 50% 25%, var(--glow) 0%, transparent 70%); animation: lueur 7s ease-in-out infinite alternate; } @keyframes lueur { 0% { opacity: .5; } 50% { opacity: 1; } 100% { opacity: .7; } } /* ══════════════════════════════════════════════ §4 — WRAPPER DE PAGE ══════════════════════════════════════════════ */ .m-page { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding-bottom: 56px; min-height: 100vh; box-shadow: -3px 0 16px var(--shadow-page), 3px 0 16px var(--shadow-page); } /* ══════════════════════════════════════════════ §5 — BARRE DE TÊTE (bouton thème + ornement) ══════════════════════════════════════════════ */ .m-topbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 14px 4px; position: sticky; top: 0; z-index: 100; background: var(--bg); background-image: var(--bg-gradient); border-bottom: 1px solid rgba(139,105,20,.15); transition: background .4s ease; } .btn-theme { display: inline-flex; align-items: center; gap: 5px; font-family: 'EB Garamond', serif; font-style: italic; font-size: .7rem; letter-spacing: .06em; color: var(--btn-theme-col); background: var(--btn-theme-bg); border: 1px solid var(--btn-theme-bd); padding: 5px 12px; border-radius: 3px; cursor: pointer; transition: all .25s; -webkit-tap-highlight-color: transparent; user-select: none; } .btn-theme:active { transform: scale(.96); background: var(--portail-active); } .btn-theme-icon { font-size: .85rem; line-height: 1; } /* ══════════════════════════════════════════════ §6 — BANDEAU DÉFILANT ══════════════════════════════════════════════ */ .m-banner { border-bottom: 1px solid var(--gold); border-top: 1px solid var(--gold); padding: 6px 0; overflow: hidden; background: var(--banner-bg); } .m-banner-scroll { display: inline-block; white-space: nowrap; font-style: italic; font-size: .72rem; color: var(--ink-faded); letter-spacing: .1em; animation: defileMobile 28s linear infinite; } @keyframes defileMobile { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } /* ══════════════════════════════════════════════ §7 — FRONTISPICE ══════════════════════════════════════════════ */ .m-frontispiece { text-align: center; padding: 30px 24px 18px; } .m-ornament-line { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: 1rem; margin-bottom: 14px; } .m-ornament-line::before, .m-ornament-line::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .m-main-title { font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 700; letter-spacing: .18em; color: var(--ink); text-shadow: 1px 2px 0 rgba(255,255,240,.5); line-height: 1; margin-bottom: 12px; transition: color .4s ease; } .m-title-rubric { font-style: italic; font-size: .9rem; color: var(--rubric); letter-spacing: .03em; line-height: 1.55; } /* ══════════════════════════════════════════════ §8 — DEVISE ══════════════════════════════════════════════ */ .m-devise { font-style: italic; font-size: .9rem; color: var(--ink-faded); text-align: center; margin: 14px 24px; padding: 12px 16px; border-top: 1px solid var(--incipit-rule); border-bottom: 1px solid var(--incipit-rule); line-height: 1.65; } /* ══════════════════════════════════════════════ §9 — CORPS DU TEXTE ══════════════════════════════════════════════ */ .m-text { padding: 0 24px; } .m-drop-cap { float: left; font-size: 3.6rem; line-height: .82; color: var(--drop-cap); margin: 4px 7px -4px 0; font-family: 'Cinzel', serif; } .m-incipit { font-size: .94rem; color: var(--ink-faded); line-height: 1.75; text-align: justify; margin-bottom: 16px; } .m-list { list-style: none; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .m-list li { font-size: .92rem; color: var(--ink-faded); line-height: 1.6; padding-left: 18px; position: relative; text-align: justify; } .m-list li::before { content: '◆'; position: absolute; left: 0; top: 6px; font-size: .38rem; color: var(--gold); } /* ══════════════════════════════════════════════ §10 — PANNEAU / BOUTON DE NAVIGATION ══════════════════════════════════════════════ */ .m-portail { margin: 24px 24px 18px; text-align: center; } .m-portail-inner { display: flex; flex-direction: column; align-items: center; border: 2px solid var(--gold); padding: 22px 24px; text-decoration: none; border-radius: 3px; position: relative; background: var(--portail-bg); transition: background .25s, border-color .25s, box-shadow .25s; box-shadow: 0 4px 18px rgba(0,0,0,.1), inset 1px 1px 0 rgba(255,255,255,.5), inset -1px -1px 0 rgba(0,0,0,.1); min-height: 80px; justify-content: center; -webkit-tap-highlight-color: transparent; } .m-portail-inner::before, .m-portail-inner::after { content: '❧'; position: absolute; color: var(--gold); font-size: .95rem; top: 8px; } .m-portail-inner::before { left: 10px; } .m-portail-inner::after { right: 10px; transform: scaleX(-1); } .m-portail-inner:active { transform: scale(.98); background: var(--portail-active); border-color: var(--rubric); } .m-portail-label { font-size: .66rem; letter-spacing: .22em; color: var(--gold); text-transform: uppercase; font-variant: small-caps; margin-bottom: 6px; } .m-portail-link { font-family: 'Cinzel', serif; font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: .05em; line-height: 1.2; margin-bottom: 5px; transition: color .4s ease; } .m-portail-sub { font-style: italic; font-size: .76rem; color: var(--ink-faded); line-height: 1.4; } /* Variante rouge (navigation) */ .m-portail-inner.nav { border-color: rgba(192,57,43,.5); background: rgba(192,57,43,.06); } .m-portail-inner.nav .m-portail-label { color: #c0392b; } .m-portail-inner.nav .m-portail-link { color: #c0392b; } .m-portail-inner.nav:active { background: rgba(192,57,43,.14); } /* Variante bleue (organisation) */ .m-portail-inner.org { border-color: rgba(46,109,164,.5); background: rgba(46,109,164,.06); } .m-portail-inner.org .m-portail-label { color: #2e6da4; } .m-portail-inner.org .m-portail-link { color: #2e6da4; } .m-portail-inner.org:active { background: rgba(46,109,164,.14); } /* ══════════════════════════════════════════════ §11 — SÉPARATEUR FLORAL ══════════════════════════════════════════════ */ .m-floral { text-align: center; color: var(--gold); font-size: .95rem; letter-spacing: .5em; margin: 18px 0; opacity: .6; } /* ══════════════════════════════════════════════ §12 — COLOPHON / PIED ══════════════════════════════════════════════ */ .m-colophon { margin: 0 24px; padding-top: 16px; border-top: 1px solid var(--colophon-rule); text-align: center; } .m-colophon-text { font-style: italic; font-size: .76rem; color: var(--ink-faded); line-height: 1.75; opacity: .8; } .m-colophon-text a { color: var(--rubric); text-decoration: none; border-bottom: 1px dotted rgba(139,26,26,.35); } .m-page-number { font-size: .66rem; color: var(--gold); letter-spacing: .22em; margin-top: 8px; opacity: .65; } /* ══════════════════════════════════════════════ §13 — LIEN VERS VERSION BUREAU ══════════════════════════════════════════════ */ .m-desktop-link { display: block; text-align: center; margin: 22px 24px 0; font-style: italic; font-size: .7rem; color: var(--ink-light); opacity: .45; text-decoration: none; letter-spacing: .06em; -webkit-tap-highlight-color: transparent; } .m-desktop-link:active { opacity: .75; } /* ══════════════════════════════════════════════ §14 — ANIMATIONS D'ENTRÉE ══════════════════════════════════════════════ */ @keyframes m-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes m-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .anim-1 { animation: m-fadeUp .7s ease both; } .anim-2 { animation: m-fadeUp .7s .1s ease both; } .anim-3 { animation: m-fadeIn .9s .25s ease both; } .anim-4 { animation: m-fadeIn .9s .4s ease both; } .anim-5 { animation: m-fadeIn 1s .55s ease both; } /* ══════════════════════════════════════════════ §15 — ORGANIGRAMME (utilisé par m-organigramme.html) ══════════════════════════════════════════════ */ /* En-tête */ .m-org-header { text-align: center; padding: 24px 24px 16px; border-bottom: 1px solid var(--parchment-edg); margin-bottom: 8px; } .m-org-orn { font-size: .68rem; letter-spacing: .5em; color: var(--gold); opacity: .75; margin-bottom: 6px; display: block; } .m-org-title { font-family: 'Cinzel', serif; font-size: 1.1rem; letter-spacing: .1em; color: var(--ink); margin-bottom: 4px; } .m-org-sub { font-style: italic; font-size: .78rem; color: var(--rubric); letter-spacing: .04em; } .m-org-divider { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: .65rem; letter-spacing: .2em; margin: 8px 0 0; } .m-org-divider::before, .m-org-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); } /* Nœud racine */ .m-root { margin: 16px 24px 4px; text-align: center; } .m-root-box { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 14px 20px; background: var(--parchment-mid); border: 1.5px solid var(--parchment-edg); border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.1), inset 1px 1px 0 rgba(255,255,255,.6); position: relative; } .m-root-box::before, .m-root-box::after { content: '❧'; position: absolute; color: var(--gold); font-size: .7rem; top: 5px; } .m-root-box::before { left: 8px; } .m-root-box::after { right: 8px; transform: scaleX(-1); } .m-root-label { font-family: 'Cinzel', serif; font-size: .95rem; color: var(--ink); letter-spacing: .07em; line-height: 1.2; } .m-root-sub { font-style: italic; font-size: .62rem; color: var(--gold); letter-spacing: .05em; margin-top: 3px; } /* Connecteur vertical */ .m-v-conn { width: 1.5px; background: rgba(139,105,20,.4); margin: 0 auto; height: 20px; } /* Panneaux de branches */ .m-branches { display: flex; flex-direction: column; gap: 0; padding: 0 24px; } /* Légende */ .m-legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 24px 0; padding: 10px 14px; border: 1px solid rgba(139,105,20,.2); background: rgba(139,105,20,.03); } .m-legend-item { display: flex; align-items: center; gap: 6px; font-style: italic; font-size: .64rem; color: var(--ink-faded); } .m-ldot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .m-ldot.root { background: var(--parchment-edg); border: 1px solid var(--gold); } .m-ldot.nav { background: #c0392b; opacity: .75; } .m-ldot.rch { background: #b8860b; opacity: .75; } .m-ldot.org { background: #2e6da4; opacity: .75; } /* Note marginale */ .m-marginal { text-align: center; margin: 16px 24px 0; font-style: italic; font-size: .64rem; color: var(--ink-light); opacity: .65; line-height: 1.7; } /* ══════════════════════════════════════════════ §16 — BANDEAU D'AVERTISSEMENT MOBILE ══════════════════════════════════════════════ */ .m-notice { margin: 16px 24px; padding: 12px 16px; border: 1px solid rgba(139,105,20,.3); border-left: 3px solid var(--gold); background: rgba(139,105,20,.05); border-radius: 2px; } .m-notice-text { font-style: italic; font-size: .78rem; color: var(--ink-faded); line-height: 1.65; opacity: .85; } .m-notice-text strong { font-style: normal; color: var(--ink); font-weight: 600; }