body.histoire-page{
--history-ink:#2d211d;
--history-muted:#75665f;
--history-paper:#fffdf8;
--history-line:rgba(91,63,50,.18);
--history-accent:#8a4f35;
margin:0;
background:
radial-gradient(circle at 8% 8%,rgba(190,150,104,.15),transparent 28rem),
linear-gradient(180deg,#f6efe4 0,#fffdf9 38rem,#f8f3eb 100%);
color:var(--history-ink);
}

.histoire-main{
width:min(1280px,calc(100% - 40px));
margin:0 auto;
padding:34px 0 70px;
}

.histoire-hero{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 260px;
gap:50px;
align-items:center;
min-height:430px;
padding:clamp(36px,7vw,86px);
overflow:hidden;
border:1px solid rgba(92,61,45,.16);
border-radius:28px;
background:
linear-gradient(105deg,rgba(35,24,19,.94),rgba(67,43,32,.82)),
url('/images/Histoire.jpg') center/cover;
box-shadow:0 30px 70px rgba(55,36,27,.18);
color:#fffaf1;
}

.histoire-hero::after{
content:"";
position:absolute;
inset:auto -8% -44% 28%;
height:75%;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
}

.histoire-hero-content{
position:relative;
z-index:1;
max-width:770px;
}

.histoire-kicker,.histoire-section-kicker{
margin:0 0 12px;
font-size:.78rem;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
}

.histoire-kicker{color:#eac997}
.histoire-section-kicker{color:var(--history-accent)}

.histoire-hero h1{
max-width:750px;
margin:0;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(2.8rem,6vw,5.8rem);
font-weight:500;
line-height:.96;
letter-spacing:-.045em;
}

.histoire-intro{
max-width:650px;
margin:26px 0 0;
color:rgba(255,250,241,.8);
font-size:clamp(1rem,1.6vw,1.16rem);
line-height:1.75;
}

.histoire-hero-action{
display:inline-flex;
align-items:center;
gap:12px;
margin-top:30px;
padding:13px 18px;
border:1px solid rgba(255,255,255,.28);
border-radius:999px;
background:rgba(255,255,255,.08);
color:#fff;
font-weight:800;
text-decoration:none;
transition:background .2s ease,transform .2s ease;
}

.histoire-hero-action:hover,.histoire-hero-action:focus-visible{
background:rgba(255,255,255,.16);
transform:translateY(-2px);
}

.histoire-hero-mark{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
height:270px;
color:#ead0aa;
font-family:Georgia,'Times New Roman',serif;
}

.histoire-hero-line{
width:1px;
flex:1;
margin:12px 0;
background:linear-gradient(transparent,#dfbb84 20%,#dfbb84 80%,transparent);
}

.histoire-hero-year{font-size:1.1rem}

.histoire-overview{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,1fr);
width:min(850px,calc(100% - 50px));
margin:-38px auto 78px;
border:1px solid var(--history-line);
border-radius:18px;
background:rgba(255,253,248,.96);
box-shadow:0 20px 44px rgba(55,36,27,.12);
backdrop-filter:blur(14px);
}

.histoire-overview article{
display:grid;
gap:4px;
padding:23px 28px;
text-align:center;
}

.histoire-overview article+article{border-left:1px solid var(--history-line)}
.histoire-overview strong{font-family:Georgia,serif;font-size:2rem;color:var(--history-accent)}
.histoire-overview span{color:var(--history-muted);font-size:.84rem;font-weight:800}

.histoire-epochs,.histoire-method{scroll-margin-top:30px}

.histoire-section-heading{
display:flex;
justify-content:space-between;
gap:40px;
align-items:end;
margin-bottom:34px;
}

.histoire-section-heading h2,.histoire-method h2{
margin:0;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(2rem,4vw,3.4rem);
font-weight:500;
line-height:1.05;
}

.histoire-section-heading>p{
max-width:560px;
margin:0;
color:var(--history-muted);
line-height:1.7;
}

.histoire-timeline{
position:relative;
display:grid;
gap:24px;
}

.histoire-timeline::before{
content:"";
position:absolute;
top:30px;
bottom:30px;
left:50%;
width:1px;
background:linear-gradient(transparent,var(--history-line) 5%,var(--history-line) 95%,transparent);
}

.histoire-epoch-card{
position:relative;
display:grid;
grid-template-columns:minmax(300px,44%) 1fr;
min-height:300px;
overflow:hidden;
border:1px solid var(--history-line);
border-radius:22px;
background:var(--history-paper);
box-shadow:0 18px 45px rgba(55,36,27,.08);
color:inherit;
text-decoration:none;
}

.histoire-epoch-card:nth-child(even){grid-template-columns:1fr minmax(300px,44%)}
.histoire-epoch-card:nth-child(even) .histoire-epoch-media{order:2}
.histoire-epoch-card:nth-child(even) .histoire-epoch-content{order:1}

.histoire-epoch-media{
position:relative;
min-height:300px;
overflow:hidden;
background:color-mix(in srgb,var(--epoch-color) 14%,#e9dfd3);
}

.histoire-epoch-media>img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}

.histoire-epoch-card:hover .histoire-epoch-media>img{transform:scale(1.035)}

.histoire-epoch-media::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 40%,rgba(30,20,15,.48));
}

.histoire-epoch-index{
position:absolute;
z-index:1;
top:18px;
left:20px;
color:rgba(255,255,255,.88);
font-family:Georgia,serif;
font-size:1.2rem;
}

.histoire-epoch-icon{
position:absolute;
z-index:2;
right:20px;
bottom:18px;
display:grid;
place-items:center;
width:76px;
height:76px;
overflow:hidden;
border:3px solid rgba(255,255,255,.85);
border-radius:50%;
background:#fff7e9;
box-shadow:0 12px 25px rgba(0,0,0,.2);
}

.histoire-epoch-icon img{width:100%;height:100%;object-fit:cover}

.histoire-epoch-content{
display:flex;
flex-direction:column;
justify-content:center;
padding:clamp(28px,5vw,58px);
border-top:4px solid var(--epoch-color);
}

.histoire-epoch-dates{
margin:0 0 10px;
color:var(--epoch-color);
font-size:.78rem;
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
}

.histoire-epoch-content h3{
margin:0;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(1.8rem,3.4vw,3rem);
font-weight:500;
line-height:1.05;
}

.histoire-epoch-description{
margin:16px 0 20px;
color:var(--history-muted);
line-height:1.68;
}

.histoire-epoch-meta{display:flex;gap:20px;color:var(--history-muted);font-size:.82rem}
.histoire-epoch-meta strong{color:var(--history-ink)}

.histoire-epoch-soon{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-top:25px;
padding-top:18px;
border-top:1px solid var(--history-line);
color:var(--epoch-color);
font-size:.78rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}

.histoire-message{
display:flex;
gap:20px;
align-items:center;
padding:30px;
border:1px solid var(--history-line);
border-radius:18px;
background:var(--history-paper);
}
.histoire-message>i{font-size:2rem;color:var(--history-accent)}
.histoire-message h3,.histoire-message p{margin:0}
.histoire-message p{margin-top:5px;color:var(--history-muted)}

.histoire-method{
margin-top:90px;
padding:clamp(30px,5vw,60px);
border-radius:26px;
background:#2d211d;
color:#fffaf1;
}

.histoire-method .histoire-section-kicker{color:#ddb982}
.histoire-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.histoire-method-grid article{padding:25px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.045)}
.histoire-method-grid i{font-size:1.4rem;color:#ddb982}
.histoire-method-grid h3{margin:18px 0 9px;font-family:Georgia,serif;font-size:1.28rem}
.histoire-method-grid p{margin:0;color:rgba(255,250,241,.7);line-height:1.6}

body.histoire-page>.pg-footer{margin-top:0}

@media(max-width:850px){
.histoire-main{width:min(100% - 24px,1280px);padding-top:18px}
.histoire-hero{grid-template-columns:1fr;min-height:auto;padding:45px 28px}
.histoire-hero-mark{display:none}
.histoire-overview{width:calc(100% - 28px);margin-bottom:58px}
.histoire-section-heading{display:block}
.histoire-section-heading>p{margin-top:16px}
.histoire-timeline::before{display:none}
.histoire-epoch-card,.histoire-epoch-card:nth-child(even){grid-template-columns:1fr}
.histoire-epoch-card:nth-child(even) .histoire-epoch-media{order:1}
.histoire-epoch-card:nth-child(even) .histoire-epoch-content{order:2}
.histoire-epoch-media{min-height:230px}
.histoire-method-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
.histoire-overview{grid-template-columns:1fr;margin-top:-22px}
.histoire-overview article{padding:15px}
.histoire-overview article+article{border-left:0;border-top:1px solid var(--history-line)}
.histoire-hero h1{font-size:2.65rem}
.histoire-epoch-meta{flex-direction:column;gap:6px}
}

@media(prefers-reduced-motion:reduce){
.histoire-epoch-media>img,.histoire-hero-action{transition:none}
}