/* ═══ Style partagé des pages publiques narratives de Corpus ═══
   (manifeste, lexique, aura… FR + EN). Servie à /corpus-seo.css. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0a0a0a; --text: #f0ece4; --muted: rgba(240,236,228,0.62);
  --faint: rgba(240,236,228,0.30); --border: rgba(240,236,228,0.14);
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Raleway', sans-serif;
}
html { scroll-behavior: smooth; background-color: var(--bg); }
body {
  background: transparent;            /* transparent → laisse voir l'image de fond fixe */
  color: var(--text); font-family: var(--sans); font-weight: 300;
  line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Image de fond plein écran (background-web.jpg) + voile dégradé pour la
   lisibilité, dans UNE seule couche fixe (z-index:-1, body transparent → visible).
   ::before fixe = pas de bug background-attachment sur iOS. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.70) 48%, rgba(10,10,10,0.82) 100%),
    url('/CORPUS/assets/media/background-web.jpg') center center / cover no-repeat;
}
a { color: inherit; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 1.6rem; }

/* ── Hero : logo (même taille/position que sur le site) sur le fond, sans bandeau ── */
.hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; }
.hero-logo { width: clamp(150px, 34vw, 220px); height: auto; filter: brightness(0) invert(1); margin-bottom: 1.2rem; }
.hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(0.9rem, 1.8vw, 1.05rem); line-height: 1.6; letter-spacing: .03em; color: var(--muted); max-width: 560px; }

/* ── Sections ── */
section { padding: 2.4rem 0; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: .06em; margin-bottom: 1.4rem; text-align: center; text-transform: uppercase; }
h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; letter-spacing: .02em; margin-bottom: .4rem; }
p { margin-bottom: 1.1rem; color: var(--text); }
.lead { color: var(--muted); }

/* Séparateur étoile (même taille que sur la page Mentions légales) + 50px de vide avant/après */
.star { text-align: center; padding: 50px 0; }
.star img { width: 18px; height: 18px; opacity: .85; }

/* Manifeste / récit — texte à taille normale (pas de gros texte) */
.manifeste { text-align: center; }
.manifeste p { font-family: var(--serif); font-size: 1.05rem; font-weight: 300; line-height: 1.9; color: var(--text); margin-bottom: 1.4rem; }
.manifeste .close { font-style: italic; color: var(--muted); letter-spacing: .12em; }

/* Lexique */
.lexique { display: grid; gap: 1.1rem; }
.term { border-top: 1px solid var(--border); padding-top: 1.1rem; }
.term dt { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; letter-spacing: .02em; margin-bottom: .25rem; }
.term dd { color: var(--muted); font-size: .95rem; }
.lexique .term:last-child { border-bottom: 1px solid var(--border); padding-bottom: 1.1rem; }

/* Bloc de prose (page /aura) */
.block { border-top: 1px solid var(--border); padding-top: 1.4rem; margin-bottom: 1.8rem; }
.block p { color: var(--muted); }

/* FAQ */
.faq details { border-top: 1px solid var(--border); padding: 1.05rem 0; }
.faq summary { font-family: var(--serif); font-size: 1.18rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--sans); font-weight: 200; font-size: 1.4rem; color: var(--faint); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); font-size: .95rem; margin: .9rem 0 .2rem; }

/* CTA (+ grand vide avant le footer) */
.cta { text-align: center; padding: 3rem 1.6rem 7rem; }
.cta h2 { margin-bottom: 1.6rem; }
.cta .btn { margin-bottom: 50px; }   /* 50px de vide sous le bouton */
.btn { display: inline-block; font-family: var(--sans); font-weight: 300; letter-spacing: .26em; text-transform: uppercase; font-size: .68rem; color: var(--text); text-decoration: none; border: 1px solid var(--border); padding: 1rem 2.2rem; transition: background .3s, border-color .3s; }
.btn:hover { background: rgba(240,236,228,0.06); border-color: var(--faint); }

footer { border-top: 1px solid var(--border); text-align: center; padding: 2.2rem 1.6rem 3rem; }
footer .links { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
footer a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }
footer .copy { font-size: .7rem; color: var(--faint); letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }