.tradition-story { background:#f7f4ed; }
.tradition-story .header { position:absolute; background:#f7f4ed; box-shadow:0 1px 0 rgba(32,55,43,.09); }
.tradition-story .nav-logo-text { color:#20372b; }
.tradition-story .nav-logo-sub { color:#b77c4c; }
.tradition-story .nav-logo::after { background:rgba(32,55,43,.14); }
.tradition-story .nav-link { color:#596159; }
.tradition-story .nav-link:hover,.tradition-story .nav-link.active { color:#20372b; }
.tradition-story .nav-toggle span { background:#20372b; }
.story-hero { position:relative; min-height:680px; margin-top:124px; display:flex; align-items:flex-end; overflow:hidden; color:#fff; background:#1b3025; }
.story-hero::before { content:""; position:absolute; inset:0; background:var(--story-image) center/cover no-repeat; transform:scale(1.02); }
.story-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,31,23,.92),rgba(16,31,23,.66) 52%,rgba(16,31,23,.18)),linear-gradient(0deg,rgba(13,25,19,.76),transparent 58%); }
.story-hero-inner { position:relative; z-index:1; width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:86px 0 76px; }
.story-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:48px; color:rgba(255,255,255,.72); font-size:.69rem; letter-spacing:.12em; text-transform:uppercase; }
.story-breadcrumb a { color:#fff; }
.story-kicker { color:#e4be81; font-size:.72rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
.story-hero h1 { max-width:900px; margin:16px 0 24px; color:#fff; font:400 clamp(3.6rem,8vw,7rem)/.91 var(--font-display); letter-spacing:-.045em; }
.story-hero p { max-width:690px; color:rgba(255,255,255,.86); font-size:1.12rem; line-height:1.72; }
.story-shell { width:min(1080px,calc(100% - 48px)); margin:0 auto; }
.story-lead { display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; padding:100px 0 86px; }
.story-lead-label { color:#9b6c3f; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.story-lead h2,.story-section h2,.story-visit h2 { margin:14px 0 0; color:#1d3026; font:400 clamp(2.4rem,5vw,4.25rem)/1.02 var(--font-display); letter-spacing:-.025em; }
.story-lead-copy { color:#505750; font-size:1.07rem; line-height:1.88; }
.story-lead-copy p+p,.story-prose p+p { margin-top:21px; }
.story-fact { display:grid; grid-template-columns:160px 1fr; gap:42px; align-items:center; margin-bottom:100px; padding:34px 40px; border:1px solid #d7cabb; border-radius:9px; background:#efe7d9; }
.story-fact strong { color:#8d2f2c; font:italic 3.8rem/1 var(--font-display); }
.story-fact p { color:#4f574f; line-height:1.7; }
.story-section { padding:100px 0; background:#fff; }
.story-section--tint { background:#20372b; color:#fff; }
.story-section--tint h2 { color:#fff; }
.story-section-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:8vw; }
.story-prose { color:#555d56; font-size:1rem; line-height:1.9; }
.story-section--tint .story-prose { color:rgba(255,255,255,.75); }
.story-quote { margin:0; padding:30px 0 30px 32px; border-left:2px solid #d2a25f; color:#20372b; font:italic 400 clamp(1.55rem,3vw,2.35rem)/1.35 var(--font-display); }
.story-section--tint .story-quote { color:#f5ead7; }
.story-details { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:52px; }
.story-detail { padding:28px; border:1px solid #dedbd2; border-radius:8px; background:#faf9f6; }
.story-detail span { color:#a57344; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.story-detail h3 { margin:12px 0 10px; color:#20372b; font:400 1.5rem/1.12 var(--font-display); }
.story-detail p { color:#646a64; font-size:.89rem; line-height:1.68; }
.story-visit { padding:100px 0; }
.story-visit-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.story-place { padding:32px; border-radius:8px; background:#ede4d6; }
.story-place h3 { margin:0 0 12px; color:#21362a; font:400 1.75rem var(--font-display); }
.story-place p { color:#586058; line-height:1.72; }
.story-place a { display:inline-block; margin-top:17px; color:#7d342f; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.story-sources { padding:26px 0 70px; color:#707570; font-size:.78rem; line-height:1.7; }
.story-sources a { color:#35513f; text-decoration:underline; text-underline-offset:3px; }
.story-nav { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:90px; border:1px solid #d4d3ca; border-radius:9px; overflow:hidden; }
.story-nav a { padding:25px; border-right:1px solid #d4d3ca; color:#263b2f; background:#fff; }
.story-nav a:last-child { border-right:0; }
.story-nav a[aria-current="page"] { color:#fff; background:#20372b; }
.story-nav small { display:block; margin-bottom:7px; color:#a17143; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.story-nav strong { font:400 1.2rem var(--font-display); }
.story-return { display:flex; justify-content:space-between; gap:28px; align-items:center; margin-bottom:100px; padding:48px 52px; border-radius:9px; color:#fff; background:#20372b; }
.story-return h2 { margin:0; color:#fff; font:400 clamp(2rem,4vw,3.4rem)/1.05 var(--font-display); }
.story-return a { flex:none; padding:14px 22px; border-radius:7px; color:#21362a; background:#f0d6ad; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tradition-story--sapin { --story-image:url('../img/datcha-neige.jpg'); }
.tradition-story--bredele { --story-image:url('../img/salle-a-manger.jpg'); }
.tradition-story--saint-nicolas { --story-image:url('../img/feeries-nocturnes.jpg'); }
.tradition-story--christkindel { --story-image:url('../img/noel-jardin.jpg'); }
@media(max-width:900px){.story-lead,.story-section-grid{grid-template-columns:1fr;gap:30px}.story-details{grid-template-columns:1fr}.story-nav{grid-template-columns:1fr 1fr}.story-nav a:nth-child(2){border-right:0}.story-nav a:nth-child(-n+2){border-bottom:1px solid #d4d3ca}.story-visit-grid{grid-template-columns:1fr}.story-return{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.story-hero{margin-top:120px;min-height:590px}.story-hero-inner,.story-shell{width:min(100% - 32px,1080px)}.story-hero h1{font-size:clamp(3rem,15vw,4.5rem)}.story-lead,.story-section,.story-visit{padding:72px 0}.story-fact{grid-template-columns:1fr;gap:16px;padding:28px}.story-nav{grid-template-columns:1fr}.story-nav a,.story-nav a:nth-child(2){border-right:0;border-bottom:1px solid #d4d3ca}.story-nav a:last-child{border-bottom:0}.story-return{padding:36px 25px}}

/* Editorial refinements */
.story-hero-inner::before { content:""; position:absolute; left:-28px; bottom:76px; width:1px; height:210px; background:linear-gradient(transparent,#d9aa67 28%,#d9aa67 72%,transparent); opacity:.75; }
.story-hero p { text-wrap:pretty; }
.story-meta { display:flex; flex-wrap:wrap; gap:0; margin-top:30px; color:rgba(255,255,255,.72); font-size:.68rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.story-meta span { display:flex; align-items:center; }
.story-meta span+span::before { content:""; width:20px; height:1px; margin:0 13px; background:#d3a45f; }
.story-lead-copy>p:first-child::first-letter { float:left; margin:8px 12px 0 0; color:#8d2f2c; font:400 4.5rem/.72 var(--font-display); }
.story-section-grid>div:first-child { position:relative; }
.story-section-grid>div:first-child::before { content:""; display:block; width:38px; height:1px; margin-bottom:22px; background:#bd8a4d; }
.story-section h2 { max-width:510px; text-wrap:balance; }
.story-prose { max-width:650px; }
.story-prose p { text-wrap:pretty; }
.story-fact { position:relative; overflow:hidden; box-shadow:0 18px 54px rgba(47,38,26,.06); }
.story-fact::after { content:""; position:absolute; right:-38px; top:-58px; width:160px; height:160px; border:1px solid rgba(141,47,44,.11); border-radius:50%; }
.story-detail,.story-place { transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.story-detail:hover,.story-place:hover { transform:translateY(-3px); box-shadow:0 16px 42px rgba(24,43,32,.09); }
.story-sources { margin-top:0; margin-bottom:80px; padding:24px 28px; border:1px solid #dcd7cc; border-radius:8px; background:rgba(255,255,255,.58); }
.story-more { margin-bottom:86px; padding:86px 0 92px; background:#e9e2d6; }
.story-more-heading { display:flex; justify-content:space-between; gap:28px; align-items:end; margin-bottom:34px; }
.story-more-heading h2 { max-width:620px; margin:0; color:#20372b; font:400 clamp(2.4rem,5vw,4rem)/1 var(--font-display); letter-spacing:-.025em; text-align:right; text-wrap:balance; }
.story-nav { margin-bottom:0; box-shadow:0 16px 45px rgba(32,55,43,.06); }
.story-nav a { min-height:132px; display:flex; flex-direction:column; justify-content:space-between; transition:color .22s ease,background .22s ease; }
.story-nav a:not([aria-current="page"]):hover { color:#fff; background:#345141; }
.story-nav a:not([aria-current="page"]):hover small { color:#efc98d; }
.story-nav a[aria-current="page"]::after { content:"Page actuelle"; margin-top:14px; color:#dfbc84; font-size:.59rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.story-return { box-shadow:0 22px 65px rgba(21,40,29,.14); }
.story-return a { transition:transform .22s ease,background .22s ease; }
.story-return a:hover { transform:translateY(-2px); color:#20372b; background:#f7e2c2; }
@media(max-width:900px){.story-hero-inner::before{display:none}.story-more-heading{display:block}.story-more-heading h2{margin-top:12px;text-align:left}.story-prose{max-width:none}}
@media(max-width:680px){.story-meta{margin-top:24px}.story-lead-copy>p:first-child::first-letter{font-size:3.8rem}.story-fact{margin-bottom:72px}.story-more{padding:64px 0 70px;margin-bottom:64px}.story-sources{margin-bottom:64px;padding:22px}.story-nav a{min-height:auto}.story-return{margin-bottom:72px}}
@media(prefers-reduced-motion:reduce){.story-detail,.story-place,.story-nav a,.story-return a{transition:none}}

/* Balanced chapter quotation */
.story-section--tint .story-section-grid { align-items:start; }
.story-section--tint .story-quote { position:relative; max-width:none; margin:58px auto 0; padding:30px 44px 30px 64px; overflow:hidden; border:1px solid rgba(232,205,162,.24); border-left:2px solid #d2a25f; border-radius:8px; background:rgba(255,255,255,.045); font-size:clamp(1.45rem,2.35vw,2rem); line-height:1.38; }
.story-section--tint .story-quote::before { content:"“"; position:absolute; left:18px; top:5px; color:#d2a25f; font:400 3.8rem/1 var(--font-display); opacity:.72; }
.story-section--tint .story-details { margin-top:18px; }
@media(max-width:680px){.story-section--tint .story-quote{margin:38px auto 0;padding:27px 24px 27px 48px;font-size:1.35rem}.story-section--tint .story-quote::before{left:14px;font-size:3rem}.story-section--tint .story-details{margin-top:14px}}

/* Chapter hierarchy aligned with the shared visual identity. */
.story-lead h2,.story-section h2,.story-visit h2,.story-more-heading h2 { font-size:clamp(2rem,3.25vw,2.85rem); line-height:1.16; letter-spacing:-.025em; }
.story-section { padding:clamp(60px,6.5vw,88px) 0; }
.story-section-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,80px); }
.story-section--tint .story-lead-label { color:#e1be89; }
.story-fact { grid-template-columns:minmax(170px,.35fr) 1fr; }
.story-fact strong { font-size:clamp(2rem,3.7vw,3rem); line-height:1.1; color:#835831; overflow-wrap:anywhere; }
.story-lead-copy>p:first-child::first-letter { color:#835831; }
.story-section--tint .story-quote { font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.5; margin-top:38px; }
.story-nav a { display:grid; grid-template-rows:auto 1fr auto; align-content:start; gap:12px; }
.story-nav small { margin:0; }
.story-nav strong { align-self:start; line-height:1.3; }
.story-nav a[aria-current="page"] small { color:#edcf9f; }
.story-nav a[aria-current="page"]::after { margin:0; }
.story-return h2 { font-size:clamp(1.8rem,3vw,2.65rem); line-height:1.18; }
@media(max-width:900px) { .story-section-grid { grid-template-columns:1fr;gap:28px; } }
@media(max-width:680px) { .story-fact { grid-template-columns:1fr; } .story-section--tint .story-quote { font-size:1.25rem; } }