/* ═══════════════════════════════════════════════════════════════
   CSS COMMUN — Nemeton, encyclopédie du druidisme
   ═══════════════════════════════════════════════════════════════ */

:root{
  --vellum:#E8EAE1;
  --vellum-deep:#DDE0D4;
  --ink:#1E2B24;
  --ink-soft:#41544A;
  --bronze:#8A6D2F;
  --bronze-pale:#B99B54;
  --moss:#9DAF94;
  --night:#22332A;
  --night-deep:#18251E;
  --serif:'EB Garamond', Georgia, serif;
  --uncial:'Uncial Antiqua', serif;
  --spectral:'Spectral', Georgia, serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--vellum);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;}

/* ============ BANDEAU SUPERIEUR ============ */
.topbar{
  background:var(--night-deep);
  color:var(--moss);
  font-family:var(--spectral);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  padding:.5rem 1rem;
}
.topbar em{font-style:normal;color:var(--bronze-pale);}

/* ============ EN-TETE & NAVIGATION ============ */
header.site{
  background:var(--vellum);
  border-bottom:1px solid var(--ink);
}
.masthead{
  position:relative;
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;
  gap:1rem;
}
.brand{display:flex;align-items:center;gap:.9rem;}
.brand svg{flex-shrink:0;}
.brand-name{
  font-family:var(--uncial);
  font-size:1.7rem;
  letter-spacing:.04em;
  color:var(--ink);
}
.brand-sub{
  display:block;
  font-family:var(--spectral);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-top:.1rem;
}
.search{
  display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--ink-soft);
  border-radius:2rem;
  padding:.35rem .9rem;
  font-family:var(--spectral);
  font-size:.85rem;
  color:var(--ink-soft);
  background:transparent;
  cursor:pointer;
}
.search:hover{border-color:var(--bronze);color:var(--bronze);}

.search-panel{
  position:absolute;right:1.5rem;top:calc(100% + .5rem);
  width:340px;max-width:calc(100vw - 3rem);
  background:var(--night);
  box-shadow:0 12px 30px rgba(24,37,30,.35);
  padding:.9rem;
  z-index:70;
}
.search-input{
  width:100%;
  border:1px solid var(--ink-soft);
  background:var(--vellum);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1rem;
  padding:.5rem .7rem;
}
.search-input:focus-visible{outline:2px solid var(--bronze-pale);outline-offset:2px;}
.search-results{
  list-style:none;
  margin-top:.6rem;
  max-height:320px;
  overflow-y:auto;
}
.search-results li + li{border-top:1px solid rgba(232,234,225,.12);}
.search-results a{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.5rem .3rem;
  color:var(--vellum);
}
.search-results a:hover, .search-results a:focus-visible{color:var(--bronze-pale);}
.sr-titre{font-family:var(--serif);font-size:.95rem;}
.sr-cat{
  font-family:var(--spectral);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);
}
.search-empty{
  margin-top:.6rem;
  font-family:var(--spectral);font-size:.82rem;
  color:var(--moss);
}

nav.primary{
  border-top:1px solid rgba(30,43,36,.25);
  background:var(--vellum);
}
nav.primary > ul{
  max-width:1200px;margin:0 auto;
  display:flex;list-style:none;
  justify-content:center;
  flex-wrap:wrap;
}
nav.primary > ul > li{position:relative;}
nav.primary > ul > li > a{
  display:block;
  padding:.75rem .7rem;
  font-family:var(--spectral);
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
nav.primary > ul > li:hover > a,
nav.primary > ul > li:focus-within > a{
  border-bottom-color:var(--bronze);
  color:var(--bronze);
}
.submenu{
  position:absolute;left:0;top:100%;
  min-width:270px;
  background:var(--night);
  color:var(--vellum);
  list-style:none;
  padding:.7rem 0;
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:0 12px 30px rgba(24,37,30,.35);
  z-index:60;
}
li:hover > .submenu, li:focus-within > .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.submenu li a{
  display:block;
  padding:.42rem 1.3rem;
  font-family:var(--serif);
  font-size:.95rem;
  color:var(--vellum);
}
.submenu li a:hover{background:var(--night-deep);color:var(--bronze-pale);}
.submenu .rubrique{
  padding:.6rem 1.3rem .25rem;
  font-family:var(--spectral);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--moss);
}
.menu-toggle{display:none;}

/* ============ HEROS ============ */
.hero{
  background:var(--night);
  color:var(--vellum);
  position:relative;
  overflow:hidden;
}
.hero-inner{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns:70px 1fr;
  gap:2.5rem;
  padding:4.5rem 1.5rem 5rem;
  align-items:center;
}
.ogham-stem{
  height:100%;
  display:flex;justify-content:center;
}
.hero h1{
  font-family:var(--uncial);
  font-weight:400;
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1.15;
  color:var(--vellum);
  max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--bronze-pale);}
.hero p.lede{
  margin-top:1.4rem;
  max-width:58ch;
  font-size:1.15rem;
  color:#C9D2C4;
}
.hero .hero-actions{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap;}
.btn{
  display:inline-block;
  font-family:var(--spectral);
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.8rem 1.6rem;
  border:1px solid var(--bronze-pale);
  color:var(--bronze-pale);
  transition:background .2s, color .2s;
}
.btn:hover{background:var(--bronze-pale);color:var(--night-deep);}
.btn.solid{background:var(--bronze-pale);color:var(--night-deep);}
.btn.solid:hover{background:var(--vellum);border-color:var(--vellum);}
.hero-note{
  margin-top:2.6rem;
  font-family:var(--spectral);
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--moss);
}

/* ============ SECTIONS ============ */
.section{max-width:1200px;margin:0 auto;padding:4rem 1.5rem;}
.section-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:2.2rem;flex-wrap:wrap;}
.section-head h2{
  font-family:var(--serif);
  font-variant:small-caps;
  font-weight:600;
  font-size:1.9rem;
  letter-spacing:.06em;
}
.section-head .rule{flex:1;height:1px;background:var(--ink-soft);opacity:.4;min-width:60px;}
.section-head .voir{
  font-family:var(--spectral);font-size:.78rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);
}
.section-head .voir:hover{text-decoration:underline;}

/* Plan de l'encyclopedie */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;
  background:rgba(30,43,36,.25);
  border:1px solid rgba(30,43,36,.25);
}
.plan-cell{
  background:var(--vellum);
  padding:1.7rem 1.5rem;
  transition:background .2s;
}
.plan-cell:hover{background:var(--vellum-deep);}
.plan-cell h3{
  font-family:var(--serif);
  font-variant:small-caps;
  font-size:1.25rem;
  letter-spacing:.05em;
  margin-bottom:.3rem;
}
.plan-cell h3 a:hover{color:var(--bronze);}
.plan-cell .ogham-mark{color:var(--bronze);font-family:var(--spectral);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;display:block;margin-bottom:.6rem;}
.plan-cell ul{list-style:none;margin-top:.7rem;}
.plan-cell li{padding:.18rem 0;font-size:.98rem;color:var(--ink-soft);}
.plan-cell li a:hover{color:var(--bronze);text-decoration:underline;text-underline-offset:3px;}

/* Article vedette */
.vedette{background:var(--vellum-deep);}
.vedette-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center;
}
.vedette-txt .etiquette{
  font-family:var(--spectral);font-size:.72rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--bronze);
}
.vedette-txt h3{
  font-family:var(--serif);font-weight:600;font-size:2rem;
  line-height:1.2;margin:.6rem 0 1rem;
}
.vedette-txt p{color:var(--ink-soft);max-width:60ch;}
.vedette-fig{
  border:1px solid var(--ink-soft);
  padding:2rem;
  text-align:center;
  background:var(--vellum);
}
.vedette-fig figcaption{
  margin-top:1rem;font-family:var(--spectral);font-size:.8rem;
  letter-spacing:.08em;color:var(--ink-soft);font-style:italic;
}

/* Roue de l'annee */
.roue-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;
}
.fete{
  border-top:2px solid var(--bronze);
  padding-top:1rem;
}
.fete .date{
  font-family:var(--spectral);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze);
}
.fete h3{font-variant:small-caps;font-size:1.3rem;margin:.25rem 0 .4rem;}
.fete h3 a:hover{color:var(--bronze);}
.fete p{font-size:.95rem;color:var(--ink-soft);}

/* Glossaire / bandeau sombre */
.bandeau{
  background:var(--night);color:var(--vellum);
}
.bandeau .section{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem;}
.bandeau h3{
  font-variant:small-caps;font-size:1.3rem;color:var(--bronze-pale);margin-bottom:.6rem;
}
.bandeau p{color:#C9D2C4;font-size:.98rem;}
.bandeau a.lien{
  display:inline-block;margin-top:.8rem;
  font-family:var(--spectral);font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--moss);
  border-bottom:1px solid var(--moss);padding-bottom:2px;
}
.bandeau a.lien:hover{color:var(--bronze-pale);border-color:var(--bronze-pale);}

/* ============ PIED DE PAGE ============ */
footer{
  background:var(--night-deep);color:var(--moss);
  font-family:var(--spectral);
}
.footer-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2rem;padding:3.5rem 1.5rem 2.5rem;
}
.footer-grid h4{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze-pale);margin-bottom:.8rem;
}
.footer-grid ul{list-style:none;}
.footer-grid li{padding:.16rem 0;font-size:.88rem;}
.footer-grid li a:hover{color:var(--vellum);}
.footer-base{
  border-top:1px solid rgba(157,175,148,.25);
  text-align:center;padding:1.2rem;font-size:.75rem;letter-spacing:.12em;
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .vedette-grid{grid-template-columns:1fr;}
  .hero-inner{grid-template-columns:1fr;padding-top:3rem;}
  .ogham-stem{display:none;}
}
@media (max-width:760px){
  .menu-toggle{
    display:block;margin:0 auto;
    font-family:var(--spectral);font-size:.8rem;letter-spacing:.18em;
    text-transform:uppercase;background:none;border:1px solid var(--ink);
    padding:.5rem 1.4rem;cursor:pointer;color:var(--ink);
    margin-bottom:.6rem;
  }
  nav.primary > ul{display:none;flex-direction:column;}
  nav.primary.open > ul{display:flex;}
  nav.primary > ul > li > a{border-left:2px solid transparent;border-bottom:none;}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;display:none;
  }
  li:hover > .submenu, li:focus-within > .submenu{display:block;}
  .masthead{flex-direction:column;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}