@charset "UTF-8";

/*
  articles.css — Reiki Perche
  À placer dans : assets/css/articles.css
  ─────────────────────────────────────────
  • Fond blanc pour le texte (esprit reiki-quotidien.php)
  • Image de fond du site sur le hero et l'overlay nav
  • Menu navigation sobre : liens texte, pas de boutons
  • Zoom texte A+ / A− + pinch sur #article
  ─────────────────────────────────────────
  Si le nom de l'image de fond diffère de bg.jpg,
  remplacer "../images/bg.jpg" par le bon chemin.
*/

/* ── VARIABLES ── */
:root {
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'Jost', system-ui, sans-serif;
  --gold:        #b8965a;
  --gold-light:  #d4b483;
  --gold-border: rgba(145, 105, 0, .75);
  --violet:      #5000C9;
  --ink:         #1a1814;
  --ink-soft:    #3d3830;
  --stone:       #f5f2ec;
  --stone-mid:   #c8bfb0;
  --white:       #fdfbf8;

  /* Image de fond — même que l'accueil du site */
  --bg-image: url('https://reikiperche.fr/images/bg.jpg');
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE ── */
body.page-article {
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
}

/* ════════════════════════════════════════
   HEADER sticky
═══════════════════════════════════════ */
.art-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(26, 24, 20, .92);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 1rem;
}

.art-logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}
.art-logo img   { width: 2.1rem; height: auto; opacity: .92; }
.art-logo span  {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: .05em;
}

.art-header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Boutons zoom A+ / A− */
.art-zoom { display: flex; gap: .25rem; }
.art-zoom-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  color: var(--stone-mid);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  padding: .28rem .5rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  line-height: 1;
}
.art-zoom-btn:hover { border-color: var(--gold); color: var(--gold-light); }

/* Bouton burger ☰ */
.art-burger {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  color: var(--stone-mid);
  font-size: 1.1rem;
  padding: .28rem .55rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  line-height: 1;
}
.art-burger:hover { border-color: var(--gold); color: var(--gold-light); }

/* ════════════════════════════════════════
   OVERLAY NAV — image de fond + menu sobre
═══════════════════════════════════════ */
.art-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  /* Image de fond du site + voile sombre */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow-y: auto;
}
.art-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 18, .82);
  z-index: 0;
}
.art-overlay.open { display: block; }

/* Contenu au-dessus du voile */
.art-overlay-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 2rem;
  text-align: center;
}

/* Bouton fermer */
.art-overlay-close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
}
.art-overlay-close button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  transition: color .2s;
  padding: .2rem .4rem;
}
.art-overlay-close button:hover { color: var(--gold-light); }

/* Logo dans l'overlay */
.art-overlay-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-bottom: 3rem;
}
.art-overlay-logo img  { width: 2.8rem; opacity: .9; }
.art-overlay-logo span {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold-light);
  letter-spacing: .06em;
}

/* Label section */
.art-nav-label {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
  opacity: .8;
}

/* Liste liens articles */
.art-nav-articles {
  list-style: none;
  margin-bottom: 2.5rem;
}
.art-nav-articles li {
  margin-bottom: .5rem;
}
.art-nav-articles a {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .2s;
  display: inline-block;
  padding: .15rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.art-nav-articles a:hover,
.art-nav-articles a.current {
  color: var(--gold-light);
  border-bottom-color: var(--gold-border);
}

/* Séparateur */
.art-nav-sep {
  width: 2rem;
  height: 1px;
  background: rgba(255,255,255,.2);
  margin: 0 auto 2rem;
}

/* Retour accueil */
.art-nav-home {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s;
}
.art-nav-home:hover { color: var(--gold-light); }

/* ════════════════════════════════════════
   HERO — image de fond du site
═══════════════════════════════════════ */
.art-hero {
  position: relative;
  text-align: center;
  padding: 5rem 2rem 4rem;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Voile sombre sur le hero */
.art-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 18, .72);
}
/* Contenu au-dessus du voile */
.art-hero > * { position: relative; z-index: 1; }

.art-hero .surtitre {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.art-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1.4rem;
}
.art-hero h1 em { color: var(--gold-light); font-style: italic; }
.art-hero .chapeau {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ════════════════════════════════════════
   NAV LOCALE (ancres)
═══════════════════════════════════════ */
.nav-locale {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--stone);
  border-bottom: 1px solid var(--stone-mid);
  padding: 0 1rem;
}
.nav-locale a {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .85rem 1.1rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-locale a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ════════════════════════════════════════
   ARTICLE — fond blanc, typo lisible
   font-size contrôlé par JS de zoom
═══════════════════════════════════════ */
#article {
  max-width: 740px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
  font-size: 1rem;
}

#article h2 {
  font-family: var(--serif);
  font-size: 1.9em;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 1.3rem;
  line-height: 1.25;
}
#article h3 {
  font-family: var(--serif);
  font-size: 1.3em;
  font-weight: 400;
  color: var(--ink);
  margin: 2.2rem 0 .9rem;
}
#article p {
  font-size: 1em;
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}
#article em     { font-family: var(--serif); font-style: italic; color: var(--ink); }
#article strong { font-weight: 500; color: var(--ink); }
#article hr     { border: none; border-top: 1px solid var(--stone-mid); margin: 2.5rem 0; }
#article sup    { font-size: .72em; position: relative; top: -.4em; }

/* Bloc .gold */
.gold {
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  margin: 1.8rem 0;
  background: var(--stone);
  font-family: var(--serif);
  font-size: 1.05em;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.75;
  list-style: none;
}
.gold li          { list-style: none; margin-bottom: .35rem; }
.gold li:last-child { margin-bottom: 0; }
.gold p           { margin-bottom: .5rem; }
.gold p:last-child { margin-bottom: 0; }

/* Blockquote (reiki-quotidien) */
#article blockquote.gold { font-size: 1.05em; font-style: italic; }

/* CTA */
.art-cta {
  display: inline-block;
  margin-top: 2rem;
  padding: .7rem 1.8rem;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--ink);
  color: var(--gold-light);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.art-cta:hover { background: var(--gold); color: var(--ink); }

/* ════════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.art-footer {
  background: var(--ink);
  color: var(--stone-mid);
  text-align: center;
  padding: 2.5rem 2rem;
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .06em;
}
.art-footer .copyright { margin-bottom: 1rem; font-size: .72rem; opacity: .6; }
.art-footer .icons {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 0; margin: 0;
}
.art-footer .icons a {
  color: var(--gold-light);
  font-size: 1.05rem;
  text-decoration: none;
  transition: color .2s;
}
.art-footer .icons a:hover { color: var(--gold); }

/* ════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 736px) {
  .art-header { padding: .85rem 1.2rem; }
  .art-hero   { padding: 3.5rem 1.25rem 3rem; }
  #article    { padding: 2.5rem 1.1rem 4rem; }
  #article h2 { font-size: 1.6em; }
  .art-nav-articles a { font-size: 1.15rem; }
}
@media (max-width: 480px) {
  .art-logo span { font-size: 1.05rem; }
  .art-hero h1   { font-size: clamp(1.65rem, 7vw, 2.5rem); }
  .nav-locale a  { font-size: .7rem; padding: .75rem .8rem; }
}

/* Paragraphe de clôture (reiki-quotidien) */
.art-closing {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05em;
  color: var(--ink-soft);
  line-height: 1.8;
}