/* ============================================================
   AUGURES.ME — additions spécifiques au-dessus de la charte
   graphique générique (static/css/charte.css). On ne redéfinit
   ici que ce que la charte ne fournit pas : formulaires, roue
   astrale, petits états de page.
   ============================================================ */

:root {
  --augures-error: #b5482f;
}

/* ── Polices auto-hébergées ──
   charte.css est une copie verbatim de ../charte-graphique-generique.css
   (source de vérité au niveau racine du projet) : les @font-face vont ici
   plutôt que là-bas, pour ne pas être écrasés au prochain re-copiage.
   Remplace les deux liens Google Fonts précédemment chargés dans
   _base.html — même familles/graisses, réduites aux sous-ensembles latin
   et latin-ext (le site est exclusivement francophone). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Logo / identité ── */
.nav-logo em { font-style: normal; color: var(--text-gold); }

/* Footer plus discret : la charte fixe le texte à 1em (= taille du
   corps), trop imposant pour une simple mention en pied de page. */
footer p { font-size: 0.6em; letter-spacing: 0.14em; }

/* ── Formulaires ── */
.field-group { max-width: 480px; margin: 0 auto; text-align: left; }
.field { margin-bottom: 1.75rem; }
.field label {
  display: block;
  font-family: var(--font-caps);
  font-size: 0.8em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.theme-dark .field label { color: var(--text-gold-light); }
.theme-light .field label { color: var(--text-dark-accent); }

.field input[type="text"],
.field input[type="date"],
.field input[type="time"],
.field input[type="email"],
.field input[type="number"],
.field select {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1em;
  padding: 0.75rem 0.9rem;
  background: transparent;
  border-radius: 0;
}
.theme-dark .field input,
.theme-dark .field select {
  color: var(--text-cream);
  border: 0.5px solid var(--border-on-dark);
}
.theme-light .field input,
.theme-light .field select {
  color: var(--text-dark);
  border: 0.5px solid var(--border-on-light);
}

.field-row { display: flex; gap: 1.5rem; }
.field-row .field { flex: 1; }

@media (max-width: 480px) {
  .field-row { flex-direction: column; gap: 0; }
  .field-row .field { flex: none; }
}

.form-submit {
  display: block;
  width: 100%;
  font-family: var(--font-caps);
  font-size: 1em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  color: var(--bg-light);
  background: var(--text-dark-accent);
  padding: 1rem 2.5rem;
  transition: all 0.25s;
}
.form-submit:hover { background: #5a3e18; }

.form-error {
  border: 0.5px solid var(--augures-error);
  color: var(--augures-error);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.95em;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Page d'archive d'un thème MCP (roue SVG servie par /t/<id>.svg) ──
   La roue porte ses propres couleurs : elle est servie comme fichier
   autonome et doit rester identique téléchargée, imprimée ou en <img>. */
.archive-wheel { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 2.5rem; }
.archive-lieu { margin-top: 0.4rem; font-style: italic; }
.archive-note { text-align: center; font-size: 0.9em; opacity: 0.75; margin-bottom: 2rem; }
.archive-table { width: 100%; border-collapse: collapse; margin: 0 auto 2.5rem; font-size: 0.95em; }
.archive-table caption { font-family: var(--font-caps); letter-spacing: 0.08em; text-transform: uppercase;
                         font-size: 0.75em; padding-bottom: 0.8rem; color: var(--text-dark-accent); }
.archive-table th { font-family: var(--font-caps); font-size: 0.75em; letter-spacing: 0.06em;
                    text-transform: uppercase; font-weight: 400; text-align: left;
                    padding: 0.4rem 0.6rem; color: var(--text-dark-accent); }
.archive-table td { padding: 0.4rem 0.6rem; border-top: 0.5px solid var(--border-on-light); }
.archive-table abbr { text-decoration: none; opacity: 0.7; }
.archive-table .glyph-inline { margin-right: 0.35em; color: var(--text-dark-accent); }
.archive-house { font-family: var(--font-caps); letter-spacing: 0.06em; }
.archive-meta { font-size: 0.85em; opacity: 0.7; text-align: center; }
.archive-downloads { text-align: center; margin-top: 1.5rem; }
/* charte.css styles links per component, not globally, so a bare content
   link would otherwise fall back to the browser's blue. */
.archive-downloads a { color: var(--text-dark-accent); }
@media (max-width: 480px) {
  .archive-table { font-size: 0.85em; }
  .archive-table th, .archive-table td { padding: 0.35rem 0.3rem; }
}

/* ── Résultat / interprétation ── */
.interpretation-text { font-size: 1.05em; line-height: 1.85; }
.interpretation-text p { margin-bottom: 1.2rem; }

/* ── Raffinements haut de gamme (au-dessus de la charte générique) ──
   Tons plus profonds, hiérarchie typographique plus marquée entre
   le titre hero et les titres de section, respiration accrue sur
   les cartes et les CTA. N'agit que par surcharge, ne modifie pas
   les variables de charte.css directement. */
:root {
  --bg-dark:        #0a0908;
  --text-cream:      #f4efe4;
  --text-gold-light: #e2caa0;
  --text-gold:       #c9a875;
}

body { font-size: 18px; line-height: 1.7; }

.eyebrow { font-size: 0.72em; letter-spacing: 0.3em; }

.section-title { letter-spacing: 0.02em; }

.hero-title {
  font-size: clamp(1.9em, 4vw, 2.7em);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

.card { padding: 2.75rem 2.25rem; }
.card-grid { gap: 3rem; }
.card-body { font-size: 0.95em; line-height: 1.85; }
.card-label { font-size: 0.85em; letter-spacing: 0.18em; }

/* Nav plus discrète : la charte fixe les liens à 1em (= taille du
   corps de texte), trop imposant pour une barre de navigation. */
.nav-logo,
.nav-link,
.nav-cta { font-size: 0.72em; }

.cta-btn {
  letter-spacing: 0.26em;
  padding: 1.1rem 2.75rem;
}
.cta-btn:hover { letter-spacing: 0.3em; background: #4a3216; }

.form-submit { padding: 1.1rem 1.5rem; }
.form-submit:hover { background: #4a3216; }

.nav-cta { padding: 0.6rem 1.5rem; letter-spacing: 0.2em; }

.nav-links { display: flex; align-items: center; gap: 1.75rem; }

/* ── Menu burger (mobile) ──
   Au-delà de 640px la nav reste la barre horizontale de la charte ;
   en dessous, les liens passent dans un panneau plein-écran ouvert
   par un bouton hamburger, pour garder une taille de texte lisible
   sans compresser/raccourcir les libellés. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--text-gold-light);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
  nav { padding: 1.1rem 1.5rem; }
}
@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.25rem;
    padding: 2rem;
    background: rgba(14, 12, 10, 0.98);
    border-left: 0.5px solid var(--border-on-dark);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-link, .nav-cta { font-size: 0.78em; }
  .nav-cta { width: 100%; text-align: center; }
}

/* The LLM interpretation HTML is always wrapped in <article> so it picks
   up charte.css's article h2/p/strong rich-text rules (serif headings,
   spacing rhythm) — without it, headings/bold render as unstyled browser
   defaults and the whole thing reads as flat plain text. charte.css only
   defines article h2/strong color for a light background; add the dark
   variant (and an h1 rule, since some interpretations open with one). */
article h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1.3;
  margin: 0 0 1.4rem;
}
.theme-dark article h1,
.theme-dark article h2 { color: var(--text-cream); }
.theme-light article h1,
.theme-light article h2 { color: var(--text-dark); }
.theme-dark article strong { color: var(--text-cream); }
.theme-light article strong { color: var(--text-dark); }

/* Espace dashboard: wider than the site's default .container (760px) —
   this page is read-heavy (long interpretations), not marketing copy, so
   it needs the extra column width. */
.container-wide { max-width: 1040px; margin: 0 auto; padding: 0 2rem; }

/* charte.css's .content-wrap padding shorthand ("Ntop 0 Nbottom") is
   vertical-only in intent, but its 3-value syntax also sets left/right
   to 0 — on every element that combines .content-wrap with .container
   (every content page: blog articles, etc.), that silently wipes out
   .container's horizontal padding at any viewport narrower than the
   760px column, leaving text flush against the screen edges. Restore
   it explicitly, and always adjust content-wrap's vertical padding via
   longhand top/bottom below so this doesn't recur. */
.content-wrap { padding-left: 2rem; padding-right: 2rem; }

/* charte.css's .content-header padding-top (9rem) was sized to clear a
   taller nav than this site ended up with — it reads as an oversized dark
   band above every article/page title. Tighten it here rather than in
   charte.css itself. */
.content-header { padding: 5rem 0 3rem; }

/* ── Espacements réduits sur mobile (charte.css fixe des paddings
   verticaux pensés pour desktop) ── */
@media (max-width: 768px) {
  section { padding: 4.5rem 0; }
  .cta-section { padding: 5rem 0; }
  .content-header { padding: 4rem 0 2.25rem; }
  .section-header { margin-bottom: 2.75rem; }
}
@media (max-width: 480px) {
  section { padding: 3.5rem 0; }
  .cta-section { padding: 3.75rem 0; }
  .content-wrap { padding-top: 3rem; padding-bottom: 4rem; }
}

@media (max-width: 400px) {
  /* .container garde le padding 2rem de la charte : les pages qui
     l'utilisent (articles de blog, marketing) sont du texte de lecture,
     pas des tableaux de bord — le resserrer nuisait au confort de
     lecture sur petit écran. */
  .container-wide,
  .field-group { padding: 0 1.25rem; }
}

/* Espace dashboard: Soleil/Lune/Ascendant summary, sized up so the three
   placements read as the headline of "Mon augure natal" rather than a
   caption line. */
.natal-summary {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.3em, 2.4vw, 1.7em);
  letter-spacing: 0.01em;
  color: var(--text-cream);
  margin: 0 auto 2.5rem;
  max-width: 640px;
}

/* Espace dashboard: one collapsible history entry per past augure result. */
.result-entry { max-width: 880px; margin: 1.5rem auto 0; text-align: left; padding-top: 1.2rem; }
.theme-dark .result-entry { border-top: 0.5px solid var(--border-on-dark); }
.theme-light .result-entry { border-top: 0.5px solid var(--border-on-light); }
.result-entry summary {
  cursor: pointer;
  font-family: var(--font-caps);
  font-size: 0.85em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.theme-dark .result-entry summary { color: var(--text-gold-light); }
.theme-light .result-entry summary { color: var(--text-dark-accent); }
.result-entry article { margin-top: 1rem; }

.status-note {
  font-size: 0.85em;
  font-style: italic;
  text-align: center;
  margin-top: 1rem;
}
.theme-dark .status-note { color: var(--text-gold); }
.theme-light .status-note { color: var(--text-dark-accent); }

.chart-text { max-width: 480px; margin: 3rem auto 0; text-align: center; }
.chart-text .eyebrow { display: block; margin-bottom: 1.5rem; }
.chart-text-list { list-style: none; text-align: left; font-size: 0.95em; }
.chart-text-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
}
.theme-dark .chart-text-list li { border-bottom: 0.5px solid var(--border-on-dark); }
.theme-light .chart-text-list li { border-bottom: 0.5px solid var(--border-on-light); }
.chart-text-symbol { display: inline-block; width: 1.4em; }
.chart-text-house { font-style: italic; opacity: 0.7; }

/* Charte's .card/.card-body/.card-label are only styled for fond noir —
   add the fond clair variants (reused on the home and blog card grids). */
.theme-light .card { border-color: var(--border-on-light); }
.theme-light .card-body { color: var(--text-dark-dim); }
.theme-light .card-label { color: var(--text-dark-accent); border-top-color: var(--border-on-light); }

.beta-tag {
  display: inline-block;
  font-family: var(--font-caps);
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.75rem;
  opacity: 0.75;
}

.transparency-note {
  font-size: 0.85em;
  line-height: 1.7;
  max-width: 560px;
  margin: 3rem auto 0;
  text-align: center;
}
.theme-dark .transparency-note { color: var(--text-gold-light); }
.theme-light .transparency-note { color: var(--text-dark-dim); }

/* ── Footer links (à propos, mentions légales, ...) ── */
.footer-links { margin-top: 0.5rem; }
.footer-links a {
  color: inherit;
  text-decoration: none;
  margin: 0 0.6rem;
}
.footer-links a:hover { text-decoration: underline; }

/* ── Home: "ce qui s'écrit ici" rubric list (moved out of an inline
   <style> block in home.html — invalid there since it sat inside <body>,
   and it duplicated .index-list/.index-title already used elsewhere). ── */
.glyph {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--text-gold);
  opacity: 0.9;
}
.theme-light .glyph { color: var(--text-dark-accent); }
.glyph-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  color: currentColor;
}
.stage-label {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-gold);
  display: block;
  margin-bottom: 0.75rem;
}
.index-list { list-style: none; padding: 0; margin: 0; }
.index-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--border-on-light); }
.index-list li:last-child { border-bottom: none; }
.index-list a { color: inherit; text-decoration: none; display: block; }
.index-list a:hover .index-title { text-decoration: underline; }
.index-title {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dark-accent);
  display: block;
  margin-bottom: 0.4rem;
}

/* ── Blog article: "à lire ensuite" ── */
.related-articles-inline {
  margin-top: 3.5rem;
  padding-top: 2rem;
  font-size: 0.9em;
}
.theme-light .related-articles-inline { border-top: 0.5px solid var(--border-on-light); }
.theme-dark .related-articles-inline { border-top: 0.5px solid var(--border-on-dark); }