/* ============================================================
Saint-Séraphim-de-Sarov — Shared Stylesheet
Modern & Solemn: Burgundy, Gold, Cream
============================================================ */
/* Fonts loaded via in HTML head (avoids @import render-blocking).
Pages declare: Cormorant Garamond / Source Serif 4 / DM Sans */
/* ── Variables ─────────────────────────────────────────────── */
:root {
--burgundy: #6B1A1A;
--burgundy-dark: #4A1010;
--burgundy-mid: #832020;
--gold: #C9A84C;
--gold-light: #EDD98A;
--gold-pale: #F7EFD0;
--cream: #F5F0E8;
--cream-dark: #E8DFD0;
--dark-brown: #2C1810;
--text-muted: #6B5A4E;
--white: #FFFFFF;
--shadow-sm: 0 2px 8px rgba(44,24,16,0.06);
--shadow: 0 4px 24px rgba(44,24,16,0.1);
--shadow-lg: 0 12px 48px rgba(44,24,16,0.14);
--shadow-gold: 0 4px 20px rgba(201,168,76,0.2);
--dark-bg: #1a0808;
--dark-surface: #241010;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 20px;
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
}
/* ── Palettes (dev-preview) ─────────────────────────────────
Switch via [data-palette] sur .
Overrides BOTH style.css tokens (--gold/--burgundy/--cream/...)
AND site.css tokens (--stone/--ink/--gold-ink/--burgundy-ink/...).
Selectors target both html[data-palette] and html[data-palette] body
so the body.dark overrides in site.css don't beat us.
--white is remapped to --stone for any non-default palette so card/section
backgrounds (which use var(--white)) follow the palette. */
html[data-palette]:not([data-palette="or"]),
html[data-palette]:not([data-palette="or"]) body {
--white: var(--stone);
}
/* 1. Or classique (defaut) */
html[data-palette="or"], html[data-palette="or"] body {
--burgundy: #6B1A1A; --burgundy-dark: #4A1010; --burgundy-mid: #832020;
--gold: #C9A84C; --gold-light: #EDD98A; --gold-pale: #F7EFD0;
--cream: #F5F0E8; --cream-dark: #E8DFD0;
--dark-brown: #2C1810; --text-muted: #6B5A4E;
--stone: #EFE9DF; --stone-warm: #E6DED0;
--ink: #1F1510; --ink-soft: #3A2C24;
--muted: #6D5B4E; --muted-soft: #8F7F72;
--burgundy-deep: #4A1010; --burgundy-ink: #2C0C0C;
--gold-ink: #A8894C; --gold-soft: #C9A84C;
}
/* 2. Bleu byzantin */
html[data-palette="bleu"], html[data-palette="bleu"] body {
--burgundy: #1E5E8A; --burgundy-dark: #143F5E; --burgundy-mid: #2A7AB0;
--gold: #C9A84C; --gold-light: #EDD98A; --gold-pale: #F4EBCB;
--cream: #F2EEE5; --cream-dark: #E2DCCC;
--dark-brown: #122436; --text-muted: #4F6781;
--stone: #EEF2F6; --stone-warm: #DDE6EE;
--ink: #122436; --ink-soft: #1F3A52;
--muted: #4F6781; --muted-soft: #7589A0;
--burgundy-deep: #143F5E; --burgundy-ink: #0B2638;
--gold-ink: #1E5E8A; --gold-soft: #2A7AB0;
}
/* 3. Bordeaux profond */
html[data-palette="bordeaux"], html[data-palette="bordeaux"] body {
--burgundy: #7A1F2B; --burgundy-dark: #4F0E18; --burgundy-mid: #9C2A38;
--gold: #B8924A; --gold-light: #DCC078; --gold-pale: #EFE3C2;
--cream: #F5EFE6; --cream-dark: #E5DCCB;
--dark-brown: #2A1014; --text-muted: #6B4E55;
--stone: #F1E9DD; --stone-warm: #E5D9C8;
--ink: #2A1014; --ink-soft: #43222A;
--muted: #6B4E55; --muted-soft: #8E6E76;
--burgundy-deep: #4F0E18; --burgundy-ink: #2E0810;
--gold-ink: #957338; --gold-soft: #B8924A;
}
/* 4. Vert mosaique */
html[data-palette="vert"], html[data-palette="vert"] body {
--burgundy: #2E5D4F; --burgundy-dark: #1B3D33; --burgundy-mid: #3F7A66;
--gold: #C49A3A; --gold-light: #E0BE6E; --gold-pale: #EFE2BA;
--cream: #F4F0E4; --cream-dark: #E2DDC9;
--dark-brown: #14241F; --text-muted: #506960;
--stone: #EFEEE2; --stone-warm: #DFDDC9;
--ink: #14241F; --ink-soft: #243A33;
--muted: #506960; --muted-soft: #6F857C;
--burgundy-deep: #1B3D33; --burgundy-ink: #0E261F;
--gold-ink: #2E5D4F; --gold-soft: #3F7A66;
}
/* 5. Pourpre imperial */
html[data-palette="pourpre"], html[data-palette="pourpre"] body {
--burgundy: #5B2C6F; --burgundy-dark: #3B1A4A; --burgundy-mid: #75408A;
--gold: #C9A84C; --gold-light: #E5C97D; --gold-pale: #EFE0B5;
--cream: #F2ECEF; --cream-dark: #DFD2DC;
--dark-brown: #2A1232; --text-muted: #6B5072;
--stone: #F0EAF3; --stone-warm: #DFD2E6;
--ink: #2A1232; --ink-soft: #43224F;
--muted: #6B5072; --muted-soft: #8A6F92;
--burgundy-deep: #3B1A4A; --burgundy-ink: #25102F;
--gold-ink: #5B2C6F; --gold-soft: #75408A;
}
/* 6. Noir & or — palette editoriale premium (opera / luxe / sombre permanent)
Hierarchie 4 noirs / 3 ors / 3 textes pour eviter le "tout noir plat" */
html[data-palette="noir"], html[data-palette="noir"] body {
/* Or signature : chaud, lisible, contraste eleve sur noir */
--gold: #E8C46A;
--gold-light: #F2D88A;
--gold-pale: #C9A655; /* or attenue, pour borders/accents secondaires */
/* Noirs profonds : 3 niveaux de surface */
--cream: #0A0A0A; /* fond cards & elevated */
--cream-dark: #050505; /* fond profond */
--stone: #000000; /* page entiere */
--stone-warm: #0F0F0F; /* sections alt */
/* Textes sur fond noir */
--ink: #EFEAE0; /* body, titres principaux */
--ink-soft: #C9C0AE; /* sous-titres, paragraphes secondaires */
--dark-brown: #EFEAE0; /* alias body — cohérent */
--muted: #8A8170; /* texte tertiaire, eyebrows */
--muted-soft: #5C5448; /* placeholders, hints */
--text-muted: #8A8170; /* alias style.css */
/* "Burgundy" reaffecte a un noir profond + or pour zones d'emphase */
--burgundy: #1A1A1A; /* footer-cta, cards d'emphase */
--burgundy-mid: #242424;
--burgundy-dark: #0F0F0F;
--burgundy-deep: #050505; /* footer */
--burgundy-ink: #000000; /* extreme contrast */
/* gold-ink (utilise par site.css) : meme or que --gold */
--gold-ink: #E8C46A;
--gold-soft: #F2D88A;
/* Lignes : or translucide au lieu de blanc translucide */
--line: rgba(232, 196, 106, 0.20);
--line-soft: rgba(232, 196, 106, 0.10);
}
/* Patches specifiques palette noir : forcer transparence et fonds sur composants
qui ont du blanc ou du clair en dur */
html[data-palette="noir"] body { background: #000000; }
html[data-palette="noir"] .feature-item:hover { background: rgba(232,196,106,0.04); }
html[data-palette="noir"] .horaire-card,
html[data-palette="noir"] .office-card { background: #0A0A0A; border-color: rgba(232,196,106,0.15); }
html[data-palette="noir"] .feast-banner { background: linear-gradient(135deg, #0F0F0F, #000000); border-top: 1px solid rgba(232,196,106,0.25); border-bottom: 1px solid rgba(232,196,106,0.25); }
html[data-palette="noir"] .feast-banner-date { color: var(--gold); border-color: rgba(232,196,106,0.35); }
html[data-palette="noir"] footer { background: #000000; border-top: 1px solid rgba(232,196,106,0.18); }
html[data-palette="noir"] .footer-cta { background: linear-gradient(135deg, #0F0F0F, #000000); }
html[data-palette="noir"] .quote-section { background: #050505; }
html[data-palette="noir"] .histoire-cinematic-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%); }
html[data-palette="noir"] ::selection { background: var(--gold); color: #000; }
/* 7. Terre cuite & sable */
html[data-palette="terre"], html[data-palette="terre"] body {
--burgundy: #B85C38; --burgundy-dark: #8A3F23; --burgundy-mid: #D17249;
--gold: #C99A4B; --gold-light: #E2BD79; --gold-pale: #F1E1BD;
--cream: #F4E9D8; --cream-dark: #E2D4BE;
--dark-brown: #3A1F12; --text-muted: #7A5A45;
--stone: #F4E9D8; --stone-warm: #E5D2B8;
--ink: #3A1F12; --ink-soft: #5A3522;
--muted: #7A5A45; --muted-soft: #9C7A60;
--burgundy-deep: #8A3F23; --burgundy-ink: #5C2914;
--gold-ink: #B85C38; --gold-soft: #D17249;
}
/* 8. Bleu nuit & argent */
html[data-palette="nuit"], html[data-palette="nuit"] body {
--burgundy: #1B2A41; --burgundy-dark: #0F1A2C; --burgundy-mid: #2C3F5C;
--gold: #8696AB; --gold-light: #A8B5C4; --gold-pale: #DDE2E9;
--cream: #F0F2F5; --cream-dark: #DCE0E6;
--dark-brown: #0E1726; --text-muted: #586478;
--stone: #F0F2F5; --stone-warm: #DCE0E6;
--ink: #0E1726; --ink-soft: #1F2C3F;
--muted: #586478; --muted-soft: #7E8898;
--burgundy-deep: #0F1A2C; --burgundy-ink: #060B14;
--gold-ink: #1B2A41; --gold-soft: #2C3F5C;
}
/* 9. Sauge & lin (pastoral, paisible) */
html[data-palette="sauge"], html[data-palette="sauge"] body {
--burgundy: #7A8B6F; --burgundy-dark: #556149; --burgundy-mid: #94A688;
--gold: #B5A47A; --gold-light: #D2C39B; --gold-pale: #EDE5C9;
--cream: #F2EFE5; --cream-dark: #E2DECF;
--dark-brown: #2A3122; --text-muted: #6A7763;
--stone: #F2EFE5; --stone-warm: #E2DECF;
--ink: #2A3122; --ink-soft: #44503B;
--muted: #6A7763; --muted-soft: #899483;
--burgundy-deep: #556149; --burgundy-ink: #3A4332;
--gold-ink: #7A8B6F; --gold-soft: #94A688;
}
/* 10. Marine & cuivre */
html[data-palette="marine"], html[data-palette="marine"] body {
--burgundy: #0E3A5F; --burgundy-dark: #082642; --burgundy-mid: #1A547F;
--gold: #B87333; --gold-light: #D89456; --gold-pale: #EDD3B0;
--cream: #F1ECE2; --cream-dark: #DED7C6;
--dark-brown: #0A1F33; --text-muted: #4A6680;
--stone: #F1ECE2; --stone-warm: #DED7C6;
--ink: #0A1F33; --ink-soft: #1C3450;
--muted: #4A6680; --muted-soft: #6E8499;
--burgundy-deep: #082642; --burgundy-ink: #051628;
--gold-ink: #0E3A5F; --gold-soft: #1A547F;
}
/* 11. Lavande & creme */
html[data-palette="lavande"], html[data-palette="lavande"] body {
--burgundy: #7E6B9F; --burgundy-dark: #5A4878; --burgundy-mid: #9784B8;
--gold: #B79968; --gold-light: #D4B98D; --gold-pale: #EEDFBE;
--cream: #F4F0F5; --cream-dark: #E2DCE7;
--dark-brown: #2A1F3A; --text-muted: #6E5F85;
--stone: #F4F0F5; --stone-warm: #E2DCE7;
--ink: #2A1F3A; --ink-soft: #443456;
--muted: #6E5F85; --muted-soft: #8E80A0;
--burgundy-deep: #5A4878; --burgundy-ink: #3D2F54;
--gold-ink: #7E6B9F; --gold-soft: #9784B8;
}
/* 12. Charbon & brique */
html[data-palette="charbon"], html[data-palette="charbon"] body {
--burgundy: #A04545; --burgundy-dark: #722E2E; --burgundy-mid: #B85858;
--gold: #BFA57F; --gold-light: #D8C2A0; --gold-pale: #EBDFC8;
--cream: #EDEAE6; --cream-dark: #DAD5CF;
--dark-brown: #2B2B2B; --text-muted: #6B6B6B;
--stone: #EDEAE6; --stone-warm: #DAD5CF;
--ink: #2B2B2B; --ink-soft: #444444;
--muted: #6B6B6B; --muted-soft: #8A8A8A;
--burgundy-deep: #722E2E; --burgundy-ink: #4C1E1E;
--gold-ink: #A04545; --gold-soft: #B85858;
}
/* 13. Vert byzantin (olive iconographique, or pale) */
html[data-palette="vert-byzantin"], html[data-palette="vert-byzantin"] body {
--burgundy: #3A5F3A; --burgundy-dark: #24401F; --burgundy-mid: #4F7A4A;
--gold: #D4B26A; --gold-light: #E6CC92; --gold-pale: #F1E4BC;
--cream: #F2EFE2; --cream-dark: #E1DCC6;
--dark-brown: #1A2818; --text-muted: #586A52;
--stone: #EFEBDC; --stone-warm: #DCD6BD;
--ink: #1A2818; --ink-soft: #2D3D28;
--muted: #586A52; --muted-soft: #7A8772;
--burgundy-deep: #24401F; --burgundy-ink: #122810;
--gold-ink: #3A5F3A; --gold-soft: #4F7A4A;
}
/* 14. Vert emeraude liturgique (sature, solennel, contraste eleve) */
html[data-palette="vert-emeraude"], html[data-palette="vert-emeraude"] body {
--burgundy: #1F5C46; --burgundy-dark: #0F3D2D; --burgundy-mid: #2E7A5E;
--gold: #D9B450; --gold-light: #EBCB7C; --gold-pale: #F4E4B6;
--cream: #F3EFE3; --cream-dark: #E0DAC5;
--dark-brown: #0C1F18; --text-muted: #3F6657;
--stone: #EEEBDE; --stone-warm: #DBD6BE;
--ink: #0C1F18; --ink-soft: #1B3528;
--muted: #3F6657; --muted-soft: #5E8071;
--burgundy-deep: #0F3D2D; --burgundy-ink: #06241B;
--gold-ink: #1F5C46; --gold-soft: #2E7A5E;
}
/* 15. Vert foret profond (monastique, contemplatif, or eclatant) */
html[data-palette="vert-foret"], html[data-palette="vert-foret"] body {
--burgundy: #1A3D2E; --burgundy-dark: #0B2A1E; --burgundy-mid: #2D5A45;
--gold: #E0BE5A; --gold-light: #EED484; --gold-pale: #F6E8BD;
--cream: #F1EDE0; --cream-dark: #DED8C2;
--dark-brown: #0A1A14; --text-muted: #3D5A4E;
--stone: #EDE9DA; --stone-warm: #D9D3BA;
--ink: #0A1A14; --ink-soft: #182E25;
--muted: #3D5A4E; --muted-soft: #5D7268;
--burgundy-deep: #0B2A1E; --burgundy-ink: #051710;
--gold-ink: #1A3D2E; --gold-soft: #2D5A45;
}
/* Hide legacy Tweaks UI + theme toggle + scroll progress bar (injected by main.js) */
.tweaks-panel, .tweaks-toggle-btn, .theme-toggle, .scroll-progress { display: none !important; }
/* ── Accessibility: respect user motion preference ─────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Accessibility: visible focus rings (keyboard nav) ─────── */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.nav-toggle:focus-visible,
.palette-select:focus-visible,
.theme-toggle:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 3px;
}
/* ── Skip link (WCAG: bypass nav) ──────────────────────────── */
.skip-link {
position: absolute;
top: -100px;
left: 0;
z-index: 9999;
background: var(--gold);
color: #1F1510;
padding: .8rem 1.4rem;
font-family: 'DM Sans', sans-serif;
font-size: .8rem;
font-weight: 600;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 0; }
/* ── Palette selector (dev preview, dans la nav) ─────────────── */
.palette-select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
color: var(--dark-brown);
font-family: 'DM Sans', sans-serif;
font-size: .58rem;
font-weight: 500;
letter-spacing: .04rem;
padding: 2px 14px 2px 6px;
cursor: pointer;
transition: border-color .2s, color .2s;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 7px) 50%, calc(100% - 4px) 50%;
background-size: 3px 3px, 3px 3px;
background-repeat: no-repeat;
}
.palette-select:hover { border-color: var(--gold); color: var(--burgundy); }
.palette-select:focus { outline: none; border-color: var(--gold); }
body.dark .palette-select { color: var(--cream); border-color: rgba(255,255,255,0.18); }
body.dark .palette-select option { background: var(--dark-surface); color: var(--cream); }
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Source Serif 4', Georgia, 'Book Antiqua', serif;
background: var(--cream);
color: var(--dark-brown);
line-height: 1.8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Garde-fou responsive : jamais de defilement horizontal */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, object { max-width: 100%; }
*, *::before, *::after { min-width: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--burgundy); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--gold); }
ul { list-style: none; }
/* ── Ornament helpers ────────────────────────────────────────── */
.ornament {
display: flex;
align-items: center;
justify-content: center;
margin: 2rem 0;
}
.ornament::before,
.ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: .4;
}
/* Orthodox ornamental elements from V3 galerie */
.orn-cross {
text-align: center;
margin-bottom: 1rem;
}
.orn-divider {
text-align: center;
padding: 1.5rem 0;
}
.page-header-icon {
margin-bottom: 1.2rem;
animation: fadeDown .6s var(--ease-out) both;
}
/* ── SCROLL PROGRESS BAR ──────────────────────────────────── */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
background-size: 200% 100%;
animation: shimmer 3s ease infinite;
z-index: 9999;
width: 0%;
transition: width .15s linear;
border-radius: 0 2px 2px 0;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── HEADER (hidden when nav takes over) ──────────────────── */
header {
background: var(--burgundy-dark);
padding: 0;
border-bottom: none;
display: none;
}
.header-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
/* Logo — lives inside nav */
.site-logo {
display: flex;
align-items: center;
gap: .8rem;
text-decoration: none;
flex-shrink: 0;
}
/* Logo d'en-tete : silhouette de l'eglise (masque dore) a la place de la croix */
.site-logo svg { display: none; }
.site-logo::before {
content: '';
width: 64px;
height: 57px;
flex-shrink: 0;
background: var(--burgundy);
opacity: 1;
transition: opacity .3s;
-webkit-mask: url('assets/church-bold.svg') center / contain no-repeat;
mask: url('assets/church-bold.svg') center / contain no-repeat;
}
.site-logo:hover::before { opacity: .72; }
.logo-text {
text-align: left;
line-height: 1.15;
}
.logo-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1rem;
color: var(--dark-brown);
font-weight: 600;
letter-spacing: .01rem;
}
.logo-sub {
font-family: 'DM Sans', sans-serif;
font-size: .58rem;
color: var(--text-muted);
letter-spacing: .15rem;
text-transform: uppercase;
opacity: .5;
}
/* Language toggle */
.lang-toggle {
display: flex;
align-items: center;
gap: .1rem;
font-size: .65rem;
letter-spacing: .06rem;
font-family: 'DM Sans', sans-serif;
margin-left: .5rem;
}
.lang-toggle a {
color: var(--text-muted);
padding: .2rem .4rem;
border: none;
border-radius: 3px;
transition: all .2s ease;
text-transform: uppercase;
font-weight: 500;
opacity: .5;
}
.lang-toggle a:hover { opacity: .8; color: var(--dark-brown); }
.lang-toggle a.active { opacity: 1; color: var(--dark-brown); font-weight: 700; }
.lang-toggle span {
color: rgba(0,0,0,.1);
font-weight: 300;
font-size: .6rem;
}
/* ── NAVIGATION ──────────────────────────────────────────────── */
body > nav {
background: var(--white);
border-bottom: none;
position: sticky;
top: 0;
z-index: 100;
transition: all .4s ease;
}
body > nav.scrolled {
background: rgba(255,255,255,.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.nav-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 2.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
height: 74px;
}
.nav-links {
display: flex;
align-items: center;
gap: .25rem;
margin-left: auto;
}
.nav-links a {
display: block;
padding: .45rem .85rem;
color: var(--text-muted);
font-family: 'DM Sans', sans-serif;
font-size: .7rem;
font-weight: 500;
letter-spacing: .08rem;
border-radius: 0;
transition: color .25s ease;
text-transform: uppercase;
position: relative;
opacity: .7;
}
.nav-links a:hover {
color: var(--dark-brown);
opacity: 1;
}
.nav-links a.active {
color: var(--dark-brown);
opacity: 1;
}
.nav-links a.active::after {
content: '';
position: absolute;
bottom: -4px;
left: .85rem;
right: .85rem;
height: 1px;
background: var(--dark-brown);
}
/* Donate CTA — rectangle or plein (signature CTA, palette-agnostic).
Meme forme rectangulaire que les autres boutons.
Text is pure black + bold weight to clear WCAG AA on gold (#C9A84C) */
.nav-links a.nav-donate {
position: relative;
color: #000;
background: #C9A84C;
border: none;
-webkit-clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
margin-left: .8rem;
padding: .55rem 1.6rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .1rem;
transition: background .35s ease, transform .35s ease, color .35s ease;
opacity: 1;
}
.nav-links a.nav-donate::before,
.nav-links a.nav-donate::after { display: none; }
.nav-links a.nav-donate:hover {
background: #EDD98A;
transform: translateY(-1px);
color: #000;
}
/* Hamburger */
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: .6rem;
flex-direction: column;
gap: 5px;
margin-left: auto;
}
.nav-toggle span {
display: block;
width: 20px;
height: 2px;
background: var(--dark-brown);
border-radius: 2px;
transition: all .35s var(--ease-out);
transform-origin: center;
}
.nav-toggle.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-toggle.open span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ── HERO ───────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: var(--burgundy-dark);
}
.hero-bg {
position: absolute;
inset: -30px;
background-size: cover;
background-position: center;
filter: brightness(.35) saturate(.6);
transition: transform 12s ease;
will-change: transform;
}
.hero:hover .hero-bg { transform: scale(1.04); }
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(44,16,10,.35) 0%,
rgba(26,8,8,.6) 40%,
rgba(26,8,8,.9) 100%);
}
/* Vignette effect */
.hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(26,8,8,.6) 100%);
pointer-events: none;
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
padding: 4rem 2rem;
color: var(--white);
}
.hero-cross {
margin: 0 auto 1.5rem;
width: 44px;
opacity: .8;
animation: fadeDown .8s var(--ease-out) both, heroCrossGlow 4s 1s ease-in-out infinite;
}
@keyframes heroCrossGlow {
0%, 100% { filter: drop-shadow(0 0 6px rgba(201,168,76,.2)); }
50% { filter: drop-shadow(0 0 18px rgba(201,168,76,.5)); }
}
@keyframes fadeDown {
from { opacity: 0; transform: translateY(-15px); }
to { opacity: .8; transform: translateY(0); }
}
.hero-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 700;
line-height: 1.2;
color: var(--gold-light);
text-shadow: 0 2px 20px rgba(0,0,0,.4);
margin-bottom: .8rem;
animation: fadeUp .8s .15s var(--ease-out) both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-subtitle {
font-family: 'DM Sans', sans-serif;
font-size: .88rem;
color: var(--cream);
letter-spacing: .25rem;
text-transform: uppercase;
margin-bottom: 1.8rem;
opacity: .8;
animation: fadeUp .8s .3s var(--ease-out) both;
}
.hero-text {
font-size: 1.05rem;
color: var(--cream-dark);
max-width: 580px;
margin: 0 auto 2.5rem;
line-height: 1.8;
animation: fadeUp .8s .45s var(--ease-out) both;
}
/* ── HERO MODERN (2-column: text left + image right) ────────── */
.hero-modern {
display: grid;
grid-template-columns: 1fr 1.4fr;
min-height: 85vh;
background: var(--white);
overflow: hidden;
position: relative;
}
.hero-modern-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 3rem 4rem 5rem;
animation: fadeUp .8s var(--ease-out) both;
}
.hero-modern-label {
font-family: 'DM Sans', sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .25rem;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: .6rem;
animation: fadeUp .8s 0s var(--ease-out) both;
}
.hero-modern-label::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: var(--gold);
border-radius: 50%;
flex-shrink: 0;
}
.hero-modern-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 500;
line-height: 1.1;
color: var(--dark-brown);
margin-bottom: 1.5rem;
letter-spacing: -.01em;
animation: fadeUp .8s .15s var(--ease-out) both;
}
@keyframes growWidth {
from { width: 0; }
to { width: 40px; }
}
.hero-modern-line {
width: 40px;
height: 1.5px;
background: var(--gold);
margin-bottom: 1.5rem;
animation: growWidth .6s .3s var(--ease-out) both;
}
.hero-modern-desc {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .92rem;
line-height: 1.75;
color: var(--text-muted);
max-width: 360px;
margin-bottom: 1.5rem;
animation: fadeUp .8s .4s var(--ease-out) both;
}
.hero-modern-meta {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: 2rem;
animation: fadeUp .8s .5s var(--ease-out) both;
}
.hero-modern-meta-item {
font-family: 'DM Sans', sans-serif;
font-size: .62rem;
font-weight: 600;
letter-spacing: .15rem;
text-transform: uppercase;
color: var(--gold);
}
.hero-modern-meta-sep {
width: 3px;
height: 3px;
background: var(--gold);
border-radius: 50%;
opacity: .4;
}
.hero-modern-link {
display: inline-block;
padding: .5rem 1.2rem;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: .8rem;
font-weight: 600;
letter-spacing: .06rem;
text-decoration: none;
color: var(--dark-brown);
background: linear-gradient(135deg, var(--gold), var(--gold-light));
border: none;
border-radius: 2px;
transition: all .3s ease;
}
.hero-modern-link:hover {
color: var(--dark-brown);
box-shadow: 0 3px 12px rgba(201,168,76,.35);
transform: translateY(-1px);
}
.hero-modern-image {
position: relative;
overflow: hidden;
}
.hero-modern-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: contrast(1.3) saturate(1.2) brightness(1.05);
transition: transform 12s ease;
}
.hero-modern:hover .hero-modern-image img {
transform: scale(1.04);
}
/* Fade to white on all sides + blur edges */
.hero-modern-image::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(to right, var(--white) 0%, rgba(255,255,255,.6) 15%, transparent 35%),
linear-gradient(to left, var(--white) 0%, rgba(255,255,255,.4) 10%, transparent 25%),
linear-gradient(to top, var(--white) 0%, rgba(255,255,255,.7) 20%, transparent 45%),
linear-gradient(to bottom, var(--white) 0%, rgba(255,255,255,.3) 8%, transparent 20%);
pointer-events: none;
}
.hero-modern-image::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
mask-image: radial-gradient(ellipse 55% 50% at 55% 48%, transparent 35%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.7) 75%, black 100%);
-webkit-mask-image: radial-gradient(ellipse 55% 50% at 55% 48%, transparent 35%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.7) 75%, black 100%);
pointer-events: none;
}
@media (max-width: 768px) {
.hero-modern {
grid-template-columns: 1fr;
min-height: auto;
}
.hero-modern-content {
padding: 3rem 1.5rem 2rem;
text-align: center;
align-items: center;
}
.hero-modern-title {
font-size: clamp(1.6rem, 7vw, 2.2rem);
}
.hero-modern-image {
height: 50vh;
}
/* plus specifique que `.hero-btn{align-self:flex-start}` (defini plus bas) */
.hero-modern-content .hero-btn { align-self: center; }
}
/* ── BUTTONS — cartouche biseaute, or plein, texte sombre lisible. Identique partout. */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .95rem 2.2rem;
background: var(--gold);
color: #1F1510;
border: none;
cursor: pointer;
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: .2rem;
text-transform: uppercase;
text-decoration: none;
text-align: center;
-webkit-clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
z-index: 0;
}
.btn:hover {
background: var(--gold-light, #EDD98A);
transform: translateY(-1px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Les modificateurs gardent le meme rendu (or plein, texte sombre) */
.btn-gold, .btn-burgundy, .btn-outline { color: #1F1510; }
.hero-btn { align-self: flex-start; animation: fadeUp .8s .6s var(--ease-out) both; }
.histoire-showcase-btn { color: #1F1510; }
/* ── BANNER (restoration alert) ─────────────────────────────── */
.banner {
background: linear-gradient(135deg, var(--burgundy-dark), var(--dark-bg));
border-top: 1px solid rgba(201,168,76,.15);
border-bottom: 1px solid rgba(201,168,76,.15);
padding: 1.8rem 2rem;
text-align: center;
color: var(--cream);
font-size: .95rem;
}
.banner strong { color: var(--gold-light); }
.banner .btn { margin-top: .8rem; }
/* ── MAIN LAYOUT ────────────────────────────────────────────── */
main { min-height: 60vh; }
.section {
padding: 5rem 2rem;
}
.section-inner {
max-width: 1000px;
margin: 0 auto;
}
.section-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.5rem, 3vw, 2.2rem);
color: var(--burgundy);
text-align: center;
margin-bottom: .5rem;
line-height: 1.3;
letter-spacing: normal;
}
.section-subtitle {
text-align: center;
color: var(--text-muted);
font-size: .92rem;
font-style: italic;
margin-bottom: 2rem;
font-family: 'Source Serif 4', serif;
line-height: 1.7;
}
.section-alt { background: rgba(232,223,208,.4); }
/* ── INTRO BLOCK (elegant section opener) ────────────────────── */
.intro-block {
max-width: 600px;
margin: 0 auto 3.5rem;
text-align: center;
}
.intro-label {
font-family: 'DM Sans', sans-serif;
font-size: .65rem;
font-weight: 600;
letter-spacing: .25rem;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 1rem;
}
.intro-heading {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 500;
line-height: 1.15;
color: var(--dark-brown);
margin-bottom: 1.2rem;
}
.intro-text {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .95rem;
line-height: 1.8;
color: var(--text-muted);
}
/* ── FEATURES (numbered items replacing cards) ───────────────── */
.features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(0,0,0,.06);
}
.feature-item {
padding: 2.5rem 2rem;
text-decoration: none;
border-right: 1px solid rgba(0,0,0,.06);
transition: background .3s ease;
display: block;
position: relative;
}
.feature-item:last-child {
border-right: none;
}
.feature-item:hover {
background: rgba(201,168,76,.03);
}
.feature-item:hover .feature-number {
opacity: .6;
transform: translateY(-3px);
}
.feature-item:hover .feature-title {
color: var(--burgundy);
}
.feature-item::after {
content: '';
position: absolute;
bottom: 0;
left: 2rem;
right: 2rem;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform .4s ease;
}
.feature-item:hover::after { transform: scaleX(1); }
.feature-number {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.8rem;
font-weight: 400;
font-style: italic;
color: var(--gold);
line-height: 1;
display: block;
margin-bottom: 1.2rem;
opacity: .85;
transition: all .4s ease;
}
.feature-item:hover .feature-number {
opacity: 1;
letter-spacing: .02em;
}
.feature-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--dark-brown);
margin-bottom: .5rem;
transition: color .3s ease;
}
.feature-desc {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .85rem;
color: var(--text-muted);
line-height: 1.65;
}
@media (max-width: 1024px) {
.features {
grid-template-columns: repeat(2, 1fr);
}
.feature-item:nth-child(2n) { border-right: none; }
.feature-item:nth-child(1), .feature-item:nth-child(2) {
border-bottom: 1px solid rgba(0,0,0,.06);
}
}
@media (max-width: 560px) {
.features {
grid-template-columns: 1fr;
}
.feature-item {
border-right: none;
border-bottom: 1px solid rgba(0,0,0,.06);
padding: 1.8rem 1.2rem;
}
.feature-item:last-child { border-bottom: none; }
}
/* ── QUOTE SECTION ───────────────────────────────────────────── */
.quote-section {
padding: 5rem 2rem 6rem;
background: var(--white);
text-align: center;
}
.quote-block {
max-width: 650px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 2rem 0;
}
.quote-block::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: var(--gold);
}
.quote-block p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-style: italic;
font-weight: 400;
line-height: 1.6;
color: var(--dark-brown);
opacity: 0;
transform: translateY(20px) scale(.98);
transition: all 1s var(--ease-out);
}
.quote-section.visible .quote-block p {
opacity: 1;
transform: translateY(0) scale(1);
}
.quote-cross {
display: block;
margin: 0 auto 1.5rem;
color: var(--gold);
opacity: 0;
transform: translateY(10px);
transition: all .9s var(--ease-out);
}
.quote-section.visible .quote-cross {
opacity: .8;
transform: translateY(0);
}
.quote-block cite {
display: block;
margin-top: 1.2rem;
font-family: 'DM Sans', sans-serif;
font-size: .68rem;
font-style: normal;
font-weight: 600;
letter-spacing: .2rem;
text-transform: uppercase;
color: var(--gold);
opacity: 0;
transition: opacity .8s .3s ease;
}
.quote-section.visible .quote-block cite {
opacity: 1;
}
/* ── HORAIRES GRID (2 col: text left + cards right) ──────────── */
.horaires-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.horaires-info {
max-width: 400px;
}
.horaires-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.horaire-card {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.8rem 2.2rem;
background: var(--white);
border: 1px solid rgba(201,168,76,.15);
border-radius: 0;
clip-path: polygon(3% 0%, 97% 0%, 100% 15%, 100% 85%, 97% 100%, 3% 100%, 0% 85%, 0% 15%);
transition: all .6s var(--ease-out);
opacity: 0;
transform: translateX(30px);
}
.horaire-card:nth-child(2) { transition-delay: .15s; }
.section.visible .horaire-card { opacity: 1; transform: translateX(0); }
.horaire-card:hover {
background: linear-gradient(135deg, rgba(201,168,76,.04), rgba(201,168,76,.01));
border-color: rgba(201,168,76,.3);
}
.horaire-day {
font-family: 'DM Sans', sans-serif;
font-size: .68rem;
font-weight: 600;
letter-spacing: .15rem;
text-transform: uppercase;
color: var(--text-muted);
min-width: 70px;
}
.horaire-time {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.6rem;
font-weight: 600;
color: var(--dark-brown);
min-width: 65px;
}
.horaire-name {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .9rem;
color: var(--dark-brown);
}
@media (max-width: 768px) {
.horaires-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.horaires-info { text-align: center; max-width: 100%; }
.horaire-card { padding: 1.2rem 1.5rem; }
}
/* ── HISTOIRE SHOWCASE (immersive full-width section) ────────── */
.histoire-showcase {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
overflow: hidden;
}
.histoire-showcase-bg {
position: absolute;
inset: 0;
}
.histoire-showcase-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: contrast(1.1) saturate(1.05);
transition: transform 20s ease;
}
.histoire-showcase:hover .histoire-showcase-bg img {
transform: scale(1.05);
}
.histoire-showcase-overlay {
position: absolute;
inset: 0;
background: linear-gradient(105deg,
rgba(26,8,8,.93) 0%,
rgba(26,8,8,.88) 30%,
rgba(26,8,8,.55) 55%,
rgba(26,8,8,.1) 100%);
}
.histoire-showcase-content {
position: relative;
z-index: 2;
max-width: 520px;
padding: 5rem;
}
/* Animated year counter */
.histoire-showcase-date {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 4rem;
font-weight: 300;
color: var(--gold);
display: block;
margin-bottom: .5rem;
line-height: 1;
opacity: 0;
transform: translateY(20px);
transition: all .8s var(--ease-out);
}
.histoire-showcase.visible .histoire-showcase-date {
opacity: .4;
transform: translateY(0);
}
.histoire-showcase-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.1;
color: var(--cream);
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(25px);
transition: all .8s .15s var(--ease-out);
}
.histoire-showcase.visible .histoire-showcase-title {
opacity: 1;
transform: translateY(0);
}
/* Animated gold line that grows */
.histoire-showcase-line {
width: 0;
height: 1px;
background: var(--gold);
margin-bottom: 2rem;
transition: width 1s .3s var(--ease-out);
}
.histoire-showcase.visible .histoire-showcase-line {
width: 60px;
}
.histoire-showcase-text {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .92rem;
line-height: 1.85;
color: var(--cream-dark);
opacity: 0;
transform: translateY(15px);
transition: all .7s var(--ease-out);
margin-bottom: 1rem;
}
.histoire-showcase-text:nth-child(5) { transition-delay: .4s; }
.histoire-showcase-text:nth-child(6) { transition-delay: .55s; }
.histoire-showcase.visible .histoire-showcase-text {
opacity: .7;
transform: translateY(0);
}
.histoire-showcase-btn {
display: inline-block;
margin-top: 1.5rem;
padding: .5rem 1.1rem;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: .8rem;
font-weight: 600;
color: var(--dark-brown);
background: linear-gradient(135deg, var(--gold), var(--gold-light));
border: none;
border-radius: 2px;
text-decoration: none;
letter-spacing: .04rem;
opacity: 0;
transform: translateY(10px);
transition: all .6s .65s var(--ease-out);
}
.histoire-showcase.visible .histoire-showcase-btn {
opacity: 1;
transform: translateY(0);
}
.histoire-showcase-btn:hover {
box-shadow: 0 3px 14px rgba(201,168,76,.4);
transform: translateY(-2px);
color: var(--dark-brown);
}
@media (max-width: 768px) {
.histoire-showcase {
min-height: 70vh;
}
.histoire-showcase-content {
padding: 3rem 1.5rem;
max-width: 100%;
}
.histoire-showcase-date { font-size: 3rem; }
.histoire-showcase-overlay {
background: linear-gradient(180deg,
rgba(26,8,8,.88) 0%,
rgba(26,8,8,.75) 60%,
rgba(26,8,8,.5) 100%);
}
}
/* ── CARDS ──────────────────────────────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.card {
background: var(--white);
border: 1px solid rgba(232,223,208,.6);
border-radius: 16px;
padding: 2.2rem 1.8rem;
text-align: left;
box-shadow: 0 2px 12px rgba(44,24,16,.06);
transition: all .35s ease;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(44,24,16,.12);
border-color: rgba(201,168,76,.2);
}
.card-icon {
font-size: 1.5rem;
margin-bottom: .8rem;
display: block;
}
.card h3 {
font-family: 'Cormorant Garamond', serif;
color: var(--burgundy);
margin-bottom: .6rem;
font-size: 1.15rem;
}
.card p {
color: var(--text-muted);
font-size: .9rem;
margin-bottom: 1.4rem;
line-height: 1.7;
}
/* ── TIMELINE ───────────────────────────────────────────────── */
.timeline {
position: relative;
padding-left: 3rem;
margin-top: 2.5rem;
}
.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--gold), rgba(201,168,76,.2));
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 2.5rem;
padding: 1.2rem 1.5rem;
background: var(--white);
border-radius: var(--radius-sm);
border: 1px solid rgba(232,223,208,.6);
box-shadow: var(--shadow-sm);
transition: all .3s var(--ease-out);
}
.timeline-item:hover {
box-shadow: var(--shadow);
border-color: rgba(201,168,76,.2);
}
.timeline-item::before {
content: '';
position: absolute;
left: -2.5rem;
top: 1.4rem;
width: 14px;
height: 14px;
background: var(--gold);
border-radius: 50%;
border: 3px solid var(--cream);
box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(201,168,76,.3);
}
.timeline-year {
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
color: var(--burgundy);
font-weight: 700;
margin-bottom: .4rem;
}
.timeline-text { color: var(--dark-brown); font-size: .95rem; line-height: 1.75; }
/* ── HISTOIRE SPLIT (accueil — image left, text right) ───────── */
.histoire-split {
display: grid;
grid-template-columns: 1.1fr 1fr;
min-height: 75vh;
overflow: hidden;
}
.histoire-split-image {
position: relative;
overflow: hidden;
clip-path: inset(0 100% 0 0);
transition: clip-path 1.2s .2s cubic-bezier(.4,0,.2,1);
}
.histoire-split.visible .histoire-split-image {
clip-path: inset(0 0 0 0);
}
.histoire-split-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(1.15) saturate(1.1);
transition: transform 15s ease;
}
.histoire-split:hover .histoire-split-image img {
transform: scale(1.04);
}
.histoire-split-image-fade {
position: absolute;
inset: 0;
background:
linear-gradient(to left, var(--cream) 0%, transparent 25%),
linear-gradient(to top, var(--cream) 0%, transparent 20%),
linear-gradient(to bottom, var(--cream) 0%, transparent 10%);
pointer-events: none;
}
.histoire-split-text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 4rem 4rem 3rem;
background: var(--cream);
}
.histoire-split-text .intro-label { opacity: 0; transform: translateY(15px); transition: all .6s var(--ease-out); }
.histoire-split.visible .histoire-split-text .intro-label { opacity: 1; transform: translateY(0); }
.histoire-split-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 500;
line-height: 1.15;
color: var(--dark-brown);
margin-bottom: 1.2rem;
opacity: 0;
transform: translateY(20px);
transition: all .7s .1s var(--ease-out);
}
.histoire-split.visible .histoire-split-title { opacity: 1; transform: translateY(0); }
.histoire-split-line {
width: 0;
height: 1px;
background: var(--gold);
margin-bottom: 1.5rem;
transition: width 1s .2s var(--ease-out);
}
.histoire-split.visible .histoire-split-line {
width: 50px;
}
.histoire-split-para {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .9rem;
line-height: 1.8;
color: var(--text-muted);
margin-bottom: .8rem;
opacity: 0;
transform: translateY(10px);
transition: all .6s .3s var(--ease-out);
}
.histoire-split.visible .histoire-split-para { opacity: 1; transform: translateY(0); }
.histoire-split-para:nth-child(2) { transition-delay: .4s; }
.histoire-split-stats {
display: flex;
gap: 2.5rem;
margin: 1.5rem 0 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0,0,0,.06);
opacity: 0;
transform: translateY(10px);
transition: all .6s .5s var(--ease-out);
}
.histoire-split.visible .histoire-split-stats { opacity: 1; transform: translateY(0); }
.histoire-split-stat {
display: flex;
flex-direction: column;
}
.histoire-split-stat-num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--gold);
line-height: 1;
opacity: 0;
transform: scale(.8);
transition: all .5s .4s var(--ease-spring);
}
.histoire-split.visible .histoire-split-stat-num {
opacity: 1;
transform: scale(1);
}
.histoire-split-stat-label {
font-family: 'DM Sans', sans-serif;
font-size: .62rem;
font-weight: 600;
letter-spacing: .15rem;
text-transform: uppercase;
color: var(--text-muted);
margin-top: .3rem;
}
@media (max-width: 768px) {
.histoire-split {
grid-template-columns: 1fr;
min-height: auto;
}
.histoire-split-image { height: 45vh; }
.histoire-split-image-fade {
background:
linear-gradient(to top, var(--cream) 0%, transparent 30%);
}
.histoire-split-text { padding: 2rem 1.5rem 3rem; }
.histoire-split-stats { gap: 1.5rem; }
}
/* ── HISTOIRE CINEMATIC (accueil — immersive full-width) ──────── */
.histoire-cinematic {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.histoire-cinematic-bg {
position: absolute;
inset: 0;
}
.histoire-cinematic-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: contrast(1.1) brightness(.95);
transition: transform 20s ease;
}
.histoire-cinematic:hover .histoire-cinematic-bg img {
transform: scale(1.06);
}
.histoire-cinematic-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(26,8,8,.7) 0%, rgba(26,8,8,.55) 40%, rgba(26,8,8,.75) 100%),
radial-gradient(ellipse at center, transparent 20%, rgba(26,8,8,.3) 100%);
}
.histoire-cinematic-inner {
position: relative;
z-index: 2;
text-align: center;
padding: 5rem 2rem;
max-width: 900px;
width: 100%;
}
.histoire-cinematic-label {
font-family: 'DM Sans', sans-serif;
font-size: .65rem;
font-weight: 600;
letter-spacing: .3rem;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(15px);
transition: all .7s var(--ease-out);
}
.histoire-cinematic.visible .histoire-cinematic-label {
opacity: 1;
transform: translateY(0);
}
.histoire-cinematic-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 400;
line-height: 1.1;
color: var(--cream);
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(25px);
transition: all .8s .1s var(--ease-out);
}
.histoire-cinematic.visible .histoire-cinematic-title {
opacity: 1;
transform: translateY(0);
}
.histoire-cinematic-desc {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1rem;
line-height: 1.8;
color: var(--cream-dark);
opacity: 0;
max-width: 500px;
margin: 0 auto 3.5rem;
transition: opacity .8s .25s ease;
}
.histoire-cinematic.visible .histoire-cinematic-desc {
opacity: .65;
}
/* Horizontal timeline */
.histoire-cinematic-timeline {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 3rem;
opacity: 0;
transition: opacity .8s .4s ease;
}
.histoire-cinematic.visible .histoire-cinematic-timeline {
opacity: 1;
}
.histoire-cinematic-step {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
padding: 0 1.2rem;
transition: transform .3s ease;
cursor: default;
}
.histoire-cinematic-step:hover {
transform: translateY(-4px);
}
.hc-year {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--gold);
line-height: 1;
transition: all .3s ease;
}
.histoire-cinematic-step:hover .hc-year {
color: var(--gold-light);
text-shadow: 0 0 20px rgba(201,168,76,.3);
}
.hc-event {
font-family: 'DM Sans', sans-serif;
font-size: .6rem;
font-weight: 500;
letter-spacing: .1rem;
text-transform: uppercase;
color: var(--cream-dark);
opacity: .5;
}
.hc-line {
width: 40px;
height: 1px;
background: var(--gold);
opacity: .25;
flex-shrink: 0;
}
.histoire-cinematic-btn {
opacity: 0;
transform: translateY(10px);
transition: all .6s .6s var(--ease-out);
}
.histoire-cinematic.visible .histoire-cinematic-btn {
opacity: 1;
transform: translateY(0);
}
/* (removed: now defined above as palette-agnostic gold) */
@media (max-width: 768px) {
.histoire-cinematic { min-height: 85vh; }
.histoire-cinematic-inner { padding: 3rem 1.5rem; }
.histoire-cinematic-timeline { flex-wrap: wrap; gap: .5rem; }
.hc-line { width: 20px; }
.hc-year { font-size: 1.4rem; }
.histoire-cinematic-step { padding: 0 .6rem; }
}
/* ── ANIMATED TIMELINE (histoire page) ───────────────────────── */
.tl {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 2rem 0 2rem 80px;
}
/* Vertical line that grows on scroll */
.tl-line {
position: absolute;
left: 30px;
top: 0;
width: 1px;
height: 0;
background: var(--gold);
transition: height 2s cubic-bezier(.4,0,.2,1);
}
.tl.visible .tl-line {
height: 100%;
}
/* Each event */
.tl-event {
position: relative;
padding-bottom: 4rem;
opacity: 0;
transform: translateX(-30px);
transition: all .7s var(--ease-out);
}
.tl-event.visible {
opacity: 1;
transform: translateX(0);
}
/* Dot on the line */
.tl-dot {
position: absolute;
left: -56px;
top: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--cream);
border: 2px solid var(--gold);
z-index: 2;
transform: scale(0);
transition: transform .5s .2s var(--ease-spring);
}
.tl-event.visible .tl-dot {
transform: scale(1);
}
/* Year — big, faded */
.tl-year {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 3.5rem;
font-weight: 300;
color: var(--gold);
opacity: .2;
line-height: 1;
margin-bottom: .3rem;
transform: translateY(10px);
transition: all .6s .1s var(--ease-out);
}
.tl-event.visible .tl-year {
opacity: .25;
transform: translateY(0);
}
/* Card content */
.tl-card {
transform: translateY(10px);
opacity: 0;
transition: all .6s .25s var(--ease-out);
}
.tl-event.visible .tl-card {
transform: translateY(0);
opacity: 1;
}
.tl-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--dark-brown);
margin-bottom: .6rem;
line-height: 1.25;
}
.tl-desc {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .9rem;
line-height: 1.8;
color: var(--text-muted);
}
.tl-desc strong {
color: var(--dark-brown);
}
/* Hover effect on events */
.tl-event:hover .tl-dot {
background: var(--gold);
box-shadow: 0 0 0 4px rgba(201,168,76,.15);
}
.tl-event:hover .tl-year {
opacity: .4;
}
@media (max-width: 768px) {
.tl { padding: 2rem 0 2rem 50px; }
.tl-line { left: 16px; }
.tl-dot { left: -40px; }
.tl-year { font-size: 2.5rem; }
.tl-event { padding-bottom: 3rem; }
}
/* ── CENTERED ALTERNATING TIMELINE ────────────────────────── */
.tl-center {
position: relative;
max-width: 900px;
margin: 0 auto;
padding: 3rem 0;
}
.tl-center-line {
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 0;
background: var(--gold);
transform: translateX(-50%);
transition: height 2.5s cubic-bezier(.4,0,.2,1);
opacity: .4;
}
.tl-center.visible .tl-center-line {
height: 100%;
}
/* Each event row */
.tl-center-event {
display: flex;
align-items: flex-start;
gap: 3rem;
padding-bottom: 4rem;
position: relative;
opacity: 0;
transition: all .8s var(--ease-out);
}
.tl-center-event.visible {
opacity: 1;
}
/* Left event: content on left, dot in center */
.tl-left {
justify-content: flex-end;
padding-right: calc(50% + 1.5rem);
transform: translateX(-30px);
}
.tl-left.visible { transform: translateX(0); }
.tl-left .tl-center-content { text-align: right; }
.tl-left .tl-center-dot {
position: absolute;
left: 50%;
transform: translateX(-50%) scale(0);
}
/* Right event: dot in center, content on right */
.tl-right {
justify-content: flex-start;
padding-left: calc(50% + 1.5rem);
transform: translateX(30px);
}
.tl-right.visible { transform: translateX(0); }
.tl-right .tl-center-content { text-align: left; }
.tl-right .tl-center-dot {
position: absolute;
left: 50%;
transform: translateX(-50%) scale(0);
}
/* Dot */
.tl-center-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--cream);
border: 2px solid var(--gold);
flex-shrink: 0;
z-index: 2;
top: 8px;
transition: transform .5s .3s var(--ease-spring), background .3s ease, box-shadow .3s ease;
}
.tl-center-event.visible .tl-center-dot {
transform: translateX(-50%) scale(1);
}
.tl-center-event:hover .tl-center-dot {
background: var(--gold);
box-shadow: 0 0 0 5px rgba(201,168,76,.12);
}
/* Content */
.tl-center-content {
max-width: 360px;
}
.tl-center-year {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 3rem;
font-weight: 300;
color: var(--gold);
opacity: .2;
line-height: 1;
display: block;
margin-bottom: .3rem;
transition: opacity .5s ease;
}
.tl-center-event:hover .tl-center-year {
opacity: .4;
}
.tl-center-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--dark-brown);
margin-bottom: .5rem;
line-height: 1.25;
}
.tl-center-desc {
font-family: 'Source Serif 4', Georgia, serif;
font-size: .88rem;
line-height: 1.75;
color: var(--text-muted);
}
.tl-center-desc strong { color: var(--dark-brown); }
/* Images in timeline */
.tl-center-img {
margin-top: 1rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.tl-center-img img {
width: 100%;
height: 180px;
object-fit: cover;
transition: transform .6s ease;
}
.tl-center-event:hover .tl-center-img img {
transform: scale(1.03);
}
@media (max-width: 768px) {
.tl-center-line { left: 20px; }
.tl-left, .tl-right {
padding-left: 50px;
padding-right: 0;
justify-content: flex-start;
}
.tl-left { transform: translateY(20px); }
.tl-right { transform: translateY(20px); }
.tl-left.visible, .tl-right.visible { transform: translateY(0); }
.tl-left .tl-center-content,
.tl-right .tl-center-content { text-align: left; max-width: 100%; }
.tl-left .tl-center-dot,
.tl-right .tl-center-dot { left: 20px; }
.tl-center-year { font-size: 2.2rem; }
}
/* ── GALLERY ────────────────────────────────────────────────── */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.2rem;
margin-top: 2rem;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--radius);
aspect-ratio: 4/3;
background: var(--cream-dark);
border: 1px solid rgba(232,223,208,.6);
cursor: zoom-in;
box-shadow: var(--shadow-sm);
transition: box-shadow .3s var(--ease-out);
}
.gallery-item:hover {
box-shadow: var(--shadow-lg);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); }
/* Gallery hover overlay */
.gallery-item::after {
content: 'Voir';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(44,24,16,.4);
color: var(--cream);
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
letter-spacing: .15rem;
text-transform: uppercase;
opacity: 0;
transition: opacity .35s ease;
border-radius: inherit;
z-index: 1;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: .85rem;
font-style: italic;
gap: .5rem;
}
.gallery-placeholder span { font-size: 2rem; }
/* ── SCHEDULE TABLE ─────────────────────────────────────────── */
.schedule-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.5rem 0;
font-size: .88rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(44,24,16,.06);
border: 1px solid rgba(232,223,208,.6);
background: var(--white);
}
.schedule-table th {
background: var(--burgundy);
color: var(--cream);
font-family: 'DM Sans', sans-serif;
font-weight: 600;
padding: .85rem 1.3rem;
text-align: left;
letter-spacing: .06rem;
font-size: .75rem;
text-transform: uppercase;
}
.schedule-table td {
padding: .9rem 1.3rem;
border-bottom: 1px solid rgba(232,223,208,.4);
color: var(--dark-brown);
background: var(--white);
transition: background .2s;
}
.schedule-table tr:hover td { background: var(--cream); }
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table .day {
font-weight: 600;
color: var(--burgundy);
font-family: 'Cormorant Garamond', serif;
}
.feasts-list {
columns: 2;
column-gap: 2rem;
margin-top: 1.5rem;
}
.feasts-list li {
padding: .55rem 0;
border-bottom: 1px solid rgba(232,223,208,.4);
font-size: .93rem;
break-inside: avoid;
display: flex;
gap: .6rem;
align-items: baseline;
transition: padding-left .2s ease;
}
.feasts-list li:hover {
padding-left: .3rem;
}
.feasts-list li::before {
content: '\2726';
color: var(--gold);
font-size: .7rem;
flex-shrink: 0;
}
/* ── OFFICE CARDS (Samedi / Dimanche) ─────────────────────── */
.office-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
max-width: 1080px;
margin: 1.5rem auto 0;
align-items: stretch;
}
.office-card {
display: grid;
grid-template-columns: 122px 1fr;
background: var(--white);
border: 1px solid rgba(46,93,79,.12);
border-radius: 5px;
overflow: hidden;
transition: border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
position: relative;
box-shadow: 0 1px 3px rgba(20,36,31,.05);
}
.office-card:hover {
border-color: rgba(196,154,58,.45);
transform: translateY(-3px);
box-shadow: 0 18px 42px -22px rgba(20,36,31,.4);
}
.office-card-day {
background: linear-gradient(158deg, var(--burgundy-mid) 0%, var(--burgundy) 48%, var(--burgundy-dark) 100%);
color: var(--cream);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.9rem 1rem;
text-align: center;
gap: .55rem;
position: relative;
}
/* filet dore aligne pile sur la jointure vert / creme */
.office-card-day::before {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(224,190,110,.55) 16%, rgba(224,190,110,.55) 84%, transparent);
}
.office-card-day::after {
content: '';
position: absolute;
bottom: 16px; left: 50%;
transform: translateX(-50%);
width: 22px;
height: 1px;
background: var(--gold-light);
opacity: .55;
}
.office-card-weekday {
font-family: 'DM Sans', sans-serif;
font-size: .62rem;
letter-spacing: .3em;
text-indent: .3em;
text-transform: uppercase;
color: var(--gold-light);
font-weight: 500;
}
.office-card-time {
font-family: 'Cormorant Garamond', serif;
font-size: 2.75rem;
line-height: 1;
color: #fff;
font-weight: 400;
font-feature-settings: 'lnum';
}
.office-card-body {
padding: 1.75rem 1.9rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.office-card-kicker {
font-family: 'DM Sans', sans-serif;
font-size: .62rem;
letter-spacing: .28em;
text-indent: .28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .55rem;
}
.office-card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.7rem;
font-weight: 500;
color: var(--dark-brown);
line-height: 1.12;
margin: 0 0 .2rem;
}
.office-card-ru {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.02rem;
color: var(--burgundy);
margin: 0 0 .8rem;
padding-bottom: .8rem;
border-bottom: 1px solid rgba(46,93,79,.1);
opacity: .9;
}
.office-card-note {
font-family: 'Source Serif 4', serif;
font-size: .88rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.office-footnote {
text-align: center;
color: var(--text-muted);
font-family: 'Source Serif 4', serif;
font-style: italic;
font-size: .88rem;
margin: 2rem auto 0;
max-width: 600px;
line-height: 1.7;
}
/* Tablette : 3 encadres trop serres -> on empile */
@media (max-width: 900px) {
.office-cards { grid-template-columns: 1fr; max-width: 560px; }
.office-card { grid-template-columns: 122px 1fr; }
}
@media (max-width: 760px) {
.office-card { grid-template-columns: 1fr; }
.office-card-day { flex-direction: row; gap: 1rem; padding: 1rem 1.4rem; align-items: baseline; justify-content: flex-start; }
.office-card-day::before { top: auto; bottom: 0; left: 1.4rem; right: 1.4rem; width: auto; height: 1px; background: linear-gradient(to right, transparent, rgba(224,190,110,.55), transparent); }
.office-card-day::after { display: none; }
.office-card-time { font-size: 1.9rem; }
}
/* ── FEASTS LIST — refined ─────────────────────────────────── */
.donate-hero {
background: linear-gradient(160deg, var(--burgundy-dark) 0%, var(--burgundy) 55%, var(--burgundy-mid) 100%);
color: var(--cream);
padding: 6rem 2rem 5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.donate-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 10%, rgba(201,168,76,.12), transparent 45%),
radial-gradient(ellipse at 85% 90%, rgba(201,168,76,.10), transparent 50%);
pointer-events: none;
}
.donate-hero > * { position: relative; z-index: 1; }
.donate-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: .6rem;
font-family: 'DM Sans', sans-serif;
font-size: .68rem;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.4rem;
}
.donate-hero-eyebrow::before,
.donate-hero-eyebrow::after {
content: '';
width: 28px;
height: 1px;
background: var(--gold);
opacity: .7;
}
.donate-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(2.4rem, 5vw, 3.8rem);
line-height: 1.08;
color: var(--cream);
margin: 0 auto .8rem;
max-width: 18ch;
}
.donate-hero h1 em {
font-style: italic;
color: var(--gold-light);
}
.donate-hero-quote {
font-family: 'Source Serif 4', serif;
font-style: italic;
font-size: 1rem;
color: var(--cream-dark);
max-width: 520px;
margin: 1rem auto 0;
line-height: 1.7;
opacity: .88;
}
.donate-hero .hero-title { margin-bottom: .5rem; }
.progress-wrap {
max-width: 560px;
margin: 2.5rem auto;
text-align: center;
}
.progress-label {
display: flex;
justify-content: space-between;
font-size: .85rem;
font-family: 'DM Sans', sans-serif;
color: var(--cream-dark);
margin-bottom: .6rem;
}
.progress-bar {
height: 14px;
background: rgba(255,255,255,.12);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(201,168,76,.2);
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
border-radius: var(--radius-lg);
transition: width 1.2s var(--ease-out);
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
animation: progressShine 2.5s ease infinite;
}
@keyframes progressShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.bank-box {
background: var(--white);
border: 1px solid rgba(201,168,76,.25);
border-radius: var(--radius);
padding: 2.2rem;
max-width: 600px;
margin: 2rem auto;
box-shadow: var(--shadow);
}
.bank-box h3 {
font-family: 'Cormorant Garamond', serif;
color: var(--burgundy);
margin-bottom: 1.4rem;
font-size: 1.15rem;
text-align: center;
}
.bank-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: .75rem 0;
border-bottom: 1px solid rgba(232,223,208,.4);
font-size: .93rem;
gap: 1rem;
}
.bank-row:last-child { border-bottom: none; }
.bank-label {
font-family: 'DM Sans', sans-serif;
color: var(--text-muted);
font-size: .78rem;
font-weight: 600;
letter-spacing: .06rem;
text-transform: uppercase;
min-width: 130px;
flex-shrink: 0;
}
.bank-value {
color: var(--dark-brown);
font-weight: 500;
word-break: break-all;
text-align: right;
}
.bank-value.placeholder {
color: var(--text-muted);
font-style: italic;
}
.bank-ref {
background: linear-gradient(135deg, var(--gold-pale), rgba(237,217,138,.3));
border: 1px solid rgba(201,168,76,.4);
border-radius: var(--radius-sm);
padding: .45rem .9rem;
font-weight: 700;
color: var(--burgundy);
font-family: 'DM Sans', sans-serif;
letter-spacing: .1rem;
text-transform: uppercase;
font-size: .82rem;
}
.donation-note {
max-width: 600px;
margin: 1.5rem auto 0;
text-align: center;
font-size: .88rem;
color: var(--text-muted);
font-style: italic;
line-height: 1.7;
}
/* ── CONTACT ────────────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 2.5rem;
}
.contact-info h3 {
font-family: 'Cormorant Garamond', serif;
color: var(--burgundy);
font-size: 1.1rem;
margin-bottom: 1.2rem;
}
.contact-info p {
color: var(--dark-brown);
margin-bottom: .7rem;
font-size: .95rem;
display: flex;
gap: .6rem;
align-items: flex-start;
}
.contact-info .icon { color: var(--gold); flex-shrink: 0; }
.map-wrap {
border: 1px solid rgba(201, 168, 76, 0.35);
border-radius: var(--radius);
overflow: hidden;
height: 420px;
box-shadow: 0 8px 32px rgba(44, 24, 16, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
background: var(--cream);
}
.map-wrap iframe { width: 100%; height: 100%; border: none; }
/* Leaflet overrides — integration palette */
.leaflet-container {
font-family: 'DM Sans', sans-serif;
background: var(--cream) !important;
}
.leaflet-control-zoom a,
.leaflet-control-zoom a:hover {
background: var(--cream);
color: var(--burgundy);
border-color: rgba(201, 168, 76, 0.35);
font-weight: 500;
}
.leaflet-control-zoom a:hover { background: var(--gold-pale); }
.leaflet-control-attribution {
background: rgba(255, 255, 255, 0.85) !important;
font-size: 10px !important;
color: var(--text-muted) !important;
padding: 2px 8px !important;
}
.leaflet-control-attribution a { color: var(--gold-ink, var(--burgundy)) !important; }
.gold-pin { background: transparent !important; border: none !important; }
.leaflet-popup-content-wrapper {
background: var(--cream);
border: 1px solid rgba(201, 168, 76, 0.35);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(44, 24, 16, 0.2);
font-family: 'DM Sans', sans-serif;
}
.leaflet-popup-content {
margin: 12px 16px;
font-size: 13px;
line-height: 1.5;
color: var(--dark-brown);
}
.leaflet-popup-content strong {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 15px;
color: var(--burgundy);
letter-spacing: 0.01em;
}
.leaflet-popup-tip { background: var(--cream); border: 1px solid rgba(201, 168, 76, 0.35); }
.leaflet-popup-close-button { color: var(--text-muted) !important; }
/* Contact form */
.contact-form { margin-top: 2.5rem; }
.form-group { margin-bottom: 1.4rem; }
.form-group label {
display: block;
font-family: 'DM Sans', sans-serif;
font-size: .78rem;
font-weight: 600;
letter-spacing: .06rem;
color: var(--dark-brown);
margin-bottom: .5rem;
text-transform: uppercase;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: .85rem 1.1rem;
border: 1.5px solid rgba(232,223,208,.8);
border-radius: 8px;
font-family: 'Source Serif 4', serif;
font-size: .95rem;
color: var(--dark-brown);
background: var(--white);
transition: border-color .25s, box-shadow .25s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 4px rgba(201,168,76,.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
opacity: .6;
}
.form-group textarea { resize: vertical; min-height: 140px; }
/* ── CHURCH ILLUSTRATION ──────────────────────────────────── */
.church-illustration {
width: 160px;
height: auto;
margin: 0 auto 1.5rem;
display: block;
filter: invert(1) brightness(0.85) sepia(1) hue-rotate(-10deg) saturate(3);
opacity: .8;
}
/* Church photo in "Notre paroisse" section */
.church-photo-hero {
width: 100%;
max-width: 700px;
height: auto;
margin: 0 auto 3rem;
display: block;
border-radius: var(--radius);
box-shadow: 0 8px 40px rgba(44,24,16,.12);
transition: transform .8s ease, box-shadow .8s ease;
}
.church-photo-hero:hover {
transform: scale(1.01);
box-shadow: 0 12px 50px rgba(44,24,16,.18);
}
/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
background: var(--burgundy-ink);
color: var(--cream-dark);
padding: 0;
position: relative;
overflow: hidden;
}
/* Thin gold stripe at top (static, refined) */
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.35) 20%, rgba(201,168,76,.55) 50%, rgba(201,168,76,.35) 80%, transparent 100%);
}
/* Subtle radial wash */
footer::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 900px 400px at 50% 0%, rgba(201,168,76,.05), transparent 60%);
pointer-events: none;
}
/* ── Footer CTA banner — refined, centered ──────────────────── */
.footer-cta {
position: relative;
z-index: 1;
text-align: center;
padding: 4.5rem 2rem 3rem;
border-bottom: 1px solid rgba(201,168,76,.08);
}
.footer-cta-inner {
max-width: 620px;
margin: 0 auto;
padding: 0;
background: none;
border: none;
}
/* Tiny eyebrow */
.footer-cta-inner::before {
content: 'Restauration';
display: block;
font-family: 'DM Sans', sans-serif;
font-size: .62rem;
letter-spacing: .3rem;
text-transform: uppercase;
color: var(--gold);
opacity: .55;
margin-bottom: 1.4rem;
}
.footer-cta-text {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
color: var(--cream);
margin-bottom: .9rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: -.005em;
}
.footer-cta-sub {
font-family: 'Source Serif 4', serif;
font-size: .95rem;
color: var(--cream-dark);
opacity: .65;
margin: 0 auto 2rem;
max-width: 460px;
line-height: 1.7;
font-style: italic;
}
/* ── Footer quote/verse ─────────────────────────────────────── */
.footer-quote {
position: relative;
z-index: 1;
text-align: center;
padding: 2.5rem 2rem 0;
max-width: 580px;
margin: 0 auto;
}
.footer-quote blockquote {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
color: var(--cream);
opacity: .55;
font-style: italic;
line-height: 1.65;
position: relative;
padding: 0 1.5rem;
font-weight: 400;
}
.footer-quote blockquote::before,
.footer-quote blockquote::after {
font-size: 2.2rem;
color: var(--gold);
opacity: .45;
position: absolute;
font-family: Georgia, serif;
line-height: 1;
}
.footer-quote blockquote::before {
content: '\201C';
top: -.2rem;
left: 0;
}
.footer-quote blockquote::after {
content: '\201D';
bottom: -.6rem;
right: 0;
}
.footer-quote cite {
display: block;
font-family: 'DM Sans', sans-serif;
font-size: .66rem;
font-style: normal;
color: var(--gold);
opacity: .6;
letter-spacing: .22rem;
text-transform: uppercase;
margin-top: 1rem;
font-weight: 600;
}
/* ── Footer ornamental divider ──────────────────────────────── */
.footer-divider-ornament {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
padding: 2.5rem 2rem 3rem;
}
.footer-divider-ornament::before,
.footer-divider-ornament::after {
content: '';
flex: 1;
max-width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent);
}
/* Footer : eglise (or) UNIQUEMENT sur la marque. L'ornement separateur
garde la CROIX pour eviter la repetition avec la marque juste en dessous. */
.footer-brand svg > * { display: none; }
.footer-brand svg {
background: var(--gold);
-webkit-mask: url('assets/church-bold.svg') center / contain no-repeat;
mask: url('assets/church-bold.svg') center / contain no-repeat;
}
.footer-divider-ornament svg {
width: 18px;
height: 26px;
opacity: .5;
flex-shrink: 0;
}
/* ── Footer columns ─────────────────────────────────────────── */
.footer-main {
position: relative;
z-index: 1;
max-width: 1080px;
margin: 0 auto;
padding: 0 2.5rem 3.5rem;
display: grid;
grid-template-columns: 1.4fr 1fr 1.1fr;
gap: 4rem;
}
.footer-col {}
/* Col 1: Brand */
.footer-brand {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.2rem;
}
.footer-brand svg {
width: 50px;
height: 45px;
flex-shrink: 0;
opacity: .8;
margin-top: 0;
filter: drop-shadow(0 0 10px rgba(201,168,76,.25));
transition: opacity .5s ease;
}
.footer-brand-name {
font-family: 'Cormorant Garamond', serif;
color: var(--cream);
font-size: 1.2rem;
line-height: 1.25;
font-weight: 600;
letter-spacing: -.01em;
}
.footer-brand-sub {
font-family: 'DM Sans', sans-serif;
font-size: .64rem;
color: var(--gold);
opacity: .75;
letter-spacing: .22rem;
text-transform: uppercase;
margin-top: .35rem;
display: block;
font-weight: 600;
}
.footer-desc {
font-size: .85rem;
color: var(--cream-dark);
opacity: .6;
line-height: 1.75;
max-width: 300px;
margin-bottom: 1.2rem;
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: 'DM Sans', sans-serif;
font-size: .62rem;
letter-spacing: .22rem;
text-transform: uppercase;
color: var(--gold);
opacity: .85;
padding: .45rem .9rem;
border: 1px solid rgba(201,168,76,.3);
border-radius: 2px;
font-weight: 600;
background: rgba(201,168,76,.04);
}
.footer-badge::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
background: var(--gold);
border-radius: 50%;
opacity: .8;
}
/* Col 2: Navigation */
.footer-nav-title {
font-family: 'DM Sans', sans-serif;
font-size: .64rem;
font-weight: 600;
letter-spacing: .24rem;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.6rem;
opacity: .85;
position: relative;
padding-bottom: .8rem;
}
.footer-nav-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 1px;
background: var(--gold);
opacity: .5;
transition: width .3s ease;
}
.footer-col:hover .footer-nav-title::after {
width: 48px;
opacity: .75;
}
.footer-nav-links {
display: flex;
flex-direction: column;
gap: .1rem;
background: none;
border: none;
position: static;
z-index: auto;
}
.footer-nav-links a {
color: var(--cream-dark);
font-family: 'DM Sans', sans-serif;
font-size: .86rem;
padding: .35rem 0;
transition: color .25s var(--ease-out), padding .25s var(--ease-out);
display: inline-flex;
align-items: center;
gap: .7rem;
opacity: .75;
width: fit-content;
}
.footer-nav-links a::before {
content: '';
display: block;
width: 0;
height: 1px;
background: var(--gold);
transition: width .3s var(--ease-out);
flex-shrink: 0;
}
.footer-nav-links a:hover {
color: var(--gold-light);
opacity: 1;
}
.footer-nav-links a:hover::before {
width: 16px;
}
/* Col 3: Contact */
.footer-contact-item {
display: flex;
gap: .85rem;
align-items: flex-start;
margin-bottom: .6rem;
padding: .9rem 0;
background: none;
border: none;
border-bottom: 1px solid rgba(201,168,76,.08);
border-radius: 0;
font-family: 'DM Sans', sans-serif;
font-size: .82rem;
color: var(--cream-dark);
opacity: .85;
line-height: 1.6;
transition: opacity .25s ease;
cursor: default;
}
.footer-contact-item:last-of-type {
border-bottom: none;
}
.footer-contact-icon {
color: var(--gold);
font-size: 1rem;
flex-shrink: 0;
opacity: .8;
margin-top: 2px;
width: 18px;
text-align: center;
}
/* Map link */
.footer-map-link {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: 'DM Sans', sans-serif;
font-size: .7rem;
letter-spacing: .15rem;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
opacity: .85;
margin-top: 1rem;
padding: .5rem 0;
transition: all .25s ease;
text-decoration: none;
border-bottom: 1px solid rgba(201,168,76,.3);
width: fit-content;
}
.footer-map-link:hover {
opacity: 1;
color: var(--gold-light);
border-color: var(--gold);
}
.footer-map-link::after {
content: '\2197';
font-size: .85rem;
transition: transform .25s ease;
}
.footer-map-link:hover::after {
transform: translate(2px, -2px);
}
/* ── Bottom bar ─────────────────────────────────────────────── */
.footer-bottom {
position: relative;
z-index: 1;
border-top: 1px solid rgba(201,168,76,.1);
padding: 1.5rem 2.5rem;
background: rgba(0,0,0,.25);
}
.footer-bottom-inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copy {
font-family: 'DM Sans', sans-serif;
font-size: .7rem;
color: var(--cream-dark);
opacity: .5;
letter-spacing: .02rem;
}
.footer-lang-switch {
display: flex;
gap: 0;
padding: 0;
background: none;
border: 1px solid rgba(201,168,76,.2);
border-radius: 2px;
overflow: hidden;
}
.footer-lang-switch a {
font-family: 'DM Sans', sans-serif;
font-size: .66rem;
font-weight: 600;
color: var(--cream-dark);
opacity: .6;
padding: .4rem .9rem;
border: none;
border-radius: 0;
transition: all .25s ease;
letter-spacing: .18rem;
}
.footer-lang-switch a:hover {
opacity: 1;
color: var(--gold-light);
background: rgba(201,168,76,.08);
}
.footer-lang-switch a.active {
opacity: 1;
color: var(--dark-brown);
background: var(--gold);
}
/* ── Back to top ────────────────────────────────────────────── */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 44px;
height: 44px;
background: var(--burgundy);
border: 1px solid rgba(201,168,76,.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-light);
font-size: 1.2rem;
cursor: pointer;
z-index: 90;
opacity: 0;
transform: translateY(10px);
transition: all .35s var(--ease-out);
pointer-events: none;
box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--burgundy-mid);
border-color: rgba(201,168,76,.4);
transform: translateY(-3px) rotate(-5deg);
box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
/* ── CARD NUM (roman numerals in donation cards) ──────────── */
.card-num {
display: inline-block;
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 400;
color: var(--gold);
line-height: 1;
margin-bottom: .4rem;
padding-bottom: .4rem;
border-bottom: 1px solid rgba(201,168,76,.35);
}
/* ── CONTACT LINE (no emoji icons) ────────────────────────── */
.contact-line {
position: relative;
padding-left: 1.2rem;
margin-bottom: .55rem;
line-height: 1.65;
}
.contact-line::before {
content: '';
position: absolute;
left: 0;
top: .72em;
width: 8px;
height: 1px;
background: var(--gold);
}
/* ── PAGE HEADER — editorial (inner pages) ────────────────── */
.page-header {
background: var(--cream);
padding: 6rem 2rem 4.5rem;
text-align: center;
position: relative;
border-bottom: 1px solid rgba(107,75,60,.08);
}
.page-header::before { display: none; }
.page-header-eyebrow {
display: inline-flex;
align-items: center;
gap: .6rem;
font-family: 'DM Sans', sans-serif;
font-size: .68rem;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.6rem;
animation: fadeUp .6s var(--ease-out) both;
}
.page-header-eyebrow::before,
.page-header-eyebrow::after {
content: '';
width: 28px;
height: 1px;
background: var(--gold);
opacity: .6;
}
.page-header h1 {
font-family: 'Cormorant Garamond', serif;
color: var(--dark-brown);
font-size: clamp(2.4rem, 5.5vw, 4.2rem);
font-weight: 400;
line-height: 1.08;
letter-spacing: -.01em;
margin: 0 auto .6rem;
max-width: 20ch;
animation: fadeUp .6s .05s var(--ease-out) both;
}
.page-header h1 em {
font-style: italic;
color: var(--burgundy);
}
.page-header h1::after { display: none; }
.page-header p {
color: var(--text-muted);
font-family: 'Source Serif 4', serif;
font-style: italic;
font-size: 1.02rem;
max-width: 40ch;
margin: .4rem auto 0;
animation: fadeUp .6s .1s var(--ease-out) both;
}
.page-header-rule {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, var(--gold), transparent);
margin: 2rem auto 0;
animation: growDown .6s .25s var(--ease-out) both;
}
@keyframes growDown {
from { height: 0; opacity: 0; }
to { height: 40px; opacity: 1; }
}
/* Photo band under page header */
.page-header-band {
position: relative;
height: 260px;
overflow: hidden;
background: var(--dark-brown);
}
.page-header-band img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
opacity: .88;
animation: bandZoom 14s var(--ease-out) both;
}
@keyframes bandZoom {
from { transform: scale(1.08); }
to { transform: scale(1); }
}
.page-header-band::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(44,24,16,.15) 0%, rgba(44,24,16,.05) 50%, rgba(44,24,16,.25) 100%);
pointer-events: none;
}
@media (max-width: 768px) {
.page-header { padding: 4rem 1.2rem 3rem; }
.page-header-band { height: 180px; }
}
/* ── PROSE (history, etc.) ──────────────────────────────────── */
.prose {
max-width: 720px;
margin: 0 auto;
font-family: 'Source Serif 4', Georgia, 'Book Antiqua', serif;
font-size: 1rem;
line-height: 1.85;
color: var(--dark-brown);
}
.prose p { margin-bottom: 1.5rem; }
.prose h2 {
font-family: 'Cormorant Garamond', serif;
color: var(--burgundy);
font-size: 1.35rem;
margin: 3rem 0 1rem;
padding-left: 1.2rem;
border-left: 3px solid var(--gold);
line-height: 1.3;
}
.prose h3 {
font-family: 'Cormorant Garamond', serif;
color: var(--burgundy);
font-size: 1.15rem;
font-weight: 600;
font-style: italic;
margin: 2.4rem 0 0.9rem;
letter-spacing: 0.01em;
line-height: 1.35;
}
.prose h3::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1px;
background: var(--gold);
vertical-align: middle;
margin-right: 0.7rem;
transform: translateY(-2px);
}
.prose .prose-closing {
margin-top: 2.2rem;
padding-top: 1.6rem;
border-top: 1px solid var(--cream-dark);
text-align: center;
font-size: 1.05rem;
color: var(--burgundy);
}
body.dark .prose h3 { color: var(--gold-ink); }
body.dark .prose .prose-closing {
border-top-color: var(--ink-soft);
color: var(--gold-ink);
}
/* ── SCROLL REVEAL ANIMATIONS ─────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-right {
opacity: 0;
transform: translateX(40px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-right.visible {
opacity: 1;
transform: translateX(0);
}
/* Stagger children */
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: .24s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: .36s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: .48s; }
.reveal-stagger.visible > * {
opacity: 1;
transform: translateY(0);
}
/* ── GALLERY LIGHTBOX ─────────────────────────────────────── */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(44,24,16,.92);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .4s ease;
cursor: zoom-out;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lightbox-overlay.active {
opacity: 1;
pointer-events: auto;
}
.lightbox-overlay img {
max-width: 88vw;
max-height: 84vh;
border-radius: var(--radius-sm);
box-shadow: 0 16px 60px rgba(0,0,0,.5);
transform: scale(.9);
transition: transform .5s var(--ease-spring);
}
.lightbox-overlay.active img {
transform: scale(1);
}
.lightbox-close {
position: absolute;
top: 1.5rem;
right: 2rem;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.1);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-light);
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
transition: all .25s ease;
}
.lightbox-close:hover {
background: rgba(255,255,255,.15);
transform: rotate(90deg);
}
.lightbox-caption {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
color: var(--cream-dark);
font-family: 'Cormorant Garamond', serif;
font-size: .92rem;
letter-spacing: .05rem;
text-align: center;
opacity: .8;
}
/* ── RESPONSIVE ─────────────────────────────────────────────── */
/* Nav mobile : MEME seuil (1200px) que le hamburger de site.css, sinon
le menu deroulant ne s'ouvrirait pas dans la plage concernee (bug navigation). */
@media (max-width: 1200px) {
/* Barre figee : logo a gauche, hamburger a droite. Le menu s'ouvre en
panneau OVERLAY (position: fixed) -> la barre et le logo ne bougent JAMAIS. */
.nav-inner { flex-wrap: nowrap; height: 64px; min-height: 64px; padding: .5rem 1.2rem; position: relative; }
.site-logo { min-width: 0; }
.nav-tools { display: none !important; } /* mobile = logo + hamburger seulement */
.nav-toggle { display: flex !important; margin-left: auto; }
.nav-links {
display: flex;
position: absolute;
top: 100%;
left: -1.2rem;
right: -1.2rem;
flex-direction: column;
gap: .3rem;
padding: 1.1rem 1.2rem 1.5rem;
background: var(--stone);
border-top: 1px solid rgba(0,0,0,.06);
box-shadow: 0 22px 44px rgba(0,0,0,.20);
transform: translateY(-14px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .26s ease, transform .26s ease, visibility .26s;
z-index: 200;
}
.nav-links.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.nav-links a {
border-bottom: none;
border-radius: 12px;
text-align: center;
padding: 1rem;
font-size: .98rem;
letter-spacing: .02rem;
opacity: 1;
}
.nav-links a.active,
.nav-links a:hover {
background: rgba(0,0,0,.05);
color: var(--dark-brown);
}
.nav-links a.active::after { display: none; }
.nav-links a.nav-donate {
margin-top: .5rem;
border-radius: 12px;
}
/* Le panneau mobile suit le theme sombre */
body.dark .nav-links { background: var(--cream); border-top-color: rgba(255,255,255,.08); }
body.dark .nav-links a.active,
body.dark .nav-links a:hover { background: rgba(255,255,255,.06); }
}
/* Petits mobiles : logo (icone eglise) + hamburger uniquement. */
@media (max-width: 560px) {
.logo-text { display: none; }
}
@media (max-width: 768px) {
.hero { min-height: 75vh; }
.section { padding: 3.5rem 1.2rem; }
.contact-grid { grid-template-columns: 1fr; }
.feasts-list { columns: 1; }
.header-inner { justify-content: center; gap: .6rem; }
.timeline { padding-left: 2.5rem; }
.timeline-item { padding: 1rem 1.2rem; }
.footer-cta { padding: 2rem 1.2rem 0; }
.footer-cta-inner { padding: 1.4rem 1.5rem; }
.footer-quote { padding: 1.5rem 1.2rem 0; }
.footer-divider-ornament { padding: 1.2rem; }
.footer-main {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1.5rem;
text-align: center;
}
.footer-brand { justify-content: center; }
.footer-desc { margin: 0 auto; }
.footer-nav-title { margin-top: .5rem; }
.footer-nav-title::after { left: 50%; transform: translateX(-50%); }
.footer-nav-links { align-items: center; }
.footer-nav-links a { margin-left: 0; text-align: center; padding: .7rem 0; }
.footer-contact-item { justify-content: center; text-align: left; }
.footer-bottom-inner { justify-content: center; }
.footer-lang-switch a { padding: .55rem 1rem; }
.back-to-top { bottom: 1.2rem; right: 1.2rem; width: 40px; height: 40px; }
}
@media (max-width: 480px) {
.section { padding: 2.5rem 1rem; }
.card-grid { grid-template-columns: 1fr; }
.bank-row { flex-direction: column; }
.bank-value { text-align: left; overflow-wrap: anywhere; }
.hero { min-height: 60vh; }
.hero-content { padding: 3rem 1.2rem; }
/* carte horaire accueil : ne pas forcer de largeurs mini qui debordent */
.horaire-card { flex-wrap: wrap; }
.horaire-day, .horaire-time { min-width: 0; }
/* nom du prechargeur sur tres petit ecran */
.site-loader-name { font-size: 1.25rem; }
}
/* ═══════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════
FOOTER v5 — moderne traditionaliste orthodoxe
Cormorant partout, ornements byzantins, texture vellin, chiffres romains
═══════════════════════════════════════════════════════════════ */
.footer-v2 {
position: relative;
background:
/* texture grain subtile (noise SVG inline) */
url("data:image/svg+xml;utf8,"),
/* halo or chaud à droite */
radial-gradient(ellipse 60% 80% at 88% 8%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%),
/* vignette */
radial-gradient(ellipse 110% 90% at 50% 100%, color-mix(in srgb, #000 35%, transparent), transparent 65%),
/* fond vert profond */
linear-gradient(180deg, var(--burgundy-deep, #1B3D33) 0%, var(--burgundy-ink, #0E261F) 60%, #07140F 100%);
color: var(--cream-dark);
overflow: hidden;
isolation: isolate;
}
/* fine ligne or biseautée + petit ornement central au-dessus */
.footer-v2::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--gold) 55%, transparent) 28%,
var(--gold) 50%,
color-mix(in srgb, var(--gold) 55%, transparent) 72%,
transparent);
z-index: 4;
opacity: .8;
}
/* arche byzantine décorative côté droit */
.footer-v2::after {
content: '';
position: absolute;
top: 8%; right: -10%;
width: 600px; height: 600px;
background:
radial-gradient(circle at center, transparent 0 38%, color-mix(in srgb, var(--gold) 12%, transparent) 38.5% 39.2%, transparent 39.5% 50%, color-mix(in srgb, var(--gold) 6%, transparent) 50.5% 51%, transparent 51.5%);
pointer-events: none;
z-index: 0;
opacity: .6;
mask: radial-gradient(ellipse 70% 90% at 100% 50%, #000, transparent 75%);
-webkit-mask: radial-gradient(ellipse 70% 90% at 100% 50%, #000, transparent 75%);
}
/* ── Bandeau verset (style manuscrit) ─────────────────────────── */
.fv2-marquee {
position: relative;
overflow: hidden;
padding: .7rem 0;
background: color-mix(in srgb, #000 25%, transparent);
border-top: 1px solid color-mix(in srgb, var(--gold) 10%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
z-index: 1;
}
.fv2-marquee::before,
.fv2-marquee::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 50px;
z-index: 2;
pointer-events: none;
}
.fv2-marquee::before { left: 0; background: linear-gradient(90deg, var(--burgundy-deep, #1B3D33), transparent); }
.fv2-marquee::after { right: 0; background: linear-gradient(-90deg, var(--burgundy-deep, #1B3D33), transparent); }
.fv2-marquee-track {
display: inline-flex;
align-items: center;
gap: 1.5rem;
white-space: nowrap;
font-family: 'Cormorant Garamond', serif;
font-size: .78rem;
font-style: italic;
font-weight: 400;
color: var(--cream);
opacity: .55;
letter-spacing: .015em;
animation: fv2-marquee 55s linear infinite;
will-change: transform;
}
.fv2-marquee-sep {
color: var(--gold);
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: .9rem;
opacity: .8;
line-height: 0;
}
@keyframes fv2-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.fv2-marquee-track { animation: none; }
}
/* ── Hero ─────────────────────────────────────────────────────── */
.fv2-hero {
position: relative; z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 3.2rem 3rem 2.2rem;
text-align: center;
}
.fv2-hero-meta {
display: inline-flex;
align-items: center;
gap: .7rem;
margin-bottom: 1.4rem;
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .62rem;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 500;
color: var(--gold);
opacity: .8;
}
.fv2-meta-num { letter-spacing: .28em; }
.fv2-meta-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--gold);
opacity: .7;
}
.fv2-hero-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.9rem, 4vw, 3.4rem);
line-height: 1;
letter-spacing: -.015em;
color: var(--cream);
margin: 0 0 1.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: .3em;
}
.fv2-hero-title > span { display: inline-block; }
.fv2-hero-em em {
font-style: italic;
font-weight: 400;
color: var(--gold);
text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent);
}
.fv2-hero-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
padding-top: 1.4rem;
position: relative;
border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
}
.fv2-hero-bottom::before {
content: '✦';
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
font-size: .8rem;
color: var(--gold);
background: var(--burgundy-deep, #1B3D33);
padding: 0 .6rem;
opacity: .8;
}
.fv2-hero-sub {
font-family: 'Cormorant Garamond', serif;
font-size: .92rem;
font-style: italic;
line-height: 1.55;
font-weight: 400;
color: var(--cream-dark);
opacity: .72;
max-width: 480px;
margin: 0;
text-align: center;
}
/* ── Bouton CTA orthodoxe — cartouche or, encres profondes ────── */
.fv2-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: .7rem;
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .68rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
background: transparent;
padding: .85rem 1.8rem;
border: none;
text-decoration: none;
transition: color .45s var(--ease-out, cubic-bezier(.2,.7,.2,1));
isolation: isolate;
cursor: pointer;
white-space: nowrap;
}
.fv2-cta-btn::before {
content: '';
position: absolute; inset: 0;
border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
transition: border-color .4s;
z-index: -1;
}
.fv2-cta-btn::after {
content: '';
position: absolute; left: 0; top: 0;
width: 0; height: 100%;
background: var(--gold);
transition: width .45s var(--ease-out, cubic-bezier(.7,0,.2,1));
z-index: -1;
}
.fv2-cta-btn .fv2-btn-arrow {
display: inline-flex;
transition: transform .4s var(--ease-out, ease);
}
.fv2-cta-btn .fv2-btn-arrow svg { width: 16px; height: 11px; }
.fv2-cta-btn:hover { color: var(--burgundy-ink, #0E261F); }
.fv2-cta-btn:hover::before { border-color: var(--gold); }
.fv2-cta-btn:hover::after { width: 100%; }
.fv2-cta-btn:hover .fv2-btn-arrow { transform: translateX(5px); }
.fv2-cta-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* ── Grille modulaire ─────────────────────────────────────────── */
.fv2-grid {
position: relative; z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 0 3rem 2rem;
display: grid;
grid-template-columns: 1.5fr .9fr 1fr 1fr;
gap: 0;
border-top: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
}
/* arabesque sous le hero */
.fv2-grid::before {
content: '';
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
width: 80px; height: 12px;
background:
radial-gradient(circle at center, var(--gold) 0 1.5px, transparent 1.6px),
radial-gradient(circle at 20% center, var(--gold) 0 1px, transparent 1.5px),
radial-gradient(circle at 80% center, var(--gold) 0 1px, transparent 1.5px);
opacity: .8;
}
.fv2-cell {
position: relative;
padding: 2rem 1.4rem 2rem 0;
display: flex;
flex-direction: column;
}
.fv2-cell + .fv2-cell { padding-left: 1.4rem; }
.fv2-cell + .fv2-cell::before {
content: '';
position: absolute;
left: 0; top: 1rem; bottom: 1rem;
width: 1px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 18%, transparent) 30%, color-mix(in srgb, var(--gold) 18%, transparent) 70%, transparent);
}
.fv2-cell-num {
font-family: 'Inter', 'DM Sans', sans-serif;
font-weight: 600;
font-size: .58rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
opacity: .6;
margin-bottom: .5rem;
}
.fv2-cell-num::before {
content: '— ';
opacity: .55;
}
.fv2-cell-label {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-weight: 500;
color: var(--cream);
margin-bottom: 1.1rem;
letter-spacing: -.005em;
position: relative;
padding-bottom: .65rem;
}
.fv2-cell-label::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 20px; height: 1px;
background: var(--gold);
opacity: .5;
}
/* Cell — identity */
.fv2-identity {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-bottom: .8rem;
}
.fv2-id-cross {
width: 18px; height: 25px;
fill: var(--gold);
flex-shrink: 0;
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gold) 40%, transparent));
}
.fv2-id-text { display: flex; flex-direction: column; gap: .2rem; }
.fv2-id-name {
font-family: 'Cormorant Garamond', serif;
font-size: .92rem;
font-weight: 500;
color: var(--cream);
line-height: 1.2;
}
.fv2-id-sub {
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .55rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
opacity: .75;
}
.fv2-id-desc {
font-family: 'Source Serif 4', 'Cormorant Garamond', serif;
font-size: .78rem;
line-height: 1.65;
color: var(--cream-dark);
opacity: .65;
margin: 0 0 .9rem;
max-width: 320px;
font-style: italic;
}
.fv2-pills {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.fv2-pill {
display: inline-flex;
align-items: center;
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .54rem;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
padding: .3rem .7rem;
border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
background: color-mix(in srgb, var(--gold) 4%, transparent);
border-radius: 999px;
}
/* Cell — nav */
.fv2-cell-nav .fv2-links {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.fv2-links a {
display: inline-grid;
grid-template-columns: 1.4rem 1fr;
align-items: baseline;
gap: .6rem;
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .82rem;
font-weight: 500;
color: var(--cream-dark);
opacity: .75;
padding: .42rem 0;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--gold) 8%, transparent);
transition: color .3s ease, opacity .3s ease, padding-left .35s var(--ease-out, ease);
position: relative;
width: 100%;
letter-spacing: -.003em;
}
.fv2-links a::after {
content: '+';
position: absolute;
right: .15rem; top: 50%;
transform: translateY(-50%) scale(0);
opacity: 0;
font-size: .85rem;
font-family: 'Inter', sans-serif;
color: var(--gold);
transition: opacity .3s ease, transform .3s ease;
}
.fv2-link-idx {
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .52rem;
letter-spacing: .15em;
color: var(--gold);
opacity: .55;
font-weight: 600;
}
.fv2-link-text { letter-spacing: -.005em; }
.fv2-links li:last-child a { border-bottom: none; }
.fv2-links a:hover {
color: var(--cream);
opacity: 1;
padding-left: .35rem;
}
.fv2-links a:hover::after { opacity: 1; transform: translateY(-50%) scale(1) rotate(45deg); }
.fv2-links a:hover .fv2-link-idx { opacity: 1; color: var(--gold); }
/* Cell — offices */
.fv2-offices {
list-style: none; margin: 0 0 .85rem; padding: 0;
display: flex; flex-direction: column;
}
.fv2-offices li {
padding: .7rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--gold) 8%, transparent);
}
.fv2-offices li:last-child { border-bottom: none; }
.fv2-off-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .8rem;
margin-bottom: .2rem;
}
.fv2-off-day {
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .56rem;
letter-spacing: .25em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
opacity: .85;
}
.fv2-off-time {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 500;
color: var(--cream);
font-variant-numeric: tabular-nums;
letter-spacing: -.015em;
}
.fv2-off-name {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: .82rem;
color: var(--cream-dark);
opacity: .7;
font-style: italic;
letter-spacing: -.005em;
}
.fv2-off-link {
display: inline-flex;
align-items: center;
gap: .55rem;
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .58rem;
letter-spacing: .25em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
opacity: .9;
text-decoration: none;
margin-top: .2rem;
align-self: flex-start;
transition: gap .35s ease, color .3s ease;
}
.fv2-off-link svg { width: 14px; height: 10px; }
.fv2-off-link:hover { gap: .85rem; color: var(--gold-light, var(--gold)); }
/* Cell — find / icon card byzantine */
.fv2-map-card {
position: relative;
display: block;
text-decoration: none;
border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
background: color-mix(in srgb, #000 35%, transparent);
height: 165px;
transition: border-color .4s ease;
color: var(--gold);
box-shadow: inset 0 0 0 2px var(--burgundy-deep, #1B3D33), inset 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
padding: 4px;
}
.fv2-map-bg {
position: absolute; inset: 4px;
display: flex;
align-items: center;
justify-content: center;
opacity: .8;
transition: transform .8s var(--ease-out, ease), opacity .4s ease;
}
.fv2-map-bg svg { width: 100%; height: 100%; }
.fv2-map-overlay {
position: absolute;
inset: auto 4px 4px 4px;
padding: .7rem .8rem;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--burgundy-ink, #0E261F) 92%, transparent) 30%, var(--burgundy-ink, #0E261F));
display: flex;
flex-direction: column;
gap: .2rem;
}
.fv2-map-coord {
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .5rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
opacity: .8;
}
.fv2-map-addr {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: .82rem;
line-height: 1.4;
color: var(--cream);
opacity: .95;
}
.fv2-map-go {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .54rem;
letter-spacing: .25em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
margin-top: .25rem;
transition: gap .35s ease;
}
.fv2-map-go svg { width: 11px; height: 11px; transition: transform .4s ease; }
.fv2-map-card:hover {
border-color: color-mix(in srgb, var(--gold) 65%, transparent);
}
.fv2-map-card:hover .fv2-map-bg { transform: scale(1.05); opacity: 1; }
.fv2-map-card:hover .fv2-map-go { gap: .75rem; }
.fv2-map-card:hover .fv2-map-go svg { transform: translate(2px,-2px); }
/* ── Bottom bar ───────────────────────────────────────────────── */
.fv2-bottom {
position: relative; z-index: 1;
border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
background: color-mix(in srgb, #000 28%, transparent);
}
/* arabesque centrale */
.fv2-bottom::before {
content: '';
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
width: 80px; height: 8px;
background:
radial-gradient(circle at center, var(--gold) 0 1.2px, transparent 1.5px),
radial-gradient(circle at 18% center, var(--gold) 0 .8px, transparent 1.1px),
radial-gradient(circle at 82% center, var(--gold) 0 .8px, transparent 1.1px);
opacity: .7;
}
.fv2-bottom-inner {
max-width: 1280px;
margin: 0 auto;
padding: 1rem 3rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
}
.fv2-copy {
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .6rem;
letter-spacing: .04em;
color: var(--cream-dark);
opacity: .55;
margin: 0;
justify-self: start;
}
.fv2-legal {
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .52rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--cream-dark);
opacity: .45;
margin: 0;
justify-self: center;
text-align: center;
}
.fv2-lang {
display: inline-flex;
align-items: center;
gap: .15rem;
font-family: 'Inter', 'DM Sans', sans-serif;
font-size: .58rem;
font-weight: 600;
letter-spacing: .25em;
text-transform: uppercase;
padding: .15rem;
border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
border-radius: 999px;
justify-self: end;
}
.fv2-lang a {
color: var(--cream-dark);
opacity: .65;
text-decoration: none;
padding: .25rem .65rem;
border-radius: 999px;
transition: all .3s ease;
}
.fv2-lang a:hover { color: var(--gold-light, var(--gold)); opacity: 1; }
.fv2-lang a.active {
color: var(--burgundy-ink, #0E261F);
opacity: 1;
background: var(--gold);
}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.fv2-grid {
grid-template-columns: 1fr 1fr;
gap: 0;
}
.fv2-cell { padding: 2.5rem 1.5rem 2.5rem 0; }
.fv2-cell + .fv2-cell { padding-left: 1.5rem; }
.fv2-cell:nth-child(3),
.fv2-cell:nth-child(4) { border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); }
.fv2-cell:nth-child(odd)::before { display: none; }
.fv2-cell:nth-child(even)::before { display: block; }
}
@media (max-width: 760px) {
.fv2-hero { padding: 3.5rem 1.5rem 2rem; }
.fv2-hero-em { padding: 0 .8em; }
.fv2-hero-em::before, .fv2-hero-em::after { width: .5em; }
.fv2-grid {
grid-template-columns: 1fr;
padding: 0 1.5rem 2rem;
}
.fv2-cell { padding: 2.2rem 0 !important; border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); }
.fv2-cell::before { display: none !important; }
.fv2-cell:first-child { border-top: none; }
.fv2-bottom-inner {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.4rem 1.5rem;
justify-items: start;
}
.fv2-copy, .fv2-legal { justify-self: start; text-align: left; }
.fv2-lang { justify-self: start; order: 2; }
.fv2-legal { order: 3; }
.fv2-marquee-track { font-size: 1rem; gap: 1.8rem; }
}
/* ── TABLET REFINEMENTS (769–1024px) ─────────────────────────────
Scoped to a range so it never overrides the mobile (<=768) rules. */
@media (min-width: 769px) and (max-width: 1024px) {
.hero-modern { grid-template-columns: 1fr 1.2fr; min-height: 70vh; }
.hero-modern-content { padding: 3rem 2.5rem; }
.hero-modern-title { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.horaires-grid { gap: 2.5rem; }
.saint-hero { gap: 2.5rem; }
.footer-main { gap: 2rem; }
.section-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* Feasts : 1 colonne sous 900px (dates longues trop serrees en 2 colonnes) */
@media (max-width: 900px) {
.feasts-list { columns: 1; }
}
/* ── WEEKLY BULLETIN — small screens ─────────────────────────── */
@media (max-width: 560px) {
.weekly-bulletin-card { padding: 1.2rem 1rem; }
.weekly-bulletin-actions { flex-direction: column; gap: .7rem; }
.weekly-bulletin-actions .btn { width: 100%; text-align: center; }
}
/* ── Extra small phones (<=380px): prevent horizontal overflow ── */
@media (max-width: 380px) {
.hero-modern-title,
.donate-hero h1,
.page-header h1 { word-break: break-word; }
.nav-inner { padding: .6rem .9rem; }
.feast-banner-inner { padding: 1.2rem 1rem; }
}
/* ── Petits telephones (<=440px) : anti-debordement hero ───────── */
@media (max-width: 440px) {
.hero-modern-content { padding: 2.5rem 1.2rem 1.8rem; }
.hero-modern-label { font-size: .6rem; letter-spacing: .12rem; line-height: 1.5; }
.hero-modern-title { font-size: clamp(1.5rem, 8.5vw, 2rem); overflow-wrap: break-word; }
.hero-modern-desc { font-size: .9rem; max-width: 100%; }
.hero-modern-meta { flex-wrap: wrap; justify-content: center; gap: .4rem .8rem; }
.hero-modern-meta-item { font-size: .56rem; letter-spacing: .08rem; }
.page-header h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); overflow-wrap: break-word; }
.donate-hero h1 { overflow-wrap: break-word; }
}
/* Fix debordement hero : enfants du flex centre doivent occuper 100% pour que le texte revienne a la ligne */
@media (max-width: 768px) {
.hero-modern-content > * { max-width: 100%; }
.hero-modern-label,
.hero-modern-title,
.hero-modern-desc,
.hero-modern-meta { width: 100%; }
.hero-modern-meta { flex-wrap: wrap; justify-content: center; }
}
/* Mobile : abandonner la grille du hero (evite tout debordement de piste grid) */
@media (max-width: 768px) {
.hero-modern { display: block !important; }
.hero-modern-content { width: 100%; max-width: 100%; }
.hero-modern-image { width: 100%; }
}
/* ── PRECHARGEUR — tracage de la croix orthodoxe ──────────────── */
.site-loader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(125% 125% at 50% 38%, var(--white) 0%, var(--cream) 68%, var(--cream-dark) 100%);
opacity: 1;
transition: opacity .7s var(--ease-out), visibility .7s var(--ease-out);
}
.site-loader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.site-loader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.site-loader-cross {
width: 78px;
height: auto;
overflow: visible;
}
.site-loader-cross path {
fill: none;
stroke: var(--gold);
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 7px rgba(196,154,58,.38));
transition: stroke-dashoffset 1s var(--ease-out);
}
/* Variante silhouette de l'eglise : trace du contour puis remplissage */
.site-loader-art {
width: 290px;
max-width: 62vw;
height: auto;
overflow: visible;
filter: drop-shadow(0 1px 5px rgba(196,154,58,.28));
}
.site-loader-art path {
fill: transparent;
stroke: var(--gold);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
transition: stroke-dashoffset 1.8s ease-in-out; /* cinematique (un peu moins lent) */
}
.site-loader-art.is-filled path {
fill: var(--burgundy);
}
.site-loader-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 500;
letter-spacing: .01em;
color: var(--burgundy);
opacity: 0;
transform: translateY(9px);
animation: loaderFadeUp .85s var(--ease-out) 3.4s forwards;
}
.site-loader-sub {
font-family: 'DM Sans', sans-serif;
font-size: .6rem;
letter-spacing: .3em;
text-indent: .3em;
text-transform: uppercase;
color: var(--gold);
opacity: 0;
transform: translateY(9px);
animation: loaderFadeUp .85s var(--ease-out) 3.7s forwards;
}
@keyframes loaderFadeUp {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.site-loader-cross path { transition: none; stroke-dashoffset: 0 !important; }
.site-loader-art path { transition: none; stroke-dashoffset: 0 !important; }
.site-loader-name, .site-loader-sub { animation: none; opacity: 1; transform: none; }
}
/* ── CALENDRIER ORTHODOXE ─────────────────────────────────────── */
.cal { max-width: 1000px; margin: 0 auto; }
.cal-loading { text-align: center; color: var(--text-muted); font-family: 'Source Serif 4', serif; font-style: italic; }
.cal-yearbar {
display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 0 0 1.8rem;
}
.cal-nav {
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(46,93,79,.25); background: var(--white); color: var(--burgundy);
font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .2s, background .2s, color .2s;
}
.cal-nav:hover { border-color: var(--gold); background: var(--burgundy); color: var(--cream); }
.cal-year {
font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 500; color: var(--dark-brown);
min-width: 150px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.cal-year-tag {
font-family: 'DM Sans', sans-serif; font-size: .56rem; letter-spacing: .26em; text-indent: .26em;
text-transform: uppercase; color: var(--gold);
}
.cal-pascha {
text-align: center; padding: 1.8rem 1.5rem; border-radius: 12px; margin: 0 0 1.2rem;
background: linear-gradient(158deg, var(--burgundy-mid) 0%, var(--burgundy) 48%, var(--burgundy-dark) 100%);
color: var(--cream); position: relative; overflow: hidden;
}
.cal-pascha::after {
content: ''; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
width: 26px; height: 1px; background: var(--gold-light); opacity: .55;
}
.cal-pascha-label {
display: block; font-family: 'DM Sans', sans-serif; font-size: .62rem; letter-spacing: .26em; text-indent: .26em;
text-transform: uppercase; color: var(--gold-light); margin-bottom: .5rem;
}
.cal-pascha-date { display: block; font-family: 'Cormorant Garamond', serif; font-size: 2.3rem; font-weight: 500; color: #fff; line-height: 1.1; }
.cal-upcoming {
display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center;
padding: .85rem 1.2rem; border-radius: 10px; margin: 0 0 2.2rem;
background: rgba(46,93,79,.05); border: 1px solid rgba(46,93,79,.12);
}
.cal-upcoming-label { font-family: 'DM Sans', sans-serif; font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.cal-upcoming-name { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--dark-brown); }
.cal-upcoming-date { font-family: 'Source Serif 4', serif; font-size: .9rem; color: var(--burgundy); }
.cal-h2 {
font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 500; color: var(--dark-brown);
text-align: center; margin: 2.4rem 0 1.2rem;
}
.cal-fasts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cal-fast {
background: var(--white); border: 1px solid rgba(46,93,79,.12); border-radius: 10px; padding: 1.4rem 1.5rem;
border-left: 3px solid var(--gold);
}
.cal-fast-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; color: var(--burgundy); margin: 0 0 .35rem; }
.cal-fast-range { font-family: 'Source Serif 4', serif; font-size: .95rem; color: var(--dark-brown); }
.cal-fast-len {
font-family: 'DM Sans', sans-serif; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--gold); margin: .45rem 0 .6rem;
}
.cal-fast-note { font-family: 'Source Serif 4', serif; font-size: .85rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.cal-feasts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.2rem; }
.cal-feast {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: .8rem 0; border-bottom: 1px solid rgba(46,93,79,.1);
}
.cal-feast-date { font-family: 'Source Serif 4', serif; font-size: .9rem; color: var(--burgundy); white-space: nowrap; flex-shrink: 0; }
.cal-feast-name { font-family: 'Cormorant Garamond', serif; font-size: 1.18rem; color: var(--dark-brown); text-align: right; line-height: 1.25; }
.cal-feast-patronal .cal-feast-name { color: var(--burgundy); font-weight: 500; }
.cal-badge {
font-family: 'DM Sans', sans-serif; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--gold); border: 1px solid rgba(196,154,58,.4); border-radius: 4px; padding: .12rem .35rem;
vertical-align: middle; margin-left: .3rem;
}
.cal-note {
font-family: 'Source Serif 4', serif; font-style: italic; font-size: .85rem; color: var(--text-muted);
line-height: 1.7; text-align: center; max-width: 680px; margin: 2.4rem auto 0;
}
@media (max-width: 700px) {
.cal-fasts { grid-template-columns: 1fr; }
.cal-feasts { grid-template-columns: 1fr; gap: 0; }
.cal-pascha-date { font-size: 1.9rem; }
.cal-year { font-size: 1.8rem; min-width: 120px; }
}