/* Theme Name: OIRAPMM — Atelier AB Theme URI: https://oirapmm.fr Author: OIRAPMM Description: Thème officiel O.I.R.A.P.M.M — Grande Loge de France et des Pays Associés. Design initiatique, violet profond et or égyptien. Version: 2.2.0 Requires at least: 6.0 Requires PHP: 8.0 Text Domain: oirapmm */ /* ═══════════════════════════════════════════════════════════════════════════════ STYLE.CSS — SOMMAIRE ─────────────────────────────────────────────────────────────────────────────── [00] TOKENS [01] RESET & BASE [02] UTILITAIRES (Design System) [03] COMPOSANTS (Cards / Buttons / Badges) [04] BACKGROUNDS (Noise / Vignette / Orbs) [05] ANIMATIONS [06] HEADER [07] SIDEBAR (overlay + drawer) [08] LAYOUT (page-wrap) [09] HERO [10] PORTAIL [11] FOOTER [12] SECTIONS / GRIDS / MEDIA [13] PAPER (paper-panel + doc-row) [14] FORMS [15] PORTAIL — classes clean [16] ACCUEIL — additions [17] ALLER PLUS LOIN — additions [18] BIBLIOTHÈQUE [19] SINGLE POST [20] ATELIERS MM [21] SITES AMIS [22] CONTACT [23] PAGES LÉGALES [24] FIXES / RESPONSIVE / SAFETY ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ [00] TOKENS ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Inter — normal ─────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; src: url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2 supports variations'), url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Inter — italic ──────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; src: url('assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2 supports variations'), url('assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ── Playfair Display — normal ───────────────────────────────────────────── */ @font-face { font-family: 'Playfair Display'; src: url('assets/fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2 supports variations'), url('assets/fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } /* ── Playfair Display — italic ───────────────────────────────────────────── */ @font-face { font-family: 'Playfair Display'; src: url('assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2 supports variations'), url('assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; } :root { /* Core palette */ --bg-0: #07060A; --bg-1: #0D0B12; --surface-0: #12101A; --surface-1: #171424; --text-0: #F2F0FF; --text-1: #CFC8F3; --muted: #A59ACB; --violet-0: #2A114A; --violet-1: #5B21B6; --violet-2: #7C3AED; --violet-3: #A855F7; --violet-4: #D8B4FE; --violet-border: rgba(168,85,247,0.22); --violet-border-hover: rgba(168,85,247,0.38); --violet-glow: 0 0 1.625rem rgba(168,85,247,0.14); --violet-glow-subtle: 0 0 .875rem rgba(168,85,247,0.10); --gold-0: #D7B56D; --gold-1: #8B6A22; --gold-2: #F6E2A6; --gold-3: #B8923B; --gold-border: rgba(215,181,109,0.40); --gold-fill: rgba(215,181,109,0.12); --gold-glow: 0 0 1.125rem rgba(215,181,109,0.18); --gold-glow-strong: 0 0 1.5rem rgba(215,181,109,0.28); --gold-gradient: linear-gradient(135deg,#8B6A22 0%,#D7B56D 35%,#F6E2A6 55%,#D7B56D 75%,#8B6A22 100%); --gold-gradient-btn: linear-gradient(135deg,#B8923B 0%,#D7B56D 50%,#B8923B 100%); /* Paper */ --paper-bg: #FAF9F6; --paper-text: #12101A; --paper-text-muted: #5B21B6; --paper-border: rgba(215,181,109,0.25); /* Typography */ --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; /* Layout */ --container-max: 72rem; --gutter: clamp(1rem, 4vw, 3rem); /* Radius */ --radius-sm: .625rem; --radius-md: .875rem; --radius-lg: 1.125rem; --radius: .875rem; /* Shadows */ --shadow-elev-1: 0 .9375rem 2.5rem -.75rem rgba(0,0,0,0.5); --shadow-elev-2: 0 1.25rem 3.125rem -.9375rem rgba(0,0,0,0.6); --btn-primary-shadow: 0 .5rem 1.5rem rgba(215,181,109,0.35), var(--gold-glow); --btn-primary-shadow-hover: 0 .75rem 2rem rgba(215,181,109,0.45), var(--gold-glow-strong); /* Z-index */ --z-bg: 0; --z-content: 1; --z-header: 50; --z-overlay: 80; --z-drawer: 90; --z-loader: 100; /* Spacing scale */ --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 3.5rem; --space-11: 4rem; --space-12: 5rem; /* Type scale */ --fs-xxs: .6875rem; --fs-xs: .75rem; --fs-sm: .875rem; --fs-caption: .8125rem; --fs-md: .9375rem; --fs-base: 1rem; --fs-lg: 1.0625rem; --fs-xl: 1.125rem; --fs-2xl: 1.5rem; --fs-3xl: 1.75rem; --fs-micro: .625rem; --fs-hero: clamp(2rem, 5vw, 3.5rem); /* Line heights */ --lh-tight: 1.15; --lh-ui: 1.6; --lh-normal: 1.7; --lh-relaxed: 1.8; --lh-long: 1.85; /* Page bg */ --page-bg: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%); /* Semantic tokens */ --color-background: var(--bg-0); --color-foreground: var(--text-0); --color-surface: var(--surface-0); --color-card: var(--surface-0); --color-card-foreground: var(--text-0); --color-muted: var(--muted); --color-muted-foreground: var(--text-1); --color-border: var(--violet-border); --color-input: rgba(255,255,255,0.08); --color-primary: var(--gold-0); --color-primary-foreground: var(--bg-0); --color-secondary: rgba(215,181,109,0.12); --color-secondary-foreground: var(--gold-0); --color-accent: var(--gold-0); --color-accent-foreground: var(--bg-0); --color-ring: rgba(215,181,109,0.35); --focus-ring: 0 0 0 .1875rem rgba(215,181,109,0.25); --color-popover: var(--surface-1); --color-popover-foreground: var(--text-0); --color-destructive: #ef4444; --color-destructive-foreground: #ffffff; --color-sidebar: rgba(18,16,26,0.85); --color-sidebar-foreground: var(--text-0); /* Component tokens */ --btn-neutral-bg: var(--surface-0); --btn-neutral-border: var(--violet-border); --btn-neutral-text: var(--text-1); --btn-primary-bg: var(--gold-gradient-btn); --btn-primary-text: var(--bg-0); --btn-secondary-bg: transparent; --btn-secondary-border: var(--gold-border); --btn-secondary-hover-bg: var(--gold-fill); --btn-secondary-text: var(--gold-0); --card-bg: var(--surface-0); --card-bg-hover: rgba(255,255,255,0.06); --component-glass-radius: 1rem; --component-glass-padding: 2.5rem; --component-button-gap: .75rem; --component-button-radius: .5rem; --component-button-padding-y: 1rem; --component-button-padding-x: 2rem; --component-button-font-size: var(--fs-md); --component-button-letter-spacing: .04em; --component-cta-radius: 1rem; --component-cta-padding-y: 3.5rem; --component-cta-padding-x: 3.5rem; --component-doc-row-radius: .75rem; --component-doc-row-padding: 1.125rem; --component-icon-panel-radius: .75rem; --component-panel-radius: 1rem; --component-panel-padding: 3rem; --component-panel-padding-wide: 3.5rem; --component-paper-radius: 1rem; --component-paper-shadow: 0 1.5625rem 5rem -1.25rem rgba(0,0,0,0.5), var(--gold-glow); --component-section-padding-y: 5rem; --component-hero-padding-y: 6rem; --component-hero-title-gap: 1.5rem; --component-hero-lead-max: 38rem; --component-hero-lead-gap: 2.5rem; --component-pill-radius: 9999px; --component-pill-padding-y: .375rem; --component-pill-padding-x: 1rem; --focus-ring-soft: 0 0 0 .1875rem rgba(215,181,109,0.15); --icon-bg: rgba(255,255,255,0.06); --icon-border: rgba(255,255,255,0.10); --icon-color: var(--text-1); --icon-color-hover: var(--text-0); --icon-glow: 0 0 1.125rem rgba(168,85,247,0.18); --link-cta: var(--gold-0); --link-cta-hover: var(--gold-2); --link-read: var(--text-1); --link-read-hover: var(--text-0); } /* ═══════════════════════════════════════════════════════════════════════════════ [01] RESET & BASE ═══════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg-0); color: var(--text-0); scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg-0); color: var(--text-0); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); } a { color: var(--violet-4); text-decoration: none; transition: color .2s; } a:hover { color: var(--text-0); } img, video, svg, iframe { max-width: 100%; height: auto; } img { display: block; } body.page-portail { background: var(--bg-0); color: var(--text-0); position: fixed; inset: 0; overflow: hidden; width: 100%; height: 100%; } body.page-portail .portal-wrap { background: var(--bg-0); } .ui-reset h1, .ui-reset h2, .ui-reset h3, .ui-reset h4, .ui-reset h5, .ui-reset h6 { font-size: inherit; font-weight: inherit; } /* ═══════════════════════════════════════════════════════════════════════════════ [02] UTILITAIRES (Design System) ═══════════════════════════════════════════════════════════════════════════════ */ /* Layout */ .container { width: min(100% - (2 * var(--gutter)), var(--container-max)); margin-inline: auto; padding-inline: 0; } .container--sm { --container-max: 42rem; } .container--md { --container-max: 56rem; } .u-flex { display: flex; } .u-grid { display: grid; } .u-wrap { flex-wrap: wrap; } .u-col { flex-direction: column; } .u-items-center { align-items: center; } .u-justify-center { justify-content: center; } .u-justify-between { justify-content: space-between; } .u-gap-2 { gap: var(--space-2); } .u-gap-3 { gap: var(--space-3); } .u-gap-4 { gap: var(--space-4); } .u-gap-6 { gap: var(--space-6); } .u-gap-7 { gap: var(--space-7); } .u-mb-4 { margin-bottom: var(--space-4); } .u-mb-6 { margin-bottom: var(--space-6); } .u-mb-8 { margin-bottom: var(--space-8); } .u-mb-10 { margin-bottom: var(--space-10); } .u-text-center { text-align: center; } .u-text-left { text-align: left; } .u-w-100 { width: 100%; } .u-max-38 { max-width: 38rem; } .u-max-48 { max-width: 48rem; } .u-max-56 { max-width: 56rem; } /* Type utilities */ .ds-hero-title, .hero-title { font-size: var(--fs-hero); color: var(--text-0); font-weight: 500; line-height: var(--lh-tight); margin-bottom: var(--component-hero-title-gap); } .ds-h2, .section-title { font-size: var(--fs-3xl); color: var(--text-0); } .ds-lead { font-size: var(--fs-xl); line-height: var(--lh-normal); color: var(--text-1); max-width: 38rem; margin-bottom: var(--space-8); } .ds-body { font-size: var(--fs-lg); line-height: var(--lh-long); color: var(--text-1); } .ds-muted { font-size: var(--fs-lg); line-height: var(--lh-long); color: var(--muted); } /* Icon helpers */ .icon-inherit { color: inherit; } .icon-gold { color: var(--gold-0); } .icon-16 { width: 1rem; height: 1rem; } .icon-12 { width: .75rem; height: .75rem; } .icon-48 { width: 3rem; height: 3rem; } .icon-64 { width: 4rem; height: 4rem; } /* Width / height utilities */ .w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; } .w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; } .w-7 { width: 1.75rem; } .h-7 { height: 1.75rem; } .w-8 { width: 2rem; } .h-8 { height: 2rem; } /* Ornaments & separators */ .ornament { color: var(--gold-0); text-shadow: var(--gold-glow); } .gold-line { background: var(--gold-gradient); height: 2px; border-radius: 9999px; } .gold-line--sm { width: 4rem; margin: 0 auto 2rem; } .violet-line { background: linear-gradient(90deg, var(--violet-1), var(--violet-3)); height: 2px; } /* Misc layout helpers */ .page-ambience { position: relative; } .page-content, .page-wrap > main, .page-wrap > .bibl-main, .page-wrap > .article-main, .tmpl-ateliers-mm .mm-hero-inner, .tmpl-sites-amis .bibl-main, .tmpl-contact .contact-main { position: relative; z-index: 1; } .mx-auto { margin-left: auto; margin-right: auto; } .block-center { margin-left: auto; margin-right: auto; width: 100%; text-align: center; } .block-center--md { max-width: 48rem; } .block-center--lg { max-width: 56rem; } .card-center { text-align: center; } .card-mw-48 { max-width: 48rem; } .card-mw-30 { max-width: 30rem; } .lead-mw { max-width: 32rem; } .center-icon { display: flex; justify-content: center; margin-bottom: 1.5rem; } /* Aspect ratios */ .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-4x3 { aspect-ratio: 4 / 3; } /* ═══════════════════════════════════════════════════════════════════════════════ [03] COMPOSANTS (Cards / Buttons / Badges) ═══════════════════════════════════════════════════════════════════════════════ */ /* Glass card */ .glass-card { background: linear-gradient(135deg, rgba(42,17,74,0.25) 0%, rgba(18,16,26,0.85) 100%); backdrop-filter: blur(1.25rem); -webkit-backdrop-filter: blur(1.25rem); border: 1px solid var(--violet-border); border-radius: var(--component-glass-radius); padding: var(--component-glass-padding); box-shadow: var(--shadow-elev-1), var(--violet-glow-subtle); transition: border-color .3s, box-shadow .3s, transform .3s; } .glass-card:hover { border-color: var(--violet-border-hover); box-shadow: var(--shadow-elev-2), var(--violet-glow); transform: translateY(-.125rem); } /* Icon pastille */ .icon-pastille { display: flex; align-items: center; justify-content: center; background: var(--gold-fill); border: 1px solid var(--gold-border); border-radius: var(--component-icon-panel-radius); box-shadow: var(--gold-glow); } .icon-pastille svg { color: var(--gold-0); } /* Buttons */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: var(--component-button-gap); padding: var(--component-button-padding-y) var(--component-button-padding-x); font-size: var(--component-button-font-size); letter-spacing: var(--component-button-letter-spacing); border-radius: var(--component-button-radius); cursor: pointer; text-decoration: none; } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: 600; border: none; box-shadow: var(--btn-primary-shadow); transition: box-shadow .3s, transform .3s; } .btn-primary:hover { color: var(--btn-primary-text); box-shadow: var(--btn-primary-shadow-hover); transform: translateY(-.125rem); } .btn-primary--lg { font-size: 1.125rem; padding: 1.125rem 2.5rem; } .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); font-weight: 500; border: 1px solid var(--btn-secondary-border); transition: background .3s, border-color .3s, transform .2s; } .btn-secondary:hover { color: var(--btn-secondary-text); background: var(--btn-secondary-hover-bg); border-color: var(--gold-0); transform: translateY(-.0625rem); } /* Badge */ .badge-symbolic { background: var(--gold-fill); border: 1px solid var(--gold-border); color: var(--gold-1); font-size: var(--fs-xxs); font-weight: 600; letter-spacing: .05em; padding: .125rem .5rem; border-radius: .25rem; } /* Paper panel */ .bg-paper { background-color: var(--paper-bg); border-radius: var(--component-paper-radius); overflow: hidden; border: 1px solid var(--paper-border); box-shadow: var(--component-paper-shadow); } /* Gold box */ .gold-box { padding: 1.5rem; border-radius: .75rem; background: var(--gold-fill); border: 1px solid var(--gold-border); } /* CTA section */ .cta-section { border-radius: var(--component-cta-radius); padding: var(--component-cta-padding-y) var(--component-cta-padding-x); text-align: center; background: linear-gradient(135deg, var(--gold-fill) 0%, rgba(215,181,109,0.04) 100%); border: 1px solid var(--gold-border); box-shadow: 0 1.25rem 3.75rem -1.25rem rgba(0,0,0,0.4), var(--gold-glow); } .cta-section--compact { padding: 2.5rem; } .cta-lead { font-size: var(--fs-xl); color: var(--text-1); margin-bottom: 1.5rem; } /* ═══════════════════════════════════════════════════════════════════════════════ [04] BACKGROUNDS (Noise / Vignette / Orbs) ═══════════════════════════════════════════════════════════════════════════════ */ .noise-bg { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; } .noise-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%); } .noise-bg::after { content: ''; position: absolute; inset: 0; opacity: .02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .vignette { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; box-shadow: inset 0 0 12.5rem 5rem rgba(0,0,0,0.6); } .orb { position: absolute; border-radius: 9999px; filter: blur(5rem); pointer-events: none; animation: orbPulse 8s ease-in-out infinite; } @keyframes orbPulse { 0%, 100% { opacity: .12; } 50% { opacity: .22; } } .orb--a { width: 24rem; height: 24rem; top: 25%; left: 25%; background: rgba(91,33,182,0.25); animation-duration: 8s; } .orb--b { width: 20rem; height: 20rem; bottom: 25%; right: 25%; background: rgba(42,17,74,0.30); animation-duration: 12s; animation-delay: 2s; } /* Torch / halo souris (desktop only) */ .torch-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s ease; background: radial-gradient( 16.25rem circle at var(--torch-x, 50%) var(--torch-y, 50%), rgba(215,181,109,0.14) 0%, rgba(215,181,109,0.06) 22%, transparent 55% ); mix-blend-mode: screen; } @media (hover: hover) and (pointer: fine) { body.torch-on .torch-overlay { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .torch-overlay { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ [05] ANIMATIONS ═══════════════════════════════════════════════════════════════════════════════ */ .anim-fade { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s ease, transform .8s ease; } .anim-fade.is-visible { opacity: 1; transform: translateY(0); } /* Disable on touch devices */ @media (hover: none) and (pointer: coarse) { .anim-fade { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ [06] HEADER ═══════════════════════════════════════════════════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); height: 4rem; background: rgba(26,22,37,0.7); backdrop-filter: blur(.75rem); -webkit-backdrop-filter: blur(.75rem); border-bottom: 1px solid rgba(255,255,255,0.05); } .site-header .inner { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; gap: 1.5rem; } .header-menu-btn { background: none; border: none; cursor: pointer; color: var(--gold-0); width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem; transition: color .2s, background .2s; flex-shrink: 0; } .header-menu-btn:hover { color: var(--gold-2); background: var(--gold-fill); } .header-logo { display: flex; align-items: center; gap: 1rem; text-decoration: none; min-width: 0; } /* ✅ Correctif anti-déformation */ .header-logo > img { height: 2rem; width: auto; max-width: 15rem; /* ajuste si tu veux limiter la largeur */ object-fit: contain; display: block; flex: 0 0 auto; opacity: .95; filter: drop-shadow(0 .375rem 1.125rem rgba(215,181,109,0.18)); } /* Optionnel : si le texte peut déborder */ .header-logo-text { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--gold-0); letter-spacing: .03em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ═══════════════════════════════════════════════════════════════════════════════ [07] SIDEBAR (overlay + drawer) ═══════════════════════════════════════════════════════════════════════════════ */ .sidebar-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(7,6,10,0.7); opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(.25rem); } .sidebar-overlay.is-open { opacity: 1; pointer-events: auto; } .sidebar-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-drawer); width: 20rem; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%); border-right: 1px solid var(--violet-border); transform: translateX(-100%); transition: transform .35s cubic-bezier(0.4,0,0.2,1); } .sidebar-drawer.is-open { transform: translateX(0); } .sidebar-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; color: var(--muted); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem; transition: color .2s, background .2s; } .sidebar-close:hover { color: var(--text-0); background: rgba(255,255,255,0.05); } .sidebar-header { padding: 2rem 2rem 1.5rem; flex-shrink: 0; } .sidebar-header a { text-decoration: none; } .sidebar-header img, .sidebar-emblem { width: 3.5rem; height: auto; opacity: .9; margin-bottom: 1rem; } .sidebar-header h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: .05em; color: var(--gold-0); text-shadow: var(--gold-glow); line-height: 1.2; } .sidebar-header h2 span { display: block; font-size: 1.125rem; color: var(--text-0); } .sidebar-header p { margin-top: .75rem; font-size: var(--fs-xxs); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); line-height: 1.6; } .sidebar-sep { height: 1px; margin: 0 2rem; background: linear-gradient(to right, transparent, var(--gold-border), transparent); flex-shrink: 0; } .sidebar-nav a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: .75rem; font-size: 1rem; font-weight: 500; color: var(--muted); text-decoration: none; border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav a:hover { background: var(--gold-fill); color: var(--text-0); border-color: transparent; } .sidebar-nav a.active { background: var(--gold-fill); border-color: var(--gold-border); color: var(--text-0); box-shadow: var(--gold-glow); } .sidebar-nav a svg { flex-shrink: 0; color: var(--muted); transition: color .2s; } .sidebar-nav a:hover svg, .sidebar-nav a.active svg { color: var(--gold-0); } .sidebar-nav .nav-sep { height: 1px; margin: .75rem 0; background: linear-gradient(to right, transparent, var(--violet-border), transparent); } .sidebar-footer { padding: 1.5rem; flex-shrink: 0; } .sidebar-footer-links { display: flex; flex-direction: column; gap: .625rem; font-size: .75rem; padding: 0 .5rem; color: var(--muted); } .sidebar-footer-link { color: inherit; text-decoration: none; transition: opacity .2s, color .2s; } .sidebar-footer-link:hover { opacity: .75; color: var(--text-0); } /* ═══════════════════════════════════════════════════════════════════════════════ [08] LAYOUT (page-wrap) ═══════════════════════════════════════════════════════════════════════════════ */ .page-wrap { padding-top: 4rem; min-height: 100vh; position: relative; } .page-wrap .noise-bg, .page-wrap .vignette { z-index: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ [09] HERO ═══════════════════════════════════════════════════════════════════════════════ */ /* HERO sous le header fixed (supprime la bande noire au-dessus) */ .page-wrap > main > .hero:first-child, .page-wrap > .bibl-main > .hero:first-child, .page-wrap > .mm-page > .hero:first-child{ margin-top: -4rem; /* annule le padding-top de .page-wrap */ padding-top: 4rem; /* garde le contenu sous le header */ } /* À ajouter dans [09] HERO si pas déjà présent (pour hero en plein écran) */ .hero-media{position:absolute;inset:0;z-index:0} .hero-media picture,.hero-media img{width:100%;height:100%;display:block} .hero-media img{object-fit:cover;object-position:center} .hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 70vh; } .hero-bg, .hero-media { pointer-events: none; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .hero-bg--cssvar, .hero-bg--pattern { background-image: var(--hero-bg); } /* Hero bg piloté par data-hero-bg (zéro inline) */ .hero[data-hero-bg] { --hero-bg: url(""); } .hero-bg--pattern { background-repeat: repeat; background-position: top left; background-size: var(--pattern-size, 1000px); opacity: var(--pattern-opacity, 1); } .hero-overlay-l { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, var(--bg-0) 0%, rgba(7,6,10,0.75) 50%, transparent 100%); } .hero-overlay-b { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--bg-0) 0%, transparent 50%, rgba(7,6,10,0.5) 100%); } .hero-content { position: relative; z-index: 2; padding: var(--component-hero-padding-y) 0; } .hero-title-em { font-style: italic; } .hero-lead { font-size: var(--fs-xl); line-height: 1.7; color: var(--text-1); max-width: var(--component-hero-lead-max); margin-bottom: var(--component-hero-lead-gap); } .hero-actions, .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; } .hero-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: var(--fs-md); color: var(--text-1); margin-bottom: 2.5rem; } .hero-stat, .stat-item { display: inline-flex; align-items: center; gap: .5rem; } /* ═══════════════════════════════════════════════════════════════════════════════ [10] PORTAIL ═══════════════════════════════════════════════════════════════════════════════ */ /* Fond portail en plein écran */ .portal-bg { position:absolute; inset:0; } .portal-bg-img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.05); will-change:transform; } .portal-wrap { position: fixed; inset: 0; overflow: hidden; perspective: 62.5rem; background: var(--bg-0); } .portal-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); transform-origin: center; will-change: transform; filter: hue-rotate(-30deg) saturate(0.7); transition: transform .7s ease-out; } .portal-ol1 { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(7,6,10,0.85) 0%, rgba(7,6,10,0.5) 50%, rgba(7,6,10,0.9) 100%); } .portal-ol2 { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(7,6,10,0.75) 0%, transparent 50%, rgba(7,6,10,0.75) 100%); } .portal-radial { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .3; transition: background 2s ease-out; } .portal-noise { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .portal-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 12.5rem 3.125rem rgba(0,0,0,0.8); } .portal-content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; } .portal-header { text-align: center; margin-bottom: 1.5rem; max-width: 64rem; } .portal-title { max-width: 52rem; margin: 0 auto .5rem; font-size: clamp(1.1rem, 2.6vw, 1.75rem); line-height: 1.3; color: var(--text-0); text-shadow: 0 .125rem 1.25rem rgba(0,0,0,0.4); font-weight: 500; text-wrap: balance; } .portal-subtitle { font-size: clamp(1.625rem, 4vw, 2.75rem); color: var(--text-0); line-height: 1.15; margin-bottom: .75rem; } .portal-subtitle em { color: var(--gold-0); font-style: italic; } .portal-hint { font-size: var(--fs-xl); font-weight: 700; color: var(--muted); letter-spacing: .05em; } .portal-cards { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; max-width: 68rem; margin-top: 2rem; } @media (min-width: 768px) { .portal-cards { flex-direction: row; gap: 2rem; } } .portal-card { flex: 1; position: relative; min-height: 12rem; padding: 2rem; border-radius: var(--component-paper-radius); cursor: pointer; backdrop-filter: blur(.75rem); -webkit-backdrop-filter: blur(.75rem); transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease, opacity .3s; user-select: none; } .portal-card--gold { background: linear-gradient(135deg, rgba(215,181,109,0.08) 0%, rgba(215,181,109,0.02) 100%); border: 1px solid rgba(215,181,109,0.18); box-shadow: var(--shadow-elev-1), inset 0 1px 0 rgba(255,255,255,0.05); } .portal-card--gold:hover { border-color: var(--gold-border); box-shadow: 0 1.5625rem 3.75rem -.75rem rgba(0,0,0,0.7), var(--gold-glow), inset 0 .0625rem 0 rgba(255,255,255,0.08); transform: translateY(-.375rem); } .portal-card--dark { background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid var(--violet-border); box-shadow: var(--shadow-elev-1), inset 0 1px 0 rgba(255,255,255,0.05); } .portal-card--dark:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 1.5625rem 3.75rem -.75rem rgba(0,0,0,0.7), var(--violet-glow), inset 0 .0625rem 0 rgba(255,255,255,0.08); transform: translateY(-.375rem); } .portal-card-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; } .portal-card-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .portal-card h3 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-family: var(--font-serif); margin-bottom: .75rem; transition: color .3s; } .portal-card p { font-size: 1rem; line-height: 1.6; color: var(--text-1); max-width: 18rem; } .portal-card--dark p { color: var(--muted); } .portal-card-title { margin: 0 0 .75rem 0; } .portal-card-title--light { color: var(--text-0); } .portal-card-title--muted { color: var(--text-1); } .portal-badge { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: var(--fs-xxs); letter-spacing: .2em; text-transform: uppercase; } .portal-badge--gold { color: var(--gold-0); } .portal-badge--muted { color: var(--muted); } .portal-badge-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--gold-0); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .portal-card-btn { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem; font-size: var(--fs-caption); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border-radius: .375rem; border: none; cursor: pointer; transition: gap .3s; } .portal-card:hover .portal-card-btn { gap: 1rem; } .portal-btn-dark { background: var(--surface-0); border-color: var(--violet-border); color: var(--text-1); } .portal-fade { opacity: 0; transform: translateY(1.5rem); transition: opacity 1s ease, transform 1s ease; } .portal-fade.is-visible { opacity: 1; transform: translateY(0); } .portal-fade--delay { transition-delay: .4s; } /* Portal loader */ .portal-loader { position: fixed; inset: 0; z-index: var(--z-loader); display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%); animation: fadeIn .3s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .portal-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .portal-loader-icon, .success-icon { background: var(--gold-fill); border: 1px solid var(--gold-border); border-radius: var(--component-icon-panel-radius); display: flex; align-items: center; justify-content: center; box-shadow: var(--gold-glow); } .portal-loader-icon { width: 5rem; height: 5rem; } .portal-loader-emblem { width: 2.75rem; height: auto; opacity: .95; filter: drop-shadow(0 .375rem 1.125rem rgba(215,181,109,0.18)); } .portal-loader-text { font-family: var(--font-serif); font-size: var(--fs-sm); letter-spacing: .15em; text-transform: uppercase; color: var(--text-1); } .portal-loader-bar { width: 8rem; height: 2px; background: rgba(215,181,109,0.15); border-radius: 9999px; overflow: hidden; } .portal-loader-progress { height: 100%; width: 40%; background: var(--gold-gradient); animation: progress 1s ease-in-out infinite; } @keyframes progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* ═══════════════════════════════════════════════════════════════════════════════ [11] FOOTER ═══════════════════════════════════════════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--violet-border); padding: 4rem 0; margin-top: 5rem; position: relative; z-index: 5; } .site-footer__brand h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: .05em; color: var(--gold-0); text-shadow: var(--gold-glow); margin-bottom: .5rem; } .site-footer__brand p { font-size: var(--fs-caption); color: var(--text-1); line-height: var(--lh-normal); } .site-footer__nav h4 { font-size: var(--fs-xxs); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-0); font-family: inherit; margin-bottom: 1.25rem; } .site-footer__nav nav { display: flex; flex-direction: column; gap: .625rem; } .site-footer__nav a { font-size: var(--fs-sm); color: var(--text-1); transition: color .2s; } .site-footer__nav a:hover { color: var(--gold-0); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--violet-border); font-size: var(--fs-xs); color: var(--muted); } .site-footer__credit { font-size: var(--fs-xs); color: var(--muted); } .site-footer__credit-link { color: var(--muted); text-decoration: none; border-bottom: 1px dotted currentColor; transition: color .2s, border-color .2s; } .site-footer__credit-link:hover { color: var(--gold-0); border-color: var(--gold-0); } .site-footer__brand-title { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; } .site-footer__brand-title h3 { margin-bottom: 0; } .site-footer__emblem { width: 2rem; height: auto; opacity: .85; flex-shrink: 0; } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; align-items: start; } /* ═══════════════════════════════════════════════════════════════════════════════ [12] SECTIONS / GRIDS / MEDIA ═══════════════════════════════════════════════════════════════════════════════ */ .section { padding: var(--component-section-padding-y) 0; position: relative; } .section--no-top { padding-top: 0; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .grid-2--equal { align-items: stretch; } .grid-2--equal > .gold-box { height: 100%; display: flex; flex-direction: column; min-height: 12rem; } .grid-2--equal > .gold-box .h3-serif { margin: 0 0 1rem 0; line-height: 1.2; } .grid-2--equal > .gold-box p { margin: 0; line-height: 1.7; } .img-card { border-radius: 1rem; overflow: hidden; box-shadow: 0 1.25rem 3.125rem -.9375rem rgba(0,0,0,0.5), var(--violet-glow-subtle); border: 1px solid var(--violet-border); } .img-card img, .img-card > img { width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(-20deg) saturate(0.8); } /* Section buttons row */ .btn-row--center { justify-content: center; } .btn-row--mt { margin-top: 2rem; } /* Section headings */ .section-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .section-head--spaced { margin-bottom: 2rem; } .section-title--center { text-align: center; } .section-title--mb { margin-bottom: 1.5rem; } .section-title--mb-sm { margin-bottom: .5rem; } /* Text helpers */ .p-lg { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-1); } .p-muted { color: var(--muted); } .p-sm { font-size: var(--fs-md); line-height: var(--lh-relaxed); } .p-italic { font-style: italic; } .text-gold { color: var(--gold-0); } .text-strong { font-weight: 600; } .p-mb { margin-bottom: 1rem; } .p-mb-md { margin-bottom: 1.25rem; } .p-mb-lg { margin-bottom: 2rem; } .p-mb-xl { margin-bottom: 2.5rem; } .eyebrow { font-size: var(--fs-xxs); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.5rem; } .h3-serif { font-size: 1.25rem; color: var(--text-0); font-family: var(--font-serif); } .h3-mb { margin-bottom: 1rem; } /* Stat row */ .stat-row { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .9375rem; color: var(--text-1); margin-bottom: 2.5rem; } /* Orbs for specific pages */ .orb--ap-a { width: 24rem; height: 24rem; top: 33%; right: 25%; background: rgba(91,33,182,0.20); animation-duration: 10s; } .orb--ap-b { width: 20rem; height: 20rem; bottom: 33%; left: 25%; background: rgba(42,17,74,0.25); animation-duration: 14s; animation-delay: 3s; } /* ═══════════════════════════════════════════════════════════════════════════════ [13] PAPER PANEL (Bibliothèque / Articles) ⚠ GLOBAL — ZONE SENSIBLE ═══════════════════════════════════════════════════════════════════════════════ */ .paper-panel { background: var(--paper-bg); border-radius: var(--component-panel-radius); overflow: hidden; border: 1px solid var(--paper-border); box-shadow: var(--component-paper-shadow); padding: var(--component-panel-padding); } /* Garantit que l'attribut [hidden] masque bien les éléments même avec display: grid */ .doc-row[hidden] { display: none !important; } @media (min-width: 768px) { .paper-panel { padding: var(--component-panel-padding-wide); } } /* Search */ .paper-search { position: relative; margin-bottom: 2rem; } .paper-search input { width: 100%; height: 3.5rem; padding: 0 1rem 0 3rem; border-radius: .75rem; background: #fff; border: 1px solid var(--gold-border); color: var(--paper-text); font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; } .paper-search input:focus, .form-input:focus, .form-textarea:focus { border-color: var(--gold-0); box-shadow: var(--focus-ring-soft); } .paper-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gold-3); } /* Category pills */ .paper-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; } .paper-cat { padding: var(--component-pill-padding-y) var(--component-pill-padding-x); border-radius: var(--component-pill-radius); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; background: var(--gold-fill); color: var(--gold-1); border: 0; box-shadow: none; transform: none; text-transform: none; letter-spacing: normal; transition: background .2s, color .2s, box-shadow .2s; } .paper-cat:hover, .paper-cat:focus-visible { background: rgba(215,181,109,0.16); } .paper-cat.is-active, .paper-cat[aria-selected="true"], .paper-cat[aria-checked="true"] { background: var(--gold-gradient-btn); color: var(--bg-0); box-shadow: 0 4px 12px rgba(215,181,109,0.3); } /* Doc row ⚠ GLOBAL */ .doc-row { display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: 1rem; padding: var(--component-doc-row-padding); border-radius: var(--component-doc-row-radius); background: #fff; border: 1px solid var(--gold-border); margin-bottom: .625rem; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; } .doc-row:hover { background: #FDF9F0; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transform: translateX(2px); } .doc-row-icon { width: 2.75rem; height: 2.75rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; background: var(--gold-fill); flex-shrink: 0; } .doc-row-icon svg { color: var(--gold-0); } .doc-row-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; } .doc-row-cat { display: inline-flex; align-self: flex-start; } .doc-row-title { font-weight: 600; color: var(--paper-text); font-size: var(--fs-md); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-row-meta { display: flex; align-items: center; gap: .625rem; font-size: var(--fs-xs); color: var(--paper-text-muted); } .doc-row-sub { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .doc-row-rt { display: inline-flex; align-items: center; gap: .45rem; color: var(--paper-text-muted); font-size: var(--fs-md); font-weight: 500; line-height: 1; } .doc-row-rt-ico { width: 1rem; height: 1rem; color: currentColor; flex: 0 0 auto; } .doc-row-rt-txt { display: inline-block; color: currentColor; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em; } .doc-row-cta { justify-self: end; flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: var(--gold-gradient-btn); color: var(--bg-0); border-radius: .5rem; font-size: var(--fs-caption); font-weight: 600; opacity: 0; transform: translateX(-.25rem); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .doc-row:hover .doc-row-cta { opacity: 1; transform: translateX(0); pointer-events: auto; } .paper-empty { text-align: center; padding: 4rem 1rem; color: var(--paper-text-muted); } .bibl-list { display: grid; gap: .625rem; } .doc-row-date { color: currentColor; } /* Accessibilité clavier */ .doc-row:focus-visible .doc-row-cta, .doc-row:focus-within .doc-row-cta { opacity: 1; } /* CTA tactile */ @media (hover: none) and (pointer: coarse) { .doc-row-cta { opacity: .9; transform: none; background: transparent; border: 0; padding: 0; color: var(--gold-1); gap: .5rem; pointer-events: none; } .doc-row-cta svg { opacity: .9; } } /* Mobile */ @media (max-width: 767px) { .doc-row { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "icon body" "cta cta"; align-items: start; } .doc-row-icon { grid-area: icon; } .doc-row-body { grid-area: body; } .doc-row-cta { grid-area: cta; justify-self: start; margin-top: .75rem; } } /* Tablette */ @media (min-width: 768px) and (max-width: 1024px) { .bibl-panel .doc-row { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; } .bibl-panel .doc-row-cta { justify-self: end; align-self: center; } } /* Fix Gutenberg headings */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-size: revert !important; font-weight: revert !important; line-height: revert !important; font-family: var(--font-serif) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ [14] FORMS ═══════════════════════════════════════════════════════════════════════════════ */ .form-field { margin-bottom: 1.5rem; } .form-field label { display: block; margin-bottom: .5rem; font-size: var(--fs-md); font-weight: 500; color: var(--text-1); } .form-field .required { color: var(--gold-0); } .form-input { width: 100%; height: 3.5rem; padding: 0 1rem; border-radius: .5rem; background: var(--surface-0); border: 1px solid var(--violet-border); color: var(--text-0); font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; } .form-input--icon { padding-left: 3.25rem; } .form-input-wrap { position: relative; } .form-input-wrap svg { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); color: var(--gold-0); pointer-events: none; } .form-textarea { width: 100%; min-height: 11rem; padding: 1rem; border-radius: .5rem; background: var(--surface-0); border: 1px solid var(--violet-border); color: var(--text-0); font-size: 1rem; resize: vertical; outline: none; transition: border-color .2s, box-shadow .2s; font-family: inherit; line-height: var(--lh-normal); } .form-hint { font-size: var(--fs-caption); color: var(--muted); margin-top: 1.5rem; } .success-box { text-align: center; padding: 3.5rem 2rem; } .success-icon { width: 5rem; height: 5rem; margin: 0 auto 2rem; } .success-icon svg { color: var(--gold-0); } /* ═══════════════════════════════════════════════════════════════════════════════ [15] PORTAIL — classes clean (section vide — styles intégrés dans [10]) ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ [16] ACCUEIL — additions (section vide — styles intégrés dans [02], [03], [09], [12]) ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ [17] ALLER PLUS LOIN — additions ═══════════════════════════════════════════════════════════════════════════════ */ /* ALLER PLUS LOIN — HERO en motif repeat (background) */ .tmpl-aller-plus-loin .hero--ap.hero--ap-pattern .hero-bg--pattern{ background-position: var(--pattern-x, 420px) var(--pattern-y, 120px); } /* Réglages par défaut (tu ajustes dans l’inspecteur) */ .tmpl-aller-plus-loin .hero--ap.hero--ap-pattern{ --pattern-size: 500px; --pattern-x: 420px; --pattern-y: 120px; --pattern-opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════════ [18] BIBLIOTHÈQUE ⚠ ZONE SENSIBLE ═══════════════════════════════════════════════════════════════════════════════ */ .tmpl-bibliotheque { --bibl-main-padding-top: 3.5rem; --bibl-main-padding-bottom: 5rem; --bibl-panel-margin-top: 1.25rem; --bibl-header-margin-bottom: 2rem; --bibl-count-margin-top: 1.25rem; --bibl-filters-gap: .5rem; --bibl-filters-margin-bottom: 2.5rem; --bibl-filters-max-width: 56rem; --bibl-cta-margin-top: 3rem; --bibl-cta-card-padding-y: 3rem; --bibl-cta-card-padding-x: 2.5rem; --bibl-cta-title-size: 1.5rem; --bibl-cta-title-margin-bottom: .75rem; --bibl-cta-text-margin-bottom: 2rem; --bibl-cta-text-max-width: 42rem; --bibl-cta-button-offset-top: .25rem; } /* Layout */ .tmpl-bibliotheque .bibl-panel.paper-panel, .tmpl-sites-amis .bibl-panel.paper-panel { position: relative; z-index: 2; } .bibl-main { padding-top: 2rem; } .tmpl-bibliotheque .bibl-main { padding: var(--bibl-main-padding-top) 0 var(--bibl-main-padding-bottom); } .bibl-panel { margin-top: var(--bibl-panel-margin-top, 1.25rem); } /* ========================================================================== BIBLIOTHÈQUE — HERO (même système global, zéro inline) Scope : .tmpl-bibliotheque ========================================================================== */ /* Header */ .bibl-header { margin-bottom: var(--bibl-header-margin-bottom, 1.75rem); text-align: center; } .bibl-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--bibl-title-size, clamp(1.75rem, 3.2vw, 2.25rem)); line-height: var(--bibl-title-line-height, 1.15); color: var(--bibl-title-color, var(--paper-text)); letter-spacing: var(--bibl-title-letter-spacing, 0); margin: 0 0 var(--bibl-title-margin-bottom, .75rem) 0; } .bibl-subtitle { max-width: var(--bibl-subtitle-max-width, 42rem); margin: var(--bibl-subtitle-margin, 0 auto); font-size: 1rem; line-height: var(--bibl-subtitle-line-height, 1.7); color: var(--bibl-subtitle-color, var(--paper-text-muted)); } .bibl-count { margin-top: var(--bibl-count-margin-top, 1.25rem); font-size: .875rem; color: var(--bibl-count-color, rgba(18,16,26,.65)); } /* Filters */ .bibl-cats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--bibl-filters-gap, .5rem); margin-left: auto; margin-right: auto; margin-bottom: var(--bibl-filters-margin-bottom, 2.5rem); width: 100%; max-width: var(--bibl-filters-max-width, 56rem); } /* Doc-row scoped (bibliothèque) */ .bibl-panel .doc-row-body { min-width: 0; } .bibl-panel .doc-row-title { margin: 0; width: 100%; font-weight: 600; line-height: 1.2; } .bibl-panel .doc-row-sub { margin-top: .5rem; } /* Reading time */ .tmpl-bibliotheque .doc-row-rt-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; color: var(--gold-0); } .tmpl-bibliotheque .doc-row-rt-ico svg { display: block; width: 1rem; height: 1rem; color: currentColor; } .tmpl-bibliotheque .doc-row-rt-txt { color: var(--paper-text-muted); transform: translateY(.5px); } /* CTA bas de page */ .bibl-cta { margin-top: var(--bibl-cta-margin-top, 3rem); } .bibl-cta-card { padding: var(--bibl-cta-card-padding-y, 3rem) var(--bibl-cta-card-padding-x, 2.5rem); border-radius: 1rem; background: linear-gradient(135deg, var(--gold-fill) 0%, rgba(215,181,109,0.04) 100%); border: 1px solid var(--gold-border); box-shadow: 0 20px 60px -20px rgba(0,0,0,0.25), var(--gold-glow); text-align: center; } .bibl-cta-card .btn-primary { margin-top: var(--bibl-cta-button-offset-top, .25rem); } .bibl-cta-title { font-family: var(--font-serif); font-size: var(--bibl-cta-title-size, 1.5rem); line-height: 1.2; color: var(--text-0); margin: 0 0 var(--bibl-cta-title-margin-bottom, .75rem) 0; } .bibl-cta-text { max-width: var(--bibl-cta-text-max-width, 42rem); margin: 0 auto var(--bibl-cta-text-margin-bottom, 2rem); color: var(--text-1); line-height: 1.75; } /* Archives : pagination */ body.category nav.article-pages a.page-numbers { color: var(--paper-text); text-decoration: none; } body.category nav.article-pages a.page-numbers:hover { color: var(--paper-text); opacity: .82; } body.category nav.article-pages .page-numbers.current { color: var(--paper-text); font-weight: 700; } body.category nav.article-pages a.page-numbers.prev, body.category nav.article-pages a.page-numbers.next { color: var(--paper-text); opacity: .72; } body.category nav.article-pages a.page-numbers.prev:hover, body.category nav.article-pages a.page-numbers.next:hover { opacity: .9; } body.category nav.article-pages a.page-numbers:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(18,16,26,.12); border-radius: .4rem; } /* Mobile doc-row (bibliothèque) */ @media (max-width: 767px) { .tmpl-bibliotheque { --bibl-filters-gap: 1rem; --bibl-filters-margin-bottom: 2rem; --bibl-filters-max-width: 100%; --bibl-cta-margin-top: 2.25rem; --bibl-cta-card-padding-y: 2.25rem; --bibl-cta-card-padding-x: 1.5rem; --bibl-cta-title-size: 1.375rem; --bibl-cta-text-margin-bottom: 1.5rem; } .bibl-panel .doc-row { display: grid !important; grid-template-columns: 2.75rem minmax(0, 1fr) !important; grid-template-areas: "icon body" "icon cta" !important; column-gap: .9rem !important; row-gap: .55rem !important; align-items: start !important; } .bibl-panel .doc-row-icon { grid-area: icon !important; width: 2.75rem !important; height: 2.75rem !important; } .bibl-panel .doc-row-body { grid-area: body !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: .35rem !important; } .bibl-panel .doc-row-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; line-height: 1.25 !important; } .bibl-panel .doc-row-cta { grid-area: cta !important; justify-self: start !important; align-self: start !important; opacity: 1 !important; visibility: visible !important; display: inline-flex !important; align-items: center !important; gap: .5rem !important; background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; color: var(--gold-1) !important; font-weight: 600 !important; font-size: .875rem !important; letter-spacing: .01em !important; transform: none !important; pointer-events: none !important; } .bibl-panel .doc-row-cta svg { width: 1rem !important; height: 1rem !important; opacity: .9 !important; } .tmpl-bibliotheque .doc-row { padding: 1.1rem; gap: .95rem; } .tmpl-bibliotheque .doc-row-body { gap: .55rem; } .tmpl-bibliotheque .doc-row-cat { margin-bottom: .15rem; padding: .4rem .45rem; } .tmpl-bibliotheque .doc-row-title { line-height: 1.22; margin-top: 0; } .tmpl-bibliotheque .doc-row-cta { margin-top: .1rem; align-self: flex-start; padding-top: .1rem; } .tmpl-bibliotheque .doc-row-left { align-items: flex-start; } .tmpl-bibliotheque .doc-row-icon { margin-top: .15rem; } } /* iPad doc-row */ @media (min-width: 48rem) and (max-width: 64rem) { body.tmpl-bibliotheque .paper-panel.bibl-panel a.doc-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: .75rem; } body.tmpl-bibliotheque .paper-panel.bibl-panel a.doc-row .doc-row-icon { flex: 0 0 auto; width: 2.75rem; margin-top: .125rem; } body.tmpl-bibliotheque .paper-panel.bibl-panel a.doc-row .doc-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .375rem; } body.tmpl-bibliotheque .paper-panel.bibl-panel a.doc-row .doc-row-cat { align-self: flex-start; } body.tmpl-bibliotheque .paper-panel.bibl-panel a.doc-row .doc-row-title { width: 100%; text-align: left; margin: 0; } body.tmpl-bibliotheque .paper-panel.bibl-panel a.doc-row .doc-row-cta { margin-left: auto; align-self: center; } } /* ═══════════════════════════════════════════════════════════════════════════════ [19] SINGLE POST ⚠ ZONE SENSIBLE ═══════════════════════════════════════════════════════════════════════════════ */ .single-post .article-main { position: relative; z-index: 1; padding: 2.75rem 0 4.5rem; } .single-post .article-panel { padding: clamp(1.5rem, 2.6vw, 3rem); } /* Header */ .single-post .article-header { margin-bottom: 1.75rem; } .single-post .article-back { display: inline-flex; align-items: center; gap: .625rem; margin-bottom: 1rem; font-size: var(--fs-sm); color: var(--paper-text-muted); text-decoration: none; transition: opacity .2s ease, transform .2s ease; } .single-post .article-back svg { width: 1.1rem; height: 1.1rem; color: var(--paper-text-muted); } .single-post .article-back:hover { opacity: .9; transform: translateX(-1px); } .single-post .article-title { margin: 0 0 1rem 0; font-family: var(--font-serif); font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1.08; color: var(--paper-text); } /* Meta row */ .single-post .article-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; } .single-post .article-meta-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; position: relative; list-style: none; } .single-post .article-meta-inline::before, .single-post .article-meta-inline::after { content: none !important; } .single-post .article-meta-inline, .single-post .article-meta-inline * { list-style: none !important; } .single-post .article-meta-item { display: inline-flex; align-items: center; gap: .45rem; line-height: 1; min-height: 1.25rem; overflow: visible; } .single-post .article-meta-item::before, .single-post .article-meta-item::after { content: none !important; } .single-post .article-meta-ico { color: rgba(18,16,26,.65); display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; overflow: visible; } .single-post .article-meta-ico svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; } .single-post .article-meta-ico--gold { color: var(--gold-0); } .single-post .article-meta-item--rt svg { color: var(--gold-0); } .single-post .article-meta-txt { font-size: .9375rem; color: rgba(18,16,26,.72); } .single-post .article-meta-txt--rt { font-size: var(--fs-caption); color: var(--paper-text-muted); } .single-post .article-meta-sep { color: rgba(18,16,26,.35); } .single-post .article-date { font-size: var(--fs-sm); color: var(--paper-text-muted); } .single-post .article-meta-cat { display: inline-flex; align-items: center; height: 1.9rem; padding: 0 .65rem; border-radius: .45rem; border: 1px solid rgba(215,181,109,.45); background: rgba(215,181,109,.12); color: rgba(18,16,26,.82); font-size: var(--fs-caption); font-weight: 600; text-decoration: none; } .single-post .article-meta-cat:hover { background: rgba(215,181,109,.18); } .article-meta-rule { width: 100%; height: 1px; background: var(--paper-border); margin: 1.25rem 0; } /* Actions */ .single-post .article-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; } .single-post .article-action, .article-action-btn { width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 0; background: rgba(18,16,26,0.06); color: rgba(18,16,26,.55); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s, transform .2s; position: relative; } .single-post .article-action:hover, .article-action-btn:hover { background: rgba(215,181,109,0.12); color: var(--gold-1); transform: translateY(-1px); } .single-post .article-action:active, .article-action-btn:active { transform: translateY(0); } .single-post .article-action svg, .article-action-ico { width: 1rem; height: 1rem; display: block; } .single-post .article-action.is-copied, .article-action-btn.is-copied { background: rgba(215,181,109,0.16); color: var(--gold-1); } /* Toast */ .article-action-toast { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: .6rem; padding: .3rem .55rem; border-radius: .5rem; background: rgba(18,16,26,0.92); color: #fff; font-size: .75rem; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; white-space: nowrap; } .article-action-btn.is-copied .article-action-toast { opacity: 1; transform: translateY(-50%) translateX(-2px); } /* Content */ .single-post .entry-content { color: var(--paper-text); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; } .single-post .entry-content > :first-child { margin-top: 0; } .single-post .entry-content > * { margin: 0; } .single-post .entry-content > * + * { margin-top: 1rem; } .single-post .entry-content h2, .single-post .entry-content h3, .single-post .entry-content h4 { font-family: var(--font-serif); color: var(--paper-text); line-height: 1.18; margin-top: 1.75rem; } .single-post .entry-content h2 { font-size: 1.65rem; } .single-post .entry-content h3 { font-size: 1.25rem; } .single-post .entry-content h4 { font-size: 1.08rem; } .single-post .entry-content p { color: var(--paper-text); text-align: justify; text-justify: inter-word; hyphens: auto; } .single-post .entry-content a { color: var(--paper-text-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease, opacity .2s ease; } .single-post .entry-content a:hover { color: var(--gold-1); opacity: .95; } .single-post .entry-content ul, .single-post .entry-content ol { padding-left: 1.25rem; } .single-post .entry-content ol { list-style-type: upper-roman; } .single-post .entry-content li + li { margin-top: .4rem; } .single-post .entry-content blockquote { margin-top: 1.25rem; padding: 1.1rem 1.1rem 1.1rem 1.35rem; border-left: 3px solid var(--gold-border); background: rgba(215,181,109,0.08); color: var(--paper-text); border-radius: .75rem; } .single-post .entry-content blockquote p { color: var(--paper-text); } .single-post .entry-content hr { border: 0; height: 1px; background: var(--paper-border); margin: 1.75rem 0; } .single-post .entry-content figure { margin-top: 1.25rem; } .single-post .entry-content img { border-radius: var(--component-paper-radius); border: 1px solid var(--paper-border); box-shadow: 0 1.125rem 2.8125rem -1.75rem rgba(0,0,0,.25); } .single-post .entry-content figcaption { margin-top: .5rem; font-size: var(--fs-sm); color: var(--paper-text-muted); } .single-post .entry-content table { width: 100%; border-collapse: collapse; border: 1px solid var(--paper-border); border-radius: .75rem; overflow: hidden; } .single-post .entry-content th, .single-post .entry-content td { padding: .75rem .9rem; border-bottom: 1px solid var(--paper-border); text-align: left; vertical-align: top; } .single-post .entry-content th { background: rgba(215,181,109,0.08); color: var(--paper-text); font-weight: 700; } .single-post .entry-content tr:last-child td { border-bottom: 0; } /* Footer + nav + pagination */ .single-post .article-footer { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--paper-border); } .single-post .article-related { margin-top: 1.5rem; padding-top: 0; border-top: 0; } .single-post .article-nav { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--paper-border); display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 768px) { .single-post .article-nav { grid-template-columns: 1fr 1fr; gap: 1rem; } } .single-post .article-nav a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-radius: .6rem; border: 1px solid var(--paper-border); background: rgba(18,16,26,0.03); color: var(--paper-text); text-decoration: none; transition: background .2s ease, transform .2s ease; } .single-post .article-nav a:hover { background: rgba(215,181,109,0.06); transform: translateY(-1px); } /* Tags */ .single-post .article-tags { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.25rem; } .single-post .article-tags-label { font-size: var(--fs-sm); color: var(--paper-text-muted); } .single-post .article-tags-list { display: flex; flex-wrap: wrap; gap: .5rem; } .single-post .article-tag { display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 9999px; border: 1px solid var(--paper-border); background: rgba(215,181,109,0.06); color: var(--paper-text); font-size: var(--fs-caption); text-decoration: none; transition: background .2s ease, transform .2s ease; } .single-post .article-tag:hover { background: rgba(215,181,109,0.10); transform: translateY(-1px); } /* Pagination intra-article */ .single-post .article-pages { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; } .single-post .article-pages a, .single-post .article-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .75rem; border-radius: .5rem; border: 1px solid var(--paper-border); background: rgba(215,181,109,0.06); color: var(--paper-text); font-size: var(--fs-sm); text-decoration: none; } .single-post .article-pages span { background: rgba(215,181,109,0.12); font-weight: 700; } /* Related articles */ .single-post .article-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .single-post .article-related-title { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; color: var(--paper-text); } .single-post .article-related-more { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--paper-text-muted); text-decoration: none; } .single-post .article-related-more:hover { color: var(--gold-1); } .single-post .article-related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; } @media (min-width: 768px) { .single-post .article-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } @media (min-width: 1024px) { .single-post .article-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .single-post .article-related-card { height: 100%; display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.1rem; border-radius: .85rem; border: 1px solid var(--paper-border); background: rgba(215,181,109,0.05); text-decoration: none; color: var(--paper-text); transition: transform .2s ease, background .2s ease, border-color .2s ease; } .single-post .article-related-card:hover { transform: translateY(-2px); background: rgba(215,181,109,0.08); border-color: rgba(215,181,109,0.32); } .single-post .article-related-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .single-post .article-related-date { font-size: var(--fs-caption); color: var(--paper-text-muted); } .single-post .article-related-h { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.25; } .single-post .article-related-p { font-size: .9rem; line-height: 1.7; color: var(--paper-text-muted); } .single-post .article-related-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--gold-1); } /* PUBLICATIONS */ .tmpl-publications .pub-main{ position: relative; z-index: 1; padding: 3rem 0 5rem; } .tmpl-publications .pub-panel{ padding: clamp(1.75rem, 2.6vw, 3rem); } .tmpl-publications .pub-list{ display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px){ .tmpl-publications .pub-list{ grid-template-columns: 1fr 1fr; } } .tmpl-publications .pub-row{ height: 100%; } .tmpl-publications .pub-row .doc-row-body{ gap: .5rem; } .tmpl-publications .pub-meta{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--paper-text-muted); } .tmpl-publications .pub-meta-item{ display: inline-flex; align-items: center; gap: .35rem; line-height: 1; } .tmpl-publications .pub-excerpt{ margin-top: .35rem; font-size: .9rem; line-height: 1.65; color: rgba(18,16,26,.70); } /* Mobile */ @media (max-width: 639px) { .single-post .article-title { margin-bottom: .85rem; } .single-post .article-meta-inline { gap: .6rem; } .single-post .article-meta-sep { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ [20] ATELIERS MM ═══════════════════════════════════════════════════════════════════════════════ */ /* Hero */ .tmpl-ateliers-mm .mm-hero { padding: 3.75rem 0 1.25rem; } .tmpl-ateliers-mm .hero-bg--cssvar { background-size: cover; background-position: 70% 55%; } .tmpl-ateliers-mm .mm-hero-inner { position: relative; z-index: 1; } .tmpl-ateliers-mm .mm-hero-eyebrow { font-size: var(--fs-xxs); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; } .tmpl-ateliers-mm .mm-hero-title { margin: 0 0 1rem 0; font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.08; color: var(--text-0); } .tmpl-ateliers-mm .mm-hero-subtitle { margin: 0; max-width: 56rem; font-size: 1.0625rem; line-height: 1.8; color: var(--text-1); } .tmpl-ateliers-mm .hero-content.container--md { --container-max: 72rem; } /* Surface */ .tmpl-ateliers-mm .mm-surface { padding: 2.25rem 0 4.75rem; } .tmpl-ateliers-mm .mm-surface-inner { width: 100%; max-width: none; margin: 0; background: #ffffff; border-radius: 1.25rem; border: 1px solid rgba(215,181,109,0.20); box-shadow: 0 1.875rem 5.625rem -2.5rem rgba(0,0,0,0.55); padding: clamp(1.25rem, 2.8vw, 2.5rem); } /* Intro */ .tmpl-ateliers-mm .mm-intro { margin: 0 0 2rem 0; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.85; color: #3b2200; } /* Section title + divider */ .tmpl-ateliers-mm .mm-section-title { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; letter-spacing: .12em; text-align: center; color: #5c3a00; margin: 2.75rem 0 .35rem; text-transform: uppercase; } .tmpl-ateliers-mm .mm-divider { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .5rem auto 2rem; } .tmpl-ateliers-mm .mm-divider span { display: block; height: 1px; width: 5rem; background: linear-gradient(to right, transparent, #c8973a); } .tmpl-ateliers-mm .mm-divider span:last-child { background: linear-gradient(to left, transparent, #c8973a); } .tmpl-ateliers-mm .mm-divider-eye { width: .625rem; height: .625rem; border: .09375rem solid #c8973a; border-radius: 50%; position: relative; } .tmpl-ateliers-mm .mm-divider-eye::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: .25rem; height: .25rem; background: #c8973a; border-radius: 50%; } /* Table */ .tmpl-ateliers-mm .mm-table-wrap { border: 1px solid #e2c98a; border-radius: .625rem; overflow: hidden; box-shadow: 0 .25rem 1.5rem rgba(100,60,0,0.08); margin-bottom: 3rem; max-width: 100%; } .tmpl-ateliers-mm .mm-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; display: block; } .tmpl-ateliers-mm .mm-table-scroll .mm-table { width: 100%; min-width: 45rem; border-collapse: collapse; } .mm-table { min-width: 44rem; } .mm-table-scroll:focus { outline: none; } .mm-table-scroll:focus-visible { box-shadow: 0 0 0 3px rgba(215,181,109,0.20); border-radius: .5rem; } @media (min-width: 1024px) { .tmpl-ateliers-mm .mm-table-scroll { overflow-x: visible; } .tmpl-ateliers-mm .mm-table-scroll .mm-table { min-width: 0; } } @media (max-width: 1023px) { .tmpl-ateliers-mm .mm-table-scroll { padding-bottom: .25rem; } } /* Filters */ .tmpl-ateliers-mm .mm-filters { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1rem 1.2rem; background: #fdf8f0; border-bottom: 1px solid #e2c98a; justify-content: center; align-items: center; align-content: center; } .tmpl-ateliers-mm .mm-filter-btn { font-family: var(--font-serif); font-size: .72rem; letter-spacing: .12em; padding: .38rem .95rem; border-radius: 9999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; text-transform: uppercase; background: transparent; color: #7a5000; border: 1px solid #c8973a; } .tmpl-ateliers-mm .mm-filter-btn:hover { transform: translateY(-1px); } .tmpl-ateliers-mm .mm-filter-btn--tous:hover { background: rgba(200,151,58,.12); } .tmpl-ateliers-mm .mm-filter-btn--tous.active { background: #c8973a; border-color: #c8973a; color: #fff; } .tmpl-ateliers-mm .mm-filter-btn--mixte { border-color: #9bcc9b; color: #2e6e2e; } .tmpl-ateliers-mm .mm-filter-btn--mixte:hover { background: rgba(232,243,232,.9); } .tmpl-ateliers-mm .mm-filter-btn--mixte.active { background: #2e6e2e; border-color: #2e6e2e; color: #fff; } .tmpl-ateliers-mm .mm-filter-btn--masc { border-color: #8faad8; color: #1e3e7a; } .tmpl-ateliers-mm .mm-filter-btn--masc:hover { background: rgba(232,238,248,.95); } .tmpl-ateliers-mm .mm-filter-btn--masc.active { background: #1e3e7a; border-color: #1e3e7a; color: #fff; } .tmpl-ateliers-mm .mm-filter-btn--fem { border-color: #d88fbe; color: #7a1e5a; } .tmpl-ateliers-mm .mm-filter-btn--fem:hover { background: rgba(252,232,243,.95); } .tmpl-ateliers-mm .mm-filter-btn--fem.active { background: #7a1e5a; border-color: #7a1e5a; color: #fff; } .tmpl-ateliers-mm .mm-filter-count { opacity: .75; margin-left: .25rem; } /* Table styles */ .tmpl-ateliers-mm table.mm-table { width: 100%; border-collapse: collapse; font-size: .97rem; } .tmpl-ateliers-mm table.mm-table thead { background: linear-gradient(135deg, #3b2200 0%, #5c3a00 100%); } .tmpl-ateliers-mm table.mm-table thead th { font-family: var(--font-serif); font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: #f0d898; text-align: left; padding: 1rem 1.4rem; text-transform: uppercase; } .tmpl-ateliers-mm .mm-th-center { text-align: center; } .tmpl-ateliers-mm table.mm-table tbody tr { border-bottom: 1px solid #f0e4c8; transition: background .18s; } .tmpl-ateliers-mm table.mm-table tbody tr:last-child { border-bottom: 0; } .tmpl-ateliers-mm table.mm-table tbody tr:nth-child(even) { background: #fdf8f0; } .tmpl-ateliers-mm table.mm-table tbody tr:hover { background: #fef5e0; } .tmpl-ateliers-mm table.mm-table td { padding: .75rem 1.4rem; vertical-align: middle; } .tmpl-ateliers-mm .mm-td-center { text-align: center; } .tmpl-ateliers-mm table.mm-table tbody tr.mm-hidden { display: none; } .tmpl-ateliers-mm .mm-loge-link { text-decoration: none; } .tmpl-ateliers-mm .mm-loge-link:hover .mm-loge-name { text-decoration: underline; text-underline-offset: 3px; } .tmpl-ateliers-mm .mm-loge-name { font-family: var(--font-serif); font-size: .9rem; font-weight: 600; color: #3b2200; letter-spacing: .03em; text-transform: uppercase; } .tmpl-ateliers-mm .mm-loge-num { font-size: .8rem; color: #7a5000; margin-left: .35rem; white-space: nowrap; } .tmpl-ateliers-mm .mm-orient { color: #5c4010; font-style: italic; } /* Badges */ .tmpl-ateliers-mm .mm-badge { display: inline-block; font-family: var(--font-serif); font-size: .68rem; font-weight: 600; letter-spacing: .12em; padding: .25rem .85rem; border-radius: 9999px; text-transform: uppercase; } .tmpl-ateliers-mm .mm-badge-mixte { background: #e8f3e8; color: #2e6e2e; border: 1px solid #9bcc9b; } .tmpl-ateliers-mm .mm-badge-masc { background: #e8eef8; color: #1e3e7a; border: 1px solid #8faad8; } .tmpl-ateliers-mm .mm-badge-fem { background: #fce8f3; color: #7a1e5a; border: 1px solid #d88fbe; } /* Cards */ .tmpl-ateliers-mm .mm-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); gap: 1.8rem; margin: 0 0 2.5rem 0; } .tmpl-ateliers-mm .mm-card { border: 1px solid #e2c98a; border-radius: .625rem; overflow: hidden; box-shadow: 0 .125rem .75rem rgba(100,60,0,.07); transition: box-shadow .25s, transform .25s; background: #ffffff; } .tmpl-ateliers-mm .mm-card:hover { box-shadow: 0 .5rem 1.875rem rgba(100,60,0,.13); transform: translateY(-.125rem); } .tmpl-ateliers-mm .mm-card-header { background: linear-gradient(135deg, #3b2200 0%, #7a5000 100%); padding: 1.1rem 1.4rem; position: relative; } .tmpl-ateliers-mm .mm-card-badge { position: absolute; top: 1rem; right: 1.2rem; } .tmpl-ateliers-mm .mm-card-loge { margin: 0; font-family: var(--font-serif); font-size: .98rem; font-weight: 700; color: #f0d898; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; } .tmpl-ateliers-mm .mm-card-orient { margin: .25rem 0 0 0; font-style: italic; font-size: .92rem; color: #c8973a; } .tmpl-ateliers-mm .mm-card-body { padding: 1.2rem 1.4rem; font-size: 1rem; line-height: 1.8; color: #2a1800; font-family: var(--font-serif); } .tmpl-ateliers-mm .mm-card-body p { margin: 0 0 .85rem 0; } .tmpl-ateliers-mm .mm-card-body p:last-child { margin-bottom: 0; } /* Card meta */ .tmpl-ateliers-mm .mm-card-meta { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; } .tmpl-ateliers-mm .mm-meta-item { display: flex; align-items: center; gap: .5rem; font-size: .95rem; color: #5c3a00; } .tmpl-ateliers-mm .mm-meta-ico-wrap { width: 1.05rem; height: 1.05rem; display: inline-flex; align-items: center; justify-content: center; color: #c8973a; flex: 0 0 auto; } .tmpl-ateliers-mm .mm-meta-ico-wrap svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; } .tmpl-ateliers-mm .mm-meta-link { color: #7a5000; text-decoration: underline; text-underline-offset: 2px; } /* Ornament */ .tmpl-ateliers-mm .mm-ornament { text-align: center; color: #c8973a; font-size: 1.4rem; letter-spacing: .5rem; margin: .5rem 0 0; opacity: .6; } /* Mobile */ @media (max-width: 600px) { .tmpl-ateliers-mm .mm-divider span { width: 2.75rem; } .tmpl-ateliers-mm .mm-filter-btn { font-size: .66rem; padding: .32rem .75rem; } .tmpl-ateliers-mm table.mm-table td, .tmpl-ateliers-mm table.mm-table thead th { padding: .6rem .85rem; } .tmpl-ateliers-mm .mm-loge-name { font-size: .78rem; } .tmpl-ateliers-mm .mm-cards-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════════ [21] SITES AMIS ═══════════════════════════════════════════════════════════════════════════════ */ .tmpl-sites-amis { --bibl-header-margin-bottom: 1.75rem; --bibl-title-size: clamp(1.85rem, 3.2vw, 2.6rem); --bibl-title-line-height: 1.12; --bibl-title-letter-spacing: .01em; --bibl-title-margin-bottom: .65rem; --bibl-subtitle-max-width: 48rem; --bibl-subtitle-margin: 0; --bibl-subtitle-line-height: 1.75; --bibl-subtitle-color: rgba(18,16,26,.70); --bibl-count-color: rgba(18,16,26,.62); --sites-meta-color: rgba(18,16,26,.62); --sites-badge-bg: rgba(215,181,109,.10); --sites-badge-border: rgba(215,181,109,.40); --sites-badge-color: rgba(18,16,26,.80); --sites-badge-hover-bg: rgba(215,181,109,.14); --sites-badge-hover-border: rgba(215,181,109,.55); --sites-badge-hover-color: rgba(18,16,26,.90); --sites-cta-text-transform: none; } .tmpl-sites-amis .hero-bg--cssvar { background-size: cover; background-position: 60% 55%; } .tmpl-sites-amis .doc-row-sub .doc-row-rt { color: var(--sites-meta-color); } .tmpl-sites-amis .doc-row-sub .doc-row-rt-txt { color: var(--sites-meta-color); } .tmpl-sites-amis .doc-row-cat.badge-symbolic { background: var(--sites-badge-bg); border: 1px solid var(--sites-badge-border); color: var(--sites-badge-color); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; } .tmpl-sites-amis .doc-row:hover .doc-row-cat.badge-symbolic { background: var(--sites-badge-hover-bg); border-color: var(--sites-badge-hover-border); color: var(--sites-badge-hover-color); } .tmpl-sites-amis .doc-row-title { font-weight: 600; letter-spacing: .01em; } .tmpl-sites-amis .doc-row-cta { opacity: 0; } .tmpl-sites-amis .doc-row:hover .doc-row-cta { opacity: 1; } .tmpl-sites-amis .doc-row-cta { text-transform: var(--sites-cta-text-transform); } .tmpl-bibliotheque #bibl-list .doc-row.is-hidden { display: none !important; } /* SITES AMIS — filtre : masque robuste (bat les display responsive) */ .tmpl-sites-amis #sites-list .doc-row.is-hidden { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════════ [22] CONTACT ═══════════════════════════════════════════════════════════════════════════════ */ .tmpl-contact { --contact-hero-padding-top: 3.75rem; --contact-hero-padding-bottom: 1.25rem; --contact-section-padding-top: 1.5rem; --contact-section-padding-bottom: 4.5rem; --contact-eyebrow-margin-bottom: .75rem; --contact-title-margin-bottom: 1rem; --contact-lead-max-width: 42rem; --contact-form-wrap-max-width: 100%; --contact-form-surface-padding: 2.5rem; --contact-form-surface-radius: 1rem; --contact-form-label-margin-bottom: .5rem; --contact-form-label-size: .95rem; --contact-form-field-radius: .75rem; --contact-form-field-size: .95rem; --contact-form-field-padding-y: .95rem; --contact-form-field-padding-x: 1rem; --contact-form-field-bg: rgba(18,16,26,0.55); --contact-form-field-bg-focus: rgba(18,16,26,0.62); --contact-form-field-border: 1px solid var(--violet-border); --contact-form-placeholder: rgba(207,200,243,.55); --contact-form-hover-ring: 0 0 0 1px rgba(255,255,255,0.06); --contact-form-field-transition: border-color .2s, box-shadow .2s, background .2s; --contact-form-cell-padding-x: .75rem; --contact-form-cell-padding-top: .75rem; --contact-form-cell-padding-bottom: .25rem; --contact-form-textarea-min-height: 12rem; --contact-submit-width: 10.5rem; --contact-submit-height: 3.1rem; --contact-submit-radius: .75rem; --contact-submit-margin-top: .75rem; --contact-submit-font-size: 1rem; --contact-submit-transition: transform .2s, box-shadow .2s; --contact-message-margin-top: 1rem; --contact-message-padding: 1rem; --contact-message-radius: .75rem; --contact-message-bg: rgba(18,16,26,0.55); --contact-message-border: 1px solid var(--violet-border); --contact-error-color: #ef4444; --contact-error-font-size: .875rem; --contact-error-margin-top: .4rem; } .tmpl-contact .hero--contact .hero-content { padding: var(--contact-hero-padding-top) 0 var(--contact-hero-padding-bottom); } .hero--contact .hero-bg--cssvar { background-size: cover; background-position: 70% 60%; } .tmpl-contact .contact-eyebrow { margin: 0 0 var(--contact-eyebrow-margin-bottom); font-size: var(--fs-xxs); letter-spacing: .25em; text-transform: uppercase; color: var(--gold-0); text-shadow: var(--gold-glow); } .tmpl-contact .contact-title { margin: 0 0 var(--contact-title-margin-bottom); font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.85rem, 3.2vw, 2.6rem); line-height: 1.12; color: var(--text-0); } .tmpl-contact .contact-lead { margin: 0; max-width: var(--contact-lead-max-width); font-size: 1.0625rem; line-height: 1.75; color: var(--text-1); } .tmpl-contact .section--contact { padding-top: var(--contact-section-padding-top); padding-bottom: var(--contact-section-padding-bottom); } .tmpl-contact .contact-form-wrap { position: relative; z-index: 2; width: 100%; max-width: var(--contact-form-wrap-max-width); } /* CF7 */ form.wpcf7-form { background: transparent; padding: 0; box-shadow: none; color: var(--text-0); } .cf7resp { background: linear-gradient(135deg, rgba(42,17,74,0.25) 0%, rgba(18,16,26,0.85) 100%); backdrop-filter: blur(1.25rem); -webkit-backdrop-filter: blur(1.25rem); border: 1px solid var(--violet-border); border-radius: var(--contact-form-surface-radius); padding: var(--contact-form-surface-padding); box-shadow: var(--shadow-elev-1), var(--violet-glow-subtle); } .cf7resp table { width: 100%; border-collapse: collapse; } .cf7resp td { vertical-align: top; padding: var(--contact-form-cell-padding-top) var(--contact-form-cell-padding-x) var(--contact-form-cell-padding-bottom) 0; } @media (max-width: 640px) { .cf7resp td { padding-right: 0; } } form.wpcf7-form label { cursor: pointer; font-size: var(--contact-form-label-size); font-weight: 600; color: var(--text-0); display: block; margin-bottom: var(--contact-form-label-margin-bottom); } .cf7-req { color: var(--gold-0); font-weight: 700; } .cf7-opt { color: var(--muted); font-weight: 500; font-size: .9em; } form.wpcf7-form input, form.wpcf7-form select, form.wpcf7-form textarea { width: 100%; background: var(--contact-form-field-bg); border: var(--contact-form-field-border); color: var(--text-0); border-radius: var(--contact-form-field-radius); font-size: var(--contact-form-field-size); margin: 0; padding: var(--contact-form-field-padding-y) var(--contact-form-field-padding-x); outline: none; transition: var(--contact-form-field-transition); } form.wpcf7-form textarea { min-height: var(--contact-form-textarea-min-height); resize: vertical; line-height: 1.7; } form.wpcf7-form input::placeholder, form.wpcf7-form textarea::placeholder { color: var(--contact-form-placeholder); } form.wpcf7-form input:hover, form.wpcf7-form textarea:hover { box-shadow: var(--contact-form-hover-ring); } form.wpcf7-form input:focus, form.wpcf7-form textarea:focus { border-color: rgba(215,181,109,.55); box-shadow: var(--focus-ring); background: var(--contact-form-field-bg-focus); } .wpcf7-checkbox, .wpcf7-radio { color: rgba(207,200,243,.85); } .wpcf7-list-item { margin: 0; } .wpcf7-list-item label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; color: rgba(207,200,243,.85); } .wpcf7-list-item input[type="checkbox"] { margin-top: .15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--gold-0); } form.wpcf7-form input[type="submit"] { width: var(--contact-submit-width); height: var(--contact-submit-height); border-radius: var(--contact-submit-radius); border: 0; background: var(--gold-gradient-btn); color: var(--bg-0); font-weight: 700; font-size: var(--contact-submit-font-size); box-shadow: var(--btn-primary-shadow); cursor: pointer; transition: var(--contact-submit-transition); margin-top: var(--contact-submit-margin-top); } form.wpcf7-form input[type="submit"]:hover { transform: translateY(-1px); box-shadow: var(--btn-primary-shadow-hover); } form.wpcf7-form input[type="submit"]:focus-visible { outline: none; box-shadow: var(--btn-primary-shadow-hover), var(--focus-ring); } .cf7-note { margin: .75rem 0 0; font-size: var(--fs-sm); color: rgba(207,200,243,.75); } span.wpcf7-not-valid-tip { color: var(--contact-error-color); font-size: var(--contact-error-font-size); margin-top: var(--contact-error-margin-top); } div.wpcf7-response-output { padding: var(--contact-message-padding) !important; margin: var(--contact-message-margin-top) 0 0 !important; border-radius: var(--contact-message-radius); background: var(--contact-message-bg); border: var(--contact-message-border); color: var(--text-0); } @media (max-width: 639px) { .tmpl-contact { --contact-hero-padding-top: 3.25rem; --contact-hero-padding-bottom: 1rem; --contact-form-surface-padding: 1.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════════ [23] PAGES LÉGALES ═══════════════════════════════════════════════════════════════════════════════ */ .tmpl-legal .legal-main { position: relative; z-index: 1; padding: 3.5rem 0 5rem; } .tmpl-legal .legal-header { margin-bottom: 1.5rem; } .tmpl-legal .legal-eyebrow { margin: 0 0 .75rem; font-size: var(--fs-xxs); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-0); text-shadow: var(--gold-glow); } .tmpl-legal .legal-title { margin: 0; font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; color: var(--text-0); } .tmpl-legal .legal-content { background: var(--paper-bg); color: var(--paper-text); border: 1px solid var(--paper-border); border-radius: var(--component-paper-radius); box-shadow: var(--component-paper-shadow); padding: clamp(1.5rem, 2.6vw, 2.75rem); } .tmpl-legal .legal-content :is(p, li) { color: rgba(18,16,26,.88); line-height: 1.85; } .tmpl-legal .legal-content p { margin: 0; } .tmpl-legal .legal-content p + p { margin-top: 1rem; } .tmpl-legal .legal-content :is(h2, h3, h4) { margin: 2rem 0 .75rem; font-family: var(--font-serif); font-weight: 600; line-height: 1.2; color: var(--paper-text); } .tmpl-legal .legal-content h2 { font-size: 1.25rem; } .tmpl-legal .legal-content h3 { font-size: 1.1rem; } .tmpl-legal .legal-content h4 { font-size: 1rem; } .tmpl-legal .legal-content a { color: rgba(18,16,26,.82); text-decoration: underline; text-underline-offset: 3px; } .tmpl-legal .legal-content a:hover { opacity: .85; } .tmpl-legal .legal-content :is(ul, ol) { padding-left: 1.25rem; margin: .75rem 0 0; } .tmpl-legal .legal-content li + li { margin-top: .4rem; } @media (max-width: 639px) { .tmpl-legal .legal-main { padding: 3rem 0 4rem; } } /* ── page.php — fallback générique ────────────────────────────────────────── */ .index-main { position: relative; z-index: 1; padding: 5rem 0; } .index-card { margin-bottom: 2rem; } .index-card__title { font-size: var(--fs-3xl); color: var(--text-0); margin-bottom: 1rem; } .index-card__excerpt { color: var(--text-1); line-height: var(--lh-relaxed); } .index-empty { text-align: center; padding: 4rem; } .index-empty__text { color: var(--text-1); } .tmpl-404 .orb--404 { width: 22rem; height: 22rem; top: 18%; left: 50%; transform: translateX(-50%); background: rgba(91,33,182,0.18); animation-duration: 11s; } .page-404-main { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem var(--gutter); } .page-404-symbol { font-size: clamp(4rem, 10vw, 6rem); line-height: 1; margin: 0 0 1rem; opacity: .25; } .page-404-title { font-size: clamp(2rem, 5vw, 3.5rem); color: var(--text-0); margin: 0 0 1rem; } .page-404-lead { color: var(--text-1); font-size: var(--fs-xl); max-width: 36ch; line-height: var(--lh-normal); margin: 0 0 2.5rem; } .tmpl-contact .orb--contact { width: 20rem; height: 20rem; top: 12%; right: 18%; background: rgba(91,33,182,0.16); animation-duration: 12s; } .page-main { position: relative; z-index: 1; padding: 5rem 0; } .page-title { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--text-0); margin-bottom: 2rem; } .page-main .entry-content { color: var(--text-1); line-height: 1.85; } /* ═══════════════════════════════════════════════════════════════════════════════ [24] FIXES / RESPONSIVE / SAFETY ═══════════════════════════════════════════════════════════════════════════════ */ /* Responsive breakpoints */ @media (max-width: 1023px) { :root { --gutter: clamp(1rem, 4vw, 2.5rem); } } @media (max-width: 639px) { :root { --component-glass-padding: 1.5rem; --component-hero-padding-y: 4.5rem; --component-panel-padding: 1.75rem; --component-cta-padding-y: 2rem; --component-cta-padding-x: 1.5rem; --component-section-padding-y: 3.5rem; } .site-header .inner { padding: 0 var(--gutter); gap: 1rem; } .header-logo > img { height: 1.75rem; } .portal-cards { gap: 1.25rem; margin-top: 1.5rem; } .portal-card { padding: 1.5rem; min-height: 11rem; } .site-footer { padding: 3rem 0; } } @media (min-width: 640px) and (max-width: 1023px) { :root { --component-glass-padding: 2rem; --component-hero-padding-y: 5.25rem; --component-panel-padding: 2.5rem; --component-section-padding-y: 4.25rem; } .site-header .inner { padding: 0 var(--gutter); } } @media (min-width: 1024px) and (max-width: 1279px) { :root { --gutter: clamp(1.5rem, 3vw, 3rem); --component-section-padding-y: 4.75rem; } .container { max-width: 64rem; } } @media (min-width: 1280px) { :root { --gutter: clamp(1.5rem, 2.5vw, 3.5rem); --component-section-padding-y: 5rem; } .container { max-width: 72rem; } } /* Anti-overflow orbs */ @media (max-width: 1023px) { body .orb { width: min(24rem, 92vw) !important; height: min(24rem, 92vw) !important; } .page-wrap { overflow-x: clip; } @supports not (overflow-x: clip) { .page-wrap { overflow-x: hidden; } } } /* ============================================================ Hero — sous header fixe (corrige bande noire / gap) Applique cette classe sur toutes les sections hero qui doivent être collées visuellement au header fixed. ============================================================ */ .hero--under-header { margin-top: -4rem; /* annule le padding-top du .page-wrap */ padding-top: 4rem; /* recompense le contenu interne */ } /* ============================================================ Utilitaires icônes manquants (tailles non couvertes) ============================================================ */ .w-4 { width: 1rem; } .h-4 { height: 1rem; } .w-12 { width: 3rem; } .h-12 { height: 3rem; } .w-\[26px\] { width: 1.625rem; } .h-\[26px\] { height: 1.625rem; } /* ============================================================ Footer — classes de remplacement des styles inline ============================================================ */ .site-footer__tagline { font-size: var(--fs-xxs); letter-spacing: .15em; text-transform: uppercase; color: var(--gold-0); margin-bottom: .75rem; } .btn-secondary--sm { font-size: var(--fs-sm); padding: .625rem 1.25rem; margin-bottom: 1rem; } .btn-secondary--nav-offset { margin-top: .75rem; } .site-footer__contact-note { font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-ui); } .site-footer__motto { font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; opacity: .7; } .site-footer__motto--brand { line-height: var(--lh-ui); } /* ========================================================================== OIRAPMM Intranet — CSS migré vers le plugin oirapmm-intranet-core Bloc historique retiré du thème après validation visuelle ========================================================================== */ /* ============================================================ Accueil — ajustements éditoriaux ciblés ============================================================ */ .home-order-title { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.2; text-wrap: balance; } .home-pyramid-note { max-width: 36rem; } .home-pyramid-note p { line-height: 1.65; } @media (max-width: 767px) { .home-order-title { font-size: clamp(1.35rem, 6vw, 1.75rem); } .home-pyramid-note { max-width: 100%; } }