@font-face{
  font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
}
@font-face{
  font-family:"IM Fell English";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IM Fell English";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/im-fell-english-latin-400-italic.woff2") format("woff2");
}
@font-face{
  font-family:"IM Fell English SC";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2");
}

:root{
  --ink:#0a0a0a;
  --ink-2:#121110;
  --parchment:#d4c5a9;
  --parchment-dim:#9c9078;
  --cream:#e8dcc4;
  --gold:#a89968;
  --gold-lt:#c9b88d;
  --rubric:#a34a30;          /* minium : rubrique de manuscrit, employé avec parcimonie */
  --rule:rgba(168,153,104,.22);

  --display:"IM Fell English",Georgia,serif;
  --sc:"IM Fell English SC",Georgia,serif;
  --body:"EB Garamond",Georgia,serif;

  --max:820px;
}

*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--parchment);
  font-family:var(--body);font-size:1.06rem;line-height:1.78;
  font-variant-ligatures:common-ligatures;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 50% -10%,rgba(168,153,104,.09),transparent 60%);
}
main{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}

a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(201,184,141,.35)}
a:hover{color:var(--cream);border-bottom-color:var(--cream)}
:focus-visible{outline:1px solid var(--gold-lt);outline-offset:4px}

/* ---------- titres & structure ---------- */
.eyebrow{
  font-family:var(--sc);font-size:.78rem;letter-spacing:.28em;
  color:var(--gold);text-transform:uppercase;margin:0 0 1.1rem
}
h1,h2,h3{font-weight:400;margin:0}
h2.sec{
  font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2rem);
  color:var(--cream);letter-spacing:.02em;margin:0 0 1.6rem
}
h3{font-family:var(--sc);font-size:1.02rem;letter-spacing:.15em;color:var(--gold-lt)}
p{margin:0 0 1.15rem}
em{color:var(--cream)}

.rule{display:flex;align-items:center;gap:14px;margin:5.5rem 0}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--rule)}
.rule span{width:5px;height:5px;transform:rotate(45deg);background:var(--gold);opacity:.7}

section{padding:0}
.sect{margin:5.5rem 0}

/* ---------- ouverture ---------- */
header.hero{text-align:center;padding:clamp(4rem,11vh,7.5rem) 0 0}
.mark{position:relative;width:210px;height:210px;margin:0 auto 2.4rem}
.mark svg{position:absolute;inset:0;width:100%;height:100%;
  animation:turn 240s linear infinite;opacity:.9}
.mark img{position:absolute;top:50%;left:50%;width:96px;height:96px;
  transform:translate(-50%,-50%);object-fit:contain;opacity:.95}
@keyframes turn{to{transform:rotate(360deg)}}

h1.title{
  font-family:var(--display);font-size:clamp(2.1rem,7vw,3.5rem);
  line-height:1.05;color:var(--cream);letter-spacing:.01em
}
.title-fr{font-family:var(--sc);font-size:.92rem;letter-spacing:.3em;
  color:var(--gold);margin:1.3rem 0 0}
.stamp{
  margin:2.4rem auto 0;display:inline-flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem 1.4rem;font-family:var(--sc);font-size:.74rem;letter-spacing:.2em;
  color:var(--parchment-dim)
}
.stamp b{font-weight:400;color:var(--gold-lt)}
.motto{
  margin:3.2rem auto 0;max-width:34ch;font-style:italic;color:var(--parchment-dim);
  font-size:1rem;line-height:1.7
}

/* ---------- LE RAIL ---------- */
.rail-sect{margin:6rem 0 5rem}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;max-width:var(--max);margin:0 auto 1.6rem;padding:0 26px}
.rail-hint{font-family:var(--sc);font-size:.7rem;letter-spacing:.18em;
  color:var(--parchment-dim);white-space:nowrap}

.rail{overflow-x:auto;overflow-y:hidden;cursor:grab;
  scrollbar-color:rgba(168,153,104,.35) transparent;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.rail.dragging{cursor:grabbing}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:rgba(168,153,104,.35)}
.rail-inner{position:relative;height:210px}

.line{position:absolute;left:0;right:0;top:158px;height:1px;background:var(--rule)}
.seg{position:absolute;top:158px;height:1px;background:var(--gold);opacity:.75}
.cent{position:absolute;top:158px;transform:translateX(-50%);text-align:center}
.cent i{display:block;width:1px;height:9px;margin:0 auto;background:var(--rule)}
.cent b{display:block;margin-top:8px;font-family:var(--sc);font-weight:400;
  font-size:.68rem;letter-spacing:.16em;color:#6d6553}

.ev{position:absolute;top:0;height:159px;width:0;padding:0;border:0;
  background:none;color:inherit;font:inherit;cursor:pointer}
.ev-lab{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;
  text-align:center;transition:color .25s}
.ev-year{display:block;font-family:var(--display);font-size:1.18rem;
  color:var(--gold-lt);line-height:1.1}
.ev-t{display:block;font-family:var(--sc);font-size:.68rem;letter-spacing:.16em;
  color:var(--parchment-dim);margin-top:3px}
.ev-stem{position:absolute;left:0;width:1px;background:var(--rule);
  transform:translateX(-50%);transition:background .25s}
.ev-dot{position:absolute;left:0;bottom:-3.5px;width:7px;height:7px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--ink);border:1px solid var(--gold);transition:all .25s}
.ev[data-lane="0"] .ev-lab{top:96px}
.ev[data-lane="0"] .ev-stem{top:140px;height:19px}
.ev[data-lane="1"] .ev-lab{top:26px}
.ev[data-lane="1"] .ev-stem{top:70px;height:89px}
.ev:hover .ev-year,.ev:focus-visible .ev-year{color:var(--cream)}
.ev:hover .ev-dot{background:var(--gold)}
.ev[aria-current="true"] .ev-year{color:var(--cream)}
.ev[aria-current="true"] .ev-t{color:var(--gold)}
.ev[aria-current="true"] .ev-dot{background:var(--gold-lt);border-color:var(--gold-lt)}
.ev[aria-current="true"] .ev-stem{background:rgba(168,153,104,.55)}
.ev.now .ev-dot{border-color:var(--rubric)}
.ev.now[aria-current="true"] .ev-dot{background:var(--rubric);border-color:var(--rubric)}

.lectio{max-width:var(--max);margin:2.2rem auto 0;padding:0 26px;min-height:210px}
.lectio-year{font-family:var(--display);font-size:clamp(2.4rem,8vw,3.4rem);
  color:var(--cream);line-height:1}
.lectio-meta{font-family:var(--sc);font-size:.72rem;letter-spacing:.22em;
  color:var(--gold);margin:.7rem 0 1.4rem}
.lectio-la{margin:0 0 1rem;max-width:62ch}
.lectio-fr{margin:0;max-width:62ch;font-size:.94rem;font-style:italic;
  color:var(--parchment-dim)}
.fade{animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- bloc multilingue ---------- */
.langbar{display:flex;gap:1.4rem;margin:0 0 1.8rem}
.langbar button{
  background:none;border:0;padding:0 0 4px;cursor:pointer;
  font-family:var(--sc);font-size:.74rem;letter-spacing:.22em;
  color:var(--parchment-dim);border-bottom:1px solid transparent}
.langbar button:hover{color:var(--gold-lt)}
.langbar button[aria-pressed="true"]{color:var(--cream);border-bottom-color:var(--rubric)}
.lang-pane{display:none}
.lang-pane.on{display:block;animation:fade .4s ease both}
.lead::first-letter{
  float:left;font-family:var(--display);font-size:3.4em;line-height:.82;
  color:var(--gold-lt);padding:.06em .12em 0 0}

/* ---------- campi ---------- */
.campi{border-top:1px solid var(--rule)}
.campus{border-bottom:1px solid var(--rule);padding:1.9rem 0}
.campus header{display:flex;align-items:baseline;gap:1rem}
.campus .idx{font-family:var(--sc);font-size:.7rem;letter-spacing:.16em;color:#6d6553}
.campus p{margin:1rem 0 0;font-size:1.02rem}
.clamped{max-height:5.6em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 45%,transparent);
  mask-image:linear-gradient(#000 45%,transparent)}
.more{margin-top:.9rem;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sc);font-size:.7rem;letter-spacing:.2em;color:var(--gold)}
.more:hover{color:var(--cream)}

/* ---------- citation ---------- */
.quote{text-align:center;padding:1rem 0}
.quote p{font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,3.2vw,1.5rem);line-height:1.6;color:var(--cream);
  max-width:30ch;margin:1.2rem auto 0}

/* ---------- liens confrères ---------- */
.sodales{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.6rem}
.sodalis{display:flex;align-items:center;gap:.9rem;border:0}
.sodalis img{width:86px;height:86px;object-fit:contain;opacity:.75;transition:opacity .3s}
.sodalis:hover img{opacity:1}
.sodalis span{font-family:var(--sc);font-size:.78rem;letter-spacing:.16em}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--rule);margin-top:6rem;padding:3.5rem 0 4.5rem;
  text-align:center}
.clause{font-style:italic;color:var(--parchment-dim);max-width:52ch;margin:0 auto 2.4rem}
.sigla{font-family:var(--sc);font-size:.78rem;letter-spacing:.24em;color:var(--gold-lt)}
.legal{margin:2.8rem auto 0;max-width:64ch;font-size:.72rem;line-height:1.9;
  color:#5f594c;letter-spacing:.03em}
.legal a{color:#6d6553;border:0}

@media (max-width:640px){
  body{font-size:1rem}
  .mark{width:170px;height:170px}
  .rail-hint{display:none}
  .sodales{gap:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}