/* =================================================================
   MAISON HUBERT — Page « Notre Histoire »
   Hero éditorial · Frise chronologique horizontale · 4 générations
   S'appuie sur styles.css (tokens, header, footer, .ph, .reveal…)
   ================================================================= */

/* ---------- État de nav actif ---------- */
.nav-link.active{ opacity:1; }
.nav-link.active::after{ transform:scaleX(1); }

/* ---------- En-tête toujours « solide » (page claire, sans hero sombre) ---------- */
body.solid-header .site-header{
  background:var(--ivory); border-bottom-color:var(--line-dark);
  box-shadow:0 10px 40px -28px rgba(32,20,13,.5);
}
body.solid-header .site-header .bar{ padding-block:10px; }
body.solid-header .site-header .nav-link,
body.solid-header .site-header .icon-btn{ color:var(--ink); }
body.solid-header .site-header .brand img{ height:54px; }
body.solid-header .site-header .logo-l{ display:none; }
body.solid-header .site-header .logo-d{ display:block; }

/* ===============================================================
   PAGE HERO — éditorial sombre
   =============================================================== */
.page-hero{
  position:relative; min-height:80svh; display:flex; align-items:flex-end;
  background:var(--espresso); color:var(--cream); overflow:clip;
  padding-block:clamp(128px,20vh,210px) clamp(46px,7vh,92px);
}
.page-hero .hero-ph{ position:absolute; inset:0; z-index:0; }
.page-hero .hero-ph .ph{ position:absolute; inset:0; border:0; }
.page-hero .wrap{ position:relative; z-index:2; width:100%; }
.page-hero-inner{ max-width:820px; }
.page-hero .display{
  margin:.2em 0 0; line-height:.94;
  font-size:clamp(2.8rem, min(9vw,11vh), 7.4rem);
}
.page-hero .lead{ margin:clamp(1.2rem,3vh,2rem) 0 0; max-width:54ch; color:var(--cream-soft); }
.page-hero .ph-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
  margin-top:clamp(1.6rem,4vh,2.6rem);
  font-family:var(--body); font-weight:600; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-lt);
}
.page-hero .ph-meta .sep{ width:5px; height:5px; border-radius:50%; background:var(--bronze); opacity:.6; }
@media (prefers-reduced-motion: no-preference){
  .page-hero-inner > *{ animation:heroIn .85s var(--ease) both; }
  .page-hero-inner > *:nth-child(1){ animation-delay:.05s; }
  .page-hero-inner > *:nth-child(2){ animation-delay:.13s; }
  .page-hero-inner > *:nth-child(3){ animation-delay:.21s; }
  .page-hero-inner > *:nth-child(4){ animation-delay:.29s; }
}

/* ===============================================================
   FRISE CHRONOLOGIQUE
   =============================================================== */
.frise{ background:var(--paper); color:var(--ink); position:relative; }

/* ---------- Hero d'intro (calque fixe qui se dissout au scroll) ---------- */
.intro-hero{
  position:fixed; inset:0; z-index:20; pointer-events:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--espresso); color:var(--cream); overflow:hidden;
  will-change:opacity;
}
.intro-hero .hero-ph{ position:absolute; inset:0; }
.intro-hero .hero-ph .ph{ position:absolute; inset:0; border:0; }
.intro-hero .hero-ph .ph::after{ display:none; } /* pas de label placeholder derrière le titre */
.intro-hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(20,12,8,.46), rgba(20,12,8,.84) 100%),
    linear-gradient(0deg, rgba(20,12,8,.72) 0%, transparent 56%);
}
.intro-inner{ position:relative; z-index:2; width:100%; max-width:min(94vw,1100px); margin-inline:auto; padding:0 var(--gutter); text-align:center; }
.intro-inner .overline{ justify-content:center; }
.intro-inner .overline::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.intro-hero .display{
  font-size:clamp(2rem, min(6vw,9vh), 4.6rem);
  margin:0; line-height:1.05; white-space:normal; text-align:center;
}
/* apparition lettre par lettre du titre (effet féérique) */
.intro-hero .display .ltr{ display:inline; }
@media (prefers-reduced-motion: no-preference){
  .intro-hero .intro-inner > .display{ animation:none; } /* on n'utilise pas heroIn ici : ce sont les lettres qui s'animent */
  .intro-hero .display .ltr{
    opacity:0; will-change:opacity, filter;
    animation:ltrReveal .7s var(--ease) both;
    animation-delay:calc(var(--i) * 38ms + .12s);
  }
  @keyframes ltrReveal{
    0%   { opacity:0; filter:blur(12px); text-shadow:0 0 22px rgba(224,177,107,.9); }
    55%  { opacity:1; filter:blur(0);    text-shadow:0 0 10px rgba(224,177,107,.45); }
    100% { opacity:1; filter:blur(0);    text-shadow:none; }
  }
}
.intro-sub{
  font-family:var(--serif); font-style:italic; color:var(--cream-soft);
  font-size:clamp(1.1rem,2vw,1.6rem); margin:clamp(.9rem,2vh,1.4rem) 0 0;
}
.intro-scroll{
  position:absolute; left:0; right:0; bottom:clamp(48px,9vh,110px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  color:var(--cream-soft); font-family:var(--body); font-size:.8rem; letter-spacing:.26em; text-transform:uppercase;
}
.intro-scroll span:first-child{ white-space:nowrap; }
.intro-scroll .stem{ width:1px; height:54px; background:linear-gradient(var(--bronze-lt),transparent); animation:drop 2.2s var(--ease) infinite; }
@media (prefers-reduced-motion: no-preference){
  .intro-inner > *{ animation:heroIn .85s var(--ease) both; }
  .intro-inner > *:nth-child(1){ animation-delay:.05s; }
  .intro-inner > *:nth-child(2){ animation-delay:.14s; }
  .intro-inner > *:nth-child(3){ animation-delay:.22s; }
  .intro-inner > *:nth-child(4){ animation-delay:.3s; }
}
@media(max-width:560px){ .intro-hero .display{ white-space:normal; } }

/* spacer : réserve le scroll vertical du fondu en modes natif / mobile
   (en mode capturé, le maintien est géré dans la hauteur de la frise) */
.intro-spacer{ height:0; }
body[data-frise="native"] .intro-spacer{ height:100svh; }
@media(max-width:760px){ .intro-spacer{ height:100svh; } }

/* sticky shell — captured mode pins it for the whole scroll distance */
.frise-sticky{ display:flex; flex-direction:column; }
body[data-frise="captured"] .frise-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
}
body[data-frise="native"] .frise-sticky{ position:relative; height:auto; }

/* head */
.frise-head{
  flex:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:clamp(74px,9vh,116px) var(--gutter) clamp(26px,5.5vh,68px);
}
.frise-head .fh-left{ display:flex; flex-direction:column; gap:.7rem; }
.frise-head .h-feature{ font-size:clamp(1.7rem,3vw,2.6rem); margin:0; }
.frise-hint{
  display:inline-flex; align-items:center; gap:.7em; align-self:flex-end;
  font-family:var(--body); font-weight:600; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-deep);
  white-space:nowrap;
}
.frise-hint .glyph{ font-size:1.05em; line-height:1; }
.frise-hint .t-cap{ display:inline; }
.frise-hint .t-nat{ display:none; }
body[data-frise="native"] .frise-hint .t-cap{ display:none; }
body[data-frise="native"] .frise-hint .t-nat{ display:inline; }

/* viewport */
.frise-viewport{ position:relative; flex:1; min-height:0; }
body[data-frise="native"] .frise-viewport{
  overflow-x:auto; overflow-y:hidden; height:clamp(620px,80vh,920px);
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
body[data-frise="native"] .frise-viewport::-webkit-scrollbar{ height:6px; }
body[data-frise="native"] .frise-viewport::-webkit-scrollbar-thumb{ background:var(--line-dark); border-radius:6px; }

/* track */
.frise-track{
  position:absolute; inset:0; display:flex; align-items:stretch;
  padding-inline:clamp(40px,9vw,150px); gap:clamp(28px,3.4vw,64px);
  will-change:transform;
}
body[data-frise="native"] .frise-track{ position:relative; height:100%; width:max-content; }
/* Mode capturé (desktop) : la piste doit faire la largeur du CONTENU (et non de
   l'écran via inset:0), sinon la ligne centrale ne couvre qu'un écran et
   « s'arrête » quand on défile. Desktop uniquement (le mobile passe en colonne). */
@media(min-width:761px){
  body[data-frise="captured"] .frise-track{ right:auto; width:max-content; }
}

/* the continuous timeline rule (lives in the track, spans full width) */
.frise-line{
  position:absolute; left:0; right:0; top:50%; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent 0, var(--line-dark) 7%, var(--line-dark) 93%, transparent 100%);
}

/* ---------- a station ---------- */
.station{
  flex:none; width:clamp(360px,40vw,520px); position:relative;
  display:grid; grid-template-rows:1fr 1fr; height:100%;
  scroll-snap-align:center;
  --st-gap:clamp(52px,8vh,100px);   /* espace entre le contenu et la ligne/date */
}
/* the tick through the line */
.station::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1px; height:clamp(64px,16vh,124px); background:var(--bronze); opacity:.5; z-index:1;
}

.st-half{ width:min(100%,440px); margin-inline:auto; position:relative; z-index:2; }
.st-media{ grid-row:1; align-self:end; padding-bottom:var(--st-gap); }
.st-text{ grid-row:2; align-self:start; padding-top:var(--st-gap); text-align:center; }
.station.flip .st-media{ grid-row:2; align-self:start; padding-top:var(--st-gap); padding-bottom:0; }
.station.flip .st-text{ grid-row:1; align-self:end; padding-bottom:var(--st-gap); padding-top:0; }

.st-media .figure{ position:relative; width:100%; max-width:100%; margin-inline:auto; }
/* Photo calée sur la même largeur que le texte (alignement) ; hauteur plafonnée
   pour rester dans la rangée sur les écrans peu hauts (mode défilé). */
.st-media .ph{ width:100%; height:auto; max-height:min(30svh,300px); aspect-ratio:4/3; border-radius:2px; }
.st-media .frame-corner{ position:absolute; inset:12px; border:1px solid rgba(239,230,214,.34); pointer-events:none; }

.st-chapter{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--bronze-deep); }
.st-text h3{
  font-size:clamp(1.35rem,1.9vw,1.85rem); text-transform:uppercase; letter-spacing:.04em;
  line-height:1.05; margin:.3rem 0 .55rem;
}
/* Le texte n'occupait que 280 px dans une colonne de 440 : lignes trop courtes,
   effet tassé. Élargi pour respirer sans coller aux bords de la colonne. */
.st-text p{ color:var(--ink-soft); font-size:.95rem; line-height:1.55; margin:0 auto; max-width:48ch; }

/* the year — sits on the line, paper background masks the rule behind it */
.st-year{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  background:var(--paper); padding:8px 22px;
  font-family:var(--display); font-weight:500; letter-spacing:.02em;
  /* chiffres alignants (hauteur uniforme) : évite le décalage dû aux jambages
     des chiffres « old-style », et plus de marge autour pour ne pas coller au trait. */
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  font-size:clamp(2.3rem,3.8vw,3.4rem); color:var(--marron); line-height:1;
}

/* ---------- progression foot ---------- */
.frise-foot{
  flex:none; display:flex; align-items:center; gap:clamp(16px,2.4vw,34px);
  padding:clamp(6px,1.2vh,16px) var(--gutter) clamp(24px,4vh,52px);
}
.frise-foot .yr-end{
  font-family:var(--display); font-size:clamp(1.1rem,1.6vw,1.5rem); color:var(--ink-faint);
  flex:none; letter-spacing:.02em;
}
.frise-bar{ flex:1; height:2px; background:var(--line-dark); position:relative; border-radius:2px; }
.frise-bar-fill{
  position:absolute; inset:0 0 0 0; background:var(--olive);
  transform-origin:left; transform:scaleX(0); transition:transform .12s linear; border-radius:2px;
}
.frise-bar-knob{
  position:absolute; top:50%; left:0; width:0; height:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.frise-bar-knob .dot{
  width:13px; height:13px; border-radius:50%; background:var(--olive);
  border:2px solid var(--paper); box-shadow:0 0 0 1px var(--olive);
  transform:translate(-50%,-50%);
}
.frise-year-now{
  position:absolute; bottom:18px; left:0; transform:translateX(-50%);
  font-family:var(--display); font-size:clamp(1.2rem,1.8vw,1.7rem); color:var(--marron);
  white-space:nowrap; pointer-events:none;
}

/* points de repère cliquables (dates clés) sur la barre */
.frise-mark{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:24px; height:24px; padding:0; display:flex; align-items:center; justify-content:center; z-index:4;
}
.frise-mark-dot{
  width:9px; height:9px; border-radius:50%; background:var(--ink-faint);
  border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line-dark);
  transition:background .2s, box-shadow .2s, transform .2s;
}
.frise-mark:hover .frise-mark-dot{ background:var(--bronze); box-shadow:0 0 0 1px var(--bronze); transform:scale(1.3); }
.frise-mark.active .frise-mark-dot{ background:var(--olive); box-shadow:0 0 0 1px var(--olive); transform:scale(1.15); }
.frise-mark-yr{
  position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:.82rem; letter-spacing:.02em; color:var(--ink-faint);
  white-space:nowrap; pointer-events:none; transition:color .2s, opacity .2s;
}
.frise-mark.is-end .frise-mark-yr{ display:none; } /* extrémités déjà étiquetées par .yr-end */
.frise-mark:hover .frise-mark-yr,
.frise-mark.active .frise-mark-yr{ color:var(--marron); }

/* ---------- reveal cascade (only when JS drives the frise) ---------- */
@media (prefers-reduced-motion: no-preference){
  body.frise-js .station .st-half,
  body.frise-js .station .st-year{
    opacity:0; transition:opacity .75s var(--ease), transform .75s var(--ease);
  }
  body.frise-js .station .st-media{ transform:translateY(26px); }
  body.frise-js .station .st-text{ transform:translateY(-18px); }
  body.frise-js .station::before{
    transform:translate(-50%,-50%) scaleY(0); transform-origin:center;
    transition:transform .7s var(--ease); opacity:0;
  }
  body.frise-js .station .st-year{ transform:translate(-50%,-50%) scale(.88); }
  body.frise-js .station.in .st-half{ opacity:1; transform:none; }
  body.frise-js .station.in::before{ transform:translate(-50%,-50%) scaleY(1); opacity:.5; }
  body.frise-js .station.in .st-year{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  body.frise-js .station.in .st-text{ transition-delay:.1s; }
  body.frise-js .station.in .st-year{ transition-delay:.16s; }
}

/* ===============================================================
   QUATRE GÉNÉRATIONS
   =============================================================== */
.gen{ background:var(--espresso); color:var(--cream); }
.gen-head{ max-width:60ch; }
.gen-head .lead{ color:var(--cream-soft); margin-top:1rem; }
.gen-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,32px);
  margin-top:clamp(44px,5vw,76px);
}
.gen-card .figure{ position:relative; }
.gen-card .ph{ aspect-ratio:3/4; border-radius:2px; }
.gen-card .frame-corner{ position:absolute; inset:12px; border:1px solid rgba(239,230,214,.3); pointer-events:none; }
.gen-card .gen-role{
  display:block; margin-top:18px;
  font-family:var(--body); font-weight:600; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-lt);
}
.gen-card .gen-name{ font-size:clamp(1.4rem,1.9vw,1.7rem); text-transform:uppercase; letter-spacing:.04em; margin:.45rem 0 .2rem; }
.gen-card .gen-years{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--cream-soft); }
.gen-card p{ color:var(--cream-soft); font-size:.95rem; margin:.7rem 0 0; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:1024px){
  .gen-grid{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
}
@media(max-width:760px){
  /* on small screens the frise becomes a clean vertical timeline.
     !important + reset de #frise/.frise-track : on neutralise les styles inline
     que le JS pose en mode « capturé » (hauteur de section géante + translation
     de la piste), au cas où il choisirait le mauvais mode sur certains
     téléphones → garantit une frise verticale propre. */
  #frise{ height:auto !important; }
  body[data-frise] .frise-sticky{ position:static !important; height:auto !important; overflow:visible !important; }
  .frise-track{ transform:none !important; }
  .frise-head{ flex-direction:column; align-items:flex-start; gap:14px; padding-top:clamp(80px,12vh,120px); }
  .frise-hint{ align-self:flex-start; }
  .frise-viewport{ overflow:visible; height:auto; }
  .frise-track{
    position:relative; inset:auto; flex-direction:column; width:auto;
    padding:20px 0 10px; gap:0;
  }
  .frise-line{
    left:31px; right:auto; top:0; bottom:0; width:1px; height:auto;
    background:linear-gradient(180deg, transparent 0, var(--line-dark) 4%, var(--line-dark) 96%, transparent 100%);
  }
  .station{
    width:100%; display:block; height:auto; padding:26px var(--gutter) 26px 64px; min-height:0;
  }
  .station::before{ left:31px; top:42px; transform:translate(-50%,0); height:auto; bottom:0; }
  .station:last-child::before{ display:none; }
  .st-half{ width:100%; margin:0; max-width:none; }
  .st-media, .st-text,
  .station.flip .st-media, .station.flip .st-text{ grid-row:auto; padding:0; }
  /* sur mobile (frise verticale ancrée à gauche) on garde le texte aligné à gauche */
  .st-text{ text-align:left; }
  .st-text p{ margin-inline:0; }
  .st-media{ margin-bottom:18px; }
  /* Photo dimensionnée par la LARGEUR (et non par une hauteur en svh, mal gérée
     par certains navigateurs mobiles) : pleine largeur, ratio 16/10. Le figure
     passe en 100% sinon « width:max-content » le réduisait à presque rien. */
  .st-media .figure{ width:100%; max-width:none; }
  .st-media .ph{ aspect-ratio:16/10; width:100%; height:auto; }
  .st-year{
    position:static; transform:none; padding:0; background:transparent;
    display:block; margin-bottom:10px; font-size:2.2rem;
  }
  .station.flip{ display:block; }
  .frise-foot{ display:none; }
  /* Sur mobile, les stations sont VISIBLES d'emblée et SANS transformation.
     !important indispensable : les règles d'apparition desktop « .station.in
     .st-year { transform:translate(-50%,-50%) } » ont une spécificité plus
     forte et décalaient la date (display:block, pleine largeur) de -50% de sa
     largeur → elle partait hors écran à gauche. */
  body.frise-js .station .st-half,
  body.frise-js .station .st-year,
  body.frise-js .station .st-media,
  body.frise-js .station .st-text,
  body.frise-js .station.in .st-half,
  body.frise-js .station.in .st-year,
  body.frise-js .station.in .st-media,
  body.frise-js .station.in .st-text{ opacity:1 !important; transform:none !important; }
  body.frise-js .station::before,
  body.frise-js .station.in::before{ opacity:.5 !important; transform:translate(-50%,0) !important; }
}
@media(max-width:560px){
  .gen-grid{ grid-template-columns:1fr; max-width:380px; margin-inline:auto; }
  .page-hero{ align-items:flex-end; }
}